From 53fd76709770e5e7ed6c603ee1db731ea8b902c0 Mon Sep 17 00:00:00 2001
From: sunny <sunny@loafle.com>
Date: Fri, 14 Jul 2017 18:13:35 +0900
Subject: [PATCH] Design

---
 src/ts/Routes.tsx                             |   3 +
 src/ts/containers/test/DiscoveryDetails.tsx   |   6 +-
 src/ts/containers/test/DiscoveryProbe.tsx     |   7 +-
 src/ts/containers/test/DiscoveryTable.tsx     |   6 +-
 src/ts/containers/test/NoauthProbes.tsx       |  20 +--
 src/ts/containers/test/PWChange.tsx           |  48 ++++---
 src/ts/containers/test/ProbeDetails.tsx       | 102 +++++++-------
 src/ts/containers/test/ProbeDown.tsx          |  43 +++---
 src/ts/containers/test/Probes.tsx             |  49 +++----
 .../containers/test/SensorConfiguration.tsx   |  46 ++++---
 src/ts/containers/test/SensorDetails.tsx      | 102 +++++++-------
 src/ts/containers/test/SensorItems.tsx        |   7 +-
 src/ts/containers/test/Sensors.tsx            |   7 +-
 src/ts/containers/test/SignIn.tsx             |  55 +++-----
 src/ts/containers/test/SignUp.tsx             | 130 ++++--------------
 src/ts/containers/test/TargetDetails.tsx      |  17 +--
 src/ts/containers/test/Targets.tsx            |  10 +-
 src/ts/containers/test/TopBar.tsx             |   9 +-
 src/ts/containers/test/layout/Footer.tsx      |   1 +
 src/ts/containers/test/layout/Layout.tsx      |  49 ++++---
 20 files changed, 325 insertions(+), 392 deletions(-)

diff --git a/src/ts/Routes.tsx b/src/ts/Routes.tsx
index 70bfbb4..08d6d0a 100644
--- a/src/ts/Routes.tsx
+++ b/src/ts/Routes.tsx
@@ -9,6 +9,7 @@ import { PWChange } from './containers/test/PWChange';
 import { ProbeDown } from './containers/test/ProbeDown';
 import { DiscoveryDetails } from './containers/test/DiscoveryDetails'
 import { Components } from './containers/test/Components';
+import { Sensors } from './containers/test/Sensors';
 // import { Layout } from './containers/test/layout/Layout'
 import { Tree } from './containers/test/commons/Tree';
 
@@ -54,6 +55,8 @@ export class Routes extends React.Component<any, any> {
 
           <Route exact path='/test14' component={Components} />
 
+          <Route exact path='/test21' component={Sensors} />
+
         </Switch>
 
       </div>
diff --git a/src/ts/containers/test/DiscoveryDetails.tsx b/src/ts/containers/test/DiscoveryDetails.tsx
index a2f7fc9..90180d6 100644
--- a/src/ts/containers/test/DiscoveryDetails.tsx
+++ b/src/ts/containers/test/DiscoveryDetails.tsx
@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { Button, Modal, Checkbox } from 'semantic-ui-react';
+import { Button, Modal, Checkbox, Header, Container } from 'semantic-ui-react';
 import { DiscoveryProbe } from './DiscoveryProbe';
 import { DiscoveryTable } from './DiscoveryTable';
 
@@ -56,7 +56,7 @@ export class DiscoveryDetails extends React.Component<any, any> {
 
   render() {
     return (
-      <div>
+      <Container fluid>
         <div style={{ margin: '20px' }}>
           <DiscoveryProbe probe={this.probeTemp}/>
         </div>
@@ -75,7 +75,7 @@ export class DiscoveryDetails extends React.Component<any, any> {
           </Modal.Actions>
         </Modal>
 
-      </div>
+      </Container>
 
     );
   }
diff --git a/src/ts/containers/test/DiscoveryProbe.tsx b/src/ts/containers/test/DiscoveryProbe.tsx
index 2431a21..c12d6bb 100644
--- a/src/ts/containers/test/DiscoveryProbe.tsx
+++ b/src/ts/containers/test/DiscoveryProbe.tsx
@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { Table, Label } from 'semantic-ui-react';
+import { Table, Label, Header, Container } from 'semantic-ui-react';
 
 
 export class DiscoveryProbe extends React.Component<any, any> {
@@ -19,7 +19,8 @@ export class DiscoveryProbe extends React.Component<any, any> {
 
   render() {
     return (
-      <div>Probe Details...
+      <Container fluid>
+        <Header as='h3' dividing> Probe Details</Header>
         <Table celled={false}>
           <Table.Body>
             <Table.Row>
@@ -73,7 +74,7 @@ export class DiscoveryProbe extends React.Component<any, any> {
           </Table.Body>
         </Table>
 
-      </div>
+      </Container>
     )
   }
 
diff --git a/src/ts/containers/test/DiscoveryTable.tsx b/src/ts/containers/test/DiscoveryTable.tsx
index 946fa85..67d1228 100644
--- a/src/ts/containers/test/DiscoveryTable.tsx
+++ b/src/ts/containers/test/DiscoveryTable.tsx
@@ -1,5 +1,5 @@
 import * as React from 'react';
-import {Table, Button, Input, InputProps, ButtonProps, Dropdown } from 'semantic-ui-react';
+import {Table, Button, Input, InputProps, ButtonProps, Dropdown, Container } from 'semantic-ui-react';
 
 export class DiscoveryTable extends React.Component<any, any> {
 
@@ -87,7 +87,7 @@ export class DiscoveryTable extends React.Component<any, any> {
 
   render() {
     return (
-      <div>
+      <Container fluid>
         <Table celled>
           <Table.Body>
             <Table.Row>
@@ -122,7 +122,7 @@ export class DiscoveryTable extends React.Component<any, any> {
           </Table.Body>
         </Table>
         <Button floated='right' onClick={this.discoveryStartHandler.bind(this)}> Start </Button>
-      </div>
+      </Container>
     );
   }
 }
\ No newline at end of file
diff --git a/src/ts/containers/test/NoauthProbes.tsx b/src/ts/containers/test/NoauthProbes.tsx
index 2ebb02b..24cd66c 100644
--- a/src/ts/containers/test/NoauthProbes.tsx
+++ b/src/ts/containers/test/NoauthProbes.tsx
@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { Table, Checkbox, Button } from 'semantic-ui-react';
+import { Table, Checkbox, Button, Header, Container } from 'semantic-ui-react';
 
 
 export class NoauthProbes extends React.Component<any, any> {
@@ -92,7 +92,8 @@ export class NoauthProbes extends React.Component<any, any> {
   render() {
 
     return (
-      <div>
+      <Container fluid>
+        <Header as='h3' dividing>Noauth Probes</Header>
         <Table celled selectable striped>
           <Table.Header>
             <Table.Row>
@@ -121,18 +122,11 @@ export class NoauthProbes extends React.Component<any, any> {
               </Table.Row>
             ))}
           </Table.Body>
-
-          <Table.Footer fullWidth>
-            <Table.Row>
-              <Table.HeaderCell />
-              <Table.HeaderCell colSpan='6'>
-                <Button primary floated={'right'} onClick={this.handleAccept.bind(this)}>Accept</Button>
-                <Button floated={'right'} onClick={this.handleDeny.bind(this)}>Deny</Button>
-              </Table.HeaderCell>
-            </Table.Row>
-          </Table.Footer>
         </Table>
-      </div>
+
+        <Button primary floated={'right'} onClick={this.handleAccept.bind(this)}>Accept</Button>
+        <Button floated={'right'} onClick={this.handleDeny.bind(this)}>Deny</Button>
+      </Container>
     );
   }
 }
diff --git a/src/ts/containers/test/PWChange.tsx b/src/ts/containers/test/PWChange.tsx
index 8bb9c81..d78febc 100644
--- a/src/ts/containers/test/PWChange.tsx
+++ b/src/ts/containers/test/PWChange.tsx
@@ -1,7 +1,7 @@
 import *as React from 'react'
 import {
-  Icon, Label, Input, InputOnChangeData,
-  Select, Button
+  Input, InputOnChangeData,
+  Select, Button, Grid, Form, Container
 } from 'semantic-ui-react'
 
 
@@ -34,24 +34,32 @@ export class PWChange extends React.Component<any, any> {
 
 
     return (
-      <div>
-
-        
-        <Input label='Password' placeholder='Password' type='password' onChange={
-          (event: React.SyntheticEvent<HTMLInputElement>, data: InputOnChangeData) => {
-            this.setState({ pass: data.value });
-          }} />
-        <br />
-        <Input label='Password Confirm' placeholder='Password Confirm' type='password' onChange={
-          (event: React.SyntheticEvent<HTMLInputElement>, data: InputOnChangeData) => {
-            this.setState({ passCon: data.value });
-          }} />
-        <br />
-
-
-        <Button onClick={this.onSubmit}>    Submit  </Button>
-        <Button>    Cancel  </Button>
-      </div>
+      <Container fluid>
+        <Grid>
+          <Grid.Row>
+            <Grid.Column mobile={16} tablet={5} computer={5}>
+            </Grid.Column>
+            <Grid.Column mobile={16} tablet={6} computer={6}>
+              <Form>
+                <Form.Input placeholder='Password' type='password' onChange={
+                  (event: React.SyntheticEvent<HTMLInputElement>, data: InputOnChangeData) => {
+                    this.setState({ pass: data.value });
+                  }} />
+                <Form.Input placeholder='Password Confirm' type='password' onChange={
+                  (event: React.SyntheticEvent<HTMLInputElement>, data: InputOnChangeData) => {
+                    this.setState({ passCon: data.value });
+                  }} />
+                <Form.Group>
+                  <Button primary fluid style={{margin:'7'}} onClick={this.onSubmit}>    Submit  </Button>
+                  <Button fluid style={{margin:'7'}}>    Cancel  </Button>
+                </Form.Group>
+              </Form>
+            </Grid.Column>
+            <Grid.Column mobile={16} tablet={4} computer={5}>
+            </Grid.Column>
+          </Grid.Row>
+        </Grid>
+      </Container>
     );
   }
 
diff --git a/src/ts/containers/test/ProbeDetails.tsx b/src/ts/containers/test/ProbeDetails.tsx
index ac88c68..fff8a5d 100644
--- a/src/ts/containers/test/ProbeDetails.tsx
+++ b/src/ts/containers/test/ProbeDetails.tsx
@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { Button, Table, Label, Segment, Header } from 'semantic-ui-react';
+import { Button, Table, Label, Segment, Header, Container } from 'semantic-ui-react';
 import { TargetTable } from './Targets';
 import { DetailContainer } from './commons/DetailContainer';
 
@@ -56,62 +56,54 @@ export class ProbeBasicInfo extends React.Component<any, any> {
 
   render() {
     return (
-      <Segment.Group>
-        <Segment inverted color='grey'>
-          <h4>Probe Details</h4>
-        </Segment>
-        <Segment>
-          <Table celled={false} basic='very'>
-            <Table.Body>
-              <Table.Row>
-                <Table.Cell>
-                  <Header size='small'>Domain</Header>
-                </Table.Cell>
-                <Table.Cell>{this.props.probe.domain.name}</Table.Cell>
-              </Table.Row>
-              <Table.Row>
-                <Table.Cell>
-                  <Header size='small'>Status</Header>
-                </Table.Cell>
-                <Table.Cell>{this.props.probe.metaProbeStatus.name}</Table.Cell>
-              </Table.Row>
-              <Table.Row>
-                <Table.Cell>
-                  <Header size='small'>Host IP</Header>
-                </Table.Cell>
-                <Table.Cell>????</Table.Cell>
-              </Table.Row>
-              <Table.Row>
-                <Table.Cell>
-                  <Header size='small'>Host Name</Header>
-                </Table.Cell>
-                <Table.Cell>????</Table.Cell>
-              </Table.Row>
-              <Table.Row>
-                <Table.Cell>
-                  <Header size='small'>Authorized at</Header>
-                </Table.Cell>
-                <Table.Cell>{this.props.probe.createDate}</Table.Cell>
-              </Table.Row>
-              <Table.Row>
-                <Table.Cell>
-                  <Header size='small'>Description</Header>
-                </Table.Cell>
-                <Table.Cell>{this.props.probe.description}</Table.Cell>
-              </Table.Row>
+      <Container fluid>
+        <Header as='h3' dividing>Probe Info</Header>
+        <Table celled={false}>
+          <Table.Body>
+            <Table.Row>
+              <Table.Cell collapsing>
+                <Header size='small'>Domain</Header>
+              </Table.Cell>
+              <Table.Cell>{this.props.probe.domain.name}</Table.Cell>
+            </Table.Row>
+            <Table.Row>
+              <Table.Cell collapsing>
+                <Header size='small'>Status</Header>
+              </Table.Cell>
+              <Table.Cell>{this.props.probe.metaProbeStatus.name}</Table.Cell>
+            </Table.Row>
+            <Table.Row>
+              <Table.Cell collapsing>
+                <Header size='small'>Host IP</Header>
+              </Table.Cell>
+              <Table.Cell>????</Table.Cell>
+            </Table.Row>
+            <Table.Row>
+              <Table.Cell collapsing>
+                <Header size='small'>Host Name</Header>
+              </Table.Cell>
+              <Table.Cell>????</Table.Cell>
+            </Table.Row>
+            <Table.Row>
+              <Table.Cell collapsing>
+                <Header size='small'>Authorized at</Header>
+              </Table.Cell>
+              <Table.Cell>{this.props.probe.createDate}</Table.Cell>
+            </Table.Row>
+            <Table.Row>
+              <Table.Cell collapsing>
+                <Header size='small'>Description</Header>
+              </Table.Cell>
+              <Table.Cell>{this.props.probe.description}</Table.Cell>
+            </Table.Row>
+          </Table.Body>
+        </Table>
 
-              <Table.Row>
-                <Table.Cell colSpan='4'>
-                  <Button content='Back' icon='left arrow' labelPosition='left' onClick={this.handleBack.bind(this)} />
-                  <Button content='Discovery' icon='search' labelPosition='left' floated={'right'} positive onClick={this.handleDiscovery} />
-                  {this.showStartStopBtn()}
+        <Button content='List' icon='list' labelPosition='left' onClick={this.handleBack.bind(this)} />
+        <Button content='Discovery' icon='search' labelPosition='left' floated={'right'} positive onClick={this.handleDiscovery} />
+        {this.showStartStopBtn()}
 
-                </Table.Cell>
-              </Table.Row>
-            </Table.Body>
-          </Table>
-        </Segment>
-      </Segment.Group>
+      </Container>
     );
   }
 }
\ No newline at end of file
diff --git a/src/ts/containers/test/ProbeDown.tsx b/src/ts/containers/test/ProbeDown.tsx
index 5019a9f..a79eeda 100644
--- a/src/ts/containers/test/ProbeDown.tsx
+++ b/src/ts/containers/test/ProbeDown.tsx
@@ -1,6 +1,6 @@
 import *as React from 'react'
 import {
-  Grid, Menu, Segment, MenuItemProps
+  Grid, Menu, Segment, MenuItemProps, Header, Container
 } from 'semantic-ui-react'
 
 
@@ -31,29 +31,30 @@ handleItemClick = (event: React.SyntheticEvent<HTMLAnchorElement>, data: MenuIte
 
 const { activeItem } = this.state
     return (
-      <div>
-       <Grid>
-        <Grid.Column width={4}>
-          <Menu fluid vertical tabular>
-            {osNames.map((os: string) => {
-                  return (
-                     <Menu.Item name={os} active={activeItem === os} onClick={this.handleItemClick} />
-                  )
-            })}
+      <Container fluid>
+        <Header as='h3' dividing>Probe Download</Header>
+        <Grid>
+          <Grid.Column width={4}>
+            <Menu fluid vertical tabular>
+              {osNames.map((os: string) => {
+                    return (
+                      <Menu.Item name={os} active={activeItem === os} onClick={this.handleItemClick} />
+                    )
+              })}
 
 
-           
-          </Menu>
-        </Grid.Column>
-        
+            
+            </Menu>
+          </Grid.Column>
+          
 
-        <Grid.Column stretched width={12}>
-          <Segment>
-            {this.state.activeItem} Download Page
-          </Segment>
-        </Grid.Column>
-      </Grid>
-      </div>
+          <Grid.Column stretched width={12}>
+            <Segment vertical>
+              {this.state.activeItem} Download Page
+            </Segment>
+          </Grid.Column>
+        </Grid>
+      </Container>
     );
   }
 
diff --git a/src/ts/containers/test/Probes.tsx b/src/ts/containers/test/Probes.tsx
index ac3b12b..976176b 100644
--- a/src/ts/containers/test/Probes.tsx
+++ b/src/ts/containers/test/Probes.tsx
@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { Table } from 'semantic-ui-react';
+import { Table, Header, Container } from 'semantic-ui-react';
 import { ProbeDetails } from './ProbeDetails';
 
 
@@ -84,29 +84,32 @@ export class Probes extends React.Component<any, any> {
     } 
 
     return (
-      <Table selectable striped>
-        <Table.Header>
-          <Table.Row>
-            <Table.HeaderCell textAlign={'center'}>Name</Table.HeaderCell>
-            <Table.HeaderCell textAlign={'center'}>CIDR</Table.HeaderCell>
-            <Table.HeaderCell textAlign={'center'}>Status</Table.HeaderCell>
-            <Table.HeaderCell textAlign={'center'}>Target Count</Table.HeaderCell>
-            <Table.HeaderCell textAlign={'center'}>Sensor Count</Table.HeaderCell>
-          </Table.Row>
-        </Table.Header>
-
-        <Table.Body>
-          {this.data.map((probe: any, index: number) => (
-            <Table.Row key={index} onClick={this.handleSelect.bind(this, probe)}>
-              <Table.Cell >todo. {probe.name}</Table.Cell>
-              <Table.Cell>todo. {probe.cidr}</Table.Cell>
-              <Table.Cell negative={this.checkCellStatus(probe.metaProbeStatus)} textAlign={'center'}>{probe.metaProbeStatus.name}</Table.Cell>
-              <Table.Cell textAlign={'center'} >todo. {probe.targetCnt}</Table.Cell>
-              <Table.Cell textAlign={'center'} >todo. {probe.sensorCnt}</Table.Cell>
+      <Container fluid>
+        <Header as='h3' dividing>Probe</Header>
+        <Table selectable striped>
+          <Table.Header>
+            <Table.Row>
+              <Table.HeaderCell textAlign={'center'}>Name</Table.HeaderCell>
+              <Table.HeaderCell textAlign={'center'}>CIDR</Table.HeaderCell>
+              <Table.HeaderCell textAlign={'center'}>Status</Table.HeaderCell>
+              <Table.HeaderCell textAlign={'center'}>Target Count</Table.HeaderCell>
+              <Table.HeaderCell textAlign={'center'}>Sensor Count</Table.HeaderCell>
             </Table.Row>
-          ))}
-        </Table.Body>
-      </Table>
+          </Table.Header>
+
+          <Table.Body>
+            {this.data.map((probe: any, index: number) => (
+              <Table.Row key={index} onClick={this.handleSelect.bind(this, probe)}>
+                <Table.Cell >todo. {probe.name}</Table.Cell>
+                <Table.Cell>todo. {probe.cidr}</Table.Cell>
+                <Table.Cell negative={this.checkCellStatus(probe.metaProbeStatus)} textAlign={'center'}>{probe.metaProbeStatus.name}</Table.Cell>
+                <Table.Cell textAlign={'center'} >todo. {probe.targetCnt}</Table.Cell>
+                <Table.Cell textAlign={'center'} >todo. {probe.sensorCnt}</Table.Cell>
+              </Table.Row>
+            ))}
+          </Table.Body>
+        </Table>
+      </Container>
     );
   }
 }
diff --git a/src/ts/containers/test/SensorConfiguration.tsx b/src/ts/containers/test/SensorConfiguration.tsx
index ecbbdb1..f1551d4 100644
--- a/src/ts/containers/test/SensorConfiguration.tsx
+++ b/src/ts/containers/test/SensorConfiguration.tsx
@@ -93,8 +93,8 @@ export class ConfigStepper extends React.Component<any, any> {
 
   render() {
     return (
-      <div>
-        <Step.Group>
+      <Container fluid>
+        <Step.Group fluid>
           <Step active={this.handleActive(1)} completed={this.handleCompleted(1)}>
             <Icon name='settings' />
             <Step.Content title='Step 1' description='골라골라 크롤러를 골라' />
@@ -118,7 +118,7 @@ export class ConfigStepper extends React.Component<any, any> {
           <Button.Or />
           <Button content='Next' icon='right arrow' labelPosition='right' positive onClick={this.handleNext.bind(this)} disabled={this.checkNextDisabled()} />
         </Button.Group>
-      </div>
+      </Container>
     );
   }
 }
@@ -197,26 +197,28 @@ export class CrawlerSelector extends React.Component<any, any> {
   render() {
 
     return (
-      <div>
-        <Grid columns={1}>
-          <Grid.Column>
-            <Segment raised>
-              <Loader active={this.state.isInstalling} size='large' >Installing the Crawler</Loader>
-              <Label color='red' ribbon>INFO</Label>
-              <span>Choose a Crawler type.</span>
-              <br />
-              <br />
-              <Dropdown openOnFocus
-                placeholder='Select Crawler' selection options={this.crawlers} onChange={this.handleCrawlerSelection.bind(this)} />
+      <Container fluid>
+        <Segment raised>
+          <Loader active={this.state.isInstalling} size='large' >Installing the Crawler</Loader>
+          <Icon name='checkmark' /> Choose a Crawler type.
+          <br />
+          <br />
+          <Grid>
+            <Grid.Row>
+              <Grid.Column width='4'>
+                <Dropdown openOnFocus
+                  placeholder='Select Crawler' selection options={this.crawlers} onChange={this.handleCrawlerSelection.bind(this)} />
 
-              <br />
-              <br />
-              <CrawlerAuthInputs crawler={this.state.selected} />
-            </Segment>
-          </Grid.Column>
-        </Grid>
-
-      </div>
+                <br />
+                <br />
+              </Grid.Column>
+              <Grid.Column>
+                <CrawlerAuthInputs crawler={this.state.selected} />
+              </Grid.Column>
+            </Grid.Row>
+          </Grid>
+        </Segment>
+      </Container>
     );
   }
 }
diff --git a/src/ts/containers/test/SensorDetails.tsx b/src/ts/containers/test/SensorDetails.tsx
index caab5b5..dd0c101 100644
--- a/src/ts/containers/test/SensorDetails.tsx
+++ b/src/ts/containers/test/SensorDetails.tsx
@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { Button, Table, Label, Segment, Header } from 'semantic-ui-react';
+import { Button, Table, Label, Segment, Header, Container } from 'semantic-ui-react';
 import { DetailContainer } from './commons/DetailContainer';
 import { SensorItems } from './SensorItems';
 
@@ -57,62 +57,54 @@ export class SensorBasicInfo extends React.Component<any, any> {
 
   render() {
     return (
-      <Segment.Group>
-        <Segment inverted color='grey'>
-          <h4>Probe Details</h4>
-        </Segment>
-        <Segment>
-          <Table celled={false} basic='very'>
-            <Table.Body>
-              <Table.Row>
-                <Table.Cell>
-                  <Header size='small'>Domain</Header>
-                </Table.Cell>
-                <Table.Cell>{this.props.probe.domain.name}</Table.Cell>
-              </Table.Row>
-              <Table.Row>
-                <Table.Cell>
-                  <Header size='small'>Status</Header>
-                </Table.Cell>
-                <Table.Cell>{this.props.probe.metaProbeStatus.name}</Table.Cell>
-              </Table.Row>
-              <Table.Row>
-                <Table.Cell>
-                  <Header size='small'>Host IP</Header>
-                </Table.Cell>
-                <Table.Cell>????</Table.Cell>
-              </Table.Row>
-              <Table.Row>
-                <Table.Cell>
-                  <Header size='small'>Host Name</Header>
-                </Table.Cell>
-                <Table.Cell>????</Table.Cell>
-              </Table.Row>
-              <Table.Row>
-                <Table.Cell>
-                  <Header size='small'>Authorized at</Header>
-                </Table.Cell>
-                <Table.Cell>{this.props.probe.createDate}</Table.Cell>
-              </Table.Row>
-              <Table.Row>
-                <Table.Cell>
-                  <Header size='small'>Description</Header>
-                </Table.Cell>
-                <Table.Cell>{this.props.probe.description}</Table.Cell>
-              </Table.Row>
+      <Container fluid>
+        <Header as='h3' dividing>Sensor Details</Header>
+        <Table celled={false}>
+          <Table.Body>
+            <Table.Row>
+              <Table.Cell>
+                <Header size='small'>Domain</Header>
+              </Table.Cell>
+              <Table.Cell>{this.props.probe.domain.name}</Table.Cell>
+            </Table.Row>
+            <Table.Row>
+              <Table.Cell>
+                <Header size='small'>Status</Header>
+              </Table.Cell>
+              <Table.Cell>{this.props.probe.metaProbeStatus.name}</Table.Cell>
+            </Table.Row>
+            <Table.Row>
+              <Table.Cell>
+                <Header size='small'>Host IP</Header>
+              </Table.Cell>
+              <Table.Cell>????</Table.Cell>
+            </Table.Row>
+            <Table.Row>
+              <Table.Cell>
+                <Header size='small'>Host Name</Header>
+              </Table.Cell>
+              <Table.Cell>????</Table.Cell>
+            </Table.Row>
+            <Table.Row>
+              <Table.Cell>
+                <Header size='small'>Authorized at</Header>
+              </Table.Cell>
+              <Table.Cell>{this.props.probe.createDate}</Table.Cell>
+            </Table.Row>
+            <Table.Row>
+              <Table.Cell>
+                <Header size='small'>Description</Header>
+              </Table.Cell>
+              <Table.Cell>{this.props.probe.description}</Table.Cell>
+            </Table.Row>
+          </Table.Body>
+        </Table>
 
-              <Table.Row>
-                <Table.Cell colSpan='4'>
-                  <Button content='Back' icon='left arrow' labelPosition='left' onClick={this.handleBack.bind(this)} />
-                  <Button content='Discovery' icon='search' labelPosition='left' floated={'right'} positive onClick={this.handleDiscovery} />
-                  {this.showStartStopBtn()}
+        <Button content='Back' icon='left arrow' labelPosition='left' onClick={this.handleBack.bind(this)} />
+        <Button content='Discovery' icon='search' labelPosition='left' floated={'right'} positive onClick={this.handleDiscovery} />
+        {this.showStartStopBtn()}
 
-                </Table.Cell>
-              </Table.Row>
-            </Table.Body>
-          </Table>
-        </Segment>
-      </Segment.Group>
+      </Container>
     );
   }
 }
\ No newline at end of file
diff --git a/src/ts/containers/test/SensorItems.tsx b/src/ts/containers/test/SensorItems.tsx
index 42ebd0d..20f67a8 100644
--- a/src/ts/containers/test/SensorItems.tsx
+++ b/src/ts/containers/test/SensorItems.tsx
@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { Table, Button } from 'semantic-ui-react';
+import { Table, Button, Header, Container } from 'semantic-ui-react';
 
 export class SensorItems extends React.Component<any, any> {
 
@@ -15,9 +15,10 @@ export class SensorItems extends React.Component<any, any> {
 
   render() {
     return (
-      <div>
+      <Container fluid>
+        <Header as='h3' dividing>Sensor Item</Header>
         Sensor Item List
-      </div>
+      </Container>
     );
   }
 }
diff --git a/src/ts/containers/test/Sensors.tsx b/src/ts/containers/test/Sensors.tsx
index 6400139..7fc240b 100644
--- a/src/ts/containers/test/Sensors.tsx
+++ b/src/ts/containers/test/Sensors.tsx
@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { Table, Button } from 'semantic-ui-react';
+import { Table, Button, Header, Container } from 'semantic-ui-react';
 import { SensorDetails } from './SensorDetails';
 
 export class Sensors extends React.Component<any, any> {
@@ -98,7 +98,8 @@ export class Sensors extends React.Component<any, any> {
       return <SensorDetails sensor={this.state.selected} />;
     } 
     return (
-      <div>
+      <Container fluid>
+        <Header as='h3' dividing>Sensors</Header>
         <Table celled selectable striped>
           <Table.Header>
             <Table.Row>
@@ -124,7 +125,7 @@ export class Sensors extends React.Component<any, any> {
           </Table.Body>
         </Table>
         <Button content='Add' icon='add' labelPosition='left' floated='right' positive onClick={this.handleAddSensor.bind(this)} />
-      </div>
+      </Container>
     );
   }
 }
diff --git a/src/ts/containers/test/SignIn.tsx b/src/ts/containers/test/SignIn.tsx
index 1644080..b56b1b5 100644
--- a/src/ts/containers/test/SignIn.tsx
+++ b/src/ts/containers/test/SignIn.tsx
@@ -1,7 +1,7 @@
 import *as React from 'react'
 import {
-  Icon, Label, Input, InputOnChangeData,
-  Select, Button, Header, Modal, Grid, Container, Segment
+  Input, InputOnChangeData,
+  Select, Button, Header, Modal, Grid, Form, Container
 } from 'semantic-ui-react'
 
 
@@ -52,43 +52,29 @@ export class SignIn extends React.Component<any, any> {
 
 
     return (
-      <Container>
+      <Container fluid>
         <Grid>
           <Grid.Row>
             <Grid.Column mobile={16} tablet={5} computer={5}>
             </Grid.Column>
             <Grid.Column mobile={16} tablet={6} computer={6}>
-              <Grid columns='equal'>
-                <Grid.Row style={{padding:'5'}}>
-                  <Grid.Column>
-                    <Input fluid placeholder='Email' onChange={
-                    (event: React.SyntheticEvent<HTMLInputElement>, data: InputOnChangeData) => {
-                      this.setState({ email: data.value });
-                    }} />
-                  </Grid.Column>
-                </Grid.Row>
-                <Grid.Row style={{padding:'5'}}>
-                  <Grid.Column>
-                    <Input fluid placeholder='Password' type='password' onChange={
-                    (event: React.SyntheticEvent<HTMLInputElement>, data: InputOnChangeData) => {
-                      this.setState({ pass: data.value });
-                    }} />
-                  </Grid.Column>
-                </Grid.Row>
-                <Grid.Row style={{padding:'5'}}>
-                  <Grid.Column textAlign='right'>
-                    <a style={{fontSize:10}} onClick={this.forgotPopupOpen}>Forgot Password</a>
-                  </Grid.Column>
-                </Grid.Row>
-                <Grid.Row style={{padding:'5'}}>
-                  <Grid.Column>
-                    <Button fluid primary onClick={this.onSignIn}>    Sign In  </Button>
-                  </Grid.Column>
-                  <Grid.Column>
-                    <Button fluid href='/#/test2'>    Sign Up  </Button>
-                  </Grid.Column>
-                </Grid.Row>
-              </Grid>
+              <Form>
+                <Form.Input fluid placeholder='Email' onChange={
+                (event: React.SyntheticEvent<HTMLInputElement>, data: InputOnChangeData) => {
+                  this.setState({ email: data.value });
+                }} />
+                <Form.Input fluid placeholder='Password' type='password' onChange={
+                (event: React.SyntheticEvent<HTMLInputElement>, data: InputOnChangeData) => {
+                  this.setState({ pass: data.value });
+                }} />
+                <div style={{textAlign:'right'}}>
+                  <a style={{fontSize:10}} onClick={this.forgotPopupOpen}>Forgot Password</a>
+                </div>
+                <Form.Group>
+                <Button fluid primary style={{margin:'7'}} onClick={this.onSignIn}>    Sign In  </Button>
+                <Button fluid style={{margin:'7'}} href='/#/test2'>    Sign Up  </Button>
+                </Form.Group>
+              </Form>
             </Grid.Column>
             <Grid.Column mobile={16} tablet={4} computer={5}>
             </Grid.Column>
@@ -127,7 +113,6 @@ export class SignIn extends React.Component<any, any> {
             <Button primary onClick={this.PopupClose}>              Ok      </Button>
           </Modal.Actions>
         </Modal>
-        <br />
       </Container>
     );
   }
diff --git a/src/ts/containers/test/SignUp.tsx b/src/ts/containers/test/SignUp.tsx
index 36685b9..6ee0601 100644
--- a/src/ts/containers/test/SignUp.tsx
+++ b/src/ts/containers/test/SignUp.tsx
@@ -1,7 +1,7 @@
 import *as React from 'react'
 import {
-  Icon, Label, Input, InputOnChangeData,
-  Select, Button, Dropdown, Grid, Container, Form
+  Input, InputOnChangeData,
+  Select, Button, Dropdown, Grid, Form, Container
 } from 'semantic-ui-react'
 
 
@@ -47,111 +47,39 @@ export class SignUp extends React.Component<any, any> {
 
 
     return (
-      <Container>
-        <Grid>
-          <Grid.Row>
-            <Grid.Column mobile={16} tablet={5} computer={5}>
-            </Grid.Column>
-            <Grid.Column mobile={16} tablet={6} computer={6}>
-              <Grid>
-                <Grid.Row style={{padding:'5'}}>
-                  <Grid.Column>
-                    <Input fluid value={this.state.email} placeholder='Email' onChange={
-                      (event: React.SyntheticEvent<HTMLInputElement>, data: InputOnChangeData) => {
-                        this.setState({ email: data.value });
-                      }} />
-                  </Grid.Column>
-                </Grid.Row>
-                <Grid.Row style={{padding:'5'}}>
-                  <Grid.Column>
-                    <Input fluid placeholder='Name' onChange={(event: React.SyntheticEvent<HTMLInputElement>, data: InputOnChangeData) => {
-                      this.setState({ name: data.value });
-                    }} />
-                  </Grid.Column>
-                </Grid.Row>
-                <Grid.Row style={{padding:'5'}}>
-                  <Grid.Column>
-                    <Input fluid placeholder='Password' type='password' onChange={(event: React.SyntheticEvent<HTMLInputElement>, data: InputOnChangeData) => {
-                      this.setState({ pass: data.value });
-                    }} />
-                  </Grid.Column>
-                </Grid.Row>
-                <Grid.Row style={{padding:'5'}}>
-                  <Grid.Column>
-                    <Input fluid placeholder='Password Confirm' type='password' onChange={(event: React.SyntheticEvent<HTMLInputElement>, data: InputOnChangeData) => {
-                      this.setState({ passCon: data.value });
-                    }} />
-                  </Grid.Column>
-                </Grid.Row>
-                <Grid.Row style={{padding:'5'}}>
-                  <Grid.Column>
-                    <Input fluid placeholder='Company' onChange={(event: React.SyntheticEvent<HTMLInputElement>, data: InputOnChangeData) => {
-                      this.setState({ company: data.value });
-                    }} />
-                  </Grid.Column>
-                </Grid.Row>
-                <Grid.Row style={{padding:'5'}}>
-                  <Grid.Column>
-                    <Input fluid>
-                      <Select value={this.state.country} placeholder='Select your country' options={options} onChange={(event: React.SyntheticEvent<HTMLInputElement>, data: InputOnChangeData) => {
-                        this.setState({ country: data.value });
-                      }} />
-                      <Input placeholder='phone' onChange={(event: React.SyntheticEvent<HTMLInputElement>, data: InputOnChangeData) => {
-                        this.setState({ phone: data.value });
-                      }} />
-                    </Input>
-                  </Grid.Column>
-                </Grid.Row>
-                <Grid.Row style={{padding:'5'}}>
-                  <Grid.Column width='8'>
-                    <Button primary fluid onClick={this.onSubmit}>   Sign Up  </Button>
-                  </Grid.Column>
-                  <Grid.Column width='8'>
-                    <Button fluid>    Cancel  </Button>
-                  </Grid.Column>
-                </Grid.Row>
-              </Grid>
-            </Grid.Column>
-            <Grid.Column mobile={16} tablet={4} computer={5}>
-            </Grid.Column>
-          </Grid.Row>
-        </Grid>
-
+      <Container fluid>
         <Grid>
           <Grid.Row>
             <Grid.Column mobile={16} tablet={5} computer={5}>
             </Grid.Column>
             <Grid.Column mobile={16} tablet={6} computer={6}>
               <Form>
-                    <Form.Input fluid value={this.state.email} placeholder='Email' onChange={
-                      (event: React.SyntheticEvent<HTMLInputElement>, data: InputOnChangeData) => {
-                        this.setState({ email: data.value });
-                      }} />
-                    <Form.Input fluid placeholder='Name' onChange={(event: React.SyntheticEvent<HTMLInputElement>, data: InputOnChangeData) => {
-                      this.setState({ name: data.value });
-                    }} />
-                    <Form.Input fluid placeholder='Password' type='password' onChange={(event: React.SyntheticEvent<HTMLInputElement>, data: InputOnChangeData) => {
-                      this.setState({ pass: data.value });
-                    }} />
-                    <Form.Input fluid placeholder='Password Confirm' type='password' onChange={(event: React.SyntheticEvent<HTMLInputElement>, data: InputOnChangeData) => {
-                      this.setState({ passCon: data.value });
-                    }} />
-                    <Form.Input fluid placeholder='Company' onChange={(event: React.SyntheticEvent<HTMLInputElement>, data: InputOnChangeData) => {
-                      this.setState({ company: data.value });
-                    }} />
-                    <Form.Group>
-                      <Form.Select value={this.state.country} placeholder='Select your country' options={options} onChange={(event: React.SyntheticEvent<HTMLInputElement>, data: InputOnChangeData) => {
-                        this.setState({ country: data.value });
-                      }} />
-                      <Form.Input placeholder='phone' onChange={(event: React.SyntheticEvent<HTMLInputElement>, data: InputOnChangeData) => {
-                        this.setState({ phone: data.value });
-                      }} 
-                      />
-                    </Form.Group>
-                    <Form.Group>
-                      <Button primary fluid style={{margin:'7'}} onClick={this.onSubmit}>   Sign Up  </Button>
-                      <Button fluid style={{margin:'7'}}>    Cancel  </Button>
-                    </Form.Group>
+                <Form.Input fluid value={this.state.email} placeholder='Email' onChange={
+                  (event: React.SyntheticEvent<HTMLInputElement>, data: InputOnChangeData) => {
+                    this.setState({ email: data.value });
+                  }} />
+                <Form.Input fluid placeholder='Name' onChange={(event: React.SyntheticEvent<HTMLInputElement>, data: InputOnChangeData) => {
+                  this.setState({ name: data.value });
+                }} />
+                <Form.Input fluid placeholder='Password' type='password' onChange={(event: React.SyntheticEvent<HTMLInputElement>, data: InputOnChangeData) => {
+                  this.setState({ pass: data.value });
+                }} />
+                <Form.Input fluid placeholder='Password Confirm' type='password' onChange={(event: React.SyntheticEvent<HTMLInputElement>, data: InputOnChangeData) => {
+                  this.setState({ passCon: data.value });
+                }} />
+                <Form.Input fluid placeholder='Company' onChange={(event: React.SyntheticEvent<HTMLInputElement>, data: InputOnChangeData) => {
+                  this.setState({ company: data.value });
+                }} />
+                <Form.Select fluid value={this.state.country} placeholder='Select your country' options={options} onChange={(event: React.SyntheticEvent<HTMLInputElement>, data: InputOnChangeData) => {
+                  this.setState({ country: data.value });
+                }} />
+                <Form.Input fluid placeholder='phone' onChange={(event: React.SyntheticEvent<HTMLInputElement>, data: InputOnChangeData) => {
+                  this.setState({ phone: data.value });
+                }} />
+                <Form.Group>
+                  <Button primary fluid style={{margin:'7'}} onClick={this.onSubmit}>   Sign Up  </Button>
+                  <Button fluid style={{margin:'7'}}>    Cancel  </Button>
+                </Form.Group>
               </Form>
             </Grid.Column>
             <Grid.Column mobile={16} tablet={4} computer={5}>
diff --git a/src/ts/containers/test/TargetDetails.tsx b/src/ts/containers/test/TargetDetails.tsx
index f72edf0..7135813 100644
--- a/src/ts/containers/test/TargetDetails.tsx
+++ b/src/ts/containers/test/TargetDetails.tsx
@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { Button, Table } from 'semantic-ui-react';
+import { Button, Table, Header, Container } from 'semantic-ui-react';
 import { Sensors } from './Sensors';
 import { DetailContainer } from './commons/DetailContainer';
 
@@ -48,12 +48,13 @@ export class TargetBasicInfo extends React.Component<any, any> {
 
   render() {
     return (
-      <div>
-        <Table celled={true}>
+      <Container fluid>
+        <Header as='h3' dividing>Target Info</Header>
+        <Table celled={false}>
           <Table.Body>
             <Table.Row>
               <Table.Cell collapsing>
-                Name
+                <Header size='small'>Name</Header>
             </Table.Cell>
               <Table.Cell>
                 ???
@@ -62,7 +63,7 @@ export class TargetBasicInfo extends React.Component<any, any> {
 
             <Table.Row>
               <Table.Cell collapsing>
-                Type
+                <Header size='small'>Type</Header>
             </Table.Cell>
               <Table.Cell>
                 ????
@@ -71,7 +72,7 @@ export class TargetBasicInfo extends React.Component<any, any> {
 
             <Table.Row>
               <Table.Cell collapsing>
-                Sensor count
+                <Header size='small'>Sensor count</Header>
             </Table.Cell>
               <Table.Cell>
                 ???
@@ -80,7 +81,7 @@ export class TargetBasicInfo extends React.Component<any, any> {
 
             <Table.Row>
               <Table.Cell collapsing>
-                Created at
+                <Header size='small'>Created at</Header>
             </Table.Cell>
               <Table.Cell>
                 ???
@@ -91,7 +92,7 @@ export class TargetBasicInfo extends React.Component<any, any> {
         </Table>
         <Button primary floated={'right'} negative onClick={this.handleRemoveTarget}>Remove</Button>
 
-      </div>
+      </Container>
     );
   }
 }
\ No newline at end of file
diff --git a/src/ts/containers/test/Targets.tsx b/src/ts/containers/test/Targets.tsx
index 2150c4f..d23f66d 100644
--- a/src/ts/containers/test/Targets.tsx
+++ b/src/ts/containers/test/Targets.tsx
@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { Table, Grid, Segment, Button, Container, Modal, Input } from 'semantic-ui-react';
+import { Table, Button, Modal, Input, Header, Container } from 'semantic-ui-react';
 import { TargetDetails } from './TargetDetails';
 
 export class Targets extends React.Component<any, any> {
@@ -28,9 +28,10 @@ export class Targets extends React.Component<any, any> {
     ];
 
     return (
-      <Container>
+      <Container fluid>
         {/*search bar  */}
         <TargetTable />
+        <br />
         <Button content='Add' icon='add' labelPosition='left' floated='right' positive onClick={this.handleAddTarget.bind(this)} />
         <br /><br /><br /><br /><br /><br /><br /><br /><br />
         <TargetDetails target={this.state.selected} />
@@ -129,7 +130,8 @@ export class TargetTable extends React.Component<any, any> {
 
   render() {
     return (
-      <div>
+      <Container fluid>
+        <Header as='h3' dividing>Targets</Header>
         <Input icon='search' placeholder='Search...' onChange={this.handleSearch.bind(this)} />
         <Table celled selectable striped>
           <Table.Header>
@@ -152,7 +154,7 @@ export class TargetTable extends React.Component<any, any> {
             ))}
           </Table.Body>
         </Table>
-      </div>
+      </Container>
     );
   }
 }
diff --git a/src/ts/containers/test/TopBar.tsx b/src/ts/containers/test/TopBar.tsx
index fcf947a..5fb16ed 100644
--- a/src/ts/containers/test/TopBar.tsx
+++ b/src/ts/containers/test/TopBar.tsx
@@ -64,8 +64,13 @@ export class TopBar extends React.Component<any, any> {
           <Menu.Item href='/' > Home   </Menu.Item>
           <Dropdown text='Monitoring' pointing className='link item'>
             <Dropdown.Menu>
-              <Dropdown.Item href='#/test14'> Probe </Dropdown.Item>
-              <Dropdown.Item>Sensors</Dropdown.Item>
+              <Dropdown.Header icon='angle right' content='Probe'/>
+              <Dropdown.Divider />
+              <Dropdown.Item href='#/test14'> Probe List </Dropdown.Item>
+              <Dropdown.Item href='#/test14'> Noauth Probes </Dropdown.Item>
+              <Dropdown.Item href='#/test14'> Download </Dropdown.Item>
+              <Dropdown.Divider />
+              <Dropdown.Item href='#/test21'>Sensors</Dropdown.Item>
             </Dropdown.Menu>
           </Dropdown>
           
diff --git a/src/ts/containers/test/layout/Footer.tsx b/src/ts/containers/test/layout/Footer.tsx
index 467f9a1..e853dc0 100644
--- a/src/ts/containers/test/layout/Footer.tsx
+++ b/src/ts/containers/test/layout/Footer.tsx
@@ -12,6 +12,7 @@ export class Footer extends React.Component<any, any> {
   render() {
     return (
       <Segment vertical textAlign='center' size='tiny'>
+        <br />
           Copyright LOAFLE.
       </Segment>
     );
diff --git a/src/ts/containers/test/layout/Layout.tsx b/src/ts/containers/test/layout/Layout.tsx
index b07d7b4..f965e1e 100644
--- a/src/ts/containers/test/layout/Layout.tsx
+++ b/src/ts/containers/test/layout/Layout.tsx
@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { Container, Menu, Sidebar, Segment, Icon, Breadcrumb } from 'semantic-ui-react';
+import { Container, Menu, Sidebar, Segment, Icon, Breadcrumb, Grid } from 'semantic-ui-react';
 import { Header } from './Header';
 import { Footer } from './Footer';
 
@@ -24,7 +24,24 @@ export class Layout extends React.Component<any, any> {
 
   render() {
     return (
-      <div>
+      <Container fluid>
+        <Grid>
+          <Grid.Row>
+            <Grid.Column>
+              Left menu
+            </Grid.Column>
+            <Grid.Column>
+              <Grid.Row>
+                <Grid.Column>
+                  Logo
+                </Grid.Column>
+                <Grid.Column>
+                  Page Content
+                </Grid.Column>
+              </Grid.Row>
+            </Grid.Column>
+          </Grid.Row>
+        </Grid>
         <Header onSidebar={this.onSidebar.bind(this)}/>
         <Sidebar.Pushable as={Segment} vertical >
           <Sidebar
@@ -38,27 +55,23 @@ export class Layout extends React.Component<any, any> {
             inverted
           >
             <Menu.Item name='home'>
-              <Icon name='home' />
-              Home
+              Notification 1
             </Menu.Item>
             <Menu.Item name='gamepad'>
-              <Icon name='gamepad' />
-              Games
-            </Menu.Item>
-            <Menu.Item name='camera'>
-              <Icon name='camera' />
-              Channels
+              Notification 2
             </Menu.Item>
           </Sidebar>
 
           <Sidebar.Pusher >
-            <Breadcrumb style={{ padding: '5px 20px 0px' }} size='mini'>
-              <Breadcrumb.Section link>Home</Breadcrumb.Section>
-              <Breadcrumb.Divider icon='right angle' />
-              <Breadcrumb.Section link>Monitoring</Breadcrumb.Section>
-              <Breadcrumb.Divider icon='right angle' />
-              <Breadcrumb.Section active>Probe</Breadcrumb.Section>
-            </Breadcrumb>
+            <Container fluid textAlign='right' style={{ padding: '5px 20px 0px' }}>
+              <Breadcrumb size='mini'>
+                <Breadcrumb.Section link>Home</Breadcrumb.Section>
+                <Breadcrumb.Divider icon='right angle' />
+                <Breadcrumb.Section link>Monitoring</Breadcrumb.Section>
+                <Breadcrumb.Divider icon='right angle' />
+                <Breadcrumb.Section active>Probe</Breadcrumb.Section>
+              </Breadcrumb>
+            </Container>
 
             <Segment vertical>
               <Container>
@@ -73,7 +86,7 @@ export class Layout extends React.Component<any, any> {
         </Sidebar.Pushable>
 
 
-      </div>
+      </Container>
     );
   }
 }