problems: show status icon

src/panel-triggers/components/GFHeartIcon.tsx

@@ -0,0 +1,19 @@
+import React from 'react';
+import classNames from 'classnames';
+
+interface GFHeartIconProps {
+  status: 'critical' | 'warning' | 'online' | 'ok' | 'problem';
+  className?: string;
+}
+
+export default function GFHeartIcon(props: GFHeartIconProps) {
+  const status = props.status;
+  const className = classNames("icon-gf", props.className,
+    { "icon-gf-critical": status === 'critical' || status === 'problem' },
+    { "icon-gf-warning": status === 'warning' },
+    { "icon-gf-online": status === 'online' || status === 'ok' },
+  );
+  return (
+    <i className={className}></i>
+  );
+}

src/panel-triggers/components/Problems.tsx

@@ -7,6 +7,7 @@ import { ProblemsPanelOptions, Trigger, ZBXEvent, GFTimeRange, RTCell, ZBXTag, T
 import EventTag from './EventTag';
 import ProblemDetails from './ProblemDetails';
 import { AckProblemData } from './Modal';
+import GFHeartIcon from './GFHeartIcon';
 
 export interface ProblemListProps {
   problems: Trigger[];
@@ -84,22 +85,32 @@ export class ProblemList extends PureComponent<ProblemListProps, ProblemListStat
     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);
+
     const columns = [
       { Header: 'Host', accessor: 'host', show: options.hostField },
       { Header: 'Host (Technical Name)', accessor: 'hostTechName', show: options.hostTechNameField },
       { Header: 'Host Groups', accessor: 'groups', show: options.hostGroups, Cell: GroupCell },
       { Header: 'Proxy', accessor: 'proxy', show: options.hostProxy },
-      { Header: 'Severity', show: options.severityField, className: 'problem-severity', width: 120,
+      {
+        Header: 'Severity', show: options.severityField, className: 'problem-severity', width: 120,
         accessor: problem => problem.priority,
         id: 'severity',
         Cell: props => SeverityCell(props, options.triggerSeverity),
       },
+      {
+        Header: '', id: 'statusIcon', show: options.statusIcon, className: 'problem-status-icon', width: 50,
+        accessor: 'value',
+        Cell: statusIconCell,
+      },
       { Header: 'Status', accessor: 'value', show: options.statusField, width: 100, Cell: statusCell },
       { Header: 'Problem', accessor: 'description', minWidth: 200, Cell: ProblemCell},
-      { Header: 'Tags', accessor: 'tags', show: options.showTags, className: 'problem-tags',
+      {
+        Header: 'Tags', accessor: 'tags', show: options.showTags, className: 'problem-tags',
         Cell: props => <TagCell {...props} onTagClick={this.handleTagClick} />
       },
-      { Header: 'Time', className: 'last-change', width: timeColWidth,
+      {
+        Header: 'Time', className: 'last-change', width: timeColWidth,
         accessor: 'lastchangeUnix',
         id: 'lastchange',
         Cell: row => row.original.lastchange,
@@ -171,7 +182,6 @@ const DEFAULT_OK_COLOR = 'rgb(56, 189, 113)';
 const DEFAULT_PROBLEM_COLOR = 'rgb(215, 0, 0)';
 
 function StatusCell(props: RTCell<Trigger>, okColor = DEFAULT_OK_COLOR, problemColor = DEFAULT_PROBLEM_COLOR, highlightNewerThan?: string) {
-  // console.log(props);
   const status = props.value === '0' ? 'RESOLVED' : 'PROBLEM';
   const color = props.value === '0' ? okColor : problemColor;
   let newProblem = false;
@@ -183,6 +193,20 @@ function StatusCell(props: RTCell<Trigger>, okColor = DEFAULT_OK_COLOR, problemC
   );
 }
 
+function StatusIconCell(props: RTCell<Trigger>, highlightNewerThan?: string) {
+  const status = props.value === '0' ? 'ok' : 'problem';
+  let newProblem = false;
+  if (highlightNewerThan) {
+    newProblem = isNewProblem(props.original, highlightNewerThan);
+  }
+  const className = classNames('zbx-problem-status-icon',
+    { 'problem-status--new': newProblem },
+    { 'zbx-problem': props.value === '1' },
+    { 'zbx-ok': props.value === '0' },
+  );
+  return <GFHeartIcon status={status} className={className} />;
+}
+
 function GroupCell(props: RTCell<Trigger>) {
   let groups = "";
   if (props.value && props.value.length) {

src/panel-triggers/partials/options_tab.html

@@ -37,6 +37,12 @@
       checked="ctrl.panel.statusField"
       on-change="ctrl.render()">
     </gf-form-switch>
+    <gf-form-switch class="gf-form"
+      label-class="width-9"
+      label="Status Icon"
+      checked="ctrl.panel.statusIcon"
+      on-change="ctrl.render()">
+    </gf-form-switch>
     <gf-form-switch class="gf-form"
       label-class="width-9"
       label="Severity"

src/panel-triggers/triggers_panel_ctrl.js

@@ -44,6 +44,7 @@ export const PANEL_DEFAULTS = {
   hostProxy: false,
   showTags: true,
   statusField: true,
+  statusIcon: false,
   severityField: true,
   descriptionField: true,
   descriptionAtNewLine: false,
@@ -550,6 +551,48 @@ export class TriggerPanelCtrl extends PanelCtrl {
     }
   }
 
+  getAlertIconClass(trigger) {
+    let iconClass = '';
+    if (trigger.value === '1') {
+      if (trigger.priority >= 3) {
+        iconClass = 'icon-gf-critical';
+      } else {
+        iconClass = 'icon-gf-warning';
+      }
+    } else {
+      iconClass = 'icon-gf-online';
+    }
+
+    if (this.panel.highlightNewEvents && this.isNewTrigger(trigger)) {
+      iconClass += ' zabbix-trigger--blinked';
+    }
+    return iconClass;
+  }
+
+  getAlertIconClassBySeverity(triggerSeverity) {
+    let iconClass = 'icon-gf-warning';
+    if (triggerSeverity.priority >= 3) {
+      iconClass = 'icon-gf-critical';
+    }
+    return iconClass;
+  }
+
+  getAlertStateClass(trigger) {
+    let statusClass = '';
+
+    if (trigger.value === '1') {
+      statusClass = 'alert-state-critical';
+    } else {
+      statusClass = 'alert-state-ok';
+    }
+
+    if (this.panel.highlightNewEvents && this.isNewTrigger(trigger)) {
+      statusClass += ' zabbix-trigger--blinked';
+    }
+
+    return statusClass;
+  }
+
   resetResizedColumns() {
     this.panel.resizedColumns = [];
     this.render();

src/panel-triggers/types.ts

@@ -9,6 +9,7 @@ export interface ProblemsPanelOptions {
   hostProxy?: boolean;
   showTags?: boolean;
   statusField?: boolean;
+  statusIcon?: boolean;
   severityField?: boolean;
   descriptionField?: boolean;
   descriptionAtNewLine?: boolean;

src/sass/_panel-problems.scss

@@ -66,6 +66,7 @@
       .rt-tr {
         .rt-td {
           border: 0;
+          transition: 0s;
         }
 
         // &:hover {
@@ -171,6 +172,26 @@
       &.last-change {
         text-align: left;
       }
+
+      &.problem-status-icon {
+        padding: 0;
+        margin-top: 0;
+        font-size: 1.5em;
+
+        i {
+          // margin: 0 1.2em;
+          width: 100%;
+          padding-left: 0.6em;
+          text-align: center;
+
+          &.zbx-problem {
+            color: $problem-icon-problem-color;
+          }
+          &.zbx-ok {
+            color: $problem-icon-ok-color;
+          }
+        }
+      }
     }
 
     .comments-icon {

src/sass/_variables.dark.scss

@@ -29,4 +29,7 @@ $problem-event-core: #000000;
 $problem-event-ok-color: #38bd71;
 $problem-event-problem-color: #d70000;
 
+$problem-icon-problem-color: rgb(163, 16, 0);
+$problem-icon-ok-color: #629e51;
+
 $problem-container-shadow: rgba($gray-2, 0.2)

src/sass/_variables.light.scss

@@ -29,4 +29,7 @@ $problem-event-core: $gray-6;
 $problem-event-ok-color: #2baf63;
 $problem-event-problem-color: #d70000;
 
+$problem-icon-problem-color: rgb(163, 16, 0);
+$problem-icon-ok-color: #629e51;
+
 $problem-container-shadow: rgba($gray-2, 0.5)