.

src/ts/containers/test/Components.tsx

@@ -3,6 +3,8 @@ import { Button } from 'semantic-ui-react';
 import { Probes } from './Probes';
 import { NoauthProbes } from './NoauthProbes';
 import { SensorConfiguration } from './SensorConfiguration';
+import { Targets } from './Targets';
+
 import Tab, { TabProps } from 'semantic-ui-react/dist/commonjs/modules/Tab';
 
 const panes = [
@@ -38,8 +40,10 @@ export class Components extends React.Component<any, any> {
       case 2: {
         return <SensorConfiguration/>;
       }
+      case 3: {
+        return <Targets/>;
+      }
       default: {
-
       }
     }
   }
@@ -54,6 +58,7 @@ export class Components extends React.Component<any, any> {
           <Button onClick={this.handleButton.bind(this, 0)}>Probe list</Button>
           <Button onClick={this.handleButton.bind(this, 1)}>Noauth Probe list</Button>
           <Button onClick={this.handleButton.bind(this, 2)}>Sensor Configuration</Button>
+          <Button onClick={this.handleButton.bind(this, 3)}>Target list</Button>
         </Button.Group>
         <div style={{margin:'20px'}}>
           {this.showContent()}

src/ts/containers/test/SensorConfiguration.tsx

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { Icon, Step, Button } from 'semantic-ui-react';
+import { Icon, Step, Button, Table, Radio, Form } from 'semantic-ui-react';
 import { Grid, Image, Label, Segment, Dropdown } from 'semantic-ui-react';
 
 
@@ -13,16 +13,16 @@ export class SensorConfiguration extends React.Component<any, any> {
 
 
   render() {
-    let steps = [<CrawlerSelector />, <SensorItemSelector />];
+    let steps = [<CrawlerSelector />, <SensorItemSelector />, <ETCSelector />];
 
     return (
-      <Stepper steps={steps} />
+      <ConfigStepper steps={steps} />
     );
   }
 }
 
 
-export class Stepper extends React.Component<any, any> {
+export class ConfigStepper extends React.Component<any, any> {
 
   constructor(props: any, context: any) {
     super(props, context);
@@ -45,7 +45,7 @@ export class Stepper extends React.Component<any, any> {
     return false;
   }
 
-  handlePrev(event: any, data: object) {
+  handlePrev(event: React.SyntheticEvent<HTMLAnchorElement>, data: object) {
     let step: number = this.state.currentStep;
     if (step <= 1) {
       step = 1;
@@ -56,23 +56,41 @@ export class Stepper extends React.Component<any, any> {
       currentStep: step,
     });
   }
-  handleNext(event: any, data: object) {
+  handleNext(event: React.SyntheticEvent<HTMLAnchorElement>, data: object) {
     let step: number = this.state.currentStep;
-    if (step >= 4) {
+    if (step >= this.props.steps.length + 1) {
-      step = 4;
+      step = this.props.steps.length + 1;
     } else {
       step++;
     }
     this.setState({
       currentStep: step,
     });
-    console.log(this.state.currentStep);
+    if (step === this.props.steps.length + 1) {
+      console.log("Done");
+    }
   }
 
   showContent() {
     return this.props.steps[this.state.currentStep - 1];
   }
 
+  checkPrevDisabled(): boolean {
+    if (this.state.currentStep <= 1) {
+      return true;
+    } else {
+      return false;
+    }
+  }
+
+  checkNextDisabled(): boolean {
+    if (this.state.currentStep === this.props.steps.length + 1) {
+      return true;
+    } else {
+      return false;
+    }
+  }
+
   render() {
     return (
       <div>
@@ -96,9 +114,9 @@ export class Stepper extends React.Component<any, any> {
         {this.showContent()}
         <br />
         <Button.Group floated={'right'}>
-          <Button onClick={this.handlePrev.bind(this)}>Prev</Button>
+          <Button onClick={this.handlePrev.bind(this)} disabled={this.checkPrevDisabled()}>Prev</Button>
           <Button.Or />
-          <Button positive onClick={this.handleNext.bind(this)} >Next</Button>
+          <Button positive onClick={this.handleNext.bind(this)} disabled={this.checkNextDisabled()} >Next</Button>
         </Button.Group>
 
       </div>
@@ -110,7 +128,7 @@ export class Stepper extends React.Component<any, any> {
 export class CrawlerSelector extends React.Component<any, any> {
 
   private crawlers: object[];
-  
+
   constructor(props: any, context: any) {
     super(props, context);
     this.state = {
@@ -119,6 +137,10 @@ export class CrawlerSelector extends React.Component<any, any> {
   }
 
   componentWillMount() {
+    this.getMetaCrawlers();
+  }
+
+  getMetaCrawlers() {
     //todo. getting MetaCrawler list
     let crawlers = [
       {
@@ -151,7 +173,6 @@ export class CrawlerSelector extends React.Component<any, any> {
     }
 
     this.crawlers = crawlerOptions;
-
   }
 
   handleCrawlerSelection(e: any, data: any) {
@@ -160,12 +181,6 @@ export class CrawlerSelector extends React.Component<any, any> {
     });
   }
 
-  showCrawlerAuthInfo() {
-    if (this.state.selected === null) {
-      return null;
-    }
-    return <div>{this.state.selected} auth inputs </div>;
-  }
 
   render() {
 
@@ -181,7 +196,7 @@ export class CrawlerSelector extends React.Component<any, any> {
               <Dropdown openOnFocus
                 placeholder='Select Crawler' selection options={this.crawlers} onChange={this.handleCrawlerSelection.bind(this)} />
 
-              {this.showCrawlerAuthInfo()}
+              <CrawlerAuthInputs crawler={this.state.selected} />
             </Segment>
           </Grid.Column>
         </Grid>
@@ -189,9 +204,38 @@ export class CrawlerSelector extends React.Component<any, any> {
       </div>
     );
   }
-
 }
 
+export class CrawlerAuthInputs extends React.Component<any, any> {
+
+  constructor(props: any, context: any) {
+    super(props, context);
+    this.state = {
+    };
+  }
+
+  componentWillMount() {
+
+  }
+
+  render() {
+    let elem = null;
+    if (this.props.crawler === null) {
+      elem = null;
+    } else {
+      elem =
+        <div>CrawlerAuthInputs</div>;
+    }
+
+    return (
+      <div>
+        {elem}
+      </div>
+    );
+  }
+}
+
+
 export class SensorItemSelector extends React.Component<any, any> {
 
   constructor(props: any, context: any) {
@@ -205,5 +249,69 @@ export class SensorItemSelector extends React.Component<any, any> {
       <div>SensorItemSelector</div>
     );
   }
-
+}
+
+export class ETCSelector extends React.Component<any, any> {
+  constructor(props: any, context: any) {
+    super(props, context);
+    this.state = {
+      interval: 5,
+    };
+  }
+  handleIntervalChange = (e: any, { value }: any) => this.setState({ interval : value });
+
+  render() {
+    return (
+      <Table celled={true}>
+        <Table.Body>
+          <Table.Row>
+            <Table.Cell collapsing>
+              Interval
+            </Table.Cell>
+            <Table.Cell>
+              <Form.Field>
+                <Radio
+                  label='5 seconds'
+                  name='radioGroup'
+                  value='5'
+                  checked={this.state.interval === '5'}
+                  onChange={this.handleIntervalChange}
+                />
+              </Form.Field>
+              <Form.Field>
+                <Radio
+                  label='10 seconds'
+                  name='radioGroup'
+                  value='10'
+                  checked={this.state.interval === '10'}
+                  onChange={this.handleIntervalChange}
+                />
+              </Form.Field>
+              <Form.Field>
+                <Radio
+                  label='15 seconds'
+                  name='radioGroup'
+                  value='15'
+                  checked={this.state.interval === '15'}
+                  onChange={this.handleIntervalChange}
+                />
+              </Form.Field>
+            </Table.Cell>
+          </Table.Row>
+          <Table.Row>
+            <Table.Cell collapsing>
+              Notification
+            </Table.Cell>
+            <Table.Cell></Table.Cell>
+          </Table.Row>
+          <Table.Row>
+            <Table.Cell collapsing>
+              Warn Condition
+            </Table.Cell>
+            <Table.Cell></Table.Cell>
+          </Table.Row>
+        </Table.Body>
+      </Table>
+    );
+  }
 }

src/ts/containers/test/TargetDetails.tsx

@@ -0,0 +1,22 @@
+import * as React from 'react';
+import { Button, Table, Label } from 'semantic-ui-react';
+
+export class TargetDetails extends React.Component<any, any> {
+
+  constructor(props: any, context: any) {
+    super(props, context);
+    this.state = {
+    };
+  }
+
+  render() {
+    return (
+      <div>
+        target details
+      </div>
+    );
+  }
+}
+
+
+