pager util

src/ts/@overflow/commons/react/component/Pager.tsx

@@ -0,0 +1,94 @@
+import * as React from 'react';
+import {
+    Menu,
+    Icon,
+    Container,
+} from 'semantic-ui-react';
+import Page from '@overflow/commons/api/model/Page';
+
+export interface Props {
+    page: Page;
+    onPageChange(pageNo: number): void;
+}
+
+export interface State {
+    current: number;
+}
+
+export class Pager extends React.Component<Props, State> {
+
+    private countPerPage: number = 10;
+
+    constructor(props: Props, context: State) {
+        super(props, context);
+        this.state = {
+            current: 0,
+        };
+    }
+
+    public handlePaging = (pageNo: number) => {
+        if (pageNo === this.state.current) {
+            return;
+        }
+        this.setState({
+            current: pageNo,
+        });
+        this.props.onPageChange(pageNo);
+    }
+
+    public handlePrevPage = (pn: string) => {
+        let pageNo = 0;
+        if (pn === 'P') {
+            pageNo = this.state.current - 1;
+        } else if (pn === 'N') {
+            pageNo = this.state.current + 1;
+        }
+        this.setState({
+            current: pageNo,
+        });
+        this.props.onPageChange(pageNo);
+    }
+
+    public renderPagination = (): JSX.Element => {
+        let pageObj = this.props.page;
+
+        if (pageObj === undefined) {
+            return null;
+        }
+        let keyIdx = 0;
+        let totalPage = pageObj.totalPages;
+        let currPage = pageObj.number;
+        let elems = new Array;
+        let prevIndicator = pageObj.first ?
+            <Menu.Item as='a' key={keyIdx} icon disabled><Icon name='left chevron' /></Menu.Item> :
+            <Menu.Item as='a' key={keyIdx} icon onClick={this.handlePrevPage.bind(this, 'P')}>
+                <Icon name='left chevron' />
+            </Menu.Item>;
+        elems.push(prevIndicator);
+        for (let i = 0; i < totalPage; i++) {
+            if (i === currPage) {
+                elems.push(<Menu.Item key={++keyIdx} active as='a' onClick={this.handlePaging.bind(this, i)}><b>{i + 1}</b></Menu.Item>);
+            } else {
+                elems.push(<Menu.Item key={++keyIdx} as='a' onClick={this.handlePaging.bind(this, i)}>{i + 1}</Menu.Item>);
+            }
+        }
+        let nextIndicator = pageObj.last ?
+            <Menu.Item as='a' key={++keyIdx} icon disabled><Icon name='right chevron' /></Menu.Item> :
+            <Menu.Item as='a' key={++keyIdx} icon onClick={this.handlePrevPage.bind(this, 'N')}>
+                <Icon name='right chevron' />
+            </Menu.Item>;
+        elems.push(nextIndicator);
+
+        return <Menu floated='right' pagination>
+            {elems}
+        </Menu>;
+    }
+
+    public render(): JSX.Element {
+        return (
+            <div>
+                {this.renderPagination()}
+            </div>
+        );
+    }
+}

src/ts/@overflow/history/react/components/HistoryList.tsx

@@ -5,6 +5,8 @@ import Probe from '@overflow/probe/api/model/Probe';
 import History from '@overflow/history/api/model/History';
 import Page from '@overflow/commons/api/model/Page';
 import MetaHistoryType from '@overflow/meta/api/model/MetaHistoryType';
+import { Pager } from '@overflow/commons/react/component/Pager';
+
 
 export interface StateProps {
   histories: Page;
@@ -19,7 +21,6 @@ export interface DispatchProps {
 export type Props = StateProps & DispatchProps;
 
 export interface State {
-  page: number;
   isTypedHistory: boolean;
 }
 
@@ -30,7 +31,6 @@ export class HistoryList extends React.Component<Props, State> {
   constructor(props: Props, context: State) {
     super(props, context);
     this.state = {
-      page: 0,
       isTypedHistory: false,
     };
   }
@@ -85,76 +85,16 @@ export class HistoryList extends React.Component<Props, State> {
   }
 
   public handlePaging = (pageNo: number) => {
-    if (pageNo === this.state.page) {
-      return;
-    }
-    this.setState({
-      page: pageNo,
-    });
     let probe: Probe = {
       id: Number(1),
     };
     if (this.state.isTypedHistory) {
       this.getTypedHistory(pageNo);
     } else {
-      // this.props.onReadAllByProbe(probe, String(pageNo), String(this.countPerPage));
       this.getAllHistory(pageNo);
     }
   }
 
-  public handlePrevPage = (pn: string) => {
-    let p = 0;
-    if (pn === 'P') {
-      p = this.state.page - 1;
-    } else if (pn === 'N') {
-      p = this.state.page + 1;
-    }
-    this.setState({
-      page: p,
-    });
-    let probe: Probe = {
-      id: Number(1),
-    };
-    if (this.state.isTypedHistory) {
-      this.getTypedHistory(p);
-    } else {
-      this.getAllHistory(p);
-    }
-  }
-
-  public renderPagination = (pageObj: Page): (JSX.Element | JSX.Element[]) => {
-    if (pageObj === undefined) {
-      return null;
-    }
-    let keyIdx = 0;
-    let totalPage = pageObj.totalPages;
-    let currPage = pageObj.number;
-    let elems = new Array;
-    let prevIndicator = pageObj.first ?
-      <Menu.Item as='a' key={keyIdx} icon disabled><Icon name='left chevron' /></Menu.Item> :
-      <Menu.Item as='a' key={keyIdx} icon onClick={this.handlePrevPage.bind(this, 'P')}>
-        <Icon name='left chevron' />
-      </Menu.Item>;
-    elems.push(prevIndicator);
-    for (let i = 0; i < totalPage; i++) {
-      if (i === currPage) {
-        elems.push(<Menu.Item key={++keyIdx} active as='a' onClick={this.handlePaging.bind(this, i)}><b>{i + 1}</b></Menu.Item>);
-      } else {
-        elems.push(<Menu.Item key={++keyIdx} as='a' onClick={this.handlePaging.bind(this, i)}>{i + 1}</Menu.Item>);
-      }
-    }
-    let nextIndicator = pageObj.last ?
-      <Menu.Item as='a' key={++keyIdx} icon disabled><Icon name='right chevron' /></Menu.Item> :
-      <Menu.Item as='a' key={++keyIdx} icon onClick={this.handlePrevPage.bind(this, 'N')}>
-        <Icon name='right chevron' />
-      </Menu.Item>;
-    elems.push(nextIndicator);
-
-    return <Menu floated='right' pagination>
-      {elems}
-    </Menu>;
-  }
-
   public render(): JSX.Element {
     let historyList: JSX.Element = (
       <Container fluid>
@@ -192,7 +132,7 @@ export class HistoryList extends React.Component<Props, State> {
           <Table.Footer>
             <Table.Row>
               <Table.HeaderCell colSpan='3'>
-                {this.renderPagination(this.props.histories)}
+                <Pager page={this.props.histories} onPageChange={this.handlePaging}  />
               </Table.HeaderCell>
             </Table.Row>
           </Table.Footer>

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

@@ -8,7 +8,7 @@ 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 { Pager } from '@overflow/commons/react/component/Pager';
 import * as Utils from '@overflow/commons/util/Utils';
 
 export interface StateProps {
@@ -27,7 +27,6 @@ export type Props = StateProps & DispatchProps;
 export interface State {
   selected: Infra;
   openAddTarget: boolean;
-  page: number;
 }
 
 export class TargetList extends React.Component<Props, State> {
@@ -38,26 +37,25 @@ export class TargetList extends React.Component<Props, State> {
     this.state = {
       selected: null,
       openAddTarget: false,
-      page: 0,
     };
   }
 
   public componentWillMount(): void {
-    this.getTargetList();
+    this.getTargetList(0);
   }
 
-  public getTargetList(): void {
+  public getTargetList(pageNo: number): void {
     if (this.props.probeId === undefined) {
       // FIXME: get domain
       let domain: Domain = {
         id: 1,
       };
-      this.props.onReadAllByDomain(domain, String(0), String(this.countPerPage));
+      this.props.onReadAllByDomain(domain, String(pageNo), String(this.countPerPage));
     } else {
       let probe: Probe = {
         id: Number(this.props.probeId),
       };
-      this.props.onReadAllByProbe(probe, String(0), String(this.countPerPage));
+      this.props.onReadAllByProbe(probe, String(pageNo), String(this.countPerPage));
     }
   }
 
@@ -90,7 +88,11 @@ export class TargetList extends React.Component<Props, State> {
   public onRefreshList = () => {
     console.log('onRefreshList');
     this.setState({ openAddTarget: false });
-    this.getTargetList();
+    this.getTargetList(0);
+  }
+
+  public handlePaging = (pageNo: number) => {
+    this.getTargetList(pageNo);
   }
 
   public handleFilter(filterStr: string): void {
@@ -141,6 +143,13 @@ export class TargetList extends React.Component<Props, State> {
               </Table.Row>
             ))}
           </Table.Body>
+          <Table.Footer>
+            <Table.Row>
+              <Table.HeaderCell colSpan='3'>
+                <Pager page={this.props.infraList} onPageChange={this.handlePaging} />
+              </Table.HeaderCell>
+            </Table.Row>
+          </Table.Footer>
         </Table>
 
         <DiscoveryContainer probeId={1} open={this.state.openAddTarget}