Skip to content

Commit

Permalink
[One Discover] Update log.level indicators color (#202985)
Browse files Browse the repository at this point in the history
## 📓 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](#186273 (comment)),
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.

<img width="934" alt="Screenshot 2024-12-04 at 17 40 32"
src="https://github.com/user-attachments/assets/b3da1300-b39a-4ad0-92c9-fde5dabe91ec">

---------

Co-authored-by: Marco Antonio Ghiani <[email protected]>
(cherry picked from commit c47b509)
  • Loading branch information
tonyghiani committed Dec 12, 2024
1 parent 8dcbb64 commit 1cc0735
Show file tree
Hide file tree
Showing 3 changed files with 23 additions and 27 deletions.
Original file line number Diff line number Diff line change
Expand Up @@ -13,7 +13,9 @@ import { LogLevelCoalescedValue } from './get_log_level_coalesed_value';

const euiTheme = {
colors: {
lightShade: '#ffffff',
vis: {
euiColorVisGrey0: '#d3dae6',
},
},
};

Expand All @@ -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'
);
});
});
Original file line number Diff line number Diff line change
Expand Up @@ -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 = (
Expand All @@ -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:
Expand All @@ -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;
}
};
Original file line number Diff line number Diff line change
Expand Up @@ -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');
});

Expand All @@ -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();
Expand All @@ -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)'
);
});
});
}

0 comments on commit 1cc0735

Please sign in to comment.