From 34998f50c79732eea769a3b1cacc2b3e2dde5a60 Mon Sep 17 00:00:00 2001
From: Alexander Zobnin <alexanderzobnin@gmail.com>
Date: Thu, 27 Dec 2018 20:07:25 +0300
Subject: [PATCH] problems: able to save resized columns

---
 src/panel-triggers/components/Problems.tsx   | 49 ++++++++++++--------
 src/panel-triggers/partials/options_tab.html |  7 +++
 src/panel-triggers/triggers_panel_ctrl.js    | 14 ++++++
 src/panel-triggers/types.ts                  |  8 ++++
 src/sass/_panel-problems.scss                |  4 ++
 5 files changed, 62 insertions(+), 20 deletions(-)

diff --git a/src/panel-triggers/components/Problems.tsx b/src/panel-triggers/components/Problems.tsx
index a25b752..67a6b45 100644
--- a/src/panel-triggers/components/Problems.tsx
+++ b/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>
     );
diff --git a/src/panel-triggers/partials/options_tab.html b/src/panel-triggers/partials/options_tab.html
index c01feef..0727ccb 100644
--- a/src/panel-triggers/partials/options_tab.html
+++ b/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">
diff --git a/src/panel-triggers/triggers_panel_ctrl.js b/src/panel-triggers/triggers_panel_ctrl.js
index b44d476..5762faf 100644
--- a/src/panel-triggers/triggers_panel_ctrl.js
+++ b/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);
diff --git a/src/panel-triggers/types.ts b/src/panel-triggers/types.ts
index 13feaba..c7d7474 100644
--- a/src/panel-triggers/types.ts
+++ b/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[];
diff --git a/src/sass/_panel-problems.scss b/src/sass/_panel-problems.scss
index 719b68a..fd245db 100644
--- a/src/sass/_panel-problems.scss
+++ b/src/sass/_panel-problems.scss
@@ -559,6 +559,10 @@
   }
 }
 
+.panel-options-button {
+  text-align: left;
+}
+
 @keyframes slide-down {
   0% {
     opacity: 0;