test

src/ts/containers/config/crawlerSelector.tsx

@@ -0,0 +1,21 @@
+import * as React from 'react';
+import MuiThemeProvider from 'material-ui/styles/MuiThemeProvider';
+
+export class CrawlerSelector extends React.Component<any, any> {
+    constructor(props: any, context: any) {
+        super(props, context)
+        this.state = {
+        };
+    }
+
+
+    render() {
+        return (
+            <MuiThemeProvider >
+                <div>   
+                    CrawlerSelector
+                </div>
+            </MuiThemeProvider>
+        );
+    }
+}

src/ts/containers/config/itemSelector.tsx

@@ -0,0 +1,21 @@
+import * as React from 'react';
+import MuiThemeProvider from 'material-ui/styles/MuiThemeProvider';
+
+export class ItemSelector extends React.Component<any, any> {
+    constructor(props: any, context: any) {
+        super(props, context)
+        this.state = {
+        };
+    }
+
+
+    render() {
+        return (
+            <MuiThemeProvider >
+                <div>   
+                    ItemSelector
+                </div>
+            </MuiThemeProvider>
+        );
+    }
+}

src/ts/containers/config/sensorConfig.tsx

@@ -0,0 +1,118 @@
+import * as React from 'react';
+import MuiThemeProvider from 'material-ui/styles/MuiThemeProvider';
+import {
+    Step,
+    Stepper,
+    StepLabel,
+} 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';
+
+export class SensorConfig extends React.Component<any, any> {
+
+    constructor(props: any, context: any) {
+        super(props, context)
+    }
+
+    state = {
+        finished: false,
+        stepIndex: 0,
+        selected: -1
+    };
+
+    handleNext = () => {
+        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 });
+        }
+    };
+
+    handleChange(idx :any) {
+        this.setState({
+            selected : idx
+        });
+    }
+
+    getStepContent(stepIndex: any) {
+        switch (stepIndex) {
+            case 0:
+                return <TargetSelector onChange={this.handleChange.bind(this)} />;
+            case 1:
+                return <CrawlerSelector />;
+            case 2:
+                return <ItemSelector />;
+            default:
+                return 'errrrrrr';
+        }
+    }
+
+    render() {
+        return (
+            <MuiThemeProvider >
+                <div style={{ width: '100%', maxWidth: 900, margin: 'auto' }}>
+                    <Stepper activeStep={this.state.stepIndex}>
+                        <Step>
+                            <StepLabel>MONITOR WHAT?</StepLabel>
+                        </Step>
+                        <Step>
+                            <StepLabel>TECHNOLOGY USED?</StepLabel>
+                        </Step>
+                        <Step>
+                            <StepLabel>SELEC ITEMS</StepLabel>
+                        </Step>
+                    </Stepper>
+                    <Divider />
+                    <div>
+                        {this.state.finished ? (
+                            <p>
+                                <a
+                                    href="#"
+                                    onClick={(event) => {
+                                        event.preventDefault();
+                                        this.setState({ stepIndex: 0, finished: false });
+                                    }}
+                                >
+                                    Click here
+                            </a> to reset the example.
+                            </p>
+                        ) : (
+                                <div>
+                                    {this.getStepContent(this.state.stepIndex)}
+                                    <div style={{ marginTop: 12, marginBottom: 15, float: 'right' }}>
+                                        <FlatButton
+                                            label="Back"
+                                            disabled={this.state.stepIndex === 0}
+                                            onTouchTap={this.handlePrev}
+                                            style={{ marginRight: 12 }}
+                                        />
+                                        <RaisedButton
+                                            label={this.state.stepIndex === 2 ? 'Finish' : 'Next'}
+                                            primary={true}
+                                            onTouchTap={this.handleNext}
+                                        />
+                                    </div>
+                                </div>
+                            )}
+                    </div>
+                </div>
+            </MuiThemeProvider>
+        );
+    }
+}

src/ts/containers/config/targetSelector.tsx

@@ -0,0 +1,99 @@
+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';
+
+
+let SelectableList = makeSelectable(List);
+
+function wrapState(ComposedComponent: any, par : any) {
+    return class SelectableList extends React.Component<any, any> {
+        
+        constructor(props: any) {
+            super(props);
+        }
+
+        componentWillMount() {
+            this.setState({
+                selectedIndex: this.props.defaultValue,
+            });
+        }
+
+        handleRequestChange = (event: any, index: any) => {
+            par.handleSelect(index);
+        };
+
+        render() {
+            return (
+                <ComposedComponent
+                    value={this.state.selectedIndex}
+                    onChange={this.handleRequestChange}
+                >
+                    {this.props.children}
+                </ComposedComponent>
+            );
+        }
+    };
+}
+
+
+
+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) {
+        this.props.onChange(idx);
+    }
+
+    render() {
+        return (
+            <MuiThemeProvider >
+                <div>
+                    <SelectableList ref={'list'} >
+                        <Subheader>Select a target to monitor</Subheader>
+                        <ListItem
+                            value={1}
+                            primaryText="192.168.1.0"
+                            initiallyOpen={true}
+                            nestedItems={[
+                                <ListItem
+                                    value={2}
+                                    primaryText="192.168.1.11"
+                                    initiallyOpen={true}
+                                    nestedItems={[
+                                        <ListItem value={3} primaryText="Redis" secondaryText="5432" />,
+                                        <ListItem value={4} primaryText="FTP" secondaryText="5432" />,
+                                    ]}
+                                />,
+                                <ListItem
+                                    value={5}
+                                    primaryText="192.168.1.12"
+                                    initiallyOpen={true}
+                                    nestedItems={[
+                                        <ListItem value={6} primaryText="MySQL" secondaryText="5432" />,
+                                        <ListItem value={7} primaryText="SSH" secondaryText="5432" />,
+                                    ]}
+                                />,
+                                <ListItem
+                                    value={8}
+                                    primaryText="192.168.1.13"
+                                    initiallyOpen={true}
+                                    nestedItems={[
+                                        <ListItem value={9} primaryText="Tomcat" secondaryText="8080" />,
+                                    ]}
+                                />,
+                            ]}
+                        />
+                    </SelectableList>
+                </div>
+            </MuiThemeProvider>
+        );
+    }
+}

src/ts/containers/prove/download.tsx

@@ -8,19 +8,19 @@ import Download from 'material-ui/svg-icons/file/file-download';
 import Delete from 'material-ui/svg-icons/action/delete';
 
 import ContentCopy from 'material-ui/svg-icons/content/content-copy';
-import {InstallGuide} from './installguide';
+import { InstallGuide } from './installguide';
 
 const styles = {
-    osSelector : {
+    osSelector: {
-       display: 'inline-block',
+        display: 'inline-block',
-       float: 'left',
+        float: 'left',
     },
     content: {
         display: 'inline-block',
         float: 'left',
-        width : "85%",
+        width: "85%",
-        height : 700,
+        height: 700,
-        padding : 20,
+        padding: 20,
     },
 }
 
@@ -29,14 +29,14 @@ export class ProveDownload extends React.Component<any, any> {
         super(props, context)
         this.state = {
             selectedOSidx: 0,
-            selectedOSName : "Windows",
+            selectedOSName: "Windows",
         };
     }
 
-    handleOSChange = (event :any, menuItem: any, index: any) => {
+    handleOSChange = (event: any, menuItem: any, index: any) => {
         this.setState({
             selectedOSidx: index,
-            selectedOSName : menuItem.props.primaryText
+            selectedOSName: menuItem.props.primaryText
         });
     }
 
@@ -45,7 +45,7 @@ export class ProveDownload extends React.Component<any, any> {
 
         return (
             <MuiThemeProvider >
-                <div>  
+                <div>
                     <div>
                         <Paper style={styles.osSelector}>
                             <Menu onItemTouchTap={this.handleOSChange.bind(this)}>
@@ -60,7 +60,7 @@ export class ProveDownload extends React.Component<any, any> {
                         </Paper>
 
                         <Paper style={styles.content}>
-                            <InstallGuide idx={this.state.selectedOSidx} name={this.state.selectedOSName}/>
+                            <InstallGuide idx={this.state.selectedOSidx} name={this.state.selectedOSName} />
                         </Paper>
 
                     </div>

src/ts/containers/prove/installguide.tsx

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import MuiThemeProvider from 'material-ui/styles/MuiThemeProvider';
-import {List, ListItem} from 'material-ui/List';
+import { List, ListItem } from 'material-ui/List';
 import ActionInfo from 'material-ui/svg-icons/action/info';
 import SelectField from 'material-ui/SelectField';
 import MenuItem from 'material-ui/MenuItem';
@@ -9,8 +9,8 @@ const styles = {
     content: {
         display: 'inline-block',
         float: 'left',
-        width : "85%",
+        width: "85%",
-        height : 700,
+        height: 700,
     },
 }
 
@@ -26,19 +26,19 @@ export class InstallGuide extends React.Component<any, any> {
         const osIdx = this.props.idx;
         let target = null;
         if (osIdx == 0) {
-            target = <WindowsInstallGuide/>;
+            target = <WindowsInstallGuide />;
-        }else if (osIdx == 1) {
+        } else if (osIdx == 1) {
-            target = <UbuntuInstallGuide/>;
+            target = <UbuntuInstallGuide />;
-        }else {
+        } else {
             target = <h2>Not support yet.</h2>;
         }
 
         return (
             <MuiThemeProvider >
-                <div>  
+                <div>
                     <h1>Installing on {this.props.name}</h1>
                     <ListItem primaryText="Blah Blah Blah..." disabled={true} leftIcon={<ActionInfo />} />
-                     {target}
+                    {target}
                 </div>
             </MuiThemeProvider>
         );
@@ -52,7 +52,7 @@ export class WindowsInstallGuide extends React.Component<any, any> {
         };
     }
 
-  handleArchChange = (event :any, menuItem: any, value: any) => {
+    handleArchChange = (event: any, menuItem: any, value: any) => {
         this.setState({
             selectedArch: value,
         });
@@ -61,12 +61,12 @@ export class WindowsInstallGuide extends React.Component<any, any> {
     render() {
         return (
             <MuiThemeProvider >
-                <div>  
+                <div>
                     <SelectField
                         floatingLabelText="Architecture"
                         value={this.state.selectedArch}
                         onChange={this.handleArchChange}
-                        >
+                    >
                         <MenuItem value={0} primaryText="32bit" />
                         <MenuItem value={1} primaryText="64bit" />
                     </SelectField>
@@ -87,9 +87,9 @@ export class UbuntuInstallGuide extends React.Component<any, any> {
     render() {
         return (
             <MuiThemeProvider >
-                <div>  
+                <div>
                     Ubuntu blah blah
-                </div>
+                    </div>
             </MuiThemeProvider>
         );
     }

src/ts/index.tsx

@@ -8,6 +8,7 @@ import { MemberEmailConfirm } from './containers/member/emailConfirm';
 import { MemberLogin } from './containers/member/login';
 import { Main } from './containers/Main';
 import { ProveDownload } from './containers/prove/download';
+import { SensorConfig } from './containers/config/sensorConfig';
 
 
 import '../scss/index.scss';
@@ -15,6 +16,6 @@ import '../scss/index.scss';
 injectTapEventPlugin();
 
 ReactDOM.render(
-    <ProveDownload />,
+    <SensorConfig />,
     document.getElementById('example')
 );