temporary router

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

@@ -7,6 +7,8 @@ import { ConnectedRouter } from 'react-router-redux';
 import AccountLayout from './layout/AccountLayout';
 import AppLayout from './layout/AppLayout';
 
+import TempLayout from './layout/TempLayout';
+
 export interface Props {
   store: Store<any>;
   history: History;
@@ -25,6 +27,7 @@ class App extends React.Component<Props, State> {
       <Provider store={this.props.store}>
         <ConnectedRouter history={this.props.history}>
           <Switch>
+            <Route path='/temp' component={TempLayout}/>
             <Route path='/account' component={AccountLayout}/>
             <Route path='/' component={AppLayout}/>
           </Switch>

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

@@ -36,7 +36,7 @@ export class LeftMenu extends React.Component<any, any> {
             <Header inverted sub icon='bar graph' content='Monitoring' />
           </Menu.Header>
           <Menu.Menu>
-            <Menu.Item href='#/probe_list' style={{ 'marginLeft': '30px' }}>Probe</Menu.Item>
+            <Menu.Item href='#/temp/probe' 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/TempLayout.tsx

@@ -0,0 +1,48 @@
+import * as React from 'react';
+import { RouteComponentProps, RouteProps, Route } 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';
+
+export interface Props extends RouteComponentProps<any> {
+}
+export interface State {
+  sidebar_visible: boolean;
+  notification_visible: boolean;
+}
+
+export class AppLayout extends React.Component<Props, State> {
+
+  constructor(props: Props, context: State) {
+    super(props, context);
+    this.state = {
+      sidebar_visible: true,
+      notification_visible: false,
+    };
+  }
+
+  public onSidebar = () => {
+    this.setState({ notification_visible: !this.state.notification_visible, sidebar_visible: !this.state.sidebar_visible });
+  }
+
+  public render(): JSX.Element {
+    return (
+      <Container fluid>
+        <LeftMenu />
+        <Segment vertical style={{ margin: '0 0 0 210px', padding: '0' }}>
+          <Header />
+
+          <Route path={`${this.props.match.url}/probe`} component={ProbeList} />
+
+          <Footer />
+        </Segment>
+      </Container >
+    );
+  }
+}
+
+export default AppLayout;
+

src/ts/@overflow/commons/react/component/Notification.tsx

@@ -0,0 +1,68 @@
+import * as React from 'react';
+import {
+    Container,
+    Card,
+    Feed,
+} from 'semantic-ui-react';
+
+export interface Props {
+}
+
+export interface State {
+
+}
+
+export class Notification extends React.Component<Props, State> {
+
+    constructor(props: Props, context: State) {
+        super(props, context);
+        this.state = {
+        };
+    }
+
+    public render(): JSX.Element {
+
+        return (
+            <Container>
+                <Card fluid>
+                    <Card.Content>
+                        <Card.Header>User Notifications</Card.Header>
+                    </Card.Content>
+                    <Card.Content>
+                        <Feed>
+                            <Feed.Event>
+                                <Feed.Label icon='task' />
+                                <Feed.Content>
+                                    <Feed.Date content='1 day ago' />
+                                    <Feed.Summary>
+                                        You added <a>Jenny Hess</a> to your <a>coworker</a> group.
+                                    </Feed.Summary>
+                                </Feed.Content>
+                            </Feed.Event>
+
+                            <Feed.Event>
+                                <Feed.Label icon='privacy' />
+                                <Feed.Content>
+                                    <Feed.Date content='3 days ago' />
+                                    <Feed.Summary>
+                                        You added <a>Molly Malone</a> as a friend.
+                                    </Feed.Summary>
+                                </Feed.Content>
+                            </Feed.Event>
+
+                            <Feed.Event>
+                                <Feed.Label icon='alarm' />
+                                <Feed.Content>
+                                    <Feed.Date content='4 days ago' />
+                                    <Feed.Summary>
+                                        You added <a>Elliot Baker</a> to your <a>musicians</a> group.
+                                     </Feed.Summary>
+                                </Feed.Content>
+                            </Feed.Event>
+                        </Feed>
+                    </Card.Content>
+                </Card>
+            </Container>
+        );
+    }
+}