search target

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 (

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>

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>
+    );
+  }
+}

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>
+    );
+  }
+}
+
+
+

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>
     );
   }

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} />
+      </div>
-
-      </Container >
     );
   }
-}
+}
-
-
-

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}>
+        {/*search bar  */}
-          <Grid.Row>
+        <TargetTable />
-            <Grid.Column width='4'>
+        <Button content='Add' icon='add' labelPosition='left' floated='right' positive onClick={this.handleAddTarget.bind(this)} />
-              <Segment>SEARCH AREA</Segment>
+        <br /><br /><br /><br /><br /><br /><br /><br /><br />
-            </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>
-
         <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>
+      <div>
-        <Table.Header>
+        <Input icon='search' placeholder='Search...' onChange={this.handleSearch.bind(this)} />
-          <Table.Row>
+        <Table celled selectable striped>
-            <Table.HeaderCell textAlign={'center'}>No.</Table.HeaderCell>
+          <Table.Header>
-            <Table.HeaderCell textAlign={'center'}>Type</Table.HeaderCell>
+            <Table.Row>
-            <Table.HeaderCell textAlign={'center'}>Name</Table.HeaderCell>
+              <Table.HeaderCell textAlign={'center'}>No.</Table.HeaderCell>
-            <Table.HeaderCell textAlign={'center'}>Created At</Table.HeaderCell>
+              <Table.HeaderCell textAlign={'center'}>Type</Table.HeaderCell>
-          </Table.Row>
+              <Table.HeaderCell textAlign={'center'}>Name</Table.HeaderCell>
-        </Table.Header>
+              <Table.HeaderCell textAlign={'center'}>Version</Table.HeaderCell>
-
-        <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>
             </Table.Row>
-          ))}
+          </Table.Header>
-        </Table.Body>
+
-      </Table>
+          <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>
     );
   }
 }