table sort file create and modify

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

@@ -7,9 +7,6 @@ import SensorDetailLayout from './layout/SensorDetailLayout';
 import TargetDetailLayout from './layout/TargetDetailLayout';
 import AppLayout from './layout/AppLayout';
 import ErrorLayout from './layout/ErrorLayout';
-
-
-
 import TempLayout from './layout/TempLayout';
 
 export interface Props {
@@ -31,6 +28,7 @@ class App extends React.Component<Props, State> {
         <Route path='/probe' component={ProbeDetailLayout}/>
         <Route path='/sensor' component={SensorDetailLayout}/>
         <Route path='/target' component={TargetDetailLayout}/>
+        <Route path='/temp' component={TempLayout}/>
         <Route path='/' component={AppLayout}/>
       </Switch>
     );

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

@@ -2,10 +2,7 @@ import * as React from 'react';
 import { connect, Dispatch } from 'react-redux';
 import { push as routerPush } from 'react-router-redux';
 
-import { Container, Menu, Dropdown, Segment, Icon, Header, Image } from 'semantic-ui-react';
-
-import { LogoBar } from './LogoBar';
-import { TitleBar } from './TitleBar';
+import { Menu, Dropdown, Icon, Header, Image } from 'semantic-ui-react';
 
 export interface StateProps {
 }
@@ -99,14 +96,7 @@ class LeftMenu extends React.Component<Props, State> {
               <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='#/test24'>Discovery</Dropdown.Item>
-                  <Dropdown.Item href='#/test7'>Tree</Dropdown.Item>
-                  <Dropdown.Item href='#/test8'>TableExampleSortable</Dropdown.Item>
+                  <Dropdown.Item href='#/tablesort'>TableSortView</Dropdown.Item>
                   <Dropdown.Item href='#/sensor_list'>SensorList</Dropdown.Item>
                   <Dropdown.Item href='#/sensor_setup'>SensorSetup</Dropdown.Item>
                 </Dropdown.Menu>

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

@@ -1,17 +1,11 @@
 import * as React from 'react';
 import { RouteComponentProps, RouteProps, Route, Switch } from 'react-router-dom';
-import { Container, Menu, Sidebar, Segment, Icon, Breadcrumb, Grid, Dropdown } from 'semantic-ui-react';
+import { Container, Segment } 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';
-import SensorList from '../monitoring/sensor/List';
-import SensorSetup from '../monitoring/sensor/Setup';
-import Discovery from '../../../temp/react/components/Discovery';
-import TargetList from '../infrastructure/target/List';
-import TargetDetail from '../infrastructure/target/Detail';
+import TableSortView from '../../../temp/react/components/TableSortView';
 
 export interface Props extends RouteComponentProps<any> {
 }
@@ -41,15 +35,8 @@ export class AppLayout extends React.Component<Props, State> {
           <LeftMenu />
           <Segment vertical style={{ margin: '0 0 0 210px', padding: '0' }}>
             <Header />
-
-            <Route exact path={`${this.props.match.url}/probe`} component={ProbeList} />
-            <Route exact path={`${this.props.match.url}/probe/:id`} component={ProbeDetail} />
-            <Route exact path={`${this.props.match.url}/sensor_list`} component={SensorList} />
-            <Route exact path={`${this.props.match.url}/sensor_setup`} component={SensorSetup} />
-            <Route exact path={`${this.props.match.url}/target`} component={TargetList} />
-            <Route exact path={`${this.props.match.url}/target/:id`} component={TargetDetail} />
-            <Route exact path={`${this.props.match.url}/discovery`} component={Discovery} />
-
+            <div>ddddddddddddd</div>
+            <Route exact path={`${this.props.match.url}/tablesort`} component={TableSortView} />
             <Footer />
           </Segment>
         </Container >

src/ts/@overflow/temp/react/components/TableSort.tsx

@@ -8,7 +8,7 @@ export interface StateProps {
 }
 
 export interface DispatchProps {
-  columnClick():void;
+  columnClick?(col:any):void;
 }
 
 export type Props = StateProps & DispatchProps;
@@ -44,7 +44,7 @@ const tableData = [
   },
   {
     'id': '22',
-    'displayName': '192.168.1.105\'s probe',
+    'displayName': '192.168.1.102\'s probe',
     'cidr': '192.168.1.0/24',
     'targetCount': '20',
     'sensorCount': '50',
@@ -54,7 +54,7 @@ const tableData = [
   {
     'id': '33',
     'cidr': '192.168.1.0/24',
-    'displayName': '192.168.1.105\'s probe',
+    'displayName': '192.168.1.101\'s probe',
     'targetCount': '20',
     'sensorCount': '60',
     'probeKey': '1AGBLKDFJ2452ASDGFL2KWJLKSDJ',

src/ts/@overflow/temp/react/components/TableSortContainer.tsx

@@ -0,0 +1,25 @@
+import { connect, Dispatch } from 'react-redux';
+import {
+  TableSort,
+  StateProps as StateProps,
+  DispatchProps as DispatchProps,
+} from './TableSort';
+
+import { push as routerPush } from 'react-router-redux';
+
+
+export function mapStateToProps(state: any): StateProps {
+  return {
+    jsonObj:state,
+  };
+}
+
+export function mapDispatchToProps(dispatch: Dispatch<any>): DispatchProps {
+  return {
+    columnClick: (col: any) => {
+      console.log(col);
+    },
+  };
+}
+
+export default connect(mapStateToProps, mapDispatchToProps)(TableSort);

src/ts/@overflow/temp/react/components/TableSortView.tsx

@@ -0,0 +1,26 @@
+import * as React from 'react';
+import { RouteComponentProps } from 'react-router';
+import TableSortContainer from '@overflow/temp/react/components/TableSortContainer';
+import WebSocketRPC from '@overflow/commons/websocket/WebSocketRPC';
+import AppContext from '@overflow/commons/context';
+import inject from '@overflow/commons/context/decorator/inject';
+
+class TableSortView extends React.Component<RouteComponentProps<object>, object> {
+
+  private client: WebSocketRPC;
+
+  public constructor(props?: RouteComponentProps<object>, context?: object) {
+    super(props, context);
+
+    let con = AppContext.get<WebSocketRPC>();
+  }
+
+  public render(): JSX.Element {
+    return (
+      <TableSortContainer/>
+    );
+  }
+}
+
+
+export default TableSortView;