temporary routing

src/ts/@overflow/app/router/index.tsx

@@ -55,7 +55,7 @@ const routes = (
         <Route exact path='/test4' component={PWChange} />
         <Route exact path='/test24' component={Discovery} />
 
-        <Route exact path='/probe_list' component={ProbeList} />
+        <Route exact path='/probes' component={ProbeList} />
         <Route exact path='/sensor_list' component={SensorList} />
         <Route exact path='/target_list' component={TargetList} />
         <Route exact path='/sensor_setup' component={SensorSetup} />

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

@@ -2,6 +2,7 @@ import * as React from 'react';
 import { Route, Switch } from 'react-router-dom';
 
 import AccountLayout from './layout/AccountLayout';
+import ProbeDetailLayout from './layout/ProbeDetailLayout';
 import AppLayout from './layout/AppLayout';
 import ErrorLayout from './layout/ErrorLayout';
 
@@ -24,8 +25,8 @@ class App extends React.Component<Props, State> {
     return (
       <Switch>
         <Route path='/error' component={ErrorLayout}/>
-        <Route path='/temp' component={TempLayout}/>
         <Route path='/account' component={AccountLayout}/>
+        <Route path='/probe' component={ProbeDetailLayout}/>
         <Route path='/' component={AppLayout}/>
       </Switch>
     );

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

@@ -3,9 +3,11 @@ 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 LeftMenu from './LeftMenu';
 
 import Home from '../Home';
+import ProbeList from '../../views/monitoring/probe/List';
 
 export interface Props extends RouteComponentProps<any> {
 }
@@ -34,8 +36,10 @@ export class AppLayout extends React.Component<Props, State> {
         <LeftMenu />
         <Segment vertical style={{ margin: '0 0 0 210px', padding: '0' }}>
           <Header />
+          <TitleBar />
             <Switch>
               <Route exact={true} path={`${this.props.match.url}`} component={Home}/>
+              <Route exact={true} path={`${this.props.match.url}probes`} component={ProbeList}/>
               <Redirect to='/error/404' />
             </Switch>
           <Footer />

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

@@ -2,7 +2,6 @@ import * as React from 'react';
 import { Container, Divider } from 'semantic-ui-react';
 
 import { LogoBar } from './LogoBar';
-import { TitleBar } from './TitleBar';
 
 export class Header extends React.Component<any, any> {
 
@@ -16,7 +15,6 @@ export class Header extends React.Component<any, any> {
     return (
       <Container fluid>
         <LogoBar />
-        <TitleBar />
       </Container>
       // <TopBar onSidebar={this.props.onSidebar}/>
     );

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

@@ -51,7 +51,7 @@ class LeftMenu extends React.Component<Props, State> {
             <Header inverted sub icon='bar graph' content='Monitoring' />
           </Menu.Header>
           <Menu.Menu>
-            <Menu.Item onClick={(e) => this.props.onChangeUrl('/temp/probe')} style={{ 'marginLeft': '30px' }}>Probe</Menu.Item>
+            <Menu.Item onClick={(e) => this.props.onChangeUrl('/probes')} style={{ 'marginLeft': '30px' }}>Probe</Menu.Item>
             <Menu.Item href='#/' style={{ 'marginLeft': '30px' }}>Sensors</Menu.Item>
           </Menu.Menu>
         </Menu.Item>

src/ts/@overflow/app/views/layout/ProbeDetailLayout.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 ProbeDetail from '../../views/monitoring/probe/Detail';
+import ProbeHistory from '../../views/monitoring/probe/History';
+
+
+export interface Props extends RouteComponentProps<any> {
+}
+export interface State {
+}
+
+export class ProbeDetailLayout 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='Probe Details' sub={sub} />
+          <Switch>
+            <Route exact={true} path={`${this.props.match.url}/:id`} component={ProbeDetail} />
+            <Route exact={true} path={`${this.props.match.url}/:id/history`} component={ProbeHistory} />
+          </Switch>
+          <Footer />
+        </Segment>
+      </Container >
+    );
+  }
+}
+
+export default ProbeDetailLayout;
+

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

@@ -1,5 +1,6 @@
 import * as React from 'react';
 import { Grid, Container, Breadcrumb, Header, Menu, Input, Segment } from 'semantic-ui-react';
+import { Redirect } from 'react-router-dom';
 
 export class TitleBar extends React.Component<any, any> {
 
@@ -9,25 +10,27 @@ export class TitleBar extends React.Component<any, any> {
     };
   }
 
+  public handleMenu(menu:any): JSX.Element {
+    console.log(menu.path);
+    return <Redirect to={menu.path} />;
+  }
+
+  public renderSubMenus(): JSX.Element {
+    let subMenus = this.props.sub;
+    if (!subMenus) {
+      return null;
+    }
+
+    return subMenus.map((menu: any, index: number) => (
+      <Menu.Item key={index} name={menu.name} onClick={this.handleMenu.bind(this, menu)}/>
+    ));
+  }
+
   public render(): JSX.Element {
-    let subMenus = [
-      {
-        'name': 'Menu1',
-        'href': '#/test2',
-      },
-      {
-        'name': 'Menu2',
-        'href': '#/test3',
-      },
-      {
-        'name': 'Menu3',
-        'href': '#/test4',
-      },
-    ];
     return (
       <Menu fluid style={{ 'borderLeft': '0px', 'borderRight': '0px', 'boxShadow': 'none', 'borderRadius': '0' }}>
-        <Menu.Item name='Page Title' style={{ width: '250px' }}>
+        <Menu.Item name={this.props.title} style={{ width: '250px' }}>
-          <Header as='h3'>Page Title
+          <Header as='h3'>{this.props.title}
             <Header.Subheader>
               <Breadcrumb size='mini'>
                 <Breadcrumb.Section link>Home</Breadcrumb.Section>
@@ -39,9 +42,7 @@ export class TitleBar extends React.Component<any, any> {
             </Header.Subheader>
           </Header>
         </Menu.Item>
-        {subMenus.map((menu: any, index: number) => (
+        {this.renderSubMenus()}
-          <Menu.Item key={index} name={menu.name} href={menu.href} />
-        ))}
       </Menu>
     );
   }

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

@@ -0,0 +1,25 @@
+import * as React from 'react';
+import { RouteComponentProps } from 'react-router';
+import WebSocketRPC from '@overflow/commons/websocket/WebSocketRPC';
+import AppContext from '@overflow/commons/context';
+import inject from '@overflow/commons/context/decorator/inject';
+
+class ProbeHistory 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 (
+      <div>Probe History</div>
+    );
+  }
+}
+
+
+export default ProbeHistory;

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

@@ -21,7 +21,7 @@ export function mapDispatchToProps(dispatch: Dispatch<any>): ProbeListDispatchPr
             dispatch(probeListActions.request(domain));
         },
         onProbeSelection: (id: string) => {
-            dispatch(routerPush('/temp/probe/' + id));
+            dispatch(routerPush('/probe/' + id));
         },
     };
 }

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

@@ -100,7 +100,7 @@ export class ProbeList extends React.Component<Props, State> {
     this.props.onProbeSelection(selectedProbe.id);
   }
 
-  public handleSearch(result: Probe[]): void {
+  public handleSearch = (result: Probe[]): void => {
     this.setState({
       list: result,
     });
@@ -148,7 +148,7 @@ export class ProbeList extends React.Component<Props, State> {
       <ListContainer
         contents={probeList}
         data={this.data}
-        onSearch={this.handleSearch.bind(this)}
+        onSearch={this.handleSearch}
         filter={<ProbeFilter onFilter={this.handleFilter.bind(this)} />}
       />
     );