sensor configuration

src/ts/containers/config/SensorConfigPopup.tsx

@@ -0,0 +1,261 @@
+import * as React from 'react';
+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 {
+    Table,
+    TableBody,
+    TableHeader,
+    TableHeaderColumn,
+    TableRow,
+    TableRowColumn,
+} from 'material-ui/Table';
+
+const customContentStyle = {
+    width: '90%',
+    maxWidth: 'none',
+};
+
+export class SensorConfigPopup extends React.Component<any, any> {
+    constructor(props: any, context: any) {
+        super(props, context);
+        this.state = {
+            crawler: null,
+            sensorItems: []
+        };
+    }
+
+    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 ",
+            },
+        ];
+        this.setState({
+            crawler: c,
+            sensorItems: items,
+        });
+    }
+
+    handleSensorItemsSelect = (items: any) => {
+        console.log(items);
+    }
+
+    render() {
+        const actions = [
+            <FlatButton
+                label="Cancel"
+                primary={true}
+                onTouchTap={this.handleClose}
+            />,
+            <RaisedButton
+                label="Submit"
+                primary={true}
+                onTouchTap={this.handleClose}
+            />,
+        ];
+
+        return (
+            <div>
+                <Dialog
+                    title="Sensor Configuration"
+                    actions={actions}
+                    modal={true}
+                    contentStyle={customContentStyle}
+                    open={this.props.open}
+                >
+
+                    <Card>
+                        <CardHeader
+                            title={this.props.target.vendorName}
+                            subtitle={Utils.int2ip(this.props.target.ip)}
+                            actAsExpander={true}
+                            showExpandableButton={true}
+                        />
+                        <CardText expandable={true}>
+                            <div>Discovered At : </div>
+                            <div>Target Type : </div>
+                            <div>Kind : </div>
+                            <div>Name : </div>
+                            <div>Version : </div>
+                            <div>Port : </div>
+                            <div>Port Type : </div>
+                            <div></div>
+                        </CardText>
+                    </Card>
+
+                    <Card>
+                        <CrawlerSelector target={this.props.target} onChange={this.handleCrawlerSelect} />
+                        <SensorItemSelector items={this.state.sensorItems} onChange={this.handleSensorItemsSelect} />
+                    </Card>
+
+                </Dialog>
+            </div>
+        );
+    }
+}
+
+const styles = {
+    title: {
+        cursor: 'pointer',
+    },
+};
+
+export class CrawlerSelector extends React.Component<any, any> {
+    constructor(props: any, context: any) {
+        super(props, context);
+        this.state = {
+            value: 0,
+            crawlers: [],
+        };
+    }
+
+    componentWillMount() {
+        var crawlers = [
+            {
+                "id": 0,
+                "name": "Protocol",
+                "description": "Alive check only using protocol.",
+                "type": "Protocol",
+            },
+            {
+                "id": 1,
+                "name": "SQL",
+                "description": "Query based sensors",
+                "type": "SQL",
+            },
+            {
+                "id": 2,
+                "name": "WMI",
+                "description": "Windows Management Instrumentation",
+                "type": "WMI",
+            },
+        ];
+        this.setState({
+            crawlers: crawlers,
+        });
+    }
+
+    handleCrawlerChange = (event: any, index: any, v: number) => {
+        this.setState({
+            value: v,
+        });
+        if (v === 0) {
+            return;
+        }
+        this.props.onChange(this.state.crawlers[v]);
+    }
+
+
+    getCrawlerTitle() {
+        if (this.state.value === 0) {
+            return "";
+        }
+        return this.state.crawlers[this.state.value].description;
+    }
+
+
+    render() {
+        return (
+            <div>
+                <DropDownMenu value={this.state.value} onChange={this.handleCrawlerChange} style={{ width: 300 }}>
+                    <MenuItem value={0} primaryText="Choose a Crawler type" />
+                    {this.state.crawlers.map((crawler: any, index: number) => {
+                        return (<MenuItem
+                            value={crawler.id}
+                            primaryText={crawler.name}
+                            key={index}
+                        />);
+                    })}
+
+                </DropDownMenu>
+                <Card>
+                    <CardHeader
+                        title={this.getCrawlerTitle()}
+                        subtitle=''
+                        actAsExpander={true}
+                        showExpandableButton={true}
+                    />
+                    <CardText expandable={true} >
+                        Crawler manual blahblahblah...
+                    </CardText>
+                </Card>
+
+            </div>
+        );
+    }
+}
+
+
+export class SensorItemSelector extends React.Component<any, any> {
+
+    constructor(props: any, context: any) {
+        super(props, context);
+        this.state = {
+            selected:[]
+        };
+    }
+
+
+    isSelected = (index: any) => {
+        return this.state.selected.indexOf(index) !== -1;
+    }
+
+    handleRowSelection = (selectedRows: any) => {
+        this.setState({
+            selected :  selectedRows,
+        });
+        this.props.onChange(selectedRows);
+    }
+
+    render() {
+        return (
+            <Table onRowSelection={this.handleRowSelection} multiSelectable={true}>
+                <TableHeader>
+                    <TableRow>
+                        <TableHeaderColumn>Category</TableHeaderColumn>
+                        <TableHeaderColumn>Name</TableHeaderColumn>
+                        <TableHeaderColumn>Description</TableHeaderColumn>
+                    </TableRow>
+                </TableHeader>
+                <TableBody>
+
+                    {this.props.items.map((row: any, index: number) => (
+                        <TableRow key={index} selected={this.isSelected(index)}>
+                            <TableRowColumn>{row.category}</TableRowColumn>
+                            <TableRowColumn>{row.name}</TableRowColumn>
+                            <TableRowColumn>{row.description}</TableRowColumn>
+                        </TableRow>
+                    ))}
+                </TableBody>
+            </Table>
+        );
+    }
+}
+

src/ts/containers/target/TargetList.tsx

@@ -14,7 +14,7 @@ import {
   TableRow,
   TableRowColumn,
 } from 'material-ui/Table';
-
+import { SensorConfigPopup } from '../../containers/config/SensorConfigPopup';
 
 export class TargetList extends React.Component<any, any> {
   constructor(props: any, context: any) {
@@ -22,6 +22,7 @@ export class TargetList extends React.Component<any, any> {
     this.state = {
       selected: [],
       targets: [],
+      startConfig: false,
     };
   }
 
@@ -62,8 +63,10 @@ export class TargetList extends React.Component<any, any> {
   handleNext = () => {
     if (this.state.selected.length === 0) {
       alert('Select a target to monitor');
-    }else {
-      alert("ID: "+ this.state.targets[this.state.selected[0]].id);
+    } else {
+      this.setState({
+        startConfig: true,
+      });
     }
   }
 
@@ -75,12 +78,22 @@ export class TargetList extends React.Component<any, any> {
       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}
@@ -99,7 +112,7 @@ export class TargetList extends React.Component<any, any> {
               <TableHeaderColumn >Version</TableHeaderColumn>
             </TableRow>
           </TableHeader>
-          <TableBody 
+          <TableBody
             deselectOnClickaway={false}>
             displayRowCheckbox={true}
             >