test

src/ts/@overflow/member/react/SignIn.tsx

@@ -3,14 +3,15 @@ import {
   SignIn,
   StateProps as SignInStateProps,
   DispatchProps as SigninDispatchProps,
+  Props as SignInProps,
 } from './components/SignIn';
-import State from '../redux/state/SignIn';
+import SignInState from '../redux/state/SignIn';
 
 import * as signinActions from '../redux/action/signIn';
 import { push as routerPush } from 'react-router-redux';
 import * as asyncRequestActions from '@overflow/commons/redux/action/asyncRequest';
 
-export function mapStateToProps(state: any, ownProps?: any): SignInStateProps {
+export function mapStateToProps(state: SignInState, ownProps?: SignInStateProps): SignInStateProps {
   return {
     isAuthenticated: state.isAuthenticated,
   };

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

@@ -0,0 +1,58 @@
+import { connect, Dispatch } from 'react-redux';
+import {
+    TargetChild,
+    StateProps as StateProps,
+    DispatchProps as DispatchProps,
+    Props as Props,
+} from './components/TargetChild';
+
+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 {
+        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>): DispatchProps {
+    return {
+        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));
+        },
+    };
+}
+
+export default connect(mapStateToProps, mapDispatchToProps)(TargetChild);

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

@@ -3,16 +3,11 @@ import {
     TargetDetail,
     StateProps as StateProps,
     DispatchProps as DispatchProps,
+    Props as Props,
 } 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';
 
@@ -20,13 +15,6 @@ 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,
     };
 }
 
@@ -35,27 +23,6 @@ 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/TargetChild.tsx

@@ -0,0 +1,379 @@
+import * as React from 'react';
+import { Button, Table, Header, Container } from 'semantic-ui-react';
+import { DetailContainer } from '@overflow/commons/react/component/DetailContainer';
+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;
+  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 TargetChild extends React.Component<Props, State> {
+
+  constructor(props: Props, context: State) {
+    super(props, context);
+    this.state = {
+    };
+  }
+
+  public componentWillMount(): void {
+    this.getChild();
+  }
+
+  // public shouldComponentUpdate?(nextProps: any, nextContext: any): boolean {
+  //   if(nextProps.infra.id === this.props.infra.id) {
+  //     return false;
+  //   }
+  //   return true;
+  // }
+
+  public getChild(): void {
+    let infraType = this.props.infra.infraType.id;
+    let id = String(this.props.infra.childId);
+    console.log('getting infra child of ' + this.props.infra.id);
+    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;
+    }
+    return (
+      <Container fluid>
+        {this.renderInfraChild()}
+      </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;
+}
+
+export interface TargetBasicInfoState {
+}
+
+export class TargetBasicInfo extends React.Component<TargetBasicInfoProps, TargetBasicInfoState> {
+
+  constructor(props: TargetBasicInfoProps, context: TargetBasicInfoState) {
+    super(props, context);
+    this.state = {
+    };
+  }
+
+  public render(): JSX.Element {
+    return (
+      <Container fluid>
+        <Table celled={false}>
+          <Table.Body>
+            <Table.Row>
+              <Table.Cell collapsing>
+                <Header size='small'>Name</Header>
+              </Table.Cell>
+              <Table.Cell>
+                {this.props.infra.target.displayName}
+              </Table.Cell>
+            </Table.Row>
+
+            <Table.Row>
+              <Table.Cell collapsing>
+                <Header size='small'>Description</Header>
+              </Table.Cell>
+              <Table.Cell>
+                {this.props.infra.target.description}
+              </Table.Cell>
+            </Table.Row>
+
+            <Table.Row>
+              <Table.Cell collapsing>
+                <Header size='small'>Sensor Count</Header>
+              </Table.Cell>
+              <Table.Cell>
+                TODO
+              </Table.Cell>
+            </Table.Row>
+
+            <Table.Row>
+              <Table.Cell collapsing>
+                <Header size='small'>Created at</Header>
+              </Table.Cell>
+              <Table.Cell>
+                {Utils.date2date(this.props.infra.target.createDate)}
+              </Table.Cell>
+            </Table.Row>
+
+            <Table.Row>
+              <Table.Cell collapsing>
+                <Header size='small'>Type</Header>
+              </Table.Cell>
+              <Table.Cell>
+                {this.props.infra.infraType.name}
+              </Table.Cell>
+            </Table.Row>
+          </Table.Body>
+        </Table>
+      </Container>
+    );
+  }
+}

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

@@ -2,6 +2,7 @@ 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  TargetChildContainer from '../TargetChild';
 import Infra from '@overflow/infra/api/model/Infra';
 import InfraHost from '@overflow/infra/api/model/InfraHost';
 import InfraMachine from '@overflow/infra/api/model/InfraMachine';
@@ -17,25 +18,10 @@ 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;
@@ -56,271 +42,29 @@ export class TargetDetail extends React.Component<Props, State> {
     this.props.onRead(this.props.id);
   }
 
+
   public handleRemoveTarget(): void {
     alert('remove');
   }
 
-  public shouldComponentUpdate(nextProps: any, nextContext: any): boolean {
+  public testFn(infra: Infra): void {
-    if (this.props.infra === undefined) {
+    alert('test!!');
-      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 />
-        {this.renderInfraChild()}
+        <TargetChildContainer infra={this.props.infra}/>
         <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 {