From 32e00579b4b14e242e6f74336431efbbc7ea3379 Mon Sep 17 00:00:00 2001 From: Angela Chuang Date: Tue, 17 Dec 2024 17:52:25 +0000 Subject: [PATCH 01/15] remove custom color hex --- .github/CODEOWNERS | 1 - .../components/alerts/alerts_preview.tsx | 2 +- .../alerts_findings_details_table.tsx | 13 +- .../common/components/charts/donutchart.tsx | 3 +- .../components/charts/donutchart_empty.tsx | 63 ++-- .../visualization_actions/actions.tsx | 2 + .../common/alerts/alerts_by_status_donut.ts | 6 +- .../common/alerts/alerts_histogram.ts | 6 +- .../common/alerts/alerts_table.ts | 6 +- .../common/alerts/rule_preview.ts | 6 +- .../lens_attributes/common/events.ts | 7 +- .../lens_attributes/hosts/kpi_host_area.ts | 144 ++++---- .../hosts/kpi_unique_ips_area.ts | 243 ++++++------ .../hosts/kpi_unique_ips_bar.ts | 248 +++++++------ .../network/kpi_unique_private_ips_area.ts | 308 ++++++++-------- .../network/kpi_unique_private_ips_bar.ts | 327 ++++++++-------- .../users/kpi_total_users_area.ts | 143 +++---- .../users/kpi_user_authentications_area.ts | 347 ++++++++--------- .../users/kpi_user_authentications_bar.ts | 348 +++++++++--------- .../visualization_actions/lens_embeddable.tsx | 3 + .../components/visualization_actions/types.ts | 18 +- .../use_lens_attributes.tsx | 5 +- .../chart_panels/chart_collapse/index.tsx | 5 +- .../severity_level_panel/columns.tsx | 79 ++-- .../severity_level_panel/helpers.tsx | 8 +- .../severity_level_chart.tsx | 22 +- .../stat_items/metric_embeddable.tsx | 5 +- .../components/stat_items/stat_items.tsx | 18 +- .../explore/components/stat_items/types.ts | 10 +- .../components/kpi_hosts/hosts/index.tsx | 38 +- .../hosts/components/kpi_hosts/types.ts | 6 - .../components/kpi_hosts/unique_ips/index.tsx | 67 ++-- .../kpi_network/network_events/index.tsx | 12 +- .../kpi_network/unique_private_ips/index.tsx | 71 ++-- .../kpi_users/authentications/index.tsx | 71 ++-- .../kpi_users/total_users/index.tsx | 40 +- .../alerts_by_status/alerts_by_status.tsx | 35 +- .../cases_by_status/cases_by_status.tsx | 27 +- .../host_alerts_table/host_alerts_table.tsx | 318 ++++++++-------- .../rule_alerts_table/rule_alerts_table.tsx | 158 ++++---- .../user_alerts_table/user_alerts_table.tsx | 323 ++++++++-------- .../components/detection_response/utils.tsx | 11 + 42 files changed, 1895 insertions(+), 1678 deletions(-) diff --git a/.github/CODEOWNERS b/.github/CODEOWNERS index 65d0e08c18da4..edc00a5cbdde8 100644 --- a/.github/CODEOWNERS +++ b/.github/CODEOWNERS @@ -2296,7 +2296,6 @@ x-pack/test/security_solution_cypress/cypress/tasks/expandable_flyout @elastic/ /x-pack/plugins/security_solution/public/common/components/tables @elastic/security-threat-hunting-explore /x-pack/plugins/security_solution/public/common/components/top_n @elastic/security-threat-hunting-explore /x-pack/plugins/security_solution/public/common/components/with_hover_actions @elastic/security-threat-hunting-explore -/x-pack/plugins/security_solution/public/common/containers/matrix_histogram @elastic/security-threat-hunting-explore /x-pack/plugins/security_solution/public/common/lib/cell_actions @elastic/security-threat-hunting-explore /x-pack/plugins/security_solution/public/common/hooks/use_form_with_warn @elastic/security-detection-rule-management /x-pack/plugins/security_solution/public/cases @elastic/security-threat-hunting-explore diff --git a/x-pack/plugins/security_solution/public/cloud_security_posture/components/alerts/alerts_preview.tsx b/x-pack/plugins/security_solution/public/cloud_security_posture/components/alerts/alerts_preview.tsx index 8592ed61abe33..ba2d8a989243b 100644 --- a/x-pack/plugins/security_solution/public/cloud_security_posture/components/alerts/alerts_preview.tsx +++ b/x-pack/plugins/security_solution/public/cloud_security_posture/components/alerts/alerts_preview.tsx @@ -83,7 +83,7 @@ export const AlertsPreview = ({ const alertStats = Array.from(severityMap, ([key, count]) => ({ key: capitalize(key), count, - color: getSeverityColor(key), + color: getSeverityColor(key, euiTheme), })); const totalAlertsCount = alertStats.reduce((total, item) => total + item.count, 0); diff --git a/x-pack/plugins/security_solution/public/cloud_security_posture/components/csp_details/alerts_findings_details_table.tsx b/x-pack/plugins/security_solution/public/cloud_security_posture/components/csp_details/alerts_findings_details_table.tsx index 2b1a2002667c2..cfccc83b644a2 100644 --- a/x-pack/plugins/security_solution/public/cloud_security_posture/components/csp_details/alerts_findings_details_table.tsx +++ b/x-pack/plugins/security_solution/public/cloud_security_posture/components/csp_details/alerts_findings_details_table.tsx @@ -8,7 +8,15 @@ import React, { memo, useCallback, useEffect, useState } from 'react'; import { capitalize } from 'lodash'; import type { Criteria, EuiBasicTableColumn } from '@elastic/eui'; -import { EuiSpacer, EuiPanel, EuiText, EuiBasicTable, EuiIcon, EuiLink } from '@elastic/eui'; +import { + EuiSpacer, + EuiPanel, + EuiText, + EuiBasicTable, + EuiIcon, + EuiLink, + useEuiTheme, +} from '@elastic/eui'; import { i18n } from '@kbn/i18n'; import { DistributionBar } from '@kbn/security-solution-distribution-bar'; import { @@ -64,6 +72,7 @@ interface AlertsDetailsFields { export const AlertsDetailsTable = memo( ({ field, value }: { field: 'host.name' | 'user.name'; value: string }) => { + const { euiTheme } = useEuiTheme(); useEffect(() => { uiMetricService.trackUiMetric( METRIC_TYPE.COUNT, @@ -121,7 +130,7 @@ export const AlertsDetailsTable = memo( const alertStats = Array.from(severityMap, ([key, count]) => ({ key: capitalize(key), count, - color: getSeverityColor(key), + color: getSeverityColor(key, euiTheme), filter: () => { setCurrentFilter(key); setQuery(buildEntityAlertsQuery(field, to, from, value, 500, key)); diff --git a/x-pack/plugins/security_solution/public/common/components/charts/donutchart.tsx b/x-pack/plugins/security_solution/public/common/components/charts/donutchart.tsx index ebfe06476620a..43b67b9b83698 100644 --- a/x-pack/plugins/security_solution/public/common/components/charts/donutchart.tsx +++ b/x-pack/plugins/security_solution/public/common/components/charts/donutchart.tsx @@ -22,10 +22,11 @@ import type { FlattenSimpleInterpolation } from 'styled-components'; import styled from 'styled-components'; import { i18n } from '@kbn/i18n'; +import _ from 'lodash'; import { useThemes } from './common'; import { DraggableLegend } from './draggable_legend'; import type { LegendItem } from './draggable_legend_item'; -import { DonutChartEmpty } from './donutchart_empty'; +import { DonutChartEmpty, getEmptyDonutColor } from './donutchart_empty'; const donutTheme: PartialTheme = { chartMargins: { top: 0, bottom: 0, left: 0, right: 0 }, diff --git a/x-pack/plugins/security_solution/public/common/components/charts/donutchart_empty.tsx b/x-pack/plugins/security_solution/public/common/components/charts/donutchart_empty.tsx index e59a685133ba5..fb8bdcbcd85df 100644 --- a/x-pack/plugins/security_solution/public/common/components/charts/donutchart_empty.tsx +++ b/x-pack/plugins/security_solution/public/common/components/charts/donutchart_empty.tsx @@ -4,42 +4,51 @@ * 2.0; you may not use this file except in compliance with the Elastic License * 2.0. */ +import type { EuiThemeComputed } from '@elastic/eui'; +import { useEuiTheme } from '@elastic/eui'; +import { css } from '@emotion/react'; import React from 'react'; -import styled from 'styled-components'; -import { useEuiBackgroundColor } from '@elastic/eui'; interface DonutChartEmptyProps { size?: number; donutWidth?: number; } -export const emptyDonutColor = '#FAFBFD'; +export const emptyDonutColor = 'colors.textSubdued'; -const BigRing = styled.div` - border-radius: 50%; - ${({ size }) => - `height: ${size}px; - width: ${size}px; - background-color: ${emptyDonutColor}; - text-align: center; - line-height: ${size}px;`} -`; +export const getEmptyDonutColor = (euiTheme: EuiThemeComputed) => euiTheme.colors.textSubdued; -const SmallRing = styled.div` - border-radius: 50%; - ${({ size }) => ` - height: ${size}px; - width: ${size}px; - background-color: ${useEuiBackgroundColor('plain')}; - display: inline-block; - vertical-align: middle;`} -`; - -const EmptyDonutChartComponent: React.FC = ({ size = 90, donutWidth = 20 }) => - size - donutWidth > 0 ? ( - - - +const EmptyDonutChartComponent: React.FC = ({ + size = 90, + donutWidth = 20, +}) => { + const { euiTheme } = useEuiTheme(); + const middleSize = size - donutWidth; + return size - donutWidth > 0 ? ( +
+
+
) : null; +}; export const DonutChartEmpty = React.memo(EmptyDonutChartComponent); diff --git a/x-pack/plugins/security_solution/public/common/components/visualization_actions/actions.tsx b/x-pack/plugins/security_solution/public/common/components/visualization_actions/actions.tsx index bcdb9d163164c..f7b5e3d1b4c05 100644 --- a/x-pack/plugins/security_solution/public/common/components/visualization_actions/actions.tsx +++ b/x-pack/plugins/security_solution/public/common/components/visualization_actions/actions.tsx @@ -37,6 +37,7 @@ const Wrapper = styled.div` const VisualizationActionsComponent: React.FC = ({ applyGlobalQueriesAndFilters = true, + colorSchemas, className, extraActions, extraOptions, @@ -68,6 +69,7 @@ const VisualizationActionsComponent: React.FC = ({ const attributes = useLensAttributes({ applyGlobalQueriesAndFilters, + colorSchemas, extraOptions, getLensAttributes, lensAttributes, diff --git a/x-pack/plugins/security_solution/public/common/components/visualization_actions/lens_attributes/common/alerts/alerts_by_status_donut.ts b/x-pack/plugins/security_solution/public/common/components/visualization_actions/lens_attributes/common/alerts/alerts_by_status_donut.ts index 33bc6827fa020..75f51eec1f5de 100644 --- a/x-pack/plugins/security_solution/public/common/components/visualization_actions/lens_attributes/common/alerts/alerts_by_status_donut.ts +++ b/x-pack/plugins/security_solution/public/common/components/visualization_actions/lens_attributes/common/alerts/alerts_by_status_donut.ts @@ -8,10 +8,10 @@ import { v4 as uuidv4 } from 'uuid'; import type { GetLensAttributes } from '../../../types'; const layerId = uuidv4(); -export const getAlertsByStatusAttributes: GetLensAttributes = ( +export const getAlertsByStatusAttributes: GetLensAttributes = ({ stackByField = 'kibana.alert.workflow_status', - extraOptions -) => { + extraOptions, +}) => { return { title: 'Alerts', description: '', diff --git a/x-pack/plugins/security_solution/public/common/components/visualization_actions/lens_attributes/common/alerts/alerts_histogram.ts b/x-pack/plugins/security_solution/public/common/components/visualization_actions/lens_attributes/common/alerts/alerts_histogram.ts index a37ed21fd29ab..977819651edd8 100644 --- a/x-pack/plugins/security_solution/public/common/components/visualization_actions/lens_attributes/common/alerts/alerts_histogram.ts +++ b/x-pack/plugins/security_solution/public/common/components/visualization_actions/lens_attributes/common/alerts/alerts_histogram.ts @@ -8,10 +8,10 @@ import { v4 as uuidv4 } from 'uuid'; import type { GetLensAttributes } from '../../../types'; const layerId = uuidv4(); -export const getAlertsHistogramLensAttributes: GetLensAttributes = ( +export const getAlertsHistogramLensAttributes: GetLensAttributes = ({ stackByField = 'kibana.alert.rule.name', - extraOptions -) => { + extraOptions, +}) => { return { title: 'Alerts', description: '', diff --git a/x-pack/plugins/security_solution/public/common/components/visualization_actions/lens_attributes/common/alerts/alerts_table.ts b/x-pack/plugins/security_solution/public/common/components/visualization_actions/lens_attributes/common/alerts/alerts_table.ts index 9358bcc5db810..a1efd1674cadf 100644 --- a/x-pack/plugins/security_solution/public/common/components/visualization_actions/lens_attributes/common/alerts/alerts_table.ts +++ b/x-pack/plugins/security_solution/public/common/components/visualization_actions/lens_attributes/common/alerts/alerts_table.ts @@ -62,10 +62,10 @@ const getTopValuesOfBreakdownFieldColumnSettings = ( }, }); -export const getAlertsTableLensAttributes: GetLensAttributes = ( +export const getAlertsTableLensAttributes: GetLensAttributes = ({ stackByField = 'kibana.alert.rule.name', - extraOptions -) => { + extraOptions, +}) => { const breakdownFieldProvided = !isEmpty(extraOptions?.breakdownField); const countField = extraOptions?.breakdownField && breakdownFieldProvided diff --git a/x-pack/plugins/security_solution/public/common/components/visualization_actions/lens_attributes/common/alerts/rule_preview.ts b/x-pack/plugins/security_solution/public/common/components/visualization_actions/lens_attributes/common/alerts/rule_preview.ts index 9ec679629739a..2bd1b2a26b5a4 100644 --- a/x-pack/plugins/security_solution/public/common/components/visualization_actions/lens_attributes/common/alerts/rule_preview.ts +++ b/x-pack/plugins/security_solution/public/common/components/visualization_actions/lens_attributes/common/alerts/rule_preview.ts @@ -10,10 +10,10 @@ import type { GetLensAttributes } from '../../../types'; const layerId = uuidv4(); const internalReferenceId = uuidv4(); -export const getRulePreviewLensAttributes: GetLensAttributes = ( +export const getRulePreviewLensAttributes: GetLensAttributes = ({ stackByField = 'event.category', - extraOptions -) => { + extraOptions, +}) => { return { title: 'Rule preview', description: '', diff --git a/x-pack/plugins/security_solution/public/common/components/visualization_actions/lens_attributes/common/events.ts b/x-pack/plugins/security_solution/public/common/components/visualization_actions/lens_attributes/common/events.ts index 174abce6baf62..02596a64b8470 100644 --- a/x-pack/plugins/security_solution/public/common/components/visualization_actions/lens_attributes/common/events.ts +++ b/x-pack/plugins/security_solution/public/common/components/visualization_actions/lens_attributes/common/events.ts @@ -11,10 +11,10 @@ const layerId = uuidv4(); // Exported for testing purposes export const stackByFieldAccessorId = '34919782-4546-43a5-b668-06ac934d3acd'; -export const getEventsHistogramLensAttributes: GetLensAttributes = ( +export const getEventsHistogramLensAttributes: GetLensAttributes = ({ stackByField, - extraOptions = {} -) => { + extraOptions = {}, +}) => { return { title: 'Events', description: '', @@ -27,6 +27,7 @@ export const getEventsHistogramLensAttributes: GetLensAttributes = ( position: 'right', legendSize: 'xlarge', legendStats: ['currentAndLastValue'], + showSingleSeries: true, }, valueLabels: 'hide', preferredSeriesType: 'bar_stacked', diff --git a/x-pack/plugins/security_solution/public/common/components/visualization_actions/lens_attributes/hosts/kpi_host_area.ts b/x-pack/plugins/security_solution/public/common/components/visualization_actions/lens_attributes/hosts/kpi_host_area.ts index 561d8896f1b53..053e8f3497caf 100644 --- a/x-pack/plugins/security_solution/public/common/components/visualization_actions/lens_attributes/hosts/kpi_host_area.ts +++ b/x-pack/plugins/security_solution/public/common/components/visualization_actions/lens_attributes/hosts/kpi_host_area.ts @@ -6,80 +6,84 @@ */ import { UNIQUE_COUNT } from '../../translations'; -import type { LensAttributes } from '../../types'; +import type { LensAttributes, GetLensAttributes } from '../../types'; -export const kpiHostAreaLensAttributes: LensAttributes = { - description: '', - state: { - datasourceStates: { - formBased: { - layers: { - '416b6fad-1923-4f6a-a2df-b223bb287e30': { - columnOrder: [ - '5eea817b-67b7-4268-8ecb-7688d1094721', - 'b00c65ea-32be-4163-bfc8-f795b1ef9d06', - ], - columns: { - '5eea817b-67b7-4268-8ecb-7688d1094721': { - dataType: 'date', - isBucketed: true, - label: '@timestamp', - operationType: 'date_histogram', - params: { interval: 'auto' }, - scale: 'interval', - sourceField: '@timestamp', - }, - 'b00c65ea-32be-4163-bfc8-f795b1ef9d06': { - customLabel: true, - dataType: 'number', - isBucketed: false, - label: UNIQUE_COUNT('host.name'), - operationType: 'unique_count', - scale: 'ratio', - sourceField: 'host.name', +const columnTimestamp = '5eea817b-67b7-4268-8ecb-7688d1094721'; +const columnHostName = 'b00c65ea-32be-4163-bfc8-f795b1ef9d06'; + +const layerHostName = '416b6fad-1923-4f6a-a2df-b223bb287e30'; + +export const getKpiHostAreaLensAttributes: GetLensAttributes = () => { + return { + description: '', + state: { + datasourceStates: { + formBased: { + layers: { + [layerHostName]: { + columnOrder: [columnTimestamp, columnHostName], + columns: { + [columnTimestamp]: { + dataType: 'date', + isBucketed: true, + label: '@timestamp', + operationType: 'date_histogram', + params: { interval: 'auto' }, + scale: 'interval', + sourceField: '@timestamp', + }, + [columnHostName]: { + customLabel: true, + dataType: 'number', + isBucketed: false, + label: UNIQUE_COUNT('host.name'), + operationType: 'unique_count', + scale: 'ratio', + sourceField: 'host.name', + }, }, + incompleteColumns: {}, }, - incompleteColumns: {}, }, }, }, + filters: [], + query: { language: 'kuery', query: '' }, + visualization: { + axisTitlesVisibilitySettings: { x: false, yLeft: false, yRight: false }, + fittingFunction: 'None', + gridlinesVisibilitySettings: { x: true, yLeft: true, yRight: true }, + labelsOrientation: { x: 0, yLeft: 0, yRight: 0 }, + layers: [ + { + accessors: [columnHostName], + layerId: layerHostName, + layerType: 'data', + seriesType: 'area', + xAccessor: columnTimestamp, + }, + ], + legend: { isVisible: false, position: 'right' }, + preferredSeriesType: 'area', + tickLabelsVisibilitySettings: { x: true, yLeft: true, yRight: true }, + valueLabels: 'hide', + yLeftExtent: { mode: 'full' }, + yRightExtent: { mode: 'full' }, + }, }, - filters: [], - query: { language: 'kuery', query: '' }, - visualization: { - axisTitlesVisibilitySettings: { x: false, yLeft: false, yRight: false }, - fittingFunction: 'None', - gridlinesVisibilitySettings: { x: true, yLeft: true, yRight: true }, - labelsOrientation: { x: 0, yLeft: 0, yRight: 0 }, - layers: [ - { - accessors: ['b00c65ea-32be-4163-bfc8-f795b1ef9d06'], - layerId: '416b6fad-1923-4f6a-a2df-b223bb287e30', - layerType: 'data', - seriesType: 'area', - xAccessor: '5eea817b-67b7-4268-8ecb-7688d1094721', - }, - ], - legend: { isVisible: false, position: 'right' }, - preferredSeriesType: 'area', - tickLabelsVisibilitySettings: { x: true, yLeft: true, yRight: true }, - valueLabels: 'hide', - yLeftExtent: { mode: 'full' }, - yRightExtent: { mode: 'full' }, - }, - }, - title: '[Host] Hosts - area', - visualizationType: 'lnsXY', - references: [ - { - id: '{dataViewId}', - name: 'indexpattern-datasource-current-indexpattern', - type: 'index-pattern', - }, - { - id: '{dataViewId}', - name: 'indexpattern-datasource-layer-416b6fad-1923-4f6a-a2df-b223bb287e30', - type: 'index-pattern', - }, - ], -} as LensAttributes; + title: '[Host] Hosts - area', + visualizationType: 'lnsXY', + references: [ + { + id: '{dataViewId}', + name: 'indexpattern-datasource-current-indexpattern', + type: 'index-pattern', + }, + { + id: '{dataViewId}', + name: `indexpattern-datasource-layer-${layerHostName}`, + type: 'index-pattern', + }, + ], + } as LensAttributes; +}; diff --git a/x-pack/plugins/security_solution/public/common/components/visualization_actions/lens_attributes/hosts/kpi_unique_ips_area.ts b/x-pack/plugins/security_solution/public/common/components/visualization_actions/lens_attributes/hosts/kpi_unique_ips_area.ts index 79539f40390af..bb86c292546cb 100644 --- a/x-pack/plugins/security_solution/public/common/components/visualization_actions/lens_attributes/hosts/kpi_unique_ips_area.ts +++ b/x-pack/plugins/security_solution/public/common/components/visualization_actions/lens_attributes/hosts/kpi_unique_ips_area.ts @@ -6,124 +6,143 @@ */ import { DESTINATION_CHART_LABEL, SOURCE_CHART_LABEL } from '../../translations'; -import type { LensAttributes } from '../../types'; +import type { GetLensAttributes, LensAttributes } from '../../types'; -export const kpiUniqueIpsAreaLensAttributes: LensAttributes = { - description: '', - state: { - datasourceStates: { - formBased: { - layers: { - '8be0156b-d423-4a39-adf1-f54d4c9f2e69': { - columnOrder: [ - 'a0cb6400-f708-46c3-ad96-24788f12dae4', - 'd9a6eb6b-8b78-439e-98e7-a718f8ffbebe', - ], - columns: { - 'a0cb6400-f708-46c3-ad96-24788f12dae4': { - dataType: 'date', - isBucketed: true, - label: '@timestamp', - operationType: 'date_histogram', - params: { interval: 'auto' }, - scale: 'interval', - sourceField: '@timestamp', - }, - 'd9a6eb6b-8b78-439e-98e7-a718f8ffbebe': { - customLabel: true, - dataType: 'number', - isBucketed: false, - label: SOURCE_CHART_LABEL, - operationType: 'unique_count', - scale: 'ratio', - sourceField: 'source.ip', +const columnSourceTimestamp = 'a0cb6400-f708-46c3-ad96-24788f12dae4'; +const columnSourceUniqueIp = 'd9a6eb6b-8b78-439e-98e7-a718f8ffbebe'; + +const columnDestinationIp = 'e7052671-fb9e-481f-8df3-7724c98cfc6f'; +const columnDestinationTimestamp = '95e74e6-99dd-4b11-8faf-439b4d959df9'; + +const layerDestinationIp = 'ca05ecdb-0fa4-49a8-9305-b23d91012a46'; +const layerSourceIp = '8be0156b-d423-4a39-adf1-f54d4c9f2e69'; + +const layer = { + [`source.ip`]: { + layerId: layerSourceIp, + columns: [columnSourceTimestamp, columnSourceUniqueIp], + }, + [`destination.ip`]: { + layerId: layerDestinationIp, + columns: [columnDestinationTimestamp, columnDestinationIp], + }, +}; + +export const getKpiUniqueIpsAreaLensAttributes: GetLensAttributes = (props) => { + const colorSchemas = props?.colorSchemas; + return { + description: '', + state: { + datasourceStates: { + formBased: { + layers: { + [layerSourceIp]: { + columnOrder: layer[`source.ip`].columns, + columns: { + [columnSourceTimestamp]: { + dataType: 'date', + isBucketed: true, + label: '@timestamp', + operationType: 'date_histogram', + params: { interval: 'auto' }, + scale: 'interval', + sourceField: '@timestamp', + }, + [columnSourceUniqueIp]: { + customLabel: true, + dataType: 'number', + isBucketed: false, + label: SOURCE_CHART_LABEL, + operationType: 'unique_count', + scale: 'ratio', + sourceField: 'source.ip', + }, }, + incompleteColumns: {}, }, - incompleteColumns: {}, - }, - 'ca05ecdb-0fa4-49a8-9305-b23d91012a46': { - columnOrder: [ - 'f95e74e6-99dd-4b11-8faf-439b4d959df9', - 'e7052671-fb9e-481f-8df3-7724c98cfc6f', - ], - columns: { - 'e7052671-fb9e-481f-8df3-7724c98cfc6f': { - customLabel: true, - dataType: 'number', - isBucketed: false, - label: DESTINATION_CHART_LABEL, - operationType: 'unique_count', - scale: 'ratio', - sourceField: 'destination.ip', - }, - 'f95e74e6-99dd-4b11-8faf-439b4d959df9': { - dataType: 'date', - isBucketed: true, - label: '@timestamp', - operationType: 'date_histogram', - params: { interval: 'auto' }, - scale: 'interval', - sourceField: '@timestamp', + [layerDestinationIp]: { + columnOrder: layer[`destination.ip`].columns, + columns: { + [columnDestinationIp]: { + customLabel: true, + dataType: 'number', + isBucketed: false, + label: DESTINATION_CHART_LABEL, + operationType: 'unique_count', + scale: 'ratio', + sourceField: 'destination.ip', + }, + [columnDestinationTimestamp]: { + dataType: 'date', + isBucketed: true, + label: '@timestamp', + operationType: 'date_histogram', + params: { interval: 'auto' }, + scale: 'interval', + sourceField: '@timestamp', + }, }, + incompleteColumns: {}, }, - incompleteColumns: {}, }, }, }, + filters: [], + query: { language: 'kuery', query: '' }, + visualization: { + axisTitlesVisibilitySettings: { x: false, yLeft: false, yRight: true }, + fittingFunction: 'None', + gridlinesVisibilitySettings: { x: true, yLeft: true, yRight: true }, + labelsOrientation: { x: 0, yLeft: 0, yRight: 0 }, + layers: [ + { + accessors: [columnSourceUniqueIp], + layerId: layerSourceIp, + layerType: 'data', + seriesType: 'area', + xAccessor: columnSourceTimestamp, + yConfig: [{ color: colorSchemas?.[`source.ip`], forAccessor: columnSourceUniqueIp }], + }, + { + accessors: [columnDestinationIp], + layerId: layerDestinationIp, + layerType: 'data', + seriesType: 'area', + xAccessor: columnDestinationTimestamp, + yConfig: [ + { color: colorSchemas?.[`destination.ip`], forAccessor: columnDestinationIp }, + ], + }, + ], + legend: { isVisible: false, position: 'right', showSingleSeries: false }, + preferredSeriesType: 'area', + tickLabelsVisibilitySettings: { x: true, yLeft: true, yRight: true }, + valueLabels: 'hide', + yLeftExtent: { mode: 'full' }, + yRightExtent: { mode: 'full' }, + }, }, - filters: [], - query: { language: 'kuery', query: '' }, - visualization: { - axisTitlesVisibilitySettings: { x: false, yLeft: false, yRight: true }, - fittingFunction: 'None', - gridlinesVisibilitySettings: { x: true, yLeft: true, yRight: true }, - labelsOrientation: { x: 0, yLeft: 0, yRight: 0 }, - layers: [ - { - accessors: ['d9a6eb6b-8b78-439e-98e7-a718f8ffbebe'], - layerId: '8be0156b-d423-4a39-adf1-f54d4c9f2e69', - layerType: 'data', - seriesType: 'area', - xAccessor: 'a0cb6400-f708-46c3-ad96-24788f12dae4', - yConfig: [{ color: '#d36186', forAccessor: 'd9a6eb6b-8b78-439e-98e7-a718f8ffbebe' }], - }, - { - accessors: ['e7052671-fb9e-481f-8df3-7724c98cfc6f'], - layerId: 'ca05ecdb-0fa4-49a8-9305-b23d91012a46', - layerType: 'data', - seriesType: 'area', - xAccessor: 'f95e74e6-99dd-4b11-8faf-439b4d959df9', - yConfig: [{ color: '#9170b8', forAccessor: 'e7052671-fb9e-481f-8df3-7724c98cfc6f' }], - }, - ], - legend: { isVisible: false, position: 'right', showSingleSeries: false }, - preferredSeriesType: 'area', - tickLabelsVisibilitySettings: { x: true, yLeft: true, yRight: true }, - valueLabels: 'hide', - yLeftExtent: { mode: 'full' }, - yRightExtent: { mode: 'full' }, - }, - }, - title: '[Host] Unique IPs - area', - visualizationType: 'lnsXY', - references: [ - { - id: '{dataViewId}', - name: 'indexpattern-datasource-current-indexpattern', - type: 'index-pattern', - }, - { - id: '{dataViewId}', - name: 'indexpattern-datasource-layer-8be0156b-d423-4a39-adf1-f54d4c9f2e69', - type: 'index-pattern', - }, - { - id: '{dataViewId}', - name: 'indexpattern-datasource-layer-ca05ecdb-0fa4-49a8-9305-b23d91012a46', - type: 'index-pattern', - }, - ], - type: 'lens', - updated_at: '2022-02-09T17:44:03.359Z', - version: 'WzI5MTI5OSwzXQ==', -} as LensAttributes; + title: '[Host] Unique IPs - area', + visualizationType: 'lnsXY', + references: [ + { + id: '{dataViewId}', + name: 'indexpattern-datasource-current-indexpattern', + type: 'index-pattern', + }, + { + id: '{dataViewId}', + name: `indexpattern-datasource-layer-${layerSourceIp}`, + type: 'index-pattern', + }, + { + id: '{dataViewId}', + name: `indexpattern-datasource-layer-${layerDestinationIp}`, + type: 'index-pattern', + }, + ], + type: 'lens', + updated_at: '2022-02-09T17:44:03.359Z', + version: 'WzI5MTI5OSwzXQ==', + } as LensAttributes; +}; diff --git a/x-pack/plugins/security_solution/public/common/components/visualization_actions/lens_attributes/hosts/kpi_unique_ips_bar.ts b/x-pack/plugins/security_solution/public/common/components/visualization_actions/lens_attributes/hosts/kpi_unique_ips_bar.ts index abee121d24585..df457275d85e9 100644 --- a/x-pack/plugins/security_solution/public/common/components/visualization_actions/lens_attributes/hosts/kpi_unique_ips_bar.ts +++ b/x-pack/plugins/security_solution/public/common/components/visualization_actions/lens_attributes/hosts/kpi_unique_ips_bar.ts @@ -5,130 +5,148 @@ * 2.0. */ -import type { LensAttributes } from '../../types'; +import type { GetLensAttributes, LensAttributes } from '../../types'; import { SOURCE_CHART_LABEL, DESTINATION_CHART_LABEL, UNIQUE_COUNT } from '../../translations'; +const columnSourceIp = '32f66676-f4e1-48fd-b7f8-d4de38318601'; +const columnSourceFilter = 'f8bfa719-5c1c-4bf2-896e-c318d77fc08e'; -export const kpiUniqueIpsBarLensAttributes: LensAttributes = { - description: '', - state: { - datasourceStates: { - formBased: { - layers: { - '8be0156b-d423-4a39-adf1-f54d4c9f2e69': { - columnOrder: [ - 'f8bfa719-5c1c-4bf2-896e-c318d77fc08e', - '32f66676-f4e1-48fd-b7f8-d4de38318601', - ], - columns: { - '32f66676-f4e1-48fd-b7f8-d4de38318601': { - dataType: 'number', - isBucketed: false, - label: UNIQUE_COUNT('source.ip'), - operationType: 'unique_count', - scale: 'ratio', - sourceField: 'source.ip', - }, - 'f8bfa719-5c1c-4bf2-896e-c318d77fc08e': { - dataType: 'string', - isBucketed: true, - label: 'Filters', - operationType: 'filters', - params: { - filters: [ - { - input: { language: 'kuery', query: 'source.ip: *' }, - label: SOURCE_CHART_LABEL, - }, - ], +const columnDestinationIp = 'b7e59b08-96e6-40d1-84fd-e97b977d1c47'; +const columnDestinationFilter = 'c72aad6a-fc9c-43dc-9194-e13ca3ee8aff'; + +const layerSourceIp = '8be0156b-d423-4a39-adf1-f54d4c9f2e69'; +const layerDestinationIp = 'ec84ba70-2adb-4647-8ef0-8ad91a0e6d4e'; + +const layer = { + [`source.ip`]: { + layerId: layerSourceIp, + columns: [columnSourceFilter, columnSourceIp], + }, + [`destination.ip`]: { + layerId: layerDestinationIp, + columns: [columnDestinationFilter, columnDestinationIp], + }, +}; + +export const getKpiUniqueIpsBarLensAttributes: GetLensAttributes = (params) => { + const colorSchemas = params?.colorSchemas; + return { + description: '', + state: { + datasourceStates: { + formBased: { + layers: { + [layerSourceIp]: { + columnOrder: layer[`source.ip`].columns, + columns: { + [columnSourceIp]: { + dataType: 'number', + isBucketed: false, + label: UNIQUE_COUNT('source.ip'), + operationType: 'unique_count', + scale: 'ratio', + sourceField: 'source.ip', + }, + [columnSourceFilter]: { + dataType: 'string', + isBucketed: true, + label: 'Filters', + operationType: 'filters', + params: { + filters: [ + { + input: { language: 'kuery', query: 'source.ip: *' }, + label: SOURCE_CHART_LABEL, + }, + ], + }, + scale: 'ordinal', }, - scale: 'ordinal', }, + incompleteColumns: {}, }, - incompleteColumns: {}, - }, - 'ec84ba70-2adb-4647-8ef0-8ad91a0e6d4e': { - columnOrder: [ - 'c72aad6a-fc9c-43dc-9194-e13ca3ee8aff', - 'b7e59b08-96e6-40d1-84fd-e97b977d1c47', - ], - columns: { - 'b7e59b08-96e6-40d1-84fd-e97b977d1c47': { - dataType: 'number', - isBucketed: false, - label: UNIQUE_COUNT('destination.ip'), - operationType: 'unique_count', - scale: 'ratio', - sourceField: 'destination.ip', - }, - 'c72aad6a-fc9c-43dc-9194-e13ca3ee8aff': { - customLabel: true, - dataType: 'string', - isBucketed: true, - label: DESTINATION_CHART_LABEL, - operationType: 'filters', - params: { - filters: [ - { input: { language: 'kuery', query: 'destination.ip: *' }, label: 'Dest.' }, - ], + [layerDestinationIp]: { + columnOrder: layer[`destination.ip`].columns, + columns: { + [columnDestinationIp]: { + dataType: 'number', + isBucketed: false, + label: UNIQUE_COUNT('destination.ip'), + operationType: 'unique_count', + scale: 'ratio', + sourceField: 'destination.ip', + }, + [columnDestinationFilter]: { + customLabel: true, + dataType: 'string', + isBucketed: true, + label: DESTINATION_CHART_LABEL, + operationType: 'filters', + params: { + filters: [ + { input: { language: 'kuery', query: 'destination.ip: *' }, label: 'Dest.' }, + ], + }, + scale: 'ordinal', }, - scale: 'ordinal', }, + incompleteColumns: {}, }, - incompleteColumns: {}, }, }, }, + filters: [], + query: { language: 'kuery', query: '' }, + visualization: { + axisTitlesVisibilitySettings: { x: false, yLeft: false, yRight: true }, + fittingFunction: 'None', + gridlinesVisibilitySettings: { x: true, yLeft: true, yRight: true }, + labelsOrientation: { x: 0, yLeft: 0, yRight: 0 }, + layers: [ + { + accessors: [columnSourceIp], + layerId: layerSourceIp, + layerType: 'data', + seriesType: 'bar_horizontal_stacked', + xAccessor: columnSourceFilter, + yConfig: [{ color: colorSchemas?.[`source.ip`], forAccessor: columnSourceIp }], + }, + { + accessors: [columnDestinationIp], + layerId: layerDestinationIp, + layerType: 'data', + seriesType: 'bar_horizontal_stacked', + xAccessor: columnDestinationFilter, + yConfig: [ + { color: colorSchemas?.[`destination.ip`], forAccessor: columnDestinationIp }, + ], + }, + ], + legend: { isVisible: false, position: 'right', showSingleSeries: false }, + preferredSeriesType: 'bar_horizontal_stacked', + tickLabelsVisibilitySettings: { x: true, yLeft: true, yRight: true }, + valueLabels: 'hide', + yLeftExtent: { mode: 'full' }, + yRightExtent: { mode: 'full' }, + }, }, - filters: [], - query: { language: 'kuery', query: '' }, - visualization: { - axisTitlesVisibilitySettings: { x: false, yLeft: false, yRight: true }, - fittingFunction: 'None', - gridlinesVisibilitySettings: { x: true, yLeft: true, yRight: true }, - labelsOrientation: { x: 0, yLeft: 0, yRight: 0 }, - layers: [ - { - accessors: ['32f66676-f4e1-48fd-b7f8-d4de38318601'], - layerId: '8be0156b-d423-4a39-adf1-f54d4c9f2e69', - layerType: 'data', - seriesType: 'bar_horizontal_stacked', - xAccessor: 'f8bfa719-5c1c-4bf2-896e-c318d77fc08e', - yConfig: [{ color: '#d36186', forAccessor: '32f66676-f4e1-48fd-b7f8-d4de38318601' }], - }, - { - accessors: ['b7e59b08-96e6-40d1-84fd-e97b977d1c47'], - layerId: 'ec84ba70-2adb-4647-8ef0-8ad91a0e6d4e', - layerType: 'data', - seriesType: 'bar_horizontal_stacked', - xAccessor: 'c72aad6a-fc9c-43dc-9194-e13ca3ee8aff', - yConfig: [{ color: '#9170b8', forAccessor: 'b7e59b08-96e6-40d1-84fd-e97b977d1c47' }], - }, - ], - legend: { isVisible: false, position: 'right', showSingleSeries: false }, - preferredSeriesType: 'bar_horizontal_stacked', - tickLabelsVisibilitySettings: { x: true, yLeft: true, yRight: true }, - valueLabels: 'hide', - yLeftExtent: { mode: 'full' }, - yRightExtent: { mode: 'full' }, - }, - }, - title: '[Host] Unique IPs - bar chart', - visualizationType: 'lnsXY', - references: [ - { - id: '{dataViewId}', - name: 'indexpattern-datasource-current-indexpattern', - type: 'index-pattern', - }, - { - id: '{dataViewId}', - name: 'indexpattern-datasource-layer-8be0156b-d423-4a39-adf1-f54d4c9f2e69', - type: 'index-pattern', - }, - { - id: '{dataViewId}', - name: 'indexpattern-datasource-layer-ec84ba70-2adb-4647-8ef0-8ad91a0e6d4e', - type: 'index-pattern', - }, - ], -} as LensAttributes; + title: '[Host] Unique IPs - bar chart', + visualizationType: 'lnsXY', + references: [ + { + id: '{dataViewId}', + name: 'indexpattern-datasource-current-indexpattern', + type: 'index-pattern', + }, + { + id: '{dataViewId}', + name: `indexpattern-datasource-layer-${layerSourceIp}`, + type: 'index-pattern', + }, + { + id: '{dataViewId}', + name: `indexpattern-datasource-layer-${layerDestinationIp}`, + type: 'index-pattern', + }, + ], + } as LensAttributes; +}; diff --git a/x-pack/plugins/security_solution/public/common/components/visualization_actions/lens_attributes/network/kpi_unique_private_ips_area.ts b/x-pack/plugins/security_solution/public/common/components/visualization_actions/lens_attributes/network/kpi_unique_private_ips_area.ts index 86e9f21d7ffef..0650dc01f52c6 100644 --- a/x-pack/plugins/security_solution/public/common/components/visualization_actions/lens_attributes/network/kpi_unique_private_ips_area.ts +++ b/x-pack/plugins/security_solution/public/common/components/visualization_actions/lens_attributes/network/kpi_unique_private_ips_area.ts @@ -5,171 +5,175 @@ * 2.0. */ import { DESTINATION_CHART_LABEL, SOURCE_CHART_LABEL } from '../../translations'; -import type { LensAttributes } from '../../types'; +import type { LensAttributes, GetLensAttributes } from '../../types'; -export const kpiUniquePrivateIpsAreaLensAttributes: LensAttributes = { - title: '[Network] Unique private IPs - area chart', - description: '', - visualizationType: 'lnsXY', - state: { - visualization: { - legend: { - isVisible: false, - position: 'right', - showSingleSeries: false, - }, - valueLabels: 'hide', - fittingFunction: 'None', - yLeftExtent: { - mode: 'full', - }, - yRightExtent: { - mode: 'full', - }, - axisTitlesVisibilitySettings: { - x: false, - yLeft: false, - yRight: true, - }, - tickLabelsVisibilitySettings: { - x: true, - yLeft: true, - yRight: true, - }, - labelsOrientation: { - x: 0, - yLeft: 0, - yRight: 0, - }, - gridlinesVisibilitySettings: { - x: true, - yLeft: true, - yRight: true, - }, - preferredSeriesType: 'area', - layers: [ - { - layerId: '38aa6532-6bf9-4c8f-b2a6-da8d32f7d0d7', - seriesType: 'area', - accessors: ['5f317308-cfbb-4ee5-bfb9-07653184fabf'], - layerType: 'data', - xAccessor: '662cd5e5-82bf-4325-a703-273f84b97e09', - yConfig: [ - { - forAccessor: '5f317308-cfbb-4ee5-bfb9-07653184fabf', - color: '#d36186', - }, - ], +const columnTimestamp = '662cd5e5-82bf-4325-a703-273f84b97e09'; +const columnSourceIp = '5f317308-cfbb-4ee5-bfb9-07653184fabf'; +const columnDestinationIpTimestamp = '36444b8c-7e10-4069-8298-6c1b46912be2'; +const columnDestinationIp = 'ac1eb80c-ddde-46c4-a90c-400261926762'; + +const layerSourceIp = '38aa6532-6bf9-4c8f-b2a6-da8d32f7d0d7'; +const layerDestinationIp = '72dc4b99-b07d-4dc9-958b-081d259e11fa'; + +export const getKpiUniquePrivateIpsAreaLensAttributes: GetLensAttributes = ({ colorSchemas }) => { + return { + title: '[Network] Unique private IPs - area chart', + description: '', + visualizationType: 'lnsXY', + state: { + visualization: { + legend: { + isVisible: false, + position: 'right', + showSingleSeries: false, }, - { - layerId: '72dc4b99-b07d-4dc9-958b-081d259e11fa', - seriesType: 'area', - accessors: ['ac1eb80c-ddde-46c4-a90c-400261926762'], - layerType: 'data', - xAccessor: '36444b8c-7e10-4069-8298-6c1b46912be2', - yConfig: [ - { - forAccessor: 'ac1eb80c-ddde-46c4-a90c-400261926762', - color: '#9170b8', - }, - ], + valueLabels: 'hide', + fittingFunction: 'None', + yLeftExtent: { + mode: 'full', }, - ], - }, - query: { - query: '', - language: 'kuery', - }, - filters: [], - datasourceStates: { - formBased: { - layers: { - '38aa6532-6bf9-4c8f-b2a6-da8d32f7d0d7': { - columns: { - '662cd5e5-82bf-4325-a703-273f84b97e09': { - label: '@timestamp', - dataType: 'date', - operationType: 'date_histogram', - sourceField: '@timestamp', - isBucketed: true, - scale: 'interval', - params: { - interval: 'auto', - }, + yRightExtent: { + mode: 'full', + }, + axisTitlesVisibilitySettings: { + x: false, + yLeft: false, + yRight: true, + }, + tickLabelsVisibilitySettings: { + x: true, + yLeft: true, + yRight: true, + }, + labelsOrientation: { + x: 0, + yLeft: 0, + yRight: 0, + }, + gridlinesVisibilitySettings: { + x: true, + yLeft: true, + yRight: true, + }, + preferredSeriesType: 'area', + layers: [ + { + layerId: layerSourceIp, + seriesType: 'area', + accessors: [columnSourceIp], + layerType: 'data', + xAccessor: columnTimestamp, + yConfig: [ + { + forAccessor: columnSourceIp, + color: colorSchemas?.['source.ip'], }, - '5f317308-cfbb-4ee5-bfb9-07653184fabf': { - label: SOURCE_CHART_LABEL, - dataType: 'number', - operationType: 'unique_count', - scale: 'ratio', - sourceField: 'source.ip', - isBucketed: false, - customLabel: true, - filter: { - query: - '"source.ip": "10.0.0.0/8" or "source.ip": "192.168.0.0/16" or "source.ip": "172.16.0.0/12" or "source.ip": "fd00::/8"', - language: 'kuery', - }, + ], + }, + { + layerId: layerDestinationIp, + seriesType: 'area', + accessors: [columnDestinationIp], + layerType: 'data', + xAccessor: columnDestinationIpTimestamp, + yConfig: [ + { + forAccessor: columnDestinationIp, + color: colorSchemas?.['destination.ip'], }, - }, - columnOrder: [ - '662cd5e5-82bf-4325-a703-273f84b97e09', - '5f317308-cfbb-4ee5-bfb9-07653184fabf', ], - incompleteColumns: {}, }, - '72dc4b99-b07d-4dc9-958b-081d259e11fa': { - columns: { - '36444b8c-7e10-4069-8298-6c1b46912be2': { - label: '@timestamp', - dataType: 'date', - operationType: 'date_histogram', - sourceField: '@timestamp', - isBucketed: true, - scale: 'interval', - params: { - interval: 'auto', + ], + }, + query: { + query: '', + language: 'kuery', + }, + filters: [], + datasourceStates: { + formBased: { + layers: { + [layerSourceIp]: { + columns: { + [columnTimestamp]: { + label: '@timestamp', + dataType: 'date', + operationType: 'date_histogram', + sourceField: '@timestamp', + isBucketed: true, + scale: 'interval', + params: { + interval: 'auto', + }, + }, + [columnSourceIp]: { + label: SOURCE_CHART_LABEL, + dataType: 'number', + operationType: 'unique_count', + scale: 'ratio', + sourceField: 'source.ip', + isBucketed: false, + customLabel: true, + filter: { + query: + '"source.ip": "10.0.0.0/8" or "source.ip": "192.168.0.0/16" or "source.ip": "172.16.0.0/12" or "source.ip": "fd00::/8"', + language: 'kuery', + }, }, }, - 'ac1eb80c-ddde-46c4-a90c-400261926762': { - label: DESTINATION_CHART_LABEL, - dataType: 'number', - operationType: 'unique_count', - scale: 'ratio', - sourceField: 'destination.ip', - isBucketed: false, - filter: { - query: - '"destination.ip": "10.0.0.0/8" or "destination.ip": "192.168.0.0/16" or "destination.ip": "172.16.0.0/12" or "destination.ip": "fd00::/8"', - language: 'kuery', + columnOrder: [columnTimestamp, columnSourceIp], + incompleteColumns: {}, + }, + [layerDestinationIp]: { + columns: { + [columnDestinationIpTimestamp]: { + label: '@timestamp', + dataType: 'date', + operationType: 'date_histogram', + sourceField: '@timestamp', + isBucketed: true, + scale: 'interval', + params: { + interval: 'auto', + }, + }, + [columnDestinationIp]: { + label: DESTINATION_CHART_LABEL, + dataType: 'number', + operationType: 'unique_count', + scale: 'ratio', + sourceField: 'destination.ip', + isBucketed: false, + filter: { + query: + '"destination.ip": "10.0.0.0/8" or "destination.ip": "192.168.0.0/16" or "destination.ip": "172.16.0.0/12" or "destination.ip": "fd00::/8"', + language: 'kuery', + }, }, }, + columnOrder: [columnDestinationIpTimestamp, columnDestinationIp], + incompleteColumns: {}, }, - columnOrder: [ - '36444b8c-7e10-4069-8298-6c1b46912be2', - 'ac1eb80c-ddde-46c4-a90c-400261926762', - ], - incompleteColumns: {}, }, }, }, }, - }, - references: [ - { - type: 'index-pattern', - id: '{dataViewId}', - name: 'indexpattern-datasource-current-indexpattern', - }, - { - type: 'index-pattern', - id: '{dataViewId}', - name: 'indexpattern-datasource-layer-38aa6532-6bf9-4c8f-b2a6-da8d32f7d0d7', - }, - { - type: 'index-pattern', - id: '{dataViewId}', - name: 'indexpattern-datasource-layer-72dc4b99-b07d-4dc9-958b-081d259e11fa', - }, - ], -} as LensAttributes; + references: [ + { + type: 'index-pattern', + id: '{dataViewId}', + name: 'indexpattern-datasource-current-indexpattern', + }, + { + type: 'index-pattern', + id: '{dataViewId}', + name: `indexpattern-datasource-layer-${layerSourceIp}`, + }, + { + type: 'index-pattern', + id: '{dataViewId}', + name: `indexpattern-datasource-layer-${layerDestinationIp}`, + }, + ], + } as LensAttributes; +}; diff --git a/x-pack/plugins/security_solution/public/common/components/visualization_actions/lens_attributes/network/kpi_unique_private_ips_bar.ts b/x-pack/plugins/security_solution/public/common/components/visualization_actions/lens_attributes/network/kpi_unique_private_ips_bar.ts index 106c1c5e83124..3c98a21ddcf10 100644 --- a/x-pack/plugins/security_solution/public/common/components/visualization_actions/lens_attributes/network/kpi_unique_private_ips_bar.ts +++ b/x-pack/plugins/security_solution/public/common/components/visualization_actions/lens_attributes/network/kpi_unique_private_ips_bar.ts @@ -6,180 +6,185 @@ */ import { SOURCE_CHART_LABEL, DESTINATION_CHART_LABEL, UNIQUE_COUNT } from '../../translations'; -import type { LensAttributes } from '../../types'; +import type { LensAttributes, GetLensAttributes } from '../../types'; -export const kpiUniquePrivateIpsBarLensAttributes: LensAttributes = { - title: '[Network] Unique private IPs - bar chart', - description: '', - visualizationType: 'lnsXY', - state: { - visualization: { - legend: { - isVisible: false, - position: 'right', - showSingleSeries: false, - }, - valueLabels: 'hide', - fittingFunction: 'None', - yLeftExtent: { - mode: 'full', - }, - yRightExtent: { - mode: 'full', - }, - axisTitlesVisibilitySettings: { - x: false, - yLeft: false, - yRight: true, - }, - tickLabelsVisibilitySettings: { - x: true, - yLeft: true, - yRight: true, - }, - labelsOrientation: { - x: 0, - yLeft: 0, - yRight: 0, - }, - gridlinesVisibilitySettings: { - x: true, - yLeft: true, - yRight: true, - }, - preferredSeriesType: 'bar_horizontal_stacked', - layers: [ - { - layerId: 'e406bf4f-942b-41ac-b516-edb5cef06ec8', - accessors: ['5acd4c9d-dc3b-4b21-9632-e4407944c36d'], - position: 'top', - seriesType: 'bar_horizontal_stacked', - showGridlines: false, - layerType: 'data', - yConfig: [ - { - forAccessor: '5acd4c9d-dc3b-4b21-9632-e4407944c36d', - color: '#d36186', - }, - ], - xAccessor: 'd9c438c5-f776-4436-9d20-d62dc8c03be8', +const columnSourceIp = '5acd4c9d-dc3b-4b21-9632-e4407944c36d'; +const columnSourceIpFilter = 'd9c438c5-f776-4436-9d20-d62dc8c03be8'; + +const columnDestinationIp = 'd27e0966-daf9-41f4-9033-230cf1e76dc9'; +const columnDestinationIpFilter = '4607c585-3af3-43b9-804f-e49b27796d79'; + +const layerSourceIp = 'e406bf4f-942b-41ac-b516-edb5cef06ec8'; +const layerDestinationIp = '38aa6532-6bf9-4c8f-b2a6-da8d32f7d0d7'; + +export const getKpiUniquePrivateIpsBarLensAttributes: GetLensAttributes = ({ colorSchemas }) => { + return { + title: '[Network] Unique private IPs - bar chart', + description: '', + visualizationType: 'lnsXY', + state: { + visualization: { + legend: { + isVisible: false, + position: 'right', + showSingleSeries: false, }, - { - layerId: '38aa6532-6bf9-4c8f-b2a6-da8d32f7d0d7', - seriesType: 'bar_horizontal_stacked', - accessors: ['d27e0966-daf9-41f4-9033-230cf1e76dc9'], - layerType: 'data', - yConfig: [ - { - forAccessor: 'd27e0966-daf9-41f4-9033-230cf1e76dc9', - color: '#9170b8', - }, - ], - xAccessor: '4607c585-3af3-43b9-804f-e49b27796d79', + valueLabels: 'hide', + fittingFunction: 'None', + yLeftExtent: { + mode: 'full', }, - ], - }, - query: { - query: '', - language: 'kuery', - }, - filters: [], - datasourceStates: { - formBased: { - layers: { - 'e406bf4f-942b-41ac-b516-edb5cef06ec8': { - columns: { - '5acd4c9d-dc3b-4b21-9632-e4407944c36d': { - label: UNIQUE_COUNT('source.ip'), - dataType: 'number', - isBucketed: false, - operationType: 'unique_count', - scale: 'ratio', - sourceField: 'source.ip', - filter: { - query: - 'source.ip: "10.0.0.0/8" or source.ip: "192.168.0.0/16" or source.ip: "172.16.0.0/12" or source.ip: "fd00::/8"', - language: 'kuery', - }, + yRightExtent: { + mode: 'full', + }, + axisTitlesVisibilitySettings: { + x: false, + yLeft: false, + yRight: true, + }, + tickLabelsVisibilitySettings: { + x: true, + yLeft: true, + yRight: true, + }, + labelsOrientation: { + x: 0, + yLeft: 0, + yRight: 0, + }, + gridlinesVisibilitySettings: { + x: true, + yLeft: true, + yRight: true, + }, + preferredSeriesType: 'bar_horizontal_stacked', + layers: [ + { + layerId: layerSourceIp, + accessors: [columnSourceIp], + position: 'top', + seriesType: 'bar_horizontal_stacked', + showGridlines: false, + layerType: 'data', + yConfig: [ + { + forAccessor: columnSourceIp, + color: colorSchemas?.['source.ip'], }, - 'd9c438c5-f776-4436-9d20-d62dc8c03be8': { - label: 'Filters', - dataType: 'string', - operationType: 'filters', - scale: 'ordinal', - isBucketed: true, - params: { - filters: [ - { - input: { language: 'kuery', query: 'source.ip: *' }, - label: SOURCE_CHART_LABEL, - }, - ], - }, + ], + xAccessor: columnSourceIpFilter, + }, + { + layerId: layerDestinationIp, + seriesType: 'bar_horizontal_stacked', + accessors: [columnDestinationIp], + layerType: 'data', + yConfig: [ + { + forAccessor: columnDestinationIp, + color: colorSchemas?.['destination.ip'], }, - }, - columnOrder: [ - 'd9c438c5-f776-4436-9d20-d62dc8c03be8', - '5acd4c9d-dc3b-4b21-9632-e4407944c36d', ], - incompleteColumns: {}, + xAccessor: columnDestinationIpFilter, }, - '38aa6532-6bf9-4c8f-b2a6-da8d32f7d0d7': { - columns: { - 'd27e0966-daf9-41f4-9033-230cf1e76dc9': { - label: UNIQUE_COUNT('destination.ip'), - dataType: 'number', - isBucketed: false, - operationType: 'unique_count', - scale: 'ratio', - sourceField: 'destination.ip', - filter: { - query: - '"destination.ip": "10.0.0.0/8" or "destination.ip": "192.168.0.0/16" or "destination.ip": "172.16.0.0/12" or "destination.ip": "fd00::/8"', - language: 'kuery', + ], + }, + query: { + query: '', + language: 'kuery', + }, + filters: [], + datasourceStates: { + formBased: { + layers: { + [layerSourceIp]: { + columns: { + [columnSourceIp]: { + label: UNIQUE_COUNT('source.ip'), + dataType: 'number', + isBucketed: false, + operationType: 'unique_count', + scale: 'ratio', + sourceField: 'source.ip', + filter: { + query: + 'source.ip: "10.0.0.0/8" or source.ip: "192.168.0.0/16" or source.ip: "172.16.0.0/12" or source.ip: "fd00::/8"', + language: 'kuery', + }, + }, + [columnSourceIpFilter]: { + label: 'Filters', + dataType: 'string', + operationType: 'filters', + scale: 'ordinal', + isBucketed: true, + params: { + filters: [ + { + input: { language: 'kuery', query: 'source.ip: *' }, + label: SOURCE_CHART_LABEL, + }, + ], + }, }, }, - '4607c585-3af3-43b9-804f-e49b27796d79': { - label: 'Filters', - dataType: 'string', - operationType: 'filters', - scale: 'ordinal', - isBucketed: true, - params: { - filters: [ - { - input: { language: 'kuery', query: 'destination.ip: *' }, - label: DESTINATION_CHART_LABEL, - }, - ], + columnOrder: [columnSourceIpFilter, columnSourceIp], + incompleteColumns: {}, + }, + [layerDestinationIp]: { + columns: { + [columnDestinationIp]: { + label: UNIQUE_COUNT('destination.ip'), + dataType: 'number', + isBucketed: false, + operationType: 'unique_count', + scale: 'ratio', + sourceField: 'destination.ip', + filter: { + query: + '"destination.ip": "10.0.0.0/8" or "destination.ip": "192.168.0.0/16" or "destination.ip": "172.16.0.0/12" or "destination.ip": "fd00::/8"', + language: 'kuery', + }, + }, + [columnDestinationIpFilter]: { + label: 'Filters', + dataType: 'string', + operationType: 'filters', + scale: 'ordinal', + isBucketed: true, + params: { + filters: [ + { + input: { language: 'kuery', query: 'destination.ip: *' }, + label: DESTINATION_CHART_LABEL, + }, + ], + }, }, }, + columnOrder: [columnDestinationIpFilter, columnDestinationIp], + incompleteColumns: {}, }, - columnOrder: [ - '4607c585-3af3-43b9-804f-e49b27796d79', - 'd27e0966-daf9-41f4-9033-230cf1e76dc9', - ], - incompleteColumns: {}, }, }, }, }, - }, - references: [ - { - type: 'index-pattern', - id: '{dataViewId}', - name: 'indexpattern-datasource-current-indexpattern', - }, - { - type: 'index-pattern', - id: '{dataViewId}', - name: 'indexpattern-datasource-layer-e406bf4f-942b-41ac-b516-edb5cef06ec8', - }, - { - type: 'index-pattern', - id: '{dataViewId}', - name: 'indexpattern-datasource-layer-38aa6532-6bf9-4c8f-b2a6-da8d32f7d0d7', - }, - ], -} as LensAttributes; + references: [ + { + type: 'index-pattern', + id: '{dataViewId}', + name: 'indexpattern-datasource-current-indexpattern', + }, + { + type: 'index-pattern', + id: '{dataViewId}', + name: `indexpattern-datasource-layer-${layerSourceIp}`, + }, + { + type: 'index-pattern', + id: '{dataViewId}', + name: `indexpattern-datasource-layer-${layerDestinationIp}`, + }, + ], + } as LensAttributes; +}; diff --git a/x-pack/plugins/security_solution/public/common/components/visualization_actions/lens_attributes/users/kpi_total_users_area.ts b/x-pack/plugins/security_solution/public/common/components/visualization_actions/lens_attributes/users/kpi_total_users_area.ts index c241d03266cc3..786c738315db1 100644 --- a/x-pack/plugins/security_solution/public/common/components/visualization_actions/lens_attributes/users/kpi_total_users_area.ts +++ b/x-pack/plugins/security_solution/public/common/components/visualization_actions/lens_attributes/users/kpi_total_users_area.ts @@ -6,80 +6,83 @@ */ import { UNIQUE_COUNT } from '../../translations'; -import type { LensAttributes } from '../../types'; +import type { LensAttributes, GetLensAttributes } from '../../types'; -export const kpiTotalUsersAreaLensAttributes: LensAttributes = { - description: '', - state: { - datasourceStates: { - formBased: { - layers: { - '416b6fad-1923-4f6a-a2df-b223bb287e30': { - columnOrder: [ - '5eea817b-67b7-4268-8ecb-7688d1094721', - 'b00c65ea-32be-4163-bfc8-f795b1ef9d06', - ], - columns: { - '5eea817b-67b7-4268-8ecb-7688d1094721': { - dataType: 'date', - isBucketed: true, - label: '@timestamp', - operationType: 'date_histogram', - params: { interval: 'auto' }, - scale: 'interval', - sourceField: '@timestamp', - }, - 'b00c65ea-32be-4163-bfc8-f795b1ef9d06': { - customLabel: true, - dataType: 'number', - isBucketed: false, - label: UNIQUE_COUNT('user.name'), - operationType: 'unique_count', - scale: 'ratio', - sourceField: 'user.name', +const columnTimestamp = '5eea817b-67b7-4268-8ecb-7688d1094721'; +const columnUserName = 'b00c65ea-32be-4163-bfc8-f795b1ef9d06'; + +const layerUserName = '416b6fad-1923-4f6a-a2df-b223bb287e30'; + +export const getKpiTotalUsersAreaLensAttributes: GetLensAttributes = () => + ({ + description: '', + state: { + datasourceStates: { + formBased: { + layers: { + [layerUserName]: { + columnOrder: [columnTimestamp, columnUserName], + columns: { + [columnTimestamp]: { + dataType: 'date', + isBucketed: true, + label: '@timestamp', + operationType: 'date_histogram', + params: { interval: 'auto' }, + scale: 'interval', + sourceField: '@timestamp', + }, + [columnUserName]: { + customLabel: true, + dataType: 'number', + isBucketed: false, + label: UNIQUE_COUNT('user.name'), + operationType: 'unique_count', + scale: 'ratio', + sourceField: 'user.name', + }, }, + incompleteColumns: {}, }, - incompleteColumns: {}, }, }, }, + filters: [], + query: { language: 'kuery', query: '' }, + visualization: { + axisTitlesVisibilitySettings: { x: false, yLeft: false, yRight: false }, + fittingFunction: 'None', + gridlinesVisibilitySettings: { x: true, yLeft: true, yRight: true }, + labelsOrientation: { x: 0, yLeft: 0, yRight: 0 }, + layers: [ + { + accessors: [columnUserName], + layerId: layerUserName, + layerType: 'data', + seriesType: 'area', + xAccessor: columnTimestamp, + }, + ], + legend: { isVisible: true, position: 'right' }, + preferredSeriesType: 'area', + tickLabelsVisibilitySettings: { x: true, yLeft: true, yRight: true }, + valueLabels: 'hide', + yLeftExtent: { mode: 'full' }, + yRightExtent: { mode: 'full' }, + }, }, - filters: [], - query: { language: 'kuery', query: '' }, - visualization: { - axisTitlesVisibilitySettings: { x: false, yLeft: false, yRight: false }, - fittingFunction: 'None', - gridlinesVisibilitySettings: { x: true, yLeft: true, yRight: true }, - labelsOrientation: { x: 0, yLeft: 0, yRight: 0 }, - layers: [ - { - accessors: ['b00c65ea-32be-4163-bfc8-f795b1ef9d06'], - layerId: '416b6fad-1923-4f6a-a2df-b223bb287e30', - layerType: 'data', - seriesType: 'area', - xAccessor: '5eea817b-67b7-4268-8ecb-7688d1094721', - }, - ], - legend: { isVisible: true, position: 'right' }, - preferredSeriesType: 'area', - tickLabelsVisibilitySettings: { x: true, yLeft: true, yRight: true }, - valueLabels: 'hide', - yLeftExtent: { mode: 'full' }, - yRightExtent: { mode: 'full' }, - }, - }, - title: '[User] Users - area', - visualizationType: 'lnsXY', - references: [ - { - id: '{dataViewId}', - name: 'indexpattern-datasource-current-indexpattern', - type: 'index-pattern', - }, - { - id: '{dataViewId}', - name: 'indexpattern-datasource-layer-416b6fad-1923-4f6a-a2df-b223bb287e30', - type: 'index-pattern', - }, - ], -} as LensAttributes; + title: '[User] Users - area', + visualizationType: 'lnsXY', + references: [ + { + id: '{dataViewId}', + name: 'indexpattern-datasource-current-indexpattern', + type: 'index-pattern', + }, + { + id: '{dataViewId}', + name: `indexpattern-datasource-layer-${layerUserName}`, + type: 'index-pattern', + }, + ], + } as LensAttributes); diff --git a/x-pack/plugins/security_solution/public/common/components/visualization_actions/lens_attributes/users/kpi_user_authentications_area.ts b/x-pack/plugins/security_solution/public/common/components/visualization_actions/lens_attributes/users/kpi_user_authentications_area.ts index a7efc44155eec..49804df3829b1 100644 --- a/x-pack/plugins/security_solution/public/common/components/visualization_actions/lens_attributes/users/kpi_user_authentications_area.ts +++ b/x-pack/plugins/security_solution/public/common/components/visualization_actions/lens_attributes/users/kpi_user_authentications_area.ts @@ -6,197 +6,200 @@ */ import { FAIL_CHART_LABEL, SUCCESS_CHART_LABEL } from '../../translations'; -import type { LensAttributes } from '../../types'; +import type { LensAttributes, GetLensAttributes } from '../../types'; -export const kpiUserAuthenticationsAreaLensAttributes: LensAttributes = { - title: '[Host] User authentications - area ', - description: '', - visualizationType: 'lnsXY', - state: { - visualization: { - axisTitlesVisibilitySettings: { - x: false, - yLeft: false, - yRight: true, - }, - fittingFunction: 'None', - gridlinesVisibilitySettings: { - x: true, - yLeft: true, - yRight: true, - }, - labelsOrientation: { - x: 0, - yLeft: 0, - yRight: 0, - }, - layers: [ - { - accessors: ['0eb97c09-a351-4280-97da-944e4bd30dd7'], - layerId: '4590dafb-4ac7-45aa-8641-47a3ff0b817c', - layerType: 'data', - seriesType: 'area', - xAccessor: '49a42fe6-ebe8-4adb-8eed-1966a5297b7e', - yConfig: [ - { - color: '#54b399', - forAccessor: '0eb97c09-a351-4280-97da-944e4bd30dd7', - }, - ], - }, - { - accessors: ['2b27c80e-a20d-46f1-8fb2-79626ef4563c'], - layerId: '31213ae3-905b-4e88-b987-0cccb1f3209f', - layerType: 'data', - seriesType: 'area', - xAccessor: '33a6163d-0c0a-451d-aa38-8ca6010dd5bf', - yConfig: [ - { - color: '#e7664c', - forAccessor: '2b27c80e-a20d-46f1-8fb2-79626ef4563c', - }, - ], +const columnEventOutcomeFailure = '2b27c80e-a20d-46f1-8fb2-79626ef4563c'; +const columnEventOutcomeFailureTimestamp = '33a6163d-0c0a-451d-aa38-8ca6010dd5bf'; + +const columnEventOutcomeSuccess = '0eb97c09-a351-4280-97da-944e4bd30dd7'; +const columnEventOutcomeSuccessTimestamp = '49a42fe6-ebe8-4adb-8eed-1966a5297b7e'; +const layoutEventOutcomeSuccess = '4590dafb-4ac7-45aa-8641-47a3ff0b817c'; +const layoutEventOutcomeFailure = '31213ae3-905b-4e88-b987-0cccb1f3209f'; + +export const getKpiUserAuthenticationsAreaLensAttributes: GetLensAttributes = ({ colorSchemas }) => + ({ + title: '[Host] User authentications - area ', + description: '', + visualizationType: 'lnsXY', + state: { + visualization: { + axisTitlesVisibilitySettings: { + x: false, + yLeft: false, + yRight: true, }, - ], - legend: { - isVisible: false, - position: 'right', - showSingleSeries: false, - }, - preferredSeriesType: 'area', - tickLabelsVisibilitySettings: { - x: true, - yLeft: true, - yRight: true, - }, - valueLabels: 'hide', - yLeftExtent: { - mode: 'full', - }, - yRightExtent: { - mode: 'full', - }, - }, - query: { - language: 'kuery', - query: '', - }, - filters: [ - { - $state: { - store: 'appState', + fittingFunction: 'None', + gridlinesVisibilitySettings: { + x: true, + yLeft: true, + yRight: true, }, - meta: { - alias: null, - disabled: false, - // @ts-expect-error upgrade typescript v4.9.5 - indexRefName: 'filter-index-pattern-0', - key: 'query', - negate: false, - type: 'custom', - value: '{"bool":{"filter":[{"term":{"event.category":"authentication"}}]}}', + labelsOrientation: { + x: 0, + yLeft: 0, + yRight: 0, }, - query: { - bool: { - filter: [ + layers: [ + { + accessors: [columnEventOutcomeSuccess], + layerId: layoutEventOutcomeSuccess, + layerType: 'data', + seriesType: 'area', + xAccessor: columnEventOutcomeSuccessTimestamp, + yConfig: [ { - term: { - 'event.category': 'authentication', - }, + color: colorSchemas?.['event.outcome.success'], + forAccessor: columnEventOutcomeSuccess, }, ], }, + { + accessors: [columnEventOutcomeFailure], + layerId: layoutEventOutcomeFailure, + layerType: 'data', + seriesType: 'area', + xAccessor: columnEventOutcomeFailureTimestamp, + yConfig: [ + { + color: colorSchemas?.['event.outcome.failure'], + forAccessor: columnEventOutcomeFailure, + }, + ], + }, + ], + legend: { + isVisible: false, + position: 'right', + showSingleSeries: false, + }, + preferredSeriesType: 'area', + tickLabelsVisibilitySettings: { + x: true, + yLeft: true, + yRight: true, + }, + valueLabels: 'hide', + yLeftExtent: { + mode: 'full', + }, + yRightExtent: { + mode: 'full', }, }, - ], - datasourceStates: { - formBased: { - layers: { - '31213ae3-905b-4e88-b987-0cccb1f3209f': { - columnOrder: [ - '33a6163d-0c0a-451d-aa38-8ca6010dd5bf', - '2b27c80e-a20d-46f1-8fb2-79626ef4563c', - ], - columns: { - '2b27c80e-a20d-46f1-8fb2-79626ef4563c': { - customLabel: true, - dataType: 'number', - filter: { - language: 'kuery', - query: 'event.outcome: "failure" ', - }, - isBucketed: false, - label: FAIL_CHART_LABEL, - operationType: 'count', - scale: 'ratio', - sourceField: '___records___', - }, - '33a6163d-0c0a-451d-aa38-8ca6010dd5bf': { - dataType: 'date', - isBucketed: true, - label: '@timestamp', - operationType: 'date_histogram', - params: { - interval: 'auto', + query: { + language: 'kuery', + query: '', + }, + filters: [ + { + $state: { + store: 'appState', + }, + meta: { + alias: null, + disabled: false, + // @ts-expect-error upgrade typescript v4.9.5 + indexRefName: 'filter-index-pattern-0', + key: 'query', + negate: false, + type: 'custom', + value: '{"bool":{"filter":[{"term":{"event.category":"authentication"}}]}}', + }, + query: { + bool: { + filter: [ + { + term: { + 'event.category': 'authentication', + }, }, - scale: 'interval', - sourceField: '@timestamp', - }, + ], }, - incompleteColumns: {}, }, - '4590dafb-4ac7-45aa-8641-47a3ff0b817c': { - columnOrder: [ - '49a42fe6-ebe8-4adb-8eed-1966a5297b7e', - '0eb97c09-a351-4280-97da-944e4bd30dd7', - ], - columns: { - '0eb97c09-a351-4280-97da-944e4bd30dd7': { - customLabel: true, - dataType: 'number', - filter: { - language: 'kuery', - query: 'event.outcome : "success" ', + }, + ], + datasourceStates: { + formBased: { + layers: { + [layoutEventOutcomeFailure]: { + columnOrder: [columnEventOutcomeFailureTimestamp, columnEventOutcomeFailure], + columns: { + [columnEventOutcomeFailure]: { + customLabel: true, + dataType: 'number', + filter: { + language: 'kuery', + query: 'event.outcome: "failure" ', + }, + isBucketed: false, + label: FAIL_CHART_LABEL, + operationType: 'count', + scale: 'ratio', + sourceField: '___records___', + }, + [columnEventOutcomeFailureTimestamp]: { + dataType: 'date', + isBucketed: true, + label: '@timestamp', + operationType: 'date_histogram', + params: { + interval: 'auto', + }, + scale: 'interval', + sourceField: '@timestamp', }, - isBucketed: false, - label: SUCCESS_CHART_LABEL, - operationType: 'count', - scale: 'ratio', - sourceField: '___records___', }, - '49a42fe6-ebe8-4adb-8eed-1966a5297b7e': { - dataType: 'date', - isBucketed: true, - label: '@timestamp', - operationType: 'date_histogram', - params: { - interval: 'auto', + incompleteColumns: {}, + }, + [layoutEventOutcomeSuccess]: { + columnOrder: [columnEventOutcomeSuccessTimestamp, columnEventOutcomeSuccess], + columns: { + [columnEventOutcomeSuccess]: { + customLabel: true, + dataType: 'number', + filter: { + language: 'kuery', + query: 'event.outcome : "success" ', + }, + isBucketed: false, + label: SUCCESS_CHART_LABEL, + operationType: 'count', + scale: 'ratio', + sourceField: '___records___', + }, + [columnEventOutcomeSuccessTimestamp]: { + dataType: 'date', + isBucketed: true, + label: '@timestamp', + operationType: 'date_histogram', + params: { + interval: 'auto', + }, + scale: 'interval', + sourceField: '@timestamp', }, - scale: 'interval', - sourceField: '@timestamp', }, + incompleteColumns: {}, }, - incompleteColumns: {}, }, }, }, }, - }, - references: [ - { - type: 'index-pattern', - id: '{dataViewId}', - name: 'indexpattern-datasource-current-indexpattern', - }, - { - type: 'index-pattern', - id: '{dataViewId}', - name: 'indexpattern-datasource-layer-31213ae3-905b-4e88-b987-0cccb1f3209f', - }, - { - type: 'index-pattern', - id: '{dataViewId}', - name: 'indexpattern-datasource-layer-4590dafb-4ac7-45aa-8641-47a3ff0b817c', - }, - ], -} as LensAttributes; + references: [ + { + type: 'index-pattern', + id: '{dataViewId}', + name: 'indexpattern-datasource-current-indexpattern', + }, + { + type: 'index-pattern', + id: '{dataViewId}', + name: `indexpattern-datasource-layer-${layoutEventOutcomeFailure}`, + }, + { + type: 'index-pattern', + id: '{dataViewId}', + name: `indexpattern-datasource-layer-${layoutEventOutcomeSuccess}`, + }, + ], + } as LensAttributes); diff --git a/x-pack/plugins/security_solution/public/common/components/visualization_actions/lens_attributes/users/kpi_user_authentications_bar.ts b/x-pack/plugins/security_solution/public/common/components/visualization_actions/lens_attributes/users/kpi_user_authentications_bar.ts index ff6937b1e43e4..3aa057937eb81 100644 --- a/x-pack/plugins/security_solution/public/common/components/visualization_actions/lens_attributes/users/kpi_user_authentications_bar.ts +++ b/x-pack/plugins/security_solution/public/common/components/visualization_actions/lens_attributes/users/kpi_user_authentications_bar.ts @@ -5,198 +5,202 @@ * 2.0. */ -import type { LensAttributes } from '../../types'; +import type { LensAttributes, GetLensAttributes } from '../../types'; import { FAIL_CHART_LABEL, SUCCESS_CHART_LABEL } from '../../translations'; -export const kpiUserAuthenticationsBarLensAttributes: LensAttributes = { - title: '[Host] User authentications - bar ', - description: '', - visualizationType: 'lnsXY', - state: { - visualization: { - axisTitlesVisibilitySettings: { - x: false, - yLeft: false, - yRight: true, - }, - fittingFunction: 'None', - gridlinesVisibilitySettings: { - x: true, - yLeft: true, - yRight: true, - }, - labelsOrientation: { - x: 0, - yLeft: 0, - yRight: 0, - }, - layers: [ - { - accessors: ['938b445a-a291-4bbc-84fe-4f47b69c20e4'], - layerId: '31213ae3-905b-4e88-b987-0cccb1f3209f', - layerType: 'data', - seriesType: 'bar_horizontal_stacked', - xAccessor: '430e690c-9992-414f-9bce-00812d99a5e7', - yConfig: [], +const columnEventOutcomeFailure = 'c8165fc3-7180-4f1b-8c87-bc3ea04c6df7'; +const columnEventOutcomeFailureFilter = 'e959c351-a3a2-4525-b244-9623f215a8fd'; + +const columnEventOutcomeSuccess = '938b445a-a291-4bbc-84fe-4f47b69c20e4'; +const columnEventOutcomeSuccessFilter = '430e690c-9992-414f-9bce-00812d99a5e7'; + +const layerEventOutcomeFailure = 'b9acd453-f476-4467-ad38-203e37b73e55'; +const layerEventOutcomeSuccess = '31213ae3-905b-4e88-b987-0cccb1f3209f'; + +export const getKpiUserAuthenticationsBarLensAttributes: GetLensAttributes = ({ colorSchemas }) => + ({ + title: '[Host] User authentications - bar ', + description: '', + visualizationType: 'lnsXY', + state: { + visualization: { + axisTitlesVisibilitySettings: { + x: false, + yLeft: false, + yRight: true, }, - { - accessors: ['c8165fc3-7180-4f1b-8c87-bc3ea04c6df7'], - layerId: 'b9acd453-f476-4467-ad38-203e37b73e55', - layerType: 'data', - seriesType: 'bar_horizontal_stacked', - xAccessor: 'e959c351-a3a2-4525-b244-9623f215a8fd', - yConfig: [ - { - color: '#e7664c', - forAccessor: 'c8165fc3-7180-4f1b-8c87-bc3ea04c6df7', - }, - ], + fittingFunction: 'None', + gridlinesVisibilitySettings: { + x: true, + yLeft: true, + yRight: true, }, - ], - legend: { - isVisible: false, - position: 'right', - showSingleSeries: false, - }, - preferredSeriesType: 'bar_horizontal_stacked', - tickLabelsVisibilitySettings: { - x: true, - yLeft: true, - yRight: true, - }, - valueLabels: 'hide', - yLeftExtent: { - mode: 'full', - }, - yRightExtent: { - mode: 'full', - }, - }, - query: { - language: 'kuery', - query: '', - }, - filters: [ - { - $state: { - store: 'appState', - }, - meta: { - alias: null, - disabled: false, - // @ts-expect-error upgrade typescript v4.9.5 - indexRefName: 'filter-index-pattern-0', - key: 'query', - negate: false, - type: 'custom', - value: '{"bool":{"filter":[{"term":{"event.category":"authentication"}}]}}', + labelsOrientation: { + x: 0, + yLeft: 0, + yRight: 0, }, - query: { - bool: { - filter: [ + layers: [ + { + accessors: [columnEventOutcomeSuccess], + layerId: layerEventOutcomeSuccess, + layerType: 'data', + seriesType: 'bar_horizontal_stacked', + xAccessor: columnEventOutcomeSuccessFilter, + yConfig: [], + }, + { + accessors: [columnEventOutcomeFailure], + layerId: layerEventOutcomeFailure, + layerType: 'data', + seriesType: 'bar_horizontal_stacked', + xAccessor: columnEventOutcomeFailureFilter, + yConfig: [ { - term: { - 'event.category': 'authentication', - }, + color: colorSchemas?.['event.outcome.failure'], + forAccessor: columnEventOutcomeFailure, }, ], }, + ], + legend: { + isVisible: false, + position: 'right', + showSingleSeries: false, + }, + preferredSeriesType: 'bar_horizontal_stacked', + tickLabelsVisibilitySettings: { + x: true, + yLeft: true, + yRight: true, + }, + valueLabels: 'hide', + yLeftExtent: { + mode: 'full', + }, + yRightExtent: { + mode: 'full', }, }, - ], - datasourceStates: { - formBased: { - layers: { - '31213ae3-905b-4e88-b987-0cccb1f3209f': { - columnOrder: [ - '430e690c-9992-414f-9bce-00812d99a5e7', - '938b445a-a291-4bbc-84fe-4f47b69c20e4', - ], - columns: { - '430e690c-9992-414f-9bce-00812d99a5e7': { - dataType: 'string', - isBucketed: true, - label: 'Filters', - operationType: 'filters', - params: { - filters: [ - { - input: { - language: 'kuery', - query: 'event.outcome : "success" ', - }, - label: SUCCESS_CHART_LABEL, - }, - ], + query: { + language: 'kuery', + query: '', + }, + filters: [ + { + $state: { + store: 'appState', + }, + meta: { + alias: null, + disabled: false, + // @ts-expect-error upgrade typescript v4.9.5 + indexRefName: 'filter-index-pattern-0', + key: 'query', + negate: false, + type: 'custom', + value: '{"bool":{"filter":[{"term":{"event.category":"authentication"}}]}}', + }, + query: { + bool: { + filter: [ + { + term: { + 'event.category': 'authentication', + }, }, - scale: 'ordinal', - }, - '938b445a-a291-4bbc-84fe-4f47b69c20e4': { - dataType: 'number', - isBucketed: false, - label: SUCCESS_CHART_LABEL, - operationType: 'count', - scale: 'ratio', - sourceField: '___records___', - }, + ], }, - incompleteColumns: {}, }, - 'b9acd453-f476-4467-ad38-203e37b73e55': { - columnOrder: [ - 'e959c351-a3a2-4525-b244-9623f215a8fd', - 'c8165fc3-7180-4f1b-8c87-bc3ea04c6df7', - ], - columns: { - 'c8165fc3-7180-4f1b-8c87-bc3ea04c6df7': { - dataType: 'number', - isBucketed: false, - label: 'Fail', - operationType: 'count', - scale: 'ratio', - sourceField: '___records___', + }, + ], + datasourceStates: { + formBased: { + layers: { + [layerEventOutcomeSuccess]: { + columnOrder: [columnEventOutcomeSuccessFilter, columnEventOutcomeSuccess], + columns: { + [columnEventOutcomeSuccessFilter]: { + dataType: 'string', + isBucketed: true, + label: 'Filters', + operationType: 'filters', + params: { + filters: [ + { + input: { + language: 'kuery', + query: 'event.outcome : "success" ', + }, + label: SUCCESS_CHART_LABEL, + }, + ], + }, + scale: 'ordinal', + }, + [columnEventOutcomeSuccess]: { + dataType: 'number', + isBucketed: false, + label: SUCCESS_CHART_LABEL, + operationType: 'count', + scale: 'ratio', + sourceField: '___records___', + }, }, - 'e959c351-a3a2-4525-b244-9623f215a8fd': { - customLabel: true, - dataType: 'string', - isBucketed: true, - label: FAIL_CHART_LABEL, - operationType: 'filters', - params: { - filters: [ - { - input: { - language: 'kuery', - query: 'event.outcome:"failure" ', + incompleteColumns: {}, + }, + [layerEventOutcomeFailure]: { + columnOrder: [columnEventOutcomeFailureFilter, columnEventOutcomeFailure], + columns: { + [columnEventOutcomeFailure]: { + dataType: 'number', + isBucketed: false, + label: 'Fail', + operationType: 'count', + scale: 'ratio', + sourceField: '___records___', + }, + [columnEventOutcomeFailureFilter]: { + customLabel: true, + dataType: 'string', + isBucketed: true, + label: FAIL_CHART_LABEL, + operationType: 'filters', + params: { + filters: [ + { + input: { + language: 'kuery', + query: 'event.outcome:"failure" ', + }, + label: FAIL_CHART_LABEL, }, - label: FAIL_CHART_LABEL, - }, - ], + ], + }, + scale: 'ordinal', }, - scale: 'ordinal', }, + incompleteColumns: {}, }, - incompleteColumns: {}, }, }, }, }, - }, - references: [ - { - type: 'index-pattern', - id: '{dataViewId}', - name: 'indexpattern-datasource-current-indexpattern', - }, - { - type: 'index-pattern', - id: '{dataViewId}', - name: 'indexpattern-datasource-layer-31213ae3-905b-4e88-b987-0cccb1f3209f', - }, - { - type: 'index-pattern', - id: '{dataViewId}', - name: 'indexpattern-datasource-layer-b9acd453-f476-4467-ad38-203e37b73e55', - }, - ], -} as LensAttributes; + references: [ + { + type: 'index-pattern', + id: '{dataViewId}', + name: 'indexpattern-datasource-current-indexpattern', + }, + { + type: 'index-pattern', + id: '{dataViewId}', + name: `indexpattern-datasource-layer-${layerEventOutcomeSuccess}`, + }, + { + type: 'index-pattern', + id: '{dataViewId}', + name: `indexpattern-datasource-layer-${layerEventOutcomeFailure}`, + }, + ], + } as LensAttributes); diff --git a/x-pack/plugins/security_solution/public/common/components/visualization_actions/lens_embeddable.tsx b/x-pack/plugins/security_solution/public/common/components/visualization_actions/lens_embeddable.tsx index 871750d5ad00f..edc4774996551 100644 --- a/x-pack/plugins/security_solution/public/common/components/visualization_actions/lens_embeddable.tsx +++ b/x-pack/plugins/security_solution/public/common/components/visualization_actions/lens_embeddable.tsx @@ -70,6 +70,7 @@ const LensEmbeddableComponent: React.FC = ({ withActions = DEFAULT_ACTIONS, disableOnClickFilter = false, casesAttachmentMetadata, + colorSchemas, }) => { const style = useMemo( () => ({ @@ -90,6 +91,7 @@ const LensEmbeddableComponent: React.FC = ({ const attributes = useLensAttributes({ applyGlobalQueriesAndFilters, applyPageAndTabsFilters, + colorSchemas, extraOptions, getLensAttributes, lensAttributes, @@ -220,6 +222,7 @@ const LensEmbeddableComponent: React.FC = ({ ; + export type LensAttributes = TypedLensByValueInput['attributes']; -export type GetLensAttributes = ( - stackByField?: string, - extraOptions?: ExtraOptions -) => LensAttributes; +export type GetLensAttributes = (params: { + stackByField?: string; + colorSchemas?: ColorSchemas; + extraOptions?: ExtraOptions; +}) => LensAttributes; export interface UseLensAttributesProps { applyGlobalQueriesAndFilters?: boolean; applyPageAndTabsFilters?: boolean; + colorSchemas?: ColorSchemas; extraOptions?: ExtraOptions; getLensAttributes?: GetLensAttributes; lensAttributes?: LensAttributes | null; @@ -48,6 +52,7 @@ export enum VisualizationContextMenuActions { export interface VisualizationActionsProps { applyGlobalQueriesAndFilters?: boolean; + colorSchemas?: ColorSchemas; className?: string; extraActions?: Action[]; extraOptions?: ExtraOptions; @@ -110,6 +115,11 @@ export interface LensEmbeddableComponentProps { * Metadata for cases Attachable visualization. */ casesAttachmentMetadata?: LensProps['metadata']; + + /** + * Color schemas for the visualization. + */ + colorSchemas?: ColorSchemas; } export enum RequestStatus { diff --git a/x-pack/plugins/security_solution/public/common/components/visualization_actions/use_lens_attributes.tsx b/x-pack/plugins/security_solution/public/common/components/visualization_actions/use_lens_attributes.tsx index 6a227c84681b1..aa3beeabaf5a5 100644 --- a/x-pack/plugins/security_solution/public/common/components/visualization_actions/use_lens_attributes.tsx +++ b/x-pack/plugins/security_solution/public/common/components/visualization_actions/use_lens_attributes.tsx @@ -25,6 +25,7 @@ import { export const useLensAttributes = ({ applyGlobalQueriesAndFilters = true, applyPageAndTabsFilters = true, + colorSchemas, extraOptions, getLensAttributes, lensAttributes, @@ -73,8 +74,8 @@ export const useLensAttributes = ({ lensAttributes ?? ((getLensAttributes && stackByField !== null && - getLensAttributes(stackByField, extraOptions)) as LensAttributes), - [extraOptions, getLensAttributes, lensAttributes, stackByField] + getLensAttributes({ stackByField, colorSchemas, extraOptions })) as LensAttributes), + [colorSchemas, extraOptions, getLensAttributes, lensAttributes, stackByField] ); const hasAdHocDataViews = Object.values(attrs?.state?.adHocDataViews ?? {}).length > 0; diff --git a/x-pack/plugins/security_solution/public/detections/components/alerts_kpis/chart_panels/chart_collapse/index.tsx b/x-pack/plugins/security_solution/public/detections/components/alerts_kpis/chart_panels/chart_collapse/index.tsx index 0539b7f7615d6..c779daf2b2dd2 100644 --- a/x-pack/plugins/security_solution/public/detections/components/alerts_kpis/chart_panels/chart_collapse/index.tsx +++ b/x-pack/plugins/security_solution/public/detections/components/alerts_kpis/chart_panels/chart_collapse/index.tsx @@ -4,7 +4,7 @@ * 2.0; you may not use this file except in compliance with the Elastic License * 2.0. */ -import { EuiFlexGroup, EuiFlexItem, EuiHealth, EuiText } from '@elastic/eui'; +import { EuiFlexGroup, EuiFlexItem, EuiHealth, EuiText, useEuiTheme } from '@elastic/eui'; import { ALERT_SEVERITY, ALERT_RULE_NAME } from '@kbn/rule-data-utils'; import type { MappingRuntimeFields } from '@elastic/elasticsearch/lib/api/types'; import type { Filter, Query } from '@kbn/es-query'; @@ -79,6 +79,7 @@ export const ChartCollapse: React.FC = ({ signalIndexName, runtimeMappings, }: Props) => { + const { euiTheme } = useEuiTheme(); const uniqueQueryId = useMemo(() => `${DETECTIONS_ALERTS_COLLAPSED_CHART_ID}-${uuid()}`, []); const aggregations = useMemo(() => combinedAggregations(groupBySelection), [groupBySelection]); @@ -115,7 +116,7 @@ export const ChartCollapse: React.FC = ({ {severities.map((severity) => ( - + {`${severity.label}: `} diff --git a/x-pack/plugins/security_solution/public/detections/components/alerts_kpis/severity_level_panel/columns.tsx b/x-pack/plugins/security_solution/public/detections/components/alerts_kpis/severity_level_panel/columns.tsx index 3e9f7eea4fbf8..71e4513ae326e 100644 --- a/x-pack/plugins/security_solution/public/detections/components/alerts_kpis/severity_level_panel/columns.tsx +++ b/x-pack/plugins/security_solution/public/detections/components/alerts_kpis/severity_level_panel/columns.tsx @@ -5,50 +5,55 @@ * 2.0. */ import React from 'react'; -import { EuiHealth, EuiText } from '@elastic/eui'; -import { capitalize } from 'lodash'; +import { EuiHealth, EuiText, useEuiTheme } from '@elastic/eui'; +import { capitalize, get as _get } from 'lodash'; import { ALERT_SEVERITY } from '@kbn/rule-data-utils'; import type { EuiBasicTableColumn } from '@elastic/eui'; import type { Severity } from '@kbn/securitysolution-io-ts-alerting-types'; import { TableId } from '@kbn/securitysolution-data-table'; import type { SeverityBuckets as SeverityData } from '../../../../overview/components/detection_response/alerts_by_status/types'; import { DefaultDraggable } from '../../../../common/components/draggables'; -import { SEVERITY_COLOR } from '../../../../overview/components/detection_response/utils'; +import { getSeverityColor } from '../../../../overview/components/detection_response/utils'; import { FormattedCount } from '../../../../common/components/formatted_number'; import { COUNT_TABLE_TITLE } from '../alerts_count_panel/translations'; import * as i18n from './translations'; -export const getSeverityTableColumns = (): Array> => [ - { - field: 'key', - name: i18n.SEVERITY_LEVEL_COLUMN_TITLE, - 'data-test-subj': 'severityTable-severity', - render: (severity: Severity) => ( - - - - ), - }, - { - field: 'value', - name: COUNT_TABLE_TITLE, - sortable: true, - dataType: 'number', - 'data-test-subj': 'severityTable-alertCount', - width: '45%', - render: (alertCount: number) => ( - - - - ), - }, -]; +export const useGetSeverityTableColumns = (): Array> => { + const { euiTheme } = useEuiTheme(); + const severityColors = getSeverityColor(euiTheme); + + return [ + { + field: 'key', + name: i18n.SEVERITY_LEVEL_COLUMN_TITLE, + 'data-test-subj': 'severityTable-severity', + render: (severity: Severity) => ( + + + + ), + }, + { + field: 'value', + name: COUNT_TABLE_TITLE, + sortable: true, + dataType: 'number', + 'data-test-subj': 'severityTable-alertCount', + width: '45%', + render: (alertCount: number) => ( + + + + ), + }, + ]; +}; diff --git a/x-pack/plugins/security_solution/public/detections/components/alerts_kpis/severity_level_panel/helpers.tsx b/x-pack/plugins/security_solution/public/detections/components/alerts_kpis/severity_level_panel/helpers.tsx index 86b4a5f0eae28..d2f96048b8817 100644 --- a/x-pack/plugins/security_solution/public/detections/components/alerts_kpis/severity_level_panel/helpers.tsx +++ b/x-pack/plugins/security_solution/public/detections/components/alerts_kpis/severity_level_panel/helpers.tsx @@ -6,17 +6,19 @@ */ import type { Severity } from '@kbn/securitysolution-io-ts-alerting-types'; import { has } from 'lodash'; +import type { EuiThemeComputed } from '@elastic/eui'; import type { AlertsBySeverityAgg } from './types'; import type { AlertSearchResponse } from '../../../containers/detection_engine/alerts/types'; import type { SeverityBuckets as SeverityData } from '../../../../overview/components/detection_response/alerts_by_status/types'; import type { SummaryChartsData, SummaryChartsAgg } from '../alerts_summary_charts_panel/types'; import { severityLabels } from '../../../../overview/components/detection_response/alerts_by_status/use_alerts_by_status'; import { emptyDonutColor } from '../../../../common/components/charts/donutchart_empty'; -import { SEVERITY_COLOR } from '../../../../overview/components/detection_response/utils'; +import { getSeverityColor as getAlertsSeverityColor } from '../../../../overview/components/detection_response/utils'; import * as i18n from './translations'; -export const getSeverityColor = (severity: string) => { - return SEVERITY_COLOR[severity.toLocaleLowerCase() as Severity] ?? emptyDonutColor; +export const getSeverityColor = (severity: string, euiTheme: EuiThemeComputed) => { + const severityColor = getAlertsSeverityColor(euiTheme); + return severityColor[severity.toLocaleLowerCase() as Severity] ?? emptyDonutColor; }; export const parseSeverityData = ( diff --git a/x-pack/plugins/security_solution/public/detections/components/alerts_kpis/severity_level_panel/severity_level_chart.tsx b/x-pack/plugins/security_solution/public/detections/components/alerts_kpis/severity_level_panel/severity_level_chart.tsx index bad0b55c0cebb..99d409c63c441 100644 --- a/x-pack/plugins/security_solution/public/detections/components/alerts_kpis/severity_level_panel/severity_level_chart.tsx +++ b/x-pack/plugins/security_solution/public/detections/components/alerts_kpis/severity_level_panel/severity_level_chart.tsx @@ -7,13 +7,19 @@ import React, { useCallback, useMemo } from 'react'; import { ALERT_SEVERITY } from '@kbn/rule-data-utils'; import styled from 'styled-components'; -import { EuiFlexGroup, EuiFlexItem, EuiInMemoryTable, EuiLoadingSpinner } from '@elastic/eui'; +import { + EuiFlexGroup, + EuiFlexItem, + EuiInMemoryTable, + EuiLoadingSpinner, + useEuiTheme, +} from '@elastic/eui'; import type { SortOrder } from '@elastic/elasticsearch/lib/api/typesWithBodyKey'; import type { SeverityBuckets as SeverityData } from '../../../../overview/components/detection_response/alerts_by_status/types'; import type { FillColor } from '../../../../common/components/charts/donutchart'; import { DonutChart } from '../../../../common/components/charts/donutchart'; import { ChartLabel } from '../../../../overview/components/detection_response/alerts_by_status/chart_label'; -import { getSeverityTableColumns } from './columns'; +import { useGetSeverityTableColumns } from './columns'; import { getSeverityColor } from './helpers'; import { TOTAL_COUNT_OF_ALERTS } from '../../alerts_table/translations'; @@ -33,7 +39,8 @@ export const SeverityLevelChart: React.FC = ({ isLoading, addFilter, }) => { - const columns = useMemo(() => getSeverityTableColumns(), []); + const { euiTheme } = useEuiTheme(); + const columns = useGetSeverityTableColumns(); const count = useMemo(() => { return data @@ -43,9 +50,12 @@ export const SeverityLevelChart: React.FC = ({ : 0; }, [data]); - const fillColor: FillColor = useCallback((dataName: string) => { - return getSeverityColor(dataName); - }, []); + const fillColor: FillColor = useCallback( + (dataName: string) => { + return getSeverityColor(dataName, euiTheme); + }, + [euiTheme] + ); const sorting: { sort: { field: keyof SeverityData; direction: SortOrder } } = { sort: { diff --git a/x-pack/plugins/security_solution/public/explore/components/stat_items/metric_embeddable.tsx b/x-pack/plugins/security_solution/public/explore/components/stat_items/metric_embeddable.tsx index c6e44b4dda306..fa64ac3d75244 100644 --- a/x-pack/plugins/security_solution/public/explore/components/stat_items/metric_embeddable.tsx +++ b/x-pack/plugins/security_solution/public/explore/components/stat_items/metric_embeddable.tsx @@ -9,12 +9,14 @@ import React from 'react'; import { FlexItem, MetricItem, StatValue } from './utils'; import { VisualizationEmbeddable } from '../../../common/components/visualization_actions/visualization_embeddable'; import type { FieldConfigs } from './types'; +import type { ColorSchemas } from '../../../common/components/visualization_actions/types'; export interface MetricEmbeddableProps { fields: FieldConfigs[]; id: string; inspectTitle?: string; timerange: { from: string; to: string }; + colorSchemas: ColorSchemas; } const CHART_HEIGHT = 36; @@ -24,6 +26,7 @@ const MetricEmbeddableComponent = ({ id, inspectTitle, timerange, + colorSchemas, }: MetricEmbeddableProps) => { return ( @@ -34,7 +37,7 @@ const MetricEmbeddableComponent = ({ diff --git a/x-pack/plugins/security_solution/public/explore/components/stat_items/stat_items.tsx b/x-pack/plugins/security_solution/public/explore/components/stat_items/stat_items.tsx index 570ffadca64e7..422afb9f7688a 100644 --- a/x-pack/plugins/security_solution/public/explore/components/stat_items/stat_items.tsx +++ b/x-pack/plugins/security_solution/public/explore/components/stat_items/stat_items.tsx @@ -29,10 +29,17 @@ export const StatItemsComponent = React.memo(({ statItems, from, enableAreaChart, enableBarChart, fields, - barChartLensAttributes, - areaChartLensAttributes, + getBarChartLensAttributes, + getAreaChartLensAttributes, } = statItems; + const colorSchemas = fields.reduce>((acc, { sourceField, color }) => { + if (color && sourceField) { + acc[sourceField] = color; + } + return acc; + }, {}); + const { isToggleExpanded, onToggle } = useToggleStatus({ id }); return ( @@ -51,6 +58,7 @@ export const StatItemsComponent = React.memo(({ statItems, from, id={id} timerange={timerange} inspectTitle={description} + colorSchemas={colorSchemas} /> {(enableAreaChart || enableBarChart) && } @@ -59,11 +67,12 @@ export const StatItemsComponent = React.memo(({ statItems, from, )} @@ -73,11 +82,12 @@ export const StatItemsComponent = React.memo(({ statItems, from, diff --git a/x-pack/plugins/security_solution/public/explore/components/stat_items/types.ts b/x-pack/plugins/security_solution/public/explore/components/stat_items/types.ts index bece997a63aad..b237024d5e47a 100644 --- a/x-pack/plugins/security_solution/public/explore/components/stat_items/types.ts +++ b/x-pack/plugins/security_solution/public/explore/components/stat_items/types.ts @@ -6,7 +6,10 @@ */ import type { IconType } from '@elastic/eui'; -import type { LensAttributes } from '../../../common/components/visualization_actions/types'; +import type { + GetLensAttributes, + LensAttributes, +} from '../../../common/components/visualization_actions/types'; export interface FieldConfigs { color?: string; @@ -15,6 +18,7 @@ export interface FieldConfigs { key: string; lensAttributes?: LensAttributes; name?: string; + sourceField?: string; } export interface StatItems { @@ -23,8 +27,8 @@ export interface StatItems { enableBarChart?: boolean; fields: FieldConfigs[]; key: string; - barChartLensAttributes?: LensAttributes; - areaChartLensAttributes?: LensAttributes; + getBarChartLensAttributes?: GetLensAttributes; + getAreaChartLensAttributes?: GetLensAttributes; } export interface StatItemsProps { diff --git a/x-pack/plugins/security_solution/public/explore/hosts/components/kpi_hosts/hosts/index.tsx b/x-pack/plugins/security_solution/public/explore/hosts/components/kpi_hosts/hosts/index.tsx index 04ceab7438059..e4bce2ed4e871 100644 --- a/x-pack/plugins/security_solution/public/explore/hosts/components/kpi_hosts/hosts/index.tsx +++ b/x-pack/plugins/security_solution/public/explore/hosts/components/kpi_hosts/hosts/index.tsx @@ -5,36 +5,44 @@ * 2.0. */ -import React from 'react'; +import React, { useMemo } from 'react'; +import { useEuiTheme } from '@elastic/eui'; import type { StatItems } from '../../../../components/stat_items'; -import { kpiHostAreaLensAttributes } from '../../../../../common/components/visualization_actions/lens_attributes/hosts/kpi_host_area'; +import { getKpiHostAreaLensAttributes } from '../../../../../common/components/visualization_actions/lens_attributes/hosts/kpi_host_area'; import { kpiHostMetricLensAttributes } from '../../../../../common/components/visualization_actions/lens_attributes/hosts/kpi_host_metric'; import { KpiBaseComponent } from '../../../../components/kpi'; import type { HostsKpiProps } from '../types'; -import { HostsKpiChartColors } from '../types'; import * as i18n from './translations'; export const ID = 'hostsKpiHostsQuery'; -export const hostsStatItems: Readonly = [ - { - key: 'hosts', - fields: [ +export const useGetHostsStatItems: () => Readonly = () => { + const { euiTheme } = useEuiTheme(); + return useMemo( + () => [ { key: 'hosts', - color: HostsKpiChartColors.hosts, - icon: 'storage', - lensAttributes: kpiHostMetricLensAttributes, + fields: [ + { + key: 'hosts', + color: euiTheme.colors.vis.euiColorVis1, + icon: 'storage', + lensAttributes: kpiHostMetricLensAttributes, + sourceField: 'host.name', + }, + ], + enableAreaChart: true, + description: i18n.HOSTS, + getAreaChartLensAttributes: getKpiHostAreaLensAttributes, }, ], - enableAreaChart: true, - description: i18n.HOSTS, - areaChartLensAttributes: kpiHostAreaLensAttributes, - }, -]; + [euiTheme.colors.vis.euiColorVis1] + ); +}; const HostsKpiHostsComponent: React.FC = ({ from, to }) => { + const hostsStatItems = useGetHostsStatItems(); return ; }; diff --git a/x-pack/plugins/security_solution/public/explore/hosts/components/kpi_hosts/types.ts b/x-pack/plugins/security_solution/public/explore/hosts/components/kpi_hosts/types.ts index b58367832f850..1bd94d21c4607 100644 --- a/x-pack/plugins/security_solution/public/explore/hosts/components/kpi_hosts/types.ts +++ b/x-pack/plugins/security_solution/public/explore/hosts/components/kpi_hosts/types.ts @@ -9,9 +9,3 @@ export interface HostsKpiProps { from: string; to: string; } - -export enum HostsKpiChartColors { - uniqueSourceIps = '#D36086', - uniqueDestinationIps = '#9170B8', - hosts = '#6092C0', -} diff --git a/x-pack/plugins/security_solution/public/explore/hosts/components/kpi_hosts/unique_ips/index.tsx b/x-pack/plugins/security_solution/public/explore/hosts/components/kpi_hosts/unique_ips/index.tsx index 41e7cb5c12413..eb300f74a581b 100644 --- a/x-pack/plugins/security_solution/public/explore/hosts/components/kpi_hosts/unique_ips/index.tsx +++ b/x-pack/plugins/security_solution/public/explore/hosts/components/kpi_hosts/unique_ips/index.tsx @@ -5,50 +5,59 @@ * 2.0. */ -import React from 'react'; +import React, { useMemo } from 'react'; +import { useEuiTheme } from '@elastic/eui'; import type { StatItems } from '../../../../components/stat_items'; -import { kpiUniqueIpsAreaLensAttributes } from '../../../../../common/components/visualization_actions/lens_attributes/hosts/kpi_unique_ips_area'; -import { kpiUniqueIpsBarLensAttributes } from '../../../../../common/components/visualization_actions/lens_attributes/hosts/kpi_unique_ips_bar'; +import { getKpiUniqueIpsAreaLensAttributes } from '../../../../../common/components/visualization_actions/lens_attributes/hosts/kpi_unique_ips_area'; +import { getKpiUniqueIpsBarLensAttributes } from '../../../../../common/components/visualization_actions/lens_attributes/hosts/kpi_unique_ips_bar'; import { kpiUniqueIpsDestinationMetricLensAttributes } from '../../../../../common/components/visualization_actions/lens_attributes/hosts/kpi_unique_ips_destination_metric'; import { kpiUniqueIpsSourceMetricLensAttributes } from '../../../../../common/components/visualization_actions/lens_attributes/hosts/kpi_unique_ips_source_metric'; import { KpiBaseComponent } from '../../../../components/kpi'; import type { HostsKpiProps } from '../types'; -import { HostsKpiChartColors } from '../types'; import * as i18n from './translations'; export const ID = 'hostsKpiUniqueIpsQuery'; -export const uniqueIpsStatItems: Readonly = [ - { - key: 'uniqueIps', - fields: [ +export const useGetUniqueIpsStatItems: () => Readonly = () => { + const { euiTheme } = useEuiTheme(); + return useMemo( + () => [ { - key: 'uniqueSourceIps', - name: i18n.SOURCE_CHART_LABEL, - description: i18n.SOURCE_UNIT_LABEL, - color: HostsKpiChartColors.uniqueSourceIps, - icon: 'visMapCoordinate', - lensAttributes: kpiUniqueIpsSourceMetricLensAttributes, - }, - { - key: 'uniqueDestinationIps', - name: i18n.DESTINATION_CHART_LABEL, - description: i18n.DESTINATION_UNIT_LABEL, - color: HostsKpiChartColors.uniqueDestinationIps, - icon: 'visMapCoordinate', - lensAttributes: kpiUniqueIpsDestinationMetricLensAttributes, + key: 'uniqueIps', + fields: [ + { + key: 'uniqueSourceIps', + name: i18n.SOURCE_CHART_LABEL, + description: i18n.SOURCE_UNIT_LABEL, + color: euiTheme.colors.vis.euiColorVis2, + icon: 'visMapCoordinate', + lensAttributes: kpiUniqueIpsSourceMetricLensAttributes, + sourceField: 'source.ip', + }, + { + key: 'uniqueDestinationIps', + name: i18n.DESTINATION_CHART_LABEL, + description: i18n.DESTINATION_UNIT_LABEL, + color: euiTheme.colors.vis.euiColorVis3, + icon: 'visMapCoordinate', + lensAttributes: kpiUniqueIpsDestinationMetricLensAttributes, + sourceField: 'destination.ip', + }, + ], + enableAreaChart: true, + enableBarChart: true, + description: i18n.UNIQUE_IPS, + getAreaChartLensAttributes: getKpiUniqueIpsAreaLensAttributes, + getBarChartLensAttributes: getKpiUniqueIpsBarLensAttributes, }, ], - enableAreaChart: true, - enableBarChart: true, - description: i18n.UNIQUE_IPS, - areaChartLensAttributes: kpiUniqueIpsAreaLensAttributes, - barChartLensAttributes: kpiUniqueIpsBarLensAttributes, - }, -]; + [euiTheme.colors.vis.euiColorVis2, euiTheme.colors.vis.euiColorVis3] + ); +}; const HostsKpiUniqueIpsComponent: React.FC = ({ from, to }) => { + const uniqueIpsStatItems = useGetUniqueIpsStatItems(); return ; }; diff --git a/x-pack/plugins/security_solution/public/explore/network/components/kpi_network/network_events/index.tsx b/x-pack/plugins/security_solution/public/explore/network/components/kpi_network/network_events/index.tsx index 31b3396a567d3..2b91b13ad6bc9 100644 --- a/x-pack/plugins/security_solution/public/explore/network/components/kpi_network/network_events/index.tsx +++ b/x-pack/plugins/security_solution/public/explore/network/components/kpi_network/network_events/index.tsx @@ -6,7 +6,6 @@ */ import React from 'react'; -import { euiPaletteColorBlind } from '@elastic/eui'; import type { StatItems } from '../../../../components/stat_items'; import type { NetworkKpiProps } from '../types'; @@ -16,16 +15,13 @@ import { KpiBaseComponent } from '../../../../components/kpi'; export const ID = 'networkKpiNetworkEventsQuery'; -const euiVisColorPalette = euiPaletteColorBlind(); -const euiColorVis1 = euiVisColorPalette[1]; - export const networkEventsStatsItems: Readonly = [ { key: 'networkEvents', fields: [ { key: 'networkEvents', - color: euiColorVis1, + color: 'euiColorVis1', lensAttributes: kpiNetworkEventsLensAttributes, }, ], @@ -33,8 +29,8 @@ export const networkEventsStatsItems: Readonly = [ }, ]; -const NetworkKpiNetworkEventsComponent: React.FC = ({ from, to }) => { - return ; -}; +const NetworkKpiNetworkEventsComponent: React.FC = ({ from, to }) => ( + +); export const NetworkKpiNetworkEvents = React.memo(NetworkKpiNetworkEventsComponent); diff --git a/x-pack/plugins/security_solution/public/explore/network/components/kpi_network/unique_private_ips/index.tsx b/x-pack/plugins/security_solution/public/explore/network/components/kpi_network/unique_private_ips/index.tsx index 2c84c27899084..b70c3ea6845c1 100644 --- a/x-pack/plugins/security_solution/public/explore/network/components/kpi_network/unique_private_ips/index.tsx +++ b/x-pack/plugins/security_solution/public/explore/network/components/kpi_network/unique_private_ips/index.tsx @@ -6,52 +6,55 @@ */ import React from 'react'; -import { euiPaletteColorBlind } from '@elastic/eui'; +import { useEuiTheme } from '@elastic/eui'; import type { StatItems } from '../../../../components/stat_items'; import type { NetworkKpiProps } from '../types'; import * as i18n from './translations'; import { kpiUniquePrivateIpsSourceMetricLensAttributes } from '../../../../../common/components/visualization_actions/lens_attributes/network/kpi_unique_private_ips_source_metric'; import { kpiUniquePrivateIpsDestinationMetricLensAttributes } from '../../../../../common/components/visualization_actions/lens_attributes/network/kpi_unique_private_ips_destination_metric'; -import { kpiUniquePrivateIpsAreaLensAttributes } from '../../../../../common/components/visualization_actions/lens_attributes/network/kpi_unique_private_ips_area'; -import { kpiUniquePrivateIpsBarLensAttributes } from '../../../../../common/components/visualization_actions/lens_attributes/network/kpi_unique_private_ips_bar'; +import { getKpiUniquePrivateIpsAreaLensAttributes } from '../../../../../common/components/visualization_actions/lens_attributes/network/kpi_unique_private_ips_area'; +import { getKpiUniquePrivateIpsBarLensAttributes } from '../../../../../common/components/visualization_actions/lens_attributes/network/kpi_unique_private_ips_bar'; import { KpiBaseComponent } from '../../../../components/kpi'; -const euiVisColorPalette = euiPaletteColorBlind(); -const euiColorVis2 = euiVisColorPalette[2]; -const euiColorVis3 = euiVisColorPalette[3]; export const ID = 'networkKpiUniquePrivateIpsQuery'; -export const uniquePrivateIpsStatItems: Readonly = [ - { - key: 'uniqueIps', - fields: [ - { - key: 'uniqueSourcePrivateIps', - name: i18n.SOURCE_CHART_LABEL, - description: i18n.SOURCE_UNIT_LABEL, - color: euiColorVis2, - icon: 'visMapCoordinate', - lensAttributes: kpiUniquePrivateIpsSourceMetricLensAttributes, - }, - { - key: 'uniqueDestinationPrivateIps', - name: i18n.DESTINATION_CHART_LABEL, - description: i18n.DESTINATION_UNIT_LABEL, - color: euiColorVis3, - icon: 'visMapCoordinate', - lensAttributes: kpiUniquePrivateIpsDestinationMetricLensAttributes, - }, - ], - description: i18n.UNIQUE_PRIVATE_IPS, - enableAreaChart: true, - enableBarChart: true, - areaChartLensAttributes: kpiUniquePrivateIpsAreaLensAttributes, - barChartLensAttributes: kpiUniquePrivateIpsBarLensAttributes, - }, -]; +export const useGetUniquePrivateIpsStatItems: () => Readonly = () => { + const { euiTheme } = useEuiTheme(); + return [ + { + key: 'uniqueIps', + fields: [ + { + key: 'uniqueSourcePrivateIps', + name: i18n.SOURCE_CHART_LABEL, + description: i18n.SOURCE_UNIT_LABEL, + color: euiTheme.colors.vis.euiColorVis2, + icon: 'visMapCoordinate', + lensAttributes: kpiUniquePrivateIpsSourceMetricLensAttributes, + sourceField: 'source.ip', + }, + { + key: 'uniqueDestinationPrivateIps', + name: i18n.DESTINATION_CHART_LABEL, + description: i18n.DESTINATION_UNIT_LABEL, + color: euiTheme.colors.vis.euiColorVis3, + icon: 'visMapCoordinate', + lensAttributes: kpiUniquePrivateIpsDestinationMetricLensAttributes, + sourceField: 'destination.ip', + }, + ], + description: i18n.UNIQUE_PRIVATE_IPS, + enableAreaChart: true, + enableBarChart: true, + getAreaChartLensAttributes: getKpiUniquePrivateIpsAreaLensAttributes, + getBarChartLensAttributes: getKpiUniquePrivateIpsBarLensAttributes, + }, + ]; +}; const NetworkKpiUniquePrivateIpsComponent: React.FC = ({ from, to }) => { + const uniquePrivateIpsStatItems = useGetUniquePrivateIpsStatItems(); return ; }; diff --git a/x-pack/plugins/security_solution/public/explore/users/components/kpi_users/authentications/index.tsx b/x-pack/plugins/security_solution/public/explore/users/components/kpi_users/authentications/index.tsx index a1b9066a721ac..7a425e1a5ea41 100644 --- a/x-pack/plugins/security_solution/public/explore/users/components/kpi_users/authentications/index.tsx +++ b/x-pack/plugins/security_solution/public/explore/users/components/kpi_users/authentications/index.tsx @@ -5,11 +5,12 @@ * 2.0. */ -import React from 'react'; +import React, { useMemo } from 'react'; +import { useEuiTheme } from '@elastic/eui'; import type { StatItems } from '../../../../components/stat_items'; -import { kpiUserAuthenticationsAreaLensAttributes } from '../../../../../common/components/visualization_actions/lens_attributes/users/kpi_user_authentications_area'; -import { kpiUserAuthenticationsBarLensAttributes } from '../../../../../common/components/visualization_actions/lens_attributes/users/kpi_user_authentications_bar'; +import { getKpiUserAuthenticationsAreaLensAttributes } from '../../../../../common/components/visualization_actions/lens_attributes/users/kpi_user_authentications_area'; +import { getKpiUserAuthenticationsBarLensAttributes } from '../../../../../common/components/visualization_actions/lens_attributes/users/kpi_user_authentications_bar'; import { kpiUserAuthenticationsMetricSuccessLensAttributes } from '../../../../../common/components/visualization_actions/lens_attributes/users/kpi_user_authentications_metric_success'; import { kpiUserAuthenticationsMetricFailureLensAttributes } from '../../../../../common/components/visualization_actions/lens_attributes/users/kpi_user_authentication_metric_failure'; import { KpiBaseComponent } from '../../../../components/kpi'; @@ -18,41 +19,45 @@ import type { UsersKpiProps } from '../types'; const ID = 'usersKpiAuthentications'; -enum ChartColors { - authenticationsSuccess = '#54B399', - authenticationsFailure = '#E7664C', -} - -export const authenticationsStatItems: Readonly = [ - { - key: 'authentication', - fields: [ - { - key: 'authenticationsSuccess', - name: i18n.SUCCESS_CHART_LABEL, - description: i18n.SUCCESS_UNIT_LABEL, - color: ChartColors.authenticationsSuccess, - icon: 'check', - lensAttributes: kpiUserAuthenticationsMetricSuccessLensAttributes, - }, +export const useGetAuthenticationsStatItems: () => Readonly = () => { + const { euiTheme } = useEuiTheme(); + return useMemo( + () => [ { - key: 'authenticationsFailure', - name: i18n.FAIL_CHART_LABEL, - description: i18n.FAIL_UNIT_LABEL, - color: ChartColors.authenticationsFailure, - icon: 'cross', - lensAttributes: kpiUserAuthenticationsMetricFailureLensAttributes, + key: 'authentication', + fields: [ + { + key: 'authenticationsSuccess', + name: i18n.SUCCESS_CHART_LABEL, + description: i18n.SUCCESS_UNIT_LABEL, + color: euiTheme.colors.vis.euiColorVis0, + icon: 'check', + lensAttributes: kpiUserAuthenticationsMetricSuccessLensAttributes, + sourceField: 'event.outcome.success', + }, + { + key: 'authenticationsFailure', + name: i18n.FAIL_CHART_LABEL, + description: i18n.FAIL_UNIT_LABEL, + color: euiTheme.colors.vis.euiColorVis9, + icon: 'cross', + lensAttributes: kpiUserAuthenticationsMetricFailureLensAttributes, + sourceField: 'event.outcome.failure', + }, + ], + enableAreaChart: true, + enableBarChart: true, + description: i18n.USER_AUTHENTICATIONS, + getAreaChartLensAttributes: getKpiUserAuthenticationsAreaLensAttributes, + getBarChartLensAttributes: getKpiUserAuthenticationsBarLensAttributes, }, ], - enableAreaChart: true, - enableBarChart: true, - description: i18n.USER_AUTHENTICATIONS, - areaChartLensAttributes: kpiUserAuthenticationsAreaLensAttributes, - barChartLensAttributes: kpiUserAuthenticationsBarLensAttributes, - }, -]; + [euiTheme.colors.vis.euiColorVis0, euiTheme.colors.vis.euiColorVis9] + ); +}; const UsersKpiAuthenticationsComponent: React.FC = ({ from, to }) => { + const authenticationsStatItems = useGetAuthenticationsStatItems(); return ; }; diff --git a/x-pack/plugins/security_solution/public/explore/users/components/kpi_users/total_users/index.tsx b/x-pack/plugins/security_solution/public/explore/users/components/kpi_users/total_users/index.tsx index 195bc43337f9d..d76a62f79dfd2 100644 --- a/x-pack/plugins/security_solution/public/explore/users/components/kpi_users/total_users/index.tsx +++ b/x-pack/plugins/security_solution/public/explore/users/components/kpi_users/total_users/index.tsx @@ -5,38 +5,42 @@ * 2.0. */ -import { euiPaletteColorBlind } from '@elastic/eui'; -import React from 'react'; +import React, { useMemo } from 'react'; +import { useEuiTheme } from '@elastic/eui'; import type { StatItems } from '../../../../components/stat_items'; import { KpiBaseComponent } from '../../../../components/kpi'; import { kpiTotalUsersMetricLensAttributes } from '../../../../../common/components/visualization_actions/lens_attributes/users/kpi_total_users_metric'; -import { kpiTotalUsersAreaLensAttributes } from '../../../../../common/components/visualization_actions/lens_attributes/users/kpi_total_users_area'; +import { getKpiTotalUsersAreaLensAttributes } from '../../../../../common/components/visualization_actions/lens_attributes/users/kpi_total_users_area'; import * as i18n from './translations'; import type { UsersKpiProps } from '../types'; -const euiVisColorPalette = euiPaletteColorBlind(); -const euiColorVis1 = euiVisColorPalette[1]; - -export const usersStatItems: Readonly = [ - { - key: 'users', - fields: [ +export const useGetUsersStatItems: () => Readonly = () => { + const { euiTheme } = useEuiTheme(); + return useMemo( + () => [ { key: 'users', - color: euiColorVis1, - icon: 'storage', - lensAttributes: kpiTotalUsersMetricLensAttributes, + fields: [ + { + key: 'users', + color: euiTheme.colors.vis.euiColorVis1, + icon: 'storage', + lensAttributes: kpiTotalUsersMetricLensAttributes, + }, + ], + enableAreaChart: true, + description: i18n.USERS, + getAreaChartLensAttributes: getKpiTotalUsersAreaLensAttributes, }, ], - enableAreaChart: true, - description: i18n.USERS, - areaChartLensAttributes: kpiTotalUsersAreaLensAttributes, - }, -]; + [euiTheme.colors.vis.euiColorVis1] + ); +}; const ID = 'TotalUsersKpiQuery'; const TotalUsersKpiComponent: React.FC = ({ from, to }) => { + const usersStatItems = useGetUsersStatItems(); return ; }; diff --git a/x-pack/plugins/security_solution/public/overview/components/detection_response/alerts_by_status/alerts_by_status.tsx b/x-pack/plugins/security_solution/public/overview/components/detection_response/alerts_by_status/alerts_by_status.tsx index 60dcceb894119..7454d9448d56f 100644 --- a/x-pack/plugins/security_solution/public/overview/components/detection_response/alerts_by_status/alerts_by_status.tsx +++ b/x-pack/plugins/security_solution/public/overview/components/detection_response/alerts_by_status/alerts_by_status.tsx @@ -12,6 +12,7 @@ import { EuiProgress, EuiSpacer, EuiText, + useEuiTheme, useIsWithinMaxBreakpoint, useIsWithinMinBreakpoint, } from '@elastic/eui'; @@ -49,7 +50,7 @@ import { } from '../translations'; import { useQueryToggle } from '../../../../common/containers/query_toggle'; import { VIEW_ALERTS } from '../../../pages/translations'; -import { SEVERITY_COLOR } from '../utils'; +import { getSeverityColor } from '../utils'; import { FormattedCount } from '../../../../common/components/formatted_number'; import { ChartLabel } from './chart_label'; import { Legend } from '../../../../common/components/charts/legend'; @@ -84,12 +85,20 @@ interface AlertsByStatusProps { signalIndexName: string | null; } -const chartConfigs: Array<{ key: Severity; label: string; color: string }> = [ - { key: 'critical', label: STATUS_CRITICAL_LABEL, color: SEVERITY_COLOR.critical }, - { key: 'high', label: STATUS_HIGH_LABEL, color: SEVERITY_COLOR.high }, - { key: 'medium', label: STATUS_MEDIUM_LABEL, color: SEVERITY_COLOR.medium }, - { key: 'low', label: STATUS_LOW_LABEL, color: SEVERITY_COLOR.low }, -]; +const useGetChartConfigs: () => Array<{ key: Severity; label: string; color: string }> = () => { + const { euiTheme } = useEuiTheme(); + const severityColor = useMemo(() => getSeverityColor(euiTheme), [euiTheme]); + const configs = useMemo( + () => [ + { key: 'critical' as Severity, label: STATUS_CRITICAL_LABEL, color: severityColor.critical }, + { key: 'high' as Severity, label: STATUS_HIGH_LABEL, color: severityColor.high }, + { key: 'medium' as Severity, label: STATUS_MEDIUM_LABEL, color: severityColor.medium }, + { key: 'low' as Severity, label: STATUS_LOW_LABEL, color: severityColor.low }, + ], + [severityColor] + ); + return configs; +}; const eventKindSignalFilter: EntityFilter = { field: 'event.kind', @@ -149,6 +158,7 @@ export const AlertsByStatus = ({ to, from, }); + const chartConfigs = useGetChartConfigs(); const legendItems: LegendItem[] = useMemo( () => chartConfigs.map((d) => ({ @@ -156,7 +166,7 @@ export const AlertsByStatus = ({ field: ALERT_SEVERITY, value: d.label, })), - [] + [chartConfigs] ); const navigateToAlertsWithStatus = useCallback( @@ -214,9 +224,12 @@ export const AlertsByStatus = ({ const totalAlertsCount = isDonutChartEmbeddablesEnabled ? visualizationTotalAlerts : totalAlerts; - const fillColor: FillColor = useCallback((dataName: string) => { - return chartConfigs.find((cfg) => cfg.label === dataName)?.color ?? emptyDonutColor; - }, []); + const fillColor: FillColor = useCallback( + (dataName: string) => { + return chartConfigs.find((cfg) => cfg.label === dataName)?.color ?? emptyDonutColor; + }, + [chartConfigs] + ); return ( <> diff --git a/x-pack/plugins/security_solution/public/overview/components/detection_response/cases_by_status/cases_by_status.tsx b/x-pack/plugins/security_solution/public/overview/components/detection_response/cases_by_status/cases_by_status.tsx index e702454d45ec5..a7fdca017b55d 100644 --- a/x-pack/plugins/security_solution/public/overview/components/detection_response/cases_by_status/cases_by_status.tsx +++ b/x-pack/plugins/security_solution/public/overview/components/detection_response/cases_by_status/cases_by_status.tsx @@ -6,7 +6,7 @@ */ import React, { useCallback, useMemo } from 'react'; -import { EuiFlexGroup, EuiFlexItem, EuiPanel, EuiText } from '@elastic/eui'; +import { EuiFlexGroup, EuiFlexItem, EuiPanel, EuiText, useEuiTheme } from '@elastic/eui'; import type { AxisStyle, Rotation } from '@elastic/charts'; import { ScaleType } from '@elastic/charts'; import styled from 'styled-components'; @@ -80,13 +80,6 @@ export const barchartConfigs = { customHeight: 146, }; -const barColors = { - empty: 'rgba(105, 112, 125, 0.1)', - open: '#79aad9', - 'in-progress': '#f1d86f', - closed: '#d3dae6', -}; - const StyledEuiFlexItem = styled(EuiFlexItem)` align-items: center; width: 70%; @@ -97,6 +90,7 @@ const Wrapper = styled.div` `; const CasesByStatusComponent: React.FC = () => { + const { euiTheme } = useEuiTheme(); const { toggleStatus, setToggleStatus } = useQueryToggle(CASES_BY_STATUS_ID); const { getAppUrl, navigateTo } = useNavigation(); const { search } = useFormatUrl(SecurityPageName.case); @@ -113,6 +107,21 @@ const CasesByStatusComponent: React.FC = () => { skip: !toggleStatus, }); + const barColors = useMemo( + () => ({ + empty: euiTheme.colors.vis.euiColorVis8, + open: euiTheme.colors.primary, + 'in-progress': euiTheme.colors.warning, + closed: euiTheme.colors.borderBaseSubdued, + }), + [ + euiTheme.colors.vis.euiColorVis8, + euiTheme.colors.primary, + euiTheme.colors.warning, + euiTheme.colors.borderBaseSubdued, + ] + ); + const chartData = useMemo( () => [ { @@ -131,7 +140,7 @@ const CasesByStatusComponent: React.FC = () => { color: barColors.closed, }, ], - [closed, inProgress, open] + [barColors, closed, inProgress, open] ); return ( diff --git a/x-pack/plugins/security_solution/public/overview/components/detection_response/host_alerts_table/host_alerts_table.tsx b/x-pack/plugins/security_solution/public/overview/components/detection_response/host_alerts_table/host_alerts_table.tsx index 3d4070d4cd8e3..462a04f7211b5 100644 --- a/x-pack/plugins/security_solution/public/overview/components/detection_response/host_alerts_table/host_alerts_table.tsx +++ b/x-pack/plugins/security_solution/public/overview/components/detection_response/host_alerts_table/host_alerts_table.tsx @@ -17,9 +17,11 @@ import { EuiSpacer, EuiTablePagination, EuiToolTip, + useEuiTheme, } from '@elastic/eui'; import { ALERT_SEVERITY } from '@kbn/rule-data-utils'; +import _ from 'lodash'; import { useNavigateToAlertsPageWithFilters } from '../../../../common/hooks/use_navigate_to_alerts_page_with_filters'; import { FormattedCount } from '../../../../common/components/formatted_number'; import { HeaderSection } from '../../../../common/components/header_section'; @@ -30,7 +32,7 @@ import { HostDetailsLink } from '../../../../common/components/links'; import { useQueryToggle } from '../../../../common/containers/query_toggle'; import * as i18n from '../translations'; -import { ITEMS_PER_PAGE, SEVERITY_COLOR } from '../utils'; +import { ITEMS_PER_PAGE, SEVERITY_COLOR, getSeverityColor } from '../utils'; import type { HostAlertsItem } from './use_host_alerts_items'; import { useHostAlertsItems } from './use_host_alerts_items'; import { @@ -87,7 +89,7 @@ export const HostAlertsTable = React.memo(({ signalIndexName }: HostAlertsTableP filterQuery, }); - const columns = useMemo(() => getTableColumns(openHostInAlerts), [openHostInAlerts]); + const columns = useGetTableColumns(openHostInAlerts); return ( @@ -132,54 +134,30 @@ export const HostAlertsTable = React.memo(({ signalIndexName }: HostAlertsTableP HostAlertsTable.displayName = 'HostAlertsTable'; -const getTableColumns: GetTableColumns = (handleClick) => [ - { - field: 'hostName', - name: i18n.HOST_ALERTS_HOSTNAME_COLUMN, - 'data-test-subj': 'hostSeverityAlertsTable-hostName', - render: (hostName: string) => ( - - - - ), - }, - { - field: 'totalAlerts', - name: i18n.ALERTS_TEXT, - 'data-test-subj': 'hostSeverityAlertsTable-totalAlerts', - render: (totalAlerts: number, { hostName }) => ( - - handleClick({ hostName })} - > - - - - ), - }, - { - field: 'critical', - name: i18n.STATUS_CRITICAL_LABEL, - render: (count: number, { hostName }) => ( - - {count > 0 ? ( +const useGetTableColumns: GetTableColumns = (handleClick) => { + const { euiTheme } = useEuiTheme(); + const severityColors = getSeverityColor(euiTheme); + return useMemo( + () => [ + { + field: 'hostName', + name: i18n.HOST_ALERTS_HOSTNAME_COLUMN, + 'data-test-subj': 'hostSeverityAlertsTable-hostName', + render: (hostName: string) => ( + + + + ), + }, + { + field: 'totalAlerts', + name: i18n.ALERTS_TEXT, + 'data-test-subj': 'hostSeverityAlertsTable-totalAlerts', + render: (totalAlerts: number, { hostName }) => ( [ triggerId={SecurityCellActionsTrigger.ALERTS_COUNT} sourcererScopeId={SourcererScopeName.detections} metadata={{ - andFilters: [ - { field: 'kibana.alert.severity', value: 'critical' }, - { field: 'kibana.alert.workflow_status', value: 'open' }, - ], + andFilters: [{ field: 'kibana.alert.workflow_status', value: 'open' }], }} > handleClick({ hostName, severity: 'critical' })} + data-test-subj="hostSeverityAlertsTable-totalAlertsLink" + disabled={totalAlerts === 0} + onClick={() => handleClick({ hostName })} > - + - ) : ( - - )} - - ), - }, - { - field: 'high', - name: i18n.STATUS_HIGH_LABEL, - render: (count: number, { hostName }) => ( - - {count > 0 ? ( - ( + - handleClick({ hostName, severity: 'high' })}> + {count > 0 ? ( + + handleClick({ hostName, severity: 'critical' })} + > + + + + ) : ( - - - ) : ( - - )} - - ), - }, - { - field: 'medium', - name: i18n.STATUS_MEDIUM_LABEL, - render: (count: number, { hostName }) => ( - - {count > 0 ? ( - - handleClick({ hostName, severity: 'medium' })}> + )} + + ), + }, + { + field: 'high', + name: i18n.STATUS_HIGH_LABEL, + render: (count: number, { hostName }) => ( + + {count > 0 ? ( + + handleClick({ hostName, severity: 'high' })}> + + + + ) : ( - - - ) : ( - - )} - - ), - }, - { - field: 'low', - name: i18n.STATUS_LOW_LABEL, - render: (count: number, { hostName }) => ( - - {count > 0 ? ( - - handleClick({ hostName, severity: 'low' })}> + )} + + ), + }, + { + field: 'medium', + name: i18n.STATUS_MEDIUM_LABEL, + render: (count: number, { hostName }) => ( + + {count > 0 ? ( + + handleClick({ hostName, severity: 'medium' })}> + + + + ) : ( - - - ) : ( - - )} - - ), - }, -]; + )} + + ), + }, + { + field: 'low', + name: i18n.STATUS_LOW_LABEL, + render: (count: number, { hostName }) => ( + + {count > 0 ? ( + + handleClick({ hostName, severity: 'low' })}> + + + + ) : ( + + )} + + ), + }, + ], + [severityColors, handleClick] + ); +}; diff --git a/x-pack/plugins/security_solution/public/overview/components/detection_response/rule_alerts_table/rule_alerts_table.tsx b/x-pack/plugins/security_solution/public/overview/components/detection_response/rule_alerts_table/rule_alerts_table.tsx index 6c88a6e903ed7..32edddf5e1a6b 100644 --- a/x-pack/plugins/security_solution/public/overview/components/detection_response/rule_alerts_table/rule_alerts_table.tsx +++ b/x-pack/plugins/security_solution/public/overview/components/detection_response/rule_alerts_table/rule_alerts_table.tsx @@ -17,6 +17,7 @@ import { EuiPanel, EuiSpacer, EuiToolTip, + useEuiTheme, } from '@elastic/eui'; import { FormattedRelative } from '@kbn/i18n-react'; import type { Severity } from '@kbn/securitysolution-io-ts-alerting-types'; @@ -25,7 +26,7 @@ import { SecurityCellActionsTrigger } from '../../../../app/actions/constants'; import { useNavigateToAlertsPageWithFilters } from '../../../../common/hooks/use_navigate_to_alerts_page_with_filters'; import { HeaderSection } from '../../../../common/components/header_section'; -import { SEVERITY_COLOR } from '../utils'; +import { getSeverityColor } from '../utils'; import * as i18n from '../translations'; import type { RuleAlertsItem } from './use_rule_alerts_items'; import { useRuleAlertsItems } from './use_rule_alerts_items'; @@ -54,82 +55,90 @@ export type GetTableColumns = (params: { const DETECTION_RESPONSE_RULE_ALERTS_QUERY_ID = 'detection-response-rule-alerts-severity-table' as const; -export const getTableColumns: GetTableColumns = ({ +export const useGetTableColumns: GetTableColumns = ({ getAppUrl, navigateTo, openRuleInAlertsPage, -}) => [ - { - field: 'name', - name: i18n.RULE_ALERTS_COLUMN_RULE_NAME, - render: (name: string, { id }) => { - const url = getAppUrl({ deepLinkId: SecurityPageName.rules, path: `id/${id}` }); - return ( - - {/* eslint-disable-next-line @elastic/eui/href-or-on-click */} - { - if (ev) { - ev.preventDefault(); - } - navigateTo({ url }); +}) => { + const { euiTheme } = useEuiTheme(); + const severityColor = useMemo(() => getSeverityColor(euiTheme), [euiTheme]); + + return useMemo( + () => [ + { + field: 'name', + name: i18n.RULE_ALERTS_COLUMN_RULE_NAME, + render: (name: string, { id }) => { + const url = getAppUrl({ deepLinkId: SecurityPageName.rules, path: `id/${id}` }); + return ( + + {/* eslint-disable-next-line @elastic/eui/href-or-on-click */} + { + if (ev) { + ev.preventDefault(); + } + navigateTo({ url }); + }} + > + {name} + + + ); + }, + }, + { + field: 'last_alert_at', + name: i18n.RULE_ALERTS_COLUMN_LAST_ALERT, + 'data-test-subj': 'severityRuleAlertsTable-lastAlertAt', + render: (lastAlertAt: string) => , + }, + { + field: 'alert_count', + name: i18n.RULE_ALERTS_COLUMN_ALERT_COUNT, + 'data-test-subj': 'severityRuleAlertsTable-alertCount', + render: (alertCount: number, { name }) => ( + - {name} - - - ); - }, - }, - { - field: 'last_alert_at', - name: i18n.RULE_ALERTS_COLUMN_LAST_ALERT, - 'data-test-subj': 'severityRuleAlertsTable-lastAlertAt', - render: (lastAlertAt: string) => , - }, - { - field: 'alert_count', - name: i18n.RULE_ALERTS_COLUMN_ALERT_COUNT, - 'data-test-subj': 'severityRuleAlertsTable-alertCount', - render: (alertCount: number, { name }) => ( - - openRuleInAlertsPage(name)} - > - - - - ), - }, - { - field: 'severity', - name: i18n.RULE_ALERTS_COLUMN_SEVERITY, - 'data-test-subj': 'severityRuleAlertsTable-severity', - render: (severity: Severity) => ( - {capitalize(severity)} - ), - }, -]; + openRuleInAlertsPage(name)} + > + + + + ), + }, + { + field: 'severity', + name: i18n.RULE_ALERTS_COLUMN_SEVERITY, + 'data-test-subj': 'severityRuleAlertsTable-severity', + render: (severity: Severity) => ( + {capitalize(severity)} + ), + }, + ], + [getAppUrl, navigateTo, openRuleInAlertsPage, severityColor] + ); +}; export const RuleAlertsTable = React.memo(({ signalIndexName }) => { const { getAppUrl, navigateTo } = useNavigation(); @@ -163,10 +172,7 @@ export const RuleAlertsTable = React.memo(({ signalIndexNa }); }, [openAlertsPageWithFilter]); - const columns = useMemo( - () => getTableColumns({ getAppUrl, navigateTo, openRuleInAlertsPage }), - [getAppUrl, navigateTo, openRuleInAlertsPage] - ); + const columns = useGetTableColumns({ getAppUrl, navigateTo, openRuleInAlertsPage }); return ( diff --git a/x-pack/plugins/security_solution/public/overview/components/detection_response/user_alerts_table/user_alerts_table.tsx b/x-pack/plugins/security_solution/public/overview/components/detection_response/user_alerts_table/user_alerts_table.tsx index d2ec3efe63aa5..471ecffac7eca 100644 --- a/x-pack/plugins/security_solution/public/overview/components/detection_response/user_alerts_table/user_alerts_table.tsx +++ b/x-pack/plugins/security_solution/public/overview/components/detection_response/user_alerts_table/user_alerts_table.tsx @@ -17,6 +17,7 @@ import { EuiSpacer, EuiTablePagination, EuiToolTip, + useEuiTheme, } from '@elastic/eui'; import { ALERT_SEVERITY } from '@kbn/rule-data-utils'; @@ -30,7 +31,7 @@ import { LastUpdatedAt } from '../../../../common/components/last_updated_at'; import { UserDetailsLink } from '../../../../common/components/links'; import { useQueryToggle } from '../../../../common/containers/query_toggle'; import * as i18n from '../translations'; -import { ITEMS_PER_PAGE, SEVERITY_COLOR } from '../utils'; +import { ITEMS_PER_PAGE, getSeverityColor } from '../utils'; import type { UserAlertsItem } from './use_user_alerts_items'; import { useUserAlertsItems } from './use_user_alerts_items'; import { SecurityCellActions, CellActionsMode } from '../../../../common/components/cell_actions'; @@ -83,7 +84,7 @@ export const UserAlertsTable = React.memo(({ signalIndexName }: UserAlertsTableP filterQuery, }); - const columns = useMemo(() => getTableColumns(openUserInAlerts), [openUserInAlerts]); + const columns = useGetTableColumns(openUserInAlerts); return ( @@ -128,54 +129,30 @@ export const UserAlertsTable = React.memo(({ signalIndexName }: UserAlertsTableP UserAlertsTable.displayName = 'UserAlertsTable'; -const getTableColumns: GetTableColumns = (handleClick) => [ - { - field: 'userName', - name: i18n.USER_ALERTS_USERNAME_COLUMN, - 'data-test-subj': 'userSeverityAlertsTable-userName', - render: (userName: string) => ( - - - - ), - }, - { - field: 'totalAlerts', - name: i18n.ALERTS_TEXT, - 'data-test-subj': 'userSeverityAlertsTable-totalAlerts', - render: (totalAlerts: number, { userName }) => ( - - handleClick({ userName })} - > - - - - ), - }, - { - field: 'critical', - name: i18n.STATUS_CRITICAL_LABEL, - render: (count: number, { userName }) => ( - - {count > 0 ? ( +const useGetTableColumns: GetTableColumns = (handleClick) => { + const { euiTheme } = useEuiTheme(); + const severityColors = getSeverityColor(euiTheme); + return useMemo( + () => [ + { + field: 'userName', + name: i18n.USER_ALERTS_USERNAME_COLUMN, + 'data-test-subj': 'userSeverityAlertsTable-userName', + render: (userName: string) => ( + + + + ), + }, + { + field: 'totalAlerts', + name: i18n.ALERTS_TEXT, + 'data-test-subj': 'userSeverityAlertsTable-totalAlerts', + render: (totalAlerts: number, { userName }) => ( [ triggerId={SecurityCellActionsTrigger.ALERTS_COUNT} sourcererScopeId={SourcererScopeName.detections} metadata={{ - andFilters: [ - { field: 'kibana.alert.severity', value: 'critical' }, - { field: 'kibana.alert.workflow_status', value: 'open' }, - ], + andFilters: [{ field: 'kibana.alert.workflow_status', value: 'open' }], }} > handleClick({ userName, severity: 'critical' })} + data-test-subj="userSeverityAlertsTable-totalAlertsLink" + disabled={totalAlerts === 0} + onClick={() => handleClick({ userName })} > - + - ) : ( - - )} - - ), - }, - { - field: 'high', - name: i18n.STATUS_HIGH_LABEL, - render: (count: number, { userName }) => ( - - {count > 0 ? ( - ( + - handleClick({ userName, severity: 'high' })}> + {count > 0 ? ( + + handleClick({ userName, severity: 'critical' })} + > + + + + ) : ( - - - ) : ( - - )} - - ), - }, - { - field: 'medium', - name: i18n.STATUS_MEDIUM_LABEL, - render: (count: number, { userName }) => ( - - {count > 0 ? ( - - handleClick({ userName, severity: 'medium' })}> + )} + + ), + }, + { + field: 'high', + name: i18n.STATUS_HIGH_LABEL, + render: (count: number, { userName }) => ( + + {count > 0 ? ( + + handleClick({ userName, severity: 'high' })}> + + + + ) : ( - - - ) : ( - - )} - - ), - }, - { - field: 'low', - name: i18n.STATUS_LOW_LABEL, - render: (count: number, { userName }) => ( - - {count > 0 ? ( - - handleClick({ userName, severity: 'low' })}> + )} + + ), + }, + { + field: 'medium', + name: i18n.STATUS_MEDIUM_LABEL, + render: (count: number, { userName }) => ( + + {count > 0 ? ( + + handleClick({ userName, severity: 'medium' })}> + + + + ) : ( - - - ) : ( - - )} - - ), - }, -]; + )} + + ), + }, + { + field: 'low', + name: i18n.STATUS_LOW_LABEL, + render: (count: number, { userName }) => ( + + {count > 0 ? ( + + handleClick({ userName, severity: 'low' })}> + + + + ) : ( + + )} + + ), + }, + ], + [ + handleClick, + severityColors.critical, + severityColors.high, + severityColors.low, + severityColors.medium, + ] + ); +}; diff --git a/x-pack/plugins/security_solution/public/overview/components/detection_response/utils.tsx b/x-pack/plugins/security_solution/public/overview/components/detection_response/utils.tsx index b82108c50e0e2..a4a8f4e7ccf93 100644 --- a/x-pack/plugins/security_solution/public/overview/components/detection_response/utils.tsx +++ b/x-pack/plugins/security_solution/public/overview/components/detection_response/utils.tsx @@ -5,6 +5,9 @@ * 2.0. */ +import type { EuiThemeComputed } from '@elastic/eui'; + +// @deprecated, use getSeverityColor instead export const SEVERITY_COLOR = { critical: '#E7664C', high: '#DA8B45', @@ -12,6 +15,14 @@ export const SEVERITY_COLOR = { low: '#54B399', } as const; +export const getSeverityColor = (euiTheme: EuiThemeComputed) => + ({ + critical: euiTheme.colors.vis.euiColorVis9, + high: euiTheme.colors.vis.euiColorVis7, + medium: euiTheme.colors.vis.euiColorVis5, + low: euiTheme.colors.vis.euiColorVis0, + } as const); + export const ITEMS_PER_PAGE = 4; const MAX_ALLOWED_RESULTS = 100; From 487fdb48bd995331ae368455be3162357fc0f7ab Mon Sep 17 00:00:00 2001 From: Angela Chuang Date: Wed, 18 Dec 2024 11:37:45 +0000 Subject: [PATCH 02/15] donut chart --- .../common/components/charts/donutchart.tsx | 3 +- .../components/charts/donutchart_empty.tsx | 3 ++ .../severity_level_panel/helpers.tsx | 4 +- .../alerts_by_status/alerts_by_status.tsx | 41 ++++++++++--------- 4 files changed, 27 insertions(+), 24 deletions(-) diff --git a/x-pack/plugins/security_solution/public/common/components/charts/donutchart.tsx b/x-pack/plugins/security_solution/public/common/components/charts/donutchart.tsx index 43b67b9b83698..ebfe06476620a 100644 --- a/x-pack/plugins/security_solution/public/common/components/charts/donutchart.tsx +++ b/x-pack/plugins/security_solution/public/common/components/charts/donutchart.tsx @@ -22,11 +22,10 @@ import type { FlattenSimpleInterpolation } from 'styled-components'; import styled from 'styled-components'; import { i18n } from '@kbn/i18n'; -import _ from 'lodash'; import { useThemes } from './common'; import { DraggableLegend } from './draggable_legend'; import type { LegendItem } from './draggable_legend_item'; -import { DonutChartEmpty, getEmptyDonutColor } from './donutchart_empty'; +import { DonutChartEmpty } from './donutchart_empty'; const donutTheme: PartialTheme = { chartMargins: { top: 0, bottom: 0, left: 0, right: 0 }, diff --git a/x-pack/plugins/security_solution/public/common/components/charts/donutchart_empty.tsx b/x-pack/plugins/security_solution/public/common/components/charts/donutchart_empty.tsx index fb8bdcbcd85df..d3b05455058ff 100644 --- a/x-pack/plugins/security_solution/public/common/components/charts/donutchart_empty.tsx +++ b/x-pack/plugins/security_solution/public/common/components/charts/donutchart_empty.tsx @@ -14,6 +14,9 @@ interface DonutChartEmptyProps { donutWidth?: number; } +/* + ** @deprecated use getEmptyDonutColor instead + */ export const emptyDonutColor = 'colors.textSubdued'; export const getEmptyDonutColor = (euiTheme: EuiThemeComputed) => euiTheme.colors.textSubdued; diff --git a/x-pack/plugins/security_solution/public/detections/components/alerts_kpis/severity_level_panel/helpers.tsx b/x-pack/plugins/security_solution/public/detections/components/alerts_kpis/severity_level_panel/helpers.tsx index d2f96048b8817..e5d58b6cfa9fb 100644 --- a/x-pack/plugins/security_solution/public/detections/components/alerts_kpis/severity_level_panel/helpers.tsx +++ b/x-pack/plugins/security_solution/public/detections/components/alerts_kpis/severity_level_panel/helpers.tsx @@ -12,13 +12,13 @@ import type { AlertSearchResponse } from '../../../containers/detection_engine/a import type { SeverityBuckets as SeverityData } from '../../../../overview/components/detection_response/alerts_by_status/types'; import type { SummaryChartsData, SummaryChartsAgg } from '../alerts_summary_charts_panel/types'; import { severityLabels } from '../../../../overview/components/detection_response/alerts_by_status/use_alerts_by_status'; -import { emptyDonutColor } from '../../../../common/components/charts/donutchart_empty'; +import { getEmptyDonutColor } from '../../../../common/components/charts/donutchart_empty'; import { getSeverityColor as getAlertsSeverityColor } from '../../../../overview/components/detection_response/utils'; import * as i18n from './translations'; export const getSeverityColor = (severity: string, euiTheme: EuiThemeComputed) => { const severityColor = getAlertsSeverityColor(euiTheme); - return severityColor[severity.toLocaleLowerCase() as Severity] ?? emptyDonutColor; + return severityColor[severity.toLocaleLowerCase() as Severity] ?? getEmptyDonutColor(euiTheme); }; export const parseSeverityData = ( diff --git a/x-pack/plugins/security_solution/public/overview/components/detection_response/alerts_by_status/alerts_by_status.tsx b/x-pack/plugins/security_solution/public/overview/components/detection_response/alerts_by_status/alerts_by_status.tsx index 7454d9448d56f..8b22a44fcef37 100644 --- a/x-pack/plugins/security_solution/public/overview/components/detection_response/alerts_by_status/alerts_by_status.tsx +++ b/x-pack/plugins/security_solution/public/overview/components/detection_response/alerts_by_status/alerts_by_status.tsx @@ -54,7 +54,7 @@ import { getSeverityColor } from '../utils'; import { FormattedCount } from '../../../../common/components/formatted_number'; import { ChartLabel } from './chart_label'; import { Legend } from '../../../../common/components/charts/legend'; -import { emptyDonutColor } from '../../../../common/components/charts/donutchart_empty'; +import { getEmptyDonutColor } from '../../../../common/components/charts/donutchart_empty'; import { LastUpdatedAt } from '../../../../common/components/last_updated_at'; import { LinkButton, useGetSecuritySolutionLinkProps } from '../../../../common/components/links'; import { useNavigateToTimeline } from '../hooks/use_navigate_to_timeline'; @@ -85,7 +85,7 @@ interface AlertsByStatusProps { signalIndexName: string | null; } -const useGetChartConfigs: () => Array<{ key: Severity; label: string; color: string }> = () => { +const useGetChartConfigs: () => { legendItems: LegendItem[]; fillColor: FillColor } = () => { const { euiTheme } = useEuiTheme(); const severityColor = useMemo(() => getSeverityColor(euiTheme), [euiTheme]); const configs = useMemo( @@ -97,7 +97,24 @@ const useGetChartConfigs: () => Array<{ key: Severity; label: string; color: str ], [severityColor] ); - return configs; + + const legendItems: LegendItem[] = useMemo( + () => + configs.map((d) => ({ + color: d.color, + field: ALERT_SEVERITY, + value: d.label, + })), + [configs] + ); + + const fillColor: FillColor = useCallback( + (dataName: string) => { + return configs.find((cfg) => cfg.label === dataName)?.color ?? getEmptyDonutColor(euiTheme); + }, + [configs, euiTheme] + ); + return { fillColor, legendItems }; }; const eventKindSignalFilter: EntityFilter = { @@ -158,16 +175,7 @@ export const AlertsByStatus = ({ to, from, }); - const chartConfigs = useGetChartConfigs(); - const legendItems: LegendItem[] = useMemo( - () => - chartConfigs.map((d) => ({ - color: d.color, - field: ALERT_SEVERITY, - value: d.label, - })), - [chartConfigs] - ); + const { legendItems, fillColor } = useGetChartConfigs(); const navigateToAlertsWithStatus = useCallback( (status: Status, level?: string) => @@ -224,13 +232,6 @@ export const AlertsByStatus = ({ const totalAlertsCount = isDonutChartEmbeddablesEnabled ? visualizationTotalAlerts : totalAlerts; - const fillColor: FillColor = useCallback( - (dataName: string) => { - return chartConfigs.find((cfg) => cfg.label === dataName)?.color ?? emptyDonutColor; - }, - [chartConfigs] - ); - return ( <> From e3f218af3c389b4d8ce0b035a8b49084a298a41e Mon Sep 17 00:00:00 2001 From: Angela Chuang Date: Wed, 18 Dec 2024 13:52:20 +0000 Subject: [PATCH 03/15] euiTheme --- .../lens_attributes/common/authentication.ts | 331 +++++++++--------- .../lens_attributes/common/external_alert.ts | 6 +- .../hosts/kpi_unique_ips_area.ts | 9 +- .../network/dns_top_domains.ts | 6 +- .../network/kpi_unique_private_ips_area.ts | 6 +- .../users/kpi_user_authentications_area.ts | 6 +- .../components/visualization_actions/types.ts | 4 +- .../use_lens_attributes.tsx | 7 +- .../components/authentication/helpers.tsx | 5 +- .../stat_items/metric_embeddable.tsx | 5 +- .../components/stat_items/stat_items.tsx | 10 - .../explore/components/stat_items/types.ts | 1 - .../components/kpi_hosts/hosts/index.tsx | 1 - .../components/kpi_hosts/unique_ips/index.tsx | 2 - .../kpi_network/unique_private_ips/index.tsx | 2 - .../kpi_users/authentications/index.tsx | 2 - 16 files changed, 192 insertions(+), 211 deletions(-) diff --git a/x-pack/plugins/security_solution/public/common/components/visualization_actions/lens_attributes/common/authentication.ts b/x-pack/plugins/security_solution/public/common/components/visualization_actions/lens_attributes/common/authentication.ts index 013a05c840fbf..d5f42da5d9b28 100644 --- a/x-pack/plugins/security_solution/public/common/components/visualization_actions/lens_attributes/common/authentication.ts +++ b/x-pack/plugins/security_solution/public/common/components/visualization_actions/lens_attributes/common/authentication.ts @@ -9,188 +9,189 @@ import { AUTHENTICATION_FAILURE_CHART_LABEL, AUTHENTICATION_SUCCESS_CHART_LABEL, } from '../../translations'; -import type { LensAttributes } from '../../types'; +import type { LensAttributes, GetLensAttributes } from '../../types'; -export const authenticationLensAttributes: LensAttributes = { - title: 'Authentication', - description: '', - visualizationType: 'lnsXY', - state: { - visualization: { - title: 'Empty XY chart', - legend: { - isVisible: true, - position: 'right', - legendSize: 'xlarge', - }, - valueLabels: 'hide', - preferredSeriesType: 'bar_stacked', - layers: [ - { - layerId: '3fd0c5d5-f762-4a27-8c56-14eee0223e13', - accessors: ['5417777d-d9d9-4268-9cdc-eb29b873bd65'], - position: 'top', - seriesType: 'bar_stacked', - showGridlines: false, - layerType: 'data', - xAccessor: 'b41a2958-650b-470a-84c4-c6fd8f0c6d37', - yConfig: [ - { - forAccessor: '5417777d-d9d9-4268-9cdc-eb29b873bd65', - color: '#54b399', - }, - ], +export const getAuthenticationLensAttributes: GetLensAttributes = ({ euiTheme }) => + ({ + title: 'Authentication', + description: '', + visualizationType: 'lnsXY', + state: { + visualization: { + title: 'Empty XY chart', + legend: { + isVisible: true, + position: 'right', + legendSize: 'xlarge', }, - { - layerId: 'bef502be-e5ff-442f-9e3e-229f86ca2afa', - seriesType: 'bar_stacked', - accessors: ['a3bf9dc1-c8d2-42d6-9e60-31892a4c509e'], - layerType: 'data', - xAccessor: 'cded27f7-8ef8-458c-8d9b-70db48ae340d', - yConfig: [ - { - forAccessor: 'a3bf9dc1-c8d2-42d6-9e60-31892a4c509e', - color: '#da8b45', - }, - ], - }, - ], - yRightExtent: { - mode: 'full', - }, - yLeftExtent: { - mode: 'full', - }, - axisTitlesVisibilitySettings: { - x: false, - yLeft: false, - yRight: true, - }, - }, - query: { - query: '', - language: 'kuery', - }, - filters: [ - { - meta: { - index: '6f4dbdc7-35b6-4e20-ac53-1272167e3919', - type: 'custom', - disabled: false, - negate: false, - alias: null, - key: 'query', - value: '{"bool":{"must":[{"term":{"event.category":"authentication"}}]}}', - }, - $state: { - store: 'appState', - }, - query: { - bool: { - must: [ + valueLabels: 'hide', + preferredSeriesType: 'bar_stacked', + layers: [ + { + layerId: '3fd0c5d5-f762-4a27-8c56-14eee0223e13', + accessors: ['5417777d-d9d9-4268-9cdc-eb29b873bd65'], + position: 'top', + seriesType: 'bar_stacked', + showGridlines: false, + layerType: 'data', + xAccessor: 'b41a2958-650b-470a-84c4-c6fd8f0c6d37', + yConfig: [ { - term: { - 'event.category': 'authentication', - }, + forAccessor: '5417777d-d9d9-4268-9cdc-eb29b873bd65', + color: euiTheme.colors.vis.euiColorVis1, + }, + ], + }, + { + layerId: 'bef502be-e5ff-442f-9e3e-229f86ca2afa', + seriesType: 'bar_stacked', + accessors: ['a3bf9dc1-c8d2-42d6-9e60-31892a4c509e'], + layerType: 'data', + xAccessor: 'cded27f7-8ef8-458c-8d9b-70db48ae340d', + yConfig: [ + { + forAccessor: 'a3bf9dc1-c8d2-42d6-9e60-31892a4c509e', + color: euiTheme.colors.vis.euiColorVis7, }, ], }, + ], + yRightExtent: { + mode: 'full', + }, + yLeftExtent: { + mode: 'full', + }, + axisTitlesVisibilitySettings: { + x: false, + yLeft: false, + yRight: true, }, }, - ], - datasourceStates: { - formBased: { - layers: { - '3fd0c5d5-f762-4a27-8c56-14eee0223e13': { - columns: { - 'b41a2958-650b-470a-84c4-c6fd8f0c6d37': { - label: '@timestamp', - dataType: 'date', - operationType: 'date_histogram', - sourceField: '@timestamp', - isBucketed: true, - scale: 'interval', - params: { - interval: 'auto', - }, - }, - '5417777d-d9d9-4268-9cdc-eb29b873bd65': { - label: AUTHENTICATION_SUCCESS_CHART_LABEL, - dataType: 'number', - operationType: 'count', - isBucketed: false, - scale: 'ratio', - sourceField: '___records___', - filter: { - query: 'event.outcome : "success"', - language: 'kuery', + query: { + query: '', + language: 'kuery', + }, + filters: [ + { + meta: { + index: '6f4dbdc7-35b6-4e20-ac53-1272167e3919', + type: 'custom', + disabled: false, + negate: false, + alias: null, + key: 'query', + value: '{"bool":{"must":[{"term":{"event.category":"authentication"}}]}}', + }, + $state: { + store: 'appState', + }, + query: { + bool: { + must: [ + { + term: { + 'event.category': 'authentication', + }, }, - customLabel: true, - }, + ], }, - columnOrder: [ - 'b41a2958-650b-470a-84c4-c6fd8f0c6d37', - '5417777d-d9d9-4268-9cdc-eb29b873bd65', - ], - incompleteColumns: {}, }, - 'bef502be-e5ff-442f-9e3e-229f86ca2afa': { - columns: { - 'cded27f7-8ef8-458c-8d9b-70db48ae340d': { - label: '@timestamp', - dataType: 'date', - operationType: 'date_histogram', - sourceField: '@timestamp', - isBucketed: true, - scale: 'interval', - params: { - interval: 'auto', + }, + ], + datasourceStates: { + formBased: { + layers: { + '3fd0c5d5-f762-4a27-8c56-14eee0223e13': { + columns: { + 'b41a2958-650b-470a-84c4-c6fd8f0c6d37': { + label: '@timestamp', + dataType: 'date', + operationType: 'date_histogram', + sourceField: '@timestamp', + isBucketed: true, + scale: 'interval', + params: { + interval: 'auto', + }, + }, + '5417777d-d9d9-4268-9cdc-eb29b873bd65': { + label: AUTHENTICATION_SUCCESS_CHART_LABEL, + dataType: 'number', + operationType: 'count', + isBucketed: false, + scale: 'ratio', + sourceField: '___records___', + filter: { + query: 'event.outcome : "success"', + language: 'kuery', + }, + customLabel: true, }, }, - 'a3bf9dc1-c8d2-42d6-9e60-31892a4c509e': { - label: AUTHENTICATION_FAILURE_CHART_LABEL, - dataType: 'number', - operationType: 'count', - isBucketed: false, - scale: 'ratio', - sourceField: '___records___', - filter: { - query: 'event.outcome : "failure"', - language: 'kuery', + columnOrder: [ + 'b41a2958-650b-470a-84c4-c6fd8f0c6d37', + '5417777d-d9d9-4268-9cdc-eb29b873bd65', + ], + incompleteColumns: {}, + }, + 'bef502be-e5ff-442f-9e3e-229f86ca2afa': { + columns: { + 'cded27f7-8ef8-458c-8d9b-70db48ae340d': { + label: '@timestamp', + dataType: 'date', + operationType: 'date_histogram', + sourceField: '@timestamp', + isBucketed: true, + scale: 'interval', + params: { + interval: 'auto', + }, + }, + 'a3bf9dc1-c8d2-42d6-9e60-31892a4c509e': { + label: AUTHENTICATION_FAILURE_CHART_LABEL, + dataType: 'number', + operationType: 'count', + isBucketed: false, + scale: 'ratio', + sourceField: '___records___', + filter: { + query: 'event.outcome : "failure"', + language: 'kuery', + }, + customLabel: true, }, - customLabel: true, }, + columnOrder: [ + 'cded27f7-8ef8-458c-8d9b-70db48ae340d', + 'a3bf9dc1-c8d2-42d6-9e60-31892a4c509e', + ], + incompleteColumns: {}, }, - columnOrder: [ - 'cded27f7-8ef8-458c-8d9b-70db48ae340d', - 'a3bf9dc1-c8d2-42d6-9e60-31892a4c509e', - ], - incompleteColumns: {}, }, }, }, }, - }, - references: [ - { - type: 'index-pattern', - id: '{dataViewId}', - name: 'indexpattern-datasource-current-indexpattern', - }, - { - type: 'index-pattern', - id: '{dataViewId}', - name: 'indexpattern-datasource-layer-3fd0c5d5-f762-4a27-8c56-14eee0223e13', - }, - { - type: 'index-pattern', - id: '{dataViewId}', - name: 'indexpattern-datasource-layer-bef502be-e5ff-442f-9e3e-229f86ca2afa', - }, - { - type: 'index-pattern', - name: '6f4dbdc7-35b6-4e20-ac53-1272167e3919', - id: '{dataViewId}', - }, - ], -} as LensAttributes; + references: [ + { + type: 'index-pattern', + id: '{dataViewId}', + name: 'indexpattern-datasource-current-indexpattern', + }, + { + type: 'index-pattern', + id: '{dataViewId}', + name: 'indexpattern-datasource-layer-3fd0c5d5-f762-4a27-8c56-14eee0223e13', + }, + { + type: 'index-pattern', + id: '{dataViewId}', + name: 'indexpattern-datasource-layer-bef502be-e5ff-442f-9e3e-229f86ca2afa', + }, + { + type: 'index-pattern', + name: '6f4dbdc7-35b6-4e20-ac53-1272167e3919', + id: '{dataViewId}', + }, + ], + } as LensAttributes); diff --git a/x-pack/plugins/security_solution/public/common/components/visualization_actions/lens_attributes/common/external_alert.ts b/x-pack/plugins/security_solution/public/common/components/visualization_actions/lens_attributes/common/external_alert.ts index 35a9f124a2993..5387268d01793 100644 --- a/x-pack/plugins/security_solution/public/common/components/visualization_actions/lens_attributes/common/external_alert.ts +++ b/x-pack/plugins/security_solution/public/common/components/visualization_actions/lens_attributes/common/external_alert.ts @@ -8,9 +8,9 @@ import { COUNT, TOP_VALUE } from '../../translations'; import type { GetLensAttributes, LensAttributes } from '../../types'; -export const getExternalAlertLensAttributes: GetLensAttributes = ( - stackByField = 'event.module' -) => { +export const getExternalAlertLensAttributes: GetLensAttributes = ({ + stackByField = 'event.module', +}) => { return { title: 'External alerts', description: '', diff --git a/x-pack/plugins/security_solution/public/common/components/visualization_actions/lens_attributes/hosts/kpi_unique_ips_area.ts b/x-pack/plugins/security_solution/public/common/components/visualization_actions/lens_attributes/hosts/kpi_unique_ips_area.ts index bb86c292546cb..7a9053e6cb1d7 100644 --- a/x-pack/plugins/security_solution/public/common/components/visualization_actions/lens_attributes/hosts/kpi_unique_ips_area.ts +++ b/x-pack/plugins/security_solution/public/common/components/visualization_actions/lens_attributes/hosts/kpi_unique_ips_area.ts @@ -28,8 +28,7 @@ const layer = { }, }; -export const getKpiUniqueIpsAreaLensAttributes: GetLensAttributes = (props) => { - const colorSchemas = props?.colorSchemas; +export const getKpiUniqueIpsAreaLensAttributes: GetLensAttributes = ({ euiTheme }) => { return { description: '', state: { @@ -101,7 +100,9 @@ export const getKpiUniqueIpsAreaLensAttributes: GetLensAttributes = (props) => { layerType: 'data', seriesType: 'area', xAccessor: columnSourceTimestamp, - yConfig: [{ color: colorSchemas?.[`source.ip`], forAccessor: columnSourceUniqueIp }], + yConfig: [ + { color: euiTheme.colors.vis.euiColorVis2, forAccessor: columnSourceUniqueIp }, + ], }, { accessors: [columnDestinationIp], @@ -110,7 +111,7 @@ export const getKpiUniqueIpsAreaLensAttributes: GetLensAttributes = (props) => { seriesType: 'area', xAccessor: columnDestinationTimestamp, yConfig: [ - { color: colorSchemas?.[`destination.ip`], forAccessor: columnDestinationIp }, + { color: euiTheme.colors.vis.euiColorVis3, forAccessor: columnDestinationIp }, ], }, ], diff --git a/x-pack/plugins/security_solution/public/common/components/visualization_actions/lens_attributes/network/dns_top_domains.ts b/x-pack/plugins/security_solution/public/common/components/visualization_actions/lens_attributes/network/dns_top_domains.ts index ff04bf695fb83..d94edfa47df7e 100644 --- a/x-pack/plugins/security_solution/public/common/components/visualization_actions/lens_attributes/network/dns_top_domains.ts +++ b/x-pack/plugins/security_solution/public/common/components/visualization_actions/lens_attributes/network/dns_top_domains.ts @@ -9,10 +9,10 @@ import { TOP_VALUE, UNIQUE_COUNT } from '../../translations'; import type { LensAttributes, GetLensAttributes } from '../../types'; /* Exported from Kibana Saved Object */ -export const getDnsTopDomainsLensAttributes: GetLensAttributes = ( +export const getDnsTopDomainsLensAttributes: GetLensAttributes = ({ stackByField = 'dns.question.registered_domain', - extraOptions -) => + extraOptions, +}) => ({ title: 'Top domains by dns.question.registered_domain', visualizationType: 'lnsXY', diff --git a/x-pack/plugins/security_solution/public/common/components/visualization_actions/lens_attributes/network/kpi_unique_private_ips_area.ts b/x-pack/plugins/security_solution/public/common/components/visualization_actions/lens_attributes/network/kpi_unique_private_ips_area.ts index 0650dc01f52c6..aedfa71af70fd 100644 --- a/x-pack/plugins/security_solution/public/common/components/visualization_actions/lens_attributes/network/kpi_unique_private_ips_area.ts +++ b/x-pack/plugins/security_solution/public/common/components/visualization_actions/lens_attributes/network/kpi_unique_private_ips_area.ts @@ -15,7 +15,7 @@ const columnDestinationIp = 'ac1eb80c-ddde-46c4-a90c-400261926762'; const layerSourceIp = '38aa6532-6bf9-4c8f-b2a6-da8d32f7d0d7'; const layerDestinationIp = '72dc4b99-b07d-4dc9-958b-081d259e11fa'; -export const getKpiUniquePrivateIpsAreaLensAttributes: GetLensAttributes = ({ colorSchemas }) => { +export const getKpiUniquePrivateIpsAreaLensAttributes: GetLensAttributes = ({ euiTheme }) => { return { title: '[Network] Unique private IPs - area chart', description: '', @@ -66,7 +66,7 @@ export const getKpiUniquePrivateIpsAreaLensAttributes: GetLensAttributes = ({ co yConfig: [ { forAccessor: columnSourceIp, - color: colorSchemas?.['source.ip'], + color: euiTheme.colors.vis.euiColorVis2, }, ], }, @@ -79,7 +79,7 @@ export const getKpiUniquePrivateIpsAreaLensAttributes: GetLensAttributes = ({ co yConfig: [ { forAccessor: columnDestinationIp, - color: colorSchemas?.['destination.ip'], + color: euiTheme.colors.vis.euiColorVis3, }, ], }, diff --git a/x-pack/plugins/security_solution/public/common/components/visualization_actions/lens_attributes/users/kpi_user_authentications_area.ts b/x-pack/plugins/security_solution/public/common/components/visualization_actions/lens_attributes/users/kpi_user_authentications_area.ts index 49804df3829b1..4441f21f5b182 100644 --- a/x-pack/plugins/security_solution/public/common/components/visualization_actions/lens_attributes/users/kpi_user_authentications_area.ts +++ b/x-pack/plugins/security_solution/public/common/components/visualization_actions/lens_attributes/users/kpi_user_authentications_area.ts @@ -16,7 +16,7 @@ const columnEventOutcomeSuccessTimestamp = '49a42fe6-ebe8-4adb-8eed-1966a5297b7e const layoutEventOutcomeSuccess = '4590dafb-4ac7-45aa-8641-47a3ff0b817c'; const layoutEventOutcomeFailure = '31213ae3-905b-4e88-b987-0cccb1f3209f'; -export const getKpiUserAuthenticationsAreaLensAttributes: GetLensAttributes = ({ colorSchemas }) => +export const getKpiUserAuthenticationsAreaLensAttributes: GetLensAttributes = ({ euiTheme }) => ({ title: '[Host] User authentications - area ', description: '', @@ -48,7 +48,7 @@ export const getKpiUserAuthenticationsAreaLensAttributes: GetLensAttributes = ({ xAccessor: columnEventOutcomeSuccessTimestamp, yConfig: [ { - color: colorSchemas?.['event.outcome.success'], + color: euiTheme.colors.vis.euiColorVis0, forAccessor: columnEventOutcomeSuccess, }, ], @@ -61,7 +61,7 @@ export const getKpiUserAuthenticationsAreaLensAttributes: GetLensAttributes = ({ xAccessor: columnEventOutcomeFailureTimestamp, yConfig: [ { - color: colorSchemas?.['event.outcome.failure'], + color: euiTheme.colors.vis.euiColorVis9, forAccessor: columnEventOutcomeFailure, }, ], diff --git a/x-pack/plugins/security_solution/public/common/components/visualization_actions/types.ts b/x-pack/plugins/security_solution/public/common/components/visualization_actions/types.ts index 6bfa3c4cb58af..19d9ae0e72335 100644 --- a/x-pack/plugins/security_solution/public/common/components/visualization_actions/types.ts +++ b/x-pack/plugins/security_solution/public/common/components/visualization_actions/types.ts @@ -17,6 +17,7 @@ import type { Action } from '@kbn/ui-actions-plugin/public'; import type { Filter, Query } from '@kbn/es-query'; import type { LensProps } from '@kbn/cases-plugin/public/types'; +import type { EuiThemeComputed } from '@elastic/eui'; import type { InputsModelId } from '../../store/inputs/constants'; import type { SourcererScopeName } from '../../../sourcerer/store/model'; import type { Status } from '../../../../common/api/detection_engine'; @@ -26,14 +27,13 @@ export type ColorSchemas = Record; export type LensAttributes = TypedLensByValueInput['attributes']; export type GetLensAttributes = (params: { stackByField?: string; - colorSchemas?: ColorSchemas; + euiTheme: EuiThemeComputed; extraOptions?: ExtraOptions; }) => LensAttributes; export interface UseLensAttributesProps { applyGlobalQueriesAndFilters?: boolean; applyPageAndTabsFilters?: boolean; - colorSchemas?: ColorSchemas; extraOptions?: ExtraOptions; getLensAttributes?: GetLensAttributes; lensAttributes?: LensAttributes | null; diff --git a/x-pack/plugins/security_solution/public/common/components/visualization_actions/use_lens_attributes.tsx b/x-pack/plugins/security_solution/public/common/components/visualization_actions/use_lens_attributes.tsx index aa3beeabaf5a5..df52183c06845 100644 --- a/x-pack/plugins/security_solution/public/common/components/visualization_actions/use_lens_attributes.tsx +++ b/x-pack/plugins/security_solution/public/common/components/visualization_actions/use_lens_attributes.tsx @@ -6,6 +6,7 @@ */ import { useMemo } from 'react'; +import { useEuiTheme } from '@elastic/eui'; import { SecurityPageName } from '../../../../common/constants'; import { NetworkRouteType } from '../../../explore/network/pages/navigation/types'; import { useSourcererDataView } from '../../../sourcerer/containers'; @@ -25,7 +26,6 @@ import { export const useLensAttributes = ({ applyGlobalQueriesAndFilters = true, applyPageAndTabsFilters = true, - colorSchemas, extraOptions, getLensAttributes, lensAttributes, @@ -33,6 +33,7 @@ export const useLensAttributes = ({ stackByField, title, }: UseLensAttributesProps): LensAttributes | null => { + const { euiTheme } = useEuiTheme(); const { selectedPatterns, dataViewId, indicesExist } = useSourcererDataView(scopeId); const getGlobalQuerySelector = useMemo(() => inputsSelectors.globalQuerySelector(), []); const getGlobalFiltersQuerySelector = useMemo( @@ -74,8 +75,8 @@ export const useLensAttributes = ({ lensAttributes ?? ((getLensAttributes && stackByField !== null && - getLensAttributes({ stackByField, colorSchemas, extraOptions })) as LensAttributes), - [colorSchemas, extraOptions, getLensAttributes, lensAttributes, stackByField] + getLensAttributes({ stackByField, euiTheme, extraOptions })) as LensAttributes), + [euiTheme, extraOptions, getLensAttributes, lensAttributes, stackByField] ); const hasAdHocDataViews = Object.values(attrs?.state?.adHocDataViews ?? {}).length > 0; diff --git a/x-pack/plugins/security_solution/public/explore/components/authentication/helpers.tsx b/x-pack/plugins/security_solution/public/explore/components/authentication/helpers.tsx index 80b5924860ecb..f9dcc97a2976a 100644 --- a/x-pack/plugins/security_solution/public/explore/components/authentication/helpers.tsx +++ b/x-pack/plugins/security_solution/public/explore/components/authentication/helpers.tsx @@ -24,8 +24,7 @@ import type { MatrixHistogramConfigs, MatrixHistogramOption, } from '../../../common/components/matrix_histogram/types'; -import type { LensAttributes } from '../../../common/components/visualization_actions/types'; -import { authenticationLensAttributes } from '../../../common/components/visualization_actions/lens_attributes/common/authentication'; +import { getAuthenticationLensAttributes } from '../../../common/components/visualization_actions/lens_attributes/common/authentication'; export const getHostDetailsAuthenticationColumns = (): AuthTableColumns => [ USER_COLUMN, @@ -199,5 +198,5 @@ export const histogramConfigs: MatrixHistogramConfigs = { authenticationsStackByOptions[0], stackByOptions: authenticationsStackByOptions, title: i18n.NAVIGATION_AUTHENTICATIONS_TITLE, - lensAttributes: authenticationLensAttributes as LensAttributes, + getLensAttributes: getAuthenticationLensAttributes, }; diff --git a/x-pack/plugins/security_solution/public/explore/components/stat_items/metric_embeddable.tsx b/x-pack/plugins/security_solution/public/explore/components/stat_items/metric_embeddable.tsx index fa64ac3d75244..c6e44b4dda306 100644 --- a/x-pack/plugins/security_solution/public/explore/components/stat_items/metric_embeddable.tsx +++ b/x-pack/plugins/security_solution/public/explore/components/stat_items/metric_embeddable.tsx @@ -9,14 +9,12 @@ import React from 'react'; import { FlexItem, MetricItem, StatValue } from './utils'; import { VisualizationEmbeddable } from '../../../common/components/visualization_actions/visualization_embeddable'; import type { FieldConfigs } from './types'; -import type { ColorSchemas } from '../../../common/components/visualization_actions/types'; export interface MetricEmbeddableProps { fields: FieldConfigs[]; id: string; inspectTitle?: string; timerange: { from: string; to: string }; - colorSchemas: ColorSchemas; } const CHART_HEIGHT = 36; @@ -26,7 +24,6 @@ const MetricEmbeddableComponent = ({ id, inspectTitle, timerange, - colorSchemas, }: MetricEmbeddableProps) => { return ( @@ -37,7 +34,7 @@ const MetricEmbeddableComponent = ({ diff --git a/x-pack/plugins/security_solution/public/explore/components/stat_items/stat_items.tsx b/x-pack/plugins/security_solution/public/explore/components/stat_items/stat_items.tsx index 422afb9f7688a..fe1a5b6764f05 100644 --- a/x-pack/plugins/security_solution/public/explore/components/stat_items/stat_items.tsx +++ b/x-pack/plugins/security_solution/public/explore/components/stat_items/stat_items.tsx @@ -33,13 +33,6 @@ export const StatItemsComponent = React.memo(({ statItems, from, getAreaChartLensAttributes, } = statItems; - const colorSchemas = fields.reduce>((acc, { sourceField, color }) => { - if (color && sourceField) { - acc[sourceField] = color; - } - return acc; - }, {}); - const { isToggleExpanded, onToggle } = useToggleStatus({ id }); return ( @@ -58,7 +51,6 @@ export const StatItemsComponent = React.memo(({ statItems, from, id={id} timerange={timerange} inspectTitle={description} - colorSchemas={colorSchemas} /> {(enableAreaChart || enableBarChart) && } @@ -72,7 +64,6 @@ export const StatItemsComponent = React.memo(({ statItems, from, id={`${id}-bar-embeddable`} height={ChartHeight} inspectTitle={description} - colorSchemas={colorSchemas} /> )} @@ -87,7 +78,6 @@ export const StatItemsComponent = React.memo(({ statItems, from, id={`${id}-area-embeddable`} height={ChartHeight} inspectTitle={description} - colorSchemas={colorSchemas} /> diff --git a/x-pack/plugins/security_solution/public/explore/components/stat_items/types.ts b/x-pack/plugins/security_solution/public/explore/components/stat_items/types.ts index b237024d5e47a..a4013f9abd0b1 100644 --- a/x-pack/plugins/security_solution/public/explore/components/stat_items/types.ts +++ b/x-pack/plugins/security_solution/public/explore/components/stat_items/types.ts @@ -18,7 +18,6 @@ export interface FieldConfigs { key: string; lensAttributes?: LensAttributes; name?: string; - sourceField?: string; } export interface StatItems { diff --git a/x-pack/plugins/security_solution/public/explore/hosts/components/kpi_hosts/hosts/index.tsx b/x-pack/plugins/security_solution/public/explore/hosts/components/kpi_hosts/hosts/index.tsx index e4bce2ed4e871..1b4cfdf401843 100644 --- a/x-pack/plugins/security_solution/public/explore/hosts/components/kpi_hosts/hosts/index.tsx +++ b/x-pack/plugins/security_solution/public/explore/hosts/components/kpi_hosts/hosts/index.tsx @@ -29,7 +29,6 @@ export const useGetHostsStatItems: () => Readonly = () => { color: euiTheme.colors.vis.euiColorVis1, icon: 'storage', lensAttributes: kpiHostMetricLensAttributes, - sourceField: 'host.name', }, ], enableAreaChart: true, diff --git a/x-pack/plugins/security_solution/public/explore/hosts/components/kpi_hosts/unique_ips/index.tsx b/x-pack/plugins/security_solution/public/explore/hosts/components/kpi_hosts/unique_ips/index.tsx index eb300f74a581b..b96bdd4e4bc4f 100644 --- a/x-pack/plugins/security_solution/public/explore/hosts/components/kpi_hosts/unique_ips/index.tsx +++ b/x-pack/plugins/security_solution/public/explore/hosts/components/kpi_hosts/unique_ips/index.tsx @@ -33,7 +33,6 @@ export const useGetUniqueIpsStatItems: () => Readonly = () => { color: euiTheme.colors.vis.euiColorVis2, icon: 'visMapCoordinate', lensAttributes: kpiUniqueIpsSourceMetricLensAttributes, - sourceField: 'source.ip', }, { key: 'uniqueDestinationIps', @@ -42,7 +41,6 @@ export const useGetUniqueIpsStatItems: () => Readonly = () => { color: euiTheme.colors.vis.euiColorVis3, icon: 'visMapCoordinate', lensAttributes: kpiUniqueIpsDestinationMetricLensAttributes, - sourceField: 'destination.ip', }, ], enableAreaChart: true, diff --git a/x-pack/plugins/security_solution/public/explore/network/components/kpi_network/unique_private_ips/index.tsx b/x-pack/plugins/security_solution/public/explore/network/components/kpi_network/unique_private_ips/index.tsx index b70c3ea6845c1..ce2bf279ac66d 100644 --- a/x-pack/plugins/security_solution/public/explore/network/components/kpi_network/unique_private_ips/index.tsx +++ b/x-pack/plugins/security_solution/public/explore/network/components/kpi_network/unique_private_ips/index.tsx @@ -32,7 +32,6 @@ export const useGetUniquePrivateIpsStatItems: () => Readonly = () = color: euiTheme.colors.vis.euiColorVis2, icon: 'visMapCoordinate', lensAttributes: kpiUniquePrivateIpsSourceMetricLensAttributes, - sourceField: 'source.ip', }, { key: 'uniqueDestinationPrivateIps', @@ -41,7 +40,6 @@ export const useGetUniquePrivateIpsStatItems: () => Readonly = () = color: euiTheme.colors.vis.euiColorVis3, icon: 'visMapCoordinate', lensAttributes: kpiUniquePrivateIpsDestinationMetricLensAttributes, - sourceField: 'destination.ip', }, ], description: i18n.UNIQUE_PRIVATE_IPS, diff --git a/x-pack/plugins/security_solution/public/explore/users/components/kpi_users/authentications/index.tsx b/x-pack/plugins/security_solution/public/explore/users/components/kpi_users/authentications/index.tsx index 7a425e1a5ea41..dc0a691910734 100644 --- a/x-pack/plugins/security_solution/public/explore/users/components/kpi_users/authentications/index.tsx +++ b/x-pack/plugins/security_solution/public/explore/users/components/kpi_users/authentications/index.tsx @@ -33,7 +33,6 @@ export const useGetAuthenticationsStatItems: () => Readonly = () => color: euiTheme.colors.vis.euiColorVis0, icon: 'check', lensAttributes: kpiUserAuthenticationsMetricSuccessLensAttributes, - sourceField: 'event.outcome.success', }, { key: 'authenticationsFailure', @@ -42,7 +41,6 @@ export const useGetAuthenticationsStatItems: () => Readonly = () => color: euiTheme.colors.vis.euiColorVis9, icon: 'cross', lensAttributes: kpiUserAuthenticationsMetricFailureLensAttributes, - sourceField: 'event.outcome.failure', }, ], enableAreaChart: true, From 3ce96d508481afcf2e678f66cb68c66cdcf530a6 Mon Sep 17 00:00:00 2001 From: Angela Chuang Date: Wed, 18 Dec 2024 14:12:56 +0000 Subject: [PATCH 04/15] clean up --- .../components/charts/donutchart_empty.tsx | 2 +- .../visualization_actions/actions.tsx | 2 -- .../hosts/kpi_unique_ips_area.ts | 15 ++------ .../hosts/kpi_unique_ips_bar.ts | 22 +++--------- .../users/kpi_user_authentications_bar.ts | 11 ++++-- .../visualization_actions/lens_embeddable.tsx | 3 -- .../components/visualization_actions/types.ts | 6 ---- .../kpi_network/network_events/index.tsx | 34 ++++++++++++------- 8 files changed, 37 insertions(+), 58 deletions(-) diff --git a/x-pack/plugins/security_solution/public/common/components/charts/donutchart_empty.tsx b/x-pack/plugins/security_solution/public/common/components/charts/donutchart_empty.tsx index d3b05455058ff..a24c487d7d924 100644 --- a/x-pack/plugins/security_solution/public/common/components/charts/donutchart_empty.tsx +++ b/x-pack/plugins/security_solution/public/common/components/charts/donutchart_empty.tsx @@ -17,7 +17,7 @@ interface DonutChartEmptyProps { /* ** @deprecated use getEmptyDonutColor instead */ -export const emptyDonutColor = 'colors.textSubdued'; +export const emptyDonutColor = '#FAFBFD'; export const getEmptyDonutColor = (euiTheme: EuiThemeComputed) => euiTheme.colors.textSubdued; diff --git a/x-pack/plugins/security_solution/public/common/components/visualization_actions/actions.tsx b/x-pack/plugins/security_solution/public/common/components/visualization_actions/actions.tsx index f7b5e3d1b4c05..bcdb9d163164c 100644 --- a/x-pack/plugins/security_solution/public/common/components/visualization_actions/actions.tsx +++ b/x-pack/plugins/security_solution/public/common/components/visualization_actions/actions.tsx @@ -37,7 +37,6 @@ const Wrapper = styled.div` const VisualizationActionsComponent: React.FC = ({ applyGlobalQueriesAndFilters = true, - colorSchemas, className, extraActions, extraOptions, @@ -69,7 +68,6 @@ const VisualizationActionsComponent: React.FC = ({ const attributes = useLensAttributes({ applyGlobalQueriesAndFilters, - colorSchemas, extraOptions, getLensAttributes, lensAttributes, diff --git a/x-pack/plugins/security_solution/public/common/components/visualization_actions/lens_attributes/hosts/kpi_unique_ips_area.ts b/x-pack/plugins/security_solution/public/common/components/visualization_actions/lens_attributes/hosts/kpi_unique_ips_area.ts index 7a9053e6cb1d7..eecf0724508ce 100644 --- a/x-pack/plugins/security_solution/public/common/components/visualization_actions/lens_attributes/hosts/kpi_unique_ips_area.ts +++ b/x-pack/plugins/security_solution/public/common/components/visualization_actions/lens_attributes/hosts/kpi_unique_ips_area.ts @@ -17,17 +17,6 @@ const columnDestinationTimestamp = '95e74e6-99dd-4b11-8faf-439b4d959df9'; const layerDestinationIp = 'ca05ecdb-0fa4-49a8-9305-b23d91012a46'; const layerSourceIp = '8be0156b-d423-4a39-adf1-f54d4c9f2e69'; -const layer = { - [`source.ip`]: { - layerId: layerSourceIp, - columns: [columnSourceTimestamp, columnSourceUniqueIp], - }, - [`destination.ip`]: { - layerId: layerDestinationIp, - columns: [columnDestinationTimestamp, columnDestinationIp], - }, -}; - export const getKpiUniqueIpsAreaLensAttributes: GetLensAttributes = ({ euiTheme }) => { return { description: '', @@ -36,7 +25,7 @@ export const getKpiUniqueIpsAreaLensAttributes: GetLensAttributes = ({ euiTheme formBased: { layers: { [layerSourceIp]: { - columnOrder: layer[`source.ip`].columns, + columnOrder: [columnSourceTimestamp, columnSourceUniqueIp], columns: { [columnSourceTimestamp]: { dataType: 'date', @@ -60,7 +49,7 @@ export const getKpiUniqueIpsAreaLensAttributes: GetLensAttributes = ({ euiTheme incompleteColumns: {}, }, [layerDestinationIp]: { - columnOrder: layer[`destination.ip`].columns, + columnOrder: [columnDestinationTimestamp, columnDestinationIp], columns: { [columnDestinationIp]: { customLabel: true, diff --git a/x-pack/plugins/security_solution/public/common/components/visualization_actions/lens_attributes/hosts/kpi_unique_ips_bar.ts b/x-pack/plugins/security_solution/public/common/components/visualization_actions/lens_attributes/hosts/kpi_unique_ips_bar.ts index df457275d85e9..511ce4cd92089 100644 --- a/x-pack/plugins/security_solution/public/common/components/visualization_actions/lens_attributes/hosts/kpi_unique_ips_bar.ts +++ b/x-pack/plugins/security_solution/public/common/components/visualization_actions/lens_attributes/hosts/kpi_unique_ips_bar.ts @@ -16,19 +16,7 @@ const columnDestinationFilter = 'c72aad6a-fc9c-43dc-9194-e13ca3ee8aff'; const layerSourceIp = '8be0156b-d423-4a39-adf1-f54d4c9f2e69'; const layerDestinationIp = 'ec84ba70-2adb-4647-8ef0-8ad91a0e6d4e'; -const layer = { - [`source.ip`]: { - layerId: layerSourceIp, - columns: [columnSourceFilter, columnSourceIp], - }, - [`destination.ip`]: { - layerId: layerDestinationIp, - columns: [columnDestinationFilter, columnDestinationIp], - }, -}; - -export const getKpiUniqueIpsBarLensAttributes: GetLensAttributes = (params) => { - const colorSchemas = params?.colorSchemas; +export const getKpiUniqueIpsBarLensAttributes: GetLensAttributes = ({ euiTheme }) => { return { description: '', state: { @@ -36,7 +24,7 @@ export const getKpiUniqueIpsBarLensAttributes: GetLensAttributes = (params) => { formBased: { layers: { [layerSourceIp]: { - columnOrder: layer[`source.ip`].columns, + columnOrder: [columnSourceFilter, columnSourceIp], columns: { [columnSourceIp]: { dataType: 'number', @@ -65,7 +53,7 @@ export const getKpiUniqueIpsBarLensAttributes: GetLensAttributes = (params) => { incompleteColumns: {}, }, [layerDestinationIp]: { - columnOrder: layer[`destination.ip`].columns, + columnOrder: [columnDestinationFilter, columnDestinationIp], columns: { [columnDestinationIp]: { dataType: 'number', @@ -108,7 +96,7 @@ export const getKpiUniqueIpsBarLensAttributes: GetLensAttributes = (params) => { layerType: 'data', seriesType: 'bar_horizontal_stacked', xAccessor: columnSourceFilter, - yConfig: [{ color: colorSchemas?.[`source.ip`], forAccessor: columnSourceIp }], + yConfig: [{ color: euiTheme.colors.vis.euiColorVis2, forAccessor: columnSourceIp }], }, { accessors: [columnDestinationIp], @@ -117,7 +105,7 @@ export const getKpiUniqueIpsBarLensAttributes: GetLensAttributes = (params) => { seriesType: 'bar_horizontal_stacked', xAccessor: columnDestinationFilter, yConfig: [ - { color: colorSchemas?.[`destination.ip`], forAccessor: columnDestinationIp }, + { color: euiTheme.colors.vis.euiColorVis3, forAccessor: columnDestinationIp }, ], }, ], diff --git a/x-pack/plugins/security_solution/public/common/components/visualization_actions/lens_attributes/users/kpi_user_authentications_bar.ts b/x-pack/plugins/security_solution/public/common/components/visualization_actions/lens_attributes/users/kpi_user_authentications_bar.ts index 3aa057937eb81..fc8f8f2cfdbbd 100644 --- a/x-pack/plugins/security_solution/public/common/components/visualization_actions/lens_attributes/users/kpi_user_authentications_bar.ts +++ b/x-pack/plugins/security_solution/public/common/components/visualization_actions/lens_attributes/users/kpi_user_authentications_bar.ts @@ -17,7 +17,7 @@ const columnEventOutcomeSuccessFilter = '430e690c-9992-414f-9bce-00812d99a5e7'; const layerEventOutcomeFailure = 'b9acd453-f476-4467-ad38-203e37b73e55'; const layerEventOutcomeSuccess = '31213ae3-905b-4e88-b987-0cccb1f3209f'; -export const getKpiUserAuthenticationsBarLensAttributes: GetLensAttributes = ({ colorSchemas }) => +export const getKpiUserAuthenticationsBarLensAttributes: GetLensAttributes = ({ euiTheme }) => ({ title: '[Host] User authentications - bar ', description: '', @@ -47,7 +47,12 @@ export const getKpiUserAuthenticationsBarLensAttributes: GetLensAttributes = ({ layerType: 'data', seriesType: 'bar_horizontal_stacked', xAccessor: columnEventOutcomeSuccessFilter, - yConfig: [], + yConfig: [ + { + color: euiTheme.colors.vis.euiColorVis0, + forAccessor: columnEventOutcomeSuccess, + }, + ], }, { accessors: [columnEventOutcomeFailure], @@ -57,7 +62,7 @@ export const getKpiUserAuthenticationsBarLensAttributes: GetLensAttributes = ({ xAccessor: columnEventOutcomeFailureFilter, yConfig: [ { - color: colorSchemas?.['event.outcome.failure'], + color: euiTheme.colors.vis.euiColorVis9, forAccessor: columnEventOutcomeFailure, }, ], diff --git a/x-pack/plugins/security_solution/public/common/components/visualization_actions/lens_embeddable.tsx b/x-pack/plugins/security_solution/public/common/components/visualization_actions/lens_embeddable.tsx index edc4774996551..871750d5ad00f 100644 --- a/x-pack/plugins/security_solution/public/common/components/visualization_actions/lens_embeddable.tsx +++ b/x-pack/plugins/security_solution/public/common/components/visualization_actions/lens_embeddable.tsx @@ -70,7 +70,6 @@ const LensEmbeddableComponent: React.FC = ({ withActions = DEFAULT_ACTIONS, disableOnClickFilter = false, casesAttachmentMetadata, - colorSchemas, }) => { const style = useMemo( () => ({ @@ -91,7 +90,6 @@ const LensEmbeddableComponent: React.FC = ({ const attributes = useLensAttributes({ applyGlobalQueriesAndFilters, applyPageAndTabsFilters, - colorSchemas, extraOptions, getLensAttributes, lensAttributes, @@ -222,7 +220,6 @@ const LensEmbeddableComponent: React.FC = ({ = [ - { - key: 'networkEvents', - fields: [ +const useGetNetworkEventsStatsItems: () => Readonly = () => { + const { euiTheme } = useEuiTheme(); + return useMemo( + () => [ { key: 'networkEvents', - color: 'euiColorVis1', - lensAttributes: kpiNetworkEventsLensAttributes, + fields: [ + { + key: 'networkEvents', + color: euiTheme.colors.vis.euiColorVis1, + lensAttributes: kpiNetworkEventsLensAttributes, + }, + ], + description: i18n.NETWORK_EVENTS, }, ], - description: i18n.NETWORK_EVENTS, - }, -]; + [euiTheme.colors.vis.euiColorVis1] + ); +}; -const NetworkKpiNetworkEventsComponent: React.FC = ({ from, to }) => ( - -); +const NetworkKpiNetworkEventsComponent: React.FC = ({ from, to }) => { + const networkEventsStatsItems = useGetNetworkEventsStatsItems(); + return ; +}; export const NetworkKpiNetworkEvents = React.memo(NetworkKpiNetworkEventsComponent); From 90608cae76ed76d274a222272a81c8603a91cf05 Mon Sep 17 00:00:00 2001 From: Angela Chuang Date: Wed, 18 Dec 2024 15:09:49 +0000 Subject: [PATCH 05/15] unit tests --- .../__snapshots__/authentication.test.ts.snap | 6 +- .../common/authentication.test.ts | 6 +- .../lens_attributes/common/authentication.ts | 2 +- .../__snapshots__/kpi_host_area.test.ts.snap | 2 +- .../kpi_unique_ips_area.test.ts.snap | 30 +-- .../kpi_unique_ips_bar.test.ts.snap | 6 +- .../hosts/kpi_host_area.test.ts | 6 +- .../hosts/kpi_unique_ips_area.test.ts | 6 +- .../hosts/kpi_unique_ips_bar.test.ts | 6 +- .../kpi_unique_private_ips_area.test.ts.snap | 6 +- .../kpi_unique_private_ips_bar.test.ts.snap | 6 +- .../kpi_unique_private_ips_area.test.ts | 6 +- .../kpi_unique_private_ips_bar.test.ts | 6 +- .../network/kpi_unique_private_ips_bar.ts | 6 +- .../kpi_total_users_area.test.ts.snap | 189 ++++++++++++++++++ ...kpi_user_authentications_area.test.ts.snap | 6 +- .../kpi_user_authentications_bar.test.ts.snap | 11 +- .../users/kpi_total_users_area.test.ts | 6 +- .../kpi_user_authentications_area.test.ts | 6 +- .../kpi_user_authentications_bar.test.ts | 6 +- .../use_lens_attributes.test.tsx | 15 +- 21 files changed, 268 insertions(+), 71 deletions(-) diff --git a/x-pack/solutions/security/plugins/security_solution/public/common/components/visualization_actions/lens_attributes/common/__snapshots__/authentication.test.ts.snap b/x-pack/solutions/security/plugins/security_solution/public/common/components/visualization_actions/lens_attributes/common/__snapshots__/authentication.test.ts.snap index 15ef132d3e3d5..4c5601ef3bdf7 100644 --- a/x-pack/solutions/security/plugins/security_solution/public/common/components/visualization_actions/lens_attributes/common/__snapshots__/authentication.test.ts.snap +++ b/x-pack/solutions/security/plugins/security_solution/public/common/components/visualization_actions/lens_attributes/common/__snapshots__/authentication.test.ts.snap @@ -1,6 +1,6 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP -exports[`authenticationLensAttributes should render 1`] = ` +exports[`getAuthenticationLensAttributes should render 1`] = ` Object { "description": "", "references": Array [ @@ -228,7 +228,7 @@ Object { "xAccessor": "b41a2958-650b-470a-84c4-c6fd8f0c6d37", "yConfig": Array [ Object { - "color": "#54b399", + "color": "#54B399", "forAccessor": "5417777d-d9d9-4268-9cdc-eb29b873bd65", }, ], @@ -243,7 +243,7 @@ Object { "xAccessor": "cded27f7-8ef8-458c-8d9b-70db48ae340d", "yConfig": Array [ Object { - "color": "#da8b45", + "color": "#DA8B45", "forAccessor": "a3bf9dc1-c8d2-42d6-9e60-31892a4c509e", }, ], diff --git a/x-pack/solutions/security/plugins/security_solution/public/common/components/visualization_actions/lens_attributes/common/authentication.test.ts b/x-pack/solutions/security/plugins/security_solution/public/common/components/visualization_actions/lens_attributes/common/authentication.test.ts index 6d2b510da4897..f2bb0ca6df1ab 100644 --- a/x-pack/solutions/security/plugins/security_solution/public/common/components/visualization_actions/lens_attributes/common/authentication.test.ts +++ b/x-pack/solutions/security/plugins/security_solution/public/common/components/visualization_actions/lens_attributes/common/authentication.test.ts @@ -10,7 +10,7 @@ import { wrapper } from '../../mocks'; import { useLensAttributes } from '../../use_lens_attributes'; -import { authenticationLensAttributes } from './authentication'; +import { getAuthenticationLensAttributes } from './authentication'; jest.mock('../../../../../sourcerer/containers', () => ({ useSourcererDataView: jest.fn().mockReturnValue({ @@ -31,12 +31,12 @@ jest.mock('../../../../utils/route/use_route_spy', () => ({ ]), })); -describe('authenticationLensAttributes', () => { +describe('getAuthenticationLensAttributes', () => { it('should render', () => { const { result } = renderHook( () => useLensAttributes({ - lensAttributes: authenticationLensAttributes, + getLensAttributes: getAuthenticationLensAttributes, stackByField: 'event.dataset', }), { wrapper } diff --git a/x-pack/solutions/security/plugins/security_solution/public/common/components/visualization_actions/lens_attributes/common/authentication.ts b/x-pack/solutions/security/plugins/security_solution/public/common/components/visualization_actions/lens_attributes/common/authentication.ts index d5f42da5d9b28..fba1eb563caa9 100644 --- a/x-pack/solutions/security/plugins/security_solution/public/common/components/visualization_actions/lens_attributes/common/authentication.ts +++ b/x-pack/solutions/security/plugins/security_solution/public/common/components/visualization_actions/lens_attributes/common/authentication.ts @@ -38,7 +38,7 @@ export const getAuthenticationLensAttributes: GetLensAttributes = ({ euiTheme }) yConfig: [ { forAccessor: '5417777d-d9d9-4268-9cdc-eb29b873bd65', - color: euiTheme.colors.vis.euiColorVis1, + color: euiTheme.colors.vis.euiColorVis0, }, ], }, diff --git a/x-pack/solutions/security/plugins/security_solution/public/common/components/visualization_actions/lens_attributes/hosts/__snapshots__/kpi_host_area.test.ts.snap b/x-pack/solutions/security/plugins/security_solution/public/common/components/visualization_actions/lens_attributes/hosts/__snapshots__/kpi_host_area.test.ts.snap index 1d98d79a0ec2e..afbc567ad3e83 100644 --- a/x-pack/solutions/security/plugins/security_solution/public/common/components/visualization_actions/lens_attributes/hosts/__snapshots__/kpi_host_area.test.ts.snap +++ b/x-pack/solutions/security/plugins/security_solution/public/common/components/visualization_actions/lens_attributes/hosts/__snapshots__/kpi_host_area.test.ts.snap @@ -1,6 +1,6 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP -exports[`kpiHostAreaLensAttributes should render 1`] = ` +exports[`getKpiHostAreaLensAttributes should render 1`] = ` Object { "description": "", "references": Array [ diff --git a/x-pack/solutions/security/plugins/security_solution/public/common/components/visualization_actions/lens_attributes/hosts/__snapshots__/kpi_unique_ips_area.test.ts.snap b/x-pack/solutions/security/plugins/security_solution/public/common/components/visualization_actions/lens_attributes/hosts/__snapshots__/kpi_unique_ips_area.test.ts.snap index f10087899d289..8b7484588030f 100644 --- a/x-pack/solutions/security/plugins/security_solution/public/common/components/visualization_actions/lens_attributes/hosts/__snapshots__/kpi_unique_ips_area.test.ts.snap +++ b/x-pack/solutions/security/plugins/security_solution/public/common/components/visualization_actions/lens_attributes/hosts/__snapshots__/kpi_unique_ips_area.test.ts.snap @@ -1,6 +1,6 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP -exports[`kpiUniqueIpsAreaLensAttributes should render 1`] = ` +exports[`getKpiUniqueIpsAreaLensAttributes should render 1`] = ` Object { "description": "", "references": Array [ @@ -55,20 +55,11 @@ Object { }, "ca05ecdb-0fa4-49a8-9305-b23d91012a46": Object { "columnOrder": Array [ - "f95e74e6-99dd-4b11-8faf-439b4d959df9", + "95e74e6-99dd-4b11-8faf-439b4d959df9", "e7052671-fb9e-481f-8df3-7724c98cfc6f", ], "columns": Object { - "e7052671-fb9e-481f-8df3-7724c98cfc6f": Object { - "customLabel": true, - "dataType": "number", - "isBucketed": false, - "label": "Dest.", - "operationType": "unique_count", - "scale": "ratio", - "sourceField": "destination.ip", - }, - "f95e74e6-99dd-4b11-8faf-439b4d959df9": Object { + "95e74e6-99dd-4b11-8faf-439b4d959df9": Object { "dataType": "date", "isBucketed": true, "label": "@timestamp", @@ -79,6 +70,15 @@ Object { "scale": "interval", "sourceField": "@timestamp", }, + "e7052671-fb9e-481f-8df3-7724c98cfc6f": Object { + "customLabel": true, + "dataType": "number", + "isBucketed": false, + "label": "Dest.", + "operationType": "unique_count", + "scale": "ratio", + "sourceField": "destination.ip", + }, }, "incompleteColumns": Object {}, }, @@ -199,7 +199,7 @@ Object { "xAccessor": "a0cb6400-f708-46c3-ad96-24788f12dae4", "yConfig": Array [ Object { - "color": "#d36186", + "color": "#D36086", "forAccessor": "d9a6eb6b-8b78-439e-98e7-a718f8ffbebe", }, ], @@ -211,10 +211,10 @@ Object { "layerId": "ca05ecdb-0fa4-49a8-9305-b23d91012a46", "layerType": "data", "seriesType": "area", - "xAccessor": "f95e74e6-99dd-4b11-8faf-439b4d959df9", + "xAccessor": "95e74e6-99dd-4b11-8faf-439b4d959df9", "yConfig": Array [ Object { - "color": "#9170b8", + "color": "#9170B8", "forAccessor": "e7052671-fb9e-481f-8df3-7724c98cfc6f", }, ], diff --git a/x-pack/solutions/security/plugins/security_solution/public/common/components/visualization_actions/lens_attributes/hosts/__snapshots__/kpi_unique_ips_bar.test.ts.snap b/x-pack/solutions/security/plugins/security_solution/public/common/components/visualization_actions/lens_attributes/hosts/__snapshots__/kpi_unique_ips_bar.test.ts.snap index 94b51748ade1c..ca3b0722e64df 100644 --- a/x-pack/solutions/security/plugins/security_solution/public/common/components/visualization_actions/lens_attributes/hosts/__snapshots__/kpi_unique_ips_bar.test.ts.snap +++ b/x-pack/solutions/security/plugins/security_solution/public/common/components/visualization_actions/lens_attributes/hosts/__snapshots__/kpi_unique_ips_bar.test.ts.snap @@ -1,6 +1,6 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP -exports[`kpiUniqueIpsBarLensAttributes should render 1`] = ` +exports[`getKpiUniqueIpsBarLensAttributes should render 1`] = ` Object { "description": "", "references": Array [ @@ -212,7 +212,7 @@ Object { "xAccessor": "f8bfa719-5c1c-4bf2-896e-c318d77fc08e", "yConfig": Array [ Object { - "color": "#d36186", + "color": "#D36086", "forAccessor": "32f66676-f4e1-48fd-b7f8-d4de38318601", }, ], @@ -227,7 +227,7 @@ Object { "xAccessor": "c72aad6a-fc9c-43dc-9194-e13ca3ee8aff", "yConfig": Array [ Object { - "color": "#9170b8", + "color": "#9170B8", "forAccessor": "b7e59b08-96e6-40d1-84fd-e97b977d1c47", }, ], diff --git a/x-pack/solutions/security/plugins/security_solution/public/common/components/visualization_actions/lens_attributes/hosts/kpi_host_area.test.ts b/x-pack/solutions/security/plugins/security_solution/public/common/components/visualization_actions/lens_attributes/hosts/kpi_host_area.test.ts index 6ab9c4b599057..11fa4d2bc2042 100644 --- a/x-pack/solutions/security/plugins/security_solution/public/common/components/visualization_actions/lens_attributes/hosts/kpi_host_area.test.ts +++ b/x-pack/solutions/security/plugins/security_solution/public/common/components/visualization_actions/lens_attributes/hosts/kpi_host_area.test.ts @@ -10,7 +10,7 @@ import { wrapper } from '../../mocks'; import { useLensAttributes } from '../../use_lens_attributes'; -import { kpiHostAreaLensAttributes } from './kpi_host_area'; +import { getKpiHostAreaLensAttributes } from './kpi_host_area'; jest.mock('../../../../../sourcerer/containers', () => ({ useSourcererDataView: jest.fn().mockReturnValue({ @@ -31,12 +31,12 @@ jest.mock('../../../../utils/route/use_route_spy', () => ({ ]), })); -describe('kpiHostAreaLensAttributes', () => { +describe('getKpiHostAreaLensAttributes', () => { it('should render', () => { const { result } = renderHook( () => useLensAttributes({ - lensAttributes: kpiHostAreaLensAttributes, + getLensAttributes: getKpiHostAreaLensAttributes, stackByField: 'event.dataset', }), { wrapper } diff --git a/x-pack/solutions/security/plugins/security_solution/public/common/components/visualization_actions/lens_attributes/hosts/kpi_unique_ips_area.test.ts b/x-pack/solutions/security/plugins/security_solution/public/common/components/visualization_actions/lens_attributes/hosts/kpi_unique_ips_area.test.ts index 003176c784c17..2410aa97ce3b3 100644 --- a/x-pack/solutions/security/plugins/security_solution/public/common/components/visualization_actions/lens_attributes/hosts/kpi_unique_ips_area.test.ts +++ b/x-pack/solutions/security/plugins/security_solution/public/common/components/visualization_actions/lens_attributes/hosts/kpi_unique_ips_area.test.ts @@ -10,7 +10,7 @@ import { wrapper } from '../../mocks'; import { useLensAttributes } from '../../use_lens_attributes'; -import { kpiUniqueIpsAreaLensAttributes } from './kpi_unique_ips_area'; +import { getKpiUniqueIpsAreaLensAttributes } from './kpi_unique_ips_area'; jest.mock('../../../../../sourcerer/containers', () => ({ useSourcererDataView: jest.fn().mockReturnValue({ @@ -31,12 +31,12 @@ jest.mock('../../../../utils/route/use_route_spy', () => ({ ]), })); -describe('kpiUniqueIpsAreaLensAttributes', () => { +describe('getKpiUniqueIpsAreaLensAttributes', () => { it('should render', () => { const { result } = renderHook( () => useLensAttributes({ - lensAttributes: kpiUniqueIpsAreaLensAttributes, + getLensAttributes: getKpiUniqueIpsAreaLensAttributes, stackByField: 'event.dataset', }), { wrapper } diff --git a/x-pack/solutions/security/plugins/security_solution/public/common/components/visualization_actions/lens_attributes/hosts/kpi_unique_ips_bar.test.ts b/x-pack/solutions/security/plugins/security_solution/public/common/components/visualization_actions/lens_attributes/hosts/kpi_unique_ips_bar.test.ts index 5121aab8bf8bf..02482ade69b92 100644 --- a/x-pack/solutions/security/plugins/security_solution/public/common/components/visualization_actions/lens_attributes/hosts/kpi_unique_ips_bar.test.ts +++ b/x-pack/solutions/security/plugins/security_solution/public/common/components/visualization_actions/lens_attributes/hosts/kpi_unique_ips_bar.test.ts @@ -10,7 +10,7 @@ import { wrapper } from '../../mocks'; import { useLensAttributes } from '../../use_lens_attributes'; -import { kpiUniqueIpsBarLensAttributes } from './kpi_unique_ips_bar'; +import { getKpiUniqueIpsBarLensAttributes } from './kpi_unique_ips_bar'; jest.mock('../../../../../sourcerer/containers', () => ({ useSourcererDataView: jest.fn().mockReturnValue({ @@ -31,12 +31,12 @@ jest.mock('../../../../utils/route/use_route_spy', () => ({ ]), })); -describe('kpiUniqueIpsBarLensAttributes', () => { +describe('getKpiUniqueIpsBarLensAttributes', () => { it('should render', () => { const { result } = renderHook( () => useLensAttributes({ - lensAttributes: kpiUniqueIpsBarLensAttributes, + getLensAttributes: getKpiUniqueIpsBarLensAttributes, stackByField: 'event.dataset', }), { wrapper } diff --git a/x-pack/solutions/security/plugins/security_solution/public/common/components/visualization_actions/lens_attributes/network/__snapshots__/kpi_unique_private_ips_area.test.ts.snap b/x-pack/solutions/security/plugins/security_solution/public/common/components/visualization_actions/lens_attributes/network/__snapshots__/kpi_unique_private_ips_area.test.ts.snap index 71722765d8314..6f3ad179027b1 100644 --- a/x-pack/solutions/security/plugins/security_solution/public/common/components/visualization_actions/lens_attributes/network/__snapshots__/kpi_unique_private_ips_area.test.ts.snap +++ b/x-pack/solutions/security/plugins/security_solution/public/common/components/visualization_actions/lens_attributes/network/__snapshots__/kpi_unique_private_ips_area.test.ts.snap @@ -1,6 +1,6 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP -exports[`kpiUniquePrivateIpsAreaLensAttributes should render 1`] = ` +exports[`getKpiUniquePrivateIpsAreaLensAttributes should render 1`] = ` Object { "description": "", "references": Array [ @@ -223,7 +223,7 @@ Object { "xAccessor": "662cd5e5-82bf-4325-a703-273f84b97e09", "yConfig": Array [ Object { - "color": "#d36186", + "color": "#D36086", "forAccessor": "5f317308-cfbb-4ee5-bfb9-07653184fabf", }, ], @@ -238,7 +238,7 @@ Object { "xAccessor": "36444b8c-7e10-4069-8298-6c1b46912be2", "yConfig": Array [ Object { - "color": "#9170b8", + "color": "#9170B8", "forAccessor": "ac1eb80c-ddde-46c4-a90c-400261926762", }, ], diff --git a/x-pack/solutions/security/plugins/security_solution/public/common/components/visualization_actions/lens_attributes/network/__snapshots__/kpi_unique_private_ips_bar.test.ts.snap b/x-pack/solutions/security/plugins/security_solution/public/common/components/visualization_actions/lens_attributes/network/__snapshots__/kpi_unique_private_ips_bar.test.ts.snap index 17d65402506f1..085370093e9eb 100644 --- a/x-pack/solutions/security/plugins/security_solution/public/common/components/visualization_actions/lens_attributes/network/__snapshots__/kpi_unique_private_ips_bar.test.ts.snap +++ b/x-pack/solutions/security/plugins/security_solution/public/common/components/visualization_actions/lens_attributes/network/__snapshots__/kpi_unique_private_ips_bar.test.ts.snap @@ -1,6 +1,6 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP -exports[`kpiUniquePrivateIpsBarLensAttributes should render 1`] = ` +exports[`getKpiUniquePrivateIpsBarLensAttributes should render 1`] = ` Object { "description": "", "references": Array [ @@ -238,7 +238,7 @@ Object { "xAccessor": "d9c438c5-f776-4436-9d20-d62dc8c03be8", "yConfig": Array [ Object { - "color": "#d36186", + "color": "#D36086", "forAccessor": "5acd4c9d-dc3b-4b21-9632-e4407944c36d", }, ], @@ -253,7 +253,7 @@ Object { "xAccessor": "4607c585-3af3-43b9-804f-e49b27796d79", "yConfig": Array [ Object { - "color": "#9170b8", + "color": "#9170B8", "forAccessor": "d27e0966-daf9-41f4-9033-230cf1e76dc9", }, ], diff --git a/x-pack/solutions/security/plugins/security_solution/public/common/components/visualization_actions/lens_attributes/network/kpi_unique_private_ips_area.test.ts b/x-pack/solutions/security/plugins/security_solution/public/common/components/visualization_actions/lens_attributes/network/kpi_unique_private_ips_area.test.ts index 9ac8d9733d157..c133f337a8a4d 100644 --- a/x-pack/solutions/security/plugins/security_solution/public/common/components/visualization_actions/lens_attributes/network/kpi_unique_private_ips_area.test.ts +++ b/x-pack/solutions/security/plugins/security_solution/public/common/components/visualization_actions/lens_attributes/network/kpi_unique_private_ips_area.test.ts @@ -10,7 +10,7 @@ import { wrapper } from '../../mocks'; import { useLensAttributes } from '../../use_lens_attributes'; -import { kpiUniquePrivateIpsAreaLensAttributes } from './kpi_unique_private_ips_area'; +import { getKpiUniquePrivateIpsAreaLensAttributes } from './kpi_unique_private_ips_area'; jest.mock('../../../../../sourcerer/containers', () => ({ useSourcererDataView: jest.fn().mockReturnValue({ @@ -31,12 +31,12 @@ jest.mock('../../../../utils/route/use_route_spy', () => ({ ]), })); -describe('kpiUniquePrivateIpsAreaLensAttributes', () => { +describe('getKpiUniquePrivateIpsAreaLensAttributes', () => { it('should render', () => { const { result } = renderHook( () => useLensAttributes({ - lensAttributes: kpiUniquePrivateIpsAreaLensAttributes, + getLensAttributes: getKpiUniquePrivateIpsAreaLensAttributes, stackByField: 'event.dataset', }), { wrapper } diff --git a/x-pack/solutions/security/plugins/security_solution/public/common/components/visualization_actions/lens_attributes/network/kpi_unique_private_ips_bar.test.ts b/x-pack/solutions/security/plugins/security_solution/public/common/components/visualization_actions/lens_attributes/network/kpi_unique_private_ips_bar.test.ts index 25fc271e7ef62..1fb039a7555e7 100644 --- a/x-pack/solutions/security/plugins/security_solution/public/common/components/visualization_actions/lens_attributes/network/kpi_unique_private_ips_bar.test.ts +++ b/x-pack/solutions/security/plugins/security_solution/public/common/components/visualization_actions/lens_attributes/network/kpi_unique_private_ips_bar.test.ts @@ -10,7 +10,7 @@ import { wrapper } from '../../mocks'; import { useLensAttributes } from '../../use_lens_attributes'; -import { kpiUniquePrivateIpsBarLensAttributes } from './kpi_unique_private_ips_bar'; +import { getKpiUniquePrivateIpsBarLensAttributes } from './kpi_unique_private_ips_bar'; jest.mock('../../../../../sourcerer/containers', () => ({ useSourcererDataView: jest.fn().mockReturnValue({ @@ -31,12 +31,12 @@ jest.mock('../../../../utils/route/use_route_spy', () => ({ ]), })); -describe('kpiUniquePrivateIpsBarLensAttributes', () => { +describe('getKpiUniquePrivateIpsBarLensAttributes', () => { it('should render', () => { const { result } = renderHook( () => useLensAttributes({ - lensAttributes: kpiUniquePrivateIpsBarLensAttributes, + getLensAttributes: getKpiUniquePrivateIpsBarLensAttributes, stackByField: 'event.dataset', }), { wrapper } diff --git a/x-pack/solutions/security/plugins/security_solution/public/common/components/visualization_actions/lens_attributes/network/kpi_unique_private_ips_bar.ts b/x-pack/solutions/security/plugins/security_solution/public/common/components/visualization_actions/lens_attributes/network/kpi_unique_private_ips_bar.ts index 3c98a21ddcf10..6ce1703877d01 100644 --- a/x-pack/solutions/security/plugins/security_solution/public/common/components/visualization_actions/lens_attributes/network/kpi_unique_private_ips_bar.ts +++ b/x-pack/solutions/security/plugins/security_solution/public/common/components/visualization_actions/lens_attributes/network/kpi_unique_private_ips_bar.ts @@ -17,7 +17,7 @@ const columnDestinationIpFilter = '4607c585-3af3-43b9-804f-e49b27796d79'; const layerSourceIp = 'e406bf4f-942b-41ac-b516-edb5cef06ec8'; const layerDestinationIp = '38aa6532-6bf9-4c8f-b2a6-da8d32f7d0d7'; -export const getKpiUniquePrivateIpsBarLensAttributes: GetLensAttributes = ({ colorSchemas }) => { +export const getKpiUniquePrivateIpsBarLensAttributes: GetLensAttributes = ({ euiTheme }) => { return { title: '[Network] Unique private IPs - bar chart', description: '', @@ -69,7 +69,7 @@ export const getKpiUniquePrivateIpsBarLensAttributes: GetLensAttributes = ({ col yConfig: [ { forAccessor: columnSourceIp, - color: colorSchemas?.['source.ip'], + color: euiTheme.colors.vis.euiColorVis2, }, ], xAccessor: columnSourceIpFilter, @@ -82,7 +82,7 @@ export const getKpiUniquePrivateIpsBarLensAttributes: GetLensAttributes = ({ col yConfig: [ { forAccessor: columnDestinationIp, - color: colorSchemas?.['destination.ip'], + color: euiTheme.colors.vis.euiColorVis3, }, ], xAccessor: columnDestinationIpFilter, diff --git a/x-pack/solutions/security/plugins/security_solution/public/common/components/visualization_actions/lens_attributes/users/__snapshots__/kpi_total_users_area.test.ts.snap b/x-pack/solutions/security/plugins/security_solution/public/common/components/visualization_actions/lens_attributes/users/__snapshots__/kpi_total_users_area.test.ts.snap index c1082249eaf09..6d5bb905ee61b 100644 --- a/x-pack/solutions/security/plugins/security_solution/public/common/components/visualization_actions/lens_attributes/users/__snapshots__/kpi_total_users_area.test.ts.snap +++ b/x-pack/solutions/security/plugins/security_solution/public/common/components/visualization_actions/lens_attributes/users/__snapshots__/kpi_total_users_area.test.ts.snap @@ -1,5 +1,194 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP +exports[`getKpiTotalUsersAreaLensAttributes should render 1`] = ` +Object { + "description": "", + "references": Array [ + Object { + "id": "security-solution-my-test", + "name": "indexpattern-datasource-current-indexpattern", + "type": "index-pattern", + }, + Object { + "id": "security-solution-my-test", + "name": "indexpattern-datasource-layer-416b6fad-1923-4f6a-a2df-b223bb287e30", + "type": "index-pattern", + }, + ], + "state": Object { + "datasourceStates": Object { + "formBased": Object { + "layers": Object { + "416b6fad-1923-4f6a-a2df-b223bb287e30": Object { + "columnOrder": Array [ + "5eea817b-67b7-4268-8ecb-7688d1094721", + "b00c65ea-32be-4163-bfc8-f795b1ef9d06", + ], + "columns": Object { + "5eea817b-67b7-4268-8ecb-7688d1094721": Object { + "dataType": "date", + "isBucketed": true, + "label": "@timestamp", + "operationType": "date_histogram", + "params": Object { + "interval": "auto", + }, + "scale": "interval", + "sourceField": "@timestamp", + }, + "b00c65ea-32be-4163-bfc8-f795b1ef9d06": Object { + "customLabel": true, + "dataType": "number", + "isBucketed": false, + "label": "Unique count of user.name", + "operationType": "unique_count", + "scale": "ratio", + "sourceField": "user.name", + }, + }, + "incompleteColumns": Object {}, + }, + }, + }, + }, + "filters": Array [ + Object { + "meta": Object { + "alias": null, + "disabled": false, + "key": "user.name", + "negate": false, + "params": Object { + "query": "elastic", + }, + "type": "phrase", + }, + "query": Object { + "match_phrase": Object { + "user.name": "elastic", + }, + }, + }, + Object { + "meta": Object { + "alias": "", + "disabled": false, + "key": "bool", + "negate": false, + "type": "custom", + "value": "{\\"query\\": {\\"bool\\": {\\"filter\\": [{\\"bool\\": {\\"should\\": [{\\"exists\\": {\\"field\\": \\"user.name\\"}}],\\"minimum_should_match\\": 1}}]}}}", + }, + "query": Object { + "bool": Object { + "minimum_should_match": 1, + "should": Array [ + Object { + "exists": Object { + "field": "user.name", + }, + }, + ], + }, + }, + }, + Object { + "meta": Object { + "alias": null, + "disabled": false, + "key": "_index", + "negate": false, + "params": Array [ + "auditbeat-mytest-*", + ], + "type": "phrases", + }, + "query": Object { + "bool": Object { + "minimum_should_match": 1, + "should": Array [ + Object { + "match_phrase": Object { + "_index": "auditbeat-mytest-*", + }, + }, + ], + }, + }, + }, + Object { + "meta": Object { + "alias": null, + "disabled": false, + "key": "host.id", + "negate": false, + "params": Object { + "query": "123", + }, + "type": "phrase", + }, + "query": Object { + "match_phrase": Object { + "host.id": "123", + }, + }, + }, + ], + "query": Object { + "language": "kql", + "query": "host.name: *", + }, + "visualization": Object { + "axisTitlesVisibilitySettings": Object { + "x": false, + "yLeft": false, + "yRight": false, + }, + "fittingFunction": "None", + "gridlinesVisibilitySettings": Object { + "x": true, + "yLeft": true, + "yRight": true, + }, + "labelsOrientation": Object { + "x": 0, + "yLeft": 0, + "yRight": 0, + }, + "layers": Array [ + Object { + "accessors": Array [ + "b00c65ea-32be-4163-bfc8-f795b1ef9d06", + ], + "layerId": "416b6fad-1923-4f6a-a2df-b223bb287e30", + "layerType": "data", + "seriesType": "area", + "xAccessor": "5eea817b-67b7-4268-8ecb-7688d1094721", + }, + ], + "legend": Object { + "isVisible": true, + "position": "right", + }, + "preferredSeriesType": "area", + "tickLabelsVisibilitySettings": Object { + "x": true, + "yLeft": true, + "yRight": true, + }, + "valueLabels": "hide", + "yLeftExtent": Object { + "mode": "full", + }, + "yRightExtent": Object { + "mode": "full", + }, + }, + }, + "title": "[User] Users - area", + "visualizationType": "lnsXY", +} +`; + exports[`kpiTotalUsersAreaLensAttributes should render 1`] = ` Object { "description": "", diff --git a/x-pack/solutions/security/plugins/security_solution/public/common/components/visualization_actions/lens_attributes/users/__snapshots__/kpi_user_authentications_area.test.ts.snap b/x-pack/solutions/security/plugins/security_solution/public/common/components/visualization_actions/lens_attributes/users/__snapshots__/kpi_user_authentications_area.test.ts.snap index 1aff234b94837..870f3980a0203 100644 --- a/x-pack/solutions/security/plugins/security_solution/public/common/components/visualization_actions/lens_attributes/users/__snapshots__/kpi_user_authentications_area.test.ts.snap +++ b/x-pack/solutions/security/plugins/security_solution/public/common/components/visualization_actions/lens_attributes/users/__snapshots__/kpi_user_authentications_area.test.ts.snap @@ -1,6 +1,6 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP -exports[`kpiUserAuthenticationsAreaLensAttributes should render 1`] = ` +exports[`getKpiUserAuthenticationsAreaLensAttributes should render 1`] = ` Object { "description": "", "references": Array [ @@ -232,7 +232,7 @@ Object { "xAccessor": "49a42fe6-ebe8-4adb-8eed-1966a5297b7e", "yConfig": Array [ Object { - "color": "#54b399", + "color": "#54B399", "forAccessor": "0eb97c09-a351-4280-97da-944e4bd30dd7", }, ], @@ -247,7 +247,7 @@ Object { "xAccessor": "33a6163d-0c0a-451d-aa38-8ca6010dd5bf", "yConfig": Array [ Object { - "color": "#e7664c", + "color": "#E7664C", "forAccessor": "2b27c80e-a20d-46f1-8fb2-79626ef4563c", }, ], diff --git a/x-pack/solutions/security/plugins/security_solution/public/common/components/visualization_actions/lens_attributes/users/__snapshots__/kpi_user_authentications_bar.test.ts.snap b/x-pack/solutions/security/plugins/security_solution/public/common/components/visualization_actions/lens_attributes/users/__snapshots__/kpi_user_authentications_bar.test.ts.snap index 719fa4f10c326..d2e685d8e6088 100644 --- a/x-pack/solutions/security/plugins/security_solution/public/common/components/visualization_actions/lens_attributes/users/__snapshots__/kpi_user_authentications_bar.test.ts.snap +++ b/x-pack/solutions/security/plugins/security_solution/public/common/components/visualization_actions/lens_attributes/users/__snapshots__/kpi_user_authentications_bar.test.ts.snap @@ -1,6 +1,6 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP -exports[`kpiUserAuthenticationsBarLensAttributes should render 1`] = ` +exports[`getKpiUserAuthenticationsBarLensAttributes should render 1`] = ` Object { "description": "", "references": Array [ @@ -235,7 +235,12 @@ Object { "layerType": "data", "seriesType": "bar_horizontal_stacked", "xAccessor": "430e690c-9992-414f-9bce-00812d99a5e7", - "yConfig": Array [], + "yConfig": Array [ + Object { + "color": "#54B399", + "forAccessor": "938b445a-a291-4bbc-84fe-4f47b69c20e4", + }, + ], }, Object { "accessors": Array [ @@ -247,7 +252,7 @@ Object { "xAccessor": "e959c351-a3a2-4525-b244-9623f215a8fd", "yConfig": Array [ Object { - "color": "#e7664c", + "color": "#E7664C", "forAccessor": "c8165fc3-7180-4f1b-8c87-bc3ea04c6df7", }, ], diff --git a/x-pack/solutions/security/plugins/security_solution/public/common/components/visualization_actions/lens_attributes/users/kpi_total_users_area.test.ts b/x-pack/solutions/security/plugins/security_solution/public/common/components/visualization_actions/lens_attributes/users/kpi_total_users_area.test.ts index a34e98b70e607..5e9ab23d59acd 100644 --- a/x-pack/solutions/security/plugins/security_solution/public/common/components/visualization_actions/lens_attributes/users/kpi_total_users_area.test.ts +++ b/x-pack/solutions/security/plugins/security_solution/public/common/components/visualization_actions/lens_attributes/users/kpi_total_users_area.test.ts @@ -10,7 +10,7 @@ import { wrapper } from '../../mocks'; import { useLensAttributes } from '../../use_lens_attributes'; -import { kpiTotalUsersAreaLensAttributes } from './kpi_total_users_area'; +import { getKpiTotalUsersAreaLensAttributes } from './kpi_total_users_area'; jest.mock('../../../../../sourcerer/containers', () => ({ useSourcererDataView: jest.fn().mockReturnValue({ @@ -31,12 +31,12 @@ jest.mock('../../../../utils/route/use_route_spy', () => ({ ]), })); -describe('kpiTotalUsersAreaLensAttributes', () => { +describe('getKpiTotalUsersAreaLensAttributes', () => { it('should render', () => { const { result } = renderHook( () => useLensAttributes({ - lensAttributes: kpiTotalUsersAreaLensAttributes, + getLensAttributes: getKpiTotalUsersAreaLensAttributes, stackByField: 'event.dataset', }), { wrapper } diff --git a/x-pack/solutions/security/plugins/security_solution/public/common/components/visualization_actions/lens_attributes/users/kpi_user_authentications_area.test.ts b/x-pack/solutions/security/plugins/security_solution/public/common/components/visualization_actions/lens_attributes/users/kpi_user_authentications_area.test.ts index 599ceb9745f53..50366a508ef07 100644 --- a/x-pack/solutions/security/plugins/security_solution/public/common/components/visualization_actions/lens_attributes/users/kpi_user_authentications_area.test.ts +++ b/x-pack/solutions/security/plugins/security_solution/public/common/components/visualization_actions/lens_attributes/users/kpi_user_authentications_area.test.ts @@ -10,7 +10,7 @@ import { wrapper } from '../../mocks'; import { useLensAttributes } from '../../use_lens_attributes'; -import { kpiUserAuthenticationsAreaLensAttributes } from './kpi_user_authentications_area'; +import { getKpiUserAuthenticationsAreaLensAttributes } from './kpi_user_authentications_area'; jest.mock('../../../../../sourcerer/containers', () => ({ useSourcererDataView: jest.fn().mockReturnValue({ @@ -31,12 +31,12 @@ jest.mock('../../../../utils/route/use_route_spy', () => ({ ]), })); -describe('kpiUserAuthenticationsAreaLensAttributes', () => { +describe('getKpiUserAuthenticationsAreaLensAttributes', () => { it('should render', () => { const { result } = renderHook( () => useLensAttributes({ - lensAttributes: kpiUserAuthenticationsAreaLensAttributes, + getLensAttributes: getKpiUserAuthenticationsAreaLensAttributes, stackByField: 'event.dataset', }), { wrapper } diff --git a/x-pack/solutions/security/plugins/security_solution/public/common/components/visualization_actions/lens_attributes/users/kpi_user_authentications_bar.test.ts b/x-pack/solutions/security/plugins/security_solution/public/common/components/visualization_actions/lens_attributes/users/kpi_user_authentications_bar.test.ts index 2231459b347ed..15f70c8485278 100644 --- a/x-pack/solutions/security/plugins/security_solution/public/common/components/visualization_actions/lens_attributes/users/kpi_user_authentications_bar.test.ts +++ b/x-pack/solutions/security/plugins/security_solution/public/common/components/visualization_actions/lens_attributes/users/kpi_user_authentications_bar.test.ts @@ -10,7 +10,7 @@ import { wrapper } from '../../mocks'; import { useLensAttributes } from '../../use_lens_attributes'; -import { kpiUserAuthenticationsBarLensAttributes } from './kpi_user_authentications_bar'; +import { getKpiUserAuthenticationsBarLensAttributes } from './kpi_user_authentications_bar'; jest.mock('../../../../../sourcerer/containers', () => ({ useSourcererDataView: jest.fn().mockReturnValue({ @@ -31,12 +31,12 @@ jest.mock('../../../../utils/route/use_route_spy', () => ({ ]), })); -describe('kpiUserAuthenticationsBarLensAttributes', () => { +describe('getKpiUserAuthenticationsBarLensAttributes', () => { it('should render', () => { const { result } = renderHook( () => useLensAttributes({ - lensAttributes: kpiUserAuthenticationsBarLensAttributes, + getLensAttributes: getKpiUserAuthenticationsBarLensAttributes, stackByField: 'event.dataset', }), { wrapper } diff --git a/x-pack/solutions/security/plugins/security_solution/public/common/components/visualization_actions/use_lens_attributes.test.tsx b/x-pack/solutions/security/plugins/security_solution/public/common/components/visualization_actions/use_lens_attributes.test.tsx index 3d6bb712e9d93..f469c0ffd393d 100644 --- a/x-pack/solutions/security/plugins/security_solution/public/common/components/visualization_actions/use_lens_attributes.test.tsx +++ b/x-pack/solutions/security/plugins/security_solution/public/common/components/visualization_actions/use_lens_attributes.test.tsx @@ -24,12 +24,15 @@ import { useRouteSpy } from '../../utils/route/use_route_spy'; import { SecurityPageName } from '../../../app/types'; import type { Query } from '@kbn/es-query'; import { getEventsHistogramLensAttributes } from './lens_attributes/common/events'; +import type { EuiThemeComputed } from '@elastic/eui'; jest.mock('../../../sourcerer/containers'); jest.mock('../../utils/route/use_route_spy', () => ({ useRouteSpy: jest.fn(), })); - +const params = { + euiTheme: {} as EuiThemeComputed, +}; describe('useLensAttributes', () => { beforeEach(() => { (useSourcererDataView as jest.Mock).mockReturnValue({ @@ -71,7 +74,7 @@ describe('useLensAttributes', () => { ); expect(result?.current?.state.filters).toEqual([ - ...getExternalAlertLensAttributes().state.filters, + ...getExternalAlertLensAttributes(params).state.filters, ...getDetailsPageFilter('hosts', 'mockHost'), ...fieldNameExistsFilter('hosts'), ...getIndexFilters(['auditbeat-*']), @@ -97,7 +100,7 @@ describe('useLensAttributes', () => { ); expect(result?.current?.state.filters).toEqual([ - ...getExternalAlertLensAttributes().state.filters, + ...getExternalAlertLensAttributes(params).state.filters, ...getNetworkDetailsPageFilter('192.168.1.1'), ...sourceOrDestinationIpExistsFilter, ...getIndexFilters(['auditbeat-*']), @@ -123,7 +126,7 @@ describe('useLensAttributes', () => { ); expect(result?.current?.state.filters).toEqual([ - ...getExternalAlertLensAttributes().state.filters, + ...getExternalAlertLensAttributes(params).state.filters, ...getDetailsPageFilter('user', 'elastic'), ...getIndexFilters(['auditbeat-*']), ...filterFromSearchBar, @@ -151,7 +154,7 @@ describe('useLensAttributes', () => { expect((result?.current?.state.query as Query).query).toEqual(''); expect(result?.current?.state.filters).toEqual([ - ...getExternalAlertLensAttributes().state.filters, + ...getExternalAlertLensAttributes(params).state.filters, ...getIndexFilters(['auditbeat-*']), ]); }); @@ -175,7 +178,7 @@ describe('useLensAttributes', () => { ); expect(result?.current?.state.filters).toEqual([ - ...getExternalAlertLensAttributes().state.filters, + ...getExternalAlertLensAttributes(params).state.filters, ...getIndexFilters(['auditbeat-*']), ...filterFromSearchBar, ]); From f3160833f2e36c8b3d3b5b1a5ef1b9a00336cf8e Mon Sep 17 00:00:00 2001 From: Angela Chuang Date: Wed, 18 Dec 2024 15:29:23 +0000 Subject: [PATCH 06/15] use color tokens from useEuiTheme --- .../common/components/charts/barchart.tsx | 7 ++- .../components/matrix_histogram/utils.ts | 14 ------ .../group_panel_renderers.tsx | 46 ++++++++++--------- 3 files changed, 28 insertions(+), 39 deletions(-) diff --git a/x-pack/solutions/security/plugins/security_solution/public/common/components/charts/barchart.tsx b/x-pack/solutions/security/plugins/security_solution/public/common/components/charts/barchart.tsx index 9ccfd5124a635..2e63ce6f2af07 100644 --- a/x-pack/solutions/security/plugins/security_solution/public/common/components/charts/barchart.tsx +++ b/x-pack/solutions/security/plugins/security_solution/public/common/components/charts/barchart.tsx @@ -5,7 +5,7 @@ * 2.0. */ -import { EuiFlexItem } from '@elastic/eui'; +import { EuiFlexItem, useEuiTheme } from '@elastic/eui'; import React, { useMemo } from 'react'; import { i18n } from '@kbn/i18n'; import type { SettingsProps } from '@elastic/charts'; @@ -18,7 +18,6 @@ import deepEqual from 'fast-deep-equal'; import { escapeDataProviderId } from '../drag_and_drop/helpers'; import { useTimeZone } from '../../lib/kibana'; -import { defaultLegendColors } from '../matrix_histogram/utils'; import { useThrottledResizeObserver } from '../utils'; import { hasValueToDisplay } from '../../utils/validators'; import { EMPTY_VALUE_LABEL } from './translation'; @@ -192,8 +191,8 @@ export const BarChartComponent: React.FC = ({ const legendItems: LegendItem[] = useMemo( () => barChart != null && stackByField != null - ? barChart.map((d, i) => ({ - color: d.color ?? (i < defaultLegendColors.length ? defaultLegendColors[i] : undefined), + ? barChart.map((d) => ({ + color: d.color, dataProviderId: escapeDataProviderId( `draggable-legend-item-${uuidv4()}-${stackByField}-${d.key}` ), diff --git a/x-pack/solutions/security/plugins/security_solution/public/common/components/matrix_histogram/utils.ts b/x-pack/solutions/security/plugins/security_solution/public/common/components/matrix_histogram/utils.ts index 7c5f01d26ebdb..674ec74ae9fc7 100644 --- a/x-pack/solutions/security/plugins/security_solution/public/common/components/matrix_histogram/utils.ts +++ b/x-pack/solutions/security/plugins/security_solution/public/common/components/matrix_histogram/utils.ts @@ -7,17 +7,3 @@ export const DEFAULT_CHART_HEIGHT = 174; export const DEFAULT_Y_TICK_FORMATTER = (value: string | number): string => value.toLocaleString(); - -export const defaultLegendColors = [ - '#1EA593', - '#2B70F7', - '#CE0060', - '#38007E', - '#FCA5D3', - '#F37020', - '#E49E29', - '#B0916F', - '#7B000B', - '#34130C', - '#GGGGGG', -]; diff --git a/x-pack/solutions/security/plugins/security_solution/public/detections/components/alerts_table/grouping_settings/group_panel_renderers.tsx b/x-pack/solutions/security/plugins/security_solution/public/detections/components/alerts_table/grouping_settings/group_panel_renderers.tsx index cd858b74399a2..a89f0d5a584ec 100644 --- a/x-pack/solutions/security/plugins/security_solution/public/detections/components/alerts_table/grouping_settings/group_panel_renderers.tsx +++ b/x-pack/solutions/security/plugins/security_solution/public/detections/components/alerts_table/grouping_settings/group_panel_renderers.tsx @@ -15,6 +15,7 @@ import { EuiText, EuiTextColor, EuiTitle, + useEuiTheme, } from '@elastic/eui'; import { euiThemeVars } from '@kbn/ui-theme'; import { isArray } from 'lodash/fp'; @@ -94,30 +95,33 @@ const RuleNameGroupContent = React.memo<{ RuleNameGroupContent.displayName = 'RuleNameGroup'; const HostNameGroupContent = React.memo<{ hostName: string | string[]; nullGroupMessage?: string }>( - ({ hostName, nullGroupMessage }) => ( - - - - + ({ hostName, nullGroupMessage }) => { + const { euiTheme } = useEuiTheme(); + return ( + + + + - - -
{hostName}
- - - {nullGroupMessage && ( - + +
{hostName}
+ - )} - - ) + {nullGroupMessage && ( + + + + )} + + ); + } ); HostNameGroupContent.displayName = 'HostNameGroupContent'; From b2fe0d90e892a6a7cc079b88757f31ec1149d09a Mon Sep 17 00:00:00 2001 From: kibanamachine <42973632+kibanamachine@users.noreply.github.com> Date: Wed, 18 Dec 2024 16:00:41 +0000 Subject: [PATCH 07/15] [CI] Auto-commit changed files from 'node scripts/eslint --no-cache --fix' --- .../public/common/components/charts/barchart.tsx | 2 +- .../components/alerts_kpis/severity_level_panel/columns.tsx | 2 +- .../detection_response/host_alerts_table/host_alerts_table.tsx | 3 +-- 3 files changed, 3 insertions(+), 4 deletions(-) diff --git a/x-pack/solutions/security/plugins/security_solution/public/common/components/charts/barchart.tsx b/x-pack/solutions/security/plugins/security_solution/public/common/components/charts/barchart.tsx index 2e63ce6f2af07..526261d13bca6 100644 --- a/x-pack/solutions/security/plugins/security_solution/public/common/components/charts/barchart.tsx +++ b/x-pack/solutions/security/plugins/security_solution/public/common/components/charts/barchart.tsx @@ -5,7 +5,7 @@ * 2.0. */ -import { EuiFlexItem, useEuiTheme } from '@elastic/eui'; +import { EuiFlexItem } from '@elastic/eui'; import React, { useMemo } from 'react'; import { i18n } from '@kbn/i18n'; import type { SettingsProps } from '@elastic/charts'; diff --git a/x-pack/solutions/security/plugins/security_solution/public/detections/components/alerts_kpis/severity_level_panel/columns.tsx b/x-pack/solutions/security/plugins/security_solution/public/detections/components/alerts_kpis/severity_level_panel/columns.tsx index 71e4513ae326e..9e5be98c8a7e3 100644 --- a/x-pack/solutions/security/plugins/security_solution/public/detections/components/alerts_kpis/severity_level_panel/columns.tsx +++ b/x-pack/solutions/security/plugins/security_solution/public/detections/components/alerts_kpis/severity_level_panel/columns.tsx @@ -6,7 +6,7 @@ */ import React from 'react'; import { EuiHealth, EuiText, useEuiTheme } from '@elastic/eui'; -import { capitalize, get as _get } from 'lodash'; +import { capitalize } from 'lodash'; import { ALERT_SEVERITY } from '@kbn/rule-data-utils'; import type { EuiBasicTableColumn } from '@elastic/eui'; import type { Severity } from '@kbn/securitysolution-io-ts-alerting-types'; diff --git a/x-pack/solutions/security/plugins/security_solution/public/overview/components/detection_response/host_alerts_table/host_alerts_table.tsx b/x-pack/solutions/security/plugins/security_solution/public/overview/components/detection_response/host_alerts_table/host_alerts_table.tsx index 462a04f7211b5..9b66c74473a86 100644 --- a/x-pack/solutions/security/plugins/security_solution/public/overview/components/detection_response/host_alerts_table/host_alerts_table.tsx +++ b/x-pack/solutions/security/plugins/security_solution/public/overview/components/detection_response/host_alerts_table/host_alerts_table.tsx @@ -21,7 +21,6 @@ import { } from '@elastic/eui'; import { ALERT_SEVERITY } from '@kbn/rule-data-utils'; -import _ from 'lodash'; import { useNavigateToAlertsPageWithFilters } from '../../../../common/hooks/use_navigate_to_alerts_page_with_filters'; import { FormattedCount } from '../../../../common/components/formatted_number'; import { HeaderSection } from '../../../../common/components/header_section'; @@ -32,7 +31,7 @@ import { HostDetailsLink } from '../../../../common/components/links'; import { useQueryToggle } from '../../../../common/containers/query_toggle'; import * as i18n from '../translations'; -import { ITEMS_PER_PAGE, SEVERITY_COLOR, getSeverityColor } from '../utils'; +import { ITEMS_PER_PAGE, getSeverityColor } from '../utils'; import type { HostAlertsItem } from './use_host_alerts_items'; import { useHostAlertsItems } from './use_host_alerts_items'; import { From 1a8c80a4e10f9b99203f2083cc1e47cb0014a701 Mon Sep 17 00:00:00 2001 From: Angela Chuang Date: Wed, 18 Dec 2024 16:30:12 +0000 Subject: [PATCH 08/15] lint --- .../common/components/charts/barchart.tsx | 2 +- .../group_panel_renderers.tsx | 4 +++- .../lens_attributes/risk_score_donut.ts | 6 ++--- .../risk_score_over_time_area.ts | 6 ++--- .../components/kpi_hosts/hosts/index.test.tsx | 3 +-- .../kpi_hosts/unique_ips/index.test.tsx | 3 +-- .../kpi_network/network_events/index.test.tsx | 3 +-- .../unique_private_ips/index.test.tsx | 3 +-- .../kpi_users/authentications/index.test.tsx | 3 +-- .../kpi_users/total_users/index.test.tsx | 3 +-- .../components/alert_count_insight.test.tsx | 23 +++++++++++-------- .../shared/components/alert_count_insight.tsx | 13 +++++++---- .../host_alerts_table/host_alerts_table.tsx | 3 +-- 13 files changed, 40 insertions(+), 35 deletions(-) diff --git a/x-pack/solutions/security/plugins/security_solution/public/common/components/charts/barchart.tsx b/x-pack/solutions/security/plugins/security_solution/public/common/components/charts/barchart.tsx index 2e63ce6f2af07..526261d13bca6 100644 --- a/x-pack/solutions/security/plugins/security_solution/public/common/components/charts/barchart.tsx +++ b/x-pack/solutions/security/plugins/security_solution/public/common/components/charts/barchart.tsx @@ -5,7 +5,7 @@ * 2.0. */ -import { EuiFlexItem, useEuiTheme } from '@elastic/eui'; +import { EuiFlexItem } from '@elastic/eui'; import React, { useMemo } from 'react'; import { i18n } from '@kbn/i18n'; import type { SettingsProps } from '@elastic/charts'; diff --git a/x-pack/solutions/security/plugins/security_solution/public/detections/components/alerts_table/grouping_settings/group_panel_renderers.tsx b/x-pack/solutions/security/plugins/security_solution/public/detections/components/alerts_table/grouping_settings/group_panel_renderers.tsx index a89f0d5a584ec..d5696d3077a69 100644 --- a/x-pack/solutions/security/plugins/security_solution/public/detections/components/alerts_table/grouping_settings/group_panel_renderers.tsx +++ b/x-pack/solutions/security/plugins/security_solution/public/detections/components/alerts_table/grouping_settings/group_panel_renderers.tsx @@ -128,10 +128,12 @@ HostNameGroupContent.displayName = 'HostNameGroupContent'; const UserNameGroupContent = React.memo<{ userName: string | string[]; nullGroupMessage?: string }>( ({ userName, nullGroupMessage }) => { const userNameValue = firstNonNullValue(userName) ?? '-'; + const { euiTheme } = useEuiTheme(); + return ( - + diff --git a/x-pack/solutions/security/plugins/security_solution/public/entity_analytics/lens_attributes/risk_score_donut.ts b/x-pack/solutions/security/plugins/security_solution/public/entity_analytics/lens_attributes/risk_score_donut.ts index ea06d4dcdb567..d15ebb32987bf 100644 --- a/x-pack/solutions/security/plugins/security_solution/public/entity_analytics/lens_attributes/risk_score_donut.ts +++ b/x-pack/solutions/security/plugins/security_solution/public/entity_analytics/lens_attributes/risk_score_donut.ts @@ -10,10 +10,10 @@ import type { GetLensAttributes } from '../../common/components/visualization_ac const internalReferenceIdMapping: Record = { host: uuidv4(), user: uuidv4() }; -export const getRiskScoreDonutAttributes: GetLensAttributes = ( +export const getRiskScoreDonutAttributes: GetLensAttributes = ({ stackByField = 'host', - extraOptions = { spaceId: 'default' } -) => { + extraOptions = { spaceId: 'default' }, +}) => { const layerId = uuidv4(); const internalReferenceId = internalReferenceIdMapping[stackByField]; return { diff --git a/x-pack/solutions/security/plugins/security_solution/public/entity_analytics/lens_attributes/risk_score_over_time_area.ts b/x-pack/solutions/security/plugins/security_solution/public/entity_analytics/lens_attributes/risk_score_over_time_area.ts index 06bebcb4e1339..19534279ee337 100644 --- a/x-pack/solutions/security/plugins/security_solution/public/entity_analytics/lens_attributes/risk_score_over_time_area.ts +++ b/x-pack/solutions/security/plugins/security_solution/public/entity_analytics/lens_attributes/risk_score_over_time_area.ts @@ -10,10 +10,10 @@ import type { GetLensAttributes } from '../../common/components/visualization_ac const internalReferenceIdMapping: Record = { host: uuidv4(), user: uuidv4() }; -export const getRiskScoreOverTimeAreaAttributes: GetLensAttributes = ( +export const getRiskScoreOverTimeAreaAttributes: GetLensAttributes = ({ stackByField = 'host', - extraOptions = { spaceId: 'default' } -) => { + extraOptions = { spaceId: 'default' }, +}) => { const layerIds = [uuidv4(), uuidv4()]; const layer2ColumnId = uuidv4(); const internalReferenceId = internalReferenceIdMapping[stackByField]; diff --git a/x-pack/solutions/security/plugins/security_solution/public/explore/hosts/components/kpi_hosts/hosts/index.test.tsx b/x-pack/solutions/security/plugins/security_solution/public/explore/hosts/components/kpi_hosts/hosts/index.test.tsx index 6044ee0de6d54..6359ea99ead3c 100644 --- a/x-pack/solutions/security/plugins/security_solution/public/explore/hosts/components/kpi_hosts/hosts/index.test.tsx +++ b/x-pack/solutions/security/plugins/security_solution/public/explore/hosts/components/kpi_hosts/hosts/index.test.tsx @@ -8,7 +8,7 @@ import { render } from '@testing-library/react'; import { TestProviders } from '../../../../../common/mock'; import React from 'react'; -import { hostsStatItems, HostsKpiHosts } from '.'; +import { HostsKpiHosts } from '.'; import { KpiBaseComponent } from '../../../../components/kpi'; jest.mock('../../../../components/kpi'); @@ -26,7 +26,6 @@ describe('Hosts KPI', () => { render(, { wrapper: TestProviders, }); - expect(MockKpiBaseComponent.mock.calls[0][0].statItems).toEqual(hostsStatItems); expect(MockKpiBaseComponent.mock.calls[0][0].from).toEqual(from); expect(MockKpiBaseComponent.mock.calls[0][0].to).toEqual(to); }); diff --git a/x-pack/solutions/security/plugins/security_solution/public/explore/hosts/components/kpi_hosts/unique_ips/index.test.tsx b/x-pack/solutions/security/plugins/security_solution/public/explore/hosts/components/kpi_hosts/unique_ips/index.test.tsx index 2fbb35328286d..f86a8b88e863c 100644 --- a/x-pack/solutions/security/plugins/security_solution/public/explore/hosts/components/kpi_hosts/unique_ips/index.test.tsx +++ b/x-pack/solutions/security/plugins/security_solution/public/explore/hosts/components/kpi_hosts/unique_ips/index.test.tsx @@ -8,7 +8,7 @@ import { render } from '@testing-library/react'; import { TestProviders } from '../../../../../common/mock'; import React from 'react'; -import { uniqueIpsStatItems, HostsKpiUniqueIps } from '.'; +import { HostsKpiUniqueIps } from '.'; import { KpiBaseComponent } from '../../../../components/kpi'; jest.mock('../../../../components/kpi'); @@ -26,7 +26,6 @@ describe('Hosts KPI', () => { render(, { wrapper: TestProviders, }); - expect(MockKpiBaseComponent.mock.calls[0][0].statItems).toEqual(uniqueIpsStatItems); expect(MockKpiBaseComponent.mock.calls[0][0].from).toEqual(from); expect(MockKpiBaseComponent.mock.calls[0][0].to).toEqual(to); }); diff --git a/x-pack/solutions/security/plugins/security_solution/public/explore/network/components/kpi_network/network_events/index.test.tsx b/x-pack/solutions/security/plugins/security_solution/public/explore/network/components/kpi_network/network_events/index.test.tsx index f0757a7c07cc4..897bfb309b8c7 100644 --- a/x-pack/solutions/security/plugins/security_solution/public/explore/network/components/kpi_network/network_events/index.test.tsx +++ b/x-pack/solutions/security/plugins/security_solution/public/explore/network/components/kpi_network/network_events/index.test.tsx @@ -8,7 +8,7 @@ import { render } from '@testing-library/react'; import { TestProviders } from '../../../../../common/mock'; import React from 'react'; -import { networkEventsStatsItems, NetworkKpiNetworkEvents } from '.'; +import { NetworkKpiNetworkEvents } from '.'; import { KpiBaseComponent } from '../../../../components/kpi'; jest.mock('../../../../components/kpi'); @@ -26,7 +26,6 @@ describe('Network events KPI', () => { render(, { wrapper: TestProviders, }); - expect(MockKpiBaseComponent.mock.calls[0][0].statItems).toEqual(networkEventsStatsItems); expect(MockKpiBaseComponent.mock.calls[0][0].from).toEqual(from); expect(MockKpiBaseComponent.mock.calls[0][0].to).toEqual(to); }); diff --git a/x-pack/solutions/security/plugins/security_solution/public/explore/network/components/kpi_network/unique_private_ips/index.test.tsx b/x-pack/solutions/security/plugins/security_solution/public/explore/network/components/kpi_network/unique_private_ips/index.test.tsx index d19ae024fdaa4..3965db7356b01 100644 --- a/x-pack/solutions/security/plugins/security_solution/public/explore/network/components/kpi_network/unique_private_ips/index.test.tsx +++ b/x-pack/solutions/security/plugins/security_solution/public/explore/network/components/kpi_network/unique_private_ips/index.test.tsx @@ -8,7 +8,7 @@ import { render } from '@testing-library/react'; import { TestProviders } from '../../../../../common/mock'; import React from 'react'; -import { uniquePrivateIpsStatItems, NetworkKpiUniquePrivateIps } from '.'; +import { NetworkKpiUniquePrivateIps } from '.'; import { KpiBaseComponent } from '../../../../components/kpi'; jest.mock('../../../../components/kpi'); @@ -26,7 +26,6 @@ describe('Network unique private ips KPI', () => { render(, { wrapper: TestProviders, }); - expect(MockKpiBaseComponent.mock.calls[0][0].statItems).toEqual(uniquePrivateIpsStatItems); expect(MockKpiBaseComponent.mock.calls[0][0].from).toEqual(from); expect(MockKpiBaseComponent.mock.calls[0][0].to).toEqual(to); }); diff --git a/x-pack/solutions/security/plugins/security_solution/public/explore/users/components/kpi_users/authentications/index.test.tsx b/x-pack/solutions/security/plugins/security_solution/public/explore/users/components/kpi_users/authentications/index.test.tsx index 2697e4675e4c3..c59a4f934c2f6 100644 --- a/x-pack/solutions/security/plugins/security_solution/public/explore/users/components/kpi_users/authentications/index.test.tsx +++ b/x-pack/solutions/security/plugins/security_solution/public/explore/users/components/kpi_users/authentications/index.test.tsx @@ -8,7 +8,7 @@ import { render } from '@testing-library/react'; import { TestProviders } from '../../../../../common/mock'; import React from 'react'; -import { authenticationsStatItems, UsersKpiAuthentications } from '.'; +import { UsersKpiAuthentications } from '.'; import { KpiBaseComponent } from '../../../../components/kpi'; jest.mock('../../../../components/kpi'); @@ -26,7 +26,6 @@ describe('User authentications KPI', () => { render(, { wrapper: TestProviders, }); - expect(MockKpiBaseComponent.mock.calls[0][0].statItems).toEqual(authenticationsStatItems); expect(MockKpiBaseComponent.mock.calls[0][0].from).toEqual(from); expect(MockKpiBaseComponent.mock.calls[0][0].to).toEqual(to); }); diff --git a/x-pack/solutions/security/plugins/security_solution/public/explore/users/components/kpi_users/total_users/index.test.tsx b/x-pack/solutions/security/plugins/security_solution/public/explore/users/components/kpi_users/total_users/index.test.tsx index 30bb37782889f..0c8a278532be8 100644 --- a/x-pack/solutions/security/plugins/security_solution/public/explore/users/components/kpi_users/total_users/index.test.tsx +++ b/x-pack/solutions/security/plugins/security_solution/public/explore/users/components/kpi_users/total_users/index.test.tsx @@ -8,7 +8,7 @@ import { render } from '@testing-library/react'; import { TestProviders } from '../../../../../common/mock'; import React from 'react'; -import { usersStatItems, TotalUsersKpi } from '.'; +import { TotalUsersKpi } from '.'; import { KpiBaseComponent } from '../../../../components/kpi'; jest.mock('../../../../components/kpi'); @@ -26,7 +26,6 @@ describe('Users KPI', () => { render(, { wrapper: TestProviders, }); - expect(MockKpiBaseComponent.mock.calls[0][0].statItems).toEqual(usersStatItems); expect(MockKpiBaseComponent.mock.calls[0][0].from).toEqual(from); expect(MockKpiBaseComponent.mock.calls[0][0].to).toEqual(to); }); diff --git a/x-pack/solutions/security/plugins/security_solution/public/flyout/document_details/shared/components/alert_count_insight.test.tsx b/x-pack/solutions/security/plugins/security_solution/public/flyout/document_details/shared/components/alert_count_insight.test.tsx index d9ae4673b1749..5873c0c53e198 100644 --- a/x-pack/solutions/security/plugins/security_solution/public/flyout/document_details/shared/components/alert_count_insight.test.tsx +++ b/x-pack/solutions/security/plugins/security_solution/public/flyout/document_details/shared/components/alert_count_insight.test.tsx @@ -12,6 +12,7 @@ import { AlertCountInsight, getFormattedAlertStats } from './alert_count_insight import { useAlertsByStatus } from '../../../../overview/components/detection_response/alerts_by_status/use_alerts_by_status'; import type { ParsedAlertsData } from '../../../../overview/components/detection_response/alerts_by_status/types'; import { SEVERITY_COLOR } from '../../../../overview/components/detection_response/utils'; +import type { EuiThemeComputed } from '@elastic/eui'; jest.mock('../../../../common/lib/kibana'); @@ -110,8 +111,9 @@ describe('AlertCountInsight', () => { }); describe('getFormattedAlertStats', () => { + const mockEuiTheme = {} as EuiThemeComputed; it('should return alert stats', () => { - const alertStats = getFormattedAlertStats(mockAlertData); + const alertStats = getFormattedAlertStats(mockAlertData, mockEuiTheme); expect(alertStats).toEqual([ { key: 'High', count: 2, color: SEVERITY_COLOR.high }, { key: 'Low', count: 2, color: SEVERITY_COLOR.low }, @@ -121,15 +123,18 @@ describe('getFormattedAlertStats', () => { }); it('should return empty array if no active alerts are available', () => { - const alertStats = getFormattedAlertStats({ - closed: { - total: 2, - severities: [ - { key: 'high', value: 1, label: 'High' }, - { key: 'low', value: 1, label: 'Low' }, - ], + const alertStats = getFormattedAlertStats( + { + closed: { + total: 2, + severities: [ + { key: 'high', value: 1, label: 'High' }, + { key: 'low', value: 1, label: 'Low' }, + ], + }, }, - }); + mockEuiTheme + ); expect(alertStats).toEqual([]); }); }); diff --git a/x-pack/solutions/security/plugins/security_solution/public/flyout/document_details/shared/components/alert_count_insight.tsx b/x-pack/solutions/security/plugins/security_solution/public/flyout/document_details/shared/components/alert_count_insight.tsx index 9b5b056311354..2db7e3a2f6d9d 100644 --- a/x-pack/solutions/security/plugins/security_solution/public/flyout/document_details/shared/components/alert_count_insight.tsx +++ b/x-pack/solutions/security/plugins/security_solution/public/flyout/document_details/shared/components/alert_count_insight.tsx @@ -7,7 +7,8 @@ import React, { useMemo } from 'react'; import { capitalize } from 'lodash'; -import { EuiLoadingSpinner, EuiFlexItem, type EuiFlexGroupProps } from '@elastic/eui'; +import type { EuiThemeComputed } from '@elastic/eui'; +import { EuiLoadingSpinner, EuiFlexItem, type EuiFlexGroupProps, useEuiTheme } from '@elastic/eui'; import { FormattedMessage } from '@kbn/i18n-react'; import { InsightDistributionBar } from './insight_distribution_bar'; import { getSeverityColor } from '../../../../detections/components/alerts_kpis/severity_level_panel/helpers'; @@ -49,7 +50,10 @@ interface AlertCountInsightProps { /** * Filters closed alerts and format the alert stats for the distribution bar */ -export const getFormattedAlertStats = (alertsData: ParsedAlertsData) => { +export const getFormattedAlertStats = ( + alertsData: ParsedAlertsData, + euiTheme: EuiThemeComputed +) => { const severityMap = new Map(); const filteredAlertsData: ParsedAlertsData = alertsData @@ -68,7 +72,7 @@ export const getFormattedAlertStats = (alertsData: ParsedAlertsData) => { const alertStats = Array.from(severityMap, ([key, count]) => ({ key: capitalize(key), count, - color: getSeverityColor(key), + color: getSeverityColor(key, euiTheme), })); return alertStats; }; @@ -82,6 +86,7 @@ export const AlertCountInsight: React.FC = ({ direction, 'data-test-subj': dataTestSubj, }) => { + const { euiTheme } = useEuiTheme(); const entityFilter = useMemo(() => ({ field: fieldName, value: name }), [fieldName, name]); const { to, from } = useGlobalTime(); const { signalIndexName } = useSignalIndex(); @@ -94,7 +99,7 @@ export const AlertCountInsight: React.FC = ({ from, }); - const alertStats = useMemo(() => getFormattedAlertStats(items), [items]); + const alertStats = useMemo(() => getFormattedAlertStats(items, euiTheme), [euiTheme, items]); const totalAlertCount = useMemo( () => alertStats.reduce((acc, item) => acc + item.count, 0), diff --git a/x-pack/solutions/security/plugins/security_solution/public/overview/components/detection_response/host_alerts_table/host_alerts_table.tsx b/x-pack/solutions/security/plugins/security_solution/public/overview/components/detection_response/host_alerts_table/host_alerts_table.tsx index 462a04f7211b5..9b66c74473a86 100644 --- a/x-pack/solutions/security/plugins/security_solution/public/overview/components/detection_response/host_alerts_table/host_alerts_table.tsx +++ b/x-pack/solutions/security/plugins/security_solution/public/overview/components/detection_response/host_alerts_table/host_alerts_table.tsx @@ -21,7 +21,6 @@ import { } from '@elastic/eui'; import { ALERT_SEVERITY } from '@kbn/rule-data-utils'; -import _ from 'lodash'; import { useNavigateToAlertsPageWithFilters } from '../../../../common/hooks/use_navigate_to_alerts_page_with_filters'; import { FormattedCount } from '../../../../common/components/formatted_number'; import { HeaderSection } from '../../../../common/components/header_section'; @@ -32,7 +31,7 @@ import { HostDetailsLink } from '../../../../common/components/links'; import { useQueryToggle } from '../../../../common/containers/query_toggle'; import * as i18n from '../translations'; -import { ITEMS_PER_PAGE, SEVERITY_COLOR, getSeverityColor } from '../utils'; +import { ITEMS_PER_PAGE, getSeverityColor } from '../utils'; import type { HostAlertsItem } from './use_host_alerts_items'; import { useHostAlertsItems } from './use_host_alerts_items'; import { From 099e29d2d904fc9b2f9fde2a10167223fe2487d5 Mon Sep 17 00:00:00 2001 From: Angela Chuang Date: Thu, 19 Dec 2024 10:19:12 +0000 Subject: [PATCH 09/15] unit tests --- .../common/components/charts/barchart.test.tsx | 8 -------- .../common/components/matrix_histogram/utils.ts | 9 --------- .../chart_panels/chart_collapse/index.tsx | 7 ++++--- .../shared/components/alert_count_insight.test.tsx | 14 +++++++------- 4 files changed, 11 insertions(+), 27 deletions(-) delete mode 100644 x-pack/solutions/security/plugins/security_solution/public/common/components/matrix_histogram/utils.ts diff --git a/x-pack/solutions/security/plugins/security_solution/public/common/components/charts/barchart.test.tsx b/x-pack/solutions/security/plugins/security_solution/public/common/components/charts/barchart.test.tsx index 7a5eb94d56249..ed94c2ce8933d 100644 --- a/x-pack/solutions/security/plugins/security_solution/public/common/components/charts/barchart.test.tsx +++ b/x-pack/solutions/security/plugins/security_solution/public/common/components/charts/barchart.test.tsx @@ -353,8 +353,6 @@ describe.each(chartDataSets)('BarChart with stackByField', () => { }, ]; - const expectedColors = ['#1EA593', '#2B70F7', '#CE0060']; - const stackByField = 'process.name'; beforeAll(() => { @@ -369,12 +367,6 @@ describe.each(chartDataSets)('BarChart with stackByField', () => { expect(wrapper.find('[data-test-subj="draggable-legend"]').exists()).toBe(true); }); - expectedColors.forEach((color, i) => { - test(`it renders the expected legend color ${color} for legend item ${i}`, () => { - expect(wrapper.find(`div [color="${color}"]`).exists()).toBe(true); - }); - }); - data.forEach((datum) => { test(`it renders the expected draggable legend text for datum ${datum.key}`, () => { const dataProviderId = `draggableId.content.draggable-legend-item-uuid_v4()-${escapeDataProviderId( diff --git a/x-pack/solutions/security/plugins/security_solution/public/common/components/matrix_histogram/utils.ts b/x-pack/solutions/security/plugins/security_solution/public/common/components/matrix_histogram/utils.ts deleted file mode 100644 index 674ec74ae9fc7..0000000000000 --- a/x-pack/solutions/security/plugins/security_solution/public/common/components/matrix_histogram/utils.ts +++ /dev/null @@ -1,9 +0,0 @@ -/* - * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one - * or more contributor license agreements. Licensed under the Elastic License - * 2.0; you may not use this file except in compliance with the Elastic License - * 2.0. - */ - -export const DEFAULT_CHART_HEIGHT = 174; -export const DEFAULT_Y_TICK_FORMATTER = (value: string | number): string => value.toLocaleString(); diff --git a/x-pack/solutions/security/plugins/security_solution/public/detections/components/alerts_kpis/chart_panels/chart_collapse/index.tsx b/x-pack/solutions/security/plugins/security_solution/public/detections/components/alerts_kpis/chart_panels/chart_collapse/index.tsx index c779daf2b2dd2..1e6eaff6f6435 100644 --- a/x-pack/solutions/security/plugins/security_solution/public/detections/components/alerts_kpis/chart_panels/chart_collapse/index.tsx +++ b/x-pack/solutions/security/plugins/security_solution/public/detections/components/alerts_kpis/chart_panels/chart_collapse/index.tsx @@ -21,7 +21,7 @@ import { FormattedCount } from '../../../../../common/components/formatted_numbe import { getIsChartCollapseData } from './helpers'; import * as i18n from './translations'; -import { SEVERITY_COLOR } from '../../../../../overview/components/detection_response/utils'; +import { getSeverityColor as getAlertsSeverityColor } from '../../../../../overview/components/detection_response/utils'; const DETECTIONS_ALERTS_COLLAPSED_CHART_ID = 'detectioin-alerts-collapsed-chart'; @@ -97,7 +97,8 @@ export const ChartCollapse: React.FC = ({ const topGroup = useMemo(() => data.at(0)?.group ?? i18n.NO_RESULT_MESSAGE, [data]); const severities = useMemo(() => { const severityData = data.at(0)?.severities ?? []; - return Object.keys(SEVERITY_COLOR).map((severity) => { + const severityColors = getAlertsSeverityColor(euiTheme); + return Object.keys(severityColors).map((severity) => { const obj = severityData.find((s) => s.key === severity); if (obj) { return { key: obj.key, label: obj.label, value: obj.value }; @@ -105,7 +106,7 @@ export const ChartCollapse: React.FC = ({ return { key: severity, label: capitalize(severity), value: 0 }; } }); - }, [data]); + }, [data, euiTheme]); const groupBy = useMemo(() => getGroupByLabel(groupBySelection), [groupBySelection]); return ( diff --git a/x-pack/solutions/security/plugins/security_solution/public/flyout/document_details/shared/components/alert_count_insight.test.tsx b/x-pack/solutions/security/plugins/security_solution/public/flyout/document_details/shared/components/alert_count_insight.test.tsx index 5873c0c53e198..e8e940d43954d 100644 --- a/x-pack/solutions/security/plugins/security_solution/public/flyout/document_details/shared/components/alert_count_insight.test.tsx +++ b/x-pack/solutions/security/plugins/security_solution/public/flyout/document_details/shared/components/alert_count_insight.test.tsx @@ -11,7 +11,7 @@ import { TestProviders } from '../../../../common/mock'; import { AlertCountInsight, getFormattedAlertStats } from './alert_count_insight'; import { useAlertsByStatus } from '../../../../overview/components/detection_response/alerts_by_status/use_alerts_by_status'; import type { ParsedAlertsData } from '../../../../overview/components/detection_response/alerts_by_status/types'; -import { SEVERITY_COLOR } from '../../../../overview/components/detection_response/utils'; +import { getSeverityColor } from '../../../../overview/components/detection_response/utils'; import type { EuiThemeComputed } from '@elastic/eui'; jest.mock('../../../../common/lib/kibana'); @@ -24,7 +24,7 @@ jest.mock('@kbn/cloud-security-posture/src/hooks/use_misconfiguration_preview'); jest.mock( '../../../../overview/components/detection_response/alerts_by_status/use_alerts_by_status' ); - +const mockEuiTheme = { colors: { vis: {} } } as EuiThemeComputed; const fieldName = 'host.name'; const name = 'test host'; const testId = 'test'; @@ -111,14 +111,14 @@ describe('AlertCountInsight', () => { }); describe('getFormattedAlertStats', () => { - const mockEuiTheme = {} as EuiThemeComputed; it('should return alert stats', () => { + const severityColors = getSeverityColor(mockEuiTheme); const alertStats = getFormattedAlertStats(mockAlertData, mockEuiTheme); expect(alertStats).toEqual([ - { key: 'High', count: 2, color: SEVERITY_COLOR.high }, - { key: 'Low', count: 2, color: SEVERITY_COLOR.low }, - { key: 'Medium', count: 2, color: SEVERITY_COLOR.medium }, - { key: 'Critical', count: 2, color: SEVERITY_COLOR.critical }, + { key: 'High', count: 2, color: severityColors.high }, + { key: 'Low', count: 2, color: severityColors.low }, + { key: 'Medium', count: 2, color: severityColors.medium }, + { key: 'Critical', count: 2, color: severityColors.critical }, ]); }); From 8a6f3a055461f373b9d35cc0db309400f08fdccc Mon Sep 17 00:00:00 2001 From: Angela Chuang Date: Thu, 19 Dec 2024 16:16:15 +0000 Subject: [PATCH 10/15] update unit tests --- .../kpi_total_users_area.test.ts.snap | 189 ------------------ 1 file changed, 189 deletions(-) diff --git a/x-pack/solutions/security/plugins/security_solution/public/common/components/visualization_actions/lens_attributes/users/__snapshots__/kpi_total_users_area.test.ts.snap b/x-pack/solutions/security/plugins/security_solution/public/common/components/visualization_actions/lens_attributes/users/__snapshots__/kpi_total_users_area.test.ts.snap index 6d5bb905ee61b..2b0e38615bb20 100644 --- a/x-pack/solutions/security/plugins/security_solution/public/common/components/visualization_actions/lens_attributes/users/__snapshots__/kpi_total_users_area.test.ts.snap +++ b/x-pack/solutions/security/plugins/security_solution/public/common/components/visualization_actions/lens_attributes/users/__snapshots__/kpi_total_users_area.test.ts.snap @@ -188,192 +188,3 @@ Object { "visualizationType": "lnsXY", } `; - -exports[`kpiTotalUsersAreaLensAttributes should render 1`] = ` -Object { - "description": "", - "references": Array [ - Object { - "id": "security-solution-my-test", - "name": "indexpattern-datasource-current-indexpattern", - "type": "index-pattern", - }, - Object { - "id": "security-solution-my-test", - "name": "indexpattern-datasource-layer-416b6fad-1923-4f6a-a2df-b223bb287e30", - "type": "index-pattern", - }, - ], - "state": Object { - "datasourceStates": Object { - "formBased": Object { - "layers": Object { - "416b6fad-1923-4f6a-a2df-b223bb287e30": Object { - "columnOrder": Array [ - "5eea817b-67b7-4268-8ecb-7688d1094721", - "b00c65ea-32be-4163-bfc8-f795b1ef9d06", - ], - "columns": Object { - "5eea817b-67b7-4268-8ecb-7688d1094721": Object { - "dataType": "date", - "isBucketed": true, - "label": "@timestamp", - "operationType": "date_histogram", - "params": Object { - "interval": "auto", - }, - "scale": "interval", - "sourceField": "@timestamp", - }, - "b00c65ea-32be-4163-bfc8-f795b1ef9d06": Object { - "customLabel": true, - "dataType": "number", - "isBucketed": false, - "label": "Unique count of user.name", - "operationType": "unique_count", - "scale": "ratio", - "sourceField": "user.name", - }, - }, - "incompleteColumns": Object {}, - }, - }, - }, - }, - "filters": Array [ - Object { - "meta": Object { - "alias": null, - "disabled": false, - "key": "user.name", - "negate": false, - "params": Object { - "query": "elastic", - }, - "type": "phrase", - }, - "query": Object { - "match_phrase": Object { - "user.name": "elastic", - }, - }, - }, - Object { - "meta": Object { - "alias": "", - "disabled": false, - "key": "bool", - "negate": false, - "type": "custom", - "value": "{\\"query\\": {\\"bool\\": {\\"filter\\": [{\\"bool\\": {\\"should\\": [{\\"exists\\": {\\"field\\": \\"user.name\\"}}],\\"minimum_should_match\\": 1}}]}}}", - }, - "query": Object { - "bool": Object { - "minimum_should_match": 1, - "should": Array [ - Object { - "exists": Object { - "field": "user.name", - }, - }, - ], - }, - }, - }, - Object { - "meta": Object { - "alias": null, - "disabled": false, - "key": "_index", - "negate": false, - "params": Array [ - "auditbeat-mytest-*", - ], - "type": "phrases", - }, - "query": Object { - "bool": Object { - "minimum_should_match": 1, - "should": Array [ - Object { - "match_phrase": Object { - "_index": "auditbeat-mytest-*", - }, - }, - ], - }, - }, - }, - Object { - "meta": Object { - "alias": null, - "disabled": false, - "key": "host.id", - "negate": false, - "params": Object { - "query": "123", - }, - "type": "phrase", - }, - "query": Object { - "match_phrase": Object { - "host.id": "123", - }, - }, - }, - ], - "query": Object { - "language": "kql", - "query": "host.name: *", - }, - "visualization": Object { - "axisTitlesVisibilitySettings": Object { - "x": false, - "yLeft": false, - "yRight": false, - }, - "fittingFunction": "None", - "gridlinesVisibilitySettings": Object { - "x": true, - "yLeft": true, - "yRight": true, - }, - "labelsOrientation": Object { - "x": 0, - "yLeft": 0, - "yRight": 0, - }, - "layers": Array [ - Object { - "accessors": Array [ - "b00c65ea-32be-4163-bfc8-f795b1ef9d06", - ], - "layerId": "416b6fad-1923-4f6a-a2df-b223bb287e30", - "layerType": "data", - "seriesType": "area", - "xAccessor": "5eea817b-67b7-4268-8ecb-7688d1094721", - }, - ], - "legend": Object { - "isVisible": true, - "position": "right", - }, - "preferredSeriesType": "area", - "tickLabelsVisibilitySettings": Object { - "x": true, - "yLeft": true, - "yRight": true, - }, - "valueLabels": "hide", - "yLeftExtent": Object { - "mode": "full", - }, - "yRightExtent": Object { - "mode": "full", - }, - }, - }, - "title": "[User] Users - area", - "visualizationType": "lnsXY", -} -`; From ef93cd0990d989697c76bc6a69a6f41cc8f57cc5 Mon Sep 17 00:00:00 2001 From: Angela Chuang Date: Thu, 2 Jan 2025 15:23:10 +0000 Subject: [PATCH 11/15] revert changes about severity colors --- .../components/alerts/alerts_preview.tsx | 2 +- .../alerts_findings_details_table.tsx | 13 +- .../chart_panels/chart_collapse/index.tsx | 12 +- .../severity_level_panel/columns.tsx | 77 ++--- .../severity_level_panel/helpers.tsx | 11 +- .../severity_level_chart.tsx | 22 +- .../components/alert_count_insight.test.tsx | 35 +- .../shared/components/alert_count_insight.tsx | 13 +- .../alerts_by_status/alerts_by_status.tsx | 56 ++- .../host_alerts_table/host_alerts_table.tsx | 317 +++++++++-------- .../rule_alerts_table/rule_alerts_table.tsx | 158 +++++---- .../user_alerts_table/user_alerts_table.tsx | 323 +++++++++--------- .../components/detection_response/utils.tsx | 11 - 13 files changed, 477 insertions(+), 573 deletions(-) diff --git a/x-pack/solutions/security/plugins/security_solution/public/cloud_security_posture/components/alerts/alerts_preview.tsx b/x-pack/solutions/security/plugins/security_solution/public/cloud_security_posture/components/alerts/alerts_preview.tsx index ba2d8a989243b..8592ed61abe33 100644 --- a/x-pack/solutions/security/plugins/security_solution/public/cloud_security_posture/components/alerts/alerts_preview.tsx +++ b/x-pack/solutions/security/plugins/security_solution/public/cloud_security_posture/components/alerts/alerts_preview.tsx @@ -83,7 +83,7 @@ export const AlertsPreview = ({ const alertStats = Array.from(severityMap, ([key, count]) => ({ key: capitalize(key), count, - color: getSeverityColor(key, euiTheme), + color: getSeverityColor(key), })); const totalAlertsCount = alertStats.reduce((total, item) => total + item.count, 0); diff --git a/x-pack/solutions/security/plugins/security_solution/public/cloud_security_posture/components/csp_details/alerts_findings_details_table.tsx b/x-pack/solutions/security/plugins/security_solution/public/cloud_security_posture/components/csp_details/alerts_findings_details_table.tsx index cfccc83b644a2..2b1a2002667c2 100644 --- a/x-pack/solutions/security/plugins/security_solution/public/cloud_security_posture/components/csp_details/alerts_findings_details_table.tsx +++ b/x-pack/solutions/security/plugins/security_solution/public/cloud_security_posture/components/csp_details/alerts_findings_details_table.tsx @@ -8,15 +8,7 @@ import React, { memo, useCallback, useEffect, useState } from 'react'; import { capitalize } from 'lodash'; import type { Criteria, EuiBasicTableColumn } from '@elastic/eui'; -import { - EuiSpacer, - EuiPanel, - EuiText, - EuiBasicTable, - EuiIcon, - EuiLink, - useEuiTheme, -} from '@elastic/eui'; +import { EuiSpacer, EuiPanel, EuiText, EuiBasicTable, EuiIcon, EuiLink } from '@elastic/eui'; import { i18n } from '@kbn/i18n'; import { DistributionBar } from '@kbn/security-solution-distribution-bar'; import { @@ -72,7 +64,6 @@ interface AlertsDetailsFields { export const AlertsDetailsTable = memo( ({ field, value }: { field: 'host.name' | 'user.name'; value: string }) => { - const { euiTheme } = useEuiTheme(); useEffect(() => { uiMetricService.trackUiMetric( METRIC_TYPE.COUNT, @@ -130,7 +121,7 @@ export const AlertsDetailsTable = memo( const alertStats = Array.from(severityMap, ([key, count]) => ({ key: capitalize(key), count, - color: getSeverityColor(key, euiTheme), + color: getSeverityColor(key), filter: () => { setCurrentFilter(key); setQuery(buildEntityAlertsQuery(field, to, from, value, 500, key)); diff --git a/x-pack/solutions/security/plugins/security_solution/public/detections/components/alerts_kpis/chart_panels/chart_collapse/index.tsx b/x-pack/solutions/security/plugins/security_solution/public/detections/components/alerts_kpis/chart_panels/chart_collapse/index.tsx index 1e6eaff6f6435..0539b7f7615d6 100644 --- a/x-pack/solutions/security/plugins/security_solution/public/detections/components/alerts_kpis/chart_panels/chart_collapse/index.tsx +++ b/x-pack/solutions/security/plugins/security_solution/public/detections/components/alerts_kpis/chart_panels/chart_collapse/index.tsx @@ -4,7 +4,7 @@ * 2.0; you may not use this file except in compliance with the Elastic License * 2.0. */ -import { EuiFlexGroup, EuiFlexItem, EuiHealth, EuiText, useEuiTheme } from '@elastic/eui'; +import { EuiFlexGroup, EuiFlexItem, EuiHealth, EuiText } from '@elastic/eui'; import { ALERT_SEVERITY, ALERT_RULE_NAME } from '@kbn/rule-data-utils'; import type { MappingRuntimeFields } from '@elastic/elasticsearch/lib/api/types'; import type { Filter, Query } from '@kbn/es-query'; @@ -21,7 +21,7 @@ import { FormattedCount } from '../../../../../common/components/formatted_numbe import { getIsChartCollapseData } from './helpers'; import * as i18n from './translations'; -import { getSeverityColor as getAlertsSeverityColor } from '../../../../../overview/components/detection_response/utils'; +import { SEVERITY_COLOR } from '../../../../../overview/components/detection_response/utils'; const DETECTIONS_ALERTS_COLLAPSED_CHART_ID = 'detectioin-alerts-collapsed-chart'; @@ -79,7 +79,6 @@ export const ChartCollapse: React.FC = ({ signalIndexName, runtimeMappings, }: Props) => { - const { euiTheme } = useEuiTheme(); const uniqueQueryId = useMemo(() => `${DETECTIONS_ALERTS_COLLAPSED_CHART_ID}-${uuid()}`, []); const aggregations = useMemo(() => combinedAggregations(groupBySelection), [groupBySelection]); @@ -97,8 +96,7 @@ export const ChartCollapse: React.FC = ({ const topGroup = useMemo(() => data.at(0)?.group ?? i18n.NO_RESULT_MESSAGE, [data]); const severities = useMemo(() => { const severityData = data.at(0)?.severities ?? []; - const severityColors = getAlertsSeverityColor(euiTheme); - return Object.keys(severityColors).map((severity) => { + return Object.keys(SEVERITY_COLOR).map((severity) => { const obj = severityData.find((s) => s.key === severity); if (obj) { return { key: obj.key, label: obj.label, value: obj.value }; @@ -106,7 +104,7 @@ export const ChartCollapse: React.FC = ({ return { key: severity, label: capitalize(severity), value: 0 }; } }); - }, [data, euiTheme]); + }, [data]); const groupBy = useMemo(() => getGroupByLabel(groupBySelection), [groupBySelection]); return ( @@ -117,7 +115,7 @@ export const ChartCollapse: React.FC = ({ {severities.map((severity) => ( - + {`${severity.label}: `} diff --git a/x-pack/solutions/security/plugins/security_solution/public/detections/components/alerts_kpis/severity_level_panel/columns.tsx b/x-pack/solutions/security/plugins/security_solution/public/detections/components/alerts_kpis/severity_level_panel/columns.tsx index 9e5be98c8a7e3..3e9f7eea4fbf8 100644 --- a/x-pack/solutions/security/plugins/security_solution/public/detections/components/alerts_kpis/severity_level_panel/columns.tsx +++ b/x-pack/solutions/security/plugins/security_solution/public/detections/components/alerts_kpis/severity_level_panel/columns.tsx @@ -5,7 +5,7 @@ * 2.0. */ import React from 'react'; -import { EuiHealth, EuiText, useEuiTheme } from '@elastic/eui'; +import { EuiHealth, EuiText } from '@elastic/eui'; import { capitalize } from 'lodash'; import { ALERT_SEVERITY } from '@kbn/rule-data-utils'; import type { EuiBasicTableColumn } from '@elastic/eui'; @@ -13,47 +13,42 @@ import type { Severity } from '@kbn/securitysolution-io-ts-alerting-types'; import { TableId } from '@kbn/securitysolution-data-table'; import type { SeverityBuckets as SeverityData } from '../../../../overview/components/detection_response/alerts_by_status/types'; import { DefaultDraggable } from '../../../../common/components/draggables'; -import { getSeverityColor } from '../../../../overview/components/detection_response/utils'; +import { SEVERITY_COLOR } from '../../../../overview/components/detection_response/utils'; import { FormattedCount } from '../../../../common/components/formatted_number'; import { COUNT_TABLE_TITLE } from '../alerts_count_panel/translations'; import * as i18n from './translations'; -export const useGetSeverityTableColumns = (): Array> => { - const { euiTheme } = useEuiTheme(); - const severityColors = getSeverityColor(euiTheme); - - return [ - { - field: 'key', - name: i18n.SEVERITY_LEVEL_COLUMN_TITLE, - 'data-test-subj': 'severityTable-severity', - render: (severity: Severity) => ( - - - - ), - }, - { - field: 'value', - name: COUNT_TABLE_TITLE, - sortable: true, - dataType: 'number', - 'data-test-subj': 'severityTable-alertCount', - width: '45%', - render: (alertCount: number) => ( - - - - ), - }, - ]; -}; +export const getSeverityTableColumns = (): Array> => [ + { + field: 'key', + name: i18n.SEVERITY_LEVEL_COLUMN_TITLE, + 'data-test-subj': 'severityTable-severity', + render: (severity: Severity) => ( + + + + ), + }, + { + field: 'value', + name: COUNT_TABLE_TITLE, + sortable: true, + dataType: 'number', + 'data-test-subj': 'severityTable-alertCount', + width: '45%', + render: (alertCount: number) => ( + + + + ), + }, +]; diff --git a/x-pack/solutions/security/plugins/security_solution/public/detections/components/alerts_kpis/severity_level_panel/helpers.tsx b/x-pack/solutions/security/plugins/security_solution/public/detections/components/alerts_kpis/severity_level_panel/helpers.tsx index e5d58b6cfa9fb..e58d6d1b61cd2 100644 --- a/x-pack/solutions/security/plugins/security_solution/public/detections/components/alerts_kpis/severity_level_panel/helpers.tsx +++ b/x-pack/solutions/security/plugins/security_solution/public/detections/components/alerts_kpis/severity_level_panel/helpers.tsx @@ -6,19 +6,18 @@ */ import type { Severity } from '@kbn/securitysolution-io-ts-alerting-types'; import { has } from 'lodash'; -import type { EuiThemeComputed } from '@elastic/eui'; + import type { AlertsBySeverityAgg } from './types'; import type { AlertSearchResponse } from '../../../containers/detection_engine/alerts/types'; import type { SeverityBuckets as SeverityData } from '../../../../overview/components/detection_response/alerts_by_status/types'; import type { SummaryChartsData, SummaryChartsAgg } from '../alerts_summary_charts_panel/types'; import { severityLabels } from '../../../../overview/components/detection_response/alerts_by_status/use_alerts_by_status'; -import { getEmptyDonutColor } from '../../../../common/components/charts/donutchart_empty'; -import { getSeverityColor as getAlertsSeverityColor } from '../../../../overview/components/detection_response/utils'; +import { emptyDonutColor } from '../../../../common/components/charts/donutchart_empty'; +import { SEVERITY_COLOR } from '../../../../overview/components/detection_response/utils'; import * as i18n from './translations'; -export const getSeverityColor = (severity: string, euiTheme: EuiThemeComputed) => { - const severityColor = getAlertsSeverityColor(euiTheme); - return severityColor[severity.toLocaleLowerCase() as Severity] ?? getEmptyDonutColor(euiTheme); +export const getSeverityColor = (severity: string) => { + return SEVERITY_COLOR[severity.toLocaleLowerCase() as Severity] ?? emptyDonutColor; }; export const parseSeverityData = ( diff --git a/x-pack/solutions/security/plugins/security_solution/public/detections/components/alerts_kpis/severity_level_panel/severity_level_chart.tsx b/x-pack/solutions/security/plugins/security_solution/public/detections/components/alerts_kpis/severity_level_panel/severity_level_chart.tsx index 99d409c63c441..bad0b55c0cebb 100644 --- a/x-pack/solutions/security/plugins/security_solution/public/detections/components/alerts_kpis/severity_level_panel/severity_level_chart.tsx +++ b/x-pack/solutions/security/plugins/security_solution/public/detections/components/alerts_kpis/severity_level_panel/severity_level_chart.tsx @@ -7,19 +7,13 @@ import React, { useCallback, useMemo } from 'react'; import { ALERT_SEVERITY } from '@kbn/rule-data-utils'; import styled from 'styled-components'; -import { - EuiFlexGroup, - EuiFlexItem, - EuiInMemoryTable, - EuiLoadingSpinner, - useEuiTheme, -} from '@elastic/eui'; +import { EuiFlexGroup, EuiFlexItem, EuiInMemoryTable, EuiLoadingSpinner } from '@elastic/eui'; import type { SortOrder } from '@elastic/elasticsearch/lib/api/typesWithBodyKey'; import type { SeverityBuckets as SeverityData } from '../../../../overview/components/detection_response/alerts_by_status/types'; import type { FillColor } from '../../../../common/components/charts/donutchart'; import { DonutChart } from '../../../../common/components/charts/donutchart'; import { ChartLabel } from '../../../../overview/components/detection_response/alerts_by_status/chart_label'; -import { useGetSeverityTableColumns } from './columns'; +import { getSeverityTableColumns } from './columns'; import { getSeverityColor } from './helpers'; import { TOTAL_COUNT_OF_ALERTS } from '../../alerts_table/translations'; @@ -39,8 +33,7 @@ export const SeverityLevelChart: React.FC = ({ isLoading, addFilter, }) => { - const { euiTheme } = useEuiTheme(); - const columns = useGetSeverityTableColumns(); + const columns = useMemo(() => getSeverityTableColumns(), []); const count = useMemo(() => { return data @@ -50,12 +43,9 @@ export const SeverityLevelChart: React.FC = ({ : 0; }, [data]); - const fillColor: FillColor = useCallback( - (dataName: string) => { - return getSeverityColor(dataName, euiTheme); - }, - [euiTheme] - ); + const fillColor: FillColor = useCallback((dataName: string) => { + return getSeverityColor(dataName); + }, []); const sorting: { sort: { field: keyof SeverityData; direction: SortOrder } } = { sort: { diff --git a/x-pack/solutions/security/plugins/security_solution/public/flyout/document_details/shared/components/alert_count_insight.test.tsx b/x-pack/solutions/security/plugins/security_solution/public/flyout/document_details/shared/components/alert_count_insight.test.tsx index e8e940d43954d..d9ae4673b1749 100644 --- a/x-pack/solutions/security/plugins/security_solution/public/flyout/document_details/shared/components/alert_count_insight.test.tsx +++ b/x-pack/solutions/security/plugins/security_solution/public/flyout/document_details/shared/components/alert_count_insight.test.tsx @@ -11,8 +11,7 @@ import { TestProviders } from '../../../../common/mock'; import { AlertCountInsight, getFormattedAlertStats } from './alert_count_insight'; import { useAlertsByStatus } from '../../../../overview/components/detection_response/alerts_by_status/use_alerts_by_status'; import type { ParsedAlertsData } from '../../../../overview/components/detection_response/alerts_by_status/types'; -import { getSeverityColor } from '../../../../overview/components/detection_response/utils'; -import type { EuiThemeComputed } from '@elastic/eui'; +import { SEVERITY_COLOR } from '../../../../overview/components/detection_response/utils'; jest.mock('../../../../common/lib/kibana'); @@ -24,7 +23,7 @@ jest.mock('@kbn/cloud-security-posture/src/hooks/use_misconfiguration_preview'); jest.mock( '../../../../overview/components/detection_response/alerts_by_status/use_alerts_by_status' ); -const mockEuiTheme = { colors: { vis: {} } } as EuiThemeComputed; + const fieldName = 'host.name'; const name = 'test host'; const testId = 'test'; @@ -112,29 +111,25 @@ describe('AlertCountInsight', () => { describe('getFormattedAlertStats', () => { it('should return alert stats', () => { - const severityColors = getSeverityColor(mockEuiTheme); - const alertStats = getFormattedAlertStats(mockAlertData, mockEuiTheme); + const alertStats = getFormattedAlertStats(mockAlertData); expect(alertStats).toEqual([ - { key: 'High', count: 2, color: severityColors.high }, - { key: 'Low', count: 2, color: severityColors.low }, - { key: 'Medium', count: 2, color: severityColors.medium }, - { key: 'Critical', count: 2, color: severityColors.critical }, + { key: 'High', count: 2, color: SEVERITY_COLOR.high }, + { key: 'Low', count: 2, color: SEVERITY_COLOR.low }, + { key: 'Medium', count: 2, color: SEVERITY_COLOR.medium }, + { key: 'Critical', count: 2, color: SEVERITY_COLOR.critical }, ]); }); it('should return empty array if no active alerts are available', () => { - const alertStats = getFormattedAlertStats( - { - closed: { - total: 2, - severities: [ - { key: 'high', value: 1, label: 'High' }, - { key: 'low', value: 1, label: 'Low' }, - ], - }, + const alertStats = getFormattedAlertStats({ + closed: { + total: 2, + severities: [ + { key: 'high', value: 1, label: 'High' }, + { key: 'low', value: 1, label: 'Low' }, + ], }, - mockEuiTheme - ); + }); expect(alertStats).toEqual([]); }); }); diff --git a/x-pack/solutions/security/plugins/security_solution/public/flyout/document_details/shared/components/alert_count_insight.tsx b/x-pack/solutions/security/plugins/security_solution/public/flyout/document_details/shared/components/alert_count_insight.tsx index 2db7e3a2f6d9d..9b5b056311354 100644 --- a/x-pack/solutions/security/plugins/security_solution/public/flyout/document_details/shared/components/alert_count_insight.tsx +++ b/x-pack/solutions/security/plugins/security_solution/public/flyout/document_details/shared/components/alert_count_insight.tsx @@ -7,8 +7,7 @@ import React, { useMemo } from 'react'; import { capitalize } from 'lodash'; -import type { EuiThemeComputed } from '@elastic/eui'; -import { EuiLoadingSpinner, EuiFlexItem, type EuiFlexGroupProps, useEuiTheme } from '@elastic/eui'; +import { EuiLoadingSpinner, EuiFlexItem, type EuiFlexGroupProps } from '@elastic/eui'; import { FormattedMessage } from '@kbn/i18n-react'; import { InsightDistributionBar } from './insight_distribution_bar'; import { getSeverityColor } from '../../../../detections/components/alerts_kpis/severity_level_panel/helpers'; @@ -50,10 +49,7 @@ interface AlertCountInsightProps { /** * Filters closed alerts and format the alert stats for the distribution bar */ -export const getFormattedAlertStats = ( - alertsData: ParsedAlertsData, - euiTheme: EuiThemeComputed -) => { +export const getFormattedAlertStats = (alertsData: ParsedAlertsData) => { const severityMap = new Map(); const filteredAlertsData: ParsedAlertsData = alertsData @@ -72,7 +68,7 @@ export const getFormattedAlertStats = ( const alertStats = Array.from(severityMap, ([key, count]) => ({ key: capitalize(key), count, - color: getSeverityColor(key, euiTheme), + color: getSeverityColor(key), })); return alertStats; }; @@ -86,7 +82,6 @@ export const AlertCountInsight: React.FC = ({ direction, 'data-test-subj': dataTestSubj, }) => { - const { euiTheme } = useEuiTheme(); const entityFilter = useMemo(() => ({ field: fieldName, value: name }), [fieldName, name]); const { to, from } = useGlobalTime(); const { signalIndexName } = useSignalIndex(); @@ -99,7 +94,7 @@ export const AlertCountInsight: React.FC = ({ from, }); - const alertStats = useMemo(() => getFormattedAlertStats(items, euiTheme), [euiTheme, items]); + const alertStats = useMemo(() => getFormattedAlertStats(items), [items]); const totalAlertCount = useMemo( () => alertStats.reduce((acc, item) => acc + item.count, 0), diff --git a/x-pack/solutions/security/plugins/security_solution/public/overview/components/detection_response/alerts_by_status/alerts_by_status.tsx b/x-pack/solutions/security/plugins/security_solution/public/overview/components/detection_response/alerts_by_status/alerts_by_status.tsx index 8b22a44fcef37..60dcceb894119 100644 --- a/x-pack/solutions/security/plugins/security_solution/public/overview/components/detection_response/alerts_by_status/alerts_by_status.tsx +++ b/x-pack/solutions/security/plugins/security_solution/public/overview/components/detection_response/alerts_by_status/alerts_by_status.tsx @@ -12,7 +12,6 @@ import { EuiProgress, EuiSpacer, EuiText, - useEuiTheme, useIsWithinMaxBreakpoint, useIsWithinMinBreakpoint, } from '@elastic/eui'; @@ -50,11 +49,11 @@ import { } from '../translations'; import { useQueryToggle } from '../../../../common/containers/query_toggle'; import { VIEW_ALERTS } from '../../../pages/translations'; -import { getSeverityColor } from '../utils'; +import { SEVERITY_COLOR } from '../utils'; import { FormattedCount } from '../../../../common/components/formatted_number'; import { ChartLabel } from './chart_label'; import { Legend } from '../../../../common/components/charts/legend'; -import { getEmptyDonutColor } from '../../../../common/components/charts/donutchart_empty'; +import { emptyDonutColor } from '../../../../common/components/charts/donutchart_empty'; import { LastUpdatedAt } from '../../../../common/components/last_updated_at'; import { LinkButton, useGetSecuritySolutionLinkProps } from '../../../../common/components/links'; import { useNavigateToTimeline } from '../hooks/use_navigate_to_timeline'; @@ -85,37 +84,12 @@ interface AlertsByStatusProps { signalIndexName: string | null; } -const useGetChartConfigs: () => { legendItems: LegendItem[]; fillColor: FillColor } = () => { - const { euiTheme } = useEuiTheme(); - const severityColor = useMemo(() => getSeverityColor(euiTheme), [euiTheme]); - const configs = useMemo( - () => [ - { key: 'critical' as Severity, label: STATUS_CRITICAL_LABEL, color: severityColor.critical }, - { key: 'high' as Severity, label: STATUS_HIGH_LABEL, color: severityColor.high }, - { key: 'medium' as Severity, label: STATUS_MEDIUM_LABEL, color: severityColor.medium }, - { key: 'low' as Severity, label: STATUS_LOW_LABEL, color: severityColor.low }, - ], - [severityColor] - ); - - const legendItems: LegendItem[] = useMemo( - () => - configs.map((d) => ({ - color: d.color, - field: ALERT_SEVERITY, - value: d.label, - })), - [configs] - ); - - const fillColor: FillColor = useCallback( - (dataName: string) => { - return configs.find((cfg) => cfg.label === dataName)?.color ?? getEmptyDonutColor(euiTheme); - }, - [configs, euiTheme] - ); - return { fillColor, legendItems }; -}; +const chartConfigs: Array<{ key: Severity; label: string; color: string }> = [ + { key: 'critical', label: STATUS_CRITICAL_LABEL, color: SEVERITY_COLOR.critical }, + { key: 'high', label: STATUS_HIGH_LABEL, color: SEVERITY_COLOR.high }, + { key: 'medium', label: STATUS_MEDIUM_LABEL, color: SEVERITY_COLOR.medium }, + { key: 'low', label: STATUS_LOW_LABEL, color: SEVERITY_COLOR.low }, +]; const eventKindSignalFilter: EntityFilter = { field: 'event.kind', @@ -175,7 +149,15 @@ export const AlertsByStatus = ({ to, from, }); - const { legendItems, fillColor } = useGetChartConfigs(); + const legendItems: LegendItem[] = useMemo( + () => + chartConfigs.map((d) => ({ + color: d.color, + field: ALERT_SEVERITY, + value: d.label, + })), + [] + ); const navigateToAlertsWithStatus = useCallback( (status: Status, level?: string) => @@ -232,6 +214,10 @@ export const AlertsByStatus = ({ const totalAlertsCount = isDonutChartEmbeddablesEnabled ? visualizationTotalAlerts : totalAlerts; + const fillColor: FillColor = useCallback((dataName: string) => { + return chartConfigs.find((cfg) => cfg.label === dataName)?.color ?? emptyDonutColor; + }, []); + return ( <> diff --git a/x-pack/solutions/security/plugins/security_solution/public/overview/components/detection_response/host_alerts_table/host_alerts_table.tsx b/x-pack/solutions/security/plugins/security_solution/public/overview/components/detection_response/host_alerts_table/host_alerts_table.tsx index 9b66c74473a86..3d4070d4cd8e3 100644 --- a/x-pack/solutions/security/plugins/security_solution/public/overview/components/detection_response/host_alerts_table/host_alerts_table.tsx +++ b/x-pack/solutions/security/plugins/security_solution/public/overview/components/detection_response/host_alerts_table/host_alerts_table.tsx @@ -17,7 +17,6 @@ import { EuiSpacer, EuiTablePagination, EuiToolTip, - useEuiTheme, } from '@elastic/eui'; import { ALERT_SEVERITY } from '@kbn/rule-data-utils'; @@ -31,7 +30,7 @@ import { HostDetailsLink } from '../../../../common/components/links'; import { useQueryToggle } from '../../../../common/containers/query_toggle'; import * as i18n from '../translations'; -import { ITEMS_PER_PAGE, getSeverityColor } from '../utils'; +import { ITEMS_PER_PAGE, SEVERITY_COLOR } from '../utils'; import type { HostAlertsItem } from './use_host_alerts_items'; import { useHostAlertsItems } from './use_host_alerts_items'; import { @@ -88,7 +87,7 @@ export const HostAlertsTable = React.memo(({ signalIndexName }: HostAlertsTableP filterQuery, }); - const columns = useGetTableColumns(openHostInAlerts); + const columns = useMemo(() => getTableColumns(openHostInAlerts), [openHostInAlerts]); return ( @@ -133,30 +132,54 @@ export const HostAlertsTable = React.memo(({ signalIndexName }: HostAlertsTableP HostAlertsTable.displayName = 'HostAlertsTable'; -const useGetTableColumns: GetTableColumns = (handleClick) => { - const { euiTheme } = useEuiTheme(); - const severityColors = getSeverityColor(euiTheme); - return useMemo( - () => [ - { - field: 'hostName', - name: i18n.HOST_ALERTS_HOSTNAME_COLUMN, - 'data-test-subj': 'hostSeverityAlertsTable-hostName', - render: (hostName: string) => ( - - - - ), - }, - { - field: 'totalAlerts', - name: i18n.ALERTS_TEXT, - 'data-test-subj': 'hostSeverityAlertsTable-totalAlerts', - render: (totalAlerts: number, { hostName }) => ( +const getTableColumns: GetTableColumns = (handleClick) => [ + { + field: 'hostName', + name: i18n.HOST_ALERTS_HOSTNAME_COLUMN, + 'data-test-subj': 'hostSeverityAlertsTable-hostName', + render: (hostName: string) => ( + + + + ), + }, + { + field: 'totalAlerts', + name: i18n.ALERTS_TEXT, + 'data-test-subj': 'hostSeverityAlertsTable-totalAlerts', + render: (totalAlerts: number, { hostName }) => ( + + handleClick({ hostName })} + > + + + + ), + }, + { + field: 'critical', + name: i18n.STATUS_CRITICAL_LABEL, + render: (count: number, { hostName }) => ( + + {count > 0 ? ( { triggerId={SecurityCellActionsTrigger.ALERTS_COUNT} sourcererScopeId={SourcererScopeName.detections} metadata={{ - andFilters: [{ field: 'kibana.alert.workflow_status', value: 'open' }], + andFilters: [ + { field: 'kibana.alert.severity', value: 'critical' }, + { field: 'kibana.alert.workflow_status', value: 'open' }, + ], }} > handleClick({ hostName })} + data-test-subj="hostSeverityAlertsTable-criticalLink" + onClick={() => handleClick({ hostName, severity: 'critical' })} > - + - ), - }, - { - field: 'critical', - name: i18n.STATUS_CRITICAL_LABEL, - render: (count: number, { hostName }) => ( - + )} + + ), + }, + { + field: 'high', + name: i18n.STATUS_HIGH_LABEL, + render: (count: number, { hostName }) => ( + + {count > 0 ? ( + - {count > 0 ? ( - - handleClick({ hostName, severity: 'critical' })} - > - - - - ) : ( + handleClick({ hostName, severity: 'high' })}> - )} - - ), - }, - { - field: 'high', - name: i18n.STATUS_HIGH_LABEL, - render: (count: number, { hostName }) => ( - - {count > 0 ? ( - - handleClick({ hostName, severity: 'high' })}> - - - - ) : ( - - )} - - ), - }, - { - field: 'medium', - name: i18n.STATUS_MEDIUM_LABEL, - render: (count: number, { hostName }) => ( - - {count > 0 ? ( - - handleClick({ hostName, severity: 'medium' })}> - - - - ) : ( + + + ) : ( + + )} + + ), + }, + { + field: 'medium', + name: i18n.STATUS_MEDIUM_LABEL, + render: (count: number, { hostName }) => ( + + {count > 0 ? ( + + handleClick({ hostName, severity: 'medium' })}> - )} - - ), - }, - { - field: 'low', - name: i18n.STATUS_LOW_LABEL, - render: (count: number, { hostName }) => ( - - {count > 0 ? ( - - handleClick({ hostName, severity: 'low' })}> - - - - ) : ( + + + ) : ( + + )} + + ), + }, + { + field: 'low', + name: i18n.STATUS_LOW_LABEL, + render: (count: number, { hostName }) => ( + + {count > 0 ? ( + + handleClick({ hostName, severity: 'low' })}> - )} - - ), - }, - ], - [severityColors, handleClick] - ); -}; + + + ) : ( + + )} + + ), + }, +]; diff --git a/x-pack/solutions/security/plugins/security_solution/public/overview/components/detection_response/rule_alerts_table/rule_alerts_table.tsx b/x-pack/solutions/security/plugins/security_solution/public/overview/components/detection_response/rule_alerts_table/rule_alerts_table.tsx index 32edddf5e1a6b..6c88a6e903ed7 100644 --- a/x-pack/solutions/security/plugins/security_solution/public/overview/components/detection_response/rule_alerts_table/rule_alerts_table.tsx +++ b/x-pack/solutions/security/plugins/security_solution/public/overview/components/detection_response/rule_alerts_table/rule_alerts_table.tsx @@ -17,7 +17,6 @@ import { EuiPanel, EuiSpacer, EuiToolTip, - useEuiTheme, } from '@elastic/eui'; import { FormattedRelative } from '@kbn/i18n-react'; import type { Severity } from '@kbn/securitysolution-io-ts-alerting-types'; @@ -26,7 +25,7 @@ import { SecurityCellActionsTrigger } from '../../../../app/actions/constants'; import { useNavigateToAlertsPageWithFilters } from '../../../../common/hooks/use_navigate_to_alerts_page_with_filters'; import { HeaderSection } from '../../../../common/components/header_section'; -import { getSeverityColor } from '../utils'; +import { SEVERITY_COLOR } from '../utils'; import * as i18n from '../translations'; import type { RuleAlertsItem } from './use_rule_alerts_items'; import { useRuleAlertsItems } from './use_rule_alerts_items'; @@ -55,90 +54,82 @@ export type GetTableColumns = (params: { const DETECTION_RESPONSE_RULE_ALERTS_QUERY_ID = 'detection-response-rule-alerts-severity-table' as const; -export const useGetTableColumns: GetTableColumns = ({ +export const getTableColumns: GetTableColumns = ({ getAppUrl, navigateTo, openRuleInAlertsPage, -}) => { - const { euiTheme } = useEuiTheme(); - const severityColor = useMemo(() => getSeverityColor(euiTheme), [euiTheme]); - - return useMemo( - () => [ - { - field: 'name', - name: i18n.RULE_ALERTS_COLUMN_RULE_NAME, - render: (name: string, { id }) => { - const url = getAppUrl({ deepLinkId: SecurityPageName.rules, path: `id/${id}` }); - return ( - - {/* eslint-disable-next-line @elastic/eui/href-or-on-click */} - { - if (ev) { - ev.preventDefault(); - } - navigateTo({ url }); - }} - > - {name} - - - ); - }, - }, - { - field: 'last_alert_at', - name: i18n.RULE_ALERTS_COLUMN_LAST_ALERT, - 'data-test-subj': 'severityRuleAlertsTable-lastAlertAt', - render: (lastAlertAt: string) => , - }, - { - field: 'alert_count', - name: i18n.RULE_ALERTS_COLUMN_ALERT_COUNT, - 'data-test-subj': 'severityRuleAlertsTable-alertCount', - render: (alertCount: number, { name }) => ( - [ + { + field: 'name', + name: i18n.RULE_ALERTS_COLUMN_RULE_NAME, + render: (name: string, { id }) => { + const url = getAppUrl({ deepLinkId: SecurityPageName.rules, path: `id/${id}` }); + return ( + + {/* eslint-disable-next-line @elastic/eui/href-or-on-click */} + { + if (ev) { + ev.preventDefault(); + } + navigateTo({ url }); }} > - openRuleInAlertsPage(name)} - > - - - - ), - }, - { - field: 'severity', - name: i18n.RULE_ALERTS_COLUMN_SEVERITY, - 'data-test-subj': 'severityRuleAlertsTable-severity', - render: (severity: Severity) => ( - {capitalize(severity)} - ), - }, - ], - [getAppUrl, navigateTo, openRuleInAlertsPage, severityColor] - ); -}; + {name} + + + ); + }, + }, + { + field: 'last_alert_at', + name: i18n.RULE_ALERTS_COLUMN_LAST_ALERT, + 'data-test-subj': 'severityRuleAlertsTable-lastAlertAt', + render: (lastAlertAt: string) => , + }, + { + field: 'alert_count', + name: i18n.RULE_ALERTS_COLUMN_ALERT_COUNT, + 'data-test-subj': 'severityRuleAlertsTable-alertCount', + render: (alertCount: number, { name }) => ( + + openRuleInAlertsPage(name)} + > + + + + ), + }, + { + field: 'severity', + name: i18n.RULE_ALERTS_COLUMN_SEVERITY, + 'data-test-subj': 'severityRuleAlertsTable-severity', + render: (severity: Severity) => ( + {capitalize(severity)} + ), + }, +]; export const RuleAlertsTable = React.memo(({ signalIndexName }) => { const { getAppUrl, navigateTo } = useNavigation(); @@ -172,7 +163,10 @@ export const RuleAlertsTable = React.memo(({ signalIndexNa }); }, [openAlertsPageWithFilter]); - const columns = useGetTableColumns({ getAppUrl, navigateTo, openRuleInAlertsPage }); + const columns = useMemo( + () => getTableColumns({ getAppUrl, navigateTo, openRuleInAlertsPage }), + [getAppUrl, navigateTo, openRuleInAlertsPage] + ); return ( diff --git a/x-pack/solutions/security/plugins/security_solution/public/overview/components/detection_response/user_alerts_table/user_alerts_table.tsx b/x-pack/solutions/security/plugins/security_solution/public/overview/components/detection_response/user_alerts_table/user_alerts_table.tsx index 471ecffac7eca..d2ec3efe63aa5 100644 --- a/x-pack/solutions/security/plugins/security_solution/public/overview/components/detection_response/user_alerts_table/user_alerts_table.tsx +++ b/x-pack/solutions/security/plugins/security_solution/public/overview/components/detection_response/user_alerts_table/user_alerts_table.tsx @@ -17,7 +17,6 @@ import { EuiSpacer, EuiTablePagination, EuiToolTip, - useEuiTheme, } from '@elastic/eui'; import { ALERT_SEVERITY } from '@kbn/rule-data-utils'; @@ -31,7 +30,7 @@ import { LastUpdatedAt } from '../../../../common/components/last_updated_at'; import { UserDetailsLink } from '../../../../common/components/links'; import { useQueryToggle } from '../../../../common/containers/query_toggle'; import * as i18n from '../translations'; -import { ITEMS_PER_PAGE, getSeverityColor } from '../utils'; +import { ITEMS_PER_PAGE, SEVERITY_COLOR } from '../utils'; import type { UserAlertsItem } from './use_user_alerts_items'; import { useUserAlertsItems } from './use_user_alerts_items'; import { SecurityCellActions, CellActionsMode } from '../../../../common/components/cell_actions'; @@ -84,7 +83,7 @@ export const UserAlertsTable = React.memo(({ signalIndexName }: UserAlertsTableP filterQuery, }); - const columns = useGetTableColumns(openUserInAlerts); + const columns = useMemo(() => getTableColumns(openUserInAlerts), [openUserInAlerts]); return ( @@ -129,30 +128,54 @@ export const UserAlertsTable = React.memo(({ signalIndexName }: UserAlertsTableP UserAlertsTable.displayName = 'UserAlertsTable'; -const useGetTableColumns: GetTableColumns = (handleClick) => { - const { euiTheme } = useEuiTheme(); - const severityColors = getSeverityColor(euiTheme); - return useMemo( - () => [ - { - field: 'userName', - name: i18n.USER_ALERTS_USERNAME_COLUMN, - 'data-test-subj': 'userSeverityAlertsTable-userName', - render: (userName: string) => ( - - - - ), - }, - { - field: 'totalAlerts', - name: i18n.ALERTS_TEXT, - 'data-test-subj': 'userSeverityAlertsTable-totalAlerts', - render: (totalAlerts: number, { userName }) => ( +const getTableColumns: GetTableColumns = (handleClick) => [ + { + field: 'userName', + name: i18n.USER_ALERTS_USERNAME_COLUMN, + 'data-test-subj': 'userSeverityAlertsTable-userName', + render: (userName: string) => ( + + + + ), + }, + { + field: 'totalAlerts', + name: i18n.ALERTS_TEXT, + 'data-test-subj': 'userSeverityAlertsTable-totalAlerts', + render: (totalAlerts: number, { userName }) => ( + + handleClick({ userName })} + > + + + + ), + }, + { + field: 'critical', + name: i18n.STATUS_CRITICAL_LABEL, + render: (count: number, { userName }) => ( + + {count > 0 ? ( { triggerId={SecurityCellActionsTrigger.ALERTS_COUNT} sourcererScopeId={SourcererScopeName.detections} metadata={{ - andFilters: [{ field: 'kibana.alert.workflow_status', value: 'open' }], + andFilters: [ + { field: 'kibana.alert.severity', value: 'critical' }, + { field: 'kibana.alert.workflow_status', value: 'open' }, + ], }} > handleClick({ userName })} + data-test-subj="userSeverityAlertsTable-criticalLink" + onClick={() => handleClick({ userName, severity: 'critical' })} > - + - ), - }, - { - field: 'critical', - name: i18n.STATUS_CRITICAL_LABEL, - render: (count: number, { userName }) => ( - + )} + + ), + }, + { + field: 'high', + name: i18n.STATUS_HIGH_LABEL, + render: (count: number, { userName }) => ( + + {count > 0 ? ( + - {count > 0 ? ( - - handleClick({ userName, severity: 'critical' })} - > - - - - ) : ( + handleClick({ userName, severity: 'high' })}> - )} - - ), - }, - { - field: 'high', - name: i18n.STATUS_HIGH_LABEL, - render: (count: number, { userName }) => ( - - {count > 0 ? ( - - handleClick({ userName, severity: 'high' })}> - - - - ) : ( - - )} - - ), - }, - { - field: 'medium', - name: i18n.STATUS_MEDIUM_LABEL, - render: (count: number, { userName }) => ( - - {count > 0 ? ( - - handleClick({ userName, severity: 'medium' })}> - - - - ) : ( + + + ) : ( + + )} + + ), + }, + { + field: 'medium', + name: i18n.STATUS_MEDIUM_LABEL, + render: (count: number, { userName }) => ( + + {count > 0 ? ( + + handleClick({ userName, severity: 'medium' })}> - )} - - ), - }, - { - field: 'low', - name: i18n.STATUS_LOW_LABEL, - render: (count: number, { userName }) => ( - - {count > 0 ? ( - - handleClick({ userName, severity: 'low' })}> - - - - ) : ( + + + ) : ( + + )} + + ), + }, + { + field: 'low', + name: i18n.STATUS_LOW_LABEL, + render: (count: number, { userName }) => ( + + {count > 0 ? ( + + handleClick({ userName, severity: 'low' })}> - )} - - ), - }, - ], - [ - handleClick, - severityColors.critical, - severityColors.high, - severityColors.low, - severityColors.medium, - ] - ); -}; + + + ) : ( + + )} + + ), + }, +]; diff --git a/x-pack/solutions/security/plugins/security_solution/public/overview/components/detection_response/utils.tsx b/x-pack/solutions/security/plugins/security_solution/public/overview/components/detection_response/utils.tsx index a4a8f4e7ccf93..c3be038fde415 100644 --- a/x-pack/solutions/security/plugins/security_solution/public/overview/components/detection_response/utils.tsx +++ b/x-pack/solutions/security/plugins/security_solution/public/overview/components/detection_response/utils.tsx @@ -4,9 +4,6 @@ * 2.0; you may not use this file except in compliance with the Elastic License * 2.0. */ - -import type { EuiThemeComputed } from '@elastic/eui'; - // @deprecated, use getSeverityColor instead export const SEVERITY_COLOR = { critical: '#E7664C', @@ -15,14 +12,6 @@ export const SEVERITY_COLOR = { low: '#54B399', } as const; -export const getSeverityColor = (euiTheme: EuiThemeComputed) => - ({ - critical: euiTheme.colors.vis.euiColorVis9, - high: euiTheme.colors.vis.euiColorVis7, - medium: euiTheme.colors.vis.euiColorVis5, - low: euiTheme.colors.vis.euiColorVis0, - } as const); - export const ITEMS_PER_PAGE = 4; const MAX_ALLOWED_RESULTS = 100; From 955ef201c1d0042036817a91dffa157fc0ab352d Mon Sep 17 00:00:00 2001 From: Angela Chuang Date: Fri, 3 Jan 2025 15:22:44 +0000 Subject: [PATCH 12/15] update attributes --- .../__snapshots__/rule_preview.test.ts.snap | 44 ++++++++-------- .../alerts/alerts_by_status_donut.test.ts | 6 ++- .../common/alerts/alerts_by_status_donut.ts | 15 +++--- .../common/alerts/alerts_histogram.test.ts | 7 ++- .../common/alerts/alerts_histogram.ts | 23 ++++----- .../common/alerts/rule_preview.test.ts | 8 ++- .../common/alerts/rule_preview.ts | 23 ++++----- .../common/authentication.test.ts | 11 ++++ .../lens_attributes/common/authentication.ts | 51 ++++++++++--------- .../lens_attributes/common/event.test.ts | 7 ++- .../lens_attributes/common/events.ts | 18 ++++--- .../common/external_alert.test.ts | 9 ++++ .../lens_attributes/common/external_alert.ts | 33 ++++++------ .../network/dns_top_domains.test.ts | 9 ++++ .../network/dns_top_domains.ts | 33 ++++++------ .../kpi_unique_private_ips_bar.test.ts | 11 ++++ .../network/kpi_unique_private_ips_bar.ts | 14 ++--- .../kpi_user_authentications_area.test.ts | 11 ++++ .../users/kpi_user_authentications_area.ts | 14 ++--- .../kpi_user_authentications_bar.test.ts | 11 ++++ .../users/kpi_user_authentications_bar.ts | 14 ++--- .../use_lens_attributes.test.tsx | 9 ++++ .../severity_level_panel/helpers.tsx | 1 - .../components/detection_response/utils.tsx | 2 +- 24 files changed, 238 insertions(+), 146 deletions(-) diff --git a/x-pack/solutions/security/plugins/security_solution/public/common/components/visualization_actions/lens_attributes/common/alerts/__snapshots__/rule_preview.test.ts.snap b/x-pack/solutions/security/plugins/security_solution/public/common/components/visualization_actions/lens_attributes/common/alerts/__snapshots__/rule_preview.test.ts.snap index 0139cc872035e..ce83bd5c12c33 100644 --- a/x-pack/solutions/security/plugins/security_solution/public/common/components/visualization_actions/lens_attributes/common/alerts/__snapshots__/rule_preview.test.ts.snap +++ b/x-pack/solutions/security/plugins/security_solution/public/common/components/visualization_actions/lens_attributes/common/alerts/__snapshots__/rule_preview.test.ts.snap @@ -23,12 +23,12 @@ Object { "layers": Object { "mockLayerId": Object { "columnOrder": Array [ - "e92c8920-0449-4564-81f4-8945517817a4", - "eba07b4d-766d-49d7-8435-d40367d3d055", - "9c89324b-0c59-4403-9698-d989a09dc5a8", + "mockColumnTopValuesId", + "mockColumnTimestampId", + "mockColumnCountOfRecordsId", ], "columns": Object { - "9c89324b-0c59-4403-9698-d989a09dc5a8": Object { + "mockColumnCountOfRecordsId": Object { "dataType": "number", "isBucketed": false, "label": "Count of records", @@ -39,7 +39,20 @@ Object { "scale": "ratio", "sourceField": "___records___", }, - "e92c8920-0449-4564-81f4-8945517817a4": Object { + "mockColumnTimestampId": Object { + "dataType": "date", + "isBucketed": true, + "label": "@timestamp", + "operationType": "date_histogram", + "params": Object { + "dropPartials": false, + "includeEmptyRows": true, + "interval": "auto", + }, + "scale": "interval", + "sourceField": "@timestamp", + }, + "mockColumnTopValuesId": Object { "dataType": "string", "isBucketed": true, "label": "Top 10 values of event.category", @@ -51,7 +64,7 @@ Object { "includeIsRegex": false, "missingBucket": false, "orderBy": Object { - "columnId": "9c89324b-0c59-4403-9698-d989a09dc5a8", + "columnId": "mockColumnCountOfRecordsId", "type": "column", }, "orderDirection": "desc", @@ -64,19 +77,6 @@ Object { "scale": "ordinal", "sourceField": "event.category", }, - "eba07b4d-766d-49d7-8435-d40367d3d055": Object { - "dataType": "date", - "isBucketed": true, - "label": "@timestamp", - "operationType": "date_histogram", - "params": Object { - "dropPartials": false, - "includeEmptyRows": true, - "interval": "auto", - }, - "scale": "interval", - "sourceField": "@timestamp", - }, }, "incompleteColumns": Object {}, "sampling": 1, @@ -145,15 +145,15 @@ Object { "layers": Array [ Object { "accessors": Array [ - "9c89324b-0c59-4403-9698-d989a09dc5a8", + "mockColumnCountOfRecordsId", ], "layerId": "mockLayerId", "layerType": "data", "position": "top", "seriesType": "bar_stacked", "showGridlines": false, - "splitAccessor": "e92c8920-0449-4564-81f4-8945517817a4", - "xAccessor": "eba07b4d-766d-49d7-8435-d40367d3d055", + "splitAccessor": "mockColumnTopValuesId", + "xAccessor": "mockColumnTimestampId", }, ], "legend": Object { diff --git a/x-pack/solutions/security/plugins/security_solution/public/common/components/visualization_actions/lens_attributes/common/alerts/alerts_by_status_donut.test.ts b/x-pack/solutions/security/plugins/security_solution/public/common/components/visualization_actions/lens_attributes/common/alerts/alerts_by_status_donut.test.ts index ee6c7117093fa..ffd8a215c330d 100644 --- a/x-pack/solutions/security/plugins/security_solution/public/common/components/visualization_actions/lens_attributes/common/alerts/alerts_by_status_donut.test.ts +++ b/x-pack/solutions/security/plugins/security_solution/public/common/components/visualization_actions/lens_attributes/common/alerts/alerts_by_status_donut.test.ts @@ -13,7 +13,11 @@ import { useLensAttributes } from '../../../use_lens_attributes'; import { getAlertsByStatusAttributes } from './alerts_by_status_donut'; jest.mock('uuid', () => ({ - v4: jest.fn().mockReturnValue('b9b43606-7ff7-46ae-a47c-85bed80fab9a'), + v4: jest + .fn() + .mockReturnValueOnce('b9b43606-7ff7-46ae-a47c-85bed80fab9a') + .mockReturnValueOnce('a9b43606-7ff7-46ae-a47c-85bed80fab9a') + .mockReturnValueOnce('21cc4a49-3780-4b1a-be28-f02fa5303d24'), })); jest.mock('../../../../../../sourcerer/containers', () => ({ diff --git a/x-pack/solutions/security/plugins/security_solution/public/common/components/visualization_actions/lens_attributes/common/alerts/alerts_by_status_donut.ts b/x-pack/solutions/security/plugins/security_solution/public/common/components/visualization_actions/lens_attributes/common/alerts/alerts_by_status_donut.ts index 75f51eec1f5de..ca456292a0797 100644 --- a/x-pack/solutions/security/plugins/security_solution/public/common/components/visualization_actions/lens_attributes/common/alerts/alerts_by_status_donut.ts +++ b/x-pack/solutions/security/plugins/security_solution/public/common/components/visualization_actions/lens_attributes/common/alerts/alerts_by_status_donut.ts @@ -7,6 +7,8 @@ import { v4 as uuidv4 } from 'uuid'; import type { GetLensAttributes } from '../../../types'; const layerId = uuidv4(); +const columnSeverity = uuidv4(); +const columnRecord = uuidv4(); export const getAlertsByStatusAttributes: GetLensAttributes = ({ stackByField = 'kibana.alert.workflow_status', @@ -22,8 +24,8 @@ export const getAlertsByStatusAttributes: GetLensAttributes = ({ layers: [ { layerId, - primaryGroups: ['a9b43606-7ff7-46ae-a47c-85bed80fab9a'], - metrics: ['21cc4a49-3780-4b1a-be28-f02fa5303d24'], + primaryGroups: [columnSeverity], + metrics: [columnRecord], numberDisplay: 'value', categoryDisplay: 'hide', legendDisplay: 'hide', @@ -69,7 +71,7 @@ export const getAlertsByStatusAttributes: GetLensAttributes = ({ layers: { [layerId]: { columns: { - 'a9b43606-7ff7-46ae-a47c-85bed80fab9a': { + [columnSeverity]: { label: 'Filters', dataType: 'string', operationType: 'filters', @@ -108,7 +110,7 @@ export const getAlertsByStatusAttributes: GetLensAttributes = ({ ], }, }, - '21cc4a49-3780-4b1a-be28-f02fa5303d24': { + [columnRecord]: { label: 'Count of records', dataType: 'number', operationType: 'count', @@ -124,10 +126,7 @@ export const getAlertsByStatusAttributes: GetLensAttributes = ({ }, }, }, - columnOrder: [ - 'a9b43606-7ff7-46ae-a47c-85bed80fab9a', - '21cc4a49-3780-4b1a-be28-f02fa5303d24', - ], + columnOrder: [columnSeverity, columnRecord], sampling: 1, incompleteColumns: {}, }, diff --git a/x-pack/solutions/security/plugins/security_solution/public/common/components/visualization_actions/lens_attributes/common/alerts/alerts_histogram.test.ts b/x-pack/solutions/security/plugins/security_solution/public/common/components/visualization_actions/lens_attributes/common/alerts/alerts_histogram.test.ts index e853ba80d01aa..fd6699ccbc599 100644 --- a/x-pack/solutions/security/plugins/security_solution/public/common/components/visualization_actions/lens_attributes/common/alerts/alerts_histogram.test.ts +++ b/x-pack/solutions/security/plugins/security_solution/public/common/components/visualization_actions/lens_attributes/common/alerts/alerts_histogram.test.ts @@ -13,7 +13,12 @@ import { useLensAttributes } from '../../../use_lens_attributes'; import { getAlertsHistogramLensAttributes } from './alerts_histogram'; jest.mock('uuid', () => ({ - v4: jest.fn().mockReturnValue('0039eb0c-9a1a-4687-ae54-0f4e239bec75'), + v4: jest + .fn() + .mockReturnValueOnce('0039eb0c-9a1a-4687-ae54-0f4e239bec75') + .mockReturnValueOnce('e09e0380-0740-4105-becc-0a4ca12e3944') + .mockReturnValueOnce('34919782-4546-43a5-b668-06ac934d3acd') + .mockReturnValueOnce('aac9d7d0-13a3-480a-892b-08207a787926'), })); jest.mock('../../../../../../sourcerer/containers', () => ({ diff --git a/x-pack/solutions/security/plugins/security_solution/public/common/components/visualization_actions/lens_attributes/common/alerts/alerts_histogram.ts b/x-pack/solutions/security/plugins/security_solution/public/common/components/visualization_actions/lens_attributes/common/alerts/alerts_histogram.ts index 977819651edd8..e0469a55bf565 100644 --- a/x-pack/solutions/security/plugins/security_solution/public/common/components/visualization_actions/lens_attributes/common/alerts/alerts_histogram.ts +++ b/x-pack/solutions/security/plugins/security_solution/public/common/components/visualization_actions/lens_attributes/common/alerts/alerts_histogram.ts @@ -7,6 +7,9 @@ import { v4 as uuidv4 } from 'uuid'; import type { GetLensAttributes } from '../../../types'; const layerId = uuidv4(); +const columnCountOfRecords = uuidv4(); +const columnTopValues = uuidv4(); +const columnTimestamp = uuidv4(); export const getAlertsHistogramLensAttributes: GetLensAttributes = ({ stackByField = 'kibana.alert.rule.name', @@ -30,13 +33,13 @@ export const getAlertsHistogramLensAttributes: GetLensAttributes = ({ layers: [ { layerId, - accessors: ['e09e0380-0740-4105-becc-0a4ca12e3944'], + accessors: [columnCountOfRecords], position: 'top', seriesType: 'bar_stacked', showGridlines: false, layerType: 'data', - xAccessor: 'aac9d7d0-13a3-480a-892b-08207a787926', - splitAccessor: '34919782-4546-43a5-b668-06ac934d3acd', + xAccessor: columnTimestamp, + splitAccessor: columnTopValues, }, ], yRightExtent: { @@ -61,7 +64,7 @@ export const getAlertsHistogramLensAttributes: GetLensAttributes = ({ layers: { [layerId]: { columns: { - 'aac9d7d0-13a3-480a-892b-08207a787926': { + [columnTimestamp]: { label: '@timestamp', dataType: 'date', operationType: 'date_histogram', @@ -73,7 +76,7 @@ export const getAlertsHistogramLensAttributes: GetLensAttributes = ({ includeEmptyRows: true, }, }, - 'e09e0380-0740-4105-becc-0a4ca12e3944': { + [columnCountOfRecords]: { label: 'Count of records', dataType: 'number', operationType: 'count', @@ -82,7 +85,7 @@ export const getAlertsHistogramLensAttributes: GetLensAttributes = ({ sourceField: '___records___', params: { emptyAsNull: true }, }, - '34919782-4546-43a5-b668-06ac934d3acd': { + [columnTopValues]: { label: `Top values of ${stackByField}`, dataType: 'string', operationType: 'terms', @@ -93,7 +96,7 @@ export const getAlertsHistogramLensAttributes: GetLensAttributes = ({ size: 1000, orderBy: { type: 'column', - columnId: 'e09e0380-0740-4105-becc-0a4ca12e3944', + columnId: columnCountOfRecords, }, orderDirection: 'desc', otherBucket: true, @@ -105,11 +108,7 @@ export const getAlertsHistogramLensAttributes: GetLensAttributes = ({ }, }, }, - columnOrder: [ - '34919782-4546-43a5-b668-06ac934d3acd', - 'aac9d7d0-13a3-480a-892b-08207a787926', - 'e09e0380-0740-4105-becc-0a4ca12e3944', - ], + columnOrder: [columnTopValues, columnTimestamp, columnCountOfRecords], incompleteColumns: {}, }, }, diff --git a/x-pack/solutions/security/plugins/security_solution/public/common/components/visualization_actions/lens_attributes/common/alerts/rule_preview.test.ts b/x-pack/solutions/security/plugins/security_solution/public/common/components/visualization_actions/lens_attributes/common/alerts/rule_preview.test.ts index 0d0eae638afeb..8164464a97731 100644 --- a/x-pack/solutions/security/plugins/security_solution/public/common/components/visualization_actions/lens_attributes/common/alerts/rule_preview.test.ts +++ b/x-pack/solutions/security/plugins/security_solution/public/common/components/visualization_actions/lens_attributes/common/alerts/rule_preview.test.ts @@ -15,7 +15,13 @@ const mockInternalReferenceId = 'mockInternalReferenceId'; const mockRuleId = 'mockRuleId'; jest.mock('uuid', () => ({ - v4: jest.fn().mockReturnValueOnce('mockLayerId').mockReturnValueOnce('mockInternalReferenceId'), + v4: jest + .fn() + .mockReturnValueOnce('mockLayerId') + .mockReturnValueOnce('mockInternalReferenceId') + .mockReturnValueOnce('mockColumnCountOfRecordsId') + .mockReturnValueOnce('mockColumnTimestampId') + .mockReturnValueOnce('mockColumnTopValuesId'), })); jest.mock('../../../../../../sourcerer/containers', () => ({ diff --git a/x-pack/solutions/security/plugins/security_solution/public/common/components/visualization_actions/lens_attributes/common/alerts/rule_preview.ts b/x-pack/solutions/security/plugins/security_solution/public/common/components/visualization_actions/lens_attributes/common/alerts/rule_preview.ts index 2bd1b2a26b5a4..8fbd5a19751e3 100644 --- a/x-pack/solutions/security/plugins/security_solution/public/common/components/visualization_actions/lens_attributes/common/alerts/rule_preview.ts +++ b/x-pack/solutions/security/plugins/security_solution/public/common/components/visualization_actions/lens_attributes/common/alerts/rule_preview.ts @@ -9,6 +9,9 @@ import type { GetLensAttributes } from '../../../types'; const layerId = uuidv4(); const internalReferenceId = uuidv4(); +const columnCountOfRecords = uuidv4(); +const columnTimestamp = uuidv4(); +const columnTopValues = uuidv4(); export const getRulePreviewLensAttributes: GetLensAttributes = ({ stackByField = 'event.category', @@ -31,13 +34,13 @@ export const getRulePreviewLensAttributes: GetLensAttributes = ({ layers: [ { layerId, - accessors: ['9c89324b-0c59-4403-9698-d989a09dc5a8'], + accessors: [columnCountOfRecords], position: 'top', seriesType: 'bar_stacked', showGridlines: false, layerType: 'data', - xAccessor: 'eba07b4d-766d-49d7-8435-d40367d3d055', - splitAccessor: 'e92c8920-0449-4564-81f4-8945517817a4', + xAccessor: columnTimestamp, + splitAccessor: columnTopValues, }, ], yTitle: '', @@ -77,7 +80,7 @@ export const getRulePreviewLensAttributes: GetLensAttributes = ({ layers: { [layerId]: { columns: { - '9c89324b-0c59-4403-9698-d989a09dc5a8': { + [columnCountOfRecords]: { label: 'Count of records', dataType: 'number', operationType: 'count', @@ -88,7 +91,7 @@ export const getRulePreviewLensAttributes: GetLensAttributes = ({ emptyAsNull: true, }, }, - 'eba07b4d-766d-49d7-8435-d40367d3d055': { + [columnTimestamp]: { label: '@timestamp', dataType: 'date', operationType: 'date_histogram', @@ -101,7 +104,7 @@ export const getRulePreviewLensAttributes: GetLensAttributes = ({ dropPartials: false, }, }, - 'e92c8920-0449-4564-81f4-8945517817a4': { + [columnTopValues]: { label: `Top 10 values of ${stackByField}`, dataType: 'string', operationType: 'terms', @@ -112,7 +115,7 @@ export const getRulePreviewLensAttributes: GetLensAttributes = ({ size: 10, orderBy: { type: 'column', - columnId: '9c89324b-0c59-4403-9698-d989a09dc5a8', + columnId: columnCountOfRecords, }, orderDirection: 'desc', otherBucket: true, @@ -127,11 +130,7 @@ export const getRulePreviewLensAttributes: GetLensAttributes = ({ }, }, }, - columnOrder: [ - 'e92c8920-0449-4564-81f4-8945517817a4', - 'eba07b4d-766d-49d7-8435-d40367d3d055', - '9c89324b-0c59-4403-9698-d989a09dc5a8', - ], + columnOrder: [columnTopValues, columnTimestamp, columnCountOfRecords], sampling: 1, incompleteColumns: {}, }, diff --git a/x-pack/solutions/security/plugins/security_solution/public/common/components/visualization_actions/lens_attributes/common/authentication.test.ts b/x-pack/solutions/security/plugins/security_solution/public/common/components/visualization_actions/lens_attributes/common/authentication.test.ts index d4b5cbe2f9e1c..65438f0204dbd 100644 --- a/x-pack/solutions/security/plugins/security_solution/public/common/components/visualization_actions/lens_attributes/common/authentication.test.ts +++ b/x-pack/solutions/security/plugins/security_solution/public/common/components/visualization_actions/lens_attributes/common/authentication.test.ts @@ -12,6 +12,17 @@ import { useLensAttributes } from '../../use_lens_attributes'; import { getAuthenticationLensAttributes } from './authentication'; +jest.mock('uuid', () => ({ + v4: jest + .fn() + .mockReturnValueOnce('3fd0c5d5-f762-4a27-8c56-14eee0223e13') + .mockReturnValueOnce('bef502be-e5ff-442f-9e3e-229f86ca2afa') + .mockReturnValueOnce('cded27f7-8ef8-458c-8d9b-70db48ae340d') + .mockReturnValueOnce('a3bf9dc1-c8d2-42d6-9e60-31892a4c509e') + .mockReturnValueOnce('b41a2958-650b-470a-84c4-c6fd8f0c6d37') + .mockReturnValueOnce('5417777d-d9d9-4268-9cdc-eb29b873bd65'), +})); + jest.mock('../../../../../sourcerer/containers', () => ({ useSourcererDataView: jest.fn().mockReturnValue({ selectedPatterns: ['auditbeat-mytest-*'], diff --git a/x-pack/solutions/security/plugins/security_solution/public/common/components/visualization_actions/lens_attributes/common/authentication.ts b/x-pack/solutions/security/plugins/security_solution/public/common/components/visualization_actions/lens_attributes/common/authentication.ts index fba1eb563caa9..cc07c8dfb1428 100644 --- a/x-pack/solutions/security/plugins/security_solution/public/common/components/visualization_actions/lens_attributes/common/authentication.ts +++ b/x-pack/solutions/security/plugins/security_solution/public/common/components/visualization_actions/lens_attributes/common/authentication.ts @@ -4,13 +4,20 @@ * 2.0; you may not use this file except in compliance with the Elastic License * 2.0. */ - +import { v4 as uuidv4 } from 'uuid'; import { AUTHENTICATION_FAILURE_CHART_LABEL, AUTHENTICATION_SUCCESS_CHART_LABEL, } from '../../translations'; import type { LensAttributes, GetLensAttributes } from '../../types'; +const layerAuthenticationSuccess = uuidv4(); +const layerAuthenticationFailure = uuidv4(); +const columnTimestampFailure = uuidv4(); +const columnEventOutcomeFailure = uuidv4(); +const columnTimestampSuccess = uuidv4(); +const columnEventOutcomeSuccess = uuidv4(); + export const getAuthenticationLensAttributes: GetLensAttributes = ({ euiTheme }) => ({ title: 'Authentication', @@ -28,29 +35,29 @@ export const getAuthenticationLensAttributes: GetLensAttributes = ({ euiTheme }) preferredSeriesType: 'bar_stacked', layers: [ { - layerId: '3fd0c5d5-f762-4a27-8c56-14eee0223e13', - accessors: ['5417777d-d9d9-4268-9cdc-eb29b873bd65'], + layerId: layerAuthenticationSuccess, + accessors: [columnEventOutcomeSuccess], position: 'top', seriesType: 'bar_stacked', showGridlines: false, layerType: 'data', - xAccessor: 'b41a2958-650b-470a-84c4-c6fd8f0c6d37', + xAccessor: columnTimestampSuccess, yConfig: [ { - forAccessor: '5417777d-d9d9-4268-9cdc-eb29b873bd65', + forAccessor: columnEventOutcomeSuccess, color: euiTheme.colors.vis.euiColorVis0, }, ], }, { - layerId: 'bef502be-e5ff-442f-9e3e-229f86ca2afa', + layerId: layerAuthenticationFailure, seriesType: 'bar_stacked', - accessors: ['a3bf9dc1-c8d2-42d6-9e60-31892a4c509e'], + accessors: [columnEventOutcomeFailure], layerType: 'data', - xAccessor: 'cded27f7-8ef8-458c-8d9b-70db48ae340d', + xAccessor: columnTimestampFailure, yConfig: [ { - forAccessor: 'a3bf9dc1-c8d2-42d6-9e60-31892a4c509e', + forAccessor: columnEventOutcomeFailure, color: euiTheme.colors.vis.euiColorVis7, }, ], @@ -102,9 +109,9 @@ export const getAuthenticationLensAttributes: GetLensAttributes = ({ euiTheme }) datasourceStates: { formBased: { layers: { - '3fd0c5d5-f762-4a27-8c56-14eee0223e13': { + [layerAuthenticationSuccess]: { columns: { - 'b41a2958-650b-470a-84c4-c6fd8f0c6d37': { + [columnTimestampSuccess]: { label: '@timestamp', dataType: 'date', operationType: 'date_histogram', @@ -115,7 +122,7 @@ export const getAuthenticationLensAttributes: GetLensAttributes = ({ euiTheme }) interval: 'auto', }, }, - '5417777d-d9d9-4268-9cdc-eb29b873bd65': { + [columnEventOutcomeSuccess]: { label: AUTHENTICATION_SUCCESS_CHART_LABEL, dataType: 'number', operationType: 'count', @@ -129,15 +136,12 @@ export const getAuthenticationLensAttributes: GetLensAttributes = ({ euiTheme }) customLabel: true, }, }, - columnOrder: [ - 'b41a2958-650b-470a-84c4-c6fd8f0c6d37', - '5417777d-d9d9-4268-9cdc-eb29b873bd65', - ], + columnOrder: [columnTimestampSuccess, columnEventOutcomeSuccess], incompleteColumns: {}, }, - 'bef502be-e5ff-442f-9e3e-229f86ca2afa': { + [layerAuthenticationFailure]: { columns: { - 'cded27f7-8ef8-458c-8d9b-70db48ae340d': { + [columnTimestampFailure]: { label: '@timestamp', dataType: 'date', operationType: 'date_histogram', @@ -148,7 +152,7 @@ export const getAuthenticationLensAttributes: GetLensAttributes = ({ euiTheme }) interval: 'auto', }, }, - 'a3bf9dc1-c8d2-42d6-9e60-31892a4c509e': { + [columnEventOutcomeFailure]: { label: AUTHENTICATION_FAILURE_CHART_LABEL, dataType: 'number', operationType: 'count', @@ -162,10 +166,7 @@ export const getAuthenticationLensAttributes: GetLensAttributes = ({ euiTheme }) customLabel: true, }, }, - columnOrder: [ - 'cded27f7-8ef8-458c-8d9b-70db48ae340d', - 'a3bf9dc1-c8d2-42d6-9e60-31892a4c509e', - ], + columnOrder: [columnTimestampFailure, columnEventOutcomeFailure], incompleteColumns: {}, }, }, @@ -181,12 +182,12 @@ export const getAuthenticationLensAttributes: GetLensAttributes = ({ euiTheme }) { type: 'index-pattern', id: '{dataViewId}', - name: 'indexpattern-datasource-layer-3fd0c5d5-f762-4a27-8c56-14eee0223e13', + name: `indexpattern-datasource-layer-${layerAuthenticationSuccess}`, }, { type: 'index-pattern', id: '{dataViewId}', - name: 'indexpattern-datasource-layer-bef502be-e5ff-442f-9e3e-229f86ca2afa', + name: `indexpattern-datasource-layer-${layerAuthenticationFailure}`, }, { type: 'index-pattern', diff --git a/x-pack/solutions/security/plugins/security_solution/public/common/components/visualization_actions/lens_attributes/common/event.test.ts b/x-pack/solutions/security/plugins/security_solution/public/common/components/visualization_actions/lens_attributes/common/event.test.ts index be87445ba2618..1f2d248697405 100644 --- a/x-pack/solutions/security/plugins/security_solution/public/common/components/visualization_actions/lens_attributes/common/event.test.ts +++ b/x-pack/solutions/security/plugins/security_solution/public/common/components/visualization_actions/lens_attributes/common/event.test.ts @@ -14,7 +14,12 @@ import { useLensAttributes } from '../../use_lens_attributes'; import { getEventsHistogramLensAttributes, stackByFieldAccessorId } from './events'; jest.mock('uuid', () => ({ - v4: jest.fn().mockReturnValue('0039eb0c-9a1a-4687-ae54-0f4e239bec75'), + v4: jest + .fn() + .mockReturnValue('0039eb0c-9a1a-4687-ae54-0f4e239bec75') + .mockReturnValue('34919782-4546-43a5-b668-06ac934d3acd') + .mockReturnValue('aac9d7d0-13a3-480a-892b-08207a787926') + .mockReturnValue('e09e0380-0740-4105-becc-0a4ca12e3944'), })); jest.mock('../../../../../sourcerer/containers', () => ({ diff --git a/x-pack/solutions/security/plugins/security_solution/public/common/components/visualization_actions/lens_attributes/common/events.ts b/x-pack/solutions/security/plugins/security_solution/public/common/components/visualization_actions/lens_attributes/common/events.ts index 02596a64b8470..97cc37e9297e9 100644 --- a/x-pack/solutions/security/plugins/security_solution/public/common/components/visualization_actions/lens_attributes/common/events.ts +++ b/x-pack/solutions/security/plugins/security_solution/public/common/components/visualization_actions/lens_attributes/common/events.ts @@ -9,7 +9,9 @@ import type { GetLensAttributes } from '../../types'; const layerId = uuidv4(); // Exported for testing purposes -export const stackByFieldAccessorId = '34919782-4546-43a5-b668-06ac934d3acd'; +export const stackByFieldAccessorId = uuidv4(); +export const columnTimestampId = uuidv4(); +export const columnCountOfRecordsId = uuidv4(); export const getEventsHistogramLensAttributes: GetLensAttributes = ({ stackByField, @@ -34,12 +36,12 @@ export const getEventsHistogramLensAttributes: GetLensAttributes = ({ layers: [ { layerId, - accessors: ['e09e0380-0740-4105-becc-0a4ca12e3944'], + accessors: [columnCountOfRecordsId], position: 'top', seriesType: 'bar_stacked', showGridlines: false, layerType: 'data', - xAccessor: 'aac9d7d0-13a3-480a-892b-08207a787926', + xAccessor: columnTimestampId, splitAccessor: stackByField ? stackByFieldAccessorId : undefined, }, ], @@ -65,7 +67,7 @@ export const getEventsHistogramLensAttributes: GetLensAttributes = ({ layers: { [layerId]: { columns: { - 'aac9d7d0-13a3-480a-892b-08207a787926': { + [columnTimestampId]: { label: '@timestamp', dataType: 'date', operationType: 'date_histogram', @@ -77,7 +79,7 @@ export const getEventsHistogramLensAttributes: GetLensAttributes = ({ includeEmptyRows: true, }, }, - 'e09e0380-0740-4105-becc-0a4ca12e3944': { + [columnCountOfRecordsId]: { label: 'Count of records', dataType: 'number', operationType: 'count', @@ -98,7 +100,7 @@ export const getEventsHistogramLensAttributes: GetLensAttributes = ({ size: 10, orderBy: { type: 'column', - columnId: 'e09e0380-0740-4105-becc-0a4ca12e3944', + columnId: columnCountOfRecordsId, }, orderDirection: 'desc', otherBucket: true, @@ -112,8 +114,8 @@ export const getEventsHistogramLensAttributes: GetLensAttributes = ({ }, columnOrder: [ ...(stackByField ? [stackByFieldAccessorId] : []), - 'aac9d7d0-13a3-480a-892b-08207a787926', - 'e09e0380-0740-4105-becc-0a4ca12e3944', + columnTimestampId, + columnCountOfRecordsId, ], incompleteColumns: {}, }, diff --git a/x-pack/solutions/security/plugins/security_solution/public/common/components/visualization_actions/lens_attributes/common/external_alert.test.ts b/x-pack/solutions/security/plugins/security_solution/public/common/components/visualization_actions/lens_attributes/common/external_alert.test.ts index 62a9fe3bd108c..4da1c760c6e2b 100644 --- a/x-pack/solutions/security/plugins/security_solution/public/common/components/visualization_actions/lens_attributes/common/external_alert.test.ts +++ b/x-pack/solutions/security/plugins/security_solution/public/common/components/visualization_actions/lens_attributes/common/external_alert.test.ts @@ -12,6 +12,15 @@ import { useLensAttributes } from '../../use_lens_attributes'; import { getExternalAlertLensAttributes } from './external_alert'; +jest.mock('uuid', () => ({ + v4: jest + .fn() + .mockReturnValueOnce('a3c54471-615f-4ff9-9fda-69b5b2ea3eef') + .mockReturnValueOnce('37bdf546-3c11-4b08-8c5d-e37debc44f1d') + .mockReturnValueOnce('0a923af2-c880-4aa3-aa93-a0b9c2801f6d') + .mockReturnValueOnce('42334c6e-98d9-47a2-b4cb-a445abb44c93'), +})); + jest.mock('../../../../../sourcerer/containers', () => ({ useSourcererDataView: jest.fn().mockReturnValue({ selectedPatterns: ['auditbeat-mytest-*'], diff --git a/x-pack/solutions/security/plugins/security_solution/public/common/components/visualization_actions/lens_attributes/common/external_alert.ts b/x-pack/solutions/security/plugins/security_solution/public/common/components/visualization_actions/lens_attributes/common/external_alert.ts index 5387268d01793..465dd3fe9c776 100644 --- a/x-pack/solutions/security/plugins/security_solution/public/common/components/visualization_actions/lens_attributes/common/external_alert.ts +++ b/x-pack/solutions/security/plugins/security_solution/public/common/components/visualization_actions/lens_attributes/common/external_alert.ts @@ -4,10 +4,15 @@ * 2.0; you may not use this file except in compliance with the Elastic License * 2.0. */ - +import { v4 as uuidv4 } from 'uuid'; import { COUNT, TOP_VALUE } from '../../translations'; import type { GetLensAttributes, LensAttributes } from '../../types'; +const layerId = uuidv4(); +const columnTimestamp = uuidv4(); +const columnCount = uuidv4(); +const columnTopValue = uuidv4(); + export const getExternalAlertLensAttributes: GetLensAttributes = ({ stackByField = 'event.module', }) => { @@ -28,14 +33,14 @@ export const getExternalAlertLensAttributes: GetLensAttributes = ({ preferredSeriesType: 'bar_stacked', layers: [ { - layerId: 'a3c54471-615f-4ff9-9fda-69b5b2ea3eef', - accessors: ['0a923af2-c880-4aa3-aa93-a0b9c2801f6d'], + layerId, + accessors: [columnCount], position: 'top', seriesType: 'bar_stacked', showGridlines: false, layerType: 'data', - xAccessor: '37bdf546-3c11-4b08-8c5d-e37debc44f1d', - splitAccessor: '42334c6e-98d9-47a2-b4cb-a445abb44c93', + xAccessor: columnTimestamp, + splitAccessor: columnTopValue, }, ], yRightExtent: { @@ -80,9 +85,9 @@ export const getExternalAlertLensAttributes: GetLensAttributes = ({ datasourceStates: { formBased: { layers: { - 'a3c54471-615f-4ff9-9fda-69b5b2ea3eef': { + [layerId]: { columns: { - '37bdf546-3c11-4b08-8c5d-e37debc44f1d': { + [columnTimestamp]: { label: '@timestamp', dataType: 'date', operationType: 'date_histogram', @@ -94,7 +99,7 @@ export const getExternalAlertLensAttributes: GetLensAttributes = ({ includeEmptyRows: true, }, }, - '0a923af2-c880-4aa3-aa93-a0b9c2801f6d': { + [columnCount]: { label: COUNT, dataType: 'number', operationType: 'count', @@ -103,7 +108,7 @@ export const getExternalAlertLensAttributes: GetLensAttributes = ({ sourceField: '___records___', params: { emptyAsNull: true }, }, - '42334c6e-98d9-47a2-b4cb-a445abb44c93': { + [columnTopValue]: { label: TOP_VALUE(`${stackByField}`), // could be event.category dataType: 'string', operationType: 'terms', @@ -114,7 +119,7 @@ export const getExternalAlertLensAttributes: GetLensAttributes = ({ size: 10, orderBy: { type: 'column', - columnId: '0a923af2-c880-4aa3-aa93-a0b9c2801f6d', + columnId: columnCount, }, orderDirection: 'desc', otherBucket: true, @@ -125,11 +130,7 @@ export const getExternalAlertLensAttributes: GetLensAttributes = ({ }, }, }, - columnOrder: [ - '42334c6e-98d9-47a2-b4cb-a445abb44c93', - '37bdf546-3c11-4b08-8c5d-e37debc44f1d', - '0a923af2-c880-4aa3-aa93-a0b9c2801f6d', - ], + columnOrder: [columnTopValue, columnTimestamp, columnCount], incompleteColumns: {}, }, }, @@ -145,7 +146,7 @@ export const getExternalAlertLensAttributes: GetLensAttributes = ({ { type: 'index-pattern', id: '{dataViewId}', - name: 'indexpattern-datasource-layer-a3c54471-615f-4ff9-9fda-69b5b2ea3eef', + name: `indexpattern-datasource-layer-${layerId}`, }, { type: 'index-pattern', diff --git a/x-pack/solutions/security/plugins/security_solution/public/common/components/visualization_actions/lens_attributes/network/dns_top_domains.test.ts b/x-pack/solutions/security/plugins/security_solution/public/common/components/visualization_actions/lens_attributes/network/dns_top_domains.test.ts index 8446c7a71db86..e90dc72688236 100644 --- a/x-pack/solutions/security/plugins/security_solution/public/common/components/visualization_actions/lens_attributes/network/dns_top_domains.test.ts +++ b/x-pack/solutions/security/plugins/security_solution/public/common/components/visualization_actions/lens_attributes/network/dns_top_domains.test.ts @@ -14,6 +14,15 @@ import { useLensAttributes } from '../../use_lens_attributes'; import { getDnsTopDomainsLensAttributes } from './dns_top_domains'; +jest.mock('uuid', () => ({ + v4: jest + .fn() + .mockReturnValueOnce('b1c3efc6-c886-4fba-978f-3b6bb5e7948a') + .mockReturnValueOnce('e8842815-2a45-4c74-86de-c19a391e2424') + .mockReturnValueOnce('d1452b87-0e9e-4fc0-a725-3727a18e0b37') + .mockReturnValueOnce('2a4d5e20-f570-48e4-b9ab-ff3068919377'), +})); + jest.mock('../../../../../sourcerer/containers', () => ({ useSourcererDataView: jest.fn().mockReturnValue({ selectedPatterns: ['auditbeat-mytest-*'], diff --git a/x-pack/solutions/security/plugins/security_solution/public/common/components/visualization_actions/lens_attributes/network/dns_top_domains.ts b/x-pack/solutions/security/plugins/security_solution/public/common/components/visualization_actions/lens_attributes/network/dns_top_domains.ts index d94edfa47df7e..3b3853a9f04e3 100644 --- a/x-pack/solutions/security/plugins/security_solution/public/common/components/visualization_actions/lens_attributes/network/dns_top_domains.ts +++ b/x-pack/solutions/security/plugins/security_solution/public/common/components/visualization_actions/lens_attributes/network/dns_top_domains.ts @@ -4,10 +4,15 @@ * 2.0; you may not use this file except in compliance with the Elastic License * 2.0. */ - +import { v4 as uuidv4 } from 'uuid'; import { TOP_VALUE, UNIQUE_COUNT } from '../../translations'; import type { LensAttributes, GetLensAttributes } from '../../types'; +const layerId = uuidv4(); +const columnTopValue = uuidv4(); +const columnTimestamp = uuidv4(); +const columnDNSQuestionName = uuidv4(); + /* Exported from Kibana Saved Object */ export const getDnsTopDomainsLensAttributes: GetLensAttributes = ({ stackByField = 'dns.question.registered_domain', @@ -55,14 +60,14 @@ export const getDnsTopDomainsLensAttributes: GetLensAttributes = ({ preferredSeriesType: 'bar_stacked', layers: [ { - layerId: 'b1c3efc6-c886-4fba-978f-3b6bb5e7948a', - accessors: ['2a4d5e20-f570-48e4-b9ab-ff3068919377'], + layerId, + accessors: [columnDNSQuestionName], position: 'top', seriesType: 'bar_stacked', showGridlines: false, layerType: 'data', - xAccessor: 'd1452b87-0e9e-4fc0-a725-3727a18e0b37', - splitAccessor: 'e8842815-2a45-4c74-86de-c19a391e2424', + xAccessor: columnTimestamp, + splitAccessor: columnTopValue, }, ], }, @@ -100,9 +105,9 @@ export const getDnsTopDomainsLensAttributes: GetLensAttributes = ({ datasourceStates: { formBased: { layers: { - 'b1c3efc6-c886-4fba-978f-3b6bb5e7948a': { + [layerId]: { columns: { - 'e8842815-2a45-4c74-86de-c19a391e2424': { + [columnTopValue]: { label: TOP_VALUE(stackByField), dataType: 'string', operationType: 'terms', @@ -113,7 +118,7 @@ export const getDnsTopDomainsLensAttributes: GetLensAttributes = ({ size: 10, orderBy: { type: 'column', - columnId: '2a4d5e20-f570-48e4-b9ab-ff3068919377', + columnId: columnDNSQuestionName, }, orderDirection: 'desc', otherBucket: true, @@ -125,7 +130,7 @@ export const getDnsTopDomainsLensAttributes: GetLensAttributes = ({ accuracyMode: true, }, }, - 'd1452b87-0e9e-4fc0-a725-3727a18e0b37': { + [columnTimestamp]: { label: '@timestamp', dataType: 'date', operationType: 'date_histogram', @@ -137,7 +142,7 @@ export const getDnsTopDomainsLensAttributes: GetLensAttributes = ({ includeEmptyRows: true, }, }, - '2a4d5e20-f570-48e4-b9ab-ff3068919377': { + [columnDNSQuestionName]: { label: UNIQUE_COUNT('dns.question.name'), dataType: 'number', operationType: 'unique_count', @@ -147,11 +152,7 @@ export const getDnsTopDomainsLensAttributes: GetLensAttributes = ({ params: { emptyAsNull: true }, }, }, - columnOrder: [ - 'e8842815-2a45-4c74-86de-c19a391e2424', - 'd1452b87-0e9e-4fc0-a725-3727a18e0b37', - '2a4d5e20-f570-48e4-b9ab-ff3068919377', - ], + columnOrder: [columnTopValue, columnTimestamp, columnDNSQuestionName], incompleteColumns: {}, }, }, @@ -164,7 +165,7 @@ export const getDnsTopDomainsLensAttributes: GetLensAttributes = ({ { type: 'index-pattern', id: '{dataViewId}', - name: 'indexpattern-datasource-layer-b1c3efc6-c886-4fba-978f-3b6bb5e7948a', + name: `indexpattern-datasource-layer-${layerId}`, }, ], } as LensAttributes); diff --git a/x-pack/solutions/security/plugins/security_solution/public/common/components/visualization_actions/lens_attributes/network/kpi_unique_private_ips_bar.test.ts b/x-pack/solutions/security/plugins/security_solution/public/common/components/visualization_actions/lens_attributes/network/kpi_unique_private_ips_bar.test.ts index 57978d470b927..d268a925abbb7 100644 --- a/x-pack/solutions/security/plugins/security_solution/public/common/components/visualization_actions/lens_attributes/network/kpi_unique_private_ips_bar.test.ts +++ b/x-pack/solutions/security/plugins/security_solution/public/common/components/visualization_actions/lens_attributes/network/kpi_unique_private_ips_bar.test.ts @@ -12,6 +12,17 @@ import { useLensAttributes } from '../../use_lens_attributes'; import { getKpiUniquePrivateIpsBarLensAttributes } from './kpi_unique_private_ips_bar'; +jest.mock('uuid', () => ({ + v4: jest + .fn() + .mockReturnValueOnce('5acd4c9d-dc3b-4b21-9632-e4407944c36d') + .mockReturnValueOnce('d9c438c5-f776-4436-9d20-d62dc8c03be8') + .mockReturnValueOnce('d27e0966-daf9-41f4-9033-230cf1e76dc9') + .mockReturnValueOnce('4607c585-3af3-43b9-804f-e49b27796d79') + .mockReturnValueOnce('e406bf4f-942b-41ac-b516-edb5cef06ec8') + .mockReturnValueOnce('38aa6532-6bf9-4c8f-b2a6-da8d32f7d0d7'), +})); + jest.mock('../../../../../sourcerer/containers', () => ({ useSourcererDataView: jest.fn().mockReturnValue({ selectedPatterns: ['auditbeat-mytest-*'], diff --git a/x-pack/solutions/security/plugins/security_solution/public/common/components/visualization_actions/lens_attributes/network/kpi_unique_private_ips_bar.ts b/x-pack/solutions/security/plugins/security_solution/public/common/components/visualization_actions/lens_attributes/network/kpi_unique_private_ips_bar.ts index 6ce1703877d01..b0aed16de76ca 100644 --- a/x-pack/solutions/security/plugins/security_solution/public/common/components/visualization_actions/lens_attributes/network/kpi_unique_private_ips_bar.ts +++ b/x-pack/solutions/security/plugins/security_solution/public/common/components/visualization_actions/lens_attributes/network/kpi_unique_private_ips_bar.ts @@ -4,18 +4,18 @@ * 2.0; you may not use this file except in compliance with the Elastic License * 2.0. */ - +import { v4 as uuidv4 } from 'uuid'; import { SOURCE_CHART_LABEL, DESTINATION_CHART_LABEL, UNIQUE_COUNT } from '../../translations'; import type { LensAttributes, GetLensAttributes } from '../../types'; -const columnSourceIp = '5acd4c9d-dc3b-4b21-9632-e4407944c36d'; -const columnSourceIpFilter = 'd9c438c5-f776-4436-9d20-d62dc8c03be8'; +const columnSourceIp = uuidv4(); +const columnSourceIpFilter = uuidv4(); -const columnDestinationIp = 'd27e0966-daf9-41f4-9033-230cf1e76dc9'; -const columnDestinationIpFilter = '4607c585-3af3-43b9-804f-e49b27796d79'; +const columnDestinationIp = uuidv4(); +const columnDestinationIpFilter = uuidv4(); -const layerSourceIp = 'e406bf4f-942b-41ac-b516-edb5cef06ec8'; -const layerDestinationIp = '38aa6532-6bf9-4c8f-b2a6-da8d32f7d0d7'; +const layerSourceIp = uuidv4(); +const layerDestinationIp = uuidv4(); export const getKpiUniquePrivateIpsBarLensAttributes: GetLensAttributes = ({ euiTheme }) => { return { diff --git a/x-pack/solutions/security/plugins/security_solution/public/common/components/visualization_actions/lens_attributes/users/kpi_user_authentications_area.test.ts b/x-pack/solutions/security/plugins/security_solution/public/common/components/visualization_actions/lens_attributes/users/kpi_user_authentications_area.test.ts index a74e4c358251a..98a973878a699 100644 --- a/x-pack/solutions/security/plugins/security_solution/public/common/components/visualization_actions/lens_attributes/users/kpi_user_authentications_area.test.ts +++ b/x-pack/solutions/security/plugins/security_solution/public/common/components/visualization_actions/lens_attributes/users/kpi_user_authentications_area.test.ts @@ -12,6 +12,17 @@ import { useLensAttributes } from '../../use_lens_attributes'; import { getKpiUserAuthenticationsAreaLensAttributes } from './kpi_user_authentications_area'; +jest.mock('uuid', () => ({ + v4: jest + .fn() + .mockReturnValueOnce('2b27c80e-a20d-46f1-8fb2-79626ef4563c') + .mockReturnValueOnce('33a6163d-0c0a-451d-aa38-8ca6010dd5bf') + .mockReturnValueOnce('0eb97c09-a351-4280-97da-944e4bd30dd7') + .mockReturnValueOnce('49a42fe6-ebe8-4adb-8eed-1966a5297b7e') + .mockReturnValueOnce('4590dafb-4ac7-45aa-8641-47a3ff0b817c') + .mockReturnValueOnce('31213ae3-905b-4e88-b987-0cccb1f3209f'), +})); + jest.mock('../../../../../sourcerer/containers', () => ({ useSourcererDataView: jest.fn().mockReturnValue({ selectedPatterns: ['auditbeat-mytest-*'], diff --git a/x-pack/solutions/security/plugins/security_solution/public/common/components/visualization_actions/lens_attributes/users/kpi_user_authentications_area.ts b/x-pack/solutions/security/plugins/security_solution/public/common/components/visualization_actions/lens_attributes/users/kpi_user_authentications_area.ts index 4441f21f5b182..222740a55c5a2 100644 --- a/x-pack/solutions/security/plugins/security_solution/public/common/components/visualization_actions/lens_attributes/users/kpi_user_authentications_area.ts +++ b/x-pack/solutions/security/plugins/security_solution/public/common/components/visualization_actions/lens_attributes/users/kpi_user_authentications_area.ts @@ -4,17 +4,17 @@ * 2.0; you may not use this file except in compliance with the Elastic License * 2.0. */ - +import { v4 as uuidv4 } from 'uuid'; import { FAIL_CHART_LABEL, SUCCESS_CHART_LABEL } from '../../translations'; import type { LensAttributes, GetLensAttributes } from '../../types'; -const columnEventOutcomeFailure = '2b27c80e-a20d-46f1-8fb2-79626ef4563c'; -const columnEventOutcomeFailureTimestamp = '33a6163d-0c0a-451d-aa38-8ca6010dd5bf'; +const columnEventOutcomeFailure = uuidv4(); +const columnEventOutcomeFailureTimestamp = uuidv4(); -const columnEventOutcomeSuccess = '0eb97c09-a351-4280-97da-944e4bd30dd7'; -const columnEventOutcomeSuccessTimestamp = '49a42fe6-ebe8-4adb-8eed-1966a5297b7e'; -const layoutEventOutcomeSuccess = '4590dafb-4ac7-45aa-8641-47a3ff0b817c'; -const layoutEventOutcomeFailure = '31213ae3-905b-4e88-b987-0cccb1f3209f'; +const columnEventOutcomeSuccess = uuidv4(); +const columnEventOutcomeSuccessTimestamp = uuidv4(); +const layoutEventOutcomeSuccess = uuidv4(); +const layoutEventOutcomeFailure = uuidv4(); export const getKpiUserAuthenticationsAreaLensAttributes: GetLensAttributes = ({ euiTheme }) => ({ diff --git a/x-pack/solutions/security/plugins/security_solution/public/common/components/visualization_actions/lens_attributes/users/kpi_user_authentications_bar.test.ts b/x-pack/solutions/security/plugins/security_solution/public/common/components/visualization_actions/lens_attributes/users/kpi_user_authentications_bar.test.ts index 13901eb1c1140..5c370cdb20f15 100644 --- a/x-pack/solutions/security/plugins/security_solution/public/common/components/visualization_actions/lens_attributes/users/kpi_user_authentications_bar.test.ts +++ b/x-pack/solutions/security/plugins/security_solution/public/common/components/visualization_actions/lens_attributes/users/kpi_user_authentications_bar.test.ts @@ -12,6 +12,17 @@ import { useLensAttributes } from '../../use_lens_attributes'; import { getKpiUserAuthenticationsBarLensAttributes } from './kpi_user_authentications_bar'; +jest.mock('uuid', () => ({ + v4: jest + .fn() + .mockReturnValueOnce('c8165fc3-7180-4f1b-8c87-bc3ea04c6df7') + .mockReturnValueOnce('e959c351-a3a2-4525-b244-9623f215a8fd') + .mockReturnValueOnce('938b445a-a291-4bbc-84fe-4f47b69c20e4') + .mockReturnValueOnce('430e690c-9992-414f-9bce-00812d99a5e7') + .mockReturnValueOnce('b9acd453-f476-4467-ad38-203e37b73e55') + .mockReturnValueOnce('31213ae3-905b-4e88-b987-0cccb1f3209f'), +})); + jest.mock('../../../../../sourcerer/containers', () => ({ useSourcererDataView: jest.fn().mockReturnValue({ selectedPatterns: ['auditbeat-mytest-*'], diff --git a/x-pack/solutions/security/plugins/security_solution/public/common/components/visualization_actions/lens_attributes/users/kpi_user_authentications_bar.ts b/x-pack/solutions/security/plugins/security_solution/public/common/components/visualization_actions/lens_attributes/users/kpi_user_authentications_bar.ts index fc8f8f2cfdbbd..72007ee3b320a 100644 --- a/x-pack/solutions/security/plugins/security_solution/public/common/components/visualization_actions/lens_attributes/users/kpi_user_authentications_bar.ts +++ b/x-pack/solutions/security/plugins/security_solution/public/common/components/visualization_actions/lens_attributes/users/kpi_user_authentications_bar.ts @@ -4,18 +4,18 @@ * 2.0; you may not use this file except in compliance with the Elastic License * 2.0. */ - +import { v4 as uuidv4 } from 'uuid'; import type { LensAttributes, GetLensAttributes } from '../../types'; import { FAIL_CHART_LABEL, SUCCESS_CHART_LABEL } from '../../translations'; -const columnEventOutcomeFailure = 'c8165fc3-7180-4f1b-8c87-bc3ea04c6df7'; -const columnEventOutcomeFailureFilter = 'e959c351-a3a2-4525-b244-9623f215a8fd'; +const columnEventOutcomeFailure = uuidv4(); +const columnEventOutcomeFailureFilter = uuidv4(); -const columnEventOutcomeSuccess = '938b445a-a291-4bbc-84fe-4f47b69c20e4'; -const columnEventOutcomeSuccessFilter = '430e690c-9992-414f-9bce-00812d99a5e7'; +const columnEventOutcomeSuccess = uuidv4(); +const columnEventOutcomeSuccessFilter = uuidv4(); -const layerEventOutcomeFailure = 'b9acd453-f476-4467-ad38-203e37b73e55'; -const layerEventOutcomeSuccess = '31213ae3-905b-4e88-b987-0cccb1f3209f'; +const layerEventOutcomeFailure = uuidv4(); +const layerEventOutcomeSuccess = uuidv4(); export const getKpiUserAuthenticationsBarLensAttributes: GetLensAttributes = ({ euiTheme }) => ({ diff --git a/x-pack/solutions/security/plugins/security_solution/public/common/components/visualization_actions/use_lens_attributes.test.tsx b/x-pack/solutions/security/plugins/security_solution/public/common/components/visualization_actions/use_lens_attributes.test.tsx index 46cda5f98ee58..300920c5de320 100644 --- a/x-pack/solutions/security/plugins/security_solution/public/common/components/visualization_actions/use_lens_attributes.test.tsx +++ b/x-pack/solutions/security/plugins/security_solution/public/common/components/visualization_actions/use_lens_attributes.test.tsx @@ -26,6 +26,15 @@ import type { Query } from '@kbn/es-query'; import { getEventsHistogramLensAttributes } from './lens_attributes/common/events'; import type { EuiThemeComputed } from '@elastic/eui'; +jest.mock('uuid', () => ({ + v4: jest + .fn() + .mockReturnValueOnce('a3c54471-615f-4ff9-9fda-69b5b2ea3eef') + .mockReturnValueOnce('37bdf546-3c11-4b08-8c5d-e37debc44f1d') + .mockReturnValueOnce('0a923af2-c880-4aa3-aa93-a0b9c2801f6d') + .mockReturnValueOnce('42334c6e-98d9-47a2-b4cb-a445abb44c93'), +})); + jest.mock('../../../sourcerer/containers'); jest.mock('../../utils/route/use_route_spy', () => ({ useRouteSpy: jest.fn(), diff --git a/x-pack/solutions/security/plugins/security_solution/public/detections/components/alerts_kpis/severity_level_panel/helpers.tsx b/x-pack/solutions/security/plugins/security_solution/public/detections/components/alerts_kpis/severity_level_panel/helpers.tsx index e58d6d1b61cd2..86b4a5f0eae28 100644 --- a/x-pack/solutions/security/plugins/security_solution/public/detections/components/alerts_kpis/severity_level_panel/helpers.tsx +++ b/x-pack/solutions/security/plugins/security_solution/public/detections/components/alerts_kpis/severity_level_panel/helpers.tsx @@ -6,7 +6,6 @@ */ import type { Severity } from '@kbn/securitysolution-io-ts-alerting-types'; import { has } from 'lodash'; - import type { AlertsBySeverityAgg } from './types'; import type { AlertSearchResponse } from '../../../containers/detection_engine/alerts/types'; import type { SeverityBuckets as SeverityData } from '../../../../overview/components/detection_response/alerts_by_status/types'; diff --git a/x-pack/solutions/security/plugins/security_solution/public/overview/components/detection_response/utils.tsx b/x-pack/solutions/security/plugins/security_solution/public/overview/components/detection_response/utils.tsx index c3be038fde415..61ed89aabf0f0 100644 --- a/x-pack/solutions/security/plugins/security_solution/public/overview/components/detection_response/utils.tsx +++ b/x-pack/solutions/security/plugins/security_solution/public/overview/components/detection_response/utils.tsx @@ -4,7 +4,7 @@ * 2.0; you may not use this file except in compliance with the Elastic License * 2.0. */ -// @deprecated, use getSeverityColor instead +// @deprecated export const SEVERITY_COLOR = { critical: '#E7664C', high: '#DA8B45', From acf25761585d39e9d56cb0cc19f5e6aae9f6592d Mon Sep 17 00:00:00 2001 From: Angela Chuang Date: Fri, 3 Jan 2025 18:28:04 +0000 Subject: [PATCH 13/15] types --- .../visualization_actions/lens_attributes/common/events.ts | 3 ++- .../lens_attributes/common/external_alert.ts | 7 ++++--- 2 files changed, 6 insertions(+), 4 deletions(-) diff --git a/x-pack/solutions/security/plugins/security_solution/public/common/components/visualization_actions/lens_attributes/common/events.ts b/x-pack/solutions/security/plugins/security_solution/public/common/components/visualization_actions/lens_attributes/common/events.ts index 97cc37e9297e9..e036289d99562 100644 --- a/x-pack/solutions/security/plugins/security_solution/public/common/components/visualization_actions/lens_attributes/common/events.ts +++ b/x-pack/solutions/security/plugins/security_solution/public/common/components/visualization_actions/lens_attributes/common/events.ts @@ -6,6 +6,7 @@ */ import { v4 as uuidv4 } from 'uuid'; import type { GetLensAttributes } from '../../types'; +import { COUNT } from '../../translations'; const layerId = uuidv4(); // Exported for testing purposes @@ -80,7 +81,7 @@ export const getEventsHistogramLensAttributes: GetLensAttributes = ({ }, }, [columnCountOfRecordsId]: { - label: 'Count of records', + label: COUNT, dataType: 'number', operationType: 'count', isBucketed: false, diff --git a/x-pack/solutions/security/plugins/security_solution/public/common/components/visualization_actions/lens_attributes/common/external_alert.ts b/x-pack/solutions/security/plugins/security_solution/public/common/components/visualization_actions/lens_attributes/common/external_alert.ts index 465dd3fe9c776..726f55486ae74 100644 --- a/x-pack/solutions/security/plugins/security_solution/public/common/components/visualization_actions/lens_attributes/common/external_alert.ts +++ b/x-pack/solutions/security/plugins/security_solution/public/common/components/visualization_actions/lens_attributes/common/external_alert.ts @@ -5,6 +5,7 @@ * 2.0. */ import { v4 as uuidv4 } from 'uuid'; + import { COUNT, TOP_VALUE } from '../../translations'; import type { GetLensAttributes, LensAttributes } from '../../types'; @@ -109,11 +110,11 @@ export const getExternalAlertLensAttributes: GetLensAttributes = ({ params: { emptyAsNull: true }, }, [columnTopValue]: { - label: TOP_VALUE(`${stackByField}`), // could be event.category + label: TOP_VALUE(`${stackByField}`), dataType: 'string', operationType: 'terms', scale: 'ordinal', - sourceField: `${stackByField}`, // could be event.category + sourceField: `${stackByField}`, isBucketed: true, params: { size: 10, @@ -159,5 +160,5 @@ export const getExternalAlertLensAttributes: GetLensAttributes = ({ id: '{dataViewId}', }, ], - } as LensAttributes; + } as unknown as LensAttributes; }; From a69923476079ced9c67ddab8cecbfaac59d37c92 Mon Sep 17 00:00:00 2001 From: Angela Chuang Date: Mon, 6 Jan 2025 15:55:45 +0000 Subject: [PATCH 14/15] design review --- .../kpi_unique_ips_area.test.ts.snap | 4 +- .../kpi_unique_ips_bar.test.ts.snap | 4 +- .../hosts/kpi_unique_ips_area.ts | 4 +- .../hosts/kpi_unique_ips_bar.ts | 4 +- .../kpi_unique_private_ips_area.test.ts.snap | 4 +- .../kpi_unique_private_ips_bar.test.ts.snap | 4 +- .../network/kpi_unique_private_ips_area.ts | 4 +- .../network/kpi_unique_private_ips_bar.ts | 4 +- ...kpi_user_authentications_area.test.ts.snap | 2 +- .../kpi_user_authentications_bar.test.ts.snap | 2 +- .../users/kpi_user_authentications_area.ts | 2 +- .../users/kpi_user_authentications_bar.ts | 2 +- .../components/kpi_hosts/unique_ips/index.tsx | 6 +- .../kpi_network/unique_private_ips/index.tsx | 61 ++++++++++--------- .../kpi_users/authentications/index.tsx | 4 +- .../kpi_users/total_users/index.tsx | 4 +- 16 files changed, 59 insertions(+), 56 deletions(-) diff --git a/x-pack/solutions/security/plugins/security_solution/public/common/components/visualization_actions/lens_attributes/hosts/__snapshots__/kpi_unique_ips_area.test.ts.snap b/x-pack/solutions/security/plugins/security_solution/public/common/components/visualization_actions/lens_attributes/hosts/__snapshots__/kpi_unique_ips_area.test.ts.snap index 8b7484588030f..a829f18fd216c 100644 --- a/x-pack/solutions/security/plugins/security_solution/public/common/components/visualization_actions/lens_attributes/hosts/__snapshots__/kpi_unique_ips_area.test.ts.snap +++ b/x-pack/solutions/security/plugins/security_solution/public/common/components/visualization_actions/lens_attributes/hosts/__snapshots__/kpi_unique_ips_area.test.ts.snap @@ -199,7 +199,7 @@ Object { "xAccessor": "a0cb6400-f708-46c3-ad96-24788f12dae4", "yConfig": Array [ Object { - "color": "#D36086", + "color": "#CA8EAE", "forAccessor": "d9a6eb6b-8b78-439e-98e7-a718f8ffbebe", }, ], @@ -214,7 +214,7 @@ Object { "xAccessor": "95e74e6-99dd-4b11-8faf-439b4d959df9", "yConfig": Array [ Object { - "color": "#9170B8", + "color": "#D36086", "forAccessor": "e7052671-fb9e-481f-8df3-7724c98cfc6f", }, ], diff --git a/x-pack/solutions/security/plugins/security_solution/public/common/components/visualization_actions/lens_attributes/hosts/__snapshots__/kpi_unique_ips_bar.test.ts.snap b/x-pack/solutions/security/plugins/security_solution/public/common/components/visualization_actions/lens_attributes/hosts/__snapshots__/kpi_unique_ips_bar.test.ts.snap index ca3b0722e64df..a6e3277032138 100644 --- a/x-pack/solutions/security/plugins/security_solution/public/common/components/visualization_actions/lens_attributes/hosts/__snapshots__/kpi_unique_ips_bar.test.ts.snap +++ b/x-pack/solutions/security/plugins/security_solution/public/common/components/visualization_actions/lens_attributes/hosts/__snapshots__/kpi_unique_ips_bar.test.ts.snap @@ -212,7 +212,7 @@ Object { "xAccessor": "f8bfa719-5c1c-4bf2-896e-c318d77fc08e", "yConfig": Array [ Object { - "color": "#D36086", + "color": "#CA8EAE", "forAccessor": "32f66676-f4e1-48fd-b7f8-d4de38318601", }, ], @@ -227,7 +227,7 @@ Object { "xAccessor": "c72aad6a-fc9c-43dc-9194-e13ca3ee8aff", "yConfig": Array [ Object { - "color": "#9170B8", + "color": "#D36086", "forAccessor": "b7e59b08-96e6-40d1-84fd-e97b977d1c47", }, ], diff --git a/x-pack/solutions/security/plugins/security_solution/public/common/components/visualization_actions/lens_attributes/hosts/kpi_unique_ips_area.ts b/x-pack/solutions/security/plugins/security_solution/public/common/components/visualization_actions/lens_attributes/hosts/kpi_unique_ips_area.ts index eecf0724508ce..133f7a51a5e1b 100644 --- a/x-pack/solutions/security/plugins/security_solution/public/common/components/visualization_actions/lens_attributes/hosts/kpi_unique_ips_area.ts +++ b/x-pack/solutions/security/plugins/security_solution/public/common/components/visualization_actions/lens_attributes/hosts/kpi_unique_ips_area.ts @@ -90,7 +90,7 @@ export const getKpiUniqueIpsAreaLensAttributes: GetLensAttributes = ({ euiTheme seriesType: 'area', xAccessor: columnSourceTimestamp, yConfig: [ - { color: euiTheme.colors.vis.euiColorVis2, forAccessor: columnSourceUniqueIp }, + { color: euiTheme.colors.vis.euiColorVis4, forAccessor: columnSourceUniqueIp }, ], }, { @@ -100,7 +100,7 @@ export const getKpiUniqueIpsAreaLensAttributes: GetLensAttributes = ({ euiTheme seriesType: 'area', xAccessor: columnDestinationTimestamp, yConfig: [ - { color: euiTheme.colors.vis.euiColorVis3, forAccessor: columnDestinationIp }, + { color: euiTheme.colors.vis.euiColorVis2, forAccessor: columnDestinationIp }, ], }, ], diff --git a/x-pack/solutions/security/plugins/security_solution/public/common/components/visualization_actions/lens_attributes/hosts/kpi_unique_ips_bar.ts b/x-pack/solutions/security/plugins/security_solution/public/common/components/visualization_actions/lens_attributes/hosts/kpi_unique_ips_bar.ts index 511ce4cd92089..0303c9abe9e12 100644 --- a/x-pack/solutions/security/plugins/security_solution/public/common/components/visualization_actions/lens_attributes/hosts/kpi_unique_ips_bar.ts +++ b/x-pack/solutions/security/plugins/security_solution/public/common/components/visualization_actions/lens_attributes/hosts/kpi_unique_ips_bar.ts @@ -96,7 +96,7 @@ export const getKpiUniqueIpsBarLensAttributes: GetLensAttributes = ({ euiTheme } layerType: 'data', seriesType: 'bar_horizontal_stacked', xAccessor: columnSourceFilter, - yConfig: [{ color: euiTheme.colors.vis.euiColorVis2, forAccessor: columnSourceIp }], + yConfig: [{ color: euiTheme.colors.vis.euiColorVis4, forAccessor: columnSourceIp }], }, { accessors: [columnDestinationIp], @@ -105,7 +105,7 @@ export const getKpiUniqueIpsBarLensAttributes: GetLensAttributes = ({ euiTheme } seriesType: 'bar_horizontal_stacked', xAccessor: columnDestinationFilter, yConfig: [ - { color: euiTheme.colors.vis.euiColorVis3, forAccessor: columnDestinationIp }, + { color: euiTheme.colors.vis.euiColorVis2, forAccessor: columnDestinationIp }, ], }, ], diff --git a/x-pack/solutions/security/plugins/security_solution/public/common/components/visualization_actions/lens_attributes/network/__snapshots__/kpi_unique_private_ips_area.test.ts.snap b/x-pack/solutions/security/plugins/security_solution/public/common/components/visualization_actions/lens_attributes/network/__snapshots__/kpi_unique_private_ips_area.test.ts.snap index 6f3ad179027b1..3e46284421b4a 100644 --- a/x-pack/solutions/security/plugins/security_solution/public/common/components/visualization_actions/lens_attributes/network/__snapshots__/kpi_unique_private_ips_area.test.ts.snap +++ b/x-pack/solutions/security/plugins/security_solution/public/common/components/visualization_actions/lens_attributes/network/__snapshots__/kpi_unique_private_ips_area.test.ts.snap @@ -223,7 +223,7 @@ Object { "xAccessor": "662cd5e5-82bf-4325-a703-273f84b97e09", "yConfig": Array [ Object { - "color": "#D36086", + "color": "#CA8EAE", "forAccessor": "5f317308-cfbb-4ee5-bfb9-07653184fabf", }, ], @@ -238,7 +238,7 @@ Object { "xAccessor": "36444b8c-7e10-4069-8298-6c1b46912be2", "yConfig": Array [ Object { - "color": "#9170B8", + "color": "#D36086", "forAccessor": "ac1eb80c-ddde-46c4-a90c-400261926762", }, ], diff --git a/x-pack/solutions/security/plugins/security_solution/public/common/components/visualization_actions/lens_attributes/network/__snapshots__/kpi_unique_private_ips_bar.test.ts.snap b/x-pack/solutions/security/plugins/security_solution/public/common/components/visualization_actions/lens_attributes/network/__snapshots__/kpi_unique_private_ips_bar.test.ts.snap index 085370093e9eb..443ddb2cfdfca 100644 --- a/x-pack/solutions/security/plugins/security_solution/public/common/components/visualization_actions/lens_attributes/network/__snapshots__/kpi_unique_private_ips_bar.test.ts.snap +++ b/x-pack/solutions/security/plugins/security_solution/public/common/components/visualization_actions/lens_attributes/network/__snapshots__/kpi_unique_private_ips_bar.test.ts.snap @@ -238,7 +238,7 @@ Object { "xAccessor": "d9c438c5-f776-4436-9d20-d62dc8c03be8", "yConfig": Array [ Object { - "color": "#D36086", + "color": "#CA8EAE", "forAccessor": "5acd4c9d-dc3b-4b21-9632-e4407944c36d", }, ], @@ -253,7 +253,7 @@ Object { "xAccessor": "4607c585-3af3-43b9-804f-e49b27796d79", "yConfig": Array [ Object { - "color": "#9170B8", + "color": "#D36086", "forAccessor": "d27e0966-daf9-41f4-9033-230cf1e76dc9", }, ], diff --git a/x-pack/solutions/security/plugins/security_solution/public/common/components/visualization_actions/lens_attributes/network/kpi_unique_private_ips_area.ts b/x-pack/solutions/security/plugins/security_solution/public/common/components/visualization_actions/lens_attributes/network/kpi_unique_private_ips_area.ts index aedfa71af70fd..a0a74af33cd68 100644 --- a/x-pack/solutions/security/plugins/security_solution/public/common/components/visualization_actions/lens_attributes/network/kpi_unique_private_ips_area.ts +++ b/x-pack/solutions/security/plugins/security_solution/public/common/components/visualization_actions/lens_attributes/network/kpi_unique_private_ips_area.ts @@ -66,7 +66,7 @@ export const getKpiUniquePrivateIpsAreaLensAttributes: GetLensAttributes = ({ eu yConfig: [ { forAccessor: columnSourceIp, - color: euiTheme.colors.vis.euiColorVis2, + color: euiTheme.colors.vis.euiColorVis4, }, ], }, @@ -79,7 +79,7 @@ export const getKpiUniquePrivateIpsAreaLensAttributes: GetLensAttributes = ({ eu yConfig: [ { forAccessor: columnDestinationIp, - color: euiTheme.colors.vis.euiColorVis3, + color: euiTheme.colors.vis.euiColorVis2, }, ], }, diff --git a/x-pack/solutions/security/plugins/security_solution/public/common/components/visualization_actions/lens_attributes/network/kpi_unique_private_ips_bar.ts b/x-pack/solutions/security/plugins/security_solution/public/common/components/visualization_actions/lens_attributes/network/kpi_unique_private_ips_bar.ts index b0aed16de76ca..7f4b444451a9f 100644 --- a/x-pack/solutions/security/plugins/security_solution/public/common/components/visualization_actions/lens_attributes/network/kpi_unique_private_ips_bar.ts +++ b/x-pack/solutions/security/plugins/security_solution/public/common/components/visualization_actions/lens_attributes/network/kpi_unique_private_ips_bar.ts @@ -69,7 +69,7 @@ export const getKpiUniquePrivateIpsBarLensAttributes: GetLensAttributes = ({ eui yConfig: [ { forAccessor: columnSourceIp, - color: euiTheme.colors.vis.euiColorVis2, + color: euiTheme.colors.vis.euiColorVis4, }, ], xAccessor: columnSourceIpFilter, @@ -82,7 +82,7 @@ export const getKpiUniquePrivateIpsBarLensAttributes: GetLensAttributes = ({ eui yConfig: [ { forAccessor: columnDestinationIp, - color: euiTheme.colors.vis.euiColorVis3, + color: euiTheme.colors.vis.euiColorVis2, }, ], xAccessor: columnDestinationIpFilter, diff --git a/x-pack/solutions/security/plugins/security_solution/public/common/components/visualization_actions/lens_attributes/users/__snapshots__/kpi_user_authentications_area.test.ts.snap b/x-pack/solutions/security/plugins/security_solution/public/common/components/visualization_actions/lens_attributes/users/__snapshots__/kpi_user_authentications_area.test.ts.snap index 870f3980a0203..70fb96a186640 100644 --- a/x-pack/solutions/security/plugins/security_solution/public/common/components/visualization_actions/lens_attributes/users/__snapshots__/kpi_user_authentications_area.test.ts.snap +++ b/x-pack/solutions/security/plugins/security_solution/public/common/components/visualization_actions/lens_attributes/users/__snapshots__/kpi_user_authentications_area.test.ts.snap @@ -247,7 +247,7 @@ Object { "xAccessor": "33a6163d-0c0a-451d-aa38-8ca6010dd5bf", "yConfig": Array [ Object { - "color": "#E7664C", + "color": "#CA8EAE", "forAccessor": "2b27c80e-a20d-46f1-8fb2-79626ef4563c", }, ], diff --git a/x-pack/solutions/security/plugins/security_solution/public/common/components/visualization_actions/lens_attributes/users/__snapshots__/kpi_user_authentications_bar.test.ts.snap b/x-pack/solutions/security/plugins/security_solution/public/common/components/visualization_actions/lens_attributes/users/__snapshots__/kpi_user_authentications_bar.test.ts.snap index d2e685d8e6088..1fe0fc602ca1f 100644 --- a/x-pack/solutions/security/plugins/security_solution/public/common/components/visualization_actions/lens_attributes/users/__snapshots__/kpi_user_authentications_bar.test.ts.snap +++ b/x-pack/solutions/security/plugins/security_solution/public/common/components/visualization_actions/lens_attributes/users/__snapshots__/kpi_user_authentications_bar.test.ts.snap @@ -252,7 +252,7 @@ Object { "xAccessor": "e959c351-a3a2-4525-b244-9623f215a8fd", "yConfig": Array [ Object { - "color": "#E7664C", + "color": "#CA8EAE", "forAccessor": "c8165fc3-7180-4f1b-8c87-bc3ea04c6df7", }, ], diff --git a/x-pack/solutions/security/plugins/security_solution/public/common/components/visualization_actions/lens_attributes/users/kpi_user_authentications_area.ts b/x-pack/solutions/security/plugins/security_solution/public/common/components/visualization_actions/lens_attributes/users/kpi_user_authentications_area.ts index 222740a55c5a2..f9e9d7e62d701 100644 --- a/x-pack/solutions/security/plugins/security_solution/public/common/components/visualization_actions/lens_attributes/users/kpi_user_authentications_area.ts +++ b/x-pack/solutions/security/plugins/security_solution/public/common/components/visualization_actions/lens_attributes/users/kpi_user_authentications_area.ts @@ -61,7 +61,7 @@ export const getKpiUserAuthenticationsAreaLensAttributes: GetLensAttributes = ({ xAccessor: columnEventOutcomeFailureTimestamp, yConfig: [ { - color: euiTheme.colors.vis.euiColorVis9, + color: euiTheme.colors.vis.euiColorVis4, forAccessor: columnEventOutcomeFailure, }, ], diff --git a/x-pack/solutions/security/plugins/security_solution/public/common/components/visualization_actions/lens_attributes/users/kpi_user_authentications_bar.ts b/x-pack/solutions/security/plugins/security_solution/public/common/components/visualization_actions/lens_attributes/users/kpi_user_authentications_bar.ts index 72007ee3b320a..6237b1827314d 100644 --- a/x-pack/solutions/security/plugins/security_solution/public/common/components/visualization_actions/lens_attributes/users/kpi_user_authentications_bar.ts +++ b/x-pack/solutions/security/plugins/security_solution/public/common/components/visualization_actions/lens_attributes/users/kpi_user_authentications_bar.ts @@ -62,7 +62,7 @@ export const getKpiUserAuthenticationsBarLensAttributes: GetLensAttributes = ({ xAccessor: columnEventOutcomeFailureFilter, yConfig: [ { - color: euiTheme.colors.vis.euiColorVis9, + color: euiTheme.colors.vis.euiColorVis4, forAccessor: columnEventOutcomeFailure, }, ], diff --git a/x-pack/solutions/security/plugins/security_solution/public/explore/hosts/components/kpi_hosts/unique_ips/index.tsx b/x-pack/solutions/security/plugins/security_solution/public/explore/hosts/components/kpi_hosts/unique_ips/index.tsx index b96bdd4e4bc4f..4dc8e9fd62b66 100644 --- a/x-pack/solutions/security/plugins/security_solution/public/explore/hosts/components/kpi_hosts/unique_ips/index.tsx +++ b/x-pack/solutions/security/plugins/security_solution/public/explore/hosts/components/kpi_hosts/unique_ips/index.tsx @@ -30,7 +30,7 @@ export const useGetUniqueIpsStatItems: () => Readonly = () => { key: 'uniqueSourceIps', name: i18n.SOURCE_CHART_LABEL, description: i18n.SOURCE_UNIT_LABEL, - color: euiTheme.colors.vis.euiColorVis2, + color: euiTheme.colors.vis.euiColorVis4, icon: 'visMapCoordinate', lensAttributes: kpiUniqueIpsSourceMetricLensAttributes, }, @@ -38,7 +38,7 @@ export const useGetUniqueIpsStatItems: () => Readonly = () => { key: 'uniqueDestinationIps', name: i18n.DESTINATION_CHART_LABEL, description: i18n.DESTINATION_UNIT_LABEL, - color: euiTheme.colors.vis.euiColorVis3, + color: euiTheme.colors.vis.euiColorVis2, icon: 'visMapCoordinate', lensAttributes: kpiUniqueIpsDestinationMetricLensAttributes, }, @@ -50,7 +50,7 @@ export const useGetUniqueIpsStatItems: () => Readonly = () => { getBarChartLensAttributes: getKpiUniqueIpsBarLensAttributes, }, ], - [euiTheme.colors.vis.euiColorVis2, euiTheme.colors.vis.euiColorVis3] + [euiTheme.colors.vis.euiColorVis2, euiTheme.colors.vis.euiColorVis4] ); }; diff --git a/x-pack/solutions/security/plugins/security_solution/public/explore/network/components/kpi_network/unique_private_ips/index.tsx b/x-pack/solutions/security/plugins/security_solution/public/explore/network/components/kpi_network/unique_private_ips/index.tsx index ce2bf279ac66d..b53804076b67c 100644 --- a/x-pack/solutions/security/plugins/security_solution/public/explore/network/components/kpi_network/unique_private_ips/index.tsx +++ b/x-pack/solutions/security/plugins/security_solution/public/explore/network/components/kpi_network/unique_private_ips/index.tsx @@ -5,7 +5,7 @@ * 2.0. */ -import React from 'react'; +import React, { useMemo } from 'react'; import { useEuiTheme } from '@elastic/eui'; import type { StatItems } from '../../../../components/stat_items'; @@ -21,34 +21,37 @@ export const ID = 'networkKpiUniquePrivateIpsQuery'; export const useGetUniquePrivateIpsStatItems: () => Readonly = () => { const { euiTheme } = useEuiTheme(); - return [ - { - key: 'uniqueIps', - fields: [ - { - key: 'uniqueSourcePrivateIps', - name: i18n.SOURCE_CHART_LABEL, - description: i18n.SOURCE_UNIT_LABEL, - color: euiTheme.colors.vis.euiColorVis2, - icon: 'visMapCoordinate', - lensAttributes: kpiUniquePrivateIpsSourceMetricLensAttributes, - }, - { - key: 'uniqueDestinationPrivateIps', - name: i18n.DESTINATION_CHART_LABEL, - description: i18n.DESTINATION_UNIT_LABEL, - color: euiTheme.colors.vis.euiColorVis3, - icon: 'visMapCoordinate', - lensAttributes: kpiUniquePrivateIpsDestinationMetricLensAttributes, - }, - ], - description: i18n.UNIQUE_PRIVATE_IPS, - enableAreaChart: true, - enableBarChart: true, - getAreaChartLensAttributes: getKpiUniquePrivateIpsAreaLensAttributes, - getBarChartLensAttributes: getKpiUniquePrivateIpsBarLensAttributes, - }, - ]; + return useMemo( + () => [ + { + key: 'uniqueIps', + fields: [ + { + key: 'uniqueSourcePrivateIps', + name: i18n.SOURCE_CHART_LABEL, + description: i18n.SOURCE_UNIT_LABEL, + color: euiTheme.colors.vis.euiColorVis4, + icon: 'visMapCoordinate', + lensAttributes: kpiUniquePrivateIpsSourceMetricLensAttributes, + }, + { + key: 'uniqueDestinationPrivateIps', + name: i18n.DESTINATION_CHART_LABEL, + description: i18n.DESTINATION_UNIT_LABEL, + color: euiTheme.colors.vis.euiColorVis2, + icon: 'visMapCoordinate', + lensAttributes: kpiUniquePrivateIpsDestinationMetricLensAttributes, + }, + ], + description: i18n.UNIQUE_PRIVATE_IPS, + enableAreaChart: true, + enableBarChart: true, + getAreaChartLensAttributes: getKpiUniquePrivateIpsAreaLensAttributes, + getBarChartLensAttributes: getKpiUniquePrivateIpsBarLensAttributes, + }, + ], + [euiTheme.colors.vis.euiColorVis2, euiTheme.colors.vis.euiColorVis4] + ); }; const NetworkKpiUniquePrivateIpsComponent: React.FC = ({ from, to }) => { diff --git a/x-pack/solutions/security/plugins/security_solution/public/explore/users/components/kpi_users/authentications/index.tsx b/x-pack/solutions/security/plugins/security_solution/public/explore/users/components/kpi_users/authentications/index.tsx index dc0a691910734..13dddc7de2bec 100644 --- a/x-pack/solutions/security/plugins/security_solution/public/explore/users/components/kpi_users/authentications/index.tsx +++ b/x-pack/solutions/security/plugins/security_solution/public/explore/users/components/kpi_users/authentications/index.tsx @@ -38,7 +38,7 @@ export const useGetAuthenticationsStatItems: () => Readonly = () => key: 'authenticationsFailure', name: i18n.FAIL_CHART_LABEL, description: i18n.FAIL_UNIT_LABEL, - color: euiTheme.colors.vis.euiColorVis9, + color: euiTheme.colors.vis.euiColorVis4, icon: 'cross', lensAttributes: kpiUserAuthenticationsMetricFailureLensAttributes, }, @@ -50,7 +50,7 @@ export const useGetAuthenticationsStatItems: () => Readonly = () => getBarChartLensAttributes: getKpiUserAuthenticationsBarLensAttributes, }, ], - [euiTheme.colors.vis.euiColorVis0, euiTheme.colors.vis.euiColorVis9] + [euiTheme.colors.vis.euiColorVis0, euiTheme.colors.vis.euiColorVis4] ); }; diff --git a/x-pack/solutions/security/plugins/security_solution/public/explore/users/components/kpi_users/total_users/index.tsx b/x-pack/solutions/security/plugins/security_solution/public/explore/users/components/kpi_users/total_users/index.tsx index d76a62f79dfd2..c9839d06fd8fb 100644 --- a/x-pack/solutions/security/plugins/security_solution/public/explore/users/components/kpi_users/total_users/index.tsx +++ b/x-pack/solutions/security/plugins/security_solution/public/explore/users/components/kpi_users/total_users/index.tsx @@ -23,7 +23,7 @@ export const useGetUsersStatItems: () => Readonly = () => { fields: [ { key: 'users', - color: euiTheme.colors.vis.euiColorVis1, + color: euiTheme.colors.vis.euiColorVis0, icon: 'storage', lensAttributes: kpiTotalUsersMetricLensAttributes, }, @@ -33,7 +33,7 @@ export const useGetUsersStatItems: () => Readonly = () => { getAreaChartLensAttributes: getKpiTotalUsersAreaLensAttributes, }, ], - [euiTheme.colors.vis.euiColorVis1] + [euiTheme.colors.vis.euiColorVis0] ); }; From 78d38841be5c5b375371d72e65681d16d2570535 Mon Sep 17 00:00:00 2001 From: kibanamachine <42973632+kibanamachine@users.noreply.github.com> Date: Mon, 6 Jan 2025 16:27:18 +0000 Subject: [PATCH 15/15] [CI] Auto-commit changed files from 'node scripts/styled_components_mapping' --- packages/kbn-babel-preset/styled_components_files.js | 1 - 1 file changed, 1 deletion(-) diff --git a/packages/kbn-babel-preset/styled_components_files.js b/packages/kbn-babel-preset/styled_components_files.js index fa9bdce5befe8..b18042a0491d2 100644 --- a/packages/kbn-babel-preset/styled_components_files.js +++ b/packages/kbn-babel-preset/styled_components_files.js @@ -199,7 +199,6 @@ module.exports = { /x-pack[\/\\]solutions[\/\\]security[\/\\]plugins[\/\\]security_solution[\/\\]public[\/\\]common[\/\\]components[\/\\]charts[\/\\]chart_place_holder.tsx/, /x-pack[\/\\]solutions[\/\\]security[\/\\]plugins[\/\\]security_solution[\/\\]public[\/\\]common[\/\\]components[\/\\]charts[\/\\]common.tsx/, /x-pack[\/\\]solutions[\/\\]security[\/\\]plugins[\/\\]security_solution[\/\\]public[\/\\]common[\/\\]components[\/\\]charts[\/\\]donutchart.tsx/, - /x-pack[\/\\]solutions[\/\\]security[\/\\]plugins[\/\\]security_solution[\/\\]public[\/\\]common[\/\\]components[\/\\]charts[\/\\]donutchart_empty.tsx/, /x-pack[\/\\]solutions[\/\\]security[\/\\]plugins[\/\\]security_solution[\/\\]public[\/\\]common[\/\\]components[\/\\]charts[\/\\]draggable_legend.tsx/, /x-pack[\/\\]solutions[\/\\]security[\/\\]plugins[\/\\]security_solution[\/\\]public[\/\\]common[\/\\]components[\/\\]charts[\/\\]draggable_legend_item.tsx/, /x-pack[\/\\]solutions[\/\\]security[\/\\]plugins[\/\\]security_solution[\/\\]public[\/\\]common[\/\\]components[\/\\]charts[\/\\]legend_item.tsx/,