paging ing

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

@@ -20,11 +20,13 @@ export function mapStateToProps(state: any, props: any): StateProps {
 
 export function mapDispatchToProps(dispatch: Dispatch<any>): DispatchProps {
   return {
-    onReadAllByProbe: (probe: Probe) => {
-       dispatch(asyncRequestActions.request('InfraService', 'readAllByProbe', targetListActions.REQUEST, JSON.stringify(probe)));
+    onReadAllByProbe: (probe: Probe, pageNo: string, countPerPage: string) => {
+      dispatch(asyncRequestActions.request('InfraService', 'readAllByProbe', targetListActions.REQUEST,
+                                           JSON.stringify(probe), pageNo, countPerPage));
     },
-    onReadAllByDomain: (domain: Domain) => {
-       dispatch(asyncRequestActions.request('InfraService', 'readAllByDomain', targetListActions.REQUEST, JSON.stringify(domain)));
+    onReadAllByDomain: (domain: Domain, pageNo: string, countPerPage: string) => {
+      dispatch(asyncRequestActions.request('InfraService', 'readAllByDomain', targetListActions.REQUEST,
+                                           JSON.stringify(domain), pageNo, countPerPage));
     },
     onTargetSelection: (infraId: string) => {
       dispatch(routerPush('/target/' + infraId));

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

@@ -7,17 +7,18 @@ import Domain from '@overflow/domain/api/model/Domain';
 import { ListContainer } from '@overflow/commons/react/component/ListContainer';
 import DiscoveryContainer from '@overflow/discovery/react/Discovery';
 import Host from '@overflow/discovery/api/model/Host';
+import Page from '@overflow/commons/api/model/Page';
 
 import * as Utils from '@overflow/commons/util/Utils';
 
 export interface StateProps {
   probeId?: string;
-  infraList?: Infra[];
+  infraList?: Page;
 }
 
 export interface DispatchProps {
-  onReadAllByProbe?(probe: Probe): void;
-  onReadAllByDomain?(domain: Domain): void;
+  onReadAllByProbe?(probe: Probe, pageNo: string, countPerPage: string): void;
+  onReadAllByDomain?(domain: Domain, pageNo: string, countPerPage: string): void;
   onTargetSelection?(id: string): void;
 }
 
@@ -26,15 +27,18 @@ export type Props = StateProps & DispatchProps;
 export interface State {
   selected: Infra;
   openAddTarget: boolean;
+  page: number;
 }
 
 export class TargetList extends React.Component<Props, State> {
 
+  private countPerPage: number = 10;
   constructor(props: Props, context: State) {
     super(props, context);
     this.state = {
       selected: null,
       openAddTarget: false,
+      page: 0,
     };
   }
 
@@ -48,12 +52,12 @@ export class TargetList extends React.Component<Props, State> {
       let domain: Domain = {
         id: 1,
       };
-      this.props.onReadAllByDomain(domain);
+      this.props.onReadAllByDomain(domain, String(0), String(this.countPerPage));
     } else {
       let probe: Probe = {
         id: Number(this.props.probeId),
       };
-      this.props.onReadAllByProbe(probe);
+      this.props.onReadAllByProbe(probe, String(0), String(this.countPerPage));
     }
   }
 
@@ -85,7 +89,7 @@ export class TargetList extends React.Component<Props, State> {
 
   public onRefreshList = () => {
     console.log('onRefreshList');
-    this.setState({openAddTarget: false});
+    this.setState({ openAddTarget: false });
     this.getTargetList();
   }
 
@@ -127,7 +131,7 @@ export class TargetList extends React.Component<Props, State> {
           </Table.Header>
 
           <Table.Body>
-            {this.props.infraList.map((infra: Infra, index: number) => (
+            {this.props.infraList.content.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'}>{infra.infraType.name}</Table.Cell>

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

@@ -1,21 +1,22 @@
 import Action from '@overflow/commons/redux/Action';
 import { ReducersMapObject } from 'redux';
-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';
+import Page from '@overflow/commons/api/model/Page';
+
 
 const reducer: ReducersMapObject = {
   [ReadAllByProbeActionTypes.REQUEST_SUCCESS]:
-  (state: ReadAllByProbeState = ReadAllByProbeDefaultState, action: Action<Infra>):
+  (state: ReadAllByProbeState = ReadAllByProbeDefaultState, action: Action<Page>):
     ReadAllByProbeState => {
     return {
       ...state,
-      infraList: <Infra[]>action.payload,
+      infraList: <Page>action.payload,
     };
   },
   [ReadAllByProbeActionTypes.REQUEST_FAILURE]:
-  (state: ReadAllByProbeState = ReadAllByProbeDefaultState, action: Action<Infra>):
+  (state: ReadAllByProbeState = ReadAllByProbeDefaultState, action: Action<Error>):
     ReadAllByProbeState => {
     return state;
   },

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

@@ -1,7 +1,7 @@
-import Infra from '@overflow/infra/api/model/Infra';
+import Page from '@overflow/commons/api/model/Page';
 
 export interface State {
-  readonly infraList?: Infra[];
+  readonly infraList?: Page;
   readonly error?: Error;
 }