.

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 { TargetDetail } from './containers/target/TargetDetail';
 import { DiscoveryResult } from './containers/discovery/DiscoveryResult';
 
 export class Routes extends React.Component<any, any> {
@@ -38,6 +39,7 @@ 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='/target/targetDetail' >TargetDetail</Link></li>
         <li><Link to='/discovery/DiscoveryResult' >DiscoveryResult</Link></li>
 
 
@@ -56,6 +58,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='/target/targetDetail' component={TargetDetail} />
           <Route exact path='/discovery/DiscoveryResult' component={DiscoveryResult} />
 
           <Route component={NotFound} />

src/ts/containers/prove/Download.tsx

@@ -21,11 +21,11 @@ const styles = {
         height: 700,
         padding: 20,
     },
-}
+};
 
 export class ProveDownload extends React.Component<any, any> {
     constructor(props: any, context: any) {
-        super(props, context)
+        super(props, context);
         this.state = {
             selectedOSidx: 0,
             selectedOSName: "Windows",

src/ts/containers/sensor/SensorList.tsx

@@ -1,136 +0,0 @@
-// import * as React from 'react';
-// import { List, ListItem, makeSelectable } from 'material-ui/List';
-// import Subheader from 'material-ui/Subheader';
-// import Paper from 'material-ui/Paper';
-// import { OFRest } from '../../components/Rest';
-// import * as Utils from '../../components/Utils';
-// import RaisedButton from 'material-ui/RaisedButton';
-// import {
-//   Table,
-//   TableBody,
-//   TableHeader,
-//   TableHeaderColumn,
-//   TableFooter,
-//   TableRow,
-//   TableRowColumn,
-// } from 'material-ui/Table';
-// import { SensorConfigPopup } from '../../containers/config/SensorConfigPopup';
-
-// export class SensorList extends React.Component<any, any> {
-//   constructor(props: any, context: any) {
-//     super(props, context);
-//     this.state = {
-//     };
-//   }
-
-//   componentWillMount() {
-//     this.getSensorList();
-//   }
-
-//   getSensorList() {
-//     // 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);
-//     // });
-//   }
-
-
-//   handleRowSelection = (selectedRows: any) => {
-//     this.setState({
-//       selected: selectedRows,
-//     });
-//   }
-
-//   // handleNext = () => {
-//   //   if (this.state.selected.length === 0) {
-//   //     alert('Select a target to monitor');
-//   //   } else {
-//   //     this.setState({
-//   //       startConfig: true,
-//   //     });
-//   //   }
-//   // }
-
-//   isSelected = (index: any) => {
-//     if (this.state.selected.indexOf(index) === -1) {
-//       return false;
-//     } else {
-//       return true;
-//     }
-//   }
-//   handleConfigCancel = () => {
-//     this.setState({
-//       startConfig: false,
-//     });
-//   }
-//   showSensorConfigPopup = () => {
-//     if (this.state.startConfig) {
-//       return <SensorConfigPopup open={this.state.startConfig} onCancel={this.handleConfigCancel} target={this.state.targets[this.state.selected[0]]} />;
-//     }
-//     return null;
-//   }
-
-//   render() {
-//     return (
-//       <div >
-//         {this.showSensorConfigPopup()}
-//         <Table
-//           selectable={true}
-//           multiSelectable={false}
-//           onRowSelection={this.handleRowSelection.bind(this)}
-//         >
-//           <TableHeader
-//             adjustForCheckbox={false}
-//             enableSelectAll={false}
-//             displaySelectAll={true}>
-//             <TableRow >
-//               <TableHeaderColumn >Host</TableHeaderColumn>
-//               <TableHeaderColumn >Port</TableHeaderColumn>
-//               <TableHeaderColumn >Type</TableHeaderColumn>
-//               <TableHeaderColumn >Kind</TableHeaderColumn>
-//               <TableHeaderColumn >Name</TableHeaderColumn>
-//               <TableHeaderColumn >Version</TableHeaderColumn>
-//             </TableRow>
-//           </TableHeader>
-//           <TableBody
-//             deselectOnClickaway={false}>
-//             displayRowCheckbox={true}
-//             >
-//             {this.state.targets.map((row: any, index: number) => (
-//               <TableRow key={index}
-//                 selected={this.isSelected(index)}
-//               >
-//                 <TableRowColumn>{Utils.int2ip(row.ip)}</TableRowColumn>
-//                 <TableRowColumn>{row.port}</TableRowColumn>
-//                 <TableRowColumn>{row.targetType}</TableRowColumn>
-//                 <TableRowColumn>{row.kinds}</TableRowColumn>
-//                 <TableRowColumn>{row.vendorName}</TableRowColumn>
-//                 <TableRowColumn>{row.version}</TableRowColumn>
-//               </TableRow>
-//             ))};
-
-//             </TableBody>
-//         </Table>
-
-//         <RaisedButton label="Next" primary={true} onClick={this.handleNext.bind(this)} style={{ margin: 20 }} />
-
-//       </div>
-//     );
-//   }
-// }

src/ts/containers/sensor/Sensors.tsx

@@ -0,0 +1,107 @@
+import * as React from 'react';
+import { List, ListItem, makeSelectable } from 'material-ui/List';
+import { OFRest } from '../../components/Rest';
+import Paper from 'material-ui/Paper';
+import Avatar from 'material-ui/Avatar';
+import EditorInsertChart from 'material-ui/svg-icons/editor/insert-chart';
+import { blue500, yellow600 } from 'material-ui/styles/colors';
+
+
+export class Sensors extends React.Component<any, any> {
+  sensorMap = {};
+  constructor(props: any, context: any) {
+    super(props, context);
+    this.state = {
+      sensors: [],
+      test: {},
+    };
+  }
+
+  componentWillMount() {
+    this.getSensorList();
+  }
+
+
+  getSensorList() {
+    let obj: any;
+    obj = {
+      "id": "1",
+    };
+
+    let os: OFRest = new OFRest("Sensor", "List", obj);
+    var that: any = this;
+    os.Call().then(function (res) {
+      return res.json();
+    }).then(function (json) {
+      let list = JSON.parse(json.resultStr);
+      that.setState({
+        sensors: list,
+      });
+      for (var i = 0; i < list.length; i++) {
+        that.getSensorItems(list[i]);
+      }
+    }).catch(function (err) {
+      console.log(err);
+    });
+  }
+
+
+  isSelected = (index: any) => {
+    if (this.state.selected.indexOf(index) === -1) {
+      return false;
+    } else {
+      return true;
+    }
+  }
+
+
+  getSensorItems(sensor: any) {
+    var nested = Array();
+    let os: OFRest = new OFRest("SensorItemMapping", "List", sensor);
+    var that: any = this;
+    os.Call().then(function (res) {
+      return res.json();
+    }).then(function (json) {
+      var list = JSON.parse(json.resultStr);
+      that.sensorMap[sensor.id] = list;
+      that.setState({
+        test: that.sensorMap,
+      });
+    }).catch(function (err) {
+      console.log(err);
+    });
+  }
+
+  getItems = (sensor:any) => {
+    let arr = Array();
+    let list = this.state.test[sensor.id];
+    if(list === undefined || list.length === 0 || list === null) {
+      return arr;
+    }
+    for(var i=0;i<list.length;i++){
+      console.log(list[i]);
+      arr.push(<ListItem key={i} primaryText={list[i].sensorItem.name}/>);
+    }
+
+    return arr;
+  }
+
+  render() {
+    return (
+      <Paper>
+        Sensors
+        <List>
+          {this.state.sensors.map((sensor: any, index: number) => (
+            <ListItem key={index}
+              leftAvatar={<Avatar icon={<EditorInsertChart />} backgroundColor={yellow600} />}
+              primaryText={'By ' + sensor.crawler.name}
+              secondaryText={'Created at ' + sensor.createDate}
+              initiallyOpen={true}
+              nestedItems={this.getItems(sensor)}
+            />
+          ))}
+        </List>
+      </Paper>
+    );
+  }
+}

src/ts/containers/target/TargetDetail.tsx

@@ -0,0 +1,41 @@
+import * as React from 'react';
+import { OFRest } from '../../components/Rest';
+import Dialog from 'material-ui/Dialog';
+import FlatButton from 'material-ui/FlatButton';
+import RaisedButton from 'material-ui/RaisedButton';
+import { Card, CardActions, CardHeader, CardText } from 'material-ui/Card';
+import * as Utils from '../../components/Utils';
+import DropDownMenu from 'material-ui/DropDownMenu';
+import MenuItem from 'material-ui/MenuItem';
+import AppBar from 'material-ui/AppBar';
+import Checkbox from 'material-ui/Checkbox';
+import TextField from 'material-ui/TextField';
+import { RadioButton, RadioButtonGroup } from 'material-ui/RadioButton';
+import Paper from 'material-ui/Paper';
+import {
+    Table,
+    TableBody,
+    TableHeader,
+    TableHeaderColumn,
+    TableRow,
+    TableRowColumn,
+} from 'material-ui/Table';
+import { Sensors } from '../../containers/sensor/Sensors';
+
+
+
+export class TargetDetail extends React.Component<any, any> {
+    constructor(props: any, context: any) {
+        super(props, context);
+        this.state = {
+        };
+    }
+
+
+    render() {
+
+        return (
+            <Sensors/>
+        );
+    }
+}

src/ts/containers/target/TargetList.tsx

@@ -60,6 +60,7 @@ export class TargetList extends React.Component<any, any> {
     });
   }
 
+
   handleNext = () => {
     if (this.state.selected.length === 0) {
       alert('Select a target to monitor');
@@ -69,7 +70,13 @@ export class TargetList extends React.Component<any, any> {
       });
     }
   }
-
+  handleDetail = () => {
+    if (this.state.selected.length === 0) {
+      alert('Select a target to monitor');
+    } else {
+      this.props.history.push('/target/targetDetail');
+    }
+  }
 
   isSelected = (index: any) => {
     if (this.state.selected.indexOf(index) === -1) {
@@ -132,8 +139,8 @@ export class TargetList extends React.Component<any, any> {
             </TableBody>
         </Table>
 
-        <RaisedButton label="Next" primary={true} onClick={this.handleNext.bind(this)} style={{ margin: 20 }} />
+        <RaisedButton label="New Sensor" primary={true} onClick={this.handleNext.bind(this)} style={{ margin: 20 }} />
-
+        <RaisedButton label="Detail" primary={true} onClick={this.handleDetail.bind(this)} style={{ margin: 20 }} />
       </div>
     );
   }