routtttttttttttttttttttttttttttte

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

@@ -1,11 +1,12 @@
 import * as React from 'react';
-import { RouteComponentProps, RouteProps, Route } from 'react-router-dom';
+import { 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 LeftMenu from './LeftMenu';
 
 import ProbeList from '../monitoring/probe/List';
+import ProbeDetail from '../monitoring/probe/Detail';
 
 export interface Props extends RouteComponentProps<any> {
 }
@@ -30,16 +31,17 @@ export class AppLayout extends React.Component<Props, State> {
 
   public render(): JSX.Element {
     return (
-      <Container fluid>
+        <Container fluid>
-        <LeftMenu />
+          <LeftMenu />
-        <Segment vertical style={{ margin: '0 0 0 210px', padding: '0' }}>
+          <Segment vertical style={{ margin: '0 0 0 210px', padding: '0' }}>
-          <Header />
+            <Header />
 
-          <Route path={`${this.props.match.url}/probe`} component={ProbeList} />
+            <Route exact path={`${this.props.match.url}/probe`} component={ProbeList} />
+            <Route exact path={`${this.props.match.url}/probe/:id`} component={ProbeDetail} />
 
-          <Footer />
+            <Footer />
-        </Segment>
+          </Segment>
-      </Container >
+        </Container >
     );
   }
 }

src/ts/@overflow/app/views/monitoring/probe/Detail.tsx

@@ -5,7 +5,7 @@ import WebSocketRPC from '@overflow/commons/websocket/WebSocketRPC';
 import AppContext from '@overflow/commons/context';
 import inject from '@overflow/commons/context/decorator/inject';
 
-class ProbeList extends React.Component<RouteComponentProps<object>, object> {
+class ProbeDetail extends React.Component<RouteComponentProps<object>, object> {
   @inject()
   private client: WebSocketRPC;
 
@@ -23,4 +23,4 @@ class ProbeList extends React.Component<RouteComponentProps<object>, object> {
 }
 
 
-export default ProbeList;
+export default ProbeDetail;

src/ts/@overflow/probe/react/ProbeDetail.tsx

@@ -7,7 +7,6 @@ import {
 
 export function mapStateToProps(state: any): ProbeDetailStateProps {
     return {
-        probe: state.probe,
     };
 }
 

src/ts/@overflow/probe/react/components/ProbeDetail.tsx

@@ -1,16 +1,17 @@
 import * as React from 'react';
-import { Button,
+import {
+  Button,
   Table,
   Label,
   Segment,
   Header,
   Container,
 } from 'semantic-ui-react';
-import { TargetTable } from '@overflow/target/react/components/TargetList';
+// import { TargetTable } from '@overflow/target/react/components/TargetList';
 import Probe from '@overflow/probe/api/model/Probe';
 
 export interface StateProps {
-  probe: Probe;
+
 }
 
 export interface DispatchProps {
@@ -33,16 +34,21 @@ export class ProbeDetail extends React.Component<Props, State> {
   public render(): JSX.Element {
     return (
       <Container fluid>
-        <ProbeBasicInfo probe={this.props.probe} />
+        Probe Detail....id: ?
-        <TargetTable />
+        {/* <ProbeBasicInfo probe={null} />
+        <TargetTable /> */}
       </Container>
     );
   }
 }
 
-export class ProbeBasicInfo extends React.Component<Props, State> {
+export interface DetailProps {
+  probe: Probe;
+}
 
-  constructor(props: Props, context: State) {
+export class ProbeBasicInfo extends React.Component<DetailProps, State> {
+
+  constructor(props: DetailProps, context: State) {
     super(props, context);
     this.state = {
     };
@@ -55,20 +61,20 @@ export class ProbeBasicInfo extends React.Component<Props, State> {
     alert('Discovery');
   }
 
-  public showStartStopBtn(): JSX.Element {
+  // public showStartStopBtn(): JSX.Element {
-    let temp: any = null;
+  //   let temp: any = null;
-    temp = this.props.probe;
+  //   temp = this.props.probe;
-    if (temp.metaProbeStatus.name === 'STARTED') {
+  //   if (temp.metaProbeStatus.name === 'STARTED') {
-      return <Button content='Stop' icon='stop' labelPosition='left' color={'blue'} floated={'right'} onClick={this.handleStartStop} />;
+  //     return <Button content='Stop' icon='stop' labelPosition='left' color={'blue'} floated={'right'} onClick={this.handleStartStop} />;
-    } else {
+  //   } else {
-      return <Button content='Start' icon='play' labelPosition='left' color={'blue'} floated={'right'} onClick={this.handleStartStop} />;
+  //     return <Button content='Start' icon='play' labelPosition='left' color={'blue'} floated={'right'} onClick={this.handleStartStop} />;
-    }
+  //   }
-  }
+  // }
 
   public render(): JSX.Element {
     return (
       <Container fluid>
-        <Header as='h3' dividing>Probe Info</Header>
+        {/* <Header as='h3' dividing>Probe Info</Header>
         <Table celled={false}>
           <Table.Body>
             <Table.Row>
@@ -111,7 +117,7 @@ export class ProbeBasicInfo extends React.Component<Props, State> {
         </Table>
 
         <Button content='Discovery' icon='search' labelPosition='left' floated={'right'} positive onClick={this.handleDiscovery} />
-        {this.showStartStopBtn()}
+        {this.showStartStopBtn()} */}
 
       </Container>
     );

src/ts/@overflow/probe/react/components/ProbeList.tsx

@@ -16,7 +16,6 @@ export type Props = StateProps & DispatchProps;
 
 export interface State {
   selected: Probe;
-  isDetail: boolean;
   list: Probe[];
 }
 
@@ -29,7 +28,6 @@ export class ProbeList extends React.Component<Props, State> {
 
     this.state = {
       selected: null,
-      isDetail: false,
       list: null,
     };
   }
@@ -96,7 +94,6 @@ export class ProbeList extends React.Component<Props, State> {
   public handleSelect(selectedProbe: any): void {
     this.setState({
       selected: selectedProbe,
-      isDetail: true,
     });
   }
 
@@ -125,9 +122,6 @@ export class ProbeList extends React.Component<Props, State> {
   }
 
   public render(): JSX.Element {
-    if (this.state.isDetail) {
-      return <ProbeDetail probe={this.state.selected} />;
-    }
     let probeList =
       <Container fluid>
         <Table selectable striped>