Kibana: [APM] Handle timezones explicitly

[sqren]

Fixes: https://github.com/elastic/kibana/issues/47832

APM UI currently doesn't handle timezones well. All user-facing timestamps should be formatted consistently with the same timezone to avoid confusing the user.

In https://github.com/elastic/kibana/issues/47832 a user has changed their timezone in the Kibana settings to something different from their own local (browser) timezone. This is completely valid but since some parts of the APM UI uses the kibana timezone settings, and other parts uses the local browser timezone, the user sees conflicting dates.

Moment.js
APM UI should always follow the Kibana timezone settings. It seems that moment(...).format() will by default use the Kibana timezone settings (perhaps because moment is a shared instance across Kibana). Unless we can verify this is always the case, we should always format timestamps with an explicit timezone: moment(...).tz(...).format(...).

react-vis and others
To make matters worse, not all dates are formatted using moment. React-vis automatically formats dates when using xType="time" on a chart. This uses the users local browser timezone. To solve this we will have to create a custom tick formatter that uses momentjs and an explicit timezone from kibana settings.

Examples

Kibana timezone
https://github.com/elastic/kibana/blob/5e2deb49a6d6bc782032a345e7fcb0099416fd7a/x-pack/legacy/plugins/apm/public/components/app/ServiceDetails/ServiceIntegrations/WatcherFlyout.tsx#L292-L297

Browser timezone
https://github.com/elastic/kibana/blob/5e2deb49a6d6bc782032a345e7fcb0099416fd7a/x-pack/legacy/plugins/apm/public/components/shared/TimestampTooltip.tsx#L30-L34

No explicit timezone
https://github.com/elastic/kibana/blob/5e2deb49a6d6bc782032a345e7fcb0099416fd7a/x-pack/legacy/plugins/apm/public/components/shared/charts/Tooltip/index.js#L90

react-vis charts
https://github.com/elastic/kibana/blob/master/x-pack/legacy/plugins/apm/public/components/app/ErrorGroupDetails/Distribution/index.tsx#L79

[elasticmachine]

Pinging @elastic/apm-ui (Team:apm)

[sqren]

Closed by https://github.com/elastic/kibana/pull/48355

[sqren]

@smith what do you think about adding timezone info to the chart tooltip? https://github.com/elastic/kibana/blob/5e2deb49a6d6bc782032a345e7fcb0099416fd7a/x-pack/legacy/plugins/apm/public/components/shared/charts/Tooltip/index.js#L90

[smith]

what do you think about adding timezone info to the chart tooltip?

Sure ok. @formgeist how do you think that should be formatted? Like "America/Chicago" or the offset or what? Let me know what we want the content to look like and I'll open a PR.

[sqren]

I think we should extract the format from the TimestampTooltip component so we we always use the same format.

https://github.com/elastic/kibana/blob/b5b8b4d87cf35ffd312586febda020f00508dd64/x-pack/legacy/plugins/apm/public/components/shared/TimestampTooltip/index.tsx#L29-L41

[formgeist]

@smith I think we recently add in the timezone as the offset in the Trace summary tooltip and I reckon we should use the same formatting in the graph tooltip. But looking at the screenshot, are we formatting this in the best way currently? I would have expected to see GMT+2 instead of +0200 CEST.

_(Github won't let me attach screenshots right now, but see link ^)_