filter

src/ts/containers/test/Probes.tsx

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { Table, Header, Container } from 'semantic-ui-react';
+import { Table, Header, Container, Form, Checkbox, Button } from 'semantic-ui-react';
 import { ProbeDetails } from './ProbeDetails';
 import { ListContainer } from './commons/ListContainer';
 
@@ -12,6 +12,7 @@ export class Probes extends React.Component<any, any> {
     this.state = {
       selected: null,
       isDetail: false,
+      list: [],
     };
   }
 
@@ -23,7 +24,7 @@ export class Probes extends React.Component<any, any> {
           "name": "STARTED"
         },
         "domain": {
-          "name": "overFlow's domain111"
+          "name": "asus"
         },
         "probeKey": "AGBLKDFJ2452ASDGFL2KWJLKSDJ",
         "description": "description1111111111",
@@ -34,7 +35,7 @@ export class Probes extends React.Component<any, any> {
           "name": "STOPPED"
         },
         "domain": {
-          "name": "overFlow's domain222"
+          "name": "ottugi"
         },
         "probeKey": "AGBLKDFJ2452ASDGFL2KWJLKSDJ",
         "description": "description22222222",
@@ -45,7 +46,7 @@ export class Probes extends React.Component<any, any> {
           "name": "STOPPED"
         },
         "domain": {
-          "name": "overFlow's domain333"
+          "name": "lg"
         },
         "probeKey": "AGBLKDFJ2452ASDGFL2KWJLKSDJ",
         "description": "description33333",
@@ -56,12 +57,15 @@ export class Probes extends React.Component<any, any> {
           "name": "STARTED"
         },
         "domain": {
-          "name": "overFlow's domain444"
+          "name": "apple"
         },
         "probeKey": "AGBLKDFJ2452ASDGFL2KWJLKSDJ",
         "description": "description4444",
       },
     ];
+    this.setState({
+      list: this.data,
+    });
   }
 
   checkCellStatus(status: any): boolean {
@@ -78,6 +82,39 @@ export class Probes extends React.Component<any, any> {
     });
   }
 
+  handleSearch(searchWord: string) {
+    console.log(searchWord);
+    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,
+    });
+  }
+
+  handleFilter(filterStr: string) {
+    if (filterStr === null) {
+      this.setState({
+        list: this.data,
+      });
+      return;
+    }
+    let founds = new Array();
+    for (let probe of this.data) {
+      if (probe.metaProbeStatus.name.indexOf(filterStr) !== -1) {
+        founds.push(probe);
+      }
+    }
+    this.setState({
+      list: founds,
+    });
+  }
+
   render() {
     if (this.state.isDetail) {
       return <ProbeDetails probe={this.state.selected} onBack={() => this.setState({ isDetail: false })} />;
@@ -96,10 +133,10 @@ export class Probes extends React.Component<any, any> {
           </Table.Header>
 
           <Table.Body>
-            {this.data.map((probe: any, index: number) => (
+            {this.state.list.map((probe: any, index: number) => (
               <Table.Row key={index} onClick={this.handleSelect.bind(this, probe)}>
-                <Table.Cell >todo. {probe.name}</Table.Cell>
+                <Table.Cell >{probe.domain.name}</Table.Cell>
-                <Table.Cell>todo. {probe.cidr}</Table.Cell>
+                <Table.Cell>{index}</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>
@@ -110,7 +147,71 @@ export class Probes extends React.Component<any, any> {
       </Container>;
 
     return (
-      <ListContainer contents={probeList}/>
+      <ListContainer
+        contents={probeList}
+        filter={<ProbeFilter data={this.data} onFilter={this.handleFilter.bind(this)} />}
+        onSearch={this.handleSearch.bind(this)}
+      />
+    );
+  }
+}
+
+export class ProbeFilter extends React.Component<any, any> {
+
+  constructor(props: any, context: any) {
+    super(props, context);
+    this.state = {
+      status: null,
+    };
+  }
+
+  handleChange(e: any, data: any) {
+    this.setState({
+      status: data.value,
+    });
+    this.props.onFilter(data.value);
+  }
+  handleReset(e: any, data: any) {
+    this.setState({
+      status: null,
+    });
+    this.props.onFilter(null);
+  }
+
+  render() {
+    //todo. getting MetaProbeStatus
+    let metaProbeStatus = [
+      {
+        "id": "1",
+        "name": "STARTED",
+      },
+      {
+        "id": "2",
+        "name": "STOPPED",
+      },
+    ];
+    return (
+      <Form>
+        <Container fluid>
+          <Button size='mini' floated='right' basic content='Reset' onClick={this.handleReset.bind(this)} />
+          <Form.Field>
+            <b>Status</b>
+          </Form.Field>
+
+          {metaProbeStatus.map((item: any, index: number) => (
+            <Form.Field key={index}>
+              <Checkbox
+                radio
+                label={item.name}
+                name='status'
+                value={item.name}
+                checked={this.state.status === item.name}
+                onChange={this.handleChange.bind(this)}
+              />
+            </Form.Field>
+          ))}
+        </Container>
+      </Form>
     );
   }
 }

src/ts/containers/test/TargetDetails.tsx

@@ -28,7 +28,7 @@ export class TargetDetails extends React.Component<any, any> {
 
     return (
       // <DetailContainer panes={items}/>
-      <Container>
+      <Container fluid>
         <TargetBasicInfo probe={this.props.probe} />
         <Sensors probe={this.props.probe} />
       </Container>

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

@@ -1,26 +1,31 @@
 import * as React from 'react';
-import { Grid } from 'semantic-ui-react';
+import { Grid, Input, Form, Checkbox, Divider, Button } from 'semantic-ui-react';
 
 export class ListContainer extends React.Component<any, any> {
 
+  private data: any = null;
+
   constructor(props: any, context: any) {
     super(props, context);
     this.state = {
     };
   }
 
-  showContents() {
+  handleSearch(e: any, data: any) {
-    return this.props.contents;
+    this.props.onSearch(data.value.toLowerCase());
   }
   
   render() {
     return (
       <Grid>
-        <Grid.Column width={4} textAlign='center' color='grey'>
+        <Grid.Column width={4}>
-          CHART AREA
+          <Input icon='search' placeholder='Search...' onChange={this.handleSearch.bind(this)} fluid />
+          {/*filter  */}
+          <Divider />
+          {this.props.filter}
         </Grid.Column>
         <Grid.Column stretched width={12} >
-          {this.showContents()}
+          {this.props.contents}
         </Grid.Column>
       </Grid>
     );

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

@@ -1,33 +0,0 @@
-import * as React from 'react';
-import { Sidebar, Segment } from 'semantic-ui-react';
-
-export class SideBarContainer extends React.Component<any, any> {
-
-  constructor(props: any, context: any) {
-    super(props, context);
-    this.state = {
-    };
-  }
-
-  showContents() {
-    return this.props.contents;
-  }
-
-  render() {
-    return (
-        <Sidebar.Pushable as={Segment}>
-          <Sidebar
-            animation='overlay'
-            width='thin'
-            direction='right'
-            visible={true}
-            icon='labeled'
-            vertical
-            inverted
-          >
-          test contents
-          </Sidebar>  
-        </Sidebar.Pushable>
-    );
-  }
-}