[Infra UI] Add tooltips to Asset Details

[jennypavlova]

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:

Testing

1. Go to host view and open the flyout for any host. The new explanation and tooltips should be shown in:

   • Overview tab
   
   • Metadata tab
   
   • Processed tab
   

2. Click Open as page and check the same on the asset details page

[apmmachine]

🤖 GitHub comments

Expand to view the GitHub comments

Just comment with:

• /oblt-deploy : Deploy a Kibana instance using the Observability test environments.
• /oblt-deploy-serverless : Deploy a serverless Kibana instance using the Observability test environments.
• run elasticsearch-ci/docs : Re-trigger the docs validation. (use unformatted text in the comment!)

[elasticmachine]

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

[crespocarlos]

Nice 🚀 ! The tooltips are working as expected. Just left one comment concerning the metadata timestamp, but, overall, it looks good.

[crespocarlos]

This is OK (I think), but it's not entirely true. The true timestamp of the latest metadata info, should come from the /api/infra/metadata endpoint.

The query is here, adding TIMESTAMP_FIELD to _source and propagating it in the endpoint response will give the FE the right information.

Both values (metadata API timestamp and date picker timestamp) will be pretty close if the period in metricbeat is set to 10s, but I suspect that they might diverge if the period in metricbeat is set to 1m.

Might be worth testing it.

[jennypavlova]

I am not sure if I understand this issue: I checked the request and the date/time shown in there and we have the to matching with the date shown:

In my metricbeat config I have:

  - module: system
    metricsets:
        ............
    period: 1m
    processes: [".*"]

So I saw that we pass that time range when we do the request to get the metadata as this is the to date should we have "before" {date/time} not "on" {date/time} in the text to be clear as it's at the end of the range 🤔

[crespocarlos]

What you're seeing in your screenshot is the request payload? We pass that to the API, which runs a query using that range and returns that top 1 desc document.

This top 1 desc doc timestamp could be the same or pretty close to to. But if the last document ingested was 30 seconds before to, then there should be a small difference between that and to.

Not sure if it's clear. Happy to discuss over slack.

[crespocarlos]

One thing I just realized:

Date formats can vary, I wonder if we should print it as DD-Mon-YYYY ex 07 Jul, 2023 , to avoid confusion

[jennypavlova]

One thing I just realized:

Date formats can vary, I wonder if we should print it as `DD-Mon-YYYY` ex `07 Jul, 2023` , to avoid confusion

I followed the design on that - I used toLocaleDateString to make sure that the local format would be displayed. Maybe if we change the format we should also change the text to for example 07 Jul, 2023 @ 11:11 the time should be also set based on the locale time like it is now ( showing 15 or 3 pm for example) 🤔 Maybe it's a design/UX question how it will be easier for the user but I saw in other places (Discover) we have that format (07 Jul, 2023 @ 11:11) so I will change that to be consistent.

[jennypavlova]

@crespocarlos So I updated the date format and added the missing seconds to the time value and now it should match the datapicker and also should be localized as I used the i18n formatter. Wdyt?

[crespocarlos]

Q: would it be better if the API returned timestamp without the @?

[jennypavlova]

What is the difference there - Is it because of the usage of metadata?.info?.['@timestamp']? Where do we want to rename it - if I change the type the response should also change the _source and there I should use the @timestamp. So after changing this type, I need to have a different type here in the response and then map the response to the timestamp key using the @timestamp value from the response. I don't see how changing this type will fix all that, it looks more confusing to use the timestamp mapped to the @timestamp and have 2 types for the response 🤔

[jennypavlova]

A new type was added as discussed (commit)

[crespocarlos]

Thanks for making the changes @jennypavlova.

I've noticed a couple of things. On the metadata, while the page waits for the endpoint to respond, the date/and time shows the value from the date picker.

metadata_loading.mov

Also on the processes tab, when looking at a date range where there is no data, we are showing the message. I now I'm starting to think that it's confusing. We might want to double check that with @roshan-elastic and @kkurstak

It seems like we shouldn't show the message + tooltip when there is data to be in those tabs. Wdyt?

[jennypavlova]

@crespocarlos Thanks for checking that!
For the metadata loading case, we can solve that with a spinner while loading like the summary values, for example, wdyt?
Yes for the processes no data case, this message looks strange but the tooltip information can be still useful to the user as it includes documentation links:

So I am not sure if hiding it should be the solution for this 🤔

[roshan-elastic]

Also on the processes tab, when looking at a date range where there is no data, we are showing the message. I now I'm starting to think that it's confusing. We might want to double check that with @roshan-elastic and @kkurstak

@crespocarlos @kkurstak - Maybe we should just remove the 'Showing process data...' message completely if no processes are found? Maybe it's helpful to show it though?

@kkurstak - what's your initial reaction?

[jennypavlova]

So regarding the metadata loading, I added a spinner, it will look like this:

metadata_loading_spinner.mov

[jennypavlova]

The processes message is now displayed only if we have data and no error:

Regarding the metadata integration test that is currently failing - I am getting different dates locally and in the ci ( It should be the same data I think but I got some failed tests because of that here.
What I did there is check if the timestamps are inside the range and separately check the host, agent, and cloud properties so that way the timestamp won't affect the results and make it easy to fail in this commit
cc: @crespocarlos

[crespocarlos]

hey @jennypavlova , there are a couple of things I'd like to get your opinion on:

1. When looking at a future date, the metadata tooltip is shown with the date picker's end date. Should we hide when there is no data too?

2. Should there be a loading indicator for the Processes tab's tooltip?

processes_loading_indicator.mov

[roshan-elastic]

The processes message is now displayed only if we have data and no error:

Regarding the metadata integration test that is currently failing - I am getting different dates locally and in the ci ( It should be the same data I think but I got some failed tests because of that [here](https://buildkite.com/elastic/kibana-pull-request/builds/154581#018a41f3-f773-4074-837a-58ccd2d63b68). What I did there is check if the timestamps are inside the range and separately check the `host`, `agent`, and `cloud` properties so that way the timestamp won't affect the results and make it easy to fail in this [commit](https://github.com//pull/164858/commits/711c5b1f34cf10aa6795b3d8dbd2bd955dead053) cc: @crespocarlos

This is great @jennypavlova - I like your initiative and thinking here. Why do we need me? 🤣

[jennypavlova]

Hey @crespocarlos, I mentioned you there to help with the code review in case you are wondering what the issue was and why I am changing it and to hear what you think about it :)

[jennypavlova]

@crespocarlos Thank you for the review!

1. When looking at a future date, the metadata tooltip is shown with the date picker's end date. Should we hide when there is no data too?

It makes sense to check the metadata before showing the tooltip - In this case now that we have timestamp there we can check directly the property - it won't be there when the metadata.info is empty :)

2. Should there be a loading indicator for the Processes tab's tooltip?

Added, thank you for finding that!

Maybe we should just remove the 'Showing process data...' message completely if no processes are found?

@roshan-elastic Thanks for the input! We did that and added similar logic for the metadata 🙂

[crespocarlos]

LGTM 🚀 !! Thanks for all the improvements.

[kibana-ci]

💛 Build succeeded, but was flaky

• Buildkite Build
• Commit: 344745c

Failed CI Steps

• FTR Configs #63

Test Failures

• [job] [logs] FTR Configs #63 / Alerting aggregate "after each" hook for "should aggregate alert status totals"

Metrics [docs]

Module Count

Fewer modules leads to a faster build time

id	before	after	diff
infra	1428	1430	+2

Async chunks

Total size of all lazy-loaded chunks that will be downloaded as the user navigates the app

id	before	after	diff
infra	2.0MB	2.0MB	+5.1KB

History

• 💔 Build #154936 failed 8071bce
• 💔 Build #154913 failed 9e50cc2
• 💚 Build #154649 succeeded 68f1585
• 💔 Build #154581 failed 1eede83
• 💔 Build #154519 failed 29c77fd
• 💔 Build #154475 failed 3f6285d

To update your PR or re-run it, just comment with:
@elasticmachine merge upstream

cc @jennypavlova