problems: able to save resized columns

src/panel-triggers/components/Problems.tsx

@@ -3,7 +3,7 @@ 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, TriggerSeverity } from '../types';
+import { ProblemsPanelOptions, Trigger, ZBXEvent, GFTimeRange, RTCell, ZBXTag, TriggerSeverity, RTResized } from '../types';
 import EventTag from './EventTag';
 import ProblemDetails from './ProblemDetails';
 import { AckProblemData } from './Modal';
@@ -19,6 +19,7 @@ export interface ProblemListProps {
   onProblemAck?: (problem: Trigger, data: AckProblemData) => void;
   onTagClick?: (tag: ZBXTag, datasource: string) => void;
   onPageSizeChange?: (pageSize: number, pageIndex: number) => void;
+  onColumnResize?: (newResized: RTResized) => void;
 }
 
 interface ProblemListState {
@@ -52,6 +53,30 @@ export class ProblemList extends PureComponent<ProblemListProps, ProblemListStat
     }
   }
 
+  handleResizedChange = (newResized, event) => {
+    if (this.props.onColumnResize) {
+      this.props.onColumnResize(newResized);
+    }
+  }
+
+  handleExpandedChange = expanded => {
+    const nextExpanded = { ...this.state.expanded };
+    nextExpanded[this.state.page] = expanded;
+    this.setState({
+      expanded: nextExpanded
+    });
+  }
+
+  handleTagClick = (tag: ZBXTag, datasource: string) => {
+    if (this.props.onTagClick) {
+      this.props.onTagClick(tag, datasource);
+    }
+  }
+
+  getExpandedPage = (page: number) => {
+    return this.state.expanded[page] || {};
+  }
+
   buildColumns() {
     const result = [];
     const options = this.props.panelOptions;
@@ -90,28 +115,10 @@ export class ProblemList extends PureComponent<ProblemListProps, ProblemListStat
     return result;
   }
 
-  getExpandedPage = (page: number) => {
-    return this.state.expanded[page] || {};
-  }
-
-  handleExpandedChange = expanded => {
-    const nextExpanded = {...this.state.expanded};
-    nextExpanded[this.state.page] = expanded;
-    this.setState({
-      expanded: nextExpanded
-    });
-  }
-
-  handleTagClick = (tag: ZBXTag, datasource: string) => {
-    if (this.props.onTagClick) {
-      this.props.onTagClick(tag, datasource);
-    }
-  }
-
   render() {
     const columns = this.buildColumns();
     this.rootWidth = this.rootRef && this.rootRef.clientWidth;
-    const { pageSize, fontSize } = this.props;
+    const { pageSize, fontSize, panelOptions } = this.props;
     const panelClass = classNames('panel-problems', { [`font-size--${fontSize}`]: fontSize });
     let pageSizeOptions = [5, 10, 20, 25, 50, 100];
     if (pageSize) {
@@ -127,6 +134,7 @@ export class ProblemList extends PureComponent<ProblemListProps, ProblemListStat
           defaultPageSize={10}
           pageSize={pageSize}
           pageSizeOptions={pageSizeOptions}
+          resized={panelOptions.resizedColumns}
           minRows={0}
           loading={this.props.loading}
           noDataText="No problems found"
@@ -143,6 +151,7 @@ export class ProblemList extends PureComponent<ProblemListProps, ProblemListStat
           onExpandedChange={this.handleExpandedChange}
           onPageChange={page => this.setState({ page })}
           onPageSizeChange={this.handlePageSizeChange}
+          onResizedChange={this.handleResizedChange}
         />
       </div>
     );

src/panel-triggers/partials/options_tab.html

@@ -160,6 +160,13 @@
         ng-model="ctrl.panel.lastChangeFormat"
         ng-change="ctrl.render()">
     </div>
+    <div class="gf-form">
+      <div class="gf-form-button">
+        <button class="btn btn-inverse width-16 panel-options-button" ng-click="ctrl.resetResizedColumns()">
+          Reset resized columns
+        </button>
+      </div>
+    </div>
   </div>
 
   <div class="section gf-form-group">

src/panel-triggers/triggers_panel_ctrl.js

@@ -61,6 +61,7 @@ export const PANEL_DEFAULTS = {
   highlightNewerThan: '1h',
   customLastChangeFormat: false,
   lastChangeFormat: "",
+  resizedColumns: [],
   // Triggers severity and colors
   triggerSeverity: DEFAULT_SEVERITY,
   okEventColor: 'rgb(56, 189, 113)',
@@ -541,6 +542,11 @@ export class TriggerPanelCtrl extends PanelCtrl {
     }
   }
 
+  resetResizedColumns() {
+    this.panel.resizedColumns = [];
+    this.render();
+  }
+
   acknowledgeTrigger(trigger, message) {
     let eventid = trigger.lastEvent ? trigger.lastEvent.eventid : null;
     let grafana_user = this.contextSrv.user.name;
@@ -571,6 +577,13 @@ export class TriggerPanelCtrl extends PanelCtrl {
     });
   }
 
+  handleColumnResize(newResized) {
+    this.panel.resizedColumns = newResized;
+    this.scope.$apply(() => {
+      this.render();
+    });
+  }
+
   link(scope, elem, attrs, ctrl) {
     let panel = ctrl.panel;
     let triggerList = ctrl.triggerList;
@@ -605,6 +618,7 @@ export class TriggerPanelCtrl extends PanelCtrl {
         fontSize: fontSizeProp,
         getProblemEvents: ctrl.getProblemEvents.bind(ctrl),
         onPageSizeChange: ctrl.handlePageSizeChange.bind(ctrl),
+        onColumnResize: ctrl.handleColumnResize.bind(ctrl),
         onProblemAck: (trigger, data) => {
           const message = data.message;
           return ctrl.acknowledgeTrigger(trigger, message);

src/panel-triggers/types.ts

@@ -32,6 +32,7 @@ export interface ProblemsPanelOptions {
   highlightNewerThan?: string;
   customLastChangeFormat?: boolean;
   lastChangeFormat?: string;
+  resizedColumns?: RTResized;
   // Triggers severity and colors
   triggerSeverity?: TriggerSeverity[];
   okEventColor?: TriggerColor;
@@ -209,3 +210,10 @@ export interface RTCell<T> extends RTRow<T> {
   /** the resolved styles for this cell */
   styles: any;
 }
+
+export interface RTResize {
+  id: string;
+  value: number;
+}
+
+export type RTResized = RTResize[];

src/sass/_panel-problems.scss

@@ -559,6 +559,10 @@
   }
 }
 
+.panel-options-button {
+  text-align: left;
+}
+
 @keyframes slide-down {
   0% {
     opacity: 0;