problems: handle page size change

src/panel-triggers/components/Problems.tsx

@@ -1,6 +1,7 @@
 import React, { PureComponent } from 'react';
 import ReactTable from 'react-table';
 import classNames from 'classnames';
+import _ from 'lodash';
 import * as utils from '../../datasource-zabbix/utils';
 import { ProblemsPanelOptions, Trigger, ZBXEvent, GFTimeRange, RTCell, ZBXTag } from '../types';
 import EventTag from './EventTag';
@@ -12,10 +13,12 @@ export interface ProblemListProps {
   panelOptions: ProblemsPanelOptions;
   loading?: boolean;
   timeRange?: GFTimeRange;
+  pageSize?: number;
   fontSize?: number;
   getProblemEvents: (ids: string[]) => ZBXEvent[];
   onProblemAck?: (problem: Trigger, data: AckProblemData) => void;
   onTagClick?: (tag: ZBXTag, datasource: string) => void;
+  onPageSizeChange?: (pageSize: number, pageIndex: number) => void;
 }
 
 interface ProblemListState {
@@ -43,6 +46,12 @@ export class ProblemList extends PureComponent<ProblemListProps, ProblemListStat
     return this.props.onProblemAck(problem, data);
   }
 
+  handlePageSizeChange = (pageSize, pageIndex) => {
+    if (this.props.onPageSizeChange) {
+      this.props.onPageSizeChange(pageSize, pageIndex);
+    }
+  }
+
   buildColumns() {
     const result = [];
     const options = this.props.panelOptions;
@@ -101,8 +110,13 @@ export class ProblemList extends PureComponent<ProblemListProps, ProblemListStat
     // console.log(this.props.problems);
     const columns = this.buildColumns();
     this.rootWidth = this.rootRef && this.rootRef.clientWidth;
-    const { fontSize } = this.props;
+    const { pageSize, fontSize } = this.props;
     const panelClass = classNames('panel-problems', { [`font-size--${fontSize}`]: fontSize });
+    let pageSizeOptions = [5, 10, 20, 25, 50, 100];
+    if (pageSize) {
+      pageSizeOptions.push(pageSize);
+      pageSizeOptions = _.sortBy(pageSizeOptions);
+    }
 
     return (
       <div className={panelClass} ref={this.setRootRef}>
@@ -110,6 +124,8 @@ export class ProblemList extends PureComponent<ProblemListProps, ProblemListStat
           data={this.props.problems}
           columns={columns}
           defaultPageSize={10}
+          pageSize={pageSize}
+          pageSizeOptions={pageSizeOptions}
           minRows={0}
           loading={this.props.loading}
           noDataText="No problems found"
@@ -125,6 +141,7 @@ export class ProblemList extends PureComponent<ProblemListProps, ProblemListStat
           expanded={this.getExpandedPage(this.state.page)}
           onExpandedChange={this.handleExpandedChange}
           onPageChange={page => this.setState({ page })}
+          onPageSizeChange={this.handlePageSizeChange}
         />
       </div>
     );

src/panel-triggers/triggers_panel_ctrl.js

@@ -543,6 +543,14 @@ export class TriggerPanelCtrl extends PanelCtrl {
     return this.currentTriggersPage;
   }
 
+  handlePageSizeChange(pageSize, pageIndex) {
+    this.panel.pageSize = pageSize;
+    this.pageIndex = pageIndex;
+    this.scope.$apply(() => {
+      this.render();
+    });
+  }
+
   formatHostName(trigger) {
     let host = "";
     if (this.panel.hostField && this.panel.hostTechNameField) {
@@ -727,6 +735,8 @@ export class TriggerPanelCtrl extends PanelCtrl {
       const fontSize = parseInt(panel.fontSize.slice(0, panel.fontSize.length - 1));
       const fontSizeProp = fontSize && fontSize !== 100 ? fontSize : null;
 
+      const pageSize = panel.pageSize || 10;
+
       let panelOptions = {};
       for (let prop in PANEL_DEFAULTS) {
         panelOptions[prop] = ctrl.panel[prop];
@@ -736,8 +746,10 @@ export class TriggerPanelCtrl extends PanelCtrl {
         panelOptions,
         timeRange: { timeFrom, timeTo },
         loading: ctrl.loading,
+        pageSize: pageSize,
         fontSize: fontSizeProp,
         getProblemEvents: ctrl.getProblemEvents.bind(ctrl),
+        onPageSizeChange: ctrl.handlePageSizeChange.bind(ctrl),
         onProblemAck: (trigger, data) => {
           const message = data.message;
           return ctrl.acknowledgeTrigger(trigger, message);