infra child

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

@@ -20,6 +20,8 @@ import SensorItemReadAllBySensorReducer from '@overflow/sensor/redux/reducer/ite
 
 import readMachineReducer from '@overflow/infra/redux/reducer/machine_read';
 import readHostReducer from '@overflow/infra/redux/reducer/host_read';
+import readOSReducer from '@overflow/infra/redux/reducer/os_read';
+import readServiceReducer from '@overflow/infra/redux/reducer/service_read';
 
 import CrawlerReadAllByTargetReducer from '@overflow/meta/redux/reducer/crawler_read_all_by_target';
 import CrawlerAuthInputsReducer from '@overflow/meta/redux/reducer/crawler_auth_inputs';
@@ -42,7 +44,7 @@ export interface RPCConfig {
   url: string;
 }
 const rpcConfig: RPCConfig = {
-  url: 'ws://127.0.0.1:18081/rpc',
+  url: 'ws://192.168.1.209:18081/rpc',
 };
 
 // Redux Configuration
@@ -79,6 +81,8 @@ const reduxConfig: ReduxConfig = {
     CrawlerAuthInputsReducer,
     MetaSensorItemReadAllReducer,
     MetaSensorItemTypeReadAllReducer,
+    readOSReducer,
+    readServiceReducer,
   ],
   sagaWatchers: [
     AsyncRequest,

src/ts/@overflow/infra/react/InfraDetail.tsx

@@ -1,53 +0,0 @@
-import { connect, Dispatch } from 'react-redux';
-import {
-  InfraDetail,
-  StateProps as InfraDetailStateProps,
-  DispatchProps as InfraDetailDispatchProps,
-} from './components/InfraDetail';
-
-import MetaInfraType from '@overflow/meta/api/model/MetaInfraType';
-import * as ReadActions from '../redux/action/read';
-import * as asyncRequestActions from '@overflow/commons/redux/action/asyncRequest';
-
-export function mapStateToProps(state: any, props: any): InfraDetailStateProps {
-  return {
-    infra: props.infra,
-    machine: state.machine,
-    host: state.host,
-    os: state.os,
-    osApplication: state.osApplication,
-    osDaemon: state.osDaemon,
-    osPort: state.osPort,
-    service: state.service,
-  };
-}
-
-export function mapDispatchToProps(dispatch: Dispatch<any>): InfraDetailDispatchProps {
-  return {
-    onReadInfraMachine: (id: string) => {
-      dispatch(asyncRequestActions.request('InfraMachineService', 'read', ReadActions.REQUEST, id));
-    },
-    onReadInfraHost: (id: string) => {
-      dispatch(asyncRequestActions.request('InfraHostService', 'read', ReadActions.REQUEST, id));
-    },
-    onReadInfraOS: (id: string) => {
-      dispatch(asyncRequestActions.request('InfraOSService', 'read', ReadActions.REQUEST, id));
-    },
-    onReadInfraOSApplication: (id: string) => {
-      dispatch(asyncRequestActions.request('InfraOSApplicationService', 'read', ReadActions.REQUEST, id));
-    },
-    onReadInfraOSDaemon: (id: string) => {
-      dispatch(asyncRequestActions.request('InfraOSDaemonService', 'read', ReadActions.REQUEST, id));
-    },
-    onReadInfraOSPort: (id: string) => {
-      dispatch(asyncRequestActions.request('InfraOSPortService', 'read', ReadActions.REQUEST, id));
-    },
-    onReadInfraService: (id: string) => {
-      dispatch(asyncRequestActions.request('InfraServiceService', 'read', ReadActions.REQUEST, id));
-    },
-  };
-}
-
-
-
-export default connect(mapStateToProps, mapDispatchToProps)(InfraDetail);

src/ts/@overflow/infra/react/components/InfraDetail.tsx

@@ -1,246 +0,0 @@
-import * as React from 'react';
-import { Button, Table, Header, Container } from 'semantic-ui-react';
-import { SensorList } from '@overflow/sensor/react/components/SensorList';
-import { DetailContainer } from '@overflow/commons/react/component/DetailContainer';
-
-import Target from '@overflow/target/api/model/Target';
-import MetaInfraType from '@overflow/meta/api/model/MetaInfraType';
-import Infra from '@overflow/infra/api/model/Infra';
-import InfraHost from '@overflow/infra/api/model/InfraHost';
-import InfraMachine from '@overflow/infra/api/model/InfraMachine';
-import InfraOS from '@overflow/infra/api/model/InfraOS';
-import InfraOSApplication from '@overflow/infra/api/model/InfraOSApplication';
-import InfraOSDaemon from '@overflow/infra/api/model/InfraOSDaemon';
-import InfraOSPort from '@overflow/infra/api/model/InfraOSPort';
-import InfraService from '@overflow/infra/api/model/InfraService';
-
-import * as Utils from '@overflow/commons/util/Utils';
-
-export interface StateProps {
-  infra?: Infra;
-  // children of Infra
-  machine?: InfraMachine;
-  host?: InfraHost;
-  os?: InfraOS;
-  osApplication?: InfraOSApplication;
-  osDaemon?: InfraOSDaemon;
-  osPort?: InfraOSPort;
-  service?: InfraService;
-}
-
-export interface DispatchProps {
-  onReadInfraMachine?(id: string): void;
-  onReadInfraHost?(id: string): void;
-  onReadInfraOS?(id: string): void;
-  onReadInfraOSApplication?(id: string): void;
-  onReadInfraOSDaemon?(id: string): void;
-  onReadInfraOSPort?(id: string): void;
-  onReadInfraService?(id: string): void;
-}
-
-
-export type Props = StateProps & DispatchProps;
-
-export interface State {
-}
-
-export class InfraDetail extends React.Component<Props, State> {
-
-  constructor(props: Props, context: State) {
-    super(props, context);
-    this.state = {
-    };
-  }
-
-  public componentWillMount(): void {
-    let infraType = this.props.infra.infraType.id;
-    let id = String(this.props.infra.childId);
-    switch (infraType) {
-      case 1: {
-        this.props.onReadInfraMachine(id);
-        break;
-      }
-      case 2: {
-        this.props.onReadInfraHost(id);
-        break;
-      }
-      case 3: {
-        this.props.onReadInfraOS(id);
-        break;
-      }
-      case 4: {
-        this.props.onReadInfraOSApplication(id);
-        break;
-      }
-      case 5: {
-        this.props.onReadInfraOSDaemon(id);
-        break;
-      }
-      case 6: {
-        this.props.onReadInfraOSPort(id);
-        break;
-      }
-      case 7: {
-        this.props.onReadInfraService(id);
-        break;
-      }
-      default: {
-        break;
-      }
-    }
-  }
-
-  public handleRemoveTarget(): void {
-    alert('remove');
-  }
-
-  public render(): JSX.Element {
-    if (this.props.machine === undefined
-      && this.props.host === undefined
-      && this.props.os === undefined
-      && this.props.osApplication === undefined
-      && this.props.osDaemon === undefined
-      && this.props.osPort === undefined
-      && this.props.service === undefined
-    ) {
-      return null;
-    }
-    let infraType = this.props.infra.infraType.id;
-    let child = null;
-    switch (infraType) {
-      case 1: {
-        child = <InfraTable tableDatas={this.ConvertTableDataForMachine(this.props.machine)} />;
-        break;
-      }
-      case 2: {
-        child = <InfraTable tableDatas={this.ConvertTableDataForHost(this.props.host)} />;
-        break;
-      }
-      case 3: {
-        // this.props.onReadInfraOS(id);
-        break;
-      }
-      case 4: {
-        // this.props.onReadInfraOSApplication(id);
-        break;
-      }
-      case 5: {
-        // this.props.onReadInfraOSDaemon(id);
-        break;
-      }
-      case 6: {
-        // this.props.onReadInfraOSPort(id);
-        break;
-      }
-      case 7: {
-        // this.props.onReadInfraService(id);
-        break;
-      }
-      default: {
-        break;
-      }
-    }
-
-    return (
-      <Container fluid>
-        {child}
-      </Container>
-    );
-  }
-
-  private ConvertTableDataForHost(infraChild: InfraHost): Array<TableData> {
-    let NewTableDatas: Array<TableData>;
-
-    NewTableDatas = [{
-      header: 'IP',
-      contents: Utils.int2ip(infraChild.ip),
-    },
-    {
-      header: 'MAC',
-      contents: Utils.intToMac(infraChild.mac),
-    },
-    ];
-
-    return NewTableDatas;
-  }
-
-  private ConvertTableDataForMachine(infraChild: InfraMachine): Array<TableData> {
-
-    let NewTableDatas: Array<TableData>;
-
-    NewTableDatas = [{
-      header: 'Meta',
-      contents: infraChild.meta,
-    },
-    ];
-
-    return NewTableDatas;
-  }
-
-  private ConvertTableDataForOS(infraChild: InfraOS): Array<TableData> {
-
-    let NewTableDatas: Array<TableData>;
-
-    NewTableDatas = [
-      {
-        header: 'Meta',
-        contents: infraChild.meta,
-      },
-      {
-        header: 'Vendor',
-        contents: infraChild.vendor.name,
-      },
-    ];
-
-    return NewTableDatas;
-  }
-
-
-}
-
-export interface TableData {
-  header: string;
-  contents: any;
-}
-
-export interface InfraTableProps {
-  tableDatas: Array<TableData>;
-}
-
-export class InfraTable extends React.Component<InfraTableProps, any> {
-  constructor(props: InfraTableProps, context: any) {
-    super(props, context);
-    this.state = {
-    };
-  }
-
-  public showInfra(): JSX.Element[] {
-    let elems: Array<JSX.Element> = new Array();
-    let i = 0;
-    for (let data of this.props.tableDatas) {
-      elems.push(
-        <Table.Row key={i++}>
-          <Table.Cell collapsing>
-            <Header size='small'>{data.header}</Header>
-          </Table.Cell>
-          <Table.Cell>
-            {data.contents}
-          </Table.Cell>
-        </Table.Row>,
-      );
-    }
-
-    return elems;
-  }
-
-  public render(): JSX.Element {
-    return (
-      <Table celled={false}>
-        <Table.Body>
-          {this.showInfra()}
-        </Table.Body>
-      </Table>
-    );
-  }
-}
-

src/ts/@overflow/infra/redux/action/host_read.ts

@@ -0,0 +1,8 @@
+// Action Type
+export type REQUEST = '@overflow/infra/host_read/REQUEST';
+export type REQUEST_SUCCESS = '@overflow/infra/host_read/REQUEST/SUCCESS';
+export type REQUEST_FAILURE = '@overflow/infra/host_read/REQUEST/FAILURE';
+
+export const REQUEST: REQUEST = '@overflow/infra/host_read/REQUEST';
+export const REQUEST_SUCCESS: REQUEST_SUCCESS = '@overflow/infra/host_read/REQUEST/SUCCESS';
+export const REQUEST_FAILURE: REQUEST_FAILURE = '@overflow/infra/host_read/REQUEST/FAILURE';

src/ts/@overflow/infra/redux/action/machine_read.ts

@@ -0,0 +1,8 @@
+// Action Type
+export type REQUEST = '@overflow/infra/machine_read/REQUEST';
+export type REQUEST_SUCCESS = '@overflow/infra/machine_read/REQUEST/SUCCESS';
+export type REQUEST_FAILURE = '@overflow/infra/machine_read/REQUEST/FAILURE';
+
+export const REQUEST: REQUEST = '@overflow/infra/machine_read/REQUEST';
+export const REQUEST_SUCCESS: REQUEST_SUCCESS = '@overflow/infra/machine_read/REQUEST/SUCCESS';
+export const REQUEST_FAILURE: REQUEST_FAILURE = '@overflow/infra/machine_read/REQUEST/FAILURE';

src/ts/@overflow/infra/redux/action/os_application_read.ts

@@ -0,0 +1,8 @@
+// Action Type
+export type REQUEST = '@overflow/infra/application_read/REQUEST';
+export type REQUEST_SUCCESS = '@overflow/infra/application_read/REQUEST/SUCCESS';
+export type REQUEST_FAILURE = '@overflow/infra/application_read/REQUEST/FAILURE';
+
+export const REQUEST: REQUEST = '@overflow/infra/application_read/REQUEST';
+export const REQUEST_SUCCESS: REQUEST_SUCCESS = '@overflow/infra/application_read/REQUEST/SUCCESS';
+export const REQUEST_FAILURE: REQUEST_FAILURE = '@overflow/infra/application_read/REQUEST/FAILURE';

src/ts/@overflow/infra/redux/action/os_daemon_read.ts

@@ -0,0 +1,8 @@
+// Action Type
+export type REQUEST = '@overflow/infra/daemon_read/REQUEST';
+export type REQUEST_SUCCESS = '@overflow/infra/daemon_read/REQUEST/SUCCESS';
+export type REQUEST_FAILURE = '@overflow/infra/daemon_read/REQUEST/FAILURE';
+
+export const REQUEST: REQUEST = '@overflow/infra/daemon_read/REQUEST';
+export const REQUEST_SUCCESS: REQUEST_SUCCESS = '@overflow/infra/daemon_read/REQUEST/SUCCESS';
+export const REQUEST_FAILURE: REQUEST_FAILURE = '@overflow/infra/daemon_read/REQUEST/FAILURE';

src/ts/@overflow/infra/redux/action/os_port_read.ts

@@ -0,0 +1,8 @@
+// Action Type
+export type REQUEST = '@overflow/infra/port_read/REQUEST';
+export type REQUEST_SUCCESS = '@overflow/infra/port_read/REQUEST/SUCCESS';
+export type REQUEST_FAILURE = '@overflow/infra/port_read/REQUEST/FAILURE';
+
+export const REQUEST: REQUEST = '@overflow/infra/port_read/REQUEST';
+export const REQUEST_SUCCESS: REQUEST_SUCCESS = '@overflow/infra/port_read/REQUEST/SUCCESS';
+export const REQUEST_FAILURE: REQUEST_FAILURE = '@overflow/infra/port_read/REQUEST/FAILURE';

src/ts/@overflow/infra/redux/action/os_read.ts

@@ -0,0 +1,8 @@
+// Action Type
+export type REQUEST = '@overflow/infra/os_read/REQUEST';
+export type REQUEST_SUCCESS = '@overflow/infra/os_read/REQUEST/SUCCESS';
+export type REQUEST_FAILURE = '@overflow/infra/os_read/REQUEST/FAILURE';
+
+export const REQUEST: REQUEST = '@overflow/infra/os_read/REQUEST';
+export const REQUEST_SUCCESS: REQUEST_SUCCESS = '@overflow/infra/os_read/REQUEST/SUCCESS';
+export const REQUEST_FAILURE: REQUEST_FAILURE = '@overflow/infra/os_read/REQUEST/FAILURE';

src/ts/@overflow/infra/redux/action/service_read.ts

@@ -0,0 +1,8 @@
+// Action Type
+export type REQUEST = '@overflow/infra/service_read/REQUEST';
+export type REQUEST_SUCCESS = '@overflow/infra/service_read/REQUEST/SUCCESS';
+export type REQUEST_FAILURE = '@overflow/infra/service_read/REQUEST/FAILURE';
+
+export const REQUEST: REQUEST = '@overflow/infra/service_read/REQUEST';
+export const REQUEST_SUCCESS: REQUEST_SUCCESS = '@overflow/infra/service_read/REQUEST/SUCCESS';
+export const REQUEST_FAILURE: REQUEST_FAILURE = '@overflow/infra/service_read/REQUEST/FAILURE';

src/ts/@overflow/infra/redux/reducer/host_read.ts

@@ -2,7 +2,7 @@ import Action from '@overflow/commons/redux/Action';
 import { ReducersMapObject } from 'redux';
 import InfraHost from '@overflow/infra/api/model/InfraHost';
 
-import * as actionType from '../action/read';
+import * as actionType from '../action/host_read';
 import ReadHostState, { defaultState as ReadHostDefaultState } from '../state/HostRead';
 
 const reducer: ReducersMapObject = {

src/ts/@overflow/infra/redux/reducer/machine_read.ts

@@ -2,7 +2,7 @@ import Action from '@overflow/commons/redux/Action';
 import { ReducersMapObject } from 'redux';
 import InfraMachine from '@overflow/infra/api/model/InfraMachine';
 
-import * as actionType from '../action/read';
+import * as actionType from '../action/machine_read';
 import ReadMachineState, { defaultState as ReadMachineDefaultState } from '../state/MachineRead';
 
 const reducer: ReducersMapObject = {

src/ts/@overflow/infra/redux/reducer/os_application_read.ts

@@ -0,0 +1,24 @@
+import Action from '@overflow/commons/redux/Action';
+import { ReducersMapObject } from 'redux';
+import InfraOSApplication from '@overflow/infra/api/model/InfraOSApplication';
+
+import * as actionType from '../action/os_application_read';
+import ReadOSAppplicationState, { defaultState as ReadOSApplicationDefaultState } from '../state/OSApplicationRead';
+
+const reducer: ReducersMapObject = {
+    [actionType.REQUEST_SUCCESS]:
+    (state: ReadOSAppplicationState = ReadOSApplicationDefaultState, action: Action<InfraOSApplication>):
+        ReadOSAppplicationState => {
+        return {
+            ...state,
+            osApplication: <InfraOSApplication>action.payload,
+        };
+    },
+    [actionType.REQUEST_FAILURE]:
+    (state: ReadOSAppplicationState = ReadOSApplicationDefaultState, action: Action<Error>):
+        ReadOSAppplicationState => {
+        return state;
+    },
+};
+
+export default reducer;

src/ts/@overflow/infra/redux/reducer/os_daemon_read.ts

@@ -0,0 +1,24 @@
+import Action from '@overflow/commons/redux/Action';
+import { ReducersMapObject } from 'redux';
+import InfraOSDaemon from '@overflow/infra/api/model/InfraOSDaemon';
+
+import * as actionType from '../action/os_daemon_read';
+import ReadOSDaemonState, { defaultState as ReadOSDaemonDefaultState } from '../state/OSDaemonRead';
+
+const reducer: ReducersMapObject = {
+    [actionType.REQUEST_SUCCESS]:
+    (state: ReadOSDaemonState = ReadOSDaemonDefaultState, action: Action<InfraOSDaemon>):
+        ReadOSDaemonState => {
+        return {
+            ...state,
+            osDaemon: <InfraOSDaemon>action.payload,
+        };
+    },
+    [actionType.REQUEST_FAILURE]:
+    (state: ReadOSDaemonState = ReadOSDaemonDefaultState, action: Action<Error>):
+        ReadOSDaemonState => {
+        return state;
+    },
+};
+
+export default reducer;

src/ts/@overflow/infra/redux/reducer/os_port_read.ts

@@ -0,0 +1,24 @@
+import Action from '@overflow/commons/redux/Action';
+import { ReducersMapObject } from 'redux';
+import InfraOSPort from '@overflow/infra/api/model/InfraOSPort';
+
+import * as actionType from '../action/os_port_read';
+import ReadOSPortState, { defaultState as ReadOSPortDefaultState } from '../state/OSPortRead';
+
+const reducer: ReducersMapObject = {
+    [actionType.REQUEST_SUCCESS]:
+    (state: ReadOSPortState = ReadOSPortDefaultState, action: Action<InfraOSPort>):
+        ReadOSPortState => {
+        return {
+            ...state,
+            osPort: <InfraOSPort>action.payload,
+        };
+    },
+    [actionType.REQUEST_FAILURE]:
+    (state: ReadOSPortState = ReadOSPortDefaultState, action: Action<Error>):
+        ReadOSPortState => {
+        return state;
+    },
+};
+
+export default reducer;

src/ts/@overflow/infra/redux/reducer/os_read.ts

@@ -0,0 +1,24 @@
+import Action from '@overflow/commons/redux/Action';
+import { ReducersMapObject } from 'redux';
+import InfraOS from '@overflow/infra/api/model/InfraOS';
+
+import * as actionType from '../action/os_read';
+import ReadOSState, { defaultState as ReadOSDefaultState } from '../state/OSRead';
+
+const reducer: ReducersMapObject = {
+    [actionType.REQUEST_SUCCESS]:
+    (state: ReadOSState = ReadOSDefaultState, action: Action<InfraOS>):
+        ReadOSState => {
+        return {
+            ...state,
+            os: <InfraOS>action.payload,
+        };
+    },
+    [actionType.REQUEST_FAILURE]:
+    (state: ReadOSState = ReadOSDefaultState, action: Action<Error>):
+        ReadOSState => {
+        return state;
+    },
+};
+
+export default reducer;

src/ts/@overflow/infra/redux/reducer/service_read.ts

@@ -0,0 +1,24 @@
+import Action from '@overflow/commons/redux/Action';
+import { ReducersMapObject } from 'redux';
+import InfraService from '@overflow/infra/api/model/InfraService';
+
+import * as actionType from '../action/service_read';
+import ReadServiceState, { defaultState as ReadServiceDefaultState } from '../state/ServiceRead';
+
+const reducer: ReducersMapObject = {
+    [actionType.REQUEST_SUCCESS]:
+    (state: ReadServiceState = ReadServiceDefaultState, action: Action<InfraService>):
+        ReadServiceState => {
+        return {
+            ...state,
+            service: <InfraService>action.payload,
+        };
+    },
+    [actionType.REQUEST_FAILURE]:
+    (state: ReadServiceState = ReadServiceDefaultState, action: Action<Error>):
+        ReadServiceState => {
+        return state;
+    },
+};
+
+export default reducer;

src/ts/@overflow/target/react/TargetDetail.tsx

@@ -6,12 +6,27 @@ import {
 } from './components/TargetDetail';
 
 import * as targetDetailActions from '../redux/action/read';
+import * as HostReadActions from '@overflow/infra/redux/action/host_read';
+import * as MachineReadActions from '@overflow/infra/redux/action/machine_read';
+import * as OSReadActions from '@overflow/infra/redux/action/os_read';
+import * as ServiceReadActions from '@overflow/infra/redux/action/service_read';
+import * as ApplicationReadActions from '@overflow/infra/redux/action/os_application_read';
+import * as DaemonReadActions from '@overflow/infra/redux/action/os_daemon_read';
+import * as PortReadActions from '@overflow/infra/redux/action/os_port_read';
+
 import * as asyncRequestActions from '@overflow/commons/redux/action/asyncRequest';
 
 export function mapStateToProps(state: any, props: any): StateProps {
     return {
         id: props.params.id,
         infra: state.infra,
+        machine: state.machine,
+        host: state.host,
+        os: state.os,
+        osApplication: state.osApplication,
+        osDaemon: state.osDaemon,
+        osPort: state.osPort,
+        service: state.service,
     };
 }
 
@@ -20,6 +35,27 @@ export function mapDispatchToProps(dispatch: Dispatch<any>): DispatchProps {
         onRead: (id: string) => {
             dispatch(asyncRequestActions.request('InfraService', 'read', targetDetailActions.REQUEST, id));
         },
+        onReadInfraMachine: (id: string) => {
+            dispatch(asyncRequestActions.request('InfraMachineService', 'read', MachineReadActions.REQUEST, id));
+        },
+        onReadInfraHost: (id: string) => {
+            dispatch(asyncRequestActions.request('InfraHostService', 'read', HostReadActions.REQUEST, id));
+        },
+        onReadInfraOS: (id: string) => {
+            dispatch(asyncRequestActions.request('InfraOSService', 'read', OSReadActions.REQUEST, id));
+        },
+        onReadInfraOSApplication: (id: string) => {
+            dispatch(asyncRequestActions.request('InfraOSApplicationService', 'read', ApplicationReadActions.REQUEST, id));
+        },
+        onReadInfraOSDaemon: (id: string) => {
+            dispatch(asyncRequestActions.request('InfraOSDaemonService', 'read', DaemonReadActions.REQUEST, id));
+        },
+        onReadInfraOSPort: (id: string) => {
+            dispatch(asyncRequestActions.request('InfraOSPortService', 'read', PortReadActions.REQUEST, id));
+        },
+        onReadInfraService: (id: string) => {
+            dispatch(asyncRequestActions.request('InfraServiceService', 'read', ServiceReadActions.REQUEST, id));
+        },
     };
 }
 

src/ts/@overflow/target/react/components/TargetDetail.tsx

@@ -2,18 +2,40 @@ import * as React from 'react';
 import { Button, Table, Header, Container } from 'semantic-ui-react';
 import { DetailContainer } from '@overflow/commons/react/component/DetailContainer';
 import { TargetDetailInfra } from './TargetDetailInfra';
-import InfraDetailContainer from '@overflow/infra/react/InfraDetail';
 import Infra from '@overflow/infra/api/model/Infra';
+import InfraHost from '@overflow/infra/api/model/InfraHost';
+import InfraMachine from '@overflow/infra/api/model/InfraMachine';
+import InfraOS from '@overflow/infra/api/model/InfraOS';
+import InfraOSApplication from '@overflow/infra/api/model/InfraOSApplication';
+import InfraOSDaemon from '@overflow/infra/api/model/InfraOSDaemon';
+import InfraOSPort from '@overflow/infra/api/model/InfraOSPort';
+import InfraService from '@overflow/infra/api/model/InfraService';
+
 
 import * as Utils from '@overflow/commons/util/Utils';
 
 export interface StateProps {
   id: string;
   infra: Infra;
+
+  machine?: InfraMachine;
+  host?: InfraHost;
+  os?: InfraOS;
+  osApplication?: InfraOSApplication;
+  osDaemon?: InfraOSDaemon;
+  osPort?: InfraOSPort;
+  service?: InfraService;
 }
 
 export interface DispatchProps {
   onRead(id: string): void;
+  onReadInfraMachine?(id: string): void;
+  onReadInfraHost?(id: string): void;
+  onReadInfraOS?(id: string): void;
+  onReadInfraOSApplication?(id: string): void;
+  onReadInfraOSDaemon?(id: string): void;
+  onReadInfraOSPort?(id: string): void;
+  onReadInfraService?(id: string): void;
 }
 
 export type Props = StateProps & DispatchProps;
@@ -38,22 +60,268 @@ export class TargetDetail extends React.Component<Props, State> {
     alert('remove');
   }
 
+  public shouldComponentUpdate(nextProps: any, nextContext: any): boolean {
+    if (this.props.infra === undefined) {
+      return false;
+    }
+    if (nextProps.infra.id !== this.props.infra.id) {
+      return true;
+    }
+    return false;
+  }
+
+  public getChild(): void {
+    let infraType = this.props.infra.infraType.id;
+    let id = String(this.props.infra.childId);
+    switch (infraType) {
+      case 1: {
+        this.props.onReadInfraMachine(id);
+        break;
+      }
+      case 2: {
+        this.props.onReadInfraHost(id);
+        break;
+      }
+      case 3: {
+        this.props.onReadInfraOS(id);
+        break;
+      }
+      case 4: {
+        this.props.onReadInfraOSApplication(id);
+        break;
+      }
+      case 5: {
+        this.props.onReadInfraOSDaemon(id);
+        break;
+      }
+      case 6: {
+        this.props.onReadInfraOSPort(id);
+        break;
+      }
+      case 7: {
+        this.props.onReadInfraService(id);
+        break;
+      }
+      default: {
+        break;
+      }
+    }
+
+  }
+
   public render(): JSX.Element {
     if (this.props.infra === undefined) {
       return null;
+    } else {
+      this.getChild();
     }
     return (
       <Container fluid>
         <TargetBasicInfo infra={this.props.infra} />
         <br />
-        <InfraDetailContainer infra={this.props.infra} />
+        {this.renderInfraChild()}
         <br />
         <Button primary floated={'right'} negative onClick={this.handleRemoveTarget}>Remove</Button>
       </Container>
     );
   }
+
+  public renderInfraChild(): JSX.Element {
+    if (this.props.machine === undefined
+      && this.props.host === undefined
+      && this.props.os === undefined
+      && this.props.osApplication === undefined
+      && this.props.osDaemon === undefined
+      && this.props.osPort === undefined
+      && this.props.service === undefined
+    ) {
+      return null;
+    }
+    let infraType = this.props.infra.infraType.id;
+    switch (infraType) {
+      case 1: {
+        return <InfraTable tableDatas={this.ConvertTableDataForMachine(this.props.machine)} />;
+      }
+      case 2: {
+        return <InfraTable tableDatas={this.ConvertTableDataForHost(this.props.host)} />;
+      }
+      case 3: {
+        return <InfraTable tableDatas={this.ConvertTableDataForOS(this.props.os)} />;
+      }
+      case 4: {
+        return <InfraTable tableDatas={this.ConvertTableDataForApplication(this.props.osApplication)} />;
+      }
+      case 5: {
+        return <InfraTable tableDatas={this.ConvertTableDataForDaemon(this.props.osDaemon)} />;
+      }
+      case 6: {
+        return <InfraTable tableDatas={this.ConvertTableDataForPort(this.props.osPort)} />;
+      }
+      case 7: {
+        return <InfraTable tableDatas={this.ConvertTableDataForOS(this.props.os)} />;
+      }
+      default: {
+        break;
+      }
+    }
+  }
+
+  private ConvertTableDataForHost(infraChild: InfraHost): Array<TableData> {
+    let NewTableDatas: Array<TableData>;
+    NewTableDatas = [{
+      header: 'IP',
+      contents: Utils.int2ip(infraChild.ip),
+    },
+    {
+      header: 'MAC',
+      contents: Utils.intToMac(infraChild.mac),
+    },
+    ];
+    return NewTableDatas;
+  }
+
+  private ConvertTableDataForMachine(infraChild: InfraMachine): Array<TableData> {
+    let NewTableDatas: Array<TableData>;
+
+    NewTableDatas = [{
+      header: 'Meta',
+      contents: infraChild.meta,
+    },
+    ];
+    return NewTableDatas;
+  }
+
+  private ConvertTableDataForOS(infraChild: InfraOS): Array<TableData> {
+    let NewTableDatas: Array<TableData>;
+    NewTableDatas = [
+      {
+        header: 'Meta',
+        contents: infraChild.meta,
+      },
+      {
+        header: 'Vendor',
+        contents: infraChild.vendor.name,
+      },
+    ];
+    return NewTableDatas;
+  }
+
+  private ConvertTableDataForApplication(infraChild: InfraOSApplication): Array<TableData> {
+    let NewTableDatas: Array<TableData>;
+    NewTableDatas = [
+      {
+        header: 'Name',
+        contents: infraChild.name,
+      },
+      {
+        header: 'OS',
+        contents: infraChild.os.vendor.name,
+      },
+    ];
+    return NewTableDatas;
+  }
+  private ConvertTableDataForDaemon(infraChild: InfraOSDaemon): Array<TableData> {
+    let NewTableDatas: Array<TableData>;
+    NewTableDatas = [
+      {
+        header: 'Name',
+        contents: infraChild.name,
+      },
+      {
+        header: 'OS',
+        contents: infraChild.os.vendor.name,
+      },
+    ];
+    return NewTableDatas;
+  }
+
+  private ConvertTableDataForPort(infraChild: InfraOSPort): Array<TableData> {
+    let NewTableDatas: Array<TableData>;
+    NewTableDatas = [
+      {
+        header: 'Port',
+        contents: infraChild.port,
+      },
+      {
+        header: 'Type',
+        contents: infraChild.portType,
+      },
+      {
+        header: 'OS',
+        contents: infraChild.os.vendor.name,
+      },
+    ];
+    return NewTableDatas;
+  }
+  private ConvertTableDataForService(infraChild: InfraService): Array<TableData> {
+    let NewTableDatas: Array<TableData>;
+    NewTableDatas = [
+      {
+        header: 'Host',
+        contents: infraChild.host.ip,
+      },
+      {
+        header: 'Port',
+        contents: infraChild.port,
+      },
+      {
+        header: 'Type',
+        contents: infraChild.portType,
+      },
+      {
+        header: 'OS',
+        contents: infraChild.host.os.vendor.name,
+      },
+    ];
+    return NewTableDatas;
+  }
 }
 
+export interface TableData {
+  header: string;
+  contents: any;
+}
+
+export interface InfraTableProps {
+  tableDatas: Array<TableData>;
+}
+
+export class InfraTable extends React.Component<InfraTableProps, any> {
+  constructor(props: InfraTableProps, context: any) {
+    super(props, context);
+    this.state = {
+    };
+  }
+
+  public showInfra(): JSX.Element[] {
+    let elems: Array<JSX.Element> = new Array();
+    let i = 0;
+    for (let data of this.props.tableDatas) {
+      elems.push(
+        <Table.Row key={i++}>
+          <Table.Cell collapsing>
+            <Header size='small'>{data.header}</Header>
+          </Table.Cell>
+          <Table.Cell>
+            {data.contents}
+          </Table.Cell>
+        </Table.Row>,
+      );
+    }
+
+    return elems;
+  }
+
+  public render(): JSX.Element {
+    return (
+      <Table celled={false}>
+        <Table.Body>
+          {this.showInfra()}
+        </Table.Body>
+      </Table>
+    );
+  }
+}
 
 export interface TargetBasicInfoProps {
   infra?: Infra;