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 column tooltips #173615

Closed
achyutjhunjhunwala opened this issue Dec 19, 2023 · 2 comments
Closed

[Logs Explorer] Add column tooltips #173615

achyutjhunjhunwala opened this issue Dec 19, 2023 · 2 comments
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 19, 2023 •
edited
Loading

📓 Summary

🛑 blocked by: #171844

The virtual columns must display a tooltip specifying the message around what they represent

Figma design

image

✔️ Acceptance criteria

  • The column header should have an icon with a tooltip about the field
    • Content
    • Resources
    • Actions

Links
@achyutjhunjhunwala achyutjhunjhunwala added blocked Team:obs-ux-logs Observability Logs User Experience Team Feature:LogsExplorer Logs Explorer feature labels Dec 19, 2023
@elasticmachine
Copy link
Contributor

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

@gbamparop gbamparop removed the blocked label Dec 28, 2023
@achyutjhunjhunwala achyutjhunjhunwala self-assigned this Jan 11, 2024
@achyutjhunjhunwala achyutjhunjhunwala mentioned this issue Jan 16, 2024
Merged
achyutjhunjhunwala added a commit that referenced this issue Jan 22, 2024
@achyutjhunjhunwala @kibanamachine
[Logs Explorer] Add customisation point and 1st column tooltip for co…
86a762b 
…ntent virtual co… (#174924)

## Summary

Closes - #173615

This PR adds a customisation point where it exposes the whole column
which is of type `EuiDataGridColumn` to be customised.
As of the current scope we only intend to customise the `display`
property for the column which is responsible for rendering the column
header.

Idea is to add custom tooltips for Virtual Columns

## Demo

![Content
Tooltip](https://github.com/elastic/kibana/assets/7416358/59d6f1f2-68fc-4f31-82cd-b8525071706e)


## Why is this change being done

Please refer to the
[Figma](https://www.figma.com/file/g2uboVjdzylHDyrIUrI4cU/Virtual-columns?type=design&node-id=3277-320484&mode=design&t=t15IO9jmfitMSHuH-0)
file for details.

<img width="1031" alt="image"
src="https://github.com/elastic/kibana/assets/7416358/d1fa4a04-3a56-443f-9798-1062133d6887">


## Want to run this PR locally

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

// Start Kibana locally
yarn start 

// Start ES locally
yarn es snapshot

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

```

---------

Co-authored-by: kibanamachine <[email protected]>
@achyutjhunjhunwala
Copy link
Contributor Author

Closing this ticket as ColumnTooltips Customisation point has been added and Content and Resource Columns now have tooltips. Other Virtual columns will have tooltips implemented as part of their own scope

CoenWarmer pushed a commit to CoenWarmer/kibana that referenced this issue Feb 15, 2024
@achyutjhunjhunwala @kibanamachine @CoenWarmer
[Logs Explorer] Add customisation point and 1st column tooltip for co…
63742fc 
…ntent virtual co… (elastic#174924)

## Summary

Closes - elastic#173615

This PR adds a customisation point where it exposes the whole column
which is of type `EuiDataGridColumn` to be customised.
As of the current scope we only intend to customise the `display`
property for the column which is responsible for rendering the column
header.

Idea is to add custom tooltips for Virtual Columns

## Demo

![Content
Tooltip](https://github.com/elastic/kibana/assets/7416358/59d6f1f2-68fc-4f31-82cd-b8525071706e)


## Why is this change being done

Please refer to the
[Figma](https://www.figma.com/file/g2uboVjdzylHDyrIUrI4cU/Virtual-columns?type=design&node-id=3277-320484&mode=design&t=t15IO9jmfitMSHuH-0)
file for details.

<img width="1031" alt="image"
src="https://github.com/elastic/kibana/assets/7416358/d1fa4a04-3a56-443f-9798-1062133d6887">


## Want to run this PR locally

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

// Start Kibana locally
yarn start 

// Start ES locally
yarn es snapshot

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

```

---------

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
Development

No branches or pull requests
3 participants
@gbamparop @achyutjhunjhunwala @elasticmachine