From c47b50925a6aa83a0c7adbaa9b05008366ce10ce Mon Sep 17 00:00:00 2001 From: Marco Antonio Ghiani Date: Thu, 12 Dec 2024 16:09:47 +0100 Subject: [PATCH] [One Discover] Update log.level indicators color (#202985) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit ## 📓 Summary Closes #202258 This change updates the colors scale for Discover's `log.level` indicators to differentiate errors from other levels better. **N.B. As this relies on some hard-coded values defined [here](https://github.com/elastic/kibana/issues/186273#issuecomment-2505817075), it is not a definitive version, but a middle step to enhance the scale in v8.x versions.** With the introduction of the Borealis theme in v9, a new scale token-based will replace this. Screenshot 2024-12-04 at 17 40 32 --------- Co-authored-by: Marco Antonio Ghiani --- .../logs/utils/get_log_level_color.test.ts | 14 +++++++------ .../logs/utils/get_log_level_color.ts | 21 +++++++++++++------ .../_get_row_indicator_provider.ts | 15 ------------- 3 files changed, 23 insertions(+), 27 deletions(-) diff --git a/packages/kbn-discover-utils/src/data_types/logs/utils/get_log_level_color.test.ts b/packages/kbn-discover-utils/src/data_types/logs/utils/get_log_level_color.test.ts index 47792f0aa6d17..d5d76ddb6041d 100644 --- a/packages/kbn-discover-utils/src/data_types/logs/utils/get_log_level_color.test.ts +++ b/packages/kbn-discover-utils/src/data_types/logs/utils/get_log_level_color.test.ts @@ -13,7 +13,9 @@ import { LogLevelCoalescedValue } from './get_log_level_coalesed_value'; const euiTheme = { colors: { - lightShade: '#ffffff', + vis: { + euiColorVisGrey0: '#d3dae6', + }, }, }; @@ -32,20 +34,20 @@ describe('getLogLevelColor', () => { '#d6bf57' ); expect(getLogLevelColor(LogLevelCoalescedValue.error, euiTheme as EuiThemeComputed)).toBe( - '#df9352' + '#e18774' ); expect(getLogLevelColor(LogLevelCoalescedValue.critical, euiTheme as EuiThemeComputed)).toBe( - '#e7664c' + '#dd7b67' ); expect(getLogLevelColor(LogLevelCoalescedValue.alert, euiTheme as EuiThemeComputed)).toBe( - '#da5e47' + '#d76f5b' ); expect(getLogLevelColor(LogLevelCoalescedValue.emergency, euiTheme as EuiThemeComputed)).toBe( - '#cc5642' + '#d2634e' ); // other expect(getLogLevelColor(LogLevelCoalescedValue.trace, euiTheme as EuiThemeComputed)).toBe( - '#ffffff' + '#d3dae6' ); }); }); diff --git a/packages/kbn-discover-utils/src/data_types/logs/utils/get_log_level_color.ts b/packages/kbn-discover-utils/src/data_types/logs/utils/get_log_level_color.ts index 3e9d2e419bb76..b51318a570923 100644 --- a/packages/kbn-discover-utils/src/data_types/logs/utils/get_log_level_color.ts +++ b/packages/kbn-discover-utils/src/data_types/logs/utils/get_log_level_color.ts @@ -7,7 +7,12 @@ * License v3.0 only", or the "Server Side Public License, v 1". */ -import { EuiThemeComputed, euiPaletteForTemperature, euiPaletteForStatus } from '@elastic/eui'; +import { + EuiThemeComputed, + euiPaletteForTemperature, + euiPaletteForStatus, + euiPaletteRed, +} from '@elastic/eui'; import { LogLevelCoalescedValue } from './get_log_level_coalesed_value'; export const getLogLevelColor = ( @@ -16,8 +21,11 @@ export const getLogLevelColor = ( ): string | undefined => { const euiPaletteForTemperature6 = euiPaletteForTemperature(6); const euiPaletteForStatus9 = euiPaletteForStatus(9); + const euiPaletteRed9 = euiPaletteRed(14); switch (logLevelCoalescedValue) { + case LogLevelCoalescedValue.trace: + return euiTheme.colors.vis.euiColorVisGrey0; case LogLevelCoalescedValue.debug: return euiPaletteForTemperature6[2]; // lighter, closer to the default color for all other unknown log levels case LogLevelCoalescedValue.info: @@ -27,15 +35,16 @@ export const getLogLevelColor = ( case LogLevelCoalescedValue.warning: return euiPaletteForStatus9[4]; case LogLevelCoalescedValue.error: - return euiPaletteForStatus9[5]; + return euiPaletteRed9[9]; case LogLevelCoalescedValue.critical: - return euiPaletteForStatus9[6]; + return euiPaletteRed9[10]; case LogLevelCoalescedValue.alert: - return euiPaletteForStatus9[7]; + return euiPaletteRed9[11]; case LogLevelCoalescedValue.emergency: + return euiPaletteRed9[12]; case LogLevelCoalescedValue.fatal: - return euiPaletteForStatus9[8]; + return euiPaletteRed9[13]; default: - return euiTheme.colors.lightShade; + return euiTheme.colors.vis.euiColorVisGrey0; } }; diff --git a/x-pack/test_serverless/functional/test_suites/observability/discover/context_awareness/_get_row_indicator_provider.ts b/x-pack/test_serverless/functional/test_suites/observability/discover/context_awareness/_get_row_indicator_provider.ts index 2c7338627ddfe..cf4658c52a9b7 100644 --- a/x-pack/test_serverless/functional/test_suites/observability/discover/context_awareness/_get_row_indicator_provider.ts +++ b/x-pack/test_serverless/functional/test_suites/observability/discover/context_awareness/_get_row_indicator_provider.ts @@ -85,9 +85,6 @@ export default function ({ getService, getPageObjects }: FtrProviderContext) { const firstColorIndicator = await firstCell.findByTestSubject( 'unifiedDataTableRowColorIndicatorCell' ); - expect(await firstColorIndicator.getComputedStyle('background-color')).to.be( - 'rgba(190, 207, 227, 1)' - ); expect(await firstColorIndicator.getAttribute('title')).to.be('Debug'); }); @@ -105,18 +102,12 @@ export default function ({ getService, getPageObjects }: FtrProviderContext) { 'unifiedDataTableRowColorIndicatorCell' ); expect(await anchorColorIndicator.getAttribute('title')).to.be('Debug'); - expect(await anchorColorIndicator.getComputedStyle('background-color')).to.be( - 'rgba(190, 207, 227, 1)' - ); let nextCell = await dataGrid.getCellElement(1, 0); let nextColorIndicator = await nextCell.findByTestSubject( 'unifiedDataTableRowColorIndicatorCell' ); expect(await nextColorIndicator.getAttribute('title')).to.be('Error'); - expect(await nextColorIndicator.getComputedStyle('background-color')).to.be( - 'rgba(223, 147, 82, 1)' - ); await browser.refresh(); await PageObjects.header.waitUntilLoadingHasFinished(); @@ -127,18 +118,12 @@ export default function ({ getService, getPageObjects }: FtrProviderContext) { 'unifiedDataTableRowColorIndicatorCell' ); expect(await anchorColorIndicator.getAttribute('title')).to.be('Debug'); - expect(await anchorColorIndicator.getComputedStyle('background-color')).to.be( - 'rgba(190, 207, 227, 1)' - ); nextCell = await dataGrid.getCellElement(1, 0); nextColorIndicator = await nextCell.findByTestSubject( 'unifiedDataTableRowColorIndicatorCell' ); expect(await nextColorIndicator.getAttribute('title')).to.be('Error'); - expect(await nextColorIndicator.getComputedStyle('background-color')).to.be( - 'rgba(223, 147, 82, 1)' - ); }); }); }