Skip to content
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.

Sign up for GitHub

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

Jump to bottom

[Visualizations] Legends and table cells trigger actions #145708

Closed
semd opened this issue Nov 18, 2022 · 1 comment · Fixed by #146779
Closed

[Visualizations] Legends and table cells trigger actions #145708

semd opened this issue Nov 18, 2022 · 1 comment · Fixed by #146779
Assignees
@semd
Labels
8.7 candidate Feature:Visualizations Generic visualization features (in case no more specific feature label is available) Team:Threat Hunting:Explore Team:Threat Hunting Security Solution Threat Hunting Team

Comments

@semd
Copy link
Contributor

semd commented Nov 18, 2022 •
edited
Loading

Summary

Allow solutions to append custom actions in visualization legends and table cells.

Implementation

Create a new action trigger (CELL_VALUE_TRIGGER) to register the actions that will be appended to the:

  • Charts legends actions
  • Table cells hover actions

The filterFor and filterOut actions are currently hardcoded in the components, they are always displayed, we'll leave these actions as they are, appending the actions registered via DATA_VALUE_TRIGGER right after them, after checking they are compatible.

Use case

Once this feature is available Security Solution will start using it registering the "addToTimeline" action, in order to let users investigate the specific data value in the Security Timeline, using chart legends and table cells actions.

The "addToTimeline" action will only be displayed when visualizations are rendered inside Security, to do so the isCompatible method will check the current application is Security.
@semd semd added Feature:Visualizations Generic visualization features (in case no more specific feature label is available) Team:Threat Hunting Security Solution Threat Hunting Team Team:Threat Hunting:Explore 8.7 candidate labels Nov 18, 2022
@semd semd self-assigned this Nov 18, 2022
@elasticmachine
Copy link
Contributor

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

@semd semd changed the title [Visualizations] Legend and table cells trigger actions [Visualizations] Legends and table cells trigger actions Nov 18, 2022
@semd semd mentioned this issue Dec 1, 2022
Merged
3 tasks
semd added a commit that referenced this issue Dec 16, 2022
@semd @kibanamachine @angorayc
[Security Solution][Lens] New trigger actions for chart legends and t…
d8318ed 
…able cell actions (#146779)

## Summary

Enable XY chart legends and Table cell actions to render dynamically
registered "cell value" actions, scoped for Lens embeddables only.
Security Solution actions were created to be displayed in the Lens
visualizations rendered.

closes #145708

### New Trigger

A new _uiActions_ trigger `CELL_VALUE_TRIGGER` has been created to
register these actions. It is used in both _TableChart_ cell actions and
_XyCharts_ legend actions to create additional action options.

#### Table cell actions

Actions registered and added to the `CELL_VALUE_TRIGGER` will be
appended to the cell actions of the table. The action compatibility is
checked for each column.


![table_cell_actions](https://user-images.githubusercontent.com/17747913/205046554-d4ccf5c5-e49a-44e5-8567-4f39756f3fef.png)


#### Chart legend actions

The same for XyCharts legends. All actions registered and added to the
`CELL_VALUE_TRIGGER` will be appended to the legend actions of the
charts. The action compatibility is checked for each series accessor.


![chart_legend_actions](https://user-images.githubusercontent.com/17747913/205046313-cd50481c-1a06-4bf7-a8fd-b387a98857c1.png)

#### Filter for & Filter out actions:

The XY and Table charts have the "Filter for & Filter out" actions
hardcoded in the components code. They manually check the value is
filterable before showing the actions, but the panel items and cell
actions are added explicitly for them in the components.

This logic has not changed in this PR, the actions added dynamically
using `CELL_VALUE_TRIGGER` are just appended after the "Filter for &
Filter out" options.

However, "Filter for / Filter out" actions could also be integrated into
this pattern, we would only have to register these actions to the
`CELL_VALUE_TRIGGER` with the proper `order` value, and then remove all
hardcoded logic in the components.

### Security Solution actions

The actions that we have registered from Security Solutions ("Add to
timeline" and "Copy to clipboard") will be displayed only when the
embeddable is rendered inside Security Solution, this is ensured via the
`isCompatible` actions method.


![security_actions](https://user-images.githubusercontent.com/17747913/205046643-6ea7e849-b3d6-43f3-91c8-034050375623.png)

### Security Solution Filter In/Out bug

There was a CSS rule present in a global Security Solution context,
affecting all the `EuiDataGrid` cell actions popovers:


https://github.com/elastic/kibana/blob/475e47ed993fba0ecd69caa211150f298e1eefe4/x-pack/plugins/security_solution/public/common/components/page/index.tsx#L124-L130

The goal of this rule was to save some vertical space, by hiding the two
auto-generated Filter In/Out actions (generally the first two cell
actions), so we could show the horizontal Filter In/Out custom buttons
added manually to the popover top header.


![old_filter_in_out](https://user-images.githubusercontent.com/17747913/205293269-aa1e6409-a809-4328-8079-ef1e09c0750d.png)

This CSS rule was causing a bug when rendering Table visualizations
(they use `EuiDataGrid` as well), always hiding the two first cell
actions in the popover.

After discussing this topic with the team, and considering there is an
ongoing task to unify the cell actions experience in Security and
centralize the implementation (see:
#144943), we decided to remove
the problematic CSS rule and the custom horizontal Filter buttons, so
the auto-generated Filter actions are displayed, this way all tables in
Security (alerts, events, and also embedded table charts) will have a
unified and consistent UX.


![new_filter_in_out](https://user-images.githubusercontent.com/17747913/205293120-3bf27a8a-90dd-47dd-a14e-d92570bff84f.png)

If the cell actions popover grows too much in the future we could apply
a "More actions ..." footer option strategy.

## Testing

The new actions will be displayed on any embedded Lens object rendered
inside Security. A good place to test that is Cases, since we can attach
Lens visualizations in the comments. However, Cases explicitly disables
all the trigger actions passing `disableTriggers` to the Lens
Embeddables.


https://github.com/elastic/kibana/blob/b80a23ee125cc4612b99e0b24e6ff2b55ebbdf55/x-pack/plugins/cases/public/components/markdown_editor/plugins/lens/processor.tsx#L52

The easiest way to test different chart types and tables is to
remove/comment the `disableTriggers` prop in the Cases processor
component, and then go to a Case and attach different Lens
visualizations. All actions should appear in the legends and table cell
hover actions.


### Checklist

- [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/packages/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
- [x] Any UI touched in this PR is usable by keyboard only (learn more
about [keyboard accessibility](https://webaim.org/techniques/keyboard/))

Co-authored-by: kibanamachine <42973632+kibanamachine@users.noreply.github.com>
Co-authored-by: Angela Chuang <6295984+angorayc@users.noreply.github.com>
@semd semd mentioned this issue Dec 16, 2022
Closed
9 tasks
@drewdaemon drewdaemon mentioned this issue Oct 24, 2023
Closed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees

@semd semd

Labels
8.7 candidate Feature:Visualizations Generic visualization features (in case no more specific feature label is available) Team:Threat Hunting:Explore Team:Threat Hunting Security Solution Threat Hunting Team
Projects
None yet
Milestone
No milestone
Development

Successfully merging a pull request may close this issue.

[Security Solution][Lens] New trigger actions for chart legends and table cell actions semd/kibana
2 participants
@elasticmachine @semd