From 5fa389288eed004da4654c930724831d40fb78bf Mon Sep 17 00:00:00 2001 From: Marco Antonio Ghiani Date: Wed, 4 Dec 2024 17:32:01 +0100 Subject: [PATCH 1/5] refactor(discover): update log.level color scheme fo v8.x --- .../data_types/logs/utils/get_log_level_color.ts | 13 ++++++++----- 1 file changed, 8 insertions(+), 5 deletions(-) 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..a1c9698f43d9b 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 @@ -18,6 +18,8 @@ export const getLogLevelColor = ( const euiPaletteForStatus9 = euiPaletteForStatus(9); switch (logLevelCoalescedValue) { + case LogLevelCoalescedValue.trace: + return euiTheme.colors.mediumShade; case LogLevelCoalescedValue.debug: return euiPaletteForTemperature6[2]; // lighter, closer to the default color for all other unknown log levels case LogLevelCoalescedValue.info: @@ -27,15 +29,16 @@ export const getLogLevelColor = ( case LogLevelCoalescedValue.warning: return euiPaletteForStatus9[4]; case LogLevelCoalescedValue.error: - return euiPaletteForStatus9[5]; - case LogLevelCoalescedValue.critical: return euiPaletteForStatus9[6]; + case LogLevelCoalescedValue.critical: + return '#DC5640'; // This hardcoded value doesn't correspond to any token, it will be updated in v9 with an appropriate token-based scale for borealis theme case LogLevelCoalescedValue.alert: - return euiPaletteForStatus9[7]; + return '#D24635'; // This hardcoded value doesn't correspond to any token, it will be updated in v9 with an appropriate token-based scale for borealis theme case LogLevelCoalescedValue.emergency: + return '#C73729'; // This hardcoded value doesn't correspond to any token, it will be updated in v9 with an appropriate token-based scale for borealis theme case LogLevelCoalescedValue.fatal: - return euiPaletteForStatus9[8]; + return euiTheme.colors.danger; default: - return euiTheme.colors.lightShade; + return euiTheme.colors.mediumShade; } }; From d95ad08f59b0c9a7d2027005560ff434f8b4ef64 Mon Sep 17 00:00:00 2001 From: Marco Antonio Ghiani Date: Wed, 4 Dec 2024 17:35:57 +0100 Subject: [PATCH 2/5] refactor(discover): update test --- .../logs/utils/get_log_level_color.test.ts | 12 ++++++------ .../src/data_types/logs/utils/get_log_level_color.ts | 6 +++--- 2 files changed, 9 insertions(+), 9 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..fb32f14c72b0f 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,7 @@ import { LogLevelCoalescedValue } from './get_log_level_coalesed_value'; const euiTheme = { colors: { - lightShade: '#ffffff', + mediumShade: '#d3dae6', }, }; @@ -32,20 +32,20 @@ describe('getLogLevelColor', () => { '#d6bf57' ); expect(getLogLevelColor(LogLevelCoalescedValue.error, euiTheme as EuiThemeComputed)).toBe( - '#df9352' + '#e7664c' ); expect(getLogLevelColor(LogLevelCoalescedValue.critical, euiTheme as EuiThemeComputed)).toBe( - '#e7664c' + '#dc5640' ); expect(getLogLevelColor(LogLevelCoalescedValue.alert, euiTheme as EuiThemeComputed)).toBe( - '#da5e47' + '#d24635' ); expect(getLogLevelColor(LogLevelCoalescedValue.emergency, euiTheme as EuiThemeComputed)).toBe( - '#cc5642' + '#c73729' ); // 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 a1c9698f43d9b..801dc59c83069 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 @@ -31,11 +31,11 @@ export const getLogLevelColor = ( case LogLevelCoalescedValue.error: return euiPaletteForStatus9[6]; case LogLevelCoalescedValue.critical: - return '#DC5640'; // This hardcoded value doesn't correspond to any token, it will be updated in v9 with an appropriate token-based scale for borealis theme + return '#dc5640'; // This hardcoded value doesn't correspond to any token, it will be updated in v9 with an appropriate token-based scale for borealis theme case LogLevelCoalescedValue.alert: - return '#D24635'; // This hardcoded value doesn't correspond to any token, it will be updated in v9 with an appropriate token-based scale for borealis theme + return '#d24635'; // This hardcoded value doesn't correspond to any token, it will be updated in v9 with an appropriate token-based scale for borealis theme case LogLevelCoalescedValue.emergency: - return '#C73729'; // This hardcoded value doesn't correspond to any token, it will be updated in v9 with an appropriate token-based scale for borealis theme + return '#c73729'; // This hardcoded value doesn't correspond to any token, it will be updated in v9 with an appropriate token-based scale for borealis theme case LogLevelCoalescedValue.fatal: return euiTheme.colors.danger; default: From 4852142173b8e17c8756a056b2abfdaac1b3fa20 Mon Sep 17 00:00:00 2001 From: Marco Antonio Ghiani Date: Thu, 5 Dec 2024 11:05:05 +0100 Subject: [PATCH 3/5] test(discover): remove duplicated color test assertions --- .../_get_row_indicator_provider.ts | 15 --------------- 1 file changed, 15 deletions(-) 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)' - ); }); }); } From b9dcd3e5ae722356dc9410fcd17c8e02e72d60ad Mon Sep 17 00:00:00 2001 From: Marco Antonio Ghiani Date: Thu, 5 Dec 2024 16:43:40 +0100 Subject: [PATCH 4/5] refactor(discover): update color palette --- .../logs/utils/get_log_level_color.test.ts | 8 ++++---- .../logs/utils/get_log_level_color.ts | 18 ++++++++++++------ 2 files changed, 16 insertions(+), 10 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 fb32f14c72b0f..fcbf7848603a9 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 @@ -32,16 +32,16 @@ describe('getLogLevelColor', () => { '#d6bf57' ); expect(getLogLevelColor(LogLevelCoalescedValue.error, euiTheme as EuiThemeComputed)).toBe( - '#e7664c' + '#e18774' ); expect(getLogLevelColor(LogLevelCoalescedValue.critical, euiTheme as EuiThemeComputed)).toBe( - '#dc5640' + '#dd7b67' ); expect(getLogLevelColor(LogLevelCoalescedValue.alert, euiTheme as EuiThemeComputed)).toBe( - '#d24635' + '#d76f5b' ); expect(getLogLevelColor(LogLevelCoalescedValue.emergency, euiTheme as EuiThemeComputed)).toBe( - '#c73729' + '#d2634e' ); // other expect(getLogLevelColor(LogLevelCoalescedValue.trace, euiTheme as EuiThemeComputed)).toBe( 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 801dc59c83069..1418ae7f10f45 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,6 +21,7 @@ export const getLogLevelColor = ( ): string | undefined => { const euiPaletteForTemperature6 = euiPaletteForTemperature(6); const euiPaletteForStatus9 = euiPaletteForStatus(9); + const euiPaletteRed9 = euiPaletteRed(14); switch (logLevelCoalescedValue) { case LogLevelCoalescedValue.trace: @@ -29,15 +35,15 @@ export const getLogLevelColor = ( case LogLevelCoalescedValue.warning: return euiPaletteForStatus9[4]; case LogLevelCoalescedValue.error: - return euiPaletteForStatus9[6]; + return euiPaletteRed9[9]; case LogLevelCoalescedValue.critical: - return '#dc5640'; // This hardcoded value doesn't correspond to any token, it will be updated in v9 with an appropriate token-based scale for borealis theme + return euiPaletteRed9[10]; case LogLevelCoalescedValue.alert: - return '#d24635'; // This hardcoded value doesn't correspond to any token, it will be updated in v9 with an appropriate token-based scale for borealis theme + return euiPaletteRed9[11]; case LogLevelCoalescedValue.emergency: - return '#c73729'; // This hardcoded value doesn't correspond to any token, it will be updated in v9 with an appropriate token-based scale for borealis theme + return euiPaletteRed9[12]; case LogLevelCoalescedValue.fatal: - return euiTheme.colors.danger; + return euiPaletteRed9[13]; default: return euiTheme.colors.mediumShade; } From a3b2504705ebde5ae4f29c6287212525b36dcd94 Mon Sep 17 00:00:00 2001 From: Marco Antonio Ghiani Date: Thu, 12 Dec 2024 13:02:22 +0100 Subject: [PATCH 5/5] style(discover): update token from vis palette --- .../src/data_types/logs/utils/get_log_level_color.test.ts | 4 +++- .../src/data_types/logs/utils/get_log_level_color.ts | 4 ++-- 2 files changed, 5 insertions(+), 3 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 fcbf7848603a9..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: { - mediumShade: '#d3dae6', + vis: { + euiColorVisGrey0: '#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 1418ae7f10f45..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 @@ -25,7 +25,7 @@ export const getLogLevelColor = ( switch (logLevelCoalescedValue) { case LogLevelCoalescedValue.trace: - return euiTheme.colors.mediumShade; + 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: @@ -45,6 +45,6 @@ export const getLogLevelColor = ( case LogLevelCoalescedValue.fatal: return euiPaletteRed9[13]; default: - return euiTheme.colors.mediumShade; + return euiTheme.colors.vis.euiColorVisGrey0; } };