Status chart colors update (#309) (#312)

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

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

* [BUG] Change colors for Alerts STATUS chart #299
[BUG] Change color for Alerts SEVERITY chart #300
[BUG] Change color for Finding RULE SEVERITY chart #301

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

* [BUG] Change colors for Alerts STATUS chart #299
[BUG] Change color for Alerts SEVERITY chart #300
[BUG] Change color for Finding RULE SEVERITY chart #301

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

* [BUG] Change colors for Alerts STATUS chart #299
[BUG] Change color for Alerts SEVERITY chart #300
[BUG] Change color for Finding RULE SEVERITY chart #301

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

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

Co-authored-by: Jovan Cvetkovic <[email protected]>

Author: opensearch-trigger-bot[bot]

public/pages/Alerts/containers/Alerts/Alerts.tsx

@@ -296,6 +296,7 @@ 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 });

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

@@ -29,17 +29,19 @@ Object {
         "color": Object {
           "field": "",
           "scale": Object {
+            "domain": Array [
+              "5 (Lowest)",
+              "4 (Low)",
+              "3 (Medium)",
+              "2 (High)",
+              "1 (Highest)",
+            ],
             "range": Array [
-              "#54B399",
-              "#6092C0",
-              "#D36086",
-              "#9170B8",
-              "#CA8EAE",
-              "#D6BF57",
-              "#B9A888",
-              "#DA8B45",
-              "#AA6556",
-              "#E7664C",
+              "#209280",
+              "#54b399",
+              "#d6bf57",
+              "#e7664c",
+              "#cc5642",
             ],
           },
           "title": "Alert severity",
@@ -150,17 +152,19 @@ Object {
         "color": Object {
           "field": "",
           "scale": Object {
+            "domain": Array [
+              "info",
+              "low",
+              "medium",
+              "high",
+              "critical",
+            ],
             "range": Array [
-              "#54B399",
-              "#6092C0",
-              "#D36086",
-              "#9170B8",
-              "#CA8EAE",
-              "#D6BF57",
-              "#B9A888",
-              "#DA8B45",
-              "#AA6556",
-              "#E7664C",
+              "#209280",
+              "#54b399",
+              "#d6bf57",
+              "#e7664c",
+              "#cc5642",
             ],
           },
           "title": "Rule severity",

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),
           },
         },
       },