target infra

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

@@ -7,6 +7,7 @@ import signUpReducer from '@overflow/member/redux/reducer/signUp';
 import readAllProbeReducer from '@overflow/probe/redux/reducer/readAllByDomain';
 import readProbeReducer from '@overflow/probe/redux/reducer/read';
 import readAllTargetByProbeReducer from '@overflow/target/redux/reducer/readAllByProbe';
+import readTargetReducer from '@overflow/target/redux/reducer/read';
 
 import readAllByTargetReducer from '@overflow/sensor/redux/reducer/read_all_by_target';
 import SensorReadReducer from '@overflow/sensor/redux/reducer/read';
@@ -55,6 +56,7 @@ const reduxConfig: ReduxConfig = {
     signUpReducer,
     SensorItemReadAllBySensorReducer,
     readAllTargetByProbeReducer,
+    readTargetReducer,
   ],
   sagaWatchers: [
     AsyncRequest,

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

@@ -10,7 +10,7 @@ class TargetDetail extends React.Component<RouteComponentProps<object>, object>
 
   public render(): JSX.Element {
     return (
-      <TargetDetailContainer />
+      <TargetDetailContainer params={this.props.match.params}/>
     );
   }
 }

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

@@ -13,7 +13,6 @@ import InfraOS from '@overflow/infra/api/model/InfraOS';
 import * as Utils from '@overflow/commons/util/Utils';
 
 export interface StateProps {
-  target?: Target;
   infra?: Infra;
 }
 
@@ -41,15 +40,7 @@ export class InfraDetail extends React.Component<Props, State> {
   }
 
   public componentWillMount(): void {
-    // todo. getting infra and child infra
-
-    // this.getInfraChild();
-
-    this.setState({
-      childInfra: InfraHostJson,
-    });
-
-
+    this.getInfraChild();
   }
 
   public getInfraChild = () => {

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

@@ -6,17 +6,19 @@ import {
 } from './components/TargetDetail';
 
 import * as targetDetailActions from '../redux/action/read';
+import * as asyncRequestActions from '@overflow/commons/redux/action/asyncRequest';
 
-export function mapStateToProps(state: any): StateProps {
+export function mapStateToProps(state: any, props: any): StateProps {
     return {
-        // probe: state.probe,
+        id: props.params.id,
+        infra: state.infra,
     };
 }
 
 export function mapDispatchToProps(dispatch: Dispatch<any>): DispatchProps {
     return {
         onRead: (id: string) => {
-            dispatch(targetDetailActions.request(id));
+            dispatch(asyncRequestActions.request('InfraService', 'read', targetDetailActions.REQUEST, id));
         },
     };
 }

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

@@ -13,7 +13,7 @@ import * as asyncRequestActions from '@overflow/commons/redux/action/asyncReques
 export function mapStateToProps(state: any, props: any): StateProps {
   return {
     probeId: props.params.id,
-    targetList: state.targetList,
+    infraList: state.infraList,
   };
 }
 

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

@@ -3,20 +3,21 @@ 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 Target from '@overflow/target/api/model/Target';
+import Infra from '@overflow/infra/api/model/Infra';
 
 
 export interface StateProps {
+  id: string;
+  infra: Infra;
 }
 
 export interface DispatchProps {
+  onRead(id: string): void;
 }
 
 export type Props = StateProps & DispatchProps;
 
 export interface State {
-  target: any; // todo. fix to Target
-  infra: any;
 }
 
 
@@ -25,30 +26,11 @@ export class TargetDetail extends React.Component<Props, State> {
   constructor(props: Props, context: State) {
     super(props, context);
     this.state = {
-      target: null,
-      infra: null,
     };
   }
 
   public componentWillMount(): void {
-    let data = {
-      'id': '1',
-      'createDate': '2017-01-01',
-      'displayName': '192.168.1.105',
-      'description': '',
-      'sensorCount': 'todo.',
-    };
-    let infra = {
-      'id': '1',
-      'createDate': '2017-01-01',
-      'childId': '111',
-      'type': 'Host',
-    };
-
-    this.setState({
-      target: data,
-      infra: infra,
-    });
+    this.props.onRead(this.props.id);
   }
 
   public handleRemoveTarget(): void {
@@ -56,11 +38,14 @@ export class TargetDetail extends React.Component<Props, State> {
   }
 
   public render(): JSX.Element {
+    if (this.props.infra === undefined) {
+      return null;
+    }
     return (
       <Container fluid>
-        <TargetBasicInfo target={this.state.target} infra={this.state.infra} />
+        <TargetBasicInfo infra={this.props.infra} />
         <br />
-        <InfraDetailContainer target={this.state.target} infra={this.state.infra} />
+        <InfraDetailContainer infra={this.props.infra} />
         <br />
         <Button primary floated={'right'} negative onClick={this.handleRemoveTarget}>Remove</Button>
       </Container>
@@ -70,8 +55,7 @@ export class TargetDetail extends React.Component<Props, State> {
 
 
 export interface TargetBasicInfoProps {
-  target?: any; // todo. fix to Target
-  infra: any;
+  infra?: Infra;
 }
 
 export interface TargetBasicInfoState {
@@ -95,7 +79,7 @@ export class TargetBasicInfo extends React.Component<TargetBasicInfoProps, Targe
                 <Header size='small'>Name</Header>
               </Table.Cell>
               <Table.Cell>
-                {this.props.target.displayName}
+                {this.props.infra.target.displayName}
               </Table.Cell>
             </Table.Row>
 
@@ -104,7 +88,7 @@ export class TargetBasicInfo extends React.Component<TargetBasicInfoProps, Targe
                 <Header size='small'>Description</Header>
               </Table.Cell>
               <Table.Cell>
-                {this.props.target.description}
+                {this.props.infra.target.description}
               </Table.Cell>
             </Table.Row>
 
@@ -113,7 +97,7 @@ export class TargetBasicInfo extends React.Component<TargetBasicInfoProps, Targe
                 <Header size='small'>Sensor Count</Header>
               </Table.Cell>
               <Table.Cell>
-                {this.props.target.sensorCount}
+                TODO
               </Table.Cell>
             </Table.Row>
 
@@ -122,7 +106,7 @@ export class TargetBasicInfo extends React.Component<TargetBasicInfoProps, Targe
                 <Header size='small'>Created at</Header>
               </Table.Cell>
               <Table.Cell>
-                {this.props.target.createDate}
+                {this.props.infra.target.createDate}
               </Table.Cell>
             </Table.Row>
 
@@ -131,7 +115,7 @@ export class TargetBasicInfo extends React.Component<TargetBasicInfoProps, Targe
                 <Header size='small'>Type</Header>
               </Table.Cell>
               <Table.Cell>
-                {this.props.infra.type}
+                {this.props.infra.infraType.name}
               </Table.Cell>
             </Table.Row>
           </Table.Body>

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

@@ -1,14 +1,14 @@
 import * as React from 'react';
 import { Table, Button, Modal, Input, Header, Container, InputOnChangeData, ButtonProps } from 'semantic-ui-react';
 import { TargetDetail } from './TargetDetail';
-import Target from '@overflow/target/api/model/Target';
+import Infra from '@overflow/infra/api/model/Infra';
 import Probe from '@overflow/probe/api/model/Probe';
 import { ListContainer } from '@overflow/commons/react/component/ListContainer';
 import { Discovery } from '../../../discovery/react/components/Discovery';
 
 export interface StateProps {
   probeId: string;
-  targetList: Target[];
+  infraList: Infra[];
 }
 
 export interface DispatchProps {
@@ -19,7 +19,7 @@ export interface DispatchProps {
 export type Props = StateProps & DispatchProps;
 
 export interface State {
-  selected: Target;
+  selected: Infra;
   openAddTarget: boolean;
 }
 
@@ -34,8 +34,8 @@ export class TargetList extends React.Component<Props, State> {
   }
 
   public componentWillMount(): void {
-    const probe: Probe = {
-      id: 1,
+    let probe: Probe = {
+      id: Number(this.props.probeId),
     };
     this.props.onReadAllByProbe(probe);
   }
@@ -56,7 +56,7 @@ export class TargetList extends React.Component<Props, State> {
     });
   }
 
-  public handleSearch(result: Target[]): void {
+  public handleSearch(result: Infra[]): void {
     // this.setState({
     //   list: result,
     // });
@@ -81,12 +81,11 @@ export class TargetList extends React.Component<Props, State> {
   }
 
   public render(): JSX.Element {
-    if(this.props.targetList === undefined) {
+    if(this.props.infraList === undefined) {
       return null;
     }
     let targetList =
       <Container fluid>
-        {/*search bar  */}
         <Button content='Discovery' icon='search' labelPosition='left' floated='right' positive onClick={this.handleAddTarget.bind(this)} />
         <br /><br />
         <Table celled selectable striped>
@@ -101,13 +100,13 @@ export class TargetList extends React.Component<Props, State> {
           </Table.Header>
 
           <Table.Body>
-            {this.props.targetList.map((target: any, index: number) => (
-              <Table.Row key={index} onClick={this.handleSelect.bind(this, target)}>
+            {this.props.infraList.map((infra: Infra, index: number) => (
+              <Table.Row key={index} onClick={this.handleSelect.bind(this, infra)}>
                 <Table.Cell textAlign={'center'}>{index + 1}</Table.Cell>
-                 <Table.Cell textAlign={'center'}>{target.infraType.name}</Table.Cell>
-                <Table.Cell textAlign={'center'}>{target.target.displayName}</Table.Cell>
+                 <Table.Cell textAlign={'center'}>{infra.infraType.name}</Table.Cell>
+                <Table.Cell textAlign={'center'}>{infra.target.displayName}</Table.Cell>
                 <Table.Cell>TODO</Table.Cell>
-                <Table.Cell>{target.createDate}</Table.Cell>
+                <Table.Cell>{infra.target.createDate}</Table.Cell>
               </Table.Row>
             ))}
           </Table.Body>
@@ -130,18 +129,18 @@ export class TargetList extends React.Component<Props, State> {
     return (
       <ListContainer
         contents={targetList}
-        data={this.data}
+        data={this.props.infraList}
         onSearch={this.handleSearch.bind(this)}
         filter={null}
       />
     );
   }
 
-  private handleSelectedTarget = (target: Target): void => {
+  private handleSelectedTarget = (infra: Infra): void => {
     console.log('handleSelectedTarget ');
-    this.setState({ selected: target });
+    this.setState({ selected: infra });
 
-    this.props.onTargetSelection(String(target.id));
+    this.props.onTargetSelection(String(infra.id));
   }
 }
 

src/ts/@overflow/target/redux/action/read.ts

@@ -1,43 +1,10 @@
-import Action from '@overflow/commons/redux/Action';
-import Target from '../../api/model/Target';
-
-import ReadPayload from '../payload/ReadPayload';
-
 // Action Type
 export type REQUEST = '@overflow/target/read/REQUEST';
-export type REQUEST_SUCCESS = '@overflow/target/read/REQUEST_SUCCESS';
-export type REQUEST_FAILURE = '@overflow/target/read/REQUEST_FAILURE';
+export type REQUEST_SUCCESS = '@overflow/target/read/REQUEST/SUCCESS';
+export type REQUEST_FAILURE = '@overflow/target/read/REQUEST/FAILURE';
 
 export const REQUEST: REQUEST = '@overflow/target/read/REQUEST';
-export const REQUEST_SUCCESS: REQUEST_SUCCESS = '@overflow/target/read/REQUEST_SUCCESS';
-export const REQUEST_FAILURE: REQUEST_FAILURE = '@overflow/target/read/REQUEST_FAILURE';
-
-// Action Creater
-export type request = (id: string) => Action<ReadPayload>;
-export type requestSuccess = (target: Target) => Action<Target>;
-export type requestFailure = (error: Error) => Action;
+export const REQUEST_SUCCESS: REQUEST_SUCCESS = '@overflow/target/read/REQUEST/SUCCESS';
+export const REQUEST_FAILURE: REQUEST_FAILURE = '@overflow/target/read/REQUEST/FAILURE';
 
 
-
-export const request: request = (id: string): Action<ReadPayload> => {
-  return {
-      type: REQUEST,
-      payload: {
-        id: id,
-      },
-    };
-};
-
-export const requestSuccess: requestSuccess = (target: Target): Action<Target> => {
-  return {
-      type: REQUEST_SUCCESS,
-      payload: target,
-    };
-};
-
-export const requestFailure: requestFailure = (error: Error): Action => {
-  return {
-      type: REQUEST_FAILURE,
-      error: error,
-    };
-};

src/ts/@overflow/target/redux/reducer/read.ts

@@ -1,3 +1,24 @@
-/**
- * Created by geek on 17. 7. 3.
- */
+import Action from '@overflow/commons/redux/Action';
+import { ReducersMapObject } from 'redux';
+import Infra from '@overflow/infra/api/model/Infra';
+
+import * as ReadActionTypes from '../action/read';
+import ReadState, { defaultState as ReadDefaultState } from '../state/Read';
+
+const reducer: ReducersMapObject = {
+  [ReadActionTypes.REQUEST_SUCCESS]:
+  (state: ReadState = ReadDefaultState, action: Action<Infra>):
+    ReadState => {
+    return {
+      ...state,
+      infra: <Infra>action.payload,
+    };
+  },
+  [ReadActionTypes.REQUEST_FAILURE]:
+  (state: ReadState = ReadDefaultState, action: Action<Error>):
+    ReadState => {
+    return state;
+  },
+};
+
+export default reducer;

src/ts/@overflow/target/redux/reducer/readAllByProbe.ts

@@ -1,21 +1,21 @@
 import Action from '@overflow/commons/redux/Action';
 import { ReducersMapObject } from 'redux';
-import Target from '@overflow/target/api/model/Target';
+import Infra from '@overflow/infra/api/model/Infra';
 
 import * as ReadAllByProbeActionTypes from '../action/read_all_by_probe';
 import ReadAllByProbeState, { defaultState as ReadAllByProbeDefaultState } from '../state/ReadAllByProbe';
 
 const reducer: ReducersMapObject = {
   [ReadAllByProbeActionTypes.REQUEST_SUCCESS]:
-  (state: ReadAllByProbeState = ReadAllByProbeDefaultState, action: Action<Target>):
+  (state: ReadAllByProbeState = ReadAllByProbeDefaultState, action: Action<Infra>):
     ReadAllByProbeState => {
     return {
       ...state,
-      targetList: <Target[]>action.payload,
+      infraList: <Infra[]>action.payload,
     };
   },
   [ReadAllByProbeActionTypes.REQUEST_FAILURE]:
-  (state: ReadAllByProbeState = ReadAllByProbeDefaultState, action: Action<Error>):
+  (state: ReadAllByProbeState = ReadAllByProbeDefaultState, action: Action<Infra>):
     ReadAllByProbeState => {
     return state;
   },

src/ts/@overflow/target/redux/state/Read.ts

@@ -1,3 +1,13 @@
-/**
- * Created by geek on 17. 7. 3.
- */
+import Infra from '@overflow/infra/api/model/Infra';
+
+export interface State {
+  readonly infra?: Infra;
+  readonly error?: Error;
+}
+
+export const defaultState: State = {
+  infra: undefined,
+  error: undefined,
+};
+
+export default State;

src/ts/@overflow/target/redux/state/ReadAllByProbe.ts

@@ -1,12 +1,12 @@
-import Target from '../../api/model/Target';
+import Infra from '@overflow/infra/api/model/Infra';
 
 export interface State {
-  readonly targetList?: Target[];
+  readonly infraList?: Infra[];
   readonly error?: Error;
 }
 
 export const defaultState: State = {
-  targetList: undefined,
+  infraList: undefined,
   error: undefined,
 };