From c4b0c6da0709f8c06b8ba68e64a40b40998a5ba9 Mon Sep 17 00:00:00 2001
From: Alexander Zobnin <alexanderzobnin@gmail.com>
Date: Fri, 28 Dec 2018 19:35:09 +0300
Subject: [PATCH] problems: mark acknowledged problems with different color

---
 src/panel-triggers/components/Problems.tsx | 15 ++++++++++++---
 src/panel-triggers/triggers_panel_ctrl.js  |  3 ++-
 src/panel-triggers/types.ts                |  1 +
 3 files changed, 15 insertions(+), 4 deletions(-)

diff --git a/src/panel-triggers/components/Problems.tsx b/src/panel-triggers/components/Problems.tsx
index 4835cdd..9d079ed 100644
--- a/src/panel-triggers/components/Problems.tsx
+++ b/src/panel-triggers/components/Problems.tsx
@@ -96,7 +96,7 @@ export class ProblemList extends PureComponent<ProblemListProps, ProblemListStat
         Header: 'Severity', show: options.severityField, className: 'problem-severity', width: 120,
         accessor: problem => problem.priority,
         id: 'severity',
-        Cell: props => SeverityCell(props, options.triggerSeverity),
+        Cell: props => SeverityCell(props, options.triggerSeverity, options.markAckEvents, options.ackEventColor),
       },
       {
         Header: '', id: 'statusIcon', show: options.statusIcon, className: 'problem-status-icon', width: 50,
@@ -169,10 +169,19 @@ export class ProblemList extends PureComponent<ProblemListProps, ProblemListStat
   }
 }
 
-function SeverityCell(props: RTCell<Trigger>, problemSeverityDesc: TriggerSeverity[]) {
+function SeverityCell(props: RTCell<Trigger>, problemSeverityDesc: TriggerSeverity[], markAckEvents?: boolean, ackEventColor?: string) {
+  const problem = props.original;
+  let color: string;
   const severityDesc = _.find(problemSeverityDesc, s => s.priority === Number(props.original.priority));
+  color = severityDesc.color;
+
+  // Mark acknowledged triggers with different color
+  if (markAckEvents && problem.acknowledges && problem.acknowledges.length) {
+    color = ackEventColor;
+  }
+
   return (
-    <div className='severity-cell' style={{ background: severityDesc.color }}>
+    <div className='severity-cell' style={{ background: color }}>
       {severityDesc.severity}
     </div>
   );
diff --git a/src/panel-triggers/triggers_panel_ctrl.js b/src/panel-triggers/triggers_panel_ctrl.js
index aaa7f8e..4ec90d3 100644
--- a/src/panel-triggers/triggers_panel_ctrl.js
+++ b/src/panel-triggers/triggers_panel_ctrl.js
@@ -66,7 +66,8 @@ export const PANEL_DEFAULTS = {
   // Triggers severity and colors
   triggerSeverity: DEFAULT_SEVERITY,
   okEventColor: 'rgb(56, 189, 113)',
-  ackEventColor: 'rgb(56, 219, 156)'
+  ackEventColor: 'rgb(56, 219, 156)',
+  markAckEvents: false,
 };
 
 const triggerStatusMap = {
diff --git a/src/panel-triggers/types.ts b/src/panel-triggers/types.ts
index 500d772..883a954 100644
--- a/src/panel-triggers/types.ts
+++ b/src/panel-triggers/types.ts
@@ -38,6 +38,7 @@ export interface ProblemsPanelOptions {
   triggerSeverity?: TriggerSeverity[];
   okEventColor?: TriggerColor;
   ackEventColor?: TriggerColor;
+  markAckEvents?: boolean;
 }
 
 export interface ProblemsPanelTarget {