diff --git a/public/pages/Alerts/containers/Alerts/Alerts.tsx b/public/pages/Alerts/containers/Alerts/Alerts.tsx index bdf3d46e3..d352c367f 100644 --- a/public/pages/Alerts/containers/Alerts/Alerts.tsx +++ b/public/pages/Alerts/containers/Alerts/Alerts.tsx @@ -296,6 +296,7 @@ class Alerts extends Component { 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 }); diff --git a/public/pages/Overview/utils/__snapshots__/helper.test.ts.snap b/public/pages/Overview/utils/__snapshots__/helper.test.ts.snap index 488b0cb22..35ec8fd6f 100644 --- a/public/pages/Overview/utils/__snapshots__/helper.test.ts.snap +++ b/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", diff --git a/public/pages/Overview/utils/helpers.ts b/public/pages/Overview/utils/helpers.ts index 09f32a95d..de7519106 100644 --- 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), }, }, },