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

justinkambic · 2021-05-14T17:36:11Z

Summary

Resolves #90909.

Adds a delay of long to the waterfall sidebar tooltip, and specifies as max-width of slightly less than the EUI Breakpoints.

The max-width style is applied to both the EuiToolTip used for the waterfall's sidebar, as well as the custom tooltip passed to EUI Charts for the waterfall chart.

Before

After

Author 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)

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-14T17:36:13Z

Pinging @elastic/uptime (Team:uptime)

justinkambic · 2021-05-20T20:37:42Z

My personal opinion is the delay="long" is too long of a wait for the tooltip to appear.

I keep hovering and expecting it to happen much sooner. Perhaps we could add a medium option to the EUI component?

justinkambic · 2021-05-25T20:03:02Z

@elasticmachine merge upstream

…ltip.

…tip types.

dominiqueclarke

The tooltip position seems to be a bit off. The carrot doesn't seem to land on the proper item.

dominiqueclarke · 2021-05-26T16:14:36Z

x-pack/plugins/uptime/public/components/monitor/synthetics/waterfall/components/styles.ts

@@ -143,7 +143,11 @@ export const WaterfallChartLegendContainer = euiStyled.div`
  box-shadow: 0px -1px 4px 0px ${(props) => props.theme.eui.euiColorLightShade};
 `; // NOTE: EuiShadowColor is a little too dark to work with the background-color

-export const WaterfallChartTooltip = euiStyled.div`
+export const WaterfallResponsiveMaxWidth = euiStyled.div`


I feel like this name is a little bit generic. Feels like it may be intended to use in multiple places when this is really just meant to be used for the tooltip. I suppose it could be reused, but I'm not sure as of yet what we're reuse it for.

Yeah I was unsure what to name it, can revise to WaterfallTooltipResponsiveMaxWidth.

I changed this name to be tooltip-specific c513c65.

Any better suggestions are welcome 🙂

…style.

justinkambic · 2021-05-26T17:52:32Z

The tooltip position seems to be a bit off. The carrot doesn't seem to land on the proper item.

@dominiqueclarke thanks for catching that. I've added a custom margin-top to the tooltip style, and it seems to have improved the layout situation.

LMK if you have any thoughts on a better way.

dominiqueclarke

LGTM

dominiqueclarke · 2021-05-26T19:42:36Z

...s/uptime/public/components/monitor/synthetics/waterfall/components/middle_truncated_text.tsx

@@ -80,7 +81,13 @@ export const MiddleTruncatedText = ({ ariaLabel, text, onClick, setButtonRef, ur
      <EuiScreenReaderOnly>
        <span data-test-subj="middleTruncatedTextSROnly">{text}</span>
      </EuiScreenReaderOnly>
-      <EuiToolTip content={text} position="top" data-test-subj="middleTruncatedTextToolTip">
+      <WaterfallTooltipResponsiveMaxWidth
+        as={EuiToolTip}


TIL. Does this mean that the div in euiStyled.div is essentially overwritten and the wrapper now becomes EuiToolTip?

Exactly that; very cool helper prop for composability/reusability.

justinkambic · 2021-05-28T21:14:18Z

@dominiqueclarke we had another PR edit middle_truncated_text since you've approved the PR. I've added 4db8675 to put the index back in the tooltip content.

I did this because it seems that this is what we want. I'm happy to revert if this has changed. cc @paulb-elastic

justinkambic · 2021-06-01T13:11:50Z

@elasticmachine merge upstream

kibanamachine · 2021-06-01T14:58:19Z

💚 Build Succeeded

Metrics [docs]

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	+205.0B

Unknown metric groups

References to deprecated APIs

id	before	after	diff
`canvas`	29	25	-4
`crossClusterReplication`	8	6	-2
`fleet`	22	20	-2
`globalSearch`	4	2	-2
`indexManagement`	12	7	-5
`infra`	261	149	-112
`lens`	67	45	-22
`licensing`	18	15	-3
`lists`	239	236	-3
`maps`	286	208	-78
`ml`	121	115	-6
`monitoring`	109	56	-53
`securitySolution`	390	346	-44
`stackAlerts`	101	95	-6
total			-342

History

💚 Build #128057 succeeded 4db8675
💚 Build #127484 succeeded 78f54e9
💚 Build #127476 succeeded c513c65
💚 Build #127440 succeeded 4a79d37
💚 Build #127257 succeeded 3105360

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

cc @justinkambic

paulb-elastic · 2021-06-01T18:07:31Z

@justinkambic thanks, it is better for the index to be included, so that the user maintains context (e.g. knowing it's request # 127 they're seeing in the waterfall chart, and inspecting with the mouseover).

justinkambic · 2021-06-01T18:46:50Z

it is better for the index to be included, so that the user maintains context (e.g. knowing it's request # 127 they're seeing in the waterfall chart, and inspecting with the mouseover).

Duly noted. I think we are ok to merge this then.

elastic#100147) * Add new width definition for waterfall sidebar item. Add delay to tooltip. * Add default value for style if/when undefined. * Create shared style for eui breakpoints to use by both waterfall tooltip types. * Add a comment. * Use viewport units instead of breakpoints. * Rename a style. * Add top margin to prevent tooltip from missing target item. Rename a style. * Adjust custom `margin-top`. * Add index to tooltip content. Co-authored-by: Kibana Machine <42973632+kibanamachine@users.noreply.github.com>

kibanamachine · 2021-06-01T19:01:28Z

💚 Backport successful

Status	Branch	Result
✅	7.x

This backport PR will be merged automatically after passing CI.

#100147) (#101083) * Add new width definition for waterfall sidebar item. Add delay to tooltip. * Add default value for style if/when undefined. * Create shared style for eui breakpoints to use by both waterfall tooltip types. * Add a comment. * Use viewport units instead of breakpoints. * Rename a style. * Add top margin to prevent tooltip from missing target item. Rename a style. * Adjust custom `margin-top`. * Add index to tooltip content. Co-authored-by: Kibana Machine <42973632+kibanamachine@users.noreply.github.com> Co-authored-by: Justin Kambic <justin.kambic@elastic.co>

…sens/kibana into reporting/new-png-pdf-report-type * 'reporting/new-png-pdf-report-type' of github.com:jloleysens/kibana: (46 commits) [Security Solution] Add Ransomware canary advanced policy option (elastic#101068) [Exploratory view] Core web vitals (elastic#100320) [Security solution][Endpoint] Add unit tests for fleet event filters/trusted apps cards (elastic#101034) [Lens] Use a setter function for the dimension panel (elastic#101123) [Index Patterns] Fix return saved index pattern object (elastic#101051) [CI] For PRs, build TS refs before public api docs check (elastic#100791) [Maps] fix line and polygon label regression (elastic#101085) Migrate CCR to new ES JS client. (elastic#100131) [Canvas] Switch Canvas to use React Router (elastic#100579) [Expressions] Use table column ID instead of name when set (elastic#99724) [DOCS] Updates docs landing page (elastic#100749) [DOCS] Corrects typo in step 3 (elastic#101079) [DOCS] Updates runtime example in Discover (elastic#100926) Migrate kibana.autocomplete config to data plugin (elastic#100586) [Uptime] New width/delay definition for waterfall sidebar item tooltip (elastic#100147) [FTR] Use importExport for saved_object/basic archive (elastic#100244) [Fleet] Better input for multi text input in agent policy builder (elastic#101020) [CI] Buildkite support with Baseline pipeline (elastic#100492) [Reporting/Telemetry] Do not send telemetry if we are in screenshot mode (elastic#100388) Create API keys with metadata (elastic#100682) ...

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 14, 2021

justinkambic self-assigned this May 14, 2021

justinkambic requested a review from a team as a code owner May 14, 2021 17:36

justinkambic mentioned this pull request May 14, 2021

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

Merged

17 tasks

justinkambic force-pushed the feature/90909-fixed-width-waterfall-url-label branch from e22c3df to 816025a Compare May 19, 2021 21:07

justinkambic added 6 commits May 26, 2021 11:59

Add new width definition for waterfall sidebar item. Add delay to too…

8995e42

…ltip.

Add default value for style if/when undefined.

6891857

Create shared style for eui breakpoints to use by both waterfall tool…

d09efd4

…tip types.

Add a comment.

861cf19

Use viewport units instead of breakpoints.

f296935

Rename a style.

4a79d37

justinkambic force-pushed the feature/90909-fixed-width-waterfall-url-label branch from 3105360 to 4a79d37 Compare May 26, 2021 16:02

dominiqueclarke reviewed May 26, 2021

View reviewed changes

justinkambic added 2 commits May 26, 2021 13:38

Add top margin to prevent tooltip from missing target item. Rename a …

c513c65

…style.

Adjust custom margin-top.

78f54e9

dominiqueclarke approved these changes May 26, 2021

View reviewed changes

justinkambic added 2 commits May 28, 2021 17:06

Merge branch 'master' into feature/90909-fixed-width-waterfall-url-label

a0c3225

Add index to tooltip content.

4db8675

Merge branch 'master' into feature/90909-fixed-width-waterfall-url-label

23fa64b

justinkambic merged commit f58ddc4 into elastic:master Jun 1, 2021

justinkambic deleted the feature/90909-fixed-width-waterfall-url-label branch June 1, 2021 18:58

kibanamachine mentioned this pull request Jun 1, 2021

[7.x] [Uptime] New width/delay definition for waterfall sidebar item tooltip (#100147) #101083

Merged

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

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

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

justinkambic commented May 14, 2021 •

edited

Loading

elasticmachine commented May 14, 2021

justinkambic commented May 20, 2021

justinkambic commented May 25, 2021

dominiqueclarke left a comment

dominiqueclarke May 26, 2021

justinkambic May 26, 2021

justinkambic May 26, 2021

justinkambic commented May 26, 2021

dominiqueclarke left a comment

dominiqueclarke May 26, 2021

justinkambic May 28, 2021

justinkambic commented May 28, 2021

justinkambic commented Jun 1, 2021

kibanamachine commented Jun 1, 2021

References to deprecated APIs

paulb-elastic commented Jun 1, 2021

justinkambic commented Jun 1, 2021

kibanamachine commented Jun 1, 2021

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

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

Conversation

justinkambic commented May 14, 2021 • edited Loading

Summary

Before

After

Author checklist

Reviewer checklist

For maintainers

elasticmachine commented May 14, 2021

justinkambic commented May 20, 2021

justinkambic commented May 25, 2021

dominiqueclarke left a comment

Choose a reason for hiding this comment

dominiqueclarke May 26, 2021

Choose a reason for hiding this comment

justinkambic May 26, 2021

Choose a reason for hiding this comment

justinkambic May 26, 2021

Choose a reason for hiding this comment

justinkambic commented May 26, 2021

dominiqueclarke left a comment

Choose a reason for hiding this comment

dominiqueclarke May 26, 2021

Choose a reason for hiding this comment

justinkambic May 28, 2021

Choose a reason for hiding this comment

justinkambic commented May 28, 2021

justinkambic commented Jun 1, 2021

kibanamachine commented Jun 1, 2021

💚 Build Succeeded

Metrics [docs]

Async chunks

References to deprecated APIs

History

paulb-elastic commented Jun 1, 2021

justinkambic commented Jun 1, 2021

kibanamachine commented Jun 1, 2021

💚 Backport successful

justinkambic commented May 14, 2021 •

edited

Loading