[Infra UI] Add timepicker and chart dragging to Node detail page

[XavierM]

#23394
and fixes #23828

[elasticmachine]

💔 Build Failed

• continuous-integration/kibana-ci/pull-request

[weltenwort]

looks like the CI failures are caused by genuine type errors

[XavierM]

it looks like that

[elasticmachine]

💔 Build Failed

• continuous-integration/kibana-ci/pull-request

[elasticmachine]

💔 Build Failed

• continuous-integration/kibana-ci/pull-request

[XavierM]

FYI @weltenwort, I talked to @simianhacker

• Bug on Recently used date ranges when you pick a date range
• Add a cancel button close to the go button
• Add CrosshairLocation on all the graph
• Add SectionBrush/Zoom on graph who will also set the date range
• Add a reset button to go back to default value
• on the popover on the date range, need to set the default value to Last 1 hour

[elasticmachine]

💚 Build Succeeded

• continuous-integration/kibana-ci/pull-request

[elasticmachine]

💚 Build Succeeded

• continuous-integration/kibana-ci/pull-request

[XavierM]

@simianhacker what the default value for the crosshair? for now, I put it in the middle of the chart

[tbragin]

@simianhacker @XavierM I checked out the PR and used it a bit.

I think it's functional, but I'm confused why we can't just use the same logic as Kibana's timepicker, where in most cases we see "Last 30 minutes" type of display?

If we can't fix it for Beta, I'm okay with it as is, but we should get together and discuss how working with time ranges really should work.

[XavierM]

@tbragin
Right now, we have the last hour in the time range, we can change it really easily to a 30 minutes time range.
We can maybe add a small the last recently used date ranges outside of the date picker so it is easier for the user to see what's going on. What do you think?
I do agree that we should change/figure out how to make the experience better.

[elasticmachine]

💔 Build Failed

• continuous-integration/kibana-ci/pull-request

[simianhacker]

LGTM

I think for this version we should go with what we have "as is" but in the next release I would like to have @elastic/eui-design team look at the time picker and come up with a better UX. I agree with Tanya I like the old Kibana time picker but unfortunately that's only available in Angular (as far as I know).

[XavierM]

jenkins, test this

[elasticmachine]

💚 Build Succeeded

• continuous-integration/kibana-ci/pull-request

[snide]

@tbragin @simianhacker A eui/kibana datepicker will be available early in 6.6. You can mess with the UI side of it in elastic/eui#1219

Since most of it is fairly Kibana specific it'll have a Kibana component to handle all the logic and be a pure replacement of the angular UI available currently.

It's likely in the couple weeks, not couple months timeframe.

[simianhacker]

Thanks for the update @snide! Now I'm even more convinced that this PR will get us to 6.5, then we can switch over to the new one in 6.6

[tbragin]

Nice job @XavierM :)