Target Layout push

src/ts/@overflow/app/views/infrastructure/target/Detail.tsx

@@ -0,0 +1,27 @@
+import * as React from 'react';
+import { RouteComponentProps } from 'react-router';
+import TargetDetailContainer from '@overflow/target/react/TargetDetail';
+import WebSocketRPC from '@overflow/commons/websocket/WebSocketRPC';
+import AppContext from '@overflow/commons/context';
+import inject from '@overflow/commons/context/decorator/inject';
+
+class TargetDetail extends React.Component<RouteComponentProps<object>, object> {
+  @inject()
+  private client: WebSocketRPC;
+
+  public constructor(props?: RouteComponentProps<object>, context?: object) {
+    super(props, context);
+
+    let con = AppContext.get<WebSocketRPC>();
+  }
+
+  public render(): JSX.Element {
+    return (
+      <TargetDetailContainer />
+    );
+  }
+}
+
+
+export default TargetDetail;
+

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

@@ -8,6 +8,7 @@ import LeftMenu from './LeftMenu';
 
 import Home from '../Home';
 import ProbeList from '../../views/monitoring/probe/List';
+import TargetList from '../../views/infrastructure/target/List';
 import SensorList from '../monitoring/sensor/List';
 
 export interface Props extends RouteComponentProps<any> {
@@ -41,6 +42,7 @@ export class AppLayout extends React.Component<Props, State> {
             <Switch>
               <Route exact={true} path={`${this.props.match.url}`} component={Home}/>
               <Route exact={true} path={`${this.props.match.url}probes`} component={ProbeList}/>
+              <Route exact={true} path={`${this.props.match.url}targets`} component={TargetList}/>
               <Route exact={true} path={`${this.props.match.url}sensors`} component={SensorList}/>
               <Redirect to='/error/404' />
             </Switch>

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

@@ -61,8 +61,8 @@ class LeftMenu extends React.Component<Props, State> {
             <Header inverted sub icon='sitemap' content='Infrastructure' />
           </Menu.Header>
           <Menu.Menu>
-            <Menu.Item href='/' style={{ 'marginLeft': '30px' }}>Maps</Menu.Item>
-            <Menu.Item href='#/target_list' style={{ 'marginLeft': '30px' }}>Targets</Menu.Item>
+            <Menu.Item href='#/' style={{ 'marginLeft': '30px' }}>Maps</Menu.Item>
+            <Menu.Item onClick={(e) => this.props.onChangeUrl('/targets')}  style={{ 'marginLeft': '30px' }}>Targets</Menu.Item>
           </Menu.Menu>
         </Menu.Item>
 

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

@@ -0,0 +1,56 @@
+import * as React from 'react';
+import { Redirect, RouteComponentProps, RouteProps, Route, Switch } from 'react-router-dom';
+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 LeftMenu from './LeftMenu';
+
+import TargetDetail from '../../views/infrastructure/target/Detail';
+import ProbeHistory from '../../views/monitoring/probe/History';
+
+
+export interface Props extends RouteComponentProps<any> {
+}
+export interface State {
+}
+
+export class TargetDetailLayout extends React.Component<Props, State> {
+
+  constructor(props: Props, context: State) {
+    super(props, context);
+    this.state = {
+    };
+  }
+
+
+  public render(): JSX.Element {
+    const sub = [
+      {
+        'name': 'Info',
+        'path': `${this.props.location.pathname}`,
+      },
+      {
+        'name': 'History',
+        'path': `${this.props.location.pathname}/history`,
+      },
+    ];
+    return (
+      <Container fluid>
+        <LeftMenu />
+        <Segment vertical style={{ margin: '0 0 0 210px', padding: '0' }}>
+          <Header />
+          <TitleBar title='Target Details' sub={sub} />
+          <Switch>
+            <Route exact={true} path={`${this.props.match.url}/:id`} component={TargetDetail} />
+            <Route exact={true} path={`${this.props.match.url}/:id/history`} component={ProbeHistory} />
+          </Switch>
+          <Footer />
+        </Segment>
+      </Container >
+    );
+  }
+}
+
+export default TargetDetailLayout;
+

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

@@ -9,7 +9,9 @@ import ProbeList from '../monitoring/probe/List';
 import ProbeDetail from '../monitoring/probe/Detail';
 import SensorList from '../monitoring/sensor/List';
 import SensorSetup from '../monitoring/sensor/Setup';
-import Discovery from '../../../temp/react/components/Discovery'
+import Discovery from '../../../temp/react/components/Discovery';
+import TargetList from '../infrastructure/target/List';
+import TargetDetail from '../infrastructure/target/Detail';
 
 export interface Props extends RouteComponentProps<any> {
 }
@@ -44,6 +46,8 @@ export class AppLayout extends React.Component<Props, State> {
             <Route exact path={`${this.props.match.url}/probe/:id`} component={ProbeDetail} />
             <Route exact path={`${this.props.match.url}/sensor_list`} component={SensorList} />
             <Route exact path={`${this.props.match.url}/sensor_setup`} component={SensorSetup} />
+            <Route exact path={`${this.props.match.url}/target`} component={TargetList} />
+            <Route exact path={`${this.props.match.url}/target/:id`} component={TargetDetail} />
             <Route exact path={`${this.props.match.url}/discovery`} component={Discovery} />
 
             <Footer />

src/ts/@overflow/target/react/TargetDetail.tsx

@@ -17,7 +17,7 @@ export function mapDispatchToProps(dispatch: Dispatch<any>): DispatchProps {
     return {
         onRead: (id: string) => {
             dispatch(targetDetailActions.request(id));
-        },
+        }
     };
 }
 

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

@@ -1,26 +1,30 @@
 import { connect, Dispatch } from 'react-redux';
 import {
-    TargetList,
-    StateProps as StateProps,
-    DispatchProps as DispatchProps,
+  TargetList,
+  StateProps as StateProps,
+  DispatchProps as DispatchProps,
 } from './components/TargetList';
 
 import Probe from '@overflow/probe/api/model/Probe';
 import * as targetListActions from '../redux/action/read_all_by_probe';
+import { push as routerPush } from 'react-router-redux';
 
 
 export function mapStateToProps(state: any): StateProps {
-    return {
+  return {
 
-    };
+  };
 }
 
 export function mapDispatchToProps(dispatch: Dispatch<any>): DispatchProps {
-    return {
-        onReadAllByProbe: (probe: Probe) => {
-            dispatch(targetListActions.request(probe));
-        },
-    };
+  return {
+    onReadAllByProbe: (probe: Probe) => {
+      dispatch(targetListActions.request(probe));
+    },
+    onTargetSelection: (id: string) => {
+      dispatch(routerPush('/target/' + id));
+    },
+  };
 }
 
 export default connect(mapStateToProps, mapDispatchToProps)(TargetList);

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

@@ -11,6 +11,7 @@ export interface StateProps {
 
 export interface DispatchProps {
   onReadAllByProbe(probe: Probe): void;
+  onTargetSelection(id: string): void;
 }
 
 export type Props = StateProps & DispatchProps;
@@ -68,7 +69,7 @@ export class TargetList extends React.Component<Props, State> {
       <Container fluid>
         {/*search bar  */}
         <Button content='Add' icon='add' labelPosition='left' floated='right' positive onClick={this.handleAddTarget.bind(this)} />
-        <TargetTable />
+        <TargetTable onSelectTarget={this.handleSelectedTarget.bind(this)}/>
         <br />
 
         <Modal
@@ -95,10 +96,14 @@ export class TargetList extends React.Component<Props, State> {
       />
     );
   }
+
+  private handleSelectedTarget = (targetId: string): void => {
+
+  }
 }
 
 export interface TargetTableProps {
-
+  onSelectTarget?:((targetId:number) => void);
 }
 
 export interface TargetTableState {
@@ -120,6 +125,8 @@ export class TargetTable extends React.Component<TargetTableProps, TargetTableSt
     this.setState({
       selected: selectedTarget,
     });
+
+    this.props.onSelectTarget(selectedTarget.id);
   }
 
   public render(): JSX.Element {

src/ts/@overflow/temp/react/components/TableSort.tsx

@@ -0,0 +1,103 @@
+import * as _ from 'lodash';
+import * as React from 'react';
+import { Table } from 'semantic-ui-react';
+
+
+export interface StateProps {
+  jsonObj:any;
+}
+
+export interface DispatchProps {
+  columnClick():void;
+}
+
+export type Props = StateProps & DispatchProps;
+
+export interface State {
+  column: string;
+  data: any;
+  direction: string;
+}
+
+
+const tableData = [
+  { 'name': 'John', 'age': 15, 'gender': 'Male' },
+  { 'name': 'Amber', 'age': 40, 'gender': 'Female' },
+  { 'name': 'Leslie', 'age': 25, 'gender': 'Female' },
+  { 'name': 'Ben', 'age': 70, 'gender': 'Male' },
+];
+
+export class TableSort extends React.Component<Props, State> {
+  constructor(props: any, context: any) {
+    super(props, context);
+
+    this.state = {
+      column: null,
+      data: tableData,
+      direction: null,
+    };
+  }
+
+  public render(): JSX.Element  {
+    return (
+      <Table sortable celled fixed>
+        <Table.Header>
+          {this.generationHeaderRow()}
+        </Table.Header>
+        <Table.Body>
+
+        </Table.Body>
+      </Table>
+    );
+  }
+
+  private generationHeaderRow(): JSX.Element {
+    return (
+      <Table.Row>
+
+      </Table.Row>
+    );
+  }
+
+  private generationBodyRow(): JSX.Element {
+    return (
+      <Table.Row>
+
+      </Table.Row>
+    );
+  }
+
+  private handleSort(clickedColumn:any):void {
+    const {column, data, direction} = this.state;
+
+    if (column !== clickedColumn) {
+      this.setState({
+        column: clickedColumn,
+        data: _.sortBy(data, [clickedColumn]),
+        direction: 'ascending',
+      });
+
+      return;
+    }
+
+    this.setState({
+      data: data.reverse(),
+      direction: direction === 'ascending' ? 'descending' : 'ascending',
+    });
+  }
+
+  private handleDirection():string {
+    const { column, data, direction } = this.state;
+
+    if (column === 'name') {
+      return direction;
+    } else if(column === 'age') {
+      return direction;
+    } else if (column === 'gender' ) {
+      return direction;
+    }
+
+    return null;
+  }
+}
+