diff --git a/src/ts/containers/config/SensorConfigPopup.tsx b/src/ts/containers/config/SensorConfigPopup.tsx index 23cf4a0..4d610e4 100644 --- a/src/ts/containers/config/SensorConfigPopup.tsx +++ b/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 { + 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) => { - //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 ", - }, - ]; - + handleConfirmCancel = () => { this.setState({ - crawler: c, - sensorItems: items, + startConfirm: false, }); } + 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 { , ]; @@ -103,13 +130,13 @@ export class SensorConfigPopup extends React.Component { showExpandableButton={true} /> -
Discovered At :
-
Target Type :
-
Kind :
-
Name :
-
Version :
-
Port :
-
Port Type :
+
Discovered At : {this.props.target.createDate}
+
Target Type : {this.props.target.targetType}
+
Kind : {this.props.target.kinds}
+
Name : {this.props.target.vendorName}
+
Version : {this.props.target.version}
+
Port : {this.props.target.port}
+
Port Type : {this.props.target.portType}
@@ -120,6 +147,11 @@ export class SensorConfigPopup extends React.Component { + + ); } @@ -138,7 +170,6 @@ export class CrawlerSelector extends React.Component { } 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 { }).catch(function (err) { console.log(err); }); - - } handleCrawlerChange = (event: any, index: any, v: number) => { @@ -170,9 +199,8 @@ export class CrawlerSelector extends React.Component { 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 { }; } + handleTestAuth = () => { + + } + renderInputs = (data: any) => { let input = data.crawlerInputItem; if (input.dataType === "String") { @@ -214,9 +246,10 @@ export class CrawlerSelector extends React.Component { hintText={input.description} floatingLabelText={input.name} underlineShow={true} - //value={this.state.email} - // onChange={(e, newValue) => this.setState({ email: newValue })} - />; + value={this.state.email} + onChange={(e, newValue) => this.setState({ email: newValue })} + /> + ; } else if (input.dataType === "Select") { let values = input.description.split('||'); @@ -293,26 +326,106 @@ export class SensorItemSelector extends React.Component { render() { return ( - - - - Category - Name - Description - - - - - {this.props.items.map((row: any, index: number) => ( - - {row.category} - {row.name} - {row.description} +
+
+ + + Category + Name + Description - ))} - -
+ + + + {this.props.items.map((row: any, index: number) => ( + + {row.category} + {row.name} + {row.description} + + ))} + + + ); } } + +export class ConfirmPopup extends React.Component { + 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
; + } + return
+
TARGET : {this.props.target.vendorName}
+
CRAWLER : {this.props.crawler.name}
+
+
Sensor Items
+
; + } + + render() { + const actions = [ + , + , + ]; + + return ( + +
+ {this.showInfo()} + {this.props.items.map((data: any, index: number) => { + return {data.id}. {data.name}-{data.description}; + })} +
+
+ ); + } +} \ No newline at end of file diff --git a/src/ts/containers/sensor/SensorList.tsx b/src/ts/containers/sensor/SensorList.tsx new file mode 100644 index 0000000..9117e5b --- /dev/null +++ b/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 { +// 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 ; +// } +// return null; +// } + +// render() { +// return ( +//
+// {this.showSensorConfigPopup()} +// +// +// +// Host +// Port +// Type +// Kind +// Name +// Version +// +// +// +// displayRowCheckbox={true} +// > +// {this.state.targets.map((row: any, index: number) => ( +// +// {Utils.int2ip(row.ip)} +// {row.port} +// {row.targetType} +// {row.kinds} +// {row.vendorName} +// {row.version} +// +// ))}; + +// +//
+ +// + +//
+// ); +// } +// }