diff --git a/src/panel-triggers/components/Problems.tsx b/src/panel-triggers/components/Problems.tsx index 9d079ed..83d66cc 100644 --- a/src/panel-triggers/components/Problems.tsx +++ b/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 StatusCell(props, options.okEventColor, DEFAULT_PROBLEM_COLOR, highlightNewerThan); const statusIconCell = props => StatusIconCell(props, highlightNewerThan); @@ -110,10 +109,14 @@ export class ProblemList extends PureComponent }, { - 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) { ); } +function AgeCell(props: RTCell) { + const problem = props.original; + const timestamp = moment.unix(problem.lastchangeUnix); + const age = timestamp.fromNow(true); + return {age}; +} + +function LastChangeCell(props: RTCell, 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 {lastchange}; +} + interface TagCellProps extends RTCell { onTagClick: (tag: ZBXTag, datasource: string) => void; } diff --git a/src/panel-triggers/partials/options_tab.html b/src/panel-triggers/partials/options_tab.html index 7ff1efd..59cd979 100644 --- a/src/panel-triggers/partials/options_tab.html +++ b/src/panel-triggers/partials/options_tab.html @@ -49,6 +49,12 @@ checked="ctrl.panel.severityField" on-change="ctrl.render()"> + + '); } - // 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; } diff --git a/src/panel-triggers/types.ts b/src/panel-triggers/types.ts index 883a954..aebac58 100644 --- a/src/panel-triggers/types.ts +++ b/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