problems: show age field

src/panel-triggers/components/Problems.tsx

@@ -2,6 +2,7 @@ import React, { PureComponent } from 'react';
 import ReactTable from 'react-table';
 import classNames from 'classnames';
 import _ from 'lodash';
+import moment from 'moment';
 import * as utils from '../../datasource-zabbix/utils';
 import { ProblemsPanelOptions, Trigger, ZBXEvent, GFTimeRange, RTCell, ZBXTag, TriggerSeverity, RTResized } from '../types';
 import EventTag from './EventTag';
@@ -81,8 +82,6 @@ export class ProblemList extends PureComponent<ProblemListProps, ProblemListStat
   buildColumns() {
     const result = [];
     const options = this.props.panelOptions;
-    const problems = this.props.problems;
-    const timeColWidth = problems && problems.length ? problems[0].lastchange.length * 9 : 160;
     const highlightNewerThan = options.highlightNewEvents && options.highlightNewerThan;
     const statusCell = props => StatusCell(props, options.okEventColor, DEFAULT_PROBLEM_COLOR, highlightNewerThan);
     const statusIconCell = props => StatusIconCell(props, highlightNewerThan);
@@ -110,10 +109,14 @@ export class ProblemList extends PureComponent<ProblemListProps, ProblemListStat
         Cell: props => <TagCell {...props} onTagClick={this.handleTagClick} />
       },
       {
-        Header: 'Time', className: 'last-change', width: timeColWidth,
-        accessor: 'lastchangeUnix',
+        Header: 'Age', className: 'problem-age', width: 100, show: options.ageField, accessor: 'lastchangeUnix',
+        id: 'age',
+        Cell: AgeCell,
+      },
+      {
+        Header: 'Time', className: 'last-change', width: 150, accessor: 'lastchangeUnix',
         id: 'lastchange',
-        Cell: row => row.original.lastchange,
+        Cell: props => LastChangeCell(props, options.customLastChangeFormat && options.lastChangeFormat),
       },
       { Header: '', className: 'custom-expander', width: 60, expander: true, Expander: CustomExpander },
     ];
@@ -236,6 +239,22 @@ function ProblemCell(props: RTCell<Trigger>) {
   );
 }
 
+function AgeCell(props: RTCell<Trigger>) {
+  const problem = props.original;
+  const timestamp = moment.unix(problem.lastchangeUnix);
+  const age = timestamp.fromNow(true);
+  return <span>{age}</span>;
+}
+
+function LastChangeCell(props: RTCell<Trigger>, customFormat?: string) {
+  const DEFAULT_TIME_FORMAT = "DD MMM YYYY HH:mm:ss";
+  const problem = props.original;
+  const timestamp = moment.unix(problem.lastchangeUnix);
+  const format = customFormat || DEFAULT_TIME_FORMAT;
+  const lastchange = timestamp.format(format);
+  return <span>{lastchange}</span>;
+}
+
 interface TagCellProps extends RTCell<Trigger> {
   onTagClick: (tag: ZBXTag, datasource: string) => void;
 }

src/panel-triggers/partials/options_tab.html

@@ -49,6 +49,12 @@
       checked="ctrl.panel.severityField"
       on-change="ctrl.render()">
     </gf-form-switch>
+    <gf-form-switch class="gf-form"
+      label-class="width-9"
+      label="Age"
+      checked="ctrl.panel.ageField"
+      on-change="ctrl.render()">
+    </gf-form-switch>
     <gf-form-switch class="gf-form"
       label-class="width-9"
       label="Description"

src/panel-triggers/triggers_panel_ctrl.js

@@ -46,6 +46,7 @@ export const PANEL_DEFAULTS = {
   statusField: true,
   statusIcon: false,
   severityField: true,
+  ageField: false,
   descriptionField: true,
   descriptionAtNewLine: false,
   // Options
@@ -431,52 +432,7 @@ export class TriggerPanelCtrl extends PanelCtrl {
       trigger.comments = trigger.comments.replace('\n', '<br>');
     }
 
-    // Format last change and age
     trigger.lastchangeUnix = Number(trigger.lastchange);
-    trigger = this.setTriggerLastChange(trigger);
-    trigger = this.setTriggerSeverity(trigger);
-    return trigger;
-  }
-
-  updateTriggerFormat(trigger) {
-    trigger = this.setTriggerLastChange(trigger);
-    trigger = this.setTriggerSeverity(trigger);
-    return trigger;
-  }
-
-  setTriggerSeverity(trigger) {
-    if (trigger.value === '1') {
-      // Problem state
-      trigger.color = this.panel.triggerSeverity[trigger.priority].color;
-    } else {
-      // OK state
-      trigger.color = this.panel.okEventColor;
-    }
-    trigger.severity = this.panel.triggerSeverity[trigger.priority].severity;
-
-    // Mark acknowledged triggers with different color
-    if (this.panel.markAckEvents && trigger.acknowledges && trigger.acknowledges.length) {
-      trigger.color = this.panel.ackEventColor;
-    }
-
-    return trigger;
-  }
-
-  setTriggerLastChange(trigger) {
-    if (!trigger.lastchangeUnix) {
-      trigger.lastchange = "";
-      trigger.age = "";
-      return trigger;
-    }
-
-    let timestamp = moment.unix(trigger.lastchangeUnix);
-    if (this.panel.customLastChangeFormat) {
-      // User defined format
-      trigger.lastchange = timestamp.format(this.panel.lastChangeFormat);
-    } else {
-      trigger.lastchange = timestamp.format(this.defaultTimeFormat);
-    }
-    trigger.age = timestamp.fromNow(true);
     return trigger;
   }
 

src/panel-triggers/types.ts

@@ -11,6 +11,7 @@ export interface ProblemsPanelOptions {
   statusField?: boolean;
   statusIcon?: boolean;
   severityField?: boolean;
+  ageField?: boolean;
   descriptionField?: boolean;
   descriptionAtNewLine?: boolean;
   // Options