Adds findings alerts legend in overview page (#318)

* [FEATURE] Detector must have at least one alert set #288

Signed-off-by: Jovan Cvetkovic <[email protected]>

* [FEATURE] Add legend for Finding/Alert count in Overview page #291

Signed-off-by: Jovan Cvetkovic <[email protected]>

Signed-off-by: Jovan Cvetkovic <[email protected]>
(cherry picked from commit 3538a8b)

Author: jovancvetkovic3006

public/pages/Overview/components/Widgets/Summary.tsx

@@ -4,10 +4,12 @@
  */
 
 import { EuiFlexGroup, EuiFlexItem, EuiLink, EuiStat } from '@elastic/eui';
+import { euiPaletteColorBlind } from '@elastic/eui';
 import React, { useCallback, useEffect, useState } from 'react';
 import { WidgetContainer } from './WidgetContainer';
 import { summaryGroupByOptions } from '../../utils/constants';
 import {
+  alertsDefaultColor,
   getChartTimeUnit,
   getDomainRange,
   getOverviewVisualizationSpec,
@@ -40,7 +42,6 @@ export const Summary: React.FC<SummaryProps> = ({
   findings,
   startTime,
   endTime,
-  timeUnit,
   loading = false,
 }) => {
   const [groupBy, setGroupBy] = useState('');
@@ -119,7 +120,11 @@ export const Summary: React.FC<SummaryProps> = ({
           <EuiFlexGroup gutterSize="xl">
             <EuiFlexItem grow={false}>
               <EuiStat
-                title={<EuiLink href={`#${ROUTES.ALERTS}`}>{activeAlerts}</EuiLink>}
+                title={
+                  <EuiLink href={`#${ROUTES.ALERTS}`} style={{ color: alertsDefaultColor }}>
+                    {activeAlerts}
+                  </EuiLink>
+                }
                 description="Total active alerts"
                 textAlign="left"
                 titleColor="primary"
@@ -128,7 +133,14 @@ export const Summary: React.FC<SummaryProps> = ({
             </EuiFlexItem>
             <EuiFlexItem grow={false}>
               <EuiStat
-                title={<EuiLink href={`#${ROUTES.FINDINGS}`}>{totalFindings}</EuiLink>}
+                title={
+                  <EuiLink
+                    href={`#${ROUTES.FINDINGS}`}
+                    style={{ color: euiPaletteColorBlind()[1] }}
+                  >
+                    {totalFindings}
+                  </EuiLink>
+                }
                 description="Total findings"
                 textAlign="left"
                 titleColor="primary"

public/pages/Overview/utils/__snapshots__/helper.test.ts.snap

@@ -273,8 +273,24 @@ Object {
     Object {
       "encoding": Object {
         "color": Object {
-          "scale": null,
-          "value": "#6092C0",
+          "field": "fieldType",
+          "legend": Object {
+            "values": Array [
+              "Active alerts",
+              "Findings",
+            ],
+          },
+          "scale": Object {
+            "domain": Array [
+              "Active alerts",
+              "Findings",
+            ],
+            "range": Array [
+              "#BD271E",
+              "#6092C0",
+            ],
+          },
+          "title": "",
         },
         "tooltip": Array [
           Object {
@@ -327,6 +343,12 @@ Object {
         "clip": true,
         "type": "bar",
       },
+      "transform": Array [
+        Object {
+          "as": "fieldType",
+          "calculate": "datum.alert == 1 ? 'Active alerts' : 'Findings'",
+        },
+      ],
     },
     Object {
       "encoding": Object {
@@ -380,10 +402,10 @@ Object {
       },
       "mark": Object {
         "clip": true,
-        "color": "#ff0000",
+        "color": "#BD271E",
         "interpolate": "monotone",
         "point": Object {
-          "color": "#ff0000",
+          "color": "#BD271E",
           "fill": "white",
           "filled": false,
           "size": 50,

public/pages/Overview/utils/helpers.ts

@@ -54,6 +54,9 @@ export const defaultTimeUnit = {
 
 export const defaultDateFormat = '%Y-%m-%d %H:%M';
 
+// euiColorDanger: #BD271E
+export const alertsDefaultColor = '#BD271E';
+
 export const parseDateString = (dateString: string): number => {
   const date = dateMath.parse(dateString);
   return date ? date.toDate().getTime() : new Date().getTime();
@@ -132,8 +135,15 @@ export function getOverviewVisualizationSpec(
     y: getYAxis('finding', 'Count'),
     tooltip: [getYAxis('finding', 'Findings'), getTimeTooltip(dateOpts)],
     color: {
-      scale: null,
-      value: euiPaletteColorBlind()[1],
+      field: 'fieldType',
+      title: '',
+      legend: {
+        values: ['Active alerts', 'Findings'],
+      },
+      scale: {
+        domain: ['Active alerts', 'Findings'],
+        range: [alertsDefaultColor, euiPaletteColorBlind()[1]],
+      },
     },
   };
 
@@ -142,6 +152,7 @@ export function getOverviewVisualizationSpec(
       type: 'bar',
       clip: true,
     },
+    transform: [{ calculate: "datum.alert == 1 ? 'Active alerts' : 'Findings'", as: 'fieldType' }],
     encoding: findingsEncoding,
   };
 
@@ -163,7 +174,6 @@ export function getOverviewVisualizationSpec(
     barLayer = addInteractiveLegends(barLayer);
   }
 
-  const lineColor = '#ff0000';
   return getVisualizationSpec(
     'Plot showing average data with raw values in the background.',
     visualizationData,
@@ -174,11 +184,11 @@ export function getOverviewVisualizationSpec(
           type: 'line',
           clip: true,
           interpolate: 'monotone',
-          color: lineColor,
+          color: alertsDefaultColor,
           point: {
             filled: false,
             fill: 'white',
-            color: lineColor,
+            color: alertsDefaultColor,
             size: 50,
           },
         },