discovery

src/ts/containers/test/DiscoveryDetails.tsx

@@ -1,32 +1,53 @@
 import * as React from 'react';
-import { Button } from 'semantic-ui-react';
 import { DiscoveryProbe } from './DiscoveryProbe';
 import { DiscoveryTable } from './DiscoveryTable';
 
 export class DiscoveryDetails extends React.Component<any, any> {
 
+  private probeTemp: any;
+
   constructor(props: any, context: any) {
     super(props, context);
     this.state = {};
   }
 
-  discoveryStartHandler = (event: any, data: object) => {
+  componentWillMount() {
-    console.log(event);
+    this.probeTemp =
-  };
+      {
+        "id": "11",
+        "metaProbeStatus": {
+          "name": "STARTED"
+        },
+        "domain": {
+          "name": "overFlow's domain111"
+        },
+        "host": {
+          "ip": "192.168.1.103",
+          "mac": "44:8a:5b:44:8c:e8",
+          "os": "Ubuntu 17.04"
+        },
+        "createAt": "2017-07-12",
+        "probeKey": "AGBLKDFJ2452ASDGFL2KWJLKSDJ",
+        "description": "description1111111111",
+        "lastPollingAt": "2017-07-12 14:20",
+        "nextPollingAt": "2017-07-12 14:30"
+      };
+
+  }
+
+  handleProbeChange(obj: any) {
+    console.log(obj)
+  }
 
   render() {
     return (
       <div>
         <div style={{ margin: '20px' }}>
-          <DiscoveryProbe />
+          <DiscoveryProbe probe={this.probeTemp}/>
         </div>
         <div style={{ margin: '20px' }}>
-          <DiscoveryTable />
+          <DiscoveryTable onProbeChange={this.handleProbeChange} />
         </div>
-        <div style={{ margin: '20px' }}>
-          <Button floated='right' onClick={this.discoveryStartHandler}> Start </Button>
-        </div>
-
       </div>
 
     );

src/ts/containers/test/DiscoveryProbe.tsx

@@ -10,7 +10,11 @@ export class DiscoveryProbe extends React.Component<any, any> {
   }
 
   componentWillMount() {
+    console.log(this.props.probe);
+  }
 
+  handle() {
+    this.props.onProbeChange();
   }
 
   render() {
@@ -22,19 +26,19 @@ export class DiscoveryProbe extends React.Component<any, any> {
               <Table.Cell collapsing>
                 <Label ribbon>Domain</Label>
               </Table.Cell>
-              <Table.Cell>overFlow's domain111</Table.Cell>
+              <Table.Cell>{this.props.probe.domain.name}</Table.Cell>
             </Table.Row>
             <Table.Row>
               <Table.Cell collapsing>
                 <Label ribbon>Status</Label>
               </Table.Cell>
-              <Table.Cell>STARTED</Table.Cell>
+              <Table.Cell>{this.props.probe.metaProbeStatus.name}</Table.Cell>
             </Table.Row>
             <Table.Row>
               <Table.Cell collapsing>
                 <Label ribbon >Host IP</Label>
               </Table.Cell>
-              <Table.Cell>192.168.1.103</Table.Cell>
+              <Table.Cell>{this.props.probe.host.ip}</Table.Cell>
             </Table.Row>
             <Table.Row>
               <Table.Cell collapsing>
@@ -46,13 +50,25 @@ export class DiscoveryProbe extends React.Component<any, any> {
               <Table.Cell collapsing>
                 <Label ribbon>Authorized at</Label>
               </Table.Cell>
-              <Table.Cell>2017-07-13</Table.Cell>
+              <Table.Cell>{this.props.probe.createAt}</Table.Cell>
             </Table.Row>
             <Table.Row>
               <Table.Cell collapsing>
                 <Label ribbon>Description</Label>
               </Table.Cell>
-              <Table.Cell>description1111111111</Table.Cell>
+              <Table.Cell>{this.props.probe.description}</Table.Cell>
+            </Table.Row>
+            <Table.Row>
+              <Table.Cell collapsing>
+                <Label ribbon>Last polling at</Label>
+              </Table.Cell>
+              <Table.Cell>{this.props.probe.lastPollingAt}</Table.Cell>
+            </Table.Row>
+            <Table.Row>
+              <Table.Cell collapsing>
+                <Label ribbon>Next polling at</Label>
+              </Table.Cell>
+              <Table.Cell>{this.props.probe.nextPollingAt}</Table.Cell>
             </Table.Row>
           </Table.Body>
         </Table>

src/ts/containers/test/DiscoveryTable.tsx

@@ -1,11 +1,25 @@
 import * as React from 'react';
-import { Table, Label, Input } from 'semantic-ui-react';
+import { Table, Button, Input } from 'semantic-ui-react';
 
 export class DiscoveryTable extends React.Component<any, any> {
 
   constructor(props: any, context: any) {
     super(props, context);
-    this.state = {};
+    this.state = {
+      endIP: null,
+    };
+  }
+
+  handleEndIpInput(event: React.SyntheticEvent<HTMLAnchorElement>, data: any) {
+    console.log(data.value);
+    this.setState({
+      endIP: data.value,
+    });
+
+  }
+
+  discoveryStartHandler(event: React.SyntheticEvent<HTMLAnchorElement>, data: any) {
+    this.props.onProbeChange(data);
   }
 
   render() {
@@ -19,7 +33,7 @@ export class DiscoveryTable extends React.Component<any, any> {
             </Table.Row>
             <Table.Row>
               <Table.Cell>End IP</Table.Cell>
-              <Table.Cell><Input size='large' placeholder='End IP' /></Table.Cell>
+              <Table.Cell><Input size='large' placeholder='End IP' onChange={this.handleEndIpInput.bind(this)} /></Table.Cell>
             </Table.Row>
             <Table.Row>
               <Table.Cell>Exclude IP</Table.Cell>
@@ -35,6 +49,7 @@ export class DiscoveryTable extends React.Component<any, any> {
             </Table.Row>
           </Table.Body>
         </Table>
+        <Button floated='right' onClick={this.discoveryStartHandler.bind(this)}> Start </Button>
       </div>
     );
   }