add routers

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

@@ -11,7 +11,9 @@ import Platform from '@overflow/commons/platform';
 import { store, sagaMiddleware, history } from './redux/store';
 
 import sagas from './redux/saga';
-import routes from './router';
+// import routes from './router';
+
+import {Layout} from './views/layout/Layout';
 
 injectTapEventPlugin();
 
@@ -35,13 +37,9 @@ function* app(): any {
   sagaMiddleware.run(sagas);
 
   ReactDOM.render(
-    <Provider store={store}>
-      <ConnectedRouter history={history}>
-        {routes}
-      </ConnectedRouter>
-    </Provider>,
+    <div><Layout /></div>,
     appContainer,
-  );
+   );
 }
 
 sagaMiddleware.run(app);

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

@@ -3,10 +3,33 @@ import { Route, Switch } from 'react-router-dom';
 
 import SignIn from '../views/member/SignIn';
 
+import { SignUp } from '@overflow/member/react/components/SignUp';
+// import { SignIn } from '@overflow/member/react/components/SignIn';;
+import { PWChange } from '@overflow/member/react/components/PWChange';
+import { ProbeDown } from '@overflow/probe/react/components/ProbeDown';
+import { DiscoveryDetails } from '@overflow/temp/react/components/DiscoveryDetails'
+import { Components } from '@overflow/temp/react/components/Components';
+import { Sensors } from '@overflow/temp/react/components/Sensors';
+// import { Layout } from './containers/test/layout/Layout'
+import { Tree } from '@overflow/temp/react/components/commons/Tree';
+import { TableExampleSortable } from '@overflow/temp/react/components/TableExampleSortable'
+
+
 const routes = (
     <Switch>
-        <Route exact path='/' />
-        <Route path='/signin' component={SignIn} />
+        <Route exact path='/'/>
+        <Route exact path='/test2' component={SignUp} />
+          <Route exact path='/test3' component={SignIn} />
+          <Route exact path='/test4' component={PWChange} />
+          <Route exact path='/test5' component={ProbeDown} />
+          <Route exact path='/test6' component={DiscoveryDetails} />
+          <Route exact path='/test7' component={Tree} />
+          <Route exact path='/test8' component={TableExampleSortable} />
+
+          <Route exact path='/test14' component={Components} />
+
+          <Route exact path='/test21' component={Sensors} />
+        {/*<Route path='/signin' component={SignIn} />*/}
 
     </Switch>
 

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

@@ -0,0 +1,23 @@
+import * as React from 'react';
+import { Segment } from 'semantic-ui-react';
+
+export class Footer extends React.Component<any, any> {
+
+  constructor(props: any, context: any) {
+    super(props, context);
+    this.state = {
+   };
+  }
+
+  public render(): JSX.Element {
+    return (
+      <Segment vertical textAlign='center' size='tiny'>
+        <br />
+          Copyright LOAFLE.
+      </Segment>
+    );
+  }
+}
+
+
+

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

@@ -0,0 +1,27 @@
+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> {
+
+  constructor(props: any, context: any) {
+    super(props, context);
+    this.state = {
+   };
+  }
+
+  public render(): JSX.Element {
+    return (
+      <Container fluid>
+        <LogoBar />
+        <TitleBar />
+      </Container>
+      // <TopBar onSidebar={this.props.onSidebar}/>
+    );
+  }
+}
+
+
+

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

@@ -0,0 +1,109 @@
+import * as React from 'react';
+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 { Routes } from './Routes';
+
+import routes from '../../router';
+
+import { Router } from 'react-router';
+import * as History from 'history';
+
+import { Provider } from 'react-redux';
+import { ConnectedRouter } from 'react-router-redux';
+import { store, sagaMiddleware, history } from '../../redux/store';
+
+// const history = History.createHashHistory();
+
+export class Layout extends React.Component<any, any> {
+
+  constructor(props: any, context: any) {
+    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>
+        <Sidebar.Pushable as={Segment} vertical>
+          <Sidebar as={Menu} animation='overlay' width='thin' visible={this.state.sidebar_visible} icon='labeled' vertical inverted>
+            <LeftMenu />
+          </Sidebar>
+          <Sidebar.Pusher>
+            <Segment vertical style={{ margin: '0 0 0 150px', padding: '0' }}>
+              <Header />
+
+              {/*<Router history={history} >
+                {routes}
+              </Router>*/}
+              <Provider store={store}>
+                <ConnectedRouter history={history}>
+                  {routes}
+                </ConnectedRouter>
+              </Provider>
+
+              <Footer />
+
+            </Segment>
+          </Sidebar.Pusher>
+        </Sidebar.Pushable>
+        {/* <Header onSidebar={this.onSidebar.bind(this)} />
+          <Sidebar.Pushable as={Segment} vertical >
+            <Sidebar
+              as={Menu}
+              animation='overlay'
+              width='thin'
+              direction='right'
+              visible={this.state.notification_visible}
+              icon='labeled'
+              vertical
+              inverted
+            >
+              <Menu.Item name='home'>
+                Notification 1
+            </Menu.Item>
+              <Menu.Item name='gamepad'>
+                Notification 2
+            </Menu.Item>
+            </Sidebar>
+
+            <Sidebar.Pusher >
+              <Container fluid textAlign='right' style={{ padding: '5px 20px 0px' }}>
+                <Breadcrumb size='mini'>
+                  <Breadcrumb.Section link>Home</Breadcrumb.Section>
+                  <Breadcrumb.Divider icon='right angle' />
+                  <Breadcrumb.Section link>Monitoring</Breadcrumb.Section>
+                  <Breadcrumb.Divider icon='right angle' />
+                  <Breadcrumb.Section active>Probe</Breadcrumb.Section>
+                </Breadcrumb>
+              </Container>
+
+              <Segment vertical>
+                <Container>
+                  <Router history={history} >
+                    <Routes />
+                  </Router>
+                </Container>
+
+                <Footer />
+              </Segment>
+            </Sidebar.Pusher>
+          </Sidebar.Pushable> */}
+
+
+      </Container >
+    );
+  }
+}
+
+
+

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

@@ -0,0 +1,113 @@
+import * as React from 'react';
+import { Container, Menu, Dropdown, Segment, Icon } from 'semantic-ui-react';
+
+import { LogoBar } from './LogoBar';
+import { TitleBar } from './TitleBar';
+
+export class LeftMenu extends React.Component<any, any> {
+
+  constructor(props: any, context: any) {
+    super(props, context);
+    this.state = {
+    };
+
+    window.addEventListener('resize', () => {
+      console.log(window);
+    });
+  }
+
+
+
+  public render(): JSX.Element {
+    return (
+      <Container fluid className='fullHeight'>
+        <Segment inverted vertical className='fullHeight'>
+          <Menu inverted secondary vertical fluid icon='labeled' >
+
+            <Menu.Item name='User' href='/' >
+              <Icon name='user' />
+            </Menu.Item>
+            <Menu.Item name='Home' href='/' >
+              <Icon name='home' />
+              Home
+            </Menu.Item>
+            <Menu.Item name='Monitoring' href='/' >
+              <Icon name='bar graph' />
+              Monitoring
+              {/*
+              <Dropdown text='Monitoring' pointing>
+                <Dropdown.Menu>
+                  <Dropdown.Header>Monitoring</Dropdown.Header>
+                  <Dropdown.Item>Probe</Dropdown.Item>
+                  <Dropdown.Item>Sensors</Dropdown.Item>
+                </Dropdown.Menu>
+              </Dropdown>
+              */}
+            </Menu.Item>
+
+            <Menu.Item name='Infrastructure' href='/' >
+              <Icon name='sitemap' />
+              Infrastructure
+              {/*
+              <Dropdown text='Infrastructure' >
+                <Dropdown.Menu>
+                  <Dropdown.Header>Infrastructure</Dropdown.Header>
+                  <Dropdown.Item>Maps</Dropdown.Item>
+                  <Dropdown.Item>Targets</Dropdown.Item>
+                </Dropdown.Menu>
+              </Dropdown>
+              */}
+            </Menu.Item>
+
+            <Menu.Item name='Dashboard' href='/' >
+              <Icon name='industry' />
+              Dashboard
+            </Menu.Item>
+
+            <Menu.Item name='Metrics' href='/' >
+              <Icon name='tasks' />
+              Metrics
+            </Menu.Item>
+
+            <Menu.Item name='Alerts' href='/' >
+              <Icon name='alarm' />
+              Alerts
+            </Menu.Item>
+
+            <Menu.Item name='History' href='/' >
+              <Icon name='book' />
+              History
+            </Menu.Item>
+
+
+            <Menu.Item href='/'>
+              <Icon name='play circle' />
+              <Dropdown text='Custom'>
+                <Dropdown.Menu>
+                  <Dropdown.Header>Custom</Dropdown.Header>
+                  <Dropdown.Item href='#/test2'> SignUp </Dropdown.Item>
+                  <Dropdown.Item href='#/test3'>SignIn</Dropdown.Item>
+                  <Dropdown.Item href='#/test4'> PWChange </Dropdown.Item>
+                  <Dropdown.Item href='#/test5'>ProbeDown</Dropdown.Item>
+                  <Dropdown.Item href='#/test14'> Insanity </Dropdown.Item>
+                  <Dropdown.Item href='#/test6'>DiscoveryDetails</Dropdown.Item>
+                  <Dropdown.Item href='#/test7'>Tree</Dropdown.Item>
+                  <Dropdown.Item href='#/test8'>TableExampleSortable</Dropdown.Item>
+                </Dropdown.Menu>
+              </Dropdown>
+            </Menu.Item>
+            <Menu.Item name='Settings' href='/' >
+              <Icon name='setting' />
+              Settings
+            </Menu.Item>
+
+          </Menu>
+        </Segment>
+      </Container>
+      // <TopBar onSidebar={this.props.onSidebar}/>
+    );
+  }
+}
+
+
+

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

@@ -0,0 +1,42 @@
+import * as React from 'react';
+import { Menu, Header, Container } from 'semantic-ui-react';
+
+export class LogoBar extends React.Component<any, any> {
+
+  constructor(props: any, context: any) {
+    super(props, context);
+    this.state = {
+    };
+  }
+
+  public handleLogoClick = () => {
+    alert('handleLogoClick');
+  }
+
+  public handleNotiClick = () => {
+    alert('handleNotiClick');
+  }
+
+  public render(): JSX.Element {
+    return (
+      <Container fluid>
+        <Menu borderless secondary >
+          <Menu.Item
+            name='logo'
+            onClick={this.handleLogoClick}
+          >
+            <Header as='h3' icon='stack overflow' content='overFlow' />
+          </Menu.Item>
+          <Menu.Item
+            position='right'
+            icon='bell'
+            onClick={this.handleNotiClick}
+          />
+        </Menu>
+      </Container>
+    );
+  }
+}
+
+
+

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

@@ -0,0 +1,51 @@
+import * as React from 'react';
+import { Grid, Container, Breadcrumb, Header, Menu, Input, Segment } from 'semantic-ui-react';
+
+export class TitleBar extends React.Component<any, any> {
+
+  constructor(props: any, context: any) {
+    super(props, context);
+    this.state = {
+    };
+  }
+
+  public render(): JSX.Element {
+    let subMenus = [
+      {
+        'name': 'Menu1',
+        'href': '#/test2',
+      },
+      {
+        'name': 'Menu2',
+        'href': '#/test3',
+      },
+      {
+        'name': 'Menu3',
+        'href': '#/test4',
+      },
+    ];
+    return (
+      <Menu basic fluid style={{ 'border-left': '0px', 'border-right': '0px', 'box-shadow': 'none', 'border-radius': '0' }}>
+        <Menu.Item name='Page Title' style={{ width: '250px' }}>
+          <Header as='h3'>Page Title
+            <Header.Subheader>
+              <Breadcrumb size='mini' left bottom>
+                <Breadcrumb.Section link>Home</Breadcrumb.Section>
+                <Breadcrumb.Divider />
+                <Breadcrumb.Section link>Monitoring</Breadcrumb.Section>
+                <Breadcrumb.Divider />
+                <Breadcrumb.Section active>Probes</Breadcrumb.Section>
+              </Breadcrumb>
+            </Header.Subheader>
+          </Header>
+        </Menu.Item>
+        {subMenus.map((menu: any, index: number) => (
+          <Menu.Item key={index} name={menu.name} href={menu.href} />
+        ))}
+      </Menu>
+    );
+  }
+}
+
+
+