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

[Logs Explorer] Add support for injecting custom cell actions in Virtual Columns #173825

Closed
achyutjhunjhunwala opened this issue Dec 21, 2023 · 1 comment · Fixed by #173732
Closed

[Logs Explorer] Add support for injecting custom cell actions in Virtual Columns #173825

achyutjhunjhunwala opened this issue Dec 21, 2023 · 1 comment · Fixed by #173732
Assignees
@achyutjhunjhunwala
Labels
Feature:LogsExplorer Logs Explorer feature Team:obs-ux-logs Observability Logs User Experience Team

Comments

@achyutjhunjhunwala
Copy link
Contributor

achyutjhunjhunwala commented Dec 21, 2023 •
edited
Loading

📓 Summary

Custom Cell Actions needs to be registered for the newly added Virtual Columns

As part of this work, a new Customisation point will be introduced in Discover to support this in virtual columns in the data table.

Related to #169874.

✔️ Acceptance criteria

  • Each item in virtual column except the whole JSON field for message should be clickable to open a popover with custom actions.
  • Common Filters available would be Filter in, Filter out and Copy Value
  • Looks and feel should match how it is currently in Discover.

💡 Implementation hints

  1. Look and Feel - Since the whole cell is generated using custom rendering, the chips can be wrapped with EuiPopover and classes from DataTabe can be copied to generate the popover
  2. Actions - The low level Filtermanager service from the Data Plugin can be used trigger actions. Its already part of CoreStart plugin
@achyutjhunjhunwala achyutjhunjhunwala added Team:obs-ux-logs Observability Logs User Experience Team Feature:LogsExplorer Logs Explorer feature labels Dec 21, 2023
@elasticmachine
Copy link
Contributor

Pinging @elastic/obs-ux-logs-team (Team:obs-ux-logs)

@achyutjhunjhunwala achyutjhunjhunwala self-assigned this Dec 29, 2023
@achyutjhunjhunwala achyutjhunjhunwala mentioned this issue Jan 2, 2024
Merged
4 tasks
delanni pushed a commit to delanni/kibana that referenced this issue Jan 11, 2024
@achyutjhunjhunwala @kibanamachine @delanni
[Logs Explorer] Add customisation for virtual columns and add the 1st…
40e6a3d 
… virtual column (elastic#173732)

## Summary

- Closes elastic#171844
- Closes elastic#171726
- Closes  elastic#173825

This PR does 4 things

- Customisation point to inject customCellRenderers in the Data Table.
- Adding the 1st virtual column - Content and removal of Message column
- Add cell actions for virtual columns so that the custom fields can be
filtered for
- Renders similar content on the Flyout instead of Message

### To make this PR easy to review

#### Why Kibana Operations

- This PR initially increased the bundle size causing the values to go
beyond the boundaries set in `limits.yml`. This has been fixed now after
suggestion from Kibana Ops team

#### For Kibana Data Discovery Team - Changes done on Unified Data Table

- Moving around types to make them more generic and reusable
- Split the 2 components SourceDocument and SourceDocumentPopover out of
the 1 single large file `ger_render_cell_value.tsx` they were in. This
allows me to export them and lazy load the components in my plugin.
- Passed additional parameters to `externalCustomRenderers` function

#### For Kibana Data Discovery Team - Changes done on Discover Plugin

- Currently the discover plugin was not passing the registered
customisation for `externalCustomRenderers`. Simply added the hook to
retrieve the registered customisation and pass it as props.
- Added new customisation type for `CellRendererCustomisation`

#### For Logs UX Team - Changes done on Log Explorer

- Registered a new customisation for custom Virtual columns.
- Rendering logic for Log Level and Message with fallbacks
- When Message and its fallbacks are not present, we must render the
whole document. Used extracted logic to display complete document as it
appears in current Discover.
- When a JSON column is expanded (expandCellAction), it should render a
JSON viewer as it currently does in Discover
- Items like Log Level which are rendered inside a Chip should allow
contextual actions like Filter In, Filter Out and Copy

## Want to run this PR locally

```
// Checkout this PR
gh pr checkout 173732

// Start Kibana locally
yarn start 

// Start ES locally
yarn es snapshot

// Generate dummy data
node scripts/synthtrace simple_logs.ts --clean

```

## Live Demo can be seen
[here](https://achyutjhunjhunwala-d-pr173732.kb.us-west2.gcp.elastic-cloud.com/app/observability-log-explorer/?pageState=(breakdownField:log.level,columns:!((field:service.name,width:240),(field:host.name,width:320),(field:content)),controls:(data_stream.namespace:(mode:include,selection:(selectedOptions:!(),type:options))),datasetSelection:(selectionType:all),filters:!(),query:(language:kuery,query:%27%27),refreshInterval:(pause:!t,value:5000),rowHeight:0,rowsPerPage:100,time:(from:%272024-01-05T14:39:41.024Z%27,to:%272024-01-05T14:54:43.378Z%27),v:1))

## Demo

![Virtual Column -
Content](https://github.com/elastic/kibana/assets/7416358/db5977cd-1342-4dce-bfe9-bad3ee42487b)

## What's pending - Basically why is the PR still in Draft Stage

- [x] Fix colors for logs levels after confirmation from Isa and hide
level when not present
- [x] Fix JSON rendering on the content cell when message field is not
present so that it looks like exactly how it looks in Discover
- [x] Add E2E tests
- [x] Update DEMO with a gif rather than a screenshot

---------

Co-authored-by: kibanamachine <[email protected]>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees

@achyutjhunjhunwala achyutjhunjhunwala

Labels
Feature:LogsExplorer Logs Explorer feature Team:obs-ux-logs Observability Logs User Experience Team
Projects
None yet
Milestone
No milestone
2 participants
@achyutjhunjhunwala @elasticmachine