target temporary

src/ts/@overflow/app/router/index.tsx

@@ -1,11 +1,12 @@
 import * as React from 'react';
-import { Route, RouteProps, Switch, } from 'react-router-dom';
+import { Route, RouteProps, Switch } from 'react-router-dom';
 
 import SignIn from '../views/member/SignIn';
 import SignUp from '../views/member/SignUp';
 import PWChange from '../views/member/ForgotPassword';
 import SensorList from '../views/monitoring/sensor/SensorList';
 import ProbeList from '../views/monitoring/probe/List';
+import TargetList from '../views/infrastructure/target/List';
 
 // import { SignUp } from '@overflow/member/react/components/SignUp';
 // import { SignIn } from '@overflow/member/react/components/SignIn';
@@ -52,7 +53,7 @@ const routes = (
         <Route exact path='/test4' component={PWChange} />
         <Route exact path='/probe_list' component={ProbeList} />
         <Route exact path='/sensor_list' component={SensorList} />
-
+        <Route exact path='/target_list' component={TargetList} />
 
     </Switch>
 

src/ts/@overflow/app/views/infrastructure/target/List.tsx

@@ -0,0 +1,26 @@
+import * as React from 'react';
+import { RouteComponentProps } from 'react-router';
+import TargetListContainer from '@overflow/target/react/TargetList';
+import WebSocketRPC from '@overflow/commons/websocket/WebSocketRPC';
+import AppContext from '@overflow/commons/context';
+import inject from '@overflow/commons/context/decorator/inject';
+
+class TargetList 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 (
+        <TargetListContainer/>
+    );
+  }
+}
+
+
+export default TargetList;

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

@@ -47,7 +47,7 @@ export class LeftMenu extends React.Component<any, any> {
           </Menu.Header>
           <Menu.Menu>
             <Menu.Item href='/' style={{ 'margin-left': '30px' }}>Maps</Menu.Item>
-            <Menu.Item href='/' style={{ 'margin-left': '30px' }}>Targets</Menu.Item>
+            <Menu.Item href='#/target_list' style={{ 'margin-left': '30px' }}>Targets</Menu.Item>
           </Menu.Menu>
         </Menu.Item>
 

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

@@ -6,7 +6,7 @@ import { Button,
   Header,
   Container,
 } from 'semantic-ui-react';
-import { TargetTable } from '@overflow/temp/react/components/Targets';
+import { TargetTable } from '@overflow/target/react/components/TargetList';
 import Probe from '@overflow/probe/api/model/Probe';
 
 export interface StateProps {

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

@@ -0,0 +1,26 @@
+import { connect, Dispatch } from 'react-redux';
+import {
+    TargetList,
+    StateProps as StateProps,
+    DispatchProps as DispatchProps,
+} from './components/TargetList';
+
+import Probe from '@overflow/probe/api/model/Probe';
+import * as targetListActions from '../redux/action/read_all_by_probe';
+
+
+export function mapStateToProps(state: any): StateProps {
+    return {
+
+    };
+}
+
+export function mapDispatchToProps(dispatch: Dispatch<any>): DispatchProps {
+    return {
+        onReadAllByProbe: (probe: Probe) => {
+            dispatch(targetListActions.request(probe));
+        },
+    };
+}
+
+export default connect(mapStateToProps, mapDispatchToProps)(TargetList);

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

@@ -33,6 +33,10 @@ export class TargetDetails extends React.Component<TargetDetailsProps, TargetDet
 
   public render(): JSX.Element {
 
+    if (this.props.probe === null) {
+      return null;
+    }
+
     const items = [
       { name: 'Info', child: <TargetBasicInfo probe={this.props.probe} /> },
       { name: 'Sensors', child: <SensorList target={this.props.target} /> },

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

@@ -1,25 +1,33 @@
 import * as React from 'react';
 import { Table, Button, Modal, Input, Header, Container, InputOnChangeData, ButtonProps } from 'semantic-ui-react';
-import { TargetDetails } from './TargetDetails';
+import { TargetDetails } from './TargetDetail';
 
 import Target from '@overflow/target/api/model/Target';
+import Probe from '@overflow/probe/api/model/Probe';
 
-export interface TargetsProps {
+export interface StateProps {
 
 }
 
-export interface TargetsState {
+export interface DispatchProps {
+  onReadAllByProbe(probe: Probe): void;
+}
+
+export type Props = StateProps & DispatchProps;
+
+export interface State {
   selected: Target;
   openAddTarget: boolean;
 }
 
-export class Targets extends React.Component<TargetsProps, TargetsState> {
+export class TargetList extends React.Component<Props, State> {
 
-  constructor(props: TargetsProps, context: TargetsState) {
+  constructor(props: Props, context: State) {
     super(props, context);
-    // this.state = {
-    //   openAddTarget: false,
-    // };
+    this.state = {
+      selected: null,
+      openAddTarget: false,
+    };
   }
 
   public handleAddTarget(event: React.MouseEvent<HTMLButtonElement>, data: ButtonProps): void {
@@ -29,10 +37,6 @@ export class Targets extends React.Component<TargetsProps, TargetsState> {
   }
 
   public render(): JSX.Element {
-    const options = [
-      { key: 'm', text: 'Male', value: 'male' },
-      { key: 'f', text: 'Female', value: 'female' },
-    ];
 
     return (
       <Container fluid>
@@ -60,10 +64,6 @@ export class Targets extends React.Component<TargetsProps, TargetsState> {
       </Container>
     );
   }
-
-  public componentWillMount(): void {
-    super.componentWillMount();
-  }
 }
 
 export interface TargetTableProps {
@@ -91,25 +91,9 @@ export class TargetTable extends React.Component<TargetTableProps, TargetTableSt
     });
   }
 
-  public handleSearch(event: React.SyntheticEvent<HTMLInputElement>, data: InputOnChangeData): void {
-    let searchWord = data.value.toLowerCase();
-    let foundTarget = new Array();
-    for (let target of this.data) {
-      let typeName = target.infra.metaInfraType.name.toLowerCase();
-      if (typeName.indexOf(searchWord) !== -1) {
-        foundTarget.push(target);
-      }
-    }
-    this.setState({
-      list: foundTarget,
-    });
-  }
-
   public render(): JSX.Element {
     return (
       <Container fluid>
-        <Header as='h3' dividing>Targets</Header>
-        <Input icon='search' placeholder='Search...' onChange={this.handleSearch.bind(this)} />
         <Table celled selectable striped>
           <Table.Header>
             <Table.Row>
@@ -124,7 +108,7 @@ export class TargetTable extends React.Component<TargetTableProps, TargetTableSt
             {this.state.list.map((target: Target, index: number) => (
               <Table.Row key={index} onClick={this.handleSelect.bind(this, target)}>
                 <Table.Cell textAlign={'center'}>{index + 1}</Table.Cell>
-                <Table.Cell textAlign={'center'}>{target.infra.type.name}</Table.Cell>
+                <Table.Cell textAlign={'center'}>todo</Table.Cell>
                 <Table.Cell>todo</Table.Cell>
                 <Table.Cell>todo</Table.Cell>
               </Table.Row>
@@ -135,48 +119,6 @@ export class TargetTable extends React.Component<TargetTableProps, TargetTableSt
     );
   }
 
-  public componentWillMount(): void {
-    super.componentWillMount();
-    this.data = [
-      {
-        'id': '1',
-        'createDate': '',
-        'probe': {
-          'id': '1',
-        },
-        'infra': {
-          'id': '1',
-          'metaInfraType': {
-            'id': '1',
-            'name': 'OS',
-            'createDate': '424252',
-          },
-          'childId': '1',
-          'createDate': '13345235',
-        },
-      },
-      {
-        'id': '2',
-        'createDate': '',
-        'probe': {
-          'id': '1',
-        },
-        'infra': {
-          'id': '1',
-          'metaInfraType': {
-            'id': '1',
-            'name': 'Host',
-            'createDate': '424252',
-          },
-          'childId': '1',
-          'createDate': '13345235',
-        },
-      },
-    ];
-    this.setState({
-      list: this.data,
-    });
-  }
 }