From 82fb7fb0d5e600f25f0e484fd365805db45574c3 Mon Sep 17 00:00:00 2001
From: insanity <insanity@loafle.com>
Date: Thu, 13 Jul 2017 15:27:12 +0900
Subject: [PATCH 1/2] search target

---
 src/ts/containers/test/Components.tsx         |   4 +-
 .../containers/test/SensorConfiguration.tsx   |  55 ++++----
 src/ts/containers/test/SensorDetails.tsx      | 118 ++++++++++++++++++
 src/ts/containers/test/SensorItems.tsx        |  26 ++++
 src/ts/containers/test/Sensors.tsx            |  19 ++-
 src/ts/containers/test/TargetDetails.tsx      |  44 +++++--
 src/ts/containers/test/Targets.tsx            |  90 +++++++------
 7 files changed, 270 insertions(+), 86 deletions(-)
 create mode 100644 src/ts/containers/test/SensorDetails.tsx
 create mode 100644 src/ts/containers/test/SensorItems.tsx

diff --git a/src/ts/containers/test/Components.tsx b/src/ts/containers/test/Components.tsx
index 5a63c64..ae8797f 100644
--- a/src/ts/containers/test/Components.tsx
+++ b/src/ts/containers/test/Components.tsx
@@ -3,6 +3,7 @@ import { Probes } from './Probes';
 import { NoauthProbes } from './NoauthProbes';
 import { SensorConfiguration } from './SensorConfiguration';
 import { Targets } from './Targets';
+import { Sensors } from './Sensors';
 import { Tab } from './commons/Tab';
 
 // import Tab, { TabProps } from 'semantic-ui-react/dist/commonjs/modules/Tab'; 
@@ -20,8 +21,9 @@ export class Components extends React.Component<any, any> {
     const items = [
       { name: 'Probes', child: <Probes /> },
       { name: 'NoauthProbes', child: <NoauthProbes /> },
-      { name: 'SensorConfiguration', child: <SensorConfiguration /> },
       { name: 'Targets', child: <Targets /> },
+      { name: 'SensorConfiguration', child: <SensorConfiguration /> },
+      { name: 'Sensors', child: <Sensors /> },
     ];
 
     return (
diff --git a/src/ts/containers/test/SensorConfiguration.tsx b/src/ts/containers/test/SensorConfiguration.tsx
index a7f0d45..ecbbdb1 100644
--- a/src/ts/containers/test/SensorConfiguration.tsx
+++ b/src/ts/containers/test/SensorConfiguration.tsx
@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { Icon, Step, Button, Table, Radio, Form, Container, Checkbox } from 'semantic-ui-react';
-import { Grid, Image, Label, Segment, Dropdown, Input, List, Accordion } from 'semantic-ui-react';
+import { Grid, Image, Label, Segment, Dropdown, Input, List, Accordion, Loader } from 'semantic-ui-react';
 
 
 export class SensorConfiguration extends React.Component<any, any> {
@@ -132,6 +132,7 @@ export class CrawlerSelector extends React.Component<any, any> {
     super(props, context);
     this.state = {
       selected: null,
+      isInstalling: false,
     };
   }
 
@@ -178,8 +179,20 @@ export class CrawlerSelector extends React.Component<any, any> {
     this.setState({
       selected: data.value,
     });
+    this.checkInstall();
   }
 
+  checkInstall() {
+    this.setState({
+      isInstalling: true,
+    });
+    let that = this;
+    setInterval(() => {
+      this.setState({
+        isInstalling: false,
+      });
+    }, 1500);
+  }
 
   render() {
 
@@ -188,12 +201,14 @@ export class CrawlerSelector extends React.Component<any, any> {
         <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)} />
+
               <br />
               <br />
               <CrawlerAuthInputs crawler={this.state.selected} />
@@ -255,24 +270,23 @@ export class CrawlerAuthInputs extends React.Component<any, any> {
 
   renderRow(item: any, index: number) {
     let elem = new Array();
-    let key = index;
     if (item.metaInputType.name === 'Text') {
-      elem.push(<Input placeholder={item.defaultValue} key={key} />);
+      elem.push(<Input placeholder={item.defaultValue} key={0} />);
     }
     else if (item.metaInputType.name === 'Radio') {
       let itemValues = item.keyValue.split('|');
+      let idx = 0;
       for (let itemValue of itemValues) {
         elem.push(<Radio
-          key={key}
+          key={idx++}
           label={itemValue}
           name='radioGroup'
           value={itemValue}
         />);
-        key++;
       }
     }
 
-    return <Table.Row>
+    return <Table.Row key={index}>
       <Table.Cell collapsing>{item.keyName}</Table.Cell>
       <Table.Cell >{elem}</Table.Cell>
     </Table.Row >;
@@ -323,35 +337,14 @@ export class SensorItemSelector extends React.Component<any, any> {
 
   render() {
     return (
-      // <List>
-
-      //   <List.Item >
-      //     <Checkbox label='CPU' />
-      //     <List.List>
-      //       <List.Item>
-      //         <Checkbox label='cpu.usage' />
-      //       </List.Item>
-      //       <List.Item><Checkbox label='cpu.free' /></List.Item>
-      //     </List.List>
-      //   </List.Item>
-
-      //   <List.Item >
-      //     <Checkbox label='MEM' />
-      //     <List.List>
-      //       <List.Item><Checkbox label='mem.usage' /></List.Item>
-      //       <List.Item><Checkbox label='mem.free' /></List.Item>
-      //     </List.List>
-      //   </List.Item>
-
-      // </List>
       <Accordion exclusive={false} styled>
         <Accordion.Title>
           <Icon name='dropdown' />
           <Checkbox label='CPU' />
         </Accordion.Title>
         <Accordion.Content>
-          <Checkbox label='cpu.free' /><br/>
-          <Checkbox label='cpu.free' /><br/>
+          <Checkbox label='cpu.free' /><br />
+          <Checkbox label='cpu.free' /><br />
         </Accordion.Content>
 
         <Accordion.Title>
@@ -359,8 +352,8 @@ export class SensorItemSelector extends React.Component<any, any> {
           <Checkbox label='MEM' />
         </Accordion.Title>
         <Accordion.Content>
-          <Checkbox label='cpu.free' /><br/>
-          <Checkbox label='cpu.free' /><br/>
+          <Checkbox label='cpu.free' /><br />
+          <Checkbox label='cpu.free' /><br />
         </Accordion.Content>
 
       </Accordion>
diff --git a/src/ts/containers/test/SensorDetails.tsx b/src/ts/containers/test/SensorDetails.tsx
new file mode 100644
index 0000000..caab5b5
--- /dev/null
+++ b/src/ts/containers/test/SensorDetails.tsx
@@ -0,0 +1,118 @@
+import * as React from 'react';
+import { Button, Table, Label, Segment, Header } from 'semantic-ui-react';
+import { DetailContainer } from './commons/DetailContainer';
+import { SensorItems } from './SensorItems';
+
+export class SensorDetails extends React.Component<any, any> {
+
+  constructor(props: any, context: any) {
+    super(props, context);
+    this.state = {
+    };
+  }
+
+  componentWillMount() {
+
+  }
+
+  render() {
+    const items = [
+      { name: 'Info', child: <Button sensor={this.props.sensor}/> },
+      { name: 'Sensor Items', child: <SensorItems sensor={this.props.sensor}/> },
+    ];
+    const data = {'probe':this.props.probe};
+    return (
+      <DetailContainer panes={items} data={data}/>
+    );
+  }
+}
+
+export class SensorBasicInfo extends React.Component<any, any> {
+
+  constructor(props: any, context: any) {
+    super(props, context);
+    this.state = {
+    };
+  }
+
+  handleStartStop(event: any, data: any) {
+    console.log(event);
+  }
+  handleDiscovery(event: any, data: any) {
+    alert('Discovery');
+  }
+
+  handleBack(event: any, data: any) {
+    this.props.onBack();
+  }
+
+
+  showStartStopBtn() {
+    if (this.props.probe.metaProbeStatus.name === 'STARTED') {
+      return <Button content='Stop' icon='stop' labelPosition='left' color={'blue'} floated={'right'} onClick={this.handleStartStop} />;
+    } else {
+      return <Button content='Start' icon='play' labelPosition='left' color={'blue'} floated={'right'} onClick={this.handleStartStop} />;
+    }
+  }
+
+  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>
+
+              <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()}
+
+                </Table.Cell>
+              </Table.Row>
+            </Table.Body>
+          </Table>
+        </Segment>
+      </Segment.Group>
+    );
+  }
+}
\ No newline at end of file
diff --git a/src/ts/containers/test/SensorItems.tsx b/src/ts/containers/test/SensorItems.tsx
new file mode 100644
index 0000000..42ebd0d
--- /dev/null
+++ b/src/ts/containers/test/SensorItems.tsx
@@ -0,0 +1,26 @@
+import * as React from 'react';
+import { Table, Button } from 'semantic-ui-react';
+
+export class SensorItems extends React.Component<any, any> {
+
+  constructor(props: any, context: any) {
+    super(props, context);
+    this.state = {
+    };
+  }
+
+  componentWillMount() {
+
+  }
+
+  render() {
+    return (
+      <div>
+        Sensor Item List
+      </div>
+    );
+  }
+}
+
+
+
diff --git a/src/ts/containers/test/Sensors.tsx b/src/ts/containers/test/Sensors.tsx
index fdbd8d3..6400139 100644
--- a/src/ts/containers/test/Sensors.tsx
+++ b/src/ts/containers/test/Sensors.tsx
@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { Table, Button } from 'semantic-ui-react';
-
+import { SensorDetails } from './SensorDetails';
 
 export class Sensors extends React.Component<any, any> {
 
@@ -10,6 +10,7 @@ export class Sensors extends React.Component<any, any> {
     super(props, context);
     this.state = {
       selected: null,
+       isDetail: false, //temp
     };
   }
 
@@ -63,9 +64,10 @@ export class Sensors extends React.Component<any, any> {
     ];
   }
 
-  handleSelect(selectedProbe: object) {
+  handleSelect(selectedSensor: object) {
     this.setState({
-      selected: selectedProbe,
+      selected: selectedSensor,
+      isDetail: true,
     });
   }
 
@@ -87,9 +89,14 @@ export class Sensors extends React.Component<any, any> {
   handleStartStop(event: any, data: any) {
     console.log(event);
   }
+  handleAddSensor() {
+    console.log('adding a sensor');
+  }
 
   render() {
-
+    if (this.state.isDetail) {
+      return <SensorDetails sensor={this.state.selected} />;
+    } 
     return (
       <div>
         <Table celled selectable striped>
@@ -100,7 +107,6 @@ export class Sensors extends React.Component<any, any> {
               <Table.HeaderCell textAlign={'center'}>Crawler</Table.HeaderCell>
               <Table.HeaderCell textAlign={'center'}>Description</Table.HeaderCell>
               <Table.HeaderCell textAlign={'center'}>Item count</Table.HeaderCell>
-              <Table.HeaderCell />
             </Table.Row>
           </Table.Header>
 
@@ -112,11 +118,12 @@ export class Sensors extends React.Component<any, any> {
                 <Table.Cell>{sensor.metaCrawler.name}</Table.Cell>
                 <Table.Cell>{sensor.description}</Table.Cell>
                 <Table.Cell>to do</Table.Cell>
-                <Table.Cell collapsing>{this.showStartStopBtn(sensor.metaSensorStatus)}</Table.Cell>
+                {/* <Table.Cell collapsing>{this.showStartStopBtn(sensor.metaSensorStatus)}</Table.Cell> */}
               </Table.Row>
             ))}
           </Table.Body>
         </Table>
+        <Button content='Add' icon='add' labelPosition='left' floated='right' positive onClick={this.handleAddSensor.bind(this)} />
       </div>
     );
   }
diff --git a/src/ts/containers/test/TargetDetails.tsx b/src/ts/containers/test/TargetDetails.tsx
index 660c244..f72edf0 100644
--- a/src/ts/containers/test/TargetDetails.tsx
+++ b/src/ts/containers/test/TargetDetails.tsx
@@ -1,6 +1,8 @@
 import * as React from 'react';
-import { Button, Table, Container } from 'semantic-ui-react';
+import { Button, Table } from 'semantic-ui-react';
 import { Sensors } from './Sensors';
+import { DetailContainer } from './commons/DetailContainer';
+
 
 export class TargetDetails extends React.Component<any, any> {
 
@@ -18,8 +20,35 @@ export class TargetDetails extends React.Component<any, any> {
   }
 
   render() {
+
+    const items = [
+      { name: 'Info', child: <TargetBasicInfo probe={this.props.probe} /> },
+      { name: 'Sensors', child: <Sensors probe={this.props.probe}/> },
+    ];
+
     return (
-      <Container>
+      <DetailContainer panes={items}/>
+    );
+  }
+}
+
+
+
+export class TargetBasicInfo extends React.Component<any, any> {
+
+  constructor(props: any, context: any) {
+    super(props, context);
+    this.state = {
+    };
+  }
+
+  handleRemoveTarget() {
+    alert('remove');
+  }
+
+  render() {
+    return (
+      <div>
         <Table celled={true}>
           <Table.Body>
             <Table.Row>
@@ -60,16 +89,9 @@ export class TargetDetails extends React.Component<any, any> {
 
           </Table.Body>
         </Table>
-        <Button content='Back' icon='left arrow' labelPosition='left' onClick={this.handleBack} />
         <Button primary floated={'right'} negative onClick={this.handleRemoveTarget}>Remove</Button>
-        <Button primary floated={'right'} negative onClick={this.handleRemoveTarget}>Add Sensor</Button>
 
-        <Sensors target={this.props.target} />
-
-      </Container >
+      </div>
     );
   }
-}
-
-
-
+}
\ No newline at end of file
diff --git a/src/ts/containers/test/Targets.tsx b/src/ts/containers/test/Targets.tsx
index 7fe0730..2150c4f 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 } from 'semantic-ui-react';
+import { Table, Grid, Segment, Button, Container, Modal, Input } from 'semantic-ui-react';
 import { TargetDetails } from './TargetDetails';
 
 export class Targets extends React.Component<any, any> {
@@ -22,23 +22,19 @@ export class Targets extends React.Component<any, any> {
   }
 
   render() {
+    const options = [
+      { key: 'm', text: 'Male', value: 'male' },
+      { key: 'f', text: 'Female', value: 'female' },
+    ];
 
     return (
       <Container>
-        <Grid columns={2}>
-          <Grid.Row>
-            <Grid.Column width='4'>
-              <Segment>SEARCH AREA</Segment>
-            </Grid.Column>
-            <Grid.Column>
-              <TargetTable />
-              <Button content='Add' icon='add' labelPosition='left' floated='right' positive onClick={this.handleAddTarget.bind(this)} />
-            </Grid.Column>
-          </Grid.Row>
-        </Grid>
-
+        {/*search bar  */}
+        <TargetTable />
+        <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} />
-        
+
         <Modal
           open={this.state.openAddTarget}
         >
@@ -49,7 +45,7 @@ export class Targets extends React.Component<any, any> {
             <p>contents</p>
           </Modal.Content>
           <Modal.Actions>
-            <Button negative onClick={ ()=> this.setState({openAddTarget:false}) }>Cancel</Button>
+            <Button negative onClick={() => this.setState({ openAddTarget: false })}>Cancel</Button>
             <Button positive labelPosition='right' icon='checkmark' content='Done' />
           </Modal.Actions>
         </Modal>
@@ -66,6 +62,7 @@ export class TargetTable extends React.Component<any, any> {
     super(props, context);
     this.state = {
       selected: null,
+      list: [],
     };
   }
   handleSelect(selectedTarget: object) {
@@ -74,6 +71,20 @@ export class TargetTable extends React.Component<any, any> {
     });
   }
 
+  handleSearch(e: any, data: any) {
+    let searchWord = data.value.toLowerCase();
+    let foundTarget = new Array();
+    for(let target of this.data) {
+      let typeName = target.infra.metaInfraType.name.toLowerCase();
+      if(typeName.indexOf(searchWord) !== -1) {
+        foundTarget.push(target);
+      }
+    }
+    this.setState({
+      list: foundTarget,
+    });
+  }
+
   componentWillMount() {
     this.data = [
       {
@@ -103,7 +114,7 @@ export class TargetTable extends React.Component<any, any> {
           "id": "1",
           "metaInfraType": {
             "id": "1",
-            "name": "OS",
+            "name": "Host",
             "createDate": "424252"
           },
           "childId": "1",
@@ -111,32 +122,37 @@ export class TargetTable extends React.Component<any, any> {
         },
       },
     ];
+    this.setState({
+      list: this.data,
+    });
   }
 
   render() {
-    console.log(this.props.probe);
     return (
-      <Table celled selectable striped>
-        <Table.Header>
-          <Table.Row>
-            <Table.HeaderCell textAlign={'center'}>No.</Table.HeaderCell>
-            <Table.HeaderCell textAlign={'center'}>Type</Table.HeaderCell>
-            <Table.HeaderCell textAlign={'center'}>Name</Table.HeaderCell>
-            <Table.HeaderCell textAlign={'center'}>Created At</Table.HeaderCell>
-          </Table.Row>
-        </Table.Header>
-
-        <Table.Body>
-          {this.data.map((target: any, index: number) => (
-            <Table.Row key={index} onClick={this.handleSelect.bind(this, target)}>
-              <Table.Cell textAlign={'center'}>{index + 1}</Table.Cell>
-              <Table.Cell textAlign={'center'}>{target.infra.metaInfraType.name}</Table.Cell>
-              <Table.Cell>{target.childId}</Table.Cell>
-              <Table.Cell>{target.createDate}</Table.Cell>
+      <div>
+        <Input icon='search' placeholder='Search...' onChange={this.handleSearch.bind(this)} />
+        <Table celled selectable striped>
+          <Table.Header>
+            <Table.Row>
+              <Table.HeaderCell textAlign={'center'}>No.</Table.HeaderCell>
+              <Table.HeaderCell textAlign={'center'}>Type</Table.HeaderCell>
+              <Table.HeaderCell textAlign={'center'}>Name</Table.HeaderCell>
+              <Table.HeaderCell textAlign={'center'}>Version</Table.HeaderCell>
             </Table.Row>
-          ))}
-        </Table.Body>
-      </Table>
+          </Table.Header>
+
+          <Table.Body>
+            {this.state.list.map((target: any, index: number) => (
+              <Table.Row key={index} onClick={this.handleSelect.bind(this, target)}>
+                <Table.Cell textAlign={'center'}>{index + 1}</Table.Cell>
+                <Table.Cell textAlign={'center'}>{target.infra.metaInfraType.name}</Table.Cell>
+                <Table.Cell>todo</Table.Cell>
+                <Table.Cell>todo</Table.Cell>
+              </Table.Row>
+            ))}
+          </Table.Body>
+        </Table>
+      </div>
     );
   }
 }

From bbe53b26475387611d3c8f3e41b0ea39eda4bcc9 Mon Sep 17 00:00:00 2001
From: geek <geek@loafle.com>
Date: Thu, 13 Jul 2017 15:36:54 +0900
Subject: [PATCH 2/2] discovery

---
 src/ts/containers/test/DiscoveryProbe.tsx |  6 +--
 src/ts/containers/test/DiscoveryTable.tsx | 50 ++++++++++++++++++-----
 2 files changed, 43 insertions(+), 13 deletions(-)

diff --git a/src/ts/containers/test/DiscoveryProbe.tsx b/src/ts/containers/test/DiscoveryProbe.tsx
index f8a86bc..2431a21 100644
--- a/src/ts/containers/test/DiscoveryProbe.tsx
+++ b/src/ts/containers/test/DiscoveryProbe.tsx
@@ -9,9 +9,9 @@ export class DiscoveryProbe extends React.Component<any, any> {
     this.state = {};
   }
 
-  componentWillMount() {
-    console.log(this.props.probe);
-  }
+  // componentWillMount() {
+  //   console.log(this.props.probe);
+  // }
 
   handle() {
     this.props.onProbeChange();
diff --git a/src/ts/containers/test/DiscoveryTable.tsx b/src/ts/containers/test/DiscoveryTable.tsx
index d94726f..946fa85 100644
--- a/src/ts/containers/test/DiscoveryTable.tsx
+++ b/src/ts/containers/test/DiscoveryTable.tsx
@@ -1,8 +1,10 @@
 import * as React from 'react';
-import {Table, Button, Input, InputProps, ButtonProps} from 'semantic-ui-react';
+import {Table, Button, Input, InputProps, ButtonProps, Dropdown } from 'semantic-ui-react';
 
 export class DiscoveryTable extends React.Component<any, any> {
 
+  private serviceTemp: any;
+
   constructor(props: any, context: any) {
     super(props, context);
     this.state = {
@@ -14,6 +16,25 @@ export class DiscoveryTable extends React.Component<any, any> {
     };
   }
 
+  componentWillMount() {
+    this.serviceTemp = [
+      { key: 'http', text: 'HTTP', value: 'http' },
+      { key: 'ftp', text: 'FTP', value: 'ftp' },
+      { key: 'snmp', text: 'SNMP', value: 'snmp' },
+      { key: 'oracle', text: 'Oracle', value: 'oracle' },
+      { key: 'mysql', text: 'MySQL', value: 'mysql' },
+      { key: 'wmi', text: 'WMI', value: 'wmi' },
+      { key: 'sql_server', text: 'SQL Server', value: 'sql_server' },
+      { key: 'stmp', text: 'STMP', value: 'stmp' },
+      { key: 'imap', text: 'IMAP', value: 'imap' },
+      { key: 'ssh', text: 'SSH', value: 'ssh' },
+      { key: 'telnet', text: 'Telnet', value: 'telnet' },
+      { key: 'casandra', text: 'Casandra', value: 'casandra' },
+      { key: 'mongodb', text: 'mongoDB', value: 'mongodb' },
+      { key: 'rmi', text: 'RMI', value: 'rmi' }
+    ];
+  }
+
   handleInput(event: React.SyntheticEvent<HTMLInputElement>, data: InputProps) {
     // console.log( data.value);
     // console.log( event.target);
@@ -70,24 +91,33 @@ export class DiscoveryTable extends React.Component<any, any> {
         <Table celled>
           <Table.Body>
             <Table.Row>
-              <Table.Cell width='1'>Start IP</Table.Cell>
-              <Table.Cell width='6'><Input tabIndex='0' size='large' placeholder='Start IP' onChange={this.handleInput.bind(this)} /></Table.Cell>
+              <Table.Cell width='2'>Zone CIDR</Table.Cell>
+              <Table.Cell width='7'><Input fluid disabled size='large' placeholder='Start IP' defaultValue='192.168.1.0/24' /></Table.Cell>
             </Table.Row>
             <Table.Row>
-              <Table.Cell>End IP</Table.Cell>
-              <Table.Cell><Input tabIndex='1' size='large' placeholder='End IP' onChange={this.handleInput.bind(this)} /></Table.Cell>
+              <Table.Cell>IP Range</Table.Cell>
+              <Table.Cell>
+                <Input tabIndex='1' size='large' placeholder='Start IP' onChange={this.handleInput.bind(this)} /> &nbsp;&nbsp;
+                <Input tabIndex='2' size='large' placeholder='End IP' onChange={this.handleInput.bind(this)} /> &nbsp;&nbsp;
+                <Input tabIndex='3' size='large' placeholder='Exclude IP' onChange={this.handleInput.bind(this)} />
+              </Table.Cell>
             </Table.Row>
             <Table.Row>
-              <Table.Cell>Exclude IP</Table.Cell>
-              <Table.Cell><Input tabIndex='2' size='large' placeholder='Exclude IP' onChange={this.handleInput.bind(this)} /></Table.Cell>
+              <Table.Cell>Port Range</Table.Cell>
+              <Table.Cell>
+                <Input tabIndex='4'  size='large' placeholder='Start Port' onChange={this.handleInput.bind(this)} /> &nbsp;&nbsp;
+                <Input tabIndex='5'  size='large' placeholder='End Port' onChange={this.handleInput.bind(this)} />
+              </Table.Cell>
             </Table.Row>
             <Table.Row>
-              <Table.Cell>Start Port</Table.Cell>
-              <Table.Cell><Input tabIndex='3' size='large' placeholder='Start Port' onChange={this.handleInput.bind(this)} /></Table.Cell>
+              <Table.Cell>Service</Table.Cell>
+              <Table.Cell>
+                  <Dropdown placeholder='Service' fluid multiple selection options={this.serviceTemp}  />
+              </Table.Cell>
             </Table.Row>
             <Table.Row>
               <Table.Cell>End Port</Table.Cell>
-              <Table.Cell><Input tabIndex='4' size='large' placeholder='End Port' onChange={this.handleInput.bind(this)} /></Table.Cell>
+              <Table.Cell><Input tabIndex='6' size='large' placeholder='End Port' onChange={this.handleInput.bind(this)} /></Table.Cell>
             </Table.Row>
           </Table.Body>
         </Table>