fixed sensor

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

@@ -3,45 +3,51 @@ import { 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 TitleBarContainer from './TitleBarContainer';
 import LeftMenu from './LeftMenu';
 import SensorSetup from '../monitoring/sensor/Setup';
-import SensorDetail from '../monitoring/sensor/Detail';
+import SensorDetailInfo from '../monitoring/sensor/DetailInfo';
+import SensorDetailItems from '../monitoring/sensor/DetailItems';
 
 export interface Props extends RouteComponentProps<any> {
 }
 export interface State {
+  currUrl: string;
 }
 
 class SensorDetailLayout extends React.Component<Props, State> {
 
   public constructor(props?: Props, context?: State) {
     super(props, context);
-
+    this.state = {
+      currUrl: this.props.location.pathname,
+    };
   }
 
   public render(): JSX.Element {
     const sub = [
-      {
+       {
         'name': 'Info',
-        'path': `${this.props.location.pathname}`,
+        'path': this.state.currUrl + 'info',
       },
       {
-        'name': 'History',
-        'path': `${this.props.location.pathname}/history`,
+        'name': 'Items',
+        'path': this.state.currUrl + '/items',
       },
     ];
     return (
-       <Container fluid>
+      <Container fluid>
         <LeftMenu />
         <Segment vertical style={{ margin: '0 0 0 210px', padding: '0' }}>
           <Header />
-          <TitleBar title='Probe Details' sub={sub} />
+          <TitleBarContainer sub={sub} location={this.props.location.pathname} />
+          {/*<TitleBar title='Sensor Details' sub={sub} />*/}
           <Switch>
-            <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} />
+            <Route exact={true} path={`${this.props.match.url}/:id/`} component={SensorDetailInfo} />
+            <Route exact={true} path={`${this.props.match.url}/:id/info`} component={SensorDetailInfo} />
+            <Route exact={true} path={`${this.props.match.url}/:id/items`} component={SensorDetailItems} />
+            {/*<Route path={`${this.props.match.url}/:id/history/`} component={EmailConfirm}/>*/}
+            <Route exact={true} path={`${this.props.match.url}/setup`} component={SensorSetup} />
           </Switch>
           <Footer />
         </Segment>

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

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

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

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

src/ts/@overflow/sensor/react/SensorDetailInfo.tsx

@@ -0,0 +1,28 @@
+import { connect, Dispatch } from 'react-redux';
+import {
+  SensorDetailInfo,
+  SensorDetailInfoStateProps,
+  SensorDetailInfoDispatchProps,
+} from './components/SensorDetailInfo';
+import State from '../redux/state/Read';
+
+import * as ReadActions from '../redux/action/read';
+import Target from '@overflow/target/api/model/Target';
+import Sensor from '@overflow/sensor/api/model/Sensor';
+
+export function mapStateToProps(state: any): SensorDetailInfoStateProps {
+  return {
+    sensor:state.sensor,
+  };
+}
+
+export function mapDispatchToProps(dispatch: Dispatch<any>): SensorDetailInfoDispatchProps {
+  return {
+    onRead: (id: number) => {
+      dispatch(ReadActions.request(id));
+    },
+  };
+}
+
+
+export default connect(mapStateToProps, mapDispatchToProps)(SensorDetailInfo);

src/ts/@overflow/sensor/react/SensorDetailItems.tsx

@@ -0,0 +1,26 @@
+import { connect, Dispatch } from 'react-redux';
+import {
+  SensorDetailItems,
+  StateProps as SensorDetailItemsStateProps,
+  DispatchProps as SensorDetailItemsDispatchProps,
+} from './components/SensorDetailItems';
+import State from '../redux/state/ItemRead';
+
+import * as ItemReadActions from '../redux/action/item_read';
+
+export function mapStateToProps(state: any): SensorDetailItemsStateProps {
+  return {
+
+  };
+}
+
+export function mapDispatchToProps(dispatch: Dispatch<any>): SensorDetailItemsDispatchProps {
+  return {
+    onRead: (id: number) => {
+      dispatch(ItemReadActions.request(id));
+    },
+  };
+}
+
+
+export default connect(mapStateToProps, mapDispatchToProps)(SensorDetailItems);

src/ts/@overflow/sensor/react/components/SensorDetail.tsx

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { Button, Table, Label, Segment, Header, Container } from 'semantic-ui-react';
 import { DetailContainer } from '@overflow/commons/react/component/DetailContainer';
-import { SensorItems } from './SensorItems';
+import { SensorDetailItems } from './SensorDetailItems';
 import Sensor from '@overflow/sensor/api/model/Sensor';
 import Probe from '@overflow/probe/api/model/Probe';
 
@@ -37,7 +37,7 @@ export class SensorDetail extends React.Component<SensorDetailProps, SensorDetai
   public render(): JSX.Element {
     const items = [
       { name: 'Info', child: <SensorBasicInfo sensor={this.props.sensor} /> },
-      { name: 'Sensor Items', child: <SensorItems sensor={this.props.sensor} /> },
+      { name: 'Sensor Items', child: <SensorDetailItems sensor={this.props.sensor} /> },
     ];
     const data = { 'probe': this.props.probe };
     return (

src/ts/@overflow/sensor/react/components/SensorDetailInfo.tsx

@@ -0,0 +1,160 @@
+import * as React from 'react';
+import { Button, Table, Label, Segment, Header, Container } from 'semantic-ui-react';
+import { DetailContainer } from '@overflow/commons/react/component/DetailContainer';
+import { SensorItems } from './SensorItems';
+import Sensor from '@overflow/sensor/api/model/Sensor';
+import Probe from '@overflow/probe/api/model/Probe';
+
+
+export interface SensorDetailInfoStateProps {
+  sensor?: Sensor;
+  probe?: Probe;
+}
+
+export interface SensorDetailInfoDispatchProps {
+  onRead?(id: number): void;
+}
+
+export type SensorDetailInfoProps = SensorDetailInfoStateProps & SensorDetailInfoDispatchProps;
+
+export interface SensorDetailInfoState {
+  sensor: Sensor;
+}
+
+export class SensorDetailInfo extends React.Component<SensorDetailInfoProps, SensorDetailInfoState> {
+
+  constructor(props: SensorDetailInfoProps, context: SensorDetailInfoState) {
+    super(props, context);
+    this.state = {
+      sensor: SensorDetailJson,
+    };
+  }
+
+  public handleStartStop(event: any, data: any): void {
+    console.log(event);
+  }
+  public handleDiscovery(event: any, data: any): void {
+    alert('Discovery');
+  }
+
+  public handleBack(event: any, data: any): void {
+    this.props.onBack();
+  }
+
+  public componentWillMount(): void {
+    console.log('');
+  }
+
+
+  public showStartStopBtn(): JSX.Element {
+    if (this.state.sensor.status.name === 'STARTED') {
+      return <Button content='Stop' icon='stop' labelPosition='left' color={'blue'} floated={'right'} onClick={this.handleStartStop} />;
+    } else {
+      return <Button content='Start' icon='play' labelPosition='left' color={'blue'} floated={'right'} onClick={this.handleStartStop} />;
+    }
+  }
+
+  public render(): JSX.Element {
+    return (
+      <Container fluid>
+        <Header as='h3' dividing>Sensor Details</Header>
+
+        <Table celled>
+          <Table.Body>
+            <Table.Row>
+              <Table.Cell>
+                <Header size='small'>Name</Header>
+              </Table.Cell>
+              <Table.Cell>{this.state.sensor.target.infra.type.name}</Table.Cell>
+            </Table.Row>
+            <Table.Row>
+              <Table.Cell>
+                <Header size='small'>Status</Header>
+              </Table.Cell>
+              <Table.Cell>{this.state.sensor.status.name}</Table.Cell>
+            </Table.Row>
+            <Table.Row>
+              <Table.Cell>
+                <Header size='small'>Crawler</Header>
+              </Table.Cell>
+              <Table.Cell>{this.state.sensor.crawler.name}</Table.Cell>
+            </Table.Row>
+            <Table.Row>
+              <Table.Cell>
+                <Header size='small'>Item Count</Header>
+              </Table.Cell>
+              <Table.Cell>{44}</Table.Cell>
+            </Table.Row>
+            <Table.Row>
+              <Table.Cell>
+                <Header size='small'>Created at</Header>
+              </Table.Cell>
+              <Table.Cell>{this.state.sensor.createDate}</Table.Cell>
+            </Table.Row>
+            <Table.Row>
+              <Table.Cell>
+                <Header size='small'>Created by</Header>
+              </Table.Cell>
+              <Table.Cell>test Snoop</Table.Cell>
+            </Table.Row>
+          </Table.Body>
+        </Table>
+
+        <Button content='Back' icon='left arrow' labelPosition='left' onClick={this.handleBack.bind(this)} />
+        <Button content='Discovery' icon='search' labelPosition='left' floated={'right'} positive onClick={this.handleDiscovery} />
+        {/*{this.showStartStopBtn()}*/}
+
+      </Container>
+    );
+  }
+}
+
+
+const SensorDetailJson: any = {
+  'id': 1,
+  'createDate': 1498475947009,
+  'description': 'My sensor',
+  'status': {
+    'id': 1,
+    'name': 'RUNNING',
+  },
+  'target': {
+    'id': 1,
+    'createDate': 1498448242854,
+    'probe': {
+      'id': 1,
+      'status': {
+        'id': 1,
+        'name': 'INITIAL',
+      },
+      'description': 'snoop probe',
+      'createDate': 1498448699813,
+      'lastPollingDate': null,
+      'nextPollingDate': null,
+      'domain': {
+        'id': 1,
+        'name': 'overFlow\'s domain',
+        'createDate': 1498443944866,
+      },
+      'probeKey': 'a1e1710557de11e78799080027658d13',
+      'encryptionKey': '9c8d41ab57de11e7a2c9080027658d13',
+    },
+    'infra': {
+      'id': 1,
+      'type': {
+        'id': 1,
+        'name': 'MACHINE',
+        'createDate': 1498379502770,
+      },
+      'childId': 0,
+      'createDate': 1498446731809,
+    },
+  },
+  'crawler': {
+    'id': 1,
+    'createDate': 1498794968791,
+    'name': 'ACTIVEDIRECTORY_CRAWLER',
+    'description': 'ACTIVEDIRECTORY',
+  },
+  'crawlerInputItems': null,
+};

src/ts/@overflow/sensor/react/components/SensorDetailItems.tsx

@@ -4,16 +4,21 @@ import { Table, Button, Header, Container } from 'semantic-ui-react';
 import Sensor from '@overflow/sensor/api/model/Sensor';
 import SensorItem from '@overflow/sensor/api/model/SensorItem';
 
-export interface Props {
+export interface StateProps {
   sensor?: Sensor;
 }
 
+export interface DispatchProps {
+}
+
+export type Props = StateProps & DispatchProps;
+
 export interface State {
   sensorItemList: SensorItem[];
 }
 
 
-export class SensorItems extends React.Component<Props, State> {
+export class SensorDetailItems extends React.Component<Props, State> {
 
   constructor(props: Props, context: State) {
     super(props, context);

src/ts/@overflow/sensor/redux/action/item_read.ts

@@ -12,13 +12,13 @@ export const REQUEST_SUCCESS: REQUEST_SUCCESS = '@overflow/sensor_item/read/REQU
 export const REQUEST_FAILURE: REQUEST_FAILURE = '@overflow/sensor_item/read/REQUEST_FAILURE';
 
 // Action Creater
-export type request = (id: string) => Action<ItemReadPayload>;
+export type request = (id: number) => Action<ItemReadPayload>;
 export type requestSuccess = (sensorItem: SensorItem) => Action<SensorItem>;
 export type requestFailure = (error: Error) => Action;
 
 
 
-export const request: request = (id: string): Action<ItemReadPayload> => {
+export const request: request = (id: number): Action<ItemReadPayload> => {
   return {
     type: REQUEST,
     payload: {

src/ts/@overflow/sensor/redux/payload/ItemReadPayload.ts

@@ -1,5 +1,5 @@
 interface ItemReadPayload {
-    id: string;
+    id: number;
 }
 
 export default ItemReadPayload;

src/ts/@overflow/sensor/redux/state/ItemRead.ts

@@ -0,0 +1,12 @@
+
+export interface State {
+  readonly isGetSensorItem: boolean;
+  readonly error?: Error;
+}
+
+export const defaultState: State = {
+  isGetSensorItem: undefined,
+  error: undefined,
+};
+
+export default State;