Merge branch 'master' of https://git.loafle.net/overflow/Test_Web_Router

package.json

@@ -12,6 +12,7 @@
     "@types/react-dom": "^15.5.0",
     "@types/react-router-dom": "^4.0.4",
     "@types/react-tap-event-plugin": "^0.0.30",
+    "@types/lodash": "^4.14.69",
     "awesome-typescript-loader": "^3.1.3",
     "css-loader": "^0.28.2",
     "copy-webpack-plugin": "^4.0.1",
@@ -34,6 +35,7 @@
     "react-dom": "15.5.4",
     "react-router-dom": "^4.1.1",
     "react-tap-event-plugin": "^2.0.1",
-    "semantic-ui-react": "^0.70.0"
+    "semantic-ui-react": "^0.70.0",
+    "lodash": "^4.17.4"
   }
 }

src/ts/Routes.tsx

@@ -12,6 +12,7 @@ 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';
+import { TableExampleSortable } from './containers/test/TableExampleSortable'
 
 export class Blank extends React.Component<any, any> {
   render() {
@@ -52,6 +53,7 @@ export class Routes extends React.Component<any, any> {
           <Route exact path='/test5' component={ProbeDown} />
           <Route exact path='/test6' component={DiscoveryDetails} />
           <Route exact path='/test7' component={Tree} />
+          <Route exact path='/test8' component={TableExampleSortable} />
 
           <Route exact path='/test14' component={Components} />
 

src/ts/containers/test/Probes.tsx

@@ -26,7 +26,7 @@ export class Probes extends React.Component<any, any> {
         "domain": {
           "name": "asus"
         },
-        "probeKey": "AGBLKDFJ2452ASDGFL2KWJLKSDJ",
+        "probeKey": "1AGBLKDFJ2452ASDGFL2KWJLKSDJ",
         "description": "description1111111111",
       },
       {
@@ -37,7 +37,7 @@ export class Probes extends React.Component<any, any> {
         "domain": {
           "name": "ottugi"
         },
-        "probeKey": "AGBLKDFJ2452ASDGFL2KWJLKSDJ",
+        "probeKey": "2AGBLKDFJ2452ASDGFL2KWJLKSDJ",
         "description": "description22222222",
       },
       {
@@ -48,7 +48,7 @@ export class Probes extends React.Component<any, any> {
         "domain": {
           "name": "lg"
         },
-        "probeKey": "AGBLKDFJ2452ASDGFL2KWJLKSDJ",
+        "probeKey": "3AGBLKDFJ2452ASDGFL2KWJLKSDJ",
         "description": "description33333",
       },
       {
@@ -59,7 +59,7 @@ export class Probes extends React.Component<any, any> {
         "domain": {
           "name": "apple"
         },
-        "probeKey": "AGBLKDFJ2452ASDGFL2KWJLKSDJ",
+        "probeKey": "4AGBLKDFJ2452ASDGFL2KWJLKSDJ",
         "description": "description4444",
       },
     ];
@@ -82,17 +82,9 @@ export class Probes extends React.Component<any, any> {
     });
   }
 
-  handleSearch(searchWord: string) {
+  handleSearch(result: object[]) {
-    let founds = new Array();
-    for (let probe of this.data) {
-      if (probe.domain.name.toLowerCase().indexOf(searchWord) !== -1
-        || probe.description.toLowerCase().indexOf(searchWord) !== -1
-        || probe.metaProbeStatus.name.toLowerCase().indexOf(searchWord) !== -1) {
-        founds.push(probe);
-      }
-    }
     this.setState({
-      list: founds,
+      list: result,
     });
   }
 
@@ -115,7 +107,7 @@ export class Probes extends React.Component<any, any> {
   }
 
   renderRows() {
-    if(this.state.list.length === 0) {
+    if (this.state.list.length === 0) {
       return <Table.Row error >
         <Table.Cell textAlign='center' colSpan='5'>No results found.</Table.Cell>
       </Table.Row>;
@@ -131,6 +123,7 @@ export class Probes extends React.Component<any, any> {
     ));
   }
 
+
   render() {
     if (this.state.isDetail) {
       return <ProbeDetails probe={this.state.selected} onBack={() => this.setState({ isDetail: false })} />;
@@ -157,8 +150,9 @@ export class Probes extends React.Component<any, any> {
     return (
       <ListContainer
         contents={probeList}
-        filter={<ProbeFilter data={this.data} onFilter={this.handleFilter.bind(this)} />}
+        data={this.data}
         onSearch={this.handleSearch.bind(this)}
+        filter={<ProbeFilter onFilter={this.handleFilter.bind(this)} />}
       />
     );
   }

src/ts/containers/test/TableExampleSortable.tsx

@@ -0,0 +1,74 @@
+import * as _ from 'lodash';
+import * as React from 'react';
+import { Table } from 'semantic-ui-react';
+
+const tableData = [
+  { name: 'John', age: 15, gender: 'Male' },
+  { name: 'Amber', age: 40, gender: 'Female' },
+  { name: 'Leslie', age: 25, gender: 'Female' },
+  { name: 'Ben', age: 70, gender: 'Male' },
+];
+
+export class TableExampleSortable extends React.Component<any, any>  {
+
+  constructor(props: any, context: any) {
+    super(props, context);
+
+    this.state = {
+      column: null,
+      data: tableData,
+      direction: null,
+    };
+  }
+
+
+  handleSort = (clickedColumn:any) => () => {
+    const { column, data, direction } = this.state
+
+    if (column !== clickedColumn) {
+      this.setState({
+        column: clickedColumn,
+        data: _.sortBy(data, [clickedColumn]),
+        direction: 'ascending',
+      });
+
+      return
+    }
+
+    this.setState({
+      data: data.reverse(),
+      direction: direction === 'ascending' ? 'descending' : 'ascending',
+    })
+  };
+
+  render() {
+    const { column, data, direction } = this.state;
+
+    return (
+      <Table sortable celled fixed>
+        <Table.Header>
+          <Table.Row>
+            <Table.HeaderCell sorted={column === 'name' ? direction : null} onClick={this.handleSort('name')}>
+              Name
+            </Table.HeaderCell>
+            <Table.HeaderCell sorted={column === 'age' ? direction : null} onClick={this.handleSort('age')}>
+              Age
+            </Table.HeaderCell>
+            <Table.HeaderCell sorted={column === 'gender' ? direction : null} onClick={this.handleSort('gender')}>
+              Gender
+            </Table.HeaderCell>
+          </Table.Row>
+        </Table.Header>
+        <Table.Body>
+          {_.map(data, ({ age, gender, name }) => (
+            <Table.Row key={name}>
+              <Table.Cell>{name}</Table.Cell>
+              <Table.Cell>{age}</Table.Cell>
+              <Table.Cell>{gender}</Table.Cell>
+            </Table.Row>
+          ))}
+        </Table.Body>
+      </Table>
+    )
+  }
+}

src/ts/containers/test/commons/ListContainer.tsx

@@ -1,26 +1,67 @@
 import * as React from 'react';
-import { Grid, Input, Form, Checkbox, Divider, Button } from 'semantic-ui-react';
+import { Grid, Input, Form, Checkbox, Divider } from 'semantic-ui-react';
 
 export class ListContainer extends React.Component<any, any> {
 
-  private data: any = null;
+  private found: boolean = false;
 
   constructor(props: any, context: any) {
     super(props, context);
     this.state = {
     };
+
   }
 
   handleSearch(e: any, data: any) {
-    this.props.onSearch(data.value.toLowerCase());
+    let searchWord = data.value;
+    let items: object[];
+    items = this.props.data;
+    let item: any;
+
+    let result = new Array();
+    for (item of items) {
+      this.search(item, searchWord);
+      if (this.found) {
+        result.push(item);
+      }
+      this.found = false;
+    }
+
+    this.props.onSearch(result);
+  }
+
+  handleSearchInput(e: any, data: any) {
+    this.setState({
+      searchWord: data.value,
+    });
+  }
+
+  search(item: any, searchWord: string) {
+    let key: any;
+    for (key in item) {
+      if (this.isString(item[key])) {
+        if (item[key].toLowerCase().indexOf(searchWord.toLowerCase()) !== -1) {
+          this.found = true;
+        }
+      } else {
+        this.search(item[key], searchWord);
+      }
+    }
+  }
+
+  isString(val: any): boolean {
+    if (typeof val === 'string') {
+      return true;
+    }
+    return false;
   }
 
   render() {
     return (
       <Grid>
         <Grid.Column width={4}>
-          <Input icon='search' placeholder='Search...' onChange={this.handleSearch.bind(this)} fluid />
+          <Input icon='search' label={{ icon: 'asterisk' }}
-          {/*filter  */}
+            labelPosition='left corner' placeholder='Search...' onChange={this.handleSearch.bind(this)} fluid/>
           <Divider />
           {this.props.filter}
         </Grid.Column>

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

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { Container } from 'semantic-ui-react';
+import { Container, Divider } from 'semantic-ui-react';
 import { TopBar } from '../TopBar';
 import { LogoBar } from './LogoBar';
 import { TitleBar } from './TitleBar';
@@ -16,7 +16,9 @@ export class Header extends React.Component<any, any> {
     return (
       <Container fluid>
         <LogoBar />
+        <Divider />
         <TitleBar />
+        <Divider />
       </Container>
       // <TopBar onSidebar={this.props.onSidebar}/>
     );

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

@@ -28,7 +28,7 @@ export class Layout extends React.Component<any, any> {
       <Container fluid>
         <Grid>
           <Grid.Row>
-            <Grid.Column width='2'>
+            <Grid.Column width='2' style={{margin:'0px'}}>
              <LeftMenu />
             </Grid.Column>
             <Grid.Column width='14'>

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

@@ -24,15 +24,17 @@ export class LeftMenu extends React.Component<any, any> {
         <Segment inverted className='fullHeight'>
           <Menu inverted secondary vertical fluid icon='labeled' >
 
-            <Menu.Item name='User'  >
+            <Menu.Item name='User' href='/' >
               <Icon name='user' />
             </Menu.Item>
-            <Menu.Item name='Home'  >
+            <Menu.Item name='Home' href='/' >
               <Icon name='home' />
               Home
             </Menu.Item>
-            <Menu.Item name='Monitoring' >
+            <Menu.Item name='Monitoring' href='/' >
               <Icon name='bar graph' />
+              Monitoring
+              {/*
               <Dropdown text='Monitoring' pointing>
                 <Dropdown.Menu>
                   <Dropdown.Header>Monitoring</Dropdown.Header>
@@ -40,43 +42,45 @@ export class LeftMenu extends React.Component<any, any> {
                   <Dropdown.Item>Sensors</Dropdown.Item>
                 </Dropdown.Menu>
               </Dropdown>
+              */}
             </Menu.Item>
 
-            <Menu.Item name='Infrastructure' >
+            <Menu.Item name='Infrastructure' href='/' >
               <Icon name='sitemap' />
+              Infrastructure
+              {/*
               <Dropdown text='Infrastructure' >
-
-
                 <Dropdown.Menu>
                   <Dropdown.Header>Infrastructure</Dropdown.Header>
                   <Dropdown.Item>Maps</Dropdown.Item>
                   <Dropdown.Item>Targets</Dropdown.Item>
                 </Dropdown.Menu>
               </Dropdown>
+              */}
             </Menu.Item>
 
-            <Menu.Item name='Dashboard' >
+            <Menu.Item name='Dashboard' href='/' >
               <Icon name='industry' />
               Dashboard
             </Menu.Item>
 
-            <Menu.Item name='Metrics' >
+            <Menu.Item name='Metrics' href='/' >
               <Icon name='tasks' />
               Metrics
             </Menu.Item>
 
-            <Menu.Item name='Alerts' >
+            <Menu.Item name='Alerts' href='/' >
               <Icon name='alarm' />
               Alerts
             </Menu.Item>
 
-            <Menu.Item name='History' >
+            <Menu.Item name='History' href='/' >
               <Icon name='book' />
               History
             </Menu.Item>
 
 
-            <Menu.Item>
+            <Menu.Item href='/'>
               <Icon name='play circle' />
               <Dropdown text='Custom'>
                 <Dropdown.Menu>
@@ -88,10 +92,11 @@ export class LeftMenu extends React.Component<any, any> {
                   <Dropdown.Item href='#/test14'> Insanity </Dropdown.Item>
                   <Dropdown.Item href='#/test6'>DiscoveryDetails</Dropdown.Item>
                   <Dropdown.Item href='#/test7'>Tree</Dropdown.Item>
+                  <Dropdown.Item href='#/test8'>TableExampleSortable</Dropdown.Item>
                 </Dropdown.Menu>
               </Dropdown>
             </Menu.Item>
-            <Menu.Item name='Settings' >
+            <Menu.Item name='Settings' href='/' >
               <Icon name='setting' />
               Settings
             </Menu.Item>

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

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { Menu, Header } from 'semantic-ui-react';
+import { Menu, Header, Container } from 'semantic-ui-react';
 
 export class LogoBar extends React.Component<any, any> {
 
@@ -19,7 +19,7 @@ export class LogoBar extends React.Component<any, any> {
 
   render() {
     return (
-      <div>
+      <Container fluid>
         <Menu borderless secondary >
           <Menu.Item
             name='logo'
@@ -29,11 +29,11 @@ export class LogoBar extends React.Component<any, any> {
           </Menu.Item>
           <Menu.Item
             position='right'
-            icon='bell outline'
+            icon='bell'
             onClick={this.handleNotiClick}
           />
         </Menu>
-      </div>
+      </Container>
     );
   }
 }

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

@@ -28,15 +28,16 @@ export class TitleBar extends React.Component<any, any> {
       <Grid>
         <Grid.Row>
           <Grid.Column width='3'>
-            <Header as='h3'>Page Title<Header.Subheader>
+            <Header as='h3'>Page Title
-              <Breadcrumb>
+              <Header.Subheader>
-                <Breadcrumb.Section link>Home</Breadcrumb.Section>
+                <Breadcrumb size='tiny'>
-                <Breadcrumb.Divider />
+                  <Breadcrumb.Section link>Home</Breadcrumb.Section>
-                <Breadcrumb.Section link>Monitoring</Breadcrumb.Section>
+                  <Breadcrumb.Divider />
-                <Breadcrumb.Divider />
+                  <Breadcrumb.Section link>Monitoring</Breadcrumb.Section>
-                <Breadcrumb.Section active>Probes</Breadcrumb.Section>
+                  <Breadcrumb.Divider />
-              </Breadcrumb>
+                  <Breadcrumb.Section active>Probes</Breadcrumb.Section>
-            </Header.Subheader>
+                </Breadcrumb>
+              </Header.Subheader>
             </Header>
           </Grid.Column>
           <Grid.Column width='13'>