[Uptime] Show URL and metrics on sidebar and waterfall item tooltips #99985

justinkambic · 2021-05-12T19:47:38Z

Summary

Resolves #87272.
Depends on #100147.

~~Note to reviewers: do not review until #100147 is merged~~

Adds the URL to the tooltip showing metrics on the waterfall view.

Waterfall Tooltip

Before

After

Light mode

Dark mode

This PR additionally adds the metrics to the tooltip that appears over the sidebar URLs:

Sidebar Tooltip

Before

After

Light mode

Dark mode

Author Checklist

Accessibility has been considered, relevant aria tags and other accessibility features implemented
note: I had put an accessibility label in for the URL, but decided against it since there are no interactive elements in the changes and the text is self-explanatory.
Telemetry has been added where relevant
Docs have been added to this PR covering any new, changed, or removed features
Testing for expected behavior is in place
- Automated tests exist to cover expected and edge case conditions
- User acceptance testing has been carried out to ensure the feature functions as expected within the context of how it will be used
- ~~Any special/edge cases that need to be manually tested must be documented~~
- Ensure the new layout works responsively (including down to small phone widths, where makes sense for the user flow, e.g. the error page when reacting to an alert)

Reviewer Checklist

Accessibility has been considered, relevant aria tags and other accessibility features implemented
Telemetry has been added where relevant
Docs have been added to this PR covering any new, changed, or removed features
Testing for expected behavior is in place
- Automated tests exist to cover expected and edge case conditions
- User acceptance testing has been carried out to ensure the feature functions as expected within the context of how it will be used
- Any special/edge cases that need to be manually tested must be documented
- Ensure the new layout works responsively (including down to small phone widths, where makes sense for the user flow, e.g. the error page when reacting to an alert)

For maintainers

This was checked for breaking API changes and was labeled appropriately

elasticmachine · 2021-05-12T19:47:41Z

Pinging @elastic/uptime (Team:uptime)

dominiqueclarke · 2021-05-13T13:21:45Z

Since this is a feature, I think we should start using our PR checklist.

dominiqueclarke

I believe the original ticket wanted the metrics tooltip (now with the inclusion of the url), to show when hovering over either the url or the chart element.

From the original ticket

This tooltip that shows the metrics and full URL should be shown when hovering over the URL, and/or the graph bar that is representing the metrics.

justinkambic · 2021-05-13T19:10:13Z

I believe the original ticket wanted the metrics tooltip

Yeah sorry about that, I should've marked this as a draft to indicate I planned on revisiting it before review.

paulb-elastic · 2021-05-14T16:55:34Z

@justinkambic I took an early look at this, thanks for adding the metrics to the URL tooltip.

Is the request number (at the beginning of the URL) possible to also be shown with the URL in the right (graph) tooltip, like it is on the left (URL) tooltip?

Also, can the left (URL) tooltip be wider to prevent wrapping, more like the right (graph) tooltip:

justinkambic · 2021-05-14T17:45:10Z

Is the request number (at the beginning of the URL) possible to also be shown with the URL in the right (graph) tooltip, like it is on the left (URL) tooltip?

Yes, this can be done.

Also, can the left (URL) tooltip be wider to prevent wrapping, more like the right (graph) tooltip:

#100147 should fix this already.

justinkambic · 2021-05-14T21:50:14Z

@paulb-elastic @dominiqueclarke you can give this one another look now.

shahzad31 · 2021-05-17T11:16:32Z

i think we should align styling with elastic/charts tooltip styling, the way it displays tooltip title

another thing, i noticed showing color is different in our tooltip, compared with charts tooltip

perhaps we can get rid of our custom tooltip implementation and try to find a way to use elastic chart tooltip? it could be done easily on chart part, but not sure how that will work on side bar url list.

justinkambic · 2021-05-17T20:17:01Z

i think we should align styling with elastic/charts tooltip styling, the way it displays tooltip title

I think we could do this as part of this patch.

another thing, i noticed showing color is different in our tooltip, compared with charts tooltip

The tooltips in the waterfall chart today are uniform in this regard though, no?

perhaps we can get rid of our custom tooltip implementation and try to find a way to use elastic chart tooltip? it could be done easily on chart part, but not sure how that will work on side bar url list.

I'd prefer to use a tooltip that we don't need to maintain as well. Can we do that as a follow-up to this change, rather than creeping the scope further?

shahzad31 · 2021-05-18T12:27:49Z

@justinkambic definitely i am fine with a follow up.

shahzad31

I think it looks great , but i find the experience jarring between viewing chart tooltip and url side bar tooltip.

Delay is too long for sidebar. We should keep it same between chart and sidebar. Either increase both or reduce both.

justinkambic · 2021-06-03T14:34:54Z

Delay is too long for sidebar.

I agree, I noted it in my previous PR that introduced the delay. @formgeist @liciavale can you give this change a look? We'd like to get rid of the delay. I think in a UI such as this users expect that tooltips will appear quickly, esp. if they're just interested in quickly learning the resource name.

shahzad31

I didn't realize delay wasnt introduced in this PR.

happy to resolve that separately

justinkambic · 2021-06-03T15:06:56Z

happy to resolve that separately

@shahzad31 want to make an issue about unifying these two tooltips, or resolving the issue some other way?

justinkambic · 2021-06-03T20:31:31Z

@elasticmachine merge upstream

kibanamachine · 2021-06-03T22:16:55Z

💚 Build Succeeded

Metrics [docs]

Module Count

Fewer modules leads to a faster build time

id	before	after	diff
`uptime`	613	614	+1

Async chunks

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

id	before	after	diff
`uptime`	1.1MB	1.1MB	+2.0KB

History

💚 Build #128690 succeeded 72c9c95
💔 Build #128541 failed 85dc425
💔 Build #128532 failed 9ea10af
💔 Build #128527 failed 5ada88d
💔 Build #128077 failed d90fe06

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

cc @justinkambic

…lastic#99985) * Add URL to metrics tooltip. * Add screenreader label for URL container. * Add metrics to URL sidebar tooltip. * Rename vars. * Delete unnecessary code. * Undo rename. * Extract component to dedicated file, add tests. * Fix error in test. * Add offset index to heading of waterfall chart tooltip. * Format the waterfall tool tip header. * Add horizontal rule and bold text for waterfall tooltip. * Extract inline helper function to module-level for reuse. * Reuse waterfall tooltip style. * Style reusable tooltip content. * Adapt existing chart tooltip to use tooltip content component for better consistency. * Delete test code. * Style EUI tooltip arrow. * Revert whitespace change. * Delete obsolete test. * Implement and use common tooltip heading formatter function. * Add tests for new formatter function. * Fix a typo. * Add a comment explaining a style hack. * Add optional chaining to avoid breaking a test. * Revert previous change, use RTL wrapper, rename describe block. Co-authored-by: Kibana Machine <42973632+kibanamachine@users.noreply.github.com>

kibanamachine · 2021-06-04T12:51:03Z

💚 Backport successful

Status	Branch	Result
✅	7.x

This backport PR will be merged automatically after passing CI.

…99985) (#101383) * Add URL to metrics tooltip. * Add screenreader label for URL container. * Add metrics to URL sidebar tooltip. * Rename vars. * Delete unnecessary code. * Undo rename. * Extract component to dedicated file, add tests. * Fix error in test. * Add offset index to heading of waterfall chart tooltip. * Format the waterfall tool tip header. * Add horizontal rule and bold text for waterfall tooltip. * Extract inline helper function to module-level for reuse. * Reuse waterfall tooltip style. * Style reusable tooltip content. * Adapt existing chart tooltip to use tooltip content component for better consistency. * Delete test code. * Style EUI tooltip arrow. * Revert whitespace change. * Delete obsolete test. * Implement and use common tooltip heading formatter function. * Add tests for new formatter function. * Fix a typo. * Add a comment explaining a style hack. * Add optional chaining to avoid breaking a test. * Revert previous change, use RTL wrapper, rename describe block. Co-authored-by: Kibana Machine <42973632+kibanamachine@users.noreply.github.com> Co-authored-by: Justin Kambic <justin.kambic@elastic.co>

justinkambic added release_note:enhancement v8.0.0 Team:Uptime - DEPRECATED Synthetics & RUM sub-team of Application Observability v7.14.0 auto-backport Deprecated - use backport:version if exact versions are needed labels May 12, 2021

justinkambic self-assigned this May 12, 2021

justinkambic requested a review from a team as a code owner May 12, 2021 19:47

paulb-elastic mentioned this pull request May 13, 2021

[Uptime] Show the URL and metrics in a tooltip from the URL and graph bar in the waterfall chart #87272

Closed

dominiqueclarke reviewed May 13, 2021

View reviewed changes

justinkambic force-pushed the feature/87272-show-url-on-waterfall-tooltip branch from 8ac94a0 to a99a6b4 Compare May 13, 2021 18:44

justinkambic changed the title ~~[Uptime] Add URL to waterfall metrics tooltip~~ [Uptime] Show URL and metrics on sidebar and waterfall item tooltips May 14, 2021

justinkambic force-pushed the feature/87272-show-url-on-waterfall-tooltip branch from d82ac96 to 8068749 Compare May 14, 2021 14:49

justinkambic force-pushed the feature/87272-show-url-on-waterfall-tooltip branch from 23d0282 to 822411c Compare May 14, 2021 21:49

justinkambic added 8 commits May 20, 2021 15:03

Add URL to metrics tooltip.

d5ec9ae

Add screenreader label for URL container.

16fb63a

Add metrics to URL sidebar tooltip.

70fc308

Rename vars.

4f62270

Delete unnecessary code.

dcaf5d3

Undo rename.

a800f48

Extract component to dedicated file, add tests.

b46472d

Fix error in test.

912885f

justinkambic added 2 commits May 25, 2021 15:50

Delete test code.

15907b4

Style EUI tooltip arrow.

efe3d59

justinkambic mentioned this pull request May 28, 2021

[Uptime] New width/delay definition for waterfall sidebar item tooltip #100147

Merged

17 tasks

justinkambic added 8 commits May 28, 2021 17:58

Merge branch 'master' into feature/87272-show-url-on-waterfall-tooltip

47afec8

Revert whitespace change.

d90fe06

Merge branch 'master' into feature/87272-show-url-on-waterfall-tooltip

5ada88d

Delete obsolete test.

9ea10af

Implement and use common tooltip heading formatter function.

0f8846f

Add tests for new formatter function.

3f3c92d

Fix a typo.

552a0d5

Add a comment explaining a style hack.

85dc425

justinkambic removed the WIP Work in progress label Jun 1, 2021

justinkambic requested a review from dominiqueclarke June 1, 2021 22:55

justinkambic added 3 commits June 2, 2021 11:35

Add optional chaining to avoid breaking a test.

63e30d0

Revert previous change, use RTL wrapper, rename describe block.

a142306

Merge branch 'master' into feature/87272-show-url-on-waterfall-tooltip

72c9c95

shahzad31 requested changes Jun 3, 2021

View reviewed changes

shahzad31 approved these changes Jun 3, 2021

View reviewed changes

Merge branch 'master' into feature/87272-show-url-on-waterfall-tooltip

06065fa

justinkambic merged commit 8f83090 into elastic:master Jun 4, 2021

justinkambic deleted the feature/87272-show-url-on-waterfall-tooltip branch June 4, 2021 12:48

kibanamachine mentioned this pull request Jun 4, 2021

[7.x] [Uptime] Show URL and metrics on sidebar and waterfall item tooltips (#99985) #101383

Merged

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[Uptime] Show URL and metrics on sidebar and waterfall item tooltips #99985

[Uptime] Show URL and metrics on sidebar and waterfall item tooltips #99985

justinkambic commented May 12, 2021 •

edited

Loading

elasticmachine commented May 12, 2021

dominiqueclarke commented May 13, 2021

dominiqueclarke left a comment

justinkambic commented May 13, 2021

paulb-elastic commented May 14, 2021

justinkambic commented May 14, 2021

justinkambic commented May 14, 2021 •

edited

Loading

shahzad31 commented May 17, 2021

justinkambic commented May 17, 2021

shahzad31 commented May 18, 2021 •

edited

Loading

shahzad31 left a comment

justinkambic commented Jun 3, 2021

shahzad31 left a comment

justinkambic commented Jun 3, 2021

justinkambic commented Jun 3, 2021

kibanamachine commented Jun 3, 2021

kibanamachine commented Jun 4, 2021

[Uptime] Show URL and metrics on sidebar and waterfall item tooltips #99985

[Uptime] Show URL and metrics on sidebar and waterfall item tooltips #99985

Conversation

justinkambic commented May 12, 2021 • edited Loading

Summary

Waterfall Tooltip

Before

After

Light mode

Dark mode

Sidebar Tooltip

Before

After

Light mode

Dark mode

Author Checklist

Reviewer Checklist

For maintainers

elasticmachine commented May 12, 2021

dominiqueclarke commented May 13, 2021

dominiqueclarke left a comment

Choose a reason for hiding this comment

justinkambic commented May 13, 2021

paulb-elastic commented May 14, 2021

justinkambic commented May 14, 2021

justinkambic commented May 14, 2021 • edited Loading

shahzad31 commented May 17, 2021

justinkambic commented May 17, 2021

shahzad31 commented May 18, 2021 • edited Loading

shahzad31 left a comment

Choose a reason for hiding this comment

justinkambic commented Jun 3, 2021

shahzad31 left a comment

Choose a reason for hiding this comment

justinkambic commented Jun 3, 2021

justinkambic commented Jun 3, 2021

kibanamachine commented Jun 3, 2021

💚 Build Succeeded

Metrics [docs]

Module Count

Async chunks

History

kibanamachine commented Jun 4, 2021

💚 Backport successful

justinkambic commented May 12, 2021 •

edited

Loading

justinkambic commented May 14, 2021 •

edited

Loading

shahzad31 commented May 18, 2021 •

edited

Loading