target infra paging sorting

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

@@ -10,6 +10,8 @@ import Domain from '@overflow/domain/api/model/Domain';
 import * as targetListActions from '../redux/action/read_all_by_probe';
 import { push as routerPush } from 'react-router-redux';
 import * as asyncRequestActions from '@overflow/commons/redux/action/asyncRequest';
+import PageParams from '@overflow/commons/api/model/PageParams';
+
 
 export function mapStateToProps(state: any, props: any): StateProps {
   return {
@@ -20,13 +22,13 @@ export function mapStateToProps(state: any, props: any): StateProps {
 
 export function mapDispatchToProps(dispatch: Dispatch<any>): DispatchProps {
   return {
-    onReadAllByProbe: (probe: Probe, pageNo: string, countPerPage: string) => {
+    onReadAllByProbe: (probe: Probe, pageParams: PageParams) => {
       dispatch(asyncRequestActions.request('InfraService', 'readAllByProbe', targetListActions.REQUEST,
-                                           JSON.stringify(probe), pageNo, countPerPage));
+                                           JSON.stringify(probe), JSON.stringify(pageParams)));
     },
-    onReadAllByDomain: (domain: Domain, pageNo: string, countPerPage: string) => {
+    onReadAllByDomain: (domain: Domain, pageParams: PageParams) => {
       dispatch(asyncRequestActions.request('InfraService', 'readAllByDomain', targetListActions.REQUEST,
-                                           JSON.stringify(domain), pageNo, countPerPage));
+                                           JSON.stringify(domain), JSON.stringify(pageParams)));
     },
     onTargetSelection: (infraId: string) => {
       dispatch(routerPush('/target/' + infraId));

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

@@ -10,15 +10,19 @@ import Host from '@overflow/discovery/api/model/Host';
 import Page from '@overflow/commons/api/model/Page';
 import { Pager } from '@overflow/commons/react/component/Pager';
 import * as Utils from '@overflow/commons/util/Utils';
+import PageParams from '@overflow/commons/api/model/PageParams';
+import { SortTableHeaderRow } from '@overflow/commons/react/component/SortTableHeaderRow';
+
 
 export interface StateProps {
   probeId?: string;
   infraList?: Page;
 }
 
+
 export interface DispatchProps {
-  onReadAllByProbe?(probe: Probe, pageNo: string, countPerPage: string): void;
-  onReadAllByDomain?(domain: Domain, pageNo: string, countPerPage: string): void;
+  onReadAllByProbe?(probe: Probe, pageParams: PageParams): void;
+  onReadAllByDomain?(domain: Domain, pageParams: PageParams): void;
   onTargetSelection?(id: string): void;
 }
 
@@ -32,6 +36,10 @@ export interface State {
 export class TargetList extends React.Component<Props, State> {
 
   private countPerPage: number = 10;
+  private sortCol: string = 'id';
+  private sortDirection: string = 'descending';
+  private pageNo: number = 0;
+
   constructor(props: Props, context: State) {
     super(props, context);
     this.state = {
@@ -41,21 +49,28 @@ export class TargetList extends React.Component<Props, State> {
   }
 
   public componentWillMount(): void {
-    this.getTargetList(0);
+    this.getTargetList();
   }
 
-  public getTargetList(pageNo: number): void {
+  public getTargetList(): void {
+    const pageParams: PageParams = {
+      pageNo: String(this.pageNo),
+      countPerPage: String(this.countPerPage),
+      sortCol: this.sortCol,
+      sortDirection: this.sortDirection,
+    };
+
     if (this.props.probeId === undefined) {
       // FIXME: get domain
       let domain: Domain = {
         id: 1,
       };
-      this.props.onReadAllByDomain(domain, String(pageNo), String(this.countPerPage));
+      this.props.onReadAllByDomain(domain, pageParams);
     } else {
       let probe: Probe = {
         id: Number(this.props.probeId),
       };
-      this.props.onReadAllByProbe(probe, String(pageNo), String(this.countPerPage));
+      this.props.onReadAllByProbe(probe, pageParams);
     }
   }
 
@@ -88,11 +103,12 @@ export class TargetList extends React.Component<Props, State> {
   public onRefreshList = () => {
     console.log('onRefreshList');
     this.setState({ openAddTarget: false });
-    this.getTargetList(0);
+    this.getTargetList();
   }
 
   public handlePaging = (pageNo: number) => {
-    this.getTargetList(pageNo);
+    this.pageNo = pageNo;
+    this.getTargetList();
   }
 
   public handleFilter(filterStr: string): void {
@@ -114,6 +130,13 @@ export class TargetList extends React.Component<Props, State> {
   }
 
   public render(): JSX.Element {
+    let colsmap: Map<string, string> = new Map();
+    colsmap.set('No.', 'id');
+    colsmap.set('Type', 'infraType.name');
+    colsmap.set('Name', 'target.displayName');
+    colsmap.set('Sensor Count', 'sensorCount');
+    colsmap.set('Created at', 'createDate');
+
     if (this.props.infraList === undefined) {
       return null;
     }
@@ -121,15 +144,16 @@ export class TargetList extends React.Component<Props, State> {
       <Container fluid>
         <Button content='Discovery' icon='search' labelPosition='left' floated='right' positive onClick={this.handleAddTarget.bind(this)} />
         <br /><br />
-        <Table celled selectable striped>
+        <Table celled selectable striped sortable>
           <Table.Header>
-            <Table.Row>
+            <SortTableHeaderRow columnMap={colsmap} onHeaderColumnClick={this.handleSort} />
+            {/* <Table.Row>
               <Table.HeaderCell textAlign={'center'}>No</Table.HeaderCell>
               <Table.HeaderCell textAlign={'center'}>Type</Table.HeaderCell>
               <Table.HeaderCell textAlign={'center'}>Name</Table.HeaderCell>
               <Table.HeaderCell textAlign={'center'} collapsing>Sensor Count</Table.HeaderCell>
               <Table.HeaderCell textAlign={'center'}>Created at</Table.HeaderCell>
-            </Table.Row>
+            </Table.Row> */}
           </Table.Header>
 
           <Table.Body>
@@ -172,5 +196,12 @@ export class TargetList extends React.Component<Props, State> {
 
     this.props.onTargetSelection(String(infra.id));
   }
+
+  private handleSort = (col: string, direction: string): void => {
+    console.log(col + ' || direction:' + direction);
+    this.sortCol = col;
+    this.sortDirection = direction;
+    this.getTargetList();
+  }
 }
 

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

@@ -4,18 +4,19 @@ import Infra from '@overflow/infra/api/model/Infra';
 
 import * as ReadAllByDomainActionTypes from '../action/read_all_by_domain';
 import ReadAllByDomainState, { defaultState as ReadAllByDomainDefaultState } from '../state/ReadAllByDomain';
+import Page from '@overflow/commons/api/model/Page';
 
 const reducer: ReducersMapObject = {
   [ReadAllByDomainActionTypes.REQUEST_SUCCESS]:
-  (state: ReadAllByDomainState = ReadAllByDomainDefaultState, action: Action<Infra>):
+  (state: ReadAllByDomainState = ReadAllByDomainDefaultState, action: Action<Page>):
     ReadAllByDomainState => {
     return {
       ...state,
-      infraList: <Infra[]>action.payload,
+      infraList: <Page>action.payload,
     };
   },
   [ReadAllByDomainActionTypes.REQUEST_FAILURE]:
-  (state: ReadAllByDomainState = ReadAllByDomainDefaultState, action: Action<Infra>):
+  (state: ReadAllByDomainState = ReadAllByDomainDefaultState, action: Action<Error>):
     ReadAllByDomainState => {
     return state;
   },

src/ts/@overflow/target/redux/state/ReadAllByDomain.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;
 }