From f6c7c04db105151507e24c1a31239fc7e1437f5b Mon Sep 17 00:00:00 2001
From: sunny <sunny@loafle.com>
Date: Wed, 12 Jul 2017 20:24:35 +0900
Subject: [PATCH] Design edit

---
 src/ts/containers/test/ProbeDetails.tsx  | 110 +++++++++++++----------
 src/ts/containers/test/Probes.tsx        |   4 +-
 src/ts/containers/test/TopBar.tsx        |  15 ++--
 src/ts/containers/test/commons/Tab.tsx   |   4 +-
 src/ts/containers/test/layout/Footer.tsx |   8 +-
 src/ts/containers/test/layout/Layout.tsx |  10 ++-
 6 files changed, 88 insertions(+), 63 deletions(-)

diff --git a/src/ts/containers/test/ProbeDetails.tsx b/src/ts/containers/test/ProbeDetails.tsx
index bf29304..eb62e68 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 } from 'semantic-ui-react';
+import { Button, Table, Label, Segment, Header } from 'semantic-ui-react';
 import { TargetTable } from './Targets';
 
 export class ProbeDetails extends React.Component<any, any> {
@@ -40,53 +40,69 @@ export class ProbeDetails extends React.Component<any, any> {
       elem = <div></div>;
     } else {
       elem =
-        <div>Probe Details...
-          <Table celled={false}>
-            <Table.Body>
-              <Table.Row>
-                <Table.Cell collapsing>
-                  <Label ribbon>Domain</Label>
-                </Table.Cell>
-                <Table.Cell>{this.props.probe.domain.name}</Table.Cell>
-              </Table.Row>
-              <Table.Row>
-                <Table.Cell collapsing>
-                  <Label ribbon>Status</Label>
-                </Table.Cell>
-                <Table.Cell>{this.props.probe.metaProbeStatus.name}</Table.Cell>
-              </Table.Row>
-              <Table.Row>
-                <Table.Cell collapsing>
-                  <Label ribbon >Host IP</Label>
-                </Table.Cell>
-                <Table.Cell>????</Table.Cell>
-              </Table.Row>
-              <Table.Row>
-                <Table.Cell collapsing>
-                  <Label ribbon >Host Name</Label>
-                </Table.Cell>
-                <Table.Cell>????</Table.Cell>
-              </Table.Row>
-              <Table.Row>
-                <Table.Cell collapsing>
-                  <Label ribbon>Authorized at</Label>
-                </Table.Cell>
-                <Table.Cell>{this.props.probe.createDate}</Table.Cell>
-              </Table.Row>
-              <Table.Row>
-                <Table.Cell collapsing>
-                  <Label ribbon>Description</Label>
-                </Table.Cell>
-                <Table.Cell>{this.props.probe.description}</Table.Cell>
-              </Table.Row>
-            </Table.Body>
-          </Table>
-          <Button content='Back' icon='left arrow' labelPosition='left' onClick={this.handleBack} />
-          <Button content='Discovery' icon='search' labelPosition='left' floated={'right'} positive onClick={this.handleDiscovery} />
-          {this.showStartStopBtn()}
+        <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>
 
-          <TargetTable probe={this.props.probe}/>
-        </div>;
+                <Table.Row>
+                  <Table.Cell colSpan='4'>
+                    <Button content='Back' icon='left arrow' labelPosition='left' onClick={this.handleBack} />
+                    <Button content='Discovery' icon='search' labelPosition='left' floated={'right'} positive onClick={this.handleDiscovery} />
+                    {this.showStartStopBtn()}
+
+                  </Table.Cell>
+                </Table.Row>
+              </Table.Body>
+            </Table>
+          </Segment>
+
+          <Segment inverted color='grey'>
+          <h4>Probe's Targets</h4>
+          </Segment>
+          <Segment>
+            <TargetTable probe={this.props.probe}/>
+          </Segment>
+        </Segment.Group>;
     }
     return (
       <div>
diff --git a/src/ts/containers/test/Probes.tsx b/src/ts/containers/test/Probes.tsx
index f1a84f1..ce051aa 100644
--- a/src/ts/containers/test/Probes.tsx
+++ b/src/ts/containers/test/Probes.tsx
@@ -80,7 +80,7 @@ export class Probes extends React.Component<any, any> {
 
     return (
       <div>
-        <Table celled selectable striped collapsing>
+        <Table selectable striped>
           <Table.Header>
             <Table.Row>
               <Table.HeaderCell textAlign={'center'}>Name</Table.HeaderCell>
@@ -103,7 +103,7 @@ export class Probes extends React.Component<any, any> {
             ))}
           </Table.Body>
         </Table>
-        <div style={{ margin: '20px' }}>
+        <div>
           <ProbeDetails probe={this.state.selected} />
         </div>
       </div>
diff --git a/src/ts/containers/test/TopBar.tsx b/src/ts/containers/test/TopBar.tsx
index 8aaaa10..d1392b7 100644
--- a/src/ts/containers/test/TopBar.tsx
+++ b/src/ts/containers/test/TopBar.tsx
@@ -60,10 +60,11 @@ export class TopBar extends React.Component<any, any> {
       
       <div>
         <Menu  inverted borderless size='tiny'>
+          <Menu.Item>  overFlow   </Menu.Item>
           <Menu.Item href='/' > Home   </Menu.Item>
           <Dropdown text='Monitoring' pointing className='link item'>
             <Dropdown.Menu>
-              <Dropdown.Item> Probe </Dropdown.Item>
+              <Dropdown.Item href='#/test14'> Probe </Dropdown.Item>
               <Dropdown.Item>Sensors</Dropdown.Item>
             </Dropdown.Menu>
           </Dropdown>
@@ -74,10 +75,10 @@ export class TopBar extends React.Component<any, any> {
               <Dropdown.Item>Targets</Dropdown.Item>
             </Dropdown.Menu>
           </Dropdown>
-          <Menu.Item>            Dashboard    </Menu.Item>
-          <Menu.Item>            Metrics    </Menu.Item>
-          <Menu.Item>            Alert    </Menu.Item>
-          <Menu.Item>            History    </Menu.Item>
+          <Menu.Item link>            Dashboard    </Menu.Item>
+          <Menu.Item link>            Metrics    </Menu.Item>
+          <Menu.Item link>            Alert    </Menu.Item>
+          <Menu.Item link>            History    </Menu.Item>
           <Dropdown text='Custom' pointing className='link item'>
             <Dropdown.Menu>
               <Dropdown.Item href='#/test2'> SignUp </Dropdown.Item>
@@ -90,7 +91,7 @@ export class TopBar extends React.Component<any, any> {
           </Dropdown>
           
 
-          <Menu.Item position='right'>
+          <Menu.Item position='right' link>
             <Icon name='setting' size='large' />
           </Menu.Item>
           <Menu.Item onClick={() => {
@@ -98,7 +99,7 @@ export class TopBar extends React.Component<any, any> {
           }}>
             <Label color='teal' horizontal>22</Label>
           </Menu.Item>
-          <Menu.Item >
+          <Menu.Item link>
             <Dropdown icon='user' className='ui pointing dropdown top right'>
               <Dropdown.Menu >
                 <Dropdown.Item text='Log out' />
diff --git a/src/ts/containers/test/commons/Tab.tsx b/src/ts/containers/test/commons/Tab.tsx
index 8ba0263..c8dd248 100644
--- a/src/ts/containers/test/commons/Tab.tsx
+++ b/src/ts/containers/test/commons/Tab.tsx
@@ -23,13 +23,13 @@ export class Tab extends React.Component<any, any> {
     render() {
         return (
             <div>
-                <Menu tabular>
+                <Menu pointing secondary>
                     {this.props.panes.map((pane: any, index: number) => (
                         <Menu.Item key={index} name={pane.name} onClick={this.handleClick.bind(this, index)} active={this.state.active === index} />
                     ))}
                 </Menu>
 
-                <Segment>
+                <Segment vertical>
                     {this.showContents()}
                 </Segment>
             </div>
diff --git a/src/ts/containers/test/layout/Footer.tsx b/src/ts/containers/test/layout/Footer.tsx
index 15e03ea..467f9a1 100644
--- a/src/ts/containers/test/layout/Footer.tsx
+++ b/src/ts/containers/test/layout/Footer.tsx
@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { Container } from 'semantic-ui-react';
+import { Segment } from 'semantic-ui-react';
 
 export class Footer extends React.Component<any, any> {
 
@@ -11,9 +11,9 @@ export class Footer extends React.Component<any, any> {
 
   render() {
     return (
-      <Container textAlign='center'>
-        <div>Copyright LOAFLE.</div>
-      </Container>
+      <Segment vertical textAlign='center' size='tiny'>
+          Copyright LOAFLE.
+      </Segment>
     );
   }
 }
diff --git a/src/ts/containers/test/layout/Layout.tsx b/src/ts/containers/test/layout/Layout.tsx
index 4666b1c..b07d7b4 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 } from 'semantic-ui-react';
+import { Container, Menu, Sidebar, Segment, Icon, Breadcrumb } from 'semantic-ui-react';
 import { Header } from './Header';
 import { Footer } from './Footer';
 
@@ -52,6 +52,14 @@ export class Layout extends React.Component<any, any> {
           </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>
+
             <Segment vertical>
               <Container>
                 <Router history={history} >