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

[Infra UI] Add tooltips to Asset Details #164594

Closed
crespocarlos opened this issue Aug 23, 2023 · 5 comments · Fixed by #164858
Closed

[Infra UI] Add tooltips to Asset Details #164594

crespocarlos opened this issue Aug 23, 2023 · 5 comments · Fixed by #164858
Assignees
@jennypavlova
Labels
Feature:Metrics UI Metrics UI feature Feature:ObsHosts Hosts feature within Observability Team:Infra Monitoring UI - DEPRECATED DEPRECATED - Label for the Infra Monitoring UI team. Use Team:obs-ux-infra_services

Comments

@crespocarlos
Copy link
Contributor

crespocarlos commented Aug 23, 2023 •
edited by roshan-elastic
Loading

Summary

We want to add tooltips to the Asset Details to help users understand the Metadata and Processes info.

MVP design

Overview tab > Metadata
Flyout - Full version (overview) (20)
Flyout - Full version (overview) (19)

Metadata tab

Metadata (7)
Metadata (6)

Processes tab

Processes (14)
Processes (13)

Acceptance Criteria

  • Metadata section in the Overview tab has an explanation and tooltip
  • Metadata tab in the Overview tab has an explanation and tooltip
  • Processes tab in the Overview tab has a tooltip

🔗 Tooltip links
@crespocarlos crespocarlos added the Team:Infra Monitoring UI - DEPRECATED DEPRECATED - Label for the Infra Monitoring UI team. Use Team:obs-ux-infra_services label Aug 23, 2023
@elasticmachine
Copy link
Contributor

Pinging @elastic/infra-monitoring-ui (Team:Infra Monitoring UI)

@crespocarlos crespocarlos added Feature:Metrics UI Metrics UI feature Feature:ObsHosts Hosts feature within Observability labels Aug 23, 2023
@crespocarlos crespocarlos mentioned this issue Aug 23, 2023
Closed
@jennypavlova jennypavlova mentioned this issue Aug 24, 2023
Merged
@jennypavlova jennypavlova self-assigned this Aug 24, 2023
@kkurstak
Copy link

@crespocarlos I've updated the designs above, thank you for the heads up!
cc @roshan-elastic

@jennypavlova
Copy link
Member

jennypavlova commented Aug 25, 2023 •
edited
Loading

Thank you @kkurstak!
@roshan-elastic Do you have the tooltip link URL for host.name the other links I see in Figma but I somehow this one I can't open 🤔

Edit: The other 2 links should open in a new tab same as host.name right? Because there we don't have the popout icon.
cc: @kkurstak

@roshan-elastic
Copy link

Hey @jennypavlova,

Just updated the description to confirm the links!

@jennypavlova
Copy link
Member

Thank you @roshan-elastic!

@jennypavlova jennypavlova mentioned this issue Aug 25, 2023
Merged
jennypavlova added a commit that referenced this issue Aug 30, 2023
@jennypavlova @kibanamachine
[Infra UI] Add tooltips to Asset Details (#164858)
a511426 
Closes #164594
## Summary

This PR adds tooltips to explain the time range used to collect process
data and metadata. The tooltips will be shown inside the overview
(metadata summary section) tab, metadata tab, and processes tab (both
flyout and full page views).

## Fixes

I saw that the icons showing different explanation/ docs links inside
the overveiew tab are not consistent ( sometimes we have
`questionInCircle` and sometimes `iInCircles`) - the designs are using
`iInCircles` so I changed it everywhere:
<img width="671" alt="icons"
src="https://github.com/elastic/kibana/assets/14139027/edda271b-5030-4d83-9722-448fbae8cf8b">


## Testing
1. Go to host view and open the flyout for any host. The new explanation
and tooltips should be shown in:
   - Overview tab
   
<img width="938" alt="overview"
src="https://github.com/elastic/kibana/assets/14139027/ac4ae369-d825-4fba-8865-c9410de29c28">

   - Metadata tab
   
<img width="945" alt="metadata"
src="https://github.com/elastic/kibana/assets/14139027/4d174bf3-3411-40a5-a208-eb5df2266c61">

   - Processed tab
   
<img width="937" alt="processes"
src="https://github.com/elastic/kibana/assets/14139027/11d32c66-4a25-4fce-a95e-42698f2e1682">
2. Click Open as page and check the same on the asset details page 


<img width="1653" alt="Screenshot 2023-08-28 at 11 28 47"
src="https://github.com/elastic/kibana/assets/14139027/342d1565-bb51-4961-b8ac-8b8270c851ff">
<img width="1637" alt="Screenshot 2023-08-28 at 11 28 32"
src="https://github.com/elastic/kibana/assets/14139027/63b66a12-d634-4ecc-83de-ad1e1b79334c">
<img width="1649" alt="Screenshot 2023-08-28 at 11 28 16"
src="https://github.com/elastic/kibana/assets/14139027/59720bf3-88ad-44b1-8584-769b38d956ed">

---------

Co-authored-by: Kibana Machine <[email protected]>
eokoneyo pushed a commit to eokoneyo/kibana that referenced this issue Aug 31, 2023
@jennypavlova @kibanamachine @eokoneyo
[Infra UI] Add tooltips to Asset Details (elastic#164858)
01192ce 
Closes elastic#164594
## Summary

This PR adds tooltips to explain the time range used to collect process
data and metadata. The tooltips will be shown inside the overview
(metadata summary section) tab, metadata tab, and processes tab (both
flyout and full page views).

## Fixes

I saw that the icons showing different explanation/ docs links inside
the overveiew tab are not consistent ( sometimes we have
`questionInCircle` and sometimes `iInCircles`) - the designs are using
`iInCircles` so I changed it everywhere:
<img width="671" alt="icons"
src="https://github.com/elastic/kibana/assets/14139027/edda271b-5030-4d83-9722-448fbae8cf8b">


## Testing
1. Go to host view and open the flyout for any host. The new explanation
and tooltips should be shown in:
   - Overview tab
   
<img width="938" alt="overview"
src="https://github.com/elastic/kibana/assets/14139027/ac4ae369-d825-4fba-8865-c9410de29c28">

   - Metadata tab
   
<img width="945" alt="metadata"
src="https://github.com/elastic/kibana/assets/14139027/4d174bf3-3411-40a5-a208-eb5df2266c61">

   - Processed tab
   
<img width="937" alt="processes"
src="https://github.com/elastic/kibana/assets/14139027/11d32c66-4a25-4fce-a95e-42698f2e1682">
2. Click Open as page and check the same on the asset details page 


<img width="1653" alt="Screenshot 2023-08-28 at 11 28 47"
src="https://github.com/elastic/kibana/assets/14139027/342d1565-bb51-4961-b8ac-8b8270c851ff">
<img width="1637" alt="Screenshot 2023-08-28 at 11 28 32"
src="https://github.com/elastic/kibana/assets/14139027/63b66a12-d634-4ecc-83de-ad1e1b79334c">
<img width="1649" alt="Screenshot 2023-08-28 at 11 28 16"
src="https://github.com/elastic/kibana/assets/14139027/59720bf3-88ad-44b1-8584-769b38d956ed">

---------

Co-authored-by: Kibana Machine <[email protected]>
@jennypavlova jennypavlova mentioned this issue Sep 7, 2023
Closed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees

@jennypavlova jennypavlova

Labels
Feature:Metrics UI Metrics UI feature Feature:ObsHosts Hosts feature within Observability Team:Infra Monitoring UI - DEPRECATED DEPRECATED - Label for the Infra Monitoring UI team. Use Team:obs-ux-infra_services
Projects
None yet
Milestone
No milestone
Development

Successfully merging a pull request may close this issue.

[Infra UI] Add tooltips to Asset Details jennypavlova/kibana
5 participants
@crespocarlos @jennypavlova @elasticmachine @roshan-elastic @kkurstak