Eui Refresh #204007

CAWilson94 · 2024-12-12T11:37:49Z

Summary

This PR covers required updates for EUI refresh: #11228
The updates should only cover Entity Owned components.

Severity Colors Blocked

Severity colors are on hold until the security severity color palette is finalised. Once agreed, a shared hook will be updated across all of security, replacing the current RISK_SEVERITY_COLOUR mapping. The previous severity colors hook was reverted in preparation for this change. Updates for EA will be tracked accordingly.

See https://elastic.slack.com/archives/C0851RDCWPP/p1736954935896329 for more details

https://github.com/elastic/security-team/issues/11516
#206276

Testing

Running Kibana with the Borealis theme
In order to run Kibana with Borealis, you'll need to do the following:

Set the following in kibana.dev.yml: uiSettings.experimental.themeSwitcherEnabled: true
Run Kibana with the following environment variable set:
KBN_OPTIMIZER_THEMES="borealislight,borealisdark,v8light,v8dark" yarn start
This will expose a toggle under Stack Management > Advanced Settings > Theme version, which you can use to toggle
between Amsterdam and Borealis.

More details about each section #199715

Borealis Updates Light & Dark Theme

Screenshots

Google Docs for easy read - same screenshots below
https://docs.google.com/document/d/1tKPoqCPbccX94cqgPyHKBdr9_K3kmqveQGkcGo_Q8k4/edit?usp=sharing

Light Theme

Entity Store

Risk Score

Dashboard and Flyout

Dark Theme

Entity Store

Risk Score

Dashboard and Flyout

…risk severity updated to use RISK_SEVERITY_COLOUR instead of SEVERITY_COLOUR

…hook

CAWilson94 · 2024-12-12T11:45:36Z

...ty_solution/public/entity_analytics/components/asset_criticality/asset_criticality_badge.tsx

-  low_impact: '#54B399',
-  unassigned: euiLightVars.euiColorMediumShade,
-};
+import { useCriticalityLevelColors } from '../../hooks/use_criticality_level_colors';


Moved this to a hook in the hooks folder. Noticed some hooks in asset_criticality aren’t in hooks; both locations make sense, but this follows a better convention.

CAWilson94 · 2024-12-12T11:51:36Z

.../plugins/security_solution/public/entity_analytics/components/severity/common/index.test.tsx

 import { RiskSeverity } from '../../../../../common/search_strategy';
 import { RiskScoreLevel } from '.';
-import { SEVERITY_COLOR } from '../../../../overview/components/detection_response/utils';
+import { RISK_SEVERITY_COLOUR } from '../../../common/utils';


Updated RISK_SEVERITY_COLOUR to match updates previously made to index from SEVERITY --> RISK_SEVERITY

CAWilson94 · 2024-12-12T11:54:11Z

x-pack/plugins/security_solution/public/entity_analytics/components/severity/common/index.tsx

-  </RiskBadge>
-));
+}> = React.memo(({ severity, hideBackgroundColor = false, 'data-test-subj': dataTestSubj }) => {
+  const { euiTheme } = useEuiTheme();


This is the change

CAWilson94 · 2024-12-12T11:54:22Z

x-pack/plugins/security_solution/public/entity_analytics/components/severity/common/index.tsx

+  const { euiTheme } = useEuiTheme();
+  return (
+    <RiskBadge
+      color={euiTheme.colors.danger}


along with this change, the others I think just formatter

…n in place, to change references WiP

…uiTheme hook for colors

… - WiP consider moving back to static mapping if eui can allow

elasticmachine · 2024-12-16T09:59:43Z

Pinging @elastic/kibana-cloud-security-posture (Team:Cloud Security)

elasticmachine · 2024-12-16T09:59:45Z

Pinging @elastic/security-entity-analytics (Team:Entity Analytics)

...plugins/security_solution/public/entity_analytics/lens_attributes/risk_score_summary.test.ts

x-pack/solutions/security/plugins/security_solution/public/entity_analytics/common/utils.ts

…-fix'

CAWilson94 · 2025-01-20T17:05:50Z

.../entity_analytics/components/asset_criticality_file_uploader/components/file_picker_step.tsx

+      margin-left: ${euiTheme.size.l};
+      line-height: ${useEuiFontSize('s').lineHeight};
+    `;
+


May want to move this out of here and pass in euitheme to listStyles instead of defining this inside the component.

…rdam theme - Borealis old colors

…everity colour palette is agreed

…high and critical risk score dropdown

…-fix'

## Summary Apply severity colors for Borealis theme. #204007 (comment) Update: ⚠️ As the final decision for severity color is still pending, the temporary colors are the hard coded color hex: #203387 `TODO` Borealis migration - move from hardcoded values to severity palette elastic/security-team#11606 | Color token | Amsterdam|Borealis| |-------------|------------|------------| | Critical | euiThemeVars.euiColorDanger |```#E7664C```| | High | euiThemeVars.euiColorVis9_behindText |```#DA8B45``` | | Meduiml |euiThemeVars.euiColorVis5_behindText|```#D6BF57``` | | Low | euiThemeVars.euiColorVis0| ```#54B399``` | ### Running Kibana with the Borealis theme In order to run Kibana with Borealis, you'll need to do the following: Set the following in kibana.dev.yml: uiSettings.experimental.themeSwitcherEnabled: true Run Kibana with the following environment variable set: KBN_OPTIMIZER_THEMES="borealislight,borealisdark,v8light,v8dark" yarn start This will expose a toggle under Stack Management > Advanced Settings > Theme version, which you can use to toggle between Amsterdam and Borealis. ![Image](https://github.com/user-attachments/assets/78d64946-43fc-4400-bbb1-229d900b7f05) ### Checklist - [x] [Unit or functional tests](https://www.elastic.co/guide/en/kibana/master/development-tests.html) were updated or added to match the most common scenarios --------- Co-authored-by: kibanamachine <42973632+kibanamachine@users.noreply.github.com>

machadoum

The code looks good to me.

I agree with what you said in the video about the severity filter. It is hard to read.
Do you have any update from the design team on that?

Agreed to iterate severity colors for security with designers and eui, so reverted these changes. Reviewer also on PTO so cannot change status.

CAWilson94 · 2025-01-27T10:14:11Z

The code looks good to me.

I agree with what you said in the video about the severity filter. It is hard to read. Do you have any update from the design team on that?

Hello! Yes! Thanks for asking, @codearos gave me a better background color to use, which is updated in the google doc now :)

elasticmachine · 2025-01-27T10:50:40Z

💚 Build Succeeded

Buildkite Build
Commit: d8ad739
Kibana Serverless Image: docker.elastic.co/kibana-ci/kibana-serverless:pr-204007-d8ad739f0bb0
Security Deployment

Metrics [docs]

Async chunks

Total size of all lazy-loaded chunks that will be downloaded as the user navigates the app

id	before	after	diff
`securitySolution`	21.3MB	21.3MB	+172.0B

History

💚 Build #270199 succeeded 7592982
💔 Build #270162 failed 8528f33
💛 Build #269644 was flaky 9607bb0
💚 Build #269619 succeeded 0eb1ddd

cc @CAWilson94

codearos

Thank you Charlotte! LGTM👍

…#206276) ## Summary Apply severity colors for Borealis theme. elastic#204007 (comment) Update: ⚠️ As the final decision for severity color is still pending, the temporary colors are the hard coded color hex: elastic#203387 `TODO` Borealis migration - move from hardcoded values to severity palette elastic/security-team#11606 | Color token | Amsterdam|Borealis| |-------------|------------|------------| | Critical | euiThemeVars.euiColorDanger |```#E7664C```| | High | euiThemeVars.euiColorVis9_behindText |```#DA8B45``` | | Meduiml |euiThemeVars.euiColorVis5_behindText|```#D6BF57``` | | Low | euiThemeVars.euiColorVis0| ```#54B399``` | ### Running Kibana with the Borealis theme In order to run Kibana with Borealis, you'll need to do the following: Set the following in kibana.dev.yml: uiSettings.experimental.themeSwitcherEnabled: true Run Kibana with the following environment variable set: KBN_OPTIMIZER_THEMES="borealislight,borealisdark,v8light,v8dark" yarn start This will expose a toggle under Stack Management > Advanced Settings > Theme version, which you can use to toggle between Amsterdam and Borealis. ![Image](https://github.com/user-attachments/assets/78d64946-43fc-4400-bbb1-229d900b7f05) ### Checklist - [x] [Unit or functional tests](https://www.elastic.co/guide/en/kibana/master/development-tests.html) were updated or added to match the most common scenarios --------- Co-authored-by: kibanamachine <42973632+kibanamachine@users.noreply.github.com>

## Summary This PR covers required updates for EUI refresh: [elastic#11228](elastic/security-team#11228) The updates should only cover Entity Owned components. ### Severity Colors Blocked Severity colors are on hold until the security severity color palette is finalised. Once agreed, a shared hook will be updated across all of security, replacing the current RISK_SEVERITY_COLOUR mapping. The previous severity colors hook was reverted in preparation for this change. Updates for EA will be tracked accordingly. See https://elastic.slack.com/archives/C0851RDCWPP/p1736954935896329 for more details elastic/security-team#11516 elastic#206276 --- ### Testing Running Kibana with the Borealis theme In order to run Kibana with Borealis, you'll need to do the following: 1. Set the following in kibana.dev.yml: u`iSettings.experimental.themeSwitcherEnabled: true` 2. Run Kibana with the following environment variable set: `KBN_OPTIMIZER_THEMES="borealislight,borealisdark,v8light,v8dark" yarn start` 3. This will expose a toggle under **Stack Management > Advanced Settings > Theme version**, which you can use to toggle between Amsterdam and Borealis. --- More details about each section elastic#199715 #### Borealis Updates Light & Dark Theme ### Screenshots Google Docs for easy read - same screenshots below https://docs.google.com/document/d/1tKPoqCPbccX94cqgPyHKBdr9_K3kmqveQGkcGo_Q8k4/edit?usp=sharing --- ## Light Theme ### Entity Store ![entityStore](https://github.com/user-attachments/assets/94c03a9a-f6d2-4cf7-836b-ae3b3c310cdb) ![EntityStoreStatus](https://github.com/user-attachments/assets/46d45ad4-73aa-4fb7-b2ab-0b6525016ef5) ### Risk Score ![RiskScore](https://github.com/user-attachments/assets/63f1eca3-46f5-4f21-9cef-7b3b6c0724fd) ### Dashboard and Flyout ![Dashboard2](https://github.com/user-attachments/assets/5901db26-81b9-46bc-a3f4-4de7770babbc) ![RiskLevels](https://github.com/user-attachments/assets/5273c891-232f-4c6f-892f-c1979c2f8c23) ![FlyoutRiskScore](https://github.com/user-attachments/assets/1f0ebd6d-82d5-4356-907a-89bc1a04f483) ![FlyoutAssetCriticalityColors](https://github.com/user-attachments/assets/cca34be8-f3f8-4a5b-8698-1227d80edcc0) ## Dark Theme ### Entity Store ![DarkEntityStore](https://github.com/user-attachments/assets/48a12285-e57c-4da1-9376-489b4d9d2853) ![DarkEntityStoreStatus](https://github.com/user-attachments/assets/9a48e492-c28a-4dd0-876d-e34dcfefe49d) ### Risk Score ![DarkRiskScore](https://github.com/user-attachments/assets/becab00e-996d-4485-94fa-bf9bee337aaa) ### Dashboard and Flyout ![DarkDashboard](https://github.com/user-attachments/assets/72522716-0c29-4935-ba0c-f9fcea8ff94a) ![DarkRiskScore](https://github.com/user-attachments/assets/83ae74c8-3e16-49c5-9c05-9b666e146b1b) ![DarkFlyoutRiskScore](https://github.com/user-attachments/assets/2d97c992-ca08-4f97-9338-e59805084a36) ![DarkFlyoutAssetCriticalityColors](https://github.com/user-attachments/assets/197a8990-282f-4b01-bab5-e0b2b1518217) --------- Co-authored-by: kibanamachine <42973632+kibanamachine@users.noreply.github.com> Co-authored-by: Mark Hopkin <mark.hopkin@elastic.co>

CAWilson94 added 5 commits December 12, 2024 11:24

asset criticality badge colors update to use euiTheme Colors

351e900

color tokens updated, util functions and json tokens removed

f0692f2

JSON tokens updated to pull in from euiTheme instead; index text for …

a5a8653

…risk severity updated to use RISK_SEVERITY_COLOUR instead of SEVERITY_COLOUR

EUI refresh theme colors update

4d94311

change theme colors to use from themeProvider instead of useEuiTheme …

ed7b515

…hook

CAWilson94 self-assigned this Dec 12, 2024

restore missing word in filepicker step

9d5a020

CAWilson94 commented Dec 12, 2024

View reviewed changes

CAWilson94 and others added 4 commits December 12, 2024 13:40

risk severity hook to use the useEuiTheme hook instead of - definitio…

0164b9a

…n in place, to change references WiP

Merge branch 'elastic:main' into eui

7304fdb

riskSeverityColors hook used instead of static color mapping to use e…

087a782

…uiTheme hook for colors

riskSeverity hook used instead of static mapping to use euiTheme hook…

64b11f9

… - WiP consider moving back to static mapping if eui can allow

CAWilson94 added ci:project-deploy-security Create a Security Serverless Project Team:Cloud Security Cloud Security team related Team:Entity Analytics Security Entity Analytics Team EUI Visual Refresh v9.0.0 backport:skip This commit does not require backporting labels Dec 16, 2024

Merge branch 'main' into eui

3cd2bd1

CAWilson94 marked this pull request as ready for review December 16, 2024 09:59

CAWilson94 requested a review from a team as a code owner December 16, 2024 09:59

CAWilson94 requested a review from machadoum December 16, 2024 09:59

CAWilson94 added the release_note:feature Makes this part of the condensed release notes label Dec 16, 2024

CAWilson94 and others added 2 commits December 16, 2024 10:08

Merge branch 'main' into eui

51aa944

moved static definitions to hook usage in risk severity colors

7cd0188

CAWilson94 requested a review from angorayc January 8, 2025 07:57

Merge branch 'main' into eui

d34804b

mgadewoll reviewed Jan 8, 2025

View reviewed changes

...plugins/security_solution/public/entity_analytics/lens_attributes/risk_score_summary.test.ts Outdated Show resolved Hide resolved

mgadewoll reviewed Jan 9, 2025

View reviewed changes

x-pack/solutions/security/plugins/security_solution/public/entity_analytics/common/utils.ts Outdated Show resolved Hide resolved

angorayc mentioned this pull request Jan 10, 2025

[SecuritySolution] Update severity colors for Borealis theme #206276

Merged

1 task

CAWilson94 and others added 5 commits January 15, 2025 10:33

risk colors updated for borealis and amsterdam in interim of shared hook

9843d7b

Merge branch 'main' into eui

21611e2

[CI] Auto-commit changed files from 'node scripts/eslint --no-cache -…

4796135

…-fix'

Merge branch 'main' into eui

4dbc25e

fixing a couple of errors

2b82ee5

CAWilson94 commented Jan 20, 2025

View reviewed changes

CAWilson94 and others added 3 commits January 23, 2025 12:03

Merge branch 'main' into eui

0eb1ddd

Update Severity colors in utils to use previous colors matching Amste…

9607bb0

…rdam theme - Borealis old colors

revert risk severity colors palette changes; blocked until security s…

6c7b3f0

…everity colour palette is agreed

CAWilson94 requested a review from mgadewoll January 24, 2025 17:14

CAWilson94 and others added 4 commits January 24, 2025 17:14

Merge branch 'main' into eui

02e5883

background color changed to euiTheme.colors.backgroundBaseDanger for …

adc05df

…high and critical risk score dropdown

[CI] Auto-commit changed files from 'node scripts/eslint --no-cache -…

8528f33

…-fix'

update unknown colors for testing risk severity

7592982

machadoum approved these changes Jan 27, 2025

View reviewed changes

CAWilson94 added 2 commits January 27, 2025 09:52

Merge branch 'main' into eui

ef6a5eb

Merge branch 'main' into eui

d8ad739

codearos approved these changes Jan 27, 2025

View reviewed changes

CAWilson94 merged commit 4ecf32b into elastic:main Jan 27, 2025
8 checks passed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Eui Refresh #204007

Eui Refresh #204007

CAWilson94 commented Dec 12, 2024 •

edited

Loading

CAWilson94 Dec 12, 2024

CAWilson94 Dec 12, 2024 •

edited

Loading

CAWilson94 Dec 12, 2024

CAWilson94 Dec 12, 2024

elasticmachine commented Dec 16, 2024

elasticmachine commented Dec 16, 2024

CAWilson94 Jan 20, 2025

machadoum left a comment

CAWilson94 commented Jan 27, 2025

elasticmachine commented Jan 27, 2025 •

edited

Loading

codearos left a comment

Eui Refresh #204007

Eui Refresh #204007

Conversation

CAWilson94 commented Dec 12, 2024 • edited Loading

Summary

Severity Colors Blocked

Testing

Borealis Updates Light & Dark Theme

Screenshots

Light Theme

Entity Store

Risk Score

Dashboard and Flyout

Dark Theme

Entity Store

Risk Score

Dashboard and Flyout

CAWilson94 Dec 12, 2024

Choose a reason for hiding this comment

CAWilson94 Dec 12, 2024 • edited Loading

Choose a reason for hiding this comment

CAWilson94 Dec 12, 2024

Choose a reason for hiding this comment

CAWilson94 Dec 12, 2024

Choose a reason for hiding this comment

elasticmachine commented Dec 16, 2024

elasticmachine commented Dec 16, 2024

CAWilson94 Jan 20, 2025

Choose a reason for hiding this comment

machadoum left a comment

Choose a reason for hiding this comment

CAWilson94 commented Jan 27, 2025

elasticmachine commented Jan 27, 2025 • edited Loading

💚 Build Succeeded

Metrics [docs]

Async chunks

History

codearos left a comment

Choose a reason for hiding this comment

CAWilson94 commented Dec 12, 2024 •

edited

Loading

CAWilson94 Dec 12, 2024 •

edited

Loading

elasticmachine commented Jan 27, 2025 •

edited

Loading