[Observability] [Exploratory view] adjust popover placement by dominiqueclarke · Pull Request #116471 · elastic/kibana

dominiqueclarke · 2021-10-27T16:21:30Z

Summary

Adjusts the location of EuiDatePicker popover for subsequent series in exploratory view.

This PR resolves the issue for the date range start, but not the date range end. Final resolution of the date range end popover placement is dependent on elastic/eui#5328

This PR will be removed out of draft once the above issue is merged and eui is updated in 8.0.0 and backported in 7.16.0

cchaos · 2021-10-27T21:32:44Z

Hey @dominiqueclarke , we're working on the EUI issue, but I wanted to get some clarification. I'm confused about how changing the position from "left" to "right" fixes this screenshot:

Is it specifically because it omits the "top" portion of the string and so ensures that it forces it to drop down rather than up? We're considering just supplying a top level prop that enforces the "down" behavior without being able to specify left/right becuase that should be determined by the position of the start/end times.

dominiqueclarke · 2021-10-28T00:45:15Z

Hey @dominiqueclarke , we're working on the EUI issue, but I wanted to get some clarification. I'm confused about how changing the position from "left" to "right" fixes this screenshot:

Is it specifically because it omits the "top" portion of the string and so ensures that it forces it to drop down rather than up? We're considering just supplying a top level prop that enforces the "down" behavior without being able to specify left/right becuase that should be determined by the position of the start/end times.

@cchaos Hi there!

There's a few different things at play here.

The screenshot in question is from the original issue, which was reopened. The screenshot is the original position of the popover, without any fixes. The original fix went in this PR, and involved a combination of CSS adjustments and adjusting the popover placement. [Observability] [Exploratory View] Fix calendar cut off, change title, and close accordions on apply changes #113824
Even though the placement was merged as left, we always intended it to display on the right. This PR is actually in response to the original issue being reopened. In the original, PR, I had actually screenshotted the popover displaying on the right, but had somehow managed to commit it as left. It's possible that the reviewer didn't notice an issue because our date range picker had a lot more room at the time to render the popover, so left was working fine. We've since adjusted the layout and left will not work, but right works well for both date range end and date range start. Picture for reference
We are dealing with a very limited space within exploratory view. You can play around with exploratory view currently if helpful. Series 1 uses the EuiSuperDatePicker. The problem is with the date range picker in series 2 and 3 which uses EuiDateRangePicker. The series themselves are contained inside an EuiResizablePanel, and the popovers be cut off when rendered on top or bottom. Right is the only place where we are certain there will be space. Pictures for reference

I saw a mention on the PR of how much better it would be to render the popover in a portal. There was some discussion of this when this issue first cropped up, but that was decided against at the time. Our ideal solution would be to render the popover in a portal. Slack thread for reference https://elastic.slack.com/archives/C7QC1JV6F/p1633363693468200

Please let me know if that helps any. Happy to chat on Thursday.

cchaos · 2021-10-28T19:56:23Z

Thanks @dominiqueclarke for the context! I have an idea that I'm going to try to codesandbox. It would mean a little more configuration on your part, but it should negate all these problems.

cchaos

While working on my idea (which we might be able to do in EUI instead) I found a really easy workaround for you. There's an isCustom prop that you can apply to the range which essentially just removes any forced props on the start and end controls. You'll just need to add a couple extra things to ensure it still renders correctly, but it will get popoverPlacement to apply right.

<EuiDatePickerRange
+ isCustom
  fullWidth
  startDateControl={
    <EuiDatePicker
+    fullWidth
      ...
    />
  }
  endDateControl={
    <EuiDatePicker
+    fullWidth
+    showIcon={false}
      ...
    />
  }
/>

elasticmachine · 2021-10-29T19:26:57Z

Pinging @elastic/uptime (Team:uptime)

dominiqueclarke · 2021-10-29T19:27:11Z

@elasticmachine merge upstream

…-placement

dominiqueclarke · 2021-10-31T19:33:52Z

@elasticmachine merge upstream

…-placement

shahzad31

LGTM, Thanks for taking care of it

shahzad31 · 2021-11-02T16:44:12Z

@elasticmachine merge upstream

…-placement

kibanamachine · 2021-11-02T18:40:28Z

💚 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
`observability`	375.6KB	375.6KB	+52.0B

History

💚 Build #2934 succeeded 30d6916
💔 Build #2145 failed cf2aa4f3ab2e48f289117c059e13c8ba4562feb5

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

kibanamachine · 2021-11-02T18:46:22Z

The following labels were identified as gaps in your version labels and will be added automatically:

v8.1.0

If any of these should not be on your pull request, please manually remove them.

…116471) Co-authored-by: Kibana Machine <42973632+kibanamachine@users.noreply.github.com>

kibanamachine · 2021-11-02T18:49:25Z

💚 Backport successful

Status	Branch	Result
✅	8.0
✅	7.16

The backport PRs will be merged automatically after passing CI.

…#117209) Co-authored-by: Kibana Machine <42973632+kibanamachine@users.noreply.github.com> Co-authored-by: Dominique Clarke <doclarke71@gmail.com>

kibanamachine · 2021-11-03T18:49:53Z

Looks like this PR has backport PRs but they still haven't been merged. Please merge them ASAP to keep the branches relatively in sync.

kibanamachine · 2021-11-04T18:59:48Z

Looks like this PR has backport PRs but they still haven't been merged. Please merge them ASAP to keep the branches relatively in sync.

kibanamachine · 2021-11-05T19:09:49Z

Looks like this PR has backport PRs but they still haven't been merged. Please merge them ASAP to keep the branches relatively in sync.

kibanamachine · 2021-11-08T19:19:50Z

Looks like this PR has backport PRs but they still haven't been merged. Please merge them ASAP to keep the branches relatively in sync.

…#117210) Co-authored-by: Kibana Machine <42973632+kibanamachine@users.noreply.github.com> Co-authored-by: Dominique Clarke <doclarke71@gmail.com>

dominiqueclarke added the Team:Uptime - DEPRECATED Synthetics & RUM sub-team of Application Observability label Oct 27, 2021

dominiqueclarke requested a review from a team October 27, 2021 16:21

dominiqueclarke added bug Fixes for quality problems that affect the customer experience v7.16.0 8.0.0 v8.0.0 auto-backport Deprecated - use backport:version if exact versions are needed release_note:skip Skip the PR/issue when compiling release notes and removed 8.0.0 labels Oct 27, 2021

thompsongl mentioned this pull request Oct 27, 2021

[EuiDatePickerRange] Respect endDateControl className prop elastic/eui#5329

Merged

5 tasks

cchaos reviewed Oct 28, 2021

View reviewed changes

adjust popover placement

1a98850

dominiqueclarke force-pushed the feature/exploratory-view-date-picker-popover-placement branch from cf2aa4f to 1a98850 Compare October 29, 2021 19:19

dominiqueclarke marked this pull request as ready for review October 29, 2021 19:26

Merge branch 'main' into feature/exploratory-view-date-picker-popover…

30d6916

…-placement

Merge branch 'main' into feature/exploratory-view-date-picker-popover…

cb2b7a8

…-placement

shahzad31 approved these changes Nov 2, 2021

View reviewed changes

Merge branch 'main' into feature/exploratory-view-date-picker-popover…

c1ff68f

…-placement

dominiqueclarke merged commit 3a6a946 into elastic:main Nov 2, 2021

dominiqueclarke deleted the feature/exploratory-view-date-picker-popover-placement branch November 2, 2021 18:46

kibanamachine added the v8.1.0 label Nov 2, 2021

kibanamachine mentioned this pull request Nov 2, 2021

[8.0] [Observability] [Exploratory View] adjust popover placement (#116471) #117209

Merged

kibanamachine added a commit to kibanamachine/kibana that referenced this pull request Nov 2, 2021

[Observability] [Exploratory View] adjust popover placement (elastic#…

fc6d9ba

…116471) Co-authored-by: Kibana Machine <42973632+kibanamachine@users.noreply.github.com>

kibanamachine added a commit to kibanamachine/kibana that referenced this pull request Nov 2, 2021

[Observability] [Exploratory View] adjust popover placement (elastic#…

19c82c5

…116471) Co-authored-by: Kibana Machine <42973632+kibanamachine@users.noreply.github.com>

kibanamachine mentioned this pull request Nov 2, 2021

[7.16] [Observability] [Exploratory View] adjust popover placement (#116471) #117210

Merged

kibanamachine added the backport missing Added to PRs automatically when the are determined to be missing a backport. label Nov 3, 2021

kibanamachine removed the backport missing Added to PRs automatically when the are determined to be missing a backport. label Nov 9, 2021

Conversation

dominiqueclarke commented Oct 27, 2021

Summary

Uh oh!

cchaos commented Oct 27, 2021

Uh oh!

dominiqueclarke commented Oct 28, 2021 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

cchaos commented Oct 28, 2021

Uh oh!

cchaos left a comment

Choose a reason for hiding this comment

Uh oh!

elasticmachine commented Oct 29, 2021

Uh oh!

dominiqueclarke commented Oct 29, 2021

Uh oh!

dominiqueclarke commented Oct 31, 2021

Uh oh!

shahzad31 left a comment

Choose a reason for hiding this comment

Uh oh!

shahzad31 commented Nov 2, 2021

Uh oh!

kibanamachine commented Nov 2, 2021

💚 Build Succeeded

Metrics [docs]

Async chunks

History

Uh oh!

kibanamachine commented Nov 2, 2021

Uh oh!

kibanamachine commented Nov 2, 2021

💚 Backport successful

Uh oh!

kibanamachine commented Nov 3, 2021

Uh oh!

kibanamachine commented Nov 4, 2021

Uh oh!

kibanamachine commented Nov 5, 2021

Uh oh!

kibanamachine commented Nov 8, 2021

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

5 participants

dominiqueclarke commented Oct 28, 2021 •

edited

Loading