.

src/ts/containers/config/SensorConfigPopup.tsx

@@ -11,6 +11,7 @@ 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,
@@ -26,49 +27,75 @@ const customContentStyle = {
 };
 
 export class SensorConfigPopup extends React.Component<any, any> {
+    private tempList: any[];
     constructor(props: any, context: any) {
         super(props, context);
         this.state = {
             crawler: null,
-            sensorItems: []
+            sensorItems: [],
+            selectedItems: [],
+            startConfirm: false,
         };
     }
 
+    componentWillMount() {
+        this.tempList = [];
+    }
+
     handleClose = () => {
         this.props.onCancel();
     }
 
-    handleCrawlerSelect = (c: any) => {
+    handleConfirmCancel = () => {
-        //getting items by target&crawler type
-        var items = [
-            {
-                "id": 0,
-                "category": "cpu",
-                "name": "cpu.usage",
-                "description": "cpu usage ",
-            },
-            {
-                "id": 1,
-                "category": "cpu",
-                "name": "cpu.free",
-                "description": "cpu free ",
-            },
-            {
-                "id": 2,
-                "category": "mem",
-                "name": "mem.free",
-                "description": "mem free ",
-            },
-        ];
-
         this.setState({
-            crawler: c,
+            startConfirm: false,
-            sensorItems: items,
         });
     }
 
+    handleCrawlerSelect = (c: any) => {
+        //getting items by target&crawler type
+
+        let os: OFRest = new OFRest("SensorItem", "List", JSON.stringify(c));
+        var that: any = this;
+        os.Call().then(function (res) {
+            return res.json();
+        }).then(function (json) {
+            let list = JSON.parse(json.resultStr);
+            console.log(list);
+            that.setState({
+                crawler: c,
+                sensorItems: list,
+            });
+        }).catch(function (err) {
+            console.log(err);
+        });
+
+    }
+
     handleSensorItemsSelect = (items: any) => {
-        console.log(items);
+        let temp = [];
+        if (items === 'all') {
+            this.tempList = this.state.sensorItems;
+        } else {
+            if (items.length > 0) {
+                for (var i = 0; i < items.length; i++) {
+                    temp[i] = this.state.sensorItems[items[i]];
+                }
+            }
+            this.tempList = temp;
+        }
+
+    }
+
+    handleSubmit = () => {
+        if (this.tempList.length === 0) {
+            alert("You should choose at least one sensor.");
+        } else {
+            this.setState({
+                startConfirm: true,
+                selectedItems: this.tempList
+            });
+        }
     }
 
     render() {
@@ -81,7 +108,7 @@ export class SensorConfigPopup extends React.Component<any, any> {
             <RaisedButton
                 label="Submit"
                 primary={true}
-                onTouchTap={this.handleClose}
+                onTouchTap={this.handleSubmit}
             />,
         ];
 
@@ -103,13 +130,13 @@ export class SensorConfigPopup extends React.Component<any, any> {
                             showExpandableButton={true}
                         />
                         <CardText expandable={true}>
-                            <div>Discovered At : </div>
+                            <div>Discovered At : {this.props.target.createDate}</div>
-                            <div>Target Type : </div>
+                            <div>Target Type : {this.props.target.targetType}</div>
-                            <div>Kind : </div>
+                            <div>Kind : {this.props.target.kinds}</div>
-                            <div>Name : </div>
+                            <div>Name : {this.props.target.vendorName}</div>
-                            <div>Version : </div>
+                            <div>Version : {this.props.target.version}</div>
-                            <div>Port : </div>
+                            <div>Port : {this.props.target.port}</div>
-                            <div>Port Type : </div>
+                            <div>Port Type : {this.props.target.portType}</div>
                         </CardText>
                     </Card>
 
@@ -120,6 +147,11 @@ export class SensorConfigPopup extends React.Component<any, any> {
                         <SensorItemSelector items={this.state.sensorItems} onChange={this.handleSensorItemsSelect} />
                     </Card>
                 </Dialog>
+                <ConfirmPopup open={this.state.startConfirm} onCancel={this.handleConfirmCancel}
+                    target={this.props.target}
+                    crawler={this.state.crawler}
+                    items={this.state.selectedItems} />
+
             </div>
         );
     }
@@ -138,7 +170,6 @@ export class CrawlerSelector extends React.Component<any, any> {
     }
 
     componentWillMount() {
-
         let os: OFRest = new OFRest("Crawler", "List", null);
         var that: any = this;
         os.Call().then(function (res) {
@@ -151,8 +182,6 @@ export class CrawlerSelector extends React.Component<any, any> {
         }).catch(function (err) {
             console.log(err);
         });
-
-
     }
 
     handleCrawlerChange = (event: any, index: any, v: number) => {
@@ -170,9 +199,8 @@ export class CrawlerSelector extends React.Component<any, any> {
     checkAuth = (c: any) => {
         //Todo. validate auth
         this.setState({
-            authOpen: true,
+            authOpen: false,
         });
-
         let os: OFRest = new OFRest("Crawlerinputitemmapping", "List", c);
         var that: any = this;
         os.Call().then(function (res) {
@@ -207,6 +235,10 @@ export class CrawlerSelector extends React.Component<any, any> {
         }</div>;
     }
 
+    handleTestAuth = () => {
+
+    }
+
     renderInputs = (data: any) => {
         let input = data.crawlerInputItem;
         if (input.dataType === "String") {
@@ -214,9 +246,10 @@ export class CrawlerSelector extends React.Component<any, any> {
                 hintText={input.description}
                 floatingLabelText={input.name}
                 underlineShow={true}
-            //value={this.state.email}
+                value={this.state.email}
-            // onChange={(e, newValue) => this.setState({ email: newValue })}
+                onChange={(e, newValue) => this.setState({ email: newValue })}
-            /></div>;
+            />
+            </div>;
         }
         else if (input.dataType === "Select") {
             let values = input.description.split('||');
@@ -293,6 +326,7 @@ export class SensorItemSelector extends React.Component<any, any> {
 
     render() {
         return (
+            <div style={{ height: 320, overflow: 'auto' }}>
                 <Table onRowSelection={this.handleRowSelection} multiSelectable={true}>
                     <TableHeader>
                         <TableRow>
@@ -301,7 +335,7 @@ export class SensorItemSelector extends React.Component<any, any> {
                             <TableHeaderColumn>Description</TableHeaderColumn>
                         </TableRow>
                     </TableHeader>
-                <TableBody>
+                    <TableBody deselectOnClickaway={false}>
 
                         {this.props.items.map((row: any, index: number) => (
                             <TableRow key={index} selected={this.isSelected(index)}>
@@ -312,7 +346,86 @@ export class SensorItemSelector extends React.Component<any, any> {
                         ))}
                     </TableBody>
                 </Table>
+            </div>
         );
     }
 }
 
+
+export class ConfirmPopup extends React.Component<any, any> {
+    constructor(props: any, context: any) {
+        super(props, context);
+        this.state = {
+        };
+    }
+
+    handleClose = () => {
+        this.props.onCancel();
+    }
+
+
+    handleConfirm = () => {
+        if (this.props.target === null ||
+            this.props.crawler === null) {
+            alert("err");
+            return;
+        }
+        // let os: OFRest = new OFRest("SensorItem", "List", JSON.stringify(c));
+        // var that: any = this;
+        // os.Call().then(function (res) {
+        //     return res.json();
+        // }).then(function (json) {
+        //     let list = JSON.parse(json.resultStr);
+        //     console.log(list);
+        //     that.setState({
+        //         crawler: c,
+        //         sensorItems: list,
+        //     });
+        // }).catch(function (err) {
+        //     console.log(err);
+        // });
+    }
+
+    showInfo = () => {
+        if (this.props.target === null || this.props.crawler === null) {
+            return <div></div>;
+        }
+        return <div>
+            <div>TARGET : {this.props.target.vendorName}</div>
+            <div>CRAWLER : {this.props.crawler.name}</div>
+            <br />
+            <div>Sensor Items</div>
+        </div>;
+    }
+
+    render() {
+        const actions = [
+            <FlatButton
+                label="Cancel"
+                primary={true}
+                onTouchTap={this.handleClose}
+            />,
+            <RaisedButton
+                label="Confirm"
+                primary={true}
+                onTouchTap={this.handleConfirm}
+            />,
+        ];
+
+        return (
+            <Dialog
+                title="Confirm sensor configuration"
+                actions={actions}
+                modal={true}
+                open={this.props.open}
+            >
+                <div>
+                    {this.showInfo()}
+                    {this.props.items.map((data: any, index: number) => {
+                        return <Paper key={index}>{data.id}. {data.name}-{data.description}</Paper>;
+                    })}
+                </div>
+            </Dialog>
+        );
+    }
+}

src/ts/containers/sensor/SensorList.tsx

@@ -0,0 +1,136 @@
+// 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>
+//     );
+//   }
+// }