[Security Solution] Standardize actions in Alerts KPI visualizations #206340

christineweng · 2025-01-10T19:46:02Z

Background

The initial intent of the PR was to address customer feedback regarding hover actions in the kpi charts. Because the hover actions wrap around the label, some users find the trigger sensitive, especially when screen resolution is high and the text labels are small.

Upon exploring options and reviewing with UIUX team, it was decided that we should follow the take action format in Lens charts (inline actions inline, vertical 3 dots icon, and black color), to ensure that we have a standard experience in charts.

Before

Non-Lens charts: overview charts, treemap

Popover actions upon hover
Popover content is blue (default color)

Lens charts: Trend graph, Count table

Actions are inline, with the vertical 3 dots icon
Icon and menu item are in black color

After

All the non-Lens charts have inline actions in black

Changes to `CellActions` package

This PR focuses on making the inline option flexible, by taking additional styling options in metadata

extraActionsIconType: 'boxesVertical',
extraActionsColor: 'text',

The styling does not impact hover options

Checklist

Unit or functional tests were updated or added to match the most common scenarios
The PR description includes the appropriate Release Notes section, and the correct release_note:* label is applied per the guidelines

elasticmachine · 2025-01-10T19:46:05Z

Pinging @elastic/security-threat-hunting (Team:Threat Hunting)

elasticmachine · 2025-01-10T19:46:05Z

Pinging @elastic/security-threat-hunting-investigations (Team:Threat Hunting:Investigations)

PhilippeOberti · 2025-01-13T23:09:07Z

@christineweng I see how this can be an improvement, but I also find that on wide screens it is kind of annoying. As you can see in the video below, when you mouse over the title, you then have to move your mouse quite a bit to get to the actions, which makes it super easy to actually go to the next line by mistake... I feel like this change could actually negatively impact users...?

this branch

Screen.Recording.2025-01-13.at.5.01.07.PM.mov

main branch

Screen.Recording.2025-01-13.at.5.06.41.PM.mov

Maybe we should bring this up to UIUX and ask for feedback?

christineweng · 2025-01-13T23:42:40Z

@christineweng I see how this can be an improvement, but I also find that on wide screens it is kind of annoying. As you can see in the video below, when you mouse over the title, you then have to move your mouse quite a bit to get to the actions, which makes it super easy to actually go to the next line by mistake... I feel like this change could actually negatively impact users...?

Yep, let's bring this up on the Thursday design sync

semd · 2025-02-04T10:45:21Z

...security/plugins/security_solution/public/common/components/charts/draggable_legend_item.tsx

+            <SecurityCellActions
+              mode={CellActionsMode.INLINE}
+              visibleCellActions={0}
+              triggerId={SecurityCellActionsTrigger.DEFAULT}
+              data={{ field, value }}
+              sourcererScopeId={sourcererScopeId}
+              metadata={{
+                scopeId,
+                extraActionsIconType: 'boxesVertical',
+                extraActionsColor: 'text',
+              }}
+              disabledActionTypes={[SecurityCellActionType.SHOW_TOP_N]}
+            />


I am not sure these new extraActionsIconType and extraActionsColor should be passed within the metadata object. They are component properties that customize the presentation, rather than a kind of "data".

Have you considered adding them as regular (optional) props?

Thanks @semd! I started with them as props but noticed quite a bit of prop drilling to get to the actual extra action components. Hence taking advantage of the metadata and context to make it look cleaner. I thought the metadata was meant to be a 'catch all' usage, but good to know!

Anyways, I've updated them as props in this commit, let me know what you think.

Yes @christineweng , metadata is used to pass extra information about the cell, the metadata is accessible from the actions execution, so it's an easy way to change the behaviour of the actions.
This property allows the cell actions to be more flexible and simplifies the implementation for corner cases. But it also has its downsides, it's typed loosely and lacks proper memoization, so we should not overuse it.
For properties that are not "extra data" used inside action execution, like these presentational props, it's better to create separate props.

Thanks for applying the change 💯

semd

LGTM!

PhilippeOberti

I like this new option much better! Nice job @christineweng, desk tested and code LGTM!

## Summary This is a part 2 following #206340 to standardize actions in the alerts kpi visualizations. This PR updates the following copies: - Changed `Filter In` to `Filter for`: to stay consistent with Lens and Discover <img width="1070" alt="image" src="https://github.com/user-attachments/assets/3341279f-7e8f-4470-9476-86809840ff55" /> - Updated letter cases by following copy guidelines - `Filter Out` -> `Filter out` - `Copy to Clipboard` -> `Copy to clipboard` - `Investigate in timeline` -> `Investigate in Timeline` - `Add to timeline` -> `Add to Timeline` ### 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] [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 - [ ] 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) - [ ] 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. - [ ] [Flaky Test Runner](https://ci-stats.kibana.dev/trigger_flaky_test_runner/1) was used on any tests changed - [ ] 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 is a part 2 following elastic#206340 to standardize actions in the alerts kpi visualizations. This PR updates the following copies: - Changed `Filter In` to `Filter for`: to stay consistent with Lens and Discover <img width="1070" alt="image" src="https://github.com/user-attachments/assets/3341279f-7e8f-4470-9476-86809840ff55" /> - Updated letter cases by following copy guidelines - `Filter Out` -> `Filter out` - `Copy to Clipboard` -> `Copy to clipboard` - `Investigate in timeline` -> `Investigate in Timeline` - `Add to timeline` -> `Add to Timeline` ### 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] [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 - [ ] 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) - [ ] 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. - [ ] [Flaky Test Runner](https://ci-stats.kibana.dev/trigger_flaky_test_runner/1) was used on any tests changed - [ ] 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) (cherry picked from commit d2c5132)

kibanamachine · 2025-02-11T00:30:41Z

Starting backport for target branches: 8.x

https://github.com/elastic/kibana/actions/runs/13253287269

elasticmachine · 2025-02-11T00:31:39Z

💚 Build Succeeded

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
`cloudSecurityPosture`	537.5KB	537.4KB	-36.0B
`discover`	846.7KB	846.7KB	-35.0B
`enterpriseSearch`	1.5MB	1.5MB	-35.0B
`securitySolution`	21.4MB	21.4MB	+6.5KB
`slo`	877.6KB	877.6KB	-36.0B
total			+6.4KB

Page load bundle

Size of the bundles that are downloaded on every page load. Target size is below 100kb

id	before	after	diff
`esqlDataGrid`	9.4KB	9.4KB	-35.0B

History

💔 Build #274420 failed 2b532ef
💔 Build #274372 failed b116ff9
💔 Build #274174 failed 3d8ee06
💛 Build #274135 was flaky d38de09
💚 Build #273303 succeeded 78a47c0

cc @christineweng

kibanamachine · 2025-02-11T00:36:01Z

💔 All backports failed

Status	Branch	Result
❌	8.x	Backport failed because of merge conflicts

Manual backport

To create the backport manually run:

node scripts/backport --pr 206340

Questions ?

Please refer to the Backport tool documentation

…lastic#206340) ### Background The initial intent of the PR was to address customer feedback regarding hover actions in the kpi charts. Because the hover actions wrap around the label, some users find the trigger sensitive, especially when screen resolution is high and the text labels are small. Upon exploring options and reviewing with UIUX team, it was decided that we should follow the take action format in Lens charts (inline actions inline, vertical 3 dots icon, and black color), to ensure that we have a standard experience in charts. ### Before ### **Non-Lens charts: overview charts, treemap** - Popover actions upon hover - Popover content is blue (default color) ![image](https://github.com/user-attachments/assets/20091b16-4408-4f55-ace8-95cbac25ff2e) ![image](https://github.com/user-attachments/assets/06b97ad8-fe41-4508-95ff-cc0ee5a73338) **Lens charts: Trend graph, Count table** - Actions are inline, with the vertical 3 dots icon - Icon and menu item are in black color ![image](https://github.com/user-attachments/assets/df0dd709-ec02-4549-bf35-60ca5fe57179) ### After All the non-Lens charts have inline actions in black ![image](https://github.com/user-attachments/assets/29c4e9e9-f458-4520-b90f-e4b16a5e1318) ![image](https://github.com/user-attachments/assets/ba904202-338c-4154-b645-128729010d1d) ### Changes to `CellActions` package This PR focuses on making the inline option flexible, by taking additional styling options in metadata ``` metadata={{ extraActionsIconType: 'boxesVertical', extraActionsColor: 'text', }} ``` The styling does not impact hover options ![image](https://github.com/user-attachments/assets/07e59cd1-0d0b-472f-9ef1-a8a185d8dd3c) ### 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 - [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) (cherry picked from commit fc6e1d6) # Conflicts: # x-pack/solutions/security/plugins/security_solution/public/detections/components/alerts_kpis/alerts_progress_bar_panel/alerts_progress_bar.tsx # x-pack/solutions/security/plugins/security_solution/public/detections/components/alerts_kpis/severity_level_panel/columns.tsx

…ions … (#210486) # Backport This will backport the following commits from `main` to `8.x`: - [[Security Solution] Standardize actions in Alerts KPI visualizations (#206340)](#206340) …(#206340) ### Background The initial intent of the PR was to address customer feedback regarding hover actions in the kpi charts. Because the hover actions wrap around the label, some users find the trigger sensitive, especially when screen resolution is high and the text labels are small. Upon exploring options and reviewing with UIUX team, it was decided that we should follow the take action format in Lens charts (inline actions inline, vertical 3 dots icon, and black color), to ensure that we have a standard experience in charts. ### Before ### **Non-Lens charts: overview charts, treemap** - Popover actions upon hover - Popover content is blue (default color) ![image](https://github.com/user-attachments/assets/20091b16-4408-4f55-ace8-95cbac25ff2e) ![image](https://github.com/user-attachments/assets/06b97ad8-fe41-4508-95ff-cc0ee5a73338) **Lens charts: Trend graph, Count table** - Actions are inline, with the vertical 3 dots icon - Icon and menu item are in black color ![image](https://github.com/user-attachments/assets/df0dd709-ec02-4549-bf35-60ca5fe57179) ### After All the non-Lens charts have inline actions in black ![image](https://github.com/user-attachments/assets/29c4e9e9-f458-4520-b90f-e4b16a5e1318) ![image](https://github.com/user-attachments/assets/ba904202-338c-4154-b645-128729010d1d) ### Changes to `CellActions` package This PR focuses on making the inline option flexible, by taking additional styling options in metadata ``` extraActionsIconType: 'boxesVertical', extraActionsColor: 'text', ``` The styling does not impact hover options ![image](https://github.com/user-attachments/assets/07e59cd1-0d0b-472f-9ef1-a8a185d8dd3c) ### 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 - [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) (cherry picked from commit fc6e1d6) --------- Co-authored-by: kibanamachine <42973632+kibanamachine@users.noreply.github.com>

christineweng added release_note:enhancement backport v9.0.0 Team:Threat Hunting Security Solution Threat Hunting Team Team:Threat Hunting:Investigations Security Solution Investigations Team v8.18.0 labels Jan 10, 2025

christineweng self-assigned this Jan 10, 2025

christineweng requested review from a team as code owners January 10, 2025 19:46

christineweng requested a review from semd January 13, 2025 22:45

christineweng marked this pull request as draft January 16, 2025 16:13

christineweng force-pushed the kpi-progress-bar-hover-actions branch from 748f42b to 36f1938 Compare January 24, 2025 17:27

christineweng removed request for a team and semd January 24, 2025 17:27

christineweng marked this pull request as ready for review January 24, 2025 17:30

christineweng marked this pull request as draft January 27, 2025 15:32

christineweng force-pushed the kpi-progress-bar-hover-actions branch from 0c4f377 to ecac130 Compare February 3, 2025 22:23

christineweng changed the title ~~[Security Solution] Alert KPIs - improve progress bar chart hover action experience~~ [Security Solution] Standardize actions in Alerts KPI visualizations Feb 4, 2025

christineweng removed backport v8.18.0 labels Feb 4, 2025

christineweng marked this pull request as ready for review February 4, 2025 01:57

christineweng requested a review from a team as a code owner February 4, 2025 01:57

christineweng added the backport label Feb 4, 2025

christineweng requested a review from a team February 4, 2025 01:58

christineweng mentioned this pull request Feb 4, 2025

[Security Solutions] Update cell actions copy #209436

Merged

6 tasks

semd reviewed Feb 4, 2025

View reviewed changes

semd approved these changes Feb 5, 2025

View reviewed changes

christineweng added v9.1.0 v8.19.0 and removed v9.0.0 labels Feb 5, 2025

PhilippeOberti approved these changes Feb 6, 2025

View reviewed changes

christineweng force-pushed the kpi-progress-bar-hover-actions branch from d38de09 to 3d8ee06 Compare February 6, 2025 23:56

christineweng added backport:version Backport to applied version labels and removed backport labels Feb 10, 2025

christineweng added 3 commits February 10, 2025 16:54

update actions in kpi charts

dde3a8d

PR comment: metadata to props

cc1609e

fix cypress

d57124f

christineweng force-pushed the kpi-progress-bar-hover-actions branch from 2b532ef to d57124f Compare February 10, 2025 22:54

christineweng enabled auto-merge (squash) February 10, 2025 22:55

christineweng merged commit fc6e1d6 into elastic:main Feb 11, 2025
10 checks passed

christineweng mentioned this pull request Feb 11, 2025

[8.x][Security Solution] Standardize actions in Alerts KPI visualizations … #210486

Merged

2 tasks

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[Security Solution] Standardize actions in Alerts KPI visualizations #206340

[Security Solution] Standardize actions in Alerts KPI visualizations #206340

christineweng commented Jan 10, 2025 •

edited

Loading

elasticmachine commented Jan 10, 2025

elasticmachine commented Jan 10, 2025

PhilippeOberti commented Jan 13, 2025

christineweng commented Jan 13, 2025

semd Feb 4, 2025 •

edited

Loading

christineweng Feb 4, 2025 •

edited

Loading

semd Feb 5, 2025 •

edited

Loading

semd left a comment

PhilippeOberti left a comment

kibanamachine commented Feb 11, 2025

elasticmachine commented Feb 11, 2025

kibanamachine commented Feb 11, 2025

[Security Solution] Standardize actions in Alerts KPI visualizations #206340

[Security Solution] Standardize actions in Alerts KPI visualizations #206340

Conversation

christineweng commented Jan 10, 2025 • edited Loading

Background

Before

After

Changes to CellActions package

Checklist

elasticmachine commented Jan 10, 2025

elasticmachine commented Jan 10, 2025

PhilippeOberti commented Jan 13, 2025

this branch

main branch

christineweng commented Jan 13, 2025

semd Feb 4, 2025 • edited Loading

Choose a reason for hiding this comment

christineweng Feb 4, 2025 • edited Loading

Choose a reason for hiding this comment

semd Feb 5, 2025 • edited Loading

Choose a reason for hiding this comment

semd left a comment

Choose a reason for hiding this comment

PhilippeOberti left a comment

Choose a reason for hiding this comment

kibanamachine commented Feb 11, 2025

elasticmachine commented Feb 11, 2025

💚 Build Succeeded

Metrics [docs]

Async chunks

Page load bundle

History

kibanamachine commented Feb 11, 2025

💔 All backports failed

Manual backport

Questions ?

christineweng commented Jan 10, 2025 •

edited

Loading

Changes to `CellActions` package

semd Feb 4, 2025 •

edited

Loading

christineweng Feb 4, 2025 •

edited

Loading

semd Feb 5, 2025 •

edited

Loading