Merge remote-tracking branch 'origin/master'

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/sensor/react/components/SensorConfiguration.tsx

@@ -1,6 +1,26 @@
 import * as React from 'react';
-import { Icon, Step, Button, Table, Radio, Form, Container, Checkbox } from 'semantic-ui-react';
+import {
-import { Grid, Image, Label, Segment, Dropdown, Input, List, Accordion, Loader } from 'semantic-ui-react';
+  Icon,
+  Step,
+  Button,
+  Table,
+  Radio,
+  Form,
+  Container,
+  Checkbox,
+} from 'semantic-ui-react';
+import {
+  Grid,
+  Image,
+  Label,
+  Segment,
+  Dropdown,
+  Input,
+  List,
+  Accordion,
+  Loader,
+  DropdownItemProps,
+} from 'semantic-ui-react';
 
 import MetaCrawler from '@overflow/meta/api/model/MetaCrawler';
 import Infra from '@overflow/infra/api/model/Infra';
@@ -17,7 +37,7 @@ export interface SensorConfigurationStateProps {
 
 export interface SensorConfigurationDispatchProps {
   onReadAllTargetByDomain?(domain: Domain): void;
-  onReadInfra?(infraId: number ): void;
+  onReadInfra?(infraId: number): void;
 }
 
 export interface SensorConfigurationState {
@@ -36,8 +56,8 @@ export class SensorConfiguration extends React.Component<SensorConfigurationProp
   }
 
   public componentWillMount(): void {
-    if(this.props.infraId === undefined) {
+    if (this.props.infraId === undefined) {
-      this.props.onReadAllTargetByDomain({id: 1});
+      this.props.onReadAllTargetByDomain({ id: 1 });
     } else {
       this.props.onReadInfra(this.props.infraId);
     }
@@ -55,7 +75,7 @@ export class SensorConfiguration extends React.Component<SensorConfigurationProp
     <Segment vertical><SensorItemTree crawlerId={this.state.selectedCrawlerId} /></Segment>, <ETCSelector />];
 
     return (
-      <ConfigStepper steps={steps} infra={this.props.infra} infraList={this.props.infraList}/>
+      <ConfigStepper steps={steps} infra={this.props.infra} infraList={this.props.infraList} />
     );
   }
 }
@@ -73,6 +93,8 @@ export interface ConfigStepperState {
 
 export class ConfigStepper extends React.Component<ConfigStepperProps, ConfigStepperState> {
 
+  private selectOptions: Array<DropdownItemProps>;
+
   constructor(props: ConfigStepperProps, context: ConfigStepperState) {
     super(props, context);
     this.state = {
@@ -80,6 +102,24 @@ export class ConfigStepper extends React.Component<ConfigStepperProps, ConfigSte
     };
   }
 
+  public convertInfraList(): void {
+
+    let selectionOptions: Array<DropdownItemProps> = new Array;
+
+    for (let infra of this.props.infraList) {
+
+      let option = {
+        // key: crawler.id,
+        text: infra.target.displayName,
+        value: infra.target.id,
+        icon: 'check', // or close?
+      };
+      selectionOptions.push(option);
+
+    }
+    this.selectOptions = selectionOptions;
+  }
+
   public handleActive(idx: number): boolean {
     if (this.state.currentStep === idx) {
       return true;
@@ -142,7 +182,7 @@ export class ConfigStepper extends React.Component<ConfigStepperProps, ConfigSte
 
   public renderInfraList(): JSX.Element[] {
 
-    if(this.props.infraList === undefined) {
+    if (this.props.infraList === undefined) {
       return null;
     }
 

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}