discovery_result

src/ts/Routes.tsx

@@ -17,6 +17,7 @@ import { MemberRegistResult } from './containers/member/RegistResult';
 import { ProveDownload } from './containers/prove/Download';
 
 import { TargetList } from './containers/target/TargetList';
+import { DiscoveryResult } from './containers/discovery/DiscoveryResult';
 
 export class Routes extends React.Component<any, any> {
   render() {
@@ -37,6 +38,8 @@ export class Routes extends React.Component<any, any> {
         <li><Link to='/agent/agents' >Agents</Link></li>
         <li><Link to='/agent/agentDetail' >AgentDetail</Link></li>
         <li><Link to='/target/targetList' >TargetList</Link></li>
+        <li><Link to='/discovery/DiscoveryResult' >DiscoveryResult</Link></li>
+
 
         <Switch>
           <Route exact path='/' component={Main} />
@@ -53,6 +56,7 @@ export class Routes extends React.Component<any, any> {
           <Route exact path='/agent/agentDetail' component={AgentDetail} />
 
           <Route exact path='/target/targetList' component={TargetList} />
+          <Route exact path='/discovery/DiscoveryResult' component={DiscoveryResult} />
 
           <Route component={NotFound} />
         </Switch>

src/ts/components/TargetCreate.tsx

@@ -1,20 +1,20 @@
 
 
-var obj: any;
+// var obj: any;
 
-obj = {
-    "ip": "192.168.1.106",
-    "port": "80",
-    "portType": "TCP",
-    // "targetType":"",
-    "vendorName": "HTTP",
-    // "kinds":"",
-    // "version":"",
+// obj = {
+//     "ip": "192.168.1.106",
+//     "port": "80",
+//     "portType": "TCP",
+//     // "targetType":"",
+//     "vendorName": "HTTP",
+//     // "kinds":"",
+//     // "version":"",
 
-}
+// }
 
-var objArray: any[];
-objArray.push(obj);
+// var objArray: any[];
+// objArray.push(obj);
 
 
 export class TargetCreator {
@@ -32,7 +32,7 @@ export class TargetCreator {
             "vendorName": vendorName,
             // "kinds":"",
             // "version":"",
-        }
+        };
 
         this.list.push(obj);
 

src/ts/components/Utils.tsx

@@ -2,10 +2,15 @@
 
 
 
-export function int2ip (ipInt:number) {
-    return ( (ipInt>>>24) +'.' + (ipInt>>16 & 255) +'.' + (ipInt>>8 & 255) +'.' + (ipInt & 255) );
+export function int2ip(ipInt: number) {
+    return ((ipInt >>> 24) + '.' + (ipInt >> 16 & 255) + '.' + (ipInt >> 8 & 255) + '.' + (ipInt & 255));
 }
 
-export function ip2int(ip:string) {
-    return ip.split('.').reduce(function(ipInt, octet) { return (ipInt<<8) + parseInt(octet, 10)}, 0) >>> 0;
+export function ip2int(ip: string) {
+    return ip.split('.').reduce(function (ipInt, octet) { return (ipInt << 8) + parseInt(octet, 10); }, 0) >>> 0;
+}
+
+export function sec2date(ms: number) {
+    var dateTime = new Date(ms);
+    return dateTime.toLocaleString();
 }

src/ts/containers/discovery/DiscoveryResult.tsx

@@ -0,0 +1,202 @@
+import * as React from 'react';
+import { OFRest } from '../../components/Rest';
+import * as Utils from '../../components/Utils';
+import Checkbox from 'material-ui/Checkbox';
+import RaisedButton from 'material-ui/RaisedButton';
+import { TargetCreator } from '../../components/TargetCreate';
+
+const styles = {
+
+  checkbox: {
+    marginBottom: 16,
+  },
+};
+
+export class DiscoveryResult extends React.Component<any, any> {
+  constructor(props: any, context: any) {
+    super(props, context);
+    this.state = {
+      result: [],
+    };
+  }
+
+  componentWillMount() {
+    let data = '{"startDate":1496812121000,"endDate":1496812155000,"result":true,"zone":{"ip":3232235985,"mask":24,"iface":"enp0s3","mac":8796753988883,"firstScanRange":3232235777,"lastScanRange":3232236030,"hosts":[{"firstScanRange":1,"lastScanRange":10000,"name":"","ip":3232235985,"mac":8796753988883,"ports":null,"createDate":1496812124000,"updateDate":1496812124000},{"firstScanRange":1,"lastScanRange":10000,"name":"","ip":3232235881,"mac":23084201235582,"ports":[{"createDate":-62135596800000,"updateDate":-62135596800000,"services":[{"createDate":-62135596800000,"updateDate":-62135596800000,"portType":"TCP","serviceName":"SMTP"}],"portType":"TCP","portNumber":25},{"createDate":-62135596800000,"updateDate":-62135596800000,"services":[{"createDate":-62135596800000,"updateDate":-62135596800000,"portType":"TCP","serviceName":"HTTP"}],"portType":"TCP","portNumber":3000},{"createDate":-62135596800000,"updateDate":-62135596800000,"services":[{"createDate":-62135596800000,"updateDate":-62135596800000,"portType":"TCP","serviceName":"HTTP"}],"portType":"TCP","portNumber":80}],"createDate":1496812124000,"updateDate":1496812124000}]}}';
+    let obj = JSON.parse(data);
+
+    this.setState({
+      result: obj,
+      selected: []
+    });
+  }
+
+  getData() {
+    let obj: any;
+    obj = {
+      "id": "0",
+      "member": {
+        "id": "1"
+      }
+    };
+
+    let os: OFRest = new OFRest("Target", "List", obj);
+    var that: any = this;
+    os.Call().then(function (res) {
+      return res.json();
+    }).then(function (json) {
+      let targetList = JSON.parse(json.resultStr);
+      that.setState({
+        targets: targetList,
+      });
+    }).catch(function (err) {
+      console.log(err);
+    });
+  }
+
+  handleNext = () => {
+    let c: TargetCreator = new TargetCreator();
+    for (var i = 0; i < this.state.selected.length; i++) {
+      var data = this.state.selected[i];
+      c.Add(data.ip, data.port.portNumber, data.portType, data.vendorName);
+    }
+  }
+
+  handleHostCheck = (checked: boolean, host: any) => {
+    let t = this.state.selected;
+
+    let obj = {
+      "ip": host.ip,
+      "port": 0,
+      "portType": "",
+      "vendorName": host.name,
+    };
+
+    if (checked) {
+      for (var i = 0; i < t.length; i++) {
+        if (t[i] === obj) {
+          return;
+        }
+      }
+      t.push(obj);
+    } else {
+      for (var j = t.length - 1; j >= 0; j--) {
+        if (t[j] === obj) {
+          t.splice(j, 1);
+        }
+      }
+    }
+
+    this.setState({
+      selected: t,
+    });
+  }
+
+  handleServiceCheck = (checked: boolean, host: any, port: any) => {
+    let t = this.state.selected;
+
+    let obj = {
+      "ip": host.ip,
+      "port": port.portNumber,
+      "portType": port.portType,
+      "vendorName": port.services[0].serviceName,
+    };
+
+    if (checked) {
+      for (var i = 0; i < t.length; i++) {
+        if (t[i] === obj) {
+          return;
+        }
+      }
+      t.push(obj);
+    } else {
+      for (var j = t.length - 1; j >= 0; j--) {
+        if (t[j] === obj) {
+          t.splice(j, 1);
+        }
+      }
+    }
+
+    this.setState({
+      selected: t,
+    });
+  }
+
+
+  renderHosts = (zone: any) => {
+    if (zone.hosts === null || zone.hosts.length === 0) {
+      return null;
+    }
+    return <div style={{ marginLeft: 20 }}>
+      {zone.hosts.map((host: any, index: number) => (
+        <div key={index}>
+          <Row type='host' host={host} name={Utils.int2ip(host.ip)} desc={host.mac} onCheck={this.handleHostCheck.bind(this)} />
+          {this.renderPorts(host)}
+        </div>
+      ))}
+    </div>;
+  }
+
+  renderPorts = (host: any) => {
+    if (host.ports === null || host.ports.length === 0) {
+      return null;
+    }
+    return <div style={{ marginLeft: 20 }}>
+      {host.ports.map((port: any, index: number) => (
+        <div key={index}>
+          <Row type='service' host={host} port={port} name={port.portType + port.portNumber} desc={port.services[0].serviceName} onCheck={this.handleServiceCheck.bind(this)} />
+        </div>
+      ))}
+    </div>;
+  }
+
+  render() {
+    return (
+      <div style={{ margin: 20 }}>
+        <div>
+          Elapsed : {Utils.sec2date(this.state.result.startDate)} ~ {Utils.sec2date(this.state.result.endDate)}
+        </div>
+
+        <div>
+          Scan Range : {Utils.int2ip(this.state.result.zone.firstScanRange)} ~ {Utils.int2ip(this.state.result.zone.lastScanRange)}
+        </div>
+
+        <div>
+          Iface : {this.state.result.zone.iface}
+        </div>
+        <div>
+          IP : {Utils.int2ip(this.state.result.zone.ip)}/{this.state.result.zone.mask}
+        </div>
+        <div>
+          MacAddress : {this.state.result.zone.mac}
+        </div>
+
+        <div style={{ margin: 20 }} > Targets </div>
+        {this.renderHosts(this.state.result.zone)}
+
+        <RaisedButton label="Next" primary={true} onClick={this.handleNext.bind(this)} style={{ margin: 20 }} />
+      </div>
+    );
+  }
+}
+
+export class Row extends React.Component<any, any> {
+  constructor(props: any, context: any) {
+    super(props, context);
+    this.state = {
+    };
+  }
+
+  handleCheck(ev: any, checked: boolean) {
+    if (this.props.type === "host") {
+      this.props.onCheck(checked, this.props.host);
+    } else {
+      this.props.onCheck(checked, this.props.host, this.props.port);
+    }
+  }
+
+  render() {
+    return (
+      <Checkbox label={this.props.name + " " + this.props.desc} style={styles.checkbox} onCheck={this.handleCheck.bind(this)} />
+    );
+  }
+}

webpack.config.js

@@ -25,7 +25,7 @@ module.exports = {
         historyApiFallback: true,
         contentBase: [__dirname + '/public', __dirname + '/dist', __dirname + '/node_modules'], // match the output path
         publicPath:  '/' ,// match the output `publicPath`
-        host: '192.168.1.209',
+        host: '192.168.1.105',
         port: 9091,
         stats: { 
             colors: true