discovery

src/ts/@overflow/probe/react/components/ProbeDetailInfo.tsx

@@ -9,7 +9,7 @@ import {
 } from 'semantic-ui-react';
 // import { TargetTable } from '@overflow/target/react/components/TargetList';
 import Probe from '@overflow/probe/api/model/Probe';
-import {Discovery} from '../../../discovery/react/components/Discovery';
+import { Discovery } from '../../../discovery/react/components/Discovery';
 
 export interface StateProps {
   id: string;
@@ -24,7 +24,7 @@ export type Props = StateProps & DispatchProps;
 export interface State {
   probe: Probe;
   id: string;
-  isDiscovery:boolean;
+  isDiscovery: boolean;
 }
 
 
@@ -53,18 +53,27 @@ export class ProbeDetailInfo extends React.Component<Props, State> {
 
   public handleDiscovery = (event: any, data: any): void => {
     console.log(event);
-    // let probeId = String(this.state.id);
+    this.setState({isDiscovery: true});
-    // this.props.onDiscoverySelect(this.state.id);
+    // // let probeId = String(this.state.id);
+    // // this.props.onDiscoverySelect(this.state.id);
     // if (this.state.isDiscovery) {
-    //   this.setState({isDiscovery: false});
-    // } else {
-    //   this.setState({isDiscovery: true});
-    // }
 
+    //   // this.setState({isDiscovery: false});
+    // } else {
+    //   // this.setState({isDiscovery: true});
+    //   return null;
+    // }
+  }
+
+  public renderDiscovery(): JSX.Element {
+    if (this.state.isDiscovery) {
+      return <Discovery />;
+    }
+    return null;
   }
 
   public showStartStopBtn(): JSX.Element {
-    return <Button content='Stop' icon='stop' labelPosition='left' negative/>;
+    return <Button content='Stop' icon='stop' labelPosition='left' negative />;
   }
 
   public render(): JSX.Element {
@@ -113,24 +122,24 @@ export class ProbeDetailInfo extends React.Component<Props, State> {
             <Table.Row>
               <Table.HeaderCell colSpan='2'>
                 {this.showStartStopBtn()}
-                <Button content='Discovery' icon='search' labelPosition='left' floated={'right'} positive onClick={this.handleDiscovery}/>
+                <Button content='Discovery' icon='search' labelPosition='left' floated={'right'} positive onClick={this.handleDiscovery} />
               </Table.HeaderCell>
             </Table.Row>
           </Table.Footer>
 
         </Table>
         {/* {this.showStartStopBtn()} */}
-
+        {this.renderDiscovery()}
       </Container>
     );
   }
 
-  private showDiscovery = ():JSX.Element => {
+  private showDiscovery = (): JSX.Element => {
     if (!this.state.isDiscovery) {
-      this.setState({isDiscovery:true});
+      this.setState({ isDiscovery: true });
-      return <Discovery/>;
+      return <Discovery />;
     } else {
-      this.setState({isDiscovery:false});
+      this.setState({ isDiscovery: false });
       return null;
     }
   }

src/ts/@overflow/probe/react/components/ProbeList.tsx

@@ -36,47 +36,60 @@ export class ProbeList extends React.Component<Props, State> {
     this.data = [
       {
         'id': '11',
-        'metaProbeStatus': {
+        'status': {
           'name': 'STARTED',
         },
         'domain': {
-          'name': 'asus',
+          'name': 'insanity\'s domain',
         },
+        'displayName': '192.168.1.105\'s probe',
+        'network': {
+          'cidr': '192.168.1.0/24',
+          'ip': '192.168.1.105',
+          'mac': 'ab:cd:ef:gh:ij',
+        },
+        'targetCount': '20',
+        'sensorCount': '30',
         'probeKey': '1AGBLKDFJ2452ASDGFL2KWJLKSDJ',
         'description': 'description1111111111',
       },
       {
         'id': '22',
-        'metaProbeStatus': {
+        'status': {
-          'name': 'STOPPED',
-        },
-        'domain': {
-          'name': 'ottugi',
-        },
-        'probeKey': '2AGBLKDFJ2452ASDGFL2KWJLKSDJ',
-        'description': 'description22222222',
-      },
-      {
-        'id': '33',
-        'metaProbeStatus': {
-          'name': 'STOPPED',
-        },
-        'domain': {
-          'name': 'lg',
-        },
-        'probeKey': '3AGBLKDFJ2452ASDGFL2KWJLKSDJ',
-        'description': 'description33333',
-      },
-      {
-        'id': '44',
-        'metaProbeStatus': {
           'name': 'STARTED',
         },
         'domain': {
-          'name': 'apple',
+          'name': 'insanity\'s domain',
         },
-        'probeKey': '4AGBLKDFJ2452ASDGFL2KWJLKSDJ',
+        'displayName': '192.168.1.105\'s probe',
-        'description': 'description4444',
+        'network': {
+          'cidr': '192.168.1.0/24',
+          'ip': '192.168.1.105',
+          'mac': 'ab:cd:ef:gh:ij',
+        },
+        'targetCount': '20',
+        'sensorCount': '30',
+        'probeKey': '1AGBLKDFJ2452ASDGFL2KWJLKSDJ',
+        'description': 'description1111111111',
+      },
+      {
+        'id': '33',
+        'status': {
+          'name': 'STARTED',
+        },
+        'domain': {
+          'name': 'insanity\'s domain',
+        },
+        'displayName': '192.168.1.105\'s probe',
+        'network': {
+          'cidr': '192.168.1.0/24',
+          'ip': '192.168.1.105',
+          'mac': 'ab:cd:ef:gh:ij',
+        },
+        'targetCount': '20',
+        'sensorCount': '30',
+        'probeKey': '1AGBLKDFJ2452ASDGFL2KWJLKSDJ',
+        'description': 'description1111111111',
       },
     ];
     this.setState({
@@ -131,6 +144,7 @@ export class ProbeList extends React.Component<Props, State> {
             <Table.Row>
               <Table.HeaderCell textAlign={'center'}>Name</Table.HeaderCell>
               <Table.HeaderCell textAlign={'center'}>CIDR</Table.HeaderCell>
+              <Table.HeaderCell textAlign={'center'}>IP</Table.HeaderCell>
               <Table.HeaderCell textAlign={'center'}>Status</Table.HeaderCell>
               <Table.HeaderCell textAlign={'center'}>Target Count</Table.HeaderCell>
               <Table.HeaderCell textAlign={'center'}>Sensor Count</Table.HeaderCell>
@@ -156,16 +170,17 @@ export class ProbeList extends React.Component<Props, State> {
   private renderRows(): (JSX.Element | JSX.Element[]) {
     if (this.state.list.length === 0) {
       return <Table.Row error >
-        <Table.Cell textAlign='center' colSpan='5'>No results found.</Table.Cell>
+        <Table.Cell textAlign='center' colSpan='6'>No results found.</Table.Cell>
       </Table.Row>;
     }
     return this.state.list.map((probe: any, index: number) => (
       <Table.Row key={index} onClick={this.handleSelect.bind(this, probe)}>
-        <Table.Cell >{probe.domain.name}</Table.Cell>
+        <Table.Cell >{probe.displayName}</Table.Cell>
-        <Table.Cell>{index}</Table.Cell>
+        <Table.Cell>{probe.network.cidr}</Table.Cell>
-        <Table.Cell negative={this.checkCellStatus(probe.metaProbeStatus)} textAlign={'center'}>{probe.metaProbeStatus.name}</Table.Cell>
+        <Table.Cell>{probe.network.ip}</Table.Cell>
-        <Table.Cell textAlign={'center'} >todo. {probe.targetCnt}</Table.Cell>
+        <Table.Cell negative={this.checkCellStatus(probe.status)} textAlign={'center'}>{probe.status.name}</Table.Cell>
-        <Table.Cell textAlign={'center'} >todo. {probe.sensorCnt}</Table.Cell>
+        <Table.Cell textAlign={'center'} >{probe.targetCount}</Table.Cell>
+        <Table.Cell textAlign={'center'} >{probe.sensorCount}</Table.Cell>
       </Table.Row>
     ));
   }