probe-host

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

@@ -7,6 +7,7 @@ import TitleBarContainer from './TitleBarContainer';
 import LeftMenu from './LeftMenu';
 
 import ProbeDetail from '../../views/monitoring/probe/Detail';
+import ProbeHost from '../../views/monitoring/probe/Host';
 import ProbeHistory from '../../views/monitoring/probe/History';
 import TargetList from '../../views/infrastructure/target/List';
 
@@ -32,6 +33,10 @@ export class ProbeDetailLayout extends React.Component<Props, State> {
         'name': 'Info',
         'path': this.state.currUrl,
       },
+      {
+        'name': 'Host',
+        'path': this.state.currUrl + '/host',
+      },
       {
         'name': 'History',
         'path': this.state.currUrl + '/history',
@@ -49,6 +54,7 @@ export class ProbeDetailLayout extends React.Component<Props, State> {
           <TitleBarContainer sub={sub} location={this.props.location.pathname}/>
           <Switch>
             <Route exact={true} path={`${this.props.match.url}/:id`} component={ProbeDetail} />
+            <Route exact={true} path={`${this.props.match.url}/:id/host`} component={ProbeHost} />
             <Route exact={true} path={`${this.props.match.url}/:id/history`} component={ProbeHistory} />
             <Route exact={true} path={`${this.props.match.url}/:id/targets`} component={TargetList} />
           </Switch>

src/ts/@overflow/app/views/monitoring/probe/Host.tsx

@@ -0,0 +1,26 @@
+import * as React from 'react';
+import { RouteComponentProps } from 'react-router';
+import ProbeHostContainer from '@overflow/probe/react/ProbeHost';
+import WebSocketRPC from '@overflow/commons/websocket/WebSocketRPC';
+import AppContext from '@overflow/commons/context';
+import inject from '@overflow/commons/context/decorator/inject';
+
+class ProbeHost 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 (
+        <ProbeHostContainer params={this.props.match.params}/>
+    );
+  }
+}
+
+
+export default ProbeHost;

src/ts/@overflow/probe/react/ProbeDetail.tsx

@@ -5,7 +5,6 @@ import {
     DispatchProps as ProbeDetailDispatchProps,
 } from './components/ProbeDetailInfo';
 import { push as routerPush } from 'react-router-redux';
-import Probe from '@overflow/probe/api/model/Probe';
 
 
 export function mapStateToProps(state: any, props: any): ProbeDetailStateProps {
@@ -16,9 +15,6 @@ export function mapStateToProps(state: any, props: any): ProbeDetailStateProps {
 
 export function mapDispatchToProps(dispatch: Dispatch<any>): ProbeDetailDispatchProps {
     return {
-      // onDiscoverySelect: ( id: string) => {
-      //   dispatch(routerPush('/discovery/' + id ));
-      // },
     };
 }
 

src/ts/@overflow/probe/react/ProbeHost.tsx

@@ -0,0 +1,21 @@
+import { connect, Dispatch } from 'react-redux';
+import {
+    ProbeHost,
+    StateProps as ProbeDetailStateProps,
+    DispatchProps as ProbeDetailDispatchProps,
+} from './components/ProbeHost';
+import { push as routerPush } from 'react-router-redux';
+
+
+export function mapStateToProps(state: any, props: any): ProbeDetailStateProps {
+    return {
+        id: props.params.id,
+    };
+}
+
+export function mapDispatchToProps(dispatch: Dispatch<any>): ProbeDetailDispatchProps {
+    return {
+    };
+}
+
+export default connect(mapStateToProps, mapDispatchToProps)(ProbeHost);

src/ts/@overflow/probe/react/components/ProbeDetailInfo.tsx

@@ -7,7 +7,6 @@ import {
   Header,
   Container,
 } from 'semantic-ui-react';
-// import { TargetTable } from '@overflow/target/react/components/TargetList';
 import Probe from '@overflow/probe/api/model/Probe';
 import { Discovery } from '../../../discovery/react/components/Discovery';
 
@@ -22,8 +21,7 @@ export interface DispatchProps {
 export type Props = StateProps & DispatchProps;
 
 export interface State {
-  probe: Probe;
-  id: string;
+  probe: any; // todo. fix to Probe
   isDiscovery: boolean;
 }
 
@@ -34,15 +32,41 @@ export class ProbeDetailInfo extends React.Component<Props, State> {
     super(props, context);
     this.state = {
       probe: null,
-      id: '44',
       isDiscovery: false,
     };
   }
 
   public componentWillMount(): void {
+
+    // todo. getting probe by probeId
+    let p = {
+      'id': '11',
+      'status': {
+        'name': 'STARTED',
+      },
+      'domain': {
+        'name': 'insanity\'s domain',
+      },
+      'displayName': '192.168.1.105\'s probe',
+      'network': {
+        'cidr': '192.168.1.0/24',
+        'ip': '192.168.1.105',
+        'mac': 'ab:cd:ef:gh:ij',
+      },
+      'targetCount': '20',
+      'sensorCount': '30',
+      'probeKey': '1AGBLKDFJ2452ASDGFL2KWJLKSDJ',
+      'description': 'description1111111111',
+      'createDate': '2017-01-01',
+      'authorizeDate': '2017-01-01',
+      'restartDate': '2017-01-01',
+      'authorizeMember': {
+        'name': 'insanity',
+      },
+    };
+
     this.setState({
-      probe: null,
-      id: '44',
+      probe: p,
       isDiscovery: false,
     });
   }
@@ -53,16 +77,7 @@ export class ProbeDetailInfo extends React.Component<Props, State> {
 
   public handleDiscovery = (event: any, data: any): void => {
     console.log(event);
-    this.setState({isDiscovery: true});
-    // // let probeId = String(this.state.id);
-    // // this.props.onDiscoverySelect(this.state.id);
-    // if (this.state.isDiscovery) {
-
-    //   // this.setState({isDiscovery: false});
-    // } else {
-    //   // this.setState({isDiscovery: true});
-    //   return null;
-    // }
+    this.setState({ isDiscovery: true });
   }
 
   public renderDiscovery(): JSX.Element {
@@ -83,39 +98,45 @@ export class ProbeDetailInfo extends React.Component<Props, State> {
           <Table.Body>
             <Table.Row>
               <Table.Cell collapsing>
-                <Header size='small'>Domain</Header>
+                <Header size='small'>Name</Header>
               </Table.Cell>
-              <Table.Cell>todo</Table.Cell>
+              <Table.Cell>{this.state.probe.displayName}</Table.Cell>
             </Table.Row>
-            <Table.Row>
+             <Table.Row>
               <Table.Cell collapsing>
                 <Header size='small'>Status</Header>
               </Table.Cell>
-              <Table.Cell>todo</Table.Cell>
+              <Table.Cell>{this.state.probe.status.name}</Table.Cell>
             </Table.Row>
             <Table.Row>
               <Table.Cell collapsing>
-                <Header size='small'>Host IP</Header>
+                <Header size='small'>Created at</Header>
               </Table.Cell>
-              <Table.Cell>todo</Table.Cell>
-            </Table.Row>
-            <Table.Row>
-              <Table.Cell collapsing>
-                <Header size='small'>Host Name</Header>
-              </Table.Cell>
-              <Table.Cell>todo</Table.Cell>
+              <Table.Cell>{this.state.probe.createDate}</Table.Cell>
             </Table.Row>
             <Table.Row>
               <Table.Cell collapsing>
                 <Header size='small'>Authorized at</Header>
               </Table.Cell>
-              <Table.Cell>todo</Table.Cell>
+              <Table.Cell>{this.state.probe.authorizeDate}</Table.Cell>
+            </Table.Row>
+            <Table.Row>
+              <Table.Cell collapsing>
+                <Header size='small'>Authorized by</Header>
+              </Table.Cell>
+              <Table.Cell>{this.state.probe.authorizeMember.name}</Table.Cell>
+            </Table.Row>
+            <Table.Row>
+              <Table.Cell collapsing>
+                <Header size='small'>Uptime</Header>
+              </Table.Cell>
+              <Table.Cell>todo.</Table.Cell>
             </Table.Row>
             <Table.Row>
               <Table.Cell collapsing>
                 <Header size='small'>Description</Header>
               </Table.Cell>
-              <Table.Cell>todo</Table.Cell>
+              <Table.Cell>{this.state.probe.description}</Table.Cell>
             </Table.Row>
           </Table.Body>
           <Table.Footer>
@@ -134,14 +155,5 @@ export class ProbeDetailInfo extends React.Component<Props, State> {
     );
   }
 
-  private showDiscovery = (): JSX.Element => {
-    if (!this.state.isDiscovery) {
-      this.setState({ isDiscovery: true });
-      return <Discovery />;
-    } else {
-      this.setState({ isDiscovery: false });
-      return null;
-    }
-  }
 }
 

src/ts/@overflow/probe/react/components/ProbeHost.tsx

@@ -0,0 +1,57 @@
+import * as React from 'react';
+import {
+  Button,
+  Table,
+  Label,
+  Segment,
+  Header,
+  Container,
+} from 'semantic-ui-react';
+import Probe from '@overflow/probe/api/model/Probe';
+
+export interface StateProps {
+  id: string;
+}
+
+export interface DispatchProps {
+}
+
+export type Props = StateProps & DispatchProps;
+
+export interface State {
+  probe: any; // todo. fix to Probe
+}
+
+
+export class ProbeHost extends React.Component<Props, State> {
+
+  constructor(props: Props, context: State) {
+    super(props, context);
+    this.state = {
+      probe: null,
+    };
+  }
+
+  public componentWillMount(): void {
+    console.log(this.props.id);
+  }
+
+
+  public render(): JSX.Element {
+    return (
+      <Container>
+        <Table celled={false}>
+          <Table.Body>
+            <Table.Row>
+              <Table.Cell collapsing>
+                <Header size='small'>Name</Header>
+              </Table.Cell>
+              <Table.Cell>todo</Table.Cell>
+            </Table.Row>
+          </Table.Body>
+        </Table>
+      </Container>
+    );
+  }
+}
+