sensorconfig

src/ts/components/Rest.tsx

@@ -1,6 +1,6 @@
 
 
-const url = "http://192.168.1.203:8080/v1/overflow/services";
+const url = "http://192.168.1.105:8080/v1/overflow/services";
 
 export class OFRest {
 

src/ts/containers/config/CrawlerSelector.tsx

@@ -1,7 +1,131 @@
 import * as React from 'react';
 import MuiThemeProvider from 'material-ui/styles/MuiThemeProvider';
+import Paper from 'material-ui/Paper';
+import RemoveRedEye from 'material-ui/svg-icons/image/remove-red-eye';
+import DropDownMenu from 'material-ui/DropDownMenu';
+import MenuItem from 'material-ui/MenuItem';
+import Divider from 'material-ui/Divider';
+import Dialog from 'material-ui/Dialog';
+import FlatButton from 'material-ui/FlatButton';
+import RaisedButton from 'material-ui/RaisedButton';
+import TextField from 'material-ui/TextField';
+import LinearProgress from 'material-ui/LinearProgress';
+import {ItemSelector} from './ItemSelector';
+
+const styles = {
+};
+
 
 export class CrawlerSelector extends React.Component<any, any> {
+    constructor(props: any, context: any) {
+        super(props, context)
+        this.state = {
+            crawlerType: 0,
+            authOpen: false,
+            isloading: false
+        };
+    }
+
+    handleCrawlerChange = (event: any, index: any, value: any) => {
+        if (value == 1) {
+            this.setState({ crawlerType: value });
+            return;
+        }
+        if (this.validateCrawlerType()) {
+            this.setState({ crawlerType: value });
+        } else {
+            this.setState({ crawlerType: 0 });
+        }
+    }
+
+    validateCrawlerType = () => {
+        this.setState({ authOpen: true });
+        return true;
+    }
+
+    handleAuthPopupOk = () => {
+        this.setState({ isLoading: true })
+        //this.setState({ authOpen: false });
+    };
+    handleAuthPopupCancle = () => {
+        this.setState({ authOpen: false, crawlerType: 0, isLoading: false });
+    };
+
+
+    getAuthPopupContent = () => {
+        switch (this.state.crawlerType) {
+            case 2:
+                return <WMIAuthPopup />;
+            case 3:
+                return <SNMPv2AuthPopup />;
+            case 4:
+                return <SNMPv3AuthPopup />;
+            case 5:
+                return <JMXAuthPopup />;
+            default:
+                return 'errrrrrr';
+        }
+    }
+
+    showLoadingBar = () => {
+        if (this.state.isLoading) {
+            return <LinearProgress mode="indeterminate" style={{ marginTop: 30 }} />;
+        }
+    }
+
+    render() {
+        const actions = [
+            <FlatButton
+                label="Cancel"
+                primary={true}
+                onTouchTap={this.handleAuthPopupCancle}
+            />,
+            <FlatButton
+                label="Submit"
+                primary={true}
+                onTouchTap={this.handleAuthPopupOk}
+            />,
+        ];
+
+        return (
+
+            <MuiThemeProvider >
+                <div>
+                    <Dialog
+                        title="Connection information is required."
+                        actions={actions}
+                        modal={true}
+                        open={this.state.authOpen}
+                    >
+                        {this.getAuthPopupContent()}
+                        {this.showLoadingBar()}
+
+                    </Dialog>
+
+                    <Paper >
+                        <DropDownMenu value={this.state.crawlerType} onChange={this.handleCrawlerChange} style={{ width: 200 }}>
+                            <MenuItem value={1} primaryText="Protocol" />
+                            <MenuItem value={2} primaryText="WMI" />
+                            <MenuItem value={3} primaryText="SNMPv2c" />
+                            <MenuItem value={4} primaryText="SNMPv3" />
+                            <MenuItem value={5} primaryText="JMX" />
+                        </DropDownMenu>
+
+                        <Divider />
+
+                        <div style={{ padding: 30 }}>
+                            Crawler description....
+                        </div>
+                        <br />
+                        <ItemSelector/>
+                    </Paper>
+                </div>
+            </MuiThemeProvider>
+        );
+    }
+}
+
+export class SNMPv2AuthPopup extends React.Component<any, any> {
     constructor(props: any, context: any) {
         super(props, context)
         this.state = {
@@ -11,11 +135,77 @@ export class CrawlerSelector extends React.Component<any, any> {
 
     render() {
         return (
-            
+            <MuiThemeProvider >
                 <div>
-                    CrawlerSelector
+                    FORM FOR SNMPV2C
+                    <br />
+                    <TextField
+                        hintText="Community"
+                        errorText="This field is required"
+                    />
                 </div>
-            
+            </MuiThemeProvider>
+        );
+    }
+}
+
+export class SNMPv3AuthPopup extends React.Component<any, any> {
+    constructor(props: any, context: any) {
+        super(props, context)
+        this.state = {
+        };
+    }
+
+
+    render() {
+        return (
+            <MuiThemeProvider >
+                <div>
+                    FORM FOR SNMPV3
+                        <TextField
+                        hintText="User"
+                        errorText="This field is required"
+                    />
+                </div>
+            </MuiThemeProvider>
+        );
+    }
+}
+
+export class WMIAuthPopup extends React.Component<any, any> {
+    constructor(props: any, context: any) {
+        super(props, context)
+        this.state = {
+        };
+    }
+
+
+    render() {
+        return (
+            <MuiThemeProvider >
+                <div>
+                    FORM FOR WMI
+                </div>
+            </MuiThemeProvider>
+        );
+    }
+}
+
+export class JMXAuthPopup extends React.Component<any, any> {
+    constructor(props: any, context: any) {
+        super(props, context)
+        this.state = {
+        };
+    }
+
+
+    render() {
+        return (
+            <MuiThemeProvider >
+                <div>
+                    FORM FOR JMX
+                </div>
+            </MuiThemeProvider>
         );
     }
 }

src/ts/containers/config/ItemSelector.tsx

@@ -1,21 +1,84 @@
 import * as React from 'react';
-import MuiThemeProvider from 'material-ui/styles/MuiThemeProvider';
+
+
+import {
+    Table,
+    TableBody,
+    TableFooter,
+    TableHeader,
+    TableHeaderColumn,
+    TableRow,
+    TableRowColumn,
+} from 'material-ui/Table';
+import IconMenu from 'material-ui/IconMenu';
+
+
+const tableData = [
+    {
+        id: 0,
+        name: 'CPU.USAGE',
+        desc: 'desc....',
+    },
+    {
+        id: 1,
+        name: 'CPU.FREE',
+        desc: 'desc....',
+    },
+    {
+        id: 2,
+        name: 'CPU.IDLE',
+        desc: 'desc....',
+    },
+];
+
 
 export class ItemSelector 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,
+        });
+        console.log(selectedRows);
+    };
+
     render() {
         return (
-            
             <div>
-                    ItemSelector
+                <Table onRowSelection={this.handleRowSelection}
-                </div>
+                    selectable={true}
+                    multiSelectable={true}
+                >
+                    <TableHeader >
+                        <TableRow>
+                            <TableHeaderColumn colSpan={3}>CPU</TableHeaderColumn>
+                        </TableRow>
+                    </TableHeader>
 
+                    <TableBody
+                        deselectOnClickaway={false}
+                    >
+                        {tableData.map((row, index) => (
+                            <TableRow key={index} selected={this.isSelected(index)} >
+                                <TableRowColumn style={{ display: 'none' }}>{row.id}</TableRowColumn>
+                                <TableRowColumn>{row.name}</TableRowColumn>
+                                <TableRowColumn>{row.desc}</TableRowColumn>
+                            </TableRow>
+                        ))}
+                    </TableBody>
+
+                </Table>
+            </div>
         );
     }
 }

src/ts/containers/config/SensorConfig.tsx

@@ -1,5 +1,4 @@
 import * as React from 'react';
-import MuiThemeProvider from 'material-ui/styles/MuiThemeProvider';
 import {
     Step,
     Stepper,
@@ -7,57 +6,63 @@ import {
 } from 'material-ui/Stepper';
 import RaisedButton from 'material-ui/RaisedButton';
 import FlatButton from 'material-ui/FlatButton';
-import Divider from 'material-ui/Divider';
 
 import { TargetSelector } from './TargetSelector';
 import { CrawlerSelector } from './CrawlerSelector';
 import { ItemSelector } from './ItemSelector';
+import Dialog from 'material-ui/Dialog';
 
 export class SensorConfig extends React.Component<any, any> {
 
     constructor(props: any, context: any) {
         super(props, context)
-    }
+        this.state = {
-
-    state = {
             finished: false,
             stepIndex: 0,
-        selected: -1
+            selectedTarget: 0,
+            selectedSensors: []
         };
+    }
+
 
     handleNext = () => {
+        if (this.state.selectedTarget == 0) {
+            alert("Choose a target.");
+            return;
+        }
         const { stepIndex } = this.state;
         this.setState({
             stepIndex: stepIndex + 1,
             finished: stepIndex >= 2,
         });
-        if(this.state.stepIndex == 0) {
-            alert(this.state.selected);
-        }
 
     };
 
     handlePrev = () => {
         const { stepIndex } = this.state;
         if (stepIndex > 0) {
-            this.setState({ stepIndex: stepIndex - 1 });
+            this.setState({ stepIndex: stepIndex - 1, selectedTarget: 0 });
         }
     };
 
-    handleChange(idx :any) {
+    handleStep1Change(idx: any) {
         this.setState({
-            selected : idx
+            selectedTarget: idx
         });
     }
 
+    handleStep2Change(idx: any) {
+        alert("aa");
+    }
+
     getStepContent(stepIndex: any) {
         switch (stepIndex) {
             case 0:
-                return <TargetSelector onChange={this.handleChange.bind(this)} />;
+                return <TargetSelector onChange={this.handleStep1Change.bind(this)} />;
             case 1:
-                return <CrawlerSelector />;
+                return <CrawlerSelector onChange={this.handleStep2Change.bind(this)}/>;
             case 2:
-                return <ItemSelector />;
+                return null;
             default:
                 return 'errrrrrr';
         }
@@ -65,20 +70,18 @@ export class SensorConfig extends React.Component<any, any> {
 
     render() {
         return (
-            
                 <div style={{ width: '100%', maxWidth: 900, margin: 'auto' }}>
                     <Stepper activeStep={this.state.stepIndex}>
                         <Step>
-                            <StepLabel>MONITOR WHAT?</StepLabel>
+                            <StepLabel>STEP 1</StepLabel>
                         </Step>
                         <Step>
-                            <StepLabel>TECHNOLOGY USED?</StepLabel>
+                            <StepLabel>STEP 2</StepLabel>
                         </Step>
                         <Step>
-                            <StepLabel>SELEC ITEMS</StepLabel>
+                            <StepLabel>STEP 3</StepLabel>
                         </Step>
                     </Stepper>
-                    <Divider />
                     <div>
                         {this.state.finished ? (
                             <p>
@@ -112,7 +115,6 @@ export class SensorConfig extends React.Component<any, any> {
                             )}
                     </div>
                 </div>
-            
         );
     }
 }

src/ts/containers/config/TargetSelector.tsx

@@ -1,11 +1,17 @@
 import * as React from 'react';
-import MuiThemeProvider from 'material-ui/styles/MuiThemeProvider';
 
 import { List, ListItem, makeSelectable } from 'material-ui/List';
 import Subheader from 'material-ui/Subheader';
-import Checkbox from 'material-ui/Checkbox';
+import Paper from 'material-ui/Paper';
-
 
+const styles = {
+    test: {
+        display: 'inline-block',
+        float: 'left',
+        width: '50%',
+        height: 550,
+    },
+}
 
 let SelectableList = makeSelectable(List);
 
@@ -43,9 +49,8 @@ function wrapState(ComposedComponent: any, par: any) {
 export class TargetSelector extends React.Component<any, any> {
     constructor(props: any, context: any) {
         super(props, context)
-        this.state = {
-        };
         SelectableList = wrapState(SelectableList, this);
+
     }
 
     handleSelect(idx: any) {
@@ -54,8 +59,8 @@ export class TargetSelector extends React.Component<any, any> {
 
     render() {
         return (
-            
             <div>
+                <Paper style={styles.test}>
                     <SelectableList>
                         <Subheader>Select a target to monitor</Subheader>
                         <ListItem
@@ -88,7 +93,6 @@ export class TargetSelector extends React.Component<any, any> {
                                     nestedItems={[
                                         <ListItem
                                             value={6}
-
                                             primaryText="MySQL"
                                             secondaryText="Port 5432" />,
                                         <ListItem
@@ -100,8 +104,11 @@ export class TargetSelector extends React.Component<any, any> {
                             ]}
                         />
                     </SelectableList>
+                </Paper>
+                <Paper style={styles.test}>
+                    Target description...
+                    </Paper>
             </div>
-            
         );
     }
 }

src/ts/containers/prove/Download.tsx

@@ -1,5 +1,4 @@
 import * as React from 'react';
-import MuiThemeProvider from 'material-ui/styles/MuiThemeProvider';
 import Paper from 'material-ui/Paper';
 import Menu from 'material-ui/Menu';
 import MenuItem from 'material-ui/MenuItem';

src/ts/containers/prove/Installguide.tsx

@@ -1,5 +1,4 @@
 import * as React from 'react';
-import MuiThemeProvider from 'material-ui/styles/MuiThemeProvider';
 import { List, ListItem } from 'material-ui/List';
 import ActionInfo from 'material-ui/svg-icons/action/info';
 import SelectField from 'material-ui/SelectField';
@@ -60,7 +59,6 @@ export class WindowsInstallGuide extends React.Component<any, any> {
 
     render() {
         return (
-            <MuiThemeProvider >
             <div>
                 <SelectField
                     floatingLabelText="Architecture"
@@ -71,7 +69,6 @@ export class WindowsInstallGuide extends React.Component<any, any> {
                     <MenuItem value={1} primaryText="64bit" />
                 </SelectField>
             </div>
-            </MuiThemeProvider>
         );
     }
 }
@@ -86,11 +83,9 @@ export class UbuntuInstallGuide extends React.Component<any, any> {
 
     render() {
         return (
-            <MuiThemeProvider >
             <div>
                 Ubuntu blah blah
                     </div>
-            </MuiThemeProvider>
         );
     }
 }

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