Merge remote-tracking branch 'origin/master'

src/ts/@overflow/app/views/layout/ProbeDetailLayout.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 ProbeDetail from '../../views/monitoring/probe/Detail';
@@ -40,7 +40,7 @@ export class ProbeDetailLayout extends React.Component<Props, State> {
         <LeftMenu />
         <Segment vertical style={{ margin: '0 0 0 210px', padding: '0' }}>
           <Header />
-          <TitleBar title='Probe Details' sub={sub} />
+          <TitleBarContainer 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} />

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

@@ -6,6 +6,7 @@ import { Footer } from './Footer';
 import { TitleBar } from './TitleBar';
 import LeftMenu from './LeftMenu';
 import SensorSetup from '../monitoring/sensor/Setup';
+import SensorDetail from '../monitoring/sensor/Detail';
 
 export interface Props extends RouteComponentProps<any> {
 }
@@ -37,9 +38,9 @@ class SensorDetailLayout extends React.Component<Props, State> {
           <Header />
           <TitleBar title='Probe Details' sub={sub} />
           <Switch>
-            {/*<Route path={`${this.props.match.url}/:id/`} component={SignIn}/>
-          <Route path={`${this.props.match.url}/:id/info/`} component={SignUp}/>
-          <Route path={`${this.props.match.url}/:id/history/`} component={EmailConfirm}/>*/}
+            <Route path={`${this.props.match.url}/:id/`} component={SensorDetail}/>
+          <Route path={`${this.props.match.url}/:id/info/`} component={SensorDetail}/>
+          {/*<Route path={`${this.props.match.url}/:id/history/`} component={EmailConfirm}/>*/}
            <Route path={`${this.props.match.url}/setup/`} component={SensorSetup} />
           </Switch>
           <Footer />

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

@@ -1,8 +1,21 @@
 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> {
+
+export interface StateProps {
+  sub: any;
+}
+
+export interface DispatchProps {
+  onRedirect(path: string): void;
+}
+
+export type Props = StateProps & DispatchProps;
+
+export interface State {
+}
+
+export class TitleBar extends React.Component<Props, State> {
 
   constructor(props: any, context: any) {
     super(props, context);
@@ -10,9 +23,9 @@ export class TitleBar extends React.Component<any, any> {
     };
   }
 
-  public handleMenu(menu:any): JSX.Element {
+  public handleMenu(menu:any): any {
     console.log(menu.path);
-    return <Redirect to={menu.path} />;
+    this.props.onRedirect(menu.path);
   }
 
   public renderSubMenus(): JSX.Element {
@@ -29,8 +42,8 @@ export class TitleBar extends React.Component<any, any> {
   public render(): JSX.Element {
     return (
       <Menu fluid style={{ 'borderLeft': '0px', 'borderRight': '0px', 'boxShadow': 'none', 'borderRadius': '0' }}>
-        <Menu.Item name={this.props.title} style={{ width: '250px' }}>
-          <Header as='h3'>{this.props.title}
+        <Menu.Item name='TEMP' style={{ width: '250px' }}>
+          <Header as='h3'>TEMP
             <Header.Subheader>
               <Breadcrumb size='mini'>
                 <Breadcrumb.Section link>Home</Breadcrumb.Section>

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

@@ -0,0 +1,24 @@
+import { connect, Dispatch } from 'react-redux';
+import {
+    TitleBar,
+    StateProps as StateProps,
+    DispatchProps as DispatchProps,
+} from './TitleBar';
+
+import { push as routerPush } from 'react-router-redux';
+
+export function mapStateToProps(state: any, ownProps: any): StateProps {
+    return {
+      sub: ownProps.sub,
+    };
+}
+
+export function mapDispatchToProps(dispatch: Dispatch<any>): DispatchProps {
+    return {
+        onRedirect: (path: string) => {
+            dispatch(routerPush(path));
+        },
+    };
+}
+
+export default connect(mapStateToProps, mapDispatchToProps)(TitleBar);

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

@@ -0,0 +1,30 @@
+import * as React from 'react';
+import { RouteComponentProps } from 'react-router';
+import SensorDetailContainer from '@overflow/sensor/react/SensorDetail';
+import WebSocketRPC from '@overflow/commons/websocket/WebSocketRPC';
+import AppContext from '@overflow/commons/context';
+import inject from '@overflow/commons/context/decorator/inject';
+
+class SensorDetail 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 (
+        <SensorDetailContainer />
+    );
+  }
+
+  private test(@inject() c: WebSocketRPC): void {
+    console.log('');
+  }
+}
+
+
+export default SensorDetail;