-
Notifications
You must be signed in to change notification settings - Fork 8.3k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
kibana-cloud-security-posture owned UX adjustment for borealis #205136
Conversation
x-pack/solutions/security/plugins/session_view/public/components/tty_player/styles.ts
Outdated
Show resolved
Hide resolved
...ins/session_view/public/components/tty_player_controls/tty_player_controls_markers/styles.ts
Show resolved
Hide resolved
@@ -36,7 +41,7 @@ export const useStyles = (progress: number) => { | |||
if (selected) { | |||
return euiVars.terminalOutputMarkerAccent; | |||
} | |||
return euiVars.euiColorVis1; | |||
return isAmsterdam(themeName) ? euiVars.euiColorVis1 : euiVars.euiColorVis2; |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
see color palette matching table in https://docs.google.com/document/d/1IAKbasq1nDfqd2IU3KdP8cwD3uCCAwkIekKRq7zgyWg/edit?tab=t.0#heading=h.u0vaano75gy0
@@ -84,16 +89,24 @@ export const useStyles = (progress: number) => { | |||
"input[type='range']::-webkit-slider-thumb": customThumb, | |||
"input[type='range']::-moz-range-thumb": customThumb, | |||
'.euiRangeHighlight__progress': { | |||
backgroundColor: euiVars.euiColorVis0_behindText, | |||
backgroundColor: isAmsterdam(themeName) |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
_behindText
won't be available in Borealis, advice is to use the normal color
...olutions/security/packages/kbn-cloud-security-posture/public/src/utils/get_finding_colors.ts
Outdated
Show resolved
Hide resolved
...olutions/security/packages/kbn-cloud-security-posture/public/src/utils/get_finding_colors.ts
Outdated
Show resolved
Hide resolved
...olutions/security/packages/kbn-cloud-security-posture/public/src/utils/get_finding_colors.ts
Outdated
Show resolved
Hide resolved
@@ -61,7 +60,6 @@ export const ControlGeneralViewResponse = ({ | |||
const [isPopoverOpen, setPopoverOpen] = useState(false); | |||
const styles = useStyles(); | |||
const selectorStyles = useSelectorStyles(); | |||
const visColorsBehindText = euiPaletteColorBlindBehindText(); |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
behind
text colors won't be available in Borealis. Even though cloud_defend is being deprecated, replacing for safety to similar semantic tokens, see FAQ #199715 (comment)
x-pack/solutions/security/plugins/cloud_security_posture/public/assets/icons/nvd_logo_svg.tsx
Show resolved
Hide resolved
const { score, vector, version } = vectorScore; | ||
return ( | ||
<> | ||
<EuiFlexGroup | ||
alignItems="center" | ||
css={css` | ||
background: ${euiThemeVars.euiColorLightestShade}; | ||
padding: ${euiThemeVars.euiSizeXS} ${euiThemeVars.euiSizeS}; | ||
background: ${euiTheme.colors.backgroundLightText}; |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
as shade colors should be replaced and shouldn't be used for background, replacing with more suitable token. But the color is slightly different
...ic/cloud_security_posture/components/csp_details/misconfiguration_findings_details_table.tsx
Show resolved
Hide resolved
Pinging @elastic/kibana-cloud-security-posture (Team:Cloud Security) |
x-pack/solutions/security/packages/distribution_bar/src/distribution_bar.stories.tsx
Show resolved
Hide resolved
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Pretty nice stuff! I wonder if we could keep track of all pending items in a centralized ticket and not only in comments.
The PR description says this is still WIP, but if you confirm this is ready, I'll approve
...olutions/security/packages/kbn-cloud-security-posture/public/src/utils/get_finding_colors.ts
Outdated
Show resolved
Hide resolved
x-pack/solutions/security/plugins/cloud_security_posture/public/assets/icons/nvd_logo_svg.tsx
Show resolved
Hide resolved
...tions/security/plugins/kubernetes_security/public/components/container_name_widget/styles.ts
Outdated
Show resolved
Hide resolved
...utions/security/plugins/kubernetes_security/public/components/tree_view_container/helpers.ts
Outdated
Show resolved
Hide resolved
x-pack/solutions/security/plugins/kubernetes_security/public/hooks/use_eui_theme.ts
Outdated
Show resolved
Hide resolved
...ins/session_view/public/components/tty_player_controls/tty_player_controls_markers/styles.ts
Show resolved
Hide resolved
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
to make it easier to track and resolve the TODOs when Borealis is released, it might be helpful to add a prefix to them. e.g. TODO: Borealis - ...
would make it much simpler to search and address these specific items later
}, | ||
{ | ||
key: 'medium', | ||
count: 800, | ||
color: euiThemeVars.euiColorVis5, | ||
color: '#f7dc6f', |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
my ocd: yellow
/ gold
/ lemonchiffon
/ lightgoldenrodyellow
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
gold it is then :)
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Nice work!!
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
THI changes lgtm
💚 Build Succeeded
Metrics [docs]Module Count
Public APIs missing comments
Async chunks
Page load bundle
Unknown metric groupsAPI count
ESLint disabled line counts
Total ESLint disabled count
History
|
…ic#205136) ## Summary This PR covers some of the changes required for the new Borealis theme: - elastic/security-team#11230 The detailed guide of migrating to Borealis can be found in this meta ticket: - elastic#199715 As the work is still in progress, here are the details of what is included in this PR: - the full migration is done for flows related to Cloud Security Posture. One requirement from EUI is not fulfilled, as we switched to hardcoded severity colors and hardcoded failed/passed misconfig finding colors. This is because the new severity color palette built by EUI team is not yet approved by Security Designers, see https://elastic.slack.com/archives/C0851RDCWPP/p1736954935896329 for more details - I made some straightforward changes to Cloud Defend and k8s dashboard plugins and added some todos, but these plugins are decommissioned in Serverless and from 9.0, so no thorough testing is required - In the Session View I made some straightforward changes according to the EUI guide and added TODOs where feedback from designers is required. Still waiting for the designer's feedback, but I think we can safely merge the changes present in this PR and it will bring Session View to a better state before 9.0 FF Amsterdam vs Borealis comparison screenshots for CSP and Session View: https://www.figma.com/design/XPKYLgZcoI61V3RUfHoHg9/Untitled?node-id=41-42&t=zLvulagbqCiXhrAo-0 ### Checklist Check the PR satisfies following conditions. Reviewers should verify this PR satisfies this list as well. - [ ] [Documentation](https://www.elastic.co/guide/en/kibana/master/development-documentation.html) was added for features that require explanation or tutorials - [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 - [x] If a plugin configuration key changed, check if it needs to be allowlisted in the cloud and added to the [docker list](https://github.com/elastic/kibana/blob/main/src/dev/build/tasks/os_packages/docker_generator/resources/base/bin/kibana-docker) - [x] This was checked for breaking HTTP API changes, and any breaking changes have been approved by the breaking-change committee. The `release_note:breaking` label should be applied in these situations. - [x] [Flaky Test Runner](https://ci-stats.kibana.dev/trigger_flaky_test_runner/1) was used on any tests changed - [x] The PR description includes the appropriate Release Notes section, and the correct `release_note:*` label is applied per the [guidelines](https://www.elastic.co/guide/en/kibana/master/contributing.html#kibana-release-notes-process) --------- Co-authored-by: kibanamachine <42973632+kibanamachine@users.noreply.github.com>
## Summary Migrating Session View to Borealis: - adjust button colors to the new color palette after feedback from @codearos - get rid of the use of `euiVars` in favor of color tokens from `euiTheme` - replace custom color `buttonsBackgroundNormalDefaultPrimary` with eui token - get rid of `EuiTextColor` wrapping for Details panel values, after feedback from @codearos , the different color usage there has unclear purpose and doesn't work well with the new theme Follow up after: - #205136 Overall migration guide from EUI: - #199715 Amsterdam vs Borealis comparison screenshots for CSP and Session View: https://www.figma.com/design/XPKYLgZcoI61V3RUfHoHg9/Untitled?node-id=41-42&t=zLvulagbqCiXhrAo-0 ### How to test Upload data ``` node scripts/es_archiver load x-pack/test/functional/es_archives/session_view/process_events --es-url http://elastic:changeme@localhost:9200 --kibana-url http://elastic:changeme@localhost:5601/kbn node scripts/es_archiver load x-pack/test/functional/es_archives/session_view/alerts --es-url http://elastic:changeme@localhost:9200 --kibana-url http://elastic:changeme@localhost:5601/kbn node scripts/es_archiver load x-pack/test/functional/es_archives/session_view/io_events --es-url http://elastic:changeme@localhost:9200 --kibana-url http://elastic:changeme@localhost:5601/kbn ``` navigate to Alerts and choose the last 3 years in the date picker. There should be alerts with the Session View button available ### Checklist Check the PR satisfies following conditions. Reviewers should verify this PR satisfies this list as well. - [x] Any text added follows [EUI's writing guidelines](https://elastic.github.io/eui/#/guidelines/writing), uses sentence case text and includes [i18n support](https://github.com/elastic/kibana/blob/main/src/platform/packages/shared/kbn-i18n/README.md) - [x] [Documentation](https://www.elastic.co/guide/en/kibana/master/development-documentation.html) was added for features that require explanation or tutorials - [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 - [x] If a plugin configuration key changed, check if it needs to be allowlisted in the cloud and added to the [docker list](https://github.com/elastic/kibana/blob/main/src/dev/build/tasks/os_packages/docker_generator/resources/base/bin/kibana-docker) - [x] This was checked for breaking HTTP API changes, and any breaking changes have been approved by the breaking-change committee. The `release_note:breaking` label should be applied in these situations. - [x] [Flaky Test Runner](https://ci-stats.kibana.dev/trigger_flaky_test_runner/1) was used on any tests changed - [x] The PR description includes the appropriate Release Notes section, and the correct `release_note:*` label is applied per the [guidelines](https://www.elastic.co/guide/en/kibana/master/contributing.html#kibana-release-notes-process)
…ic#205136) ## Summary This PR covers some of the changes required for the new Borealis theme: - elastic/security-team#11230 The detailed guide of migrating to Borealis can be found in this meta ticket: - elastic#199715 As the work is still in progress, here are the details of what is included in this PR: - the full migration is done for flows related to Cloud Security Posture. One requirement from EUI is not fulfilled, as we switched to hardcoded severity colors and hardcoded failed/passed misconfig finding colors. This is because the new severity color palette built by EUI team is not yet approved by Security Designers, see https://elastic.slack.com/archives/C0851RDCWPP/p1736954935896329 for more details - I made some straightforward changes to Cloud Defend and k8s dashboard plugins and added some todos, but these plugins are decommissioned in Serverless and from 9.0, so no thorough testing is required - In the Session View I made some straightforward changes according to the EUI guide and added TODOs where feedback from designers is required. Still waiting for the designer's feedback, but I think we can safely merge the changes present in this PR and it will bring Session View to a better state before 9.0 FF Amsterdam vs Borealis comparison screenshots for CSP and Session View: https://www.figma.com/design/XPKYLgZcoI61V3RUfHoHg9/Untitled?node-id=41-42&t=zLvulagbqCiXhrAo-0 ### Checklist Check the PR satisfies following conditions. Reviewers should verify this PR satisfies this list as well. - [ ] [Documentation](https://www.elastic.co/guide/en/kibana/master/development-documentation.html) was added for features that require explanation or tutorials - [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 - [x] If a plugin configuration key changed, check if it needs to be allowlisted in the cloud and added to the [docker list](https://github.com/elastic/kibana/blob/main/src/dev/build/tasks/os_packages/docker_generator/resources/base/bin/kibana-docker) - [x] This was checked for breaking HTTP API changes, and any breaking changes have been approved by the breaking-change committee. The `release_note:breaking` label should be applied in these situations. - [x] [Flaky Test Runner](https://ci-stats.kibana.dev/trigger_flaky_test_runner/1) was used on any tests changed - [x] The PR description includes the appropriate Release Notes section, and the correct `release_note:*` label is applied per the [guidelines](https://www.elastic.co/guide/en/kibana/master/contributing.html#kibana-release-notes-process) --------- Co-authored-by: kibanamachine <42973632+kibanamachine@users.noreply.github.com>
## Summary Migrating Session View to Borealis: - adjust button colors to the new color palette after feedback from @codearos - get rid of the use of `euiVars` in favor of color tokens from `euiTheme` - replace custom color `buttonsBackgroundNormalDefaultPrimary` with eui token - get rid of `EuiTextColor` wrapping for Details panel values, after feedback from @codearos , the different color usage there has unclear purpose and doesn't work well with the new theme Follow up after: - elastic#205136 Overall migration guide from EUI: - elastic#199715 Amsterdam vs Borealis comparison screenshots for CSP and Session View: https://www.figma.com/design/XPKYLgZcoI61V3RUfHoHg9/Untitled?node-id=41-42&t=zLvulagbqCiXhrAo-0 ### How to test Upload data ``` node scripts/es_archiver load x-pack/test/functional/es_archives/session_view/process_events --es-url http://elastic:changeme@localhost:9200 --kibana-url http://elastic:changeme@localhost:5601/kbn node scripts/es_archiver load x-pack/test/functional/es_archives/session_view/alerts --es-url http://elastic:changeme@localhost:9200 --kibana-url http://elastic:changeme@localhost:5601/kbn node scripts/es_archiver load x-pack/test/functional/es_archives/session_view/io_events --es-url http://elastic:changeme@localhost:9200 --kibana-url http://elastic:changeme@localhost:5601/kbn ``` navigate to Alerts and choose the last 3 years in the date picker. There should be alerts with the Session View button available ### Checklist Check the PR satisfies following conditions. Reviewers should verify this PR satisfies this list as well. - [x] Any text added follows [EUI's writing guidelines](https://elastic.github.io/eui/#/guidelines/writing), uses sentence case text and includes [i18n support](https://github.com/elastic/kibana/blob/main/src/platform/packages/shared/kbn-i18n/README.md) - [x] [Documentation](https://www.elastic.co/guide/en/kibana/master/development-documentation.html) was added for features that require explanation or tutorials - [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 - [x] If a plugin configuration key changed, check if it needs to be allowlisted in the cloud and added to the [docker list](https://github.com/elastic/kibana/blob/main/src/dev/build/tasks/os_packages/docker_generator/resources/base/bin/kibana-docker) - [x] This was checked for breaking HTTP API changes, and any breaking changes have been approved by the breaking-change committee. The `release_note:breaking` label should be applied in these situations. - [x] [Flaky Test Runner](https://ci-stats.kibana.dev/trigger_flaky_test_runner/1) was used on any tests changed - [x] The PR description includes the appropriate Release Notes section, and the correct `release_note:*` label is applied per the [guidelines](https://www.elastic.co/guide/en/kibana/master/contributing.html#kibana-release-notes-process)
## Summary Migrating Session View to Borealis: - adjust button colors to the new color palette after feedback from @codearos - get rid of the use of `euiVars` in favor of color tokens from `euiTheme` - replace custom color `buttonsBackgroundNormalDefaultPrimary` with eui token - get rid of `EuiTextColor` wrapping for Details panel values, after feedback from @codearos , the different color usage there has unclear purpose and doesn't work well with the new theme Follow up after: - elastic#205136 Overall migration guide from EUI: - elastic#199715 Amsterdam vs Borealis comparison screenshots for CSP and Session View: https://www.figma.com/design/XPKYLgZcoI61V3RUfHoHg9/Untitled?node-id=41-42&t=zLvulagbqCiXhrAo-0 ### How to test Upload data ``` node scripts/es_archiver load x-pack/test/functional/es_archives/session_view/process_events --es-url http://elastic:changeme@localhost:9200 --kibana-url http://elastic:changeme@localhost:5601/kbn node scripts/es_archiver load x-pack/test/functional/es_archives/session_view/alerts --es-url http://elastic:changeme@localhost:9200 --kibana-url http://elastic:changeme@localhost:5601/kbn node scripts/es_archiver load x-pack/test/functional/es_archives/session_view/io_events --es-url http://elastic:changeme@localhost:9200 --kibana-url http://elastic:changeme@localhost:5601/kbn ``` navigate to Alerts and choose the last 3 years in the date picker. There should be alerts with the Session View button available ### Checklist Check the PR satisfies following conditions. Reviewers should verify this PR satisfies this list as well. - [x] Any text added follows [EUI's writing guidelines](https://elastic.github.io/eui/#/guidelines/writing), uses sentence case text and includes [i18n support](https://github.com/elastic/kibana/blob/main/src/platform/packages/shared/kbn-i18n/README.md) - [x] [Documentation](https://www.elastic.co/guide/en/kibana/master/development-documentation.html) was added for features that require explanation or tutorials - [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 - [x] If a plugin configuration key changed, check if it needs to be allowlisted in the cloud and added to the [docker list](https://github.com/elastic/kibana/blob/main/src/dev/build/tasks/os_packages/docker_generator/resources/base/bin/kibana-docker) - [x] This was checked for breaking HTTP API changes, and any breaking changes have been approved by the breaking-change committee. The `release_note:breaking` label should be applied in these situations. - [x] [Flaky Test Runner](https://ci-stats.kibana.dev/trigger_flaky_test_runner/1) was used on any tests changed - [x] The PR description includes the appropriate Release Notes section, and the correct `release_note:*` label is applied per the [guidelines](https://www.elastic.co/guide/en/kibana/master/contributing.html#kibana-release-notes-process)
## Summary Migrating Session View to Borealis: - adjust button colors to the new color palette after feedback from @codearos - get rid of the use of `euiVars` in favor of color tokens from `euiTheme` - replace custom color `buttonsBackgroundNormalDefaultPrimary` with eui token - get rid of `EuiTextColor` wrapping for Details panel values, after feedback from @codearos , the different color usage there has unclear purpose and doesn't work well with the new theme Follow up after: - elastic#205136 Overall migration guide from EUI: - elastic#199715 Amsterdam vs Borealis comparison screenshots for CSP and Session View: https://www.figma.com/design/XPKYLgZcoI61V3RUfHoHg9/Untitled?node-id=41-42&t=zLvulagbqCiXhrAo-0 ### How to test Upload data ``` node scripts/es_archiver load x-pack/test/functional/es_archives/session_view/process_events --es-url http://elastic:changeme@localhost:9200 --kibana-url http://elastic:changeme@localhost:5601/kbn node scripts/es_archiver load x-pack/test/functional/es_archives/session_view/alerts --es-url http://elastic:changeme@localhost:9200 --kibana-url http://elastic:changeme@localhost:5601/kbn node scripts/es_archiver load x-pack/test/functional/es_archives/session_view/io_events --es-url http://elastic:changeme@localhost:9200 --kibana-url http://elastic:changeme@localhost:5601/kbn ``` navigate to Alerts and choose the last 3 years in the date picker. There should be alerts with the Session View button available ### Checklist Check the PR satisfies following conditions. Reviewers should verify this PR satisfies this list as well. - [x] Any text added follows [EUI's writing guidelines](https://elastic.github.io/eui/#/guidelines/writing), uses sentence case text and includes [i18n support](https://github.com/elastic/kibana/blob/main/src/platform/packages/shared/kbn-i18n/README.md) - [x] [Documentation](https://www.elastic.co/guide/en/kibana/master/development-documentation.html) was added for features that require explanation or tutorials - [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 - [x] If a plugin configuration key changed, check if it needs to be allowlisted in the cloud and added to the [docker list](https://github.com/elastic/kibana/blob/main/src/dev/build/tasks/os_packages/docker_generator/resources/base/bin/kibana-docker) - [x] This was checked for breaking HTTP API changes, and any breaking changes have been approved by the breaking-change committee. The `release_note:breaking` label should be applied in these situations. - [x] [Flaky Test Runner](https://ci-stats.kibana.dev/trigger_flaky_test_runner/1) was used on any tests changed - [x] The PR description includes the appropriate Release Notes section, and the correct `release_note:*` label is applied per the [guidelines](https://www.elastic.co/guide/en/kibana/master/contributing.html#kibana-release-notes-process)
Summary
This PR covers some of the changes required for the new Borealis theme:
The detailed guide of migrating to Borealis can be found in this meta ticket:
As the work is still in progress, here are the details of what is included in this PR:
Amsterdam vs Borealis comparison screenshots for CSP and Session View:
https://www.figma.com/design/XPKYLgZcoI61V3RUfHoHg9/Untitled?node-id=41-42&t=zLvulagbqCiXhrAo-0
Checklist
Check the PR satisfies following conditions.
Reviewers should verify this PR satisfies this list as well.
release_note:breaking
label should be applied in these situations.release_note:*
label is applied per the guidelines