[BUG] Change colors for Alerts STATUS chart opensearch-project#299

[BUG] Change color for Alerts SEVERITY chart opensearch-project#300 [BUG] Change color for Finding RULE SEVERITY chart opensearch-project#301 Signed-off-by: Jovan Cvetkovic <[email protected]>
jovancacvetkovic · Jan 10, 2023 · 9ac8923 · 9ac8923
1 parent 8543fe8
commit 9ac8923
Show file tree

Hide file tree

Showing 2 changed files with 33 additions and 8 deletions.
diff --git a/public/pages/Alerts/containers/Alerts/Alerts.tsx b/public/pages/Alerts/containers/Alerts/Alerts.tsx
@@ -44,7 +44,7 @@ import { AlertFlyout } from '../../components/AlertFlyout/AlertFlyout';
 import { FindingsService, RuleService, OpenSearchService } from '../../../../services';
 import { Detector } from '../../../../../models/interfaces';
 import { parseAlertSeverityToOption } from '../../../CreateDetector/components/ConfigureAlerts/utils/helpers';
-import { DISABLE_ACKNOWLEDGED_ALERT_HELP_TEXT } from '../../utils/constants';
+import { DISABLE_ACKNOWLEDGED_ALERT_HELP_TEXT, severityOptions } from '../../utils/constants';
 import {
   capitalizeFirstLetter,
   createSelectComponent,
@@ -296,14 +296,18 @@ class Alerts extends Component<AlertsProps, AlertsState> {
 
         let alerts: AlertItem[] = [];
         const detectorId = this.props.match.params['detectorId'];
+
         for (let id of detectorIds) {
           if (!detectorId || detectorId === id) {
             const alertsRes = await alertService.getAlerts({ detector_id: id });
 
             if (alertsRes.ok) {
               const detectorAlerts = alertsRes.response.alerts.map((alert) => {
                 const detector = detectors[id];
-                return { ...alert, detectorName: detector.name };
+
+                // localize alert severity based on severityOptions
+                const severity = { ...severityOptions }[alert.severity]?.text;
+                return { ...alert, detectorName: detector.name, severity };
               });
               alerts = alerts.concat(detectorAlerts);
             } else {

diff --git a/public/pages/Overview/utils/helpers.ts b/public/pages/Overview/utils/helpers.ts
@@ -9,6 +9,7 @@ import { SummaryData } from '../components/Widgets/Summary';
 import dateMath from '@elastic/datemath';
 import _ from 'lodash';
 import { DEFAULT_DATE_RANGE } from '../../../utils/constants';
+import { severityOptions } from '../../Alerts/utils/constants';
 
 export interface TimeUnit {
   unit: string;
@@ -202,6 +203,11 @@ export function getFindingsVisualizationSpec(
     domain: defaultScaleDomain,
   }
 ) {
+  const severities = ['info', 'low', 'medium', 'high', 'critical'];
+  const isGroupedByLogType = groupBy === 'logType';
+  const logTitle = 'Log type';
+  const severityTitle = 'Rule severity';
+  const title = isGroupedByLogType ? logTitle : severityTitle;
   return getVisualizationSpec('Findings data overview', visualizationData, [
     addInteractiveLegends({
       mark: {
@@ -214,16 +220,17 @@ export function getFindingsVisualizationSpec(
           getTimeTooltip(dateOpts),
           {
             field: groupBy,
-            title: groupBy === 'logType' ? 'Log type' : 'Rule severity',
+            title: title,
           },
         ],
         x: getXAxis(dateOpts),
         y: getYAxis('finding', 'Count'),
         color: {
           field: groupBy,
-          title: groupBy === 'logType' ? 'Log type' : 'Rule severity',
+          title: title,
           scale: {
-            range: euiPaletteColorBlind(),
+            domain: isGroupedByLogType ? undefined : severities,
+            range: groupBy === 'logType' ? euiPaletteColorBlind() : euiPaletteForStatus(5),
           },
         },
       },
@@ -240,6 +247,19 @@ export function getAlertsVisualizationSpec(
     domain: defaultScaleDomain,
   }
 ) {
+  const isGroupedByStatus = groupBy === 'status';
+  let severities = severityOptions.map((severity) => severity.text);
+  severities.reverse().pop();
+
+  let states = ['ACTIVE', 'ACKNOWLEDGED'];
+  const statusColors = {
+    euiColorVis6: '#B9A888',
+    euiColorVis9: '#E7664C',
+  };
+
+  const statusTitle = 'Alert status';
+  const severityTitle = 'Alert severity';
+  const title = isGroupedByStatus ? statusTitle : severityTitle;
   return getVisualizationSpec('Alerts data overview', visualizationData, [
     addInteractiveLegends({
       mark: {
@@ -252,16 +272,17 @@ export function getAlertsVisualizationSpec(
           getTimeTooltip(dateOpts),
           {
             field: groupBy,
-            title: groupBy === 'status' ? 'Alert status' : 'Alert severity',
+            title: title,
           },
         ],
         x: getXAxis(dateOpts),
         y: getYAxis('alert', 'Count'),
         color: {
           field: groupBy,
-          title: groupBy === 'status' ? 'Alert status' : 'Alert severity',
+          title: title,
           scale: {
-            range: groupBy === 'status' ? euiPaletteForStatus(5) : euiPaletteColorBlind(),
+            domain: isGroupedByStatus ? states : severities,
+            range: isGroupedByStatus ? Object.values(statusColors) : euiPaletteForStatus(5),
           },
         },
       },