layout

src/ts/containers/test/Components.tsx

@@ -7,12 +7,6 @@ import { Targets } from './Targets';
 
 import Tab, { TabProps } from 'semantic-ui-react/dist/commonjs/modules/Tab';
 
-const panes = [
-  { menuItem: 'Tab 1', render: () => <Tab.Pane>Tab 1 Content</Tab.Pane> },
-  { menuItem: 'Tab 2', render: () => <Tab.Pane>Tab 2 Content</Tab.Pane> },
-  { menuItem: 'Tab 3', render: () => <Tab.Pane>Tab 3 Content</Tab.Pane> },
-];
-
 
 export class Components extends React.Component<any, any> {
 
@@ -29,41 +23,17 @@ export class Components extends React.Component<any, any> {
     });
   }
 
-  showContent() {
-    switch(this.state.no) {
-      case 0: {
-        return <Probes/>;
-      }
-      case 1: {
-        return <NoauthProbes/>;
-      }
-      case 2: {
-        return <SensorConfiguration/>;
-      }
-      case 3: {
-        return <Targets/>;
-      }
-      default: {
-      }
-    }
-  }
-
   render() {
 
+    const panes = [
+      { menuItem: 'Probes', render: () => <Tab.Pane attached={false}><Probes /></Tab.Pane> },
+      { menuItem: 'Noauth Probes', render: () => <Tab.Pane attached={false}><NoauthProbes /></Tab.Pane> },
+      { menuItem: 'Sensor Configuration', render: () => <Tab.Pane attached={false}><SensorConfiguration /></Tab.Pane> },
+      { menuItem: 'Targets', render: () => <Tab.Pane attached={false}><Targets /></Tab.Pane> },
+    ];
+
     return (
-      <div style={{margin:'20px'}}>
+      <Tab menu={{ pointing: true }} panes={panes} />
-        {/*<Tab panes={panes} />*/}
-        
-        <Button.Group>
-          <Button onClick={this.handleButton.bind(this, 0)}>Probe list</Button>
-          <Button onClick={this.handleButton.bind(this, 1)}>Noauth Probe list</Button>
-          <Button onClick={this.handleButton.bind(this, 2)}>Sensor Configuration</Button>
-          <Button onClick={this.handleButton.bind(this, 3)}>Target list</Button>
-        </Button.Group>
-        <div style={{margin:'20px'}}>
-          {this.showContent()}
-        </div>
-      </div>
     );
   }
 }

src/ts/containers/test/SensorConfiguration.tsx

@@ -167,7 +167,7 @@ export class CrawlerSelector extends React.Component<any, any> {
         key: crawler.id,
         text: crawler.name,
         value: crawler.name,
-        icon: 'windows',
+        icon: 'check', //or close?
       };
       crawlerOptions.push(option);
     }

src/ts/containers/test/Targets.tsx

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { Table, Grid, Segment, Button, Container } from 'semantic-ui-react';
+import { Table, Grid, Segment, Button, Container, Modal } from 'semantic-ui-react';
 import { TargetDetails } from './TargetDetails';
 
 export class Targets extends React.Component<any, any> {
@@ -7,6 +7,7 @@ export class Targets extends React.Component<any, any> {
   constructor(props: any, context: any) {
     super(props, context);
     this.state = {
+      openAddTarget: false,
     };
   }
 
@@ -15,7 +16,9 @@ export class Targets extends React.Component<any, any> {
   }
 
   handleAddTarget() {
-    alert('Add a Target');
+    this.setState({
+      openAddTarget: true,
+    });
   }
 
   render() {
@@ -29,12 +32,26 @@ export class Targets extends React.Component<any, any> {
             </Grid.Column>
             <Grid.Column>
               <TargetTable />
-              <Button content='Add' icon='add' labelPosition='left' floated='right' positive onClick={this.handleAddTarget.bind(this)}/>
+              <Button content='Add' icon='add' labelPosition='left' floated='right' positive onClick={this.handleAddTarget.bind(this)} />
             </Grid.Column>
           </Grid.Row>
         </Grid>
-          
+
-        <TargetDetails target={this.state.selected}/>
+        <TargetDetails target={this.state.selected} />
+        <Modal
+          open={this.state.openAddTarget}
+        >
+          <Modal.Header>
+            Adding a Target
+          </Modal.Header>
+          <Modal.Content>
+            <p>contents</p>
+          </Modal.Content>
+          <Modal.Actions>
+            <Button negative onClick={ ()=> this.setState({openAddTarget:false}) }>Cancel</Button>
+            <Button positive labelPosition='right' icon='checkmark' content='Done' />
+          </Modal.Actions>
+        </Modal>
       </Container>
     );
   }

src/ts/containers/test/layout/Footer.tsx

@@ -0,0 +1,22 @@
+import * as React from 'react';
+import { Container } from 'semantic-ui-react';
+
+export class Footer extends React.Component<any, any> {
+
+  constructor(props: any, context: any) {
+    super(props, context);
+    this.state = {
+   };
+  }
+
+  render() {
+    return (
+      <Container>
+        Footer area
+      </Container>
+    );
+  }
+}
+
+
+

src/ts/containers/test/layout/Header.tsx

@@ -0,0 +1,21 @@
+import * as React from 'react';
+import { Container } from 'semantic-ui-react';
+import { TopBar } from '../TopBar';
+
+export class Header extends React.Component<any, any> {
+
+  constructor(props: any, context: any) {
+    super(props, context);
+    this.state = {
+   };
+  }
+
+  render() {
+    return (
+      <TopBar/>
+    );
+  }
+}
+
+
+

src/ts/containers/test/layout/Layout.tsx

@@ -1,20 +1,25 @@
 import * as React from 'react';
-
+import { Container } from 'semantic-ui-react';
-
+import { Header } from './Header';
+import { Footer } from './Footer';
 
 export class Layout extends React.Component<any, any> {
 
   constructor(props: any, context: any) {
     super(props, context);
     this.state = {
-   };
+    };
   }
 
   render() {
     return (
-      <div>
+      <Container>
-        Laytout용 페이지
+        <Header />
-      </div>
+        <Container>
+          contents area
+        </Container>
+        <Footer />
+      </Container>
     );
   }
 }