.

src/ts/containers/test/ProbeDetails.tsx

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { Button, Table, Label } from 'semantic-ui-react';
-import { Targets } from './Targets';
+import { TargetTable } from './Targets';
 
 export class ProbeDetails extends React.Component<any, any> {
 
@@ -85,7 +85,7 @@ export class ProbeDetails extends React.Component<any, any> {
           <Button content='Discovery' icon='search' labelPosition='left' floated={'right'} positive onClick={this.handleDiscovery} />
           {this.showStartStopBtn()}
 
-          <Targets/>
+          <TargetTable probe={this.props.probe}/>
         </div>;
     }
     return (

src/ts/containers/test/Sensors.tsx

@@ -0,0 +1,126 @@
+import * as React from 'react';
+import { Table, Button } from 'semantic-ui-react';
+
+
+export class Sensors extends React.Component<any, any> {
+
+  private data: any;
+
+  constructor(props: any, context: any) {
+    super(props, context);
+    this.state = {
+      selected: null,
+    };
+  }
+
+  componentWillMount() {
+    this.data = [
+      {
+        "id": "111",
+        "metaSensorStatus": {
+          "name": "NORMAL"
+        },
+        "target": {
+          "id": "1",
+        },
+        "metaCrawler": {
+          "name": "WMI",
+          "description": "WMI description",
+        },
+        "crawlerInputItems": "json value",
+        "description": "description1111111111",
+      },
+      {
+        "id": "222",
+        "metaSensorStatus": {
+          "name": "NORMAL"
+        },
+        "target": {
+          "id": "1",
+        },
+        "metaCrawler": {
+          "name": "SNMP",
+          "description": "SNMP description",
+        },
+        "crawlerInputItems": "json value",
+        "description": "description1111111111",
+      },
+      {
+        "id": "333",
+        "metaSensorStatus": {
+          "name": "NORMAL"
+        },
+        "target": {
+          "id": "1",
+        },
+        "metaCrawler": {
+          "name": "JMX",
+          "description": "JMX description",
+        },
+        "crawlerInputItems": "json value",
+        "description": "description1111111111",
+      },
+    ];
+  }
+
+  handleSelect(selectedProbe: object) {
+    this.setState({
+      selected: selectedProbe,
+    });
+  }
+
+  checkCellStatus(status: any): boolean {
+    if (status.name === 'STOPPED') {
+      return true;
+    }
+    return false;
+  }
+
+  showStartStopBtn(status: any) {
+    if (status.name === 'STARTED') {
+      return <Button content='Stop' icon='stop' labelPosition='left' color={'blue'} floated={'right'} onClick={this.handleStartStop} />;
+    } else {
+      return <Button content='Start' icon='play' labelPosition='left' color={'blue'} floated={'right'} onClick={this.handleStartStop} />;
+    }
+  }
+
+  handleStartStop(event: any, data: any) {
+    console.log(event);
+  }
+
+  render() {
+
+    return (
+      <div>
+        <Table celled selectable striped>
+          <Table.Header>
+            <Table.Row>
+              <Table.HeaderCell textAlign={'center'}>No.</Table.HeaderCell>
+              <Table.HeaderCell textAlign={'center'}>Status</Table.HeaderCell>
+              <Table.HeaderCell textAlign={'center'}>Crawler</Table.HeaderCell>
+              <Table.HeaderCell textAlign={'center'}>Description</Table.HeaderCell>
+              <Table.HeaderCell textAlign={'center'}>Item count</Table.HeaderCell>
+              <Table.HeaderCell />
+            </Table.Row>
+          </Table.Header>
+
+          <Table.Body>
+            {this.data.map((sensor: any, index: number) => (
+              <Table.Row key={index} onClick={this.handleSelect.bind(this, sensor)}>
+                <Table.Cell textAlign={'center'}>{index + 1}</Table.Cell>
+                <Table.Cell negative={this.checkCellStatus(sensor.metaSensorStatus)} textAlign={'center'}>{sensor.metaSensorStatus.name}</Table.Cell>
+                <Table.Cell>{sensor.metaCrawler.name}</Table.Cell>
+                <Table.Cell>{sensor.description}</Table.Cell>
+                <Table.Cell>to do</Table.Cell>
+                <Table.Cell collapsing>{this.showStartStopBtn(sensor.metaSensorStatus)}</Table.Cell>
+              </Table.Row>
+            ))}
+          </Table.Body>
+        </Table>
+      </div>
+    );
+  }
+}
+
+
+

src/ts/containers/test/TargetDetails.tsx

@@ -1,5 +1,6 @@
 import * as React from 'react';
-import { Button, Table, Label } from 'semantic-ui-react';
+import { Button, Table, Container } from 'semantic-ui-react';
+import { Sensors } from './Sensors';
 
 export class TargetDetails extends React.Component<any, any> {
 
@@ -9,11 +10,62 @@ export class TargetDetails extends React.Component<any, any> {
     };
   }
 
+  handleBack() {
+  }
+
+  handleRemoveTarget() {
+    alert('remove');
+  }
+
   render() {
     return (
-      <div>
+      <Container>
-        target details
+        <Table celled={true}>
-      </div>
+          <Table.Body>
+            <Table.Row>
+              <Table.Cell collapsing>
+                Name
+            </Table.Cell>
+              <Table.Cell>
+                ???
+            </Table.Cell>
+            </Table.Row>
+
+            <Table.Row>
+              <Table.Cell collapsing>
+                Type
+            </Table.Cell>
+              <Table.Cell>
+                ????
+            </Table.Cell>
+            </Table.Row>
+
+            <Table.Row>
+              <Table.Cell collapsing>
+                Sensor count
+            </Table.Cell>
+              <Table.Cell>
+                ???
+            </Table.Cell>
+            </Table.Row>
+
+            <Table.Row>
+              <Table.Cell collapsing>
+                Created at
+            </Table.Cell>
+              <Table.Cell>
+                ???
+            </Table.Cell>
+            </Table.Row>
+
+          </Table.Body>
+        </Table>
+        <Button content='Back' icon='left arrow' labelPosition='left' onClick={this.handleBack} />
+        <Button primary floated={'right'} negative onClick={this.handleRemoveTarget}>Remove</Button>
+
+        <Sensors target={this.props.target} />
+
+      </Container >
     );
   }
 }

src/ts/containers/test/Targets.tsx

@@ -1,7 +1,47 @@
 import * as React from 'react';
-import { Table } from 'semantic-ui-react';
+import { Table, Grid, Segment, Button, Container } from 'semantic-ui-react';
+import { TargetDetails } from './TargetDetails';
 
 export class Targets extends React.Component<any, any> {
+
+  constructor(props: any, context: any) {
+    super(props, context);
+    this.state = {
+    };
+  }
+
+  componentWillMount() {
+
+  }
+
+  handleAddTarget() {
+    alert('Add a Target');
+  }
+
+  render() {
+
+    return (
+      <Container>
+        <Grid columns={2}>
+          <Grid.Row>
+            <Grid.Column width='4'>
+              <Segment>SEARCH AREA</Segment>
+            </Grid.Column>
+            <Grid.Column>
+              <TargetTable />
+              <Button content='Add' icon='add' labelPosition='left' floated='right' positive onClick={this.handleAddTarget.bind(this)}/>
+            </Grid.Column>
+          </Grid.Row>
+        </Grid>
+          
+        <TargetDetails target={this.state.selected}/>
+      </Container>
+    );
+  }
+}
+
+
+export class TargetTable extends React.Component<any, any> {
   private data: any;
 
   constructor(props: any, context: any) {
@@ -56,7 +96,7 @@ export class Targets extends React.Component<any, any> {
   }
 
   render() {
-
+    console.log(this.props.probe);
     return (
       <Table celled selectable striped>
         <Table.Header>