target

src/ts/@overflow/app/views/App.tsx

@@ -4,6 +4,7 @@ import { Route, Switch } from 'react-router-dom';
 import AccountLayout from './layout/AccountLayout';
 import ProbeDetailLayout from './layout/ProbeDetailLayout';
 import SensorDetailLayout from './layout/SensorDetailLayout';
+import TargetDetailLayout from './layout/TargetDetailLayout';
 import AppLayout from './layout/AppLayout';
 import ErrorLayout from './layout/ErrorLayout';
 
@@ -29,6 +30,7 @@ class App extends React.Component<Props, State> {
         <Route path='/account' component={AccountLayout}/>
         <Route path='/probe' component={ProbeDetailLayout}/>
         <Route path='/sensor' component={SensorDetailLayout}/>
+        <Route path='/target' component={TargetDetailLayout}/>
         <Route path='/' component={AppLayout}/>
       </Switch>
     );

src/ts/@overflow/app/views/layout/AppLayout.tsx

@@ -41,7 +41,7 @@ export class AppLayout extends React.Component<Props, State> {
               <Route exact={true} path={`${this.props.match.url}sensors`} component={SensorList}/>
               <Route exact={true} path={`${this.props.match.url}noauth_probes`} component={NoauthList}/>
               <Route exact={true} path={`${this.props.match.url}probe_setup`} component={ProbeSetup}/>
-              <Redirect to='/error/404' />
+              {/*<Redirect to='/error/404' />*/}
             </Switch>
           <Footer />
         </Segment>

src/ts/@overflow/app/views/layout/TargetDetailLayout.tsx

@@ -3,7 +3,7 @@ import { Redirect, RouteComponentProps, RouteProps, Route, Switch } from 'react-
 import { Container, Menu, Sidebar, Segment, Icon, Breadcrumb, Grid, Dropdown } from 'semantic-ui-react';
 import { Header } from './Header';
 import { Footer } from './Footer';
-import { TitleBar } from './TitleBar';
+import TitleBarContainer from './TitleBarContainer';
 import LeftMenu from './LeftMenu';
 
 import TargetDetail from '../../views/infrastructure/target/Detail';
@@ -13,6 +13,7 @@ import ProbeHistory from '../../views/monitoring/probe/History';
 export interface Props extends RouteComponentProps<any> {
 }
 export interface State {
+  currUrl: string;
 }
 
 export class TargetDetailLayout extends React.Component<Props, State> {
@@ -20,6 +21,7 @@ export class TargetDetailLayout extends React.Component<Props, State> {
   constructor(props: Props, context: State) {
     super(props, context);
     this.state = {
+      currUrl: this.props.location.pathname,
     };
   }
 
@@ -28,11 +30,11 @@ export class TargetDetailLayout extends React.Component<Props, State> {
     const sub = [
       {
         'name': 'Info',
-        'path': `${this.props.location.pathname}`,
+        'path': this.state.currUrl + 'info',
       },
       {
         'name': 'History',
-        'path': `${this.props.location.pathname}/history`,
+        'path': this.state.currUrl + 'history',
       },
     ];
     return (
@@ -40,7 +42,7 @@ export class TargetDetailLayout extends React.Component<Props, State> {
         <LeftMenu />
         <Segment vertical style={{ margin: '0 0 0 210px', padding: '0' }}>
           <Header />
-          <TitleBar title='Target Details' sub={sub} />
+          <TitleBarContainer title='Target Details' sub={sub} location={this.props.location.pathname} />
           <Switch>
             <Route exact={true} path={`${this.props.match.url}/:id`} component={TargetDetail} />
             <Route exact={true} path={`${this.props.match.url}/:id/history`} component={ProbeHistory} />

src/ts/@overflow/target/react/components/TargetList.tsx

@@ -4,6 +4,7 @@ import { TargetDetail } from './TargetDetail';
 import Target from '@overflow/target/api/model/Target';
 import Probe from '@overflow/probe/api/model/Probe';
 import { ListContainer } from '@overflow/commons/react/component/ListContainer';
+import {Discovery} from '../../../discovery/react/components/Discovery';
 
 export interface StateProps {
 
@@ -34,6 +35,7 @@ export class TargetList extends React.Component<Props, State> {
     };
   }
 
+
   public handleAddTarget(event: React.MouseEvent<HTMLButtonElement>, data: ButtonProps): void {
     this.setState({
       openAddTarget: true,
@@ -68,18 +70,18 @@ export class TargetList extends React.Component<Props, State> {
     let targetList =
       <Container fluid>
         {/*search bar  */}
-        <Button content='Add' icon='add' labelPosition='left' floated='right' positive onClick={this.handleAddTarget.bind(this)} />
+        <Button content='Discovery' icon='search' labelPosition='left' floated='right' positive onClick={this.handleAddTarget.bind(this)} />
-        <TargetTable onSelectTarget={this.handleSelectedTarget.bind(this)}/>
+        <TargetTable onSelectTarget={this.handleSelectedTarget}/>
         <br />
 
         <Modal
           open={this.state.openAddTarget}
         >
-          <Modal.Header>
+          {/*<Modal.Header>*/}
-            Adding a Target
+            {/*Adding a Target*/}
-          </Modal.Header>
+          {/*</Modal.Header>*/}
           <Modal.Content>
-            <p>contents</p>
+            <Discovery/>
           </Modal.Content>
           <Modal.Actions>
             <Button negative onClick={() => this.setState({ openAddTarget: false })}>Cancel</Button>
@@ -97,13 +99,16 @@ export class TargetList extends React.Component<Props, State> {
     );
   }
 
-  private handleSelectedTarget = (targetId: string): void => {
+  private handleSelectedTarget = (target: Target): void => {
+    console.log('handleSelectedTarget ');
+    this.setState({selected: target});
 
+    this.props.onTargetSelection(String(target.id));
   }
 }
 
 export interface TargetTableProps {
-  onSelectTarget?:((targetId:number) => void);
+  onSelectTarget?:((target:Target) => void);
 }
 
 export interface TargetTableState {
@@ -121,12 +126,90 @@ export class TargetTable extends React.Component<TargetTableProps, TargetTableSt
       list: [],
     };
   }
+
+  public componentWillMount(): void {
+    this.data = [
+      {
+        'id': '1',
+        'probe': {
+          'id': '1',
+          'status': {
+            'id': '1',
+            'name': 'INITIAL',
+          },
+          'description': 'snoop probe',
+          'domain': {
+            'id': '1',
+            'name': 'overFlow`s domain',
+          },
+        },
+        'infra': {
+          'id': '1',
+          'type': {
+            'id': '1',
+            'name': 'MACHINE',
+          },
+        },
+      },
+
+      {
+        'id': '11',
+        'probe': {
+          'id': '1',
+          'status': {
+            'id': '1',
+            'name': 'INITIAL',
+          },
+          'description': 'snoop probe',
+          'domain': {
+            'id': '1',
+            'name': 'overFlow`s domain',
+          },
+        },
+        'infra': {
+          'id': '1',
+          'type': {
+            'id': '1',
+            'name': 'MACHINE',
+          },
+        },
+      },
+
+      {
+        'id': '21',
+        'probe': {
+          'id': '1',
+          'status': {
+            'id': '1',
+            'name': 'INITIAL',
+          },
+          'description': 'snoop probe',
+          'domain': {
+            'id': '1',
+            'name': 'overFlow`s domain',
+          },
+        },
+        'infra': {
+          'id': '3',
+          'type': {
+            'id': '2',
+            'name': 'HOST',
+          },
+        },
+      },
+    ];
+
+    this.setState({list:this.data});
+  }
+
   public handleSelect(selectedTarget: Target): void {
+
+    console.log(selectedTarget.id);
     this.setState({
       selected: selectedTarget,
     });
 
-    this.props.onSelectTarget(selectedTarget.id);
+    this.props.onSelectTarget(selectedTarget);
   }
 
   public render(): JSX.Element {
@@ -146,8 +229,8 @@ export class TargetTable extends React.Component<TargetTableProps, TargetTableSt
             {this.state.list.map((target: Target, index: number) => (
               <Table.Row key={index} onClick={this.handleSelect.bind(this, target)}>
                 <Table.Cell textAlign={'center'}>{index + 1}</Table.Cell>
-                <Table.Cell textAlign={'center'}>todo</Table.Cell>
+                <Table.Cell textAlign={'center'}>{target.infra.type.name}</Table.Cell>
-                <Table.Cell>todo</Table.Cell>
+                <Table.Cell>{target.probe.domain.name}</Table.Cell>
                 <Table.Cell>todo</Table.Cell>
               </Table.Row>
             ))}