adjusting charts timezone (#116014) (#116193)

Co-authored-by: Cauê Marcondes <[email protected]>
elastic · Oct 25, 2021 · 5e36c6e · 5e36c6e
1 parent 222a98a
commit 5e36c6e
Show file tree

Hide file tree

Showing 11 changed files with 69 additions and 11 deletions.
diff --git a/src/plugins/data/common/constants.ts b/src/plugins/data/common/constants.ts
@@ -36,4 +36,5 @@ export const UI_SETTINGS = {
   AUTOCOMPLETE_USE_TIMERANGE: 'autocomplete:useTimeRange',
   AUTOCOMPLETE_VALUE_SUGGESTION_METHOD: 'autocomplete:valueSuggestionMethod',
   DATE_FORMAT: 'dateFormat',
+  DATEFORMAT_TZ: 'dateFormat:tz',
 } as const;
diff --git a/x-pack/plugins/apm/public/components/alerting/chart_preview/index.tsx b/x-pack/plugins/apm/public/components/alerting/chart_preview/index.tsx
@@ -23,17 +23,21 @@ import { EuiSpacer } from '@elastic/eui';
 import React from 'react';
 import { Coordinate } from '../../../../typings/timeseries';
 import { useTheme } from '../../../hooks/use_theme';
+import { IUiSettingsClient } from '../../../../../../../src/core/public';
+import { getTimeZone } from '../../shared/charts/helper/timezone';
 
 interface ChartPreviewProps {
   yTickFormat?: TickFormatter;
   data?: Coordinate[];
   threshold: number;
+  uiSettings?: IUiSettingsClient;
 }
 
 export function ChartPreview({
   data = [],
   yTickFormat,
   threshold,
+  uiSettings,
 }: ChartPreviewProps) {
   const theme = useTheme();
   const thresholdOpacity = 0.3;
@@ -67,6 +71,8 @@ export function ChartPreview({
     },
   ];
 
+  const timeZone = getTimeZone(uiSettings);
+
   return (
     <>
       <EuiSpacer size="m" />
@@ -99,6 +105,7 @@ export function ChartPreview({
           domain={{ max: yMax, min: NaN }}
         />
         <BarSeries
+          timeZone={timeZone}
           color={theme.eui.euiColorVis1}
           data={data}
           id="chart_preview_bar_series"

diff --git a/x-pack/plugins/apm/public/components/alerting/error_count_alert_trigger/index.tsx b/x-pack/plugins/apm/public/components/alerting/error_count_alert_trigger/index.tsx
@@ -120,6 +120,7 @@ export function ErrorCountAlertTrigger(props: Props) {
       data={data?.errorCountChartPreview}
       threshold={params.threshold}
       yTickFormat={asInteger}
+      uiSettings={services.uiSettings}
     />
   );
 

diff --git a/x-pack/plugins/apm/public/components/alerting/transaction_duration_alert_trigger/index.tsx b/x-pack/plugins/apm/public/components/alerting/transaction_duration_alert_trigger/index.tsx
@@ -139,6 +139,7 @@ export function TransactionDurationAlertTrigger(props: Props) {
       data={latencyChartPreview}
       threshold={thresholdMs}
       yTickFormat={yTickFormat}
+      uiSettings={services.uiSettings}
     />
   );
 

diff --git a/x-pack/plugins/apm/public/components/alerting/transaction_error_rate_alert_trigger/index.tsx b/x-pack/plugins/apm/public/components/alerting/transaction_error_rate_alert_trigger/index.tsx
@@ -131,6 +131,7 @@ export function TransactionErrorRateAlertTrigger(props: Props) {
       data={data?.errorRateChartPreview}
       yTickFormat={(d: number | null) => asPercent(d, 1)}
       threshold={thresholdAsPercent}
+      uiSettings={services.uiSettings}
     />
   );
 

diff --git a/x-pack/plugins/apm/public/components/app/error_group_details/Distribution/index.stories.tsx b/x-pack/plugins/apm/public/components/app/error_group_details/Distribution/index.stories.tsx
@@ -19,14 +19,17 @@ export default {
   component: ErrorDistribution,
   decorators: [
     (Story: ComponentType) => {
-      const apmPluginContextMock = {
-        observabilityRuleTypeRegistry: { getFormatter: () => undefined },
-      } as unknown as ApmPluginContextValue;
-
       const kibanaContextServices = {
         uiSettings: { get: () => {} },
       };
 
+      const apmPluginContextMock = {
+        observabilityRuleTypeRegistry: { getFormatter: () => undefined },
+        core: {
+          uiSettings: kibanaContextServices.uiSettings,
+        },
+      } as unknown as ApmPluginContextValue;
+
       return (
         <ApmPluginContext.Provider value={apmPluginContextMock}>
           <KibanaContextProvider services={kibanaContextServices}>

diff --git a/x-pack/plugins/apm/public/components/app/error_group_details/Distribution/index.tsx b/x-pack/plugins/apm/public/components/app/error_group_details/Distribution/index.tsx
@@ -32,6 +32,7 @@ import { useApmPluginContext } from '../../../../context/apm_plugin/use_apm_plug
 import { LazyAlertsFlyout } from '../../../../../../observability/public';
 import { useUrlParams } from '../../../../context/url_params_context/use_url_params';
 import { Coordinate } from '../../../../../typings/timeseries';
+import { getTimeZone } from '../../../shared/charts/helper/timezone';
 
 const ALERT_RULE_TYPE_ID: typeof ALERT_RULE_TYPE_ID_TYPED =
   ALERT_RULE_TYPE_ID_NON_TYPED;
@@ -58,6 +59,7 @@ interface Props {
 }
 
 export function ErrorDistribution({ distribution, title, fetchStatus }: Props) {
+  const { core } = useApmPluginContext();
   const theme = useTheme();
   const currentPeriod = getCoordinatedBuckets(distribution.currentPeriod);
   const previousPeriod = getCoordinatedBuckets(distribution.previousPeriod);
@@ -103,6 +105,8 @@ export function ErrorDistribution({ distribution, title, fetchStatus }: Props) {
     undefined
   );
 
+  const timeZone = getTimeZone(core.uiSettings);
+
   return (
     <>
       <EuiTitle size="xs">
@@ -138,6 +142,7 @@ export function ErrorDistribution({ distribution, title, fetchStatus }: Props) {
           {timeseries.map((serie) => {
             return (
               <BarSeries
+                timeZone={timeZone}
                 key={serie.title}
                 id={serie.title}
                 minBarHeight={2}

diff --git a/x-pack/plugins/apm/public/components/shared/charts/breakdown_chart/index.tsx b/x-pack/plugins/apm/public/components/shared/charts/breakdown_chart/index.tsx
@@ -44,6 +44,8 @@ import {
   getMaxY,
   getResponseTimeTickFormatter,
 } from '../../../shared/charts/transaction_charts/helper';
+import { useApmPluginContext } from '../../../../context/apm_plugin/use_apm_plugin_context';
+import { getTimeZone } from '../helper/timezone';
 
 interface Props {
   fetchStatus: FETCH_STATUS;
@@ -66,15 +68,12 @@ export function BreakdownChart({
 }: Props) {
   const history = useHistory();
   const chartTheme = useChartTheme();
-
+  const { core } = useApmPluginContext();
   const { chartRef, setPointerEvent } = useChartPointerEventContext();
-
   const {
     query: { rangeFrom, rangeTo },
   } = useApmParams('/services/{serviceName}');
-
   const theme = useTheme();
-
   const { start, end } = useTimeRange({ rangeFrom, rangeTo });
 
   const min = moment.utc(start).valueOf();
@@ -92,6 +91,8 @@ export function BreakdownChart({
       ? getResponseTimeTickFormatter(getDurationFormatter(maxY))
       : asPercentBound;
 
+  const timeZone = getTimeZone(core.uiSettings);
+
   return (
     <ChartContainer height={height} hasData={!isEmpty} status={fetchStatus}>
       <Chart ref={chartRef}>
@@ -150,6 +151,7 @@ export function BreakdownChart({
           timeseries.map((serie) => {
             return (
               <AreaSeries
+                timeZone={timeZone}
                 key={serie.title}
                 id={serie.title}
                 name={serie.title}

diff --git a/x-pack/plugins/apm/public/components/shared/charts/helper/timezone.test.ts b/x-pack/plugins/apm/public/components/shared/charts/helper/timezone.test.ts
@@ -6,7 +6,8 @@
  */
 
 import moment from 'moment-timezone';
-import { getDomainTZ, getTimeTicksTZ } from './timezone';
+import { IUiSettingsClient } from '../../../../../../../../src/core/public';
+import { getDomainTZ, getTimeTicksTZ, getTimeZone } from './timezone';
 
 describe('Timezone helper', () => {
   let originalTimezone: moment.MomentZone | null;
@@ -67,4 +68,22 @@ describe('Timezone helper', () => {
       ]);
     });
   });
+
+  describe('getTimeZone', () => {
+    it('returns local when uiSettings is undefined', () => {
+      expect(getTimeZone()).toEqual('local');
+    });
+
+    it('returns local when uiSettings returns Browser', () => {
+      expect(
+        getTimeZone({ get: () => 'Browser' } as unknown as IUiSettingsClient)
+      ).toEqual('local');
+    });
+    it('returns timezone defined on uiSettings', () => {
+      const timezone = 'America/toronto';
+      expect(
+        getTimeZone({ get: () => timezone } as unknown as IUiSettingsClient)
+      ).toEqual(timezone);
+    });
+  });
 });
diff --git a/x-pack/plugins/apm/public/components/shared/charts/helper/timezone.ts b/x-pack/plugins/apm/public/components/shared/charts/helper/timezone.ts
@@ -7,6 +7,8 @@
 
 import d3 from 'd3';
 import { getTimezoneOffsetInMs } from './get_timezone_offset_in_ms';
+import { IUiSettingsClient } from '../../../../../../../../src/core/public';
+import { UI_SETTINGS } from '../../../../../../../../src/plugins/data/common';
 
 interface Params {
   domain: [number, number];
@@ -31,3 +33,15 @@ export const getDomainTZ = (min: number, max: number): [number, number] => {
   );
   return [xMinZone, xMaxZone];
 };
+
+export function getTimeZone(uiSettings?: IUiSettingsClient) {
+  const kibanaTimeZone = uiSettings?.get<'Browser' | string>(
+    UI_SETTINGS.DATEFORMAT_TZ
+  );
+
+  if (!kibanaTimeZone || kibanaTimeZone === 'Browser') {
+    return 'local';
+  }
+
+  return kibanaTimeZone;
+}
diff --git a/x-pack/plugins/apm/public/components/shared/charts/timeseries_chart.tsx b/x-pack/plugins/apm/public/components/shared/charts/timeseries_chart.tsx
@@ -19,8 +19,8 @@ import {
   RectAnnotation,
   ScaleType,
   Settings,
-  YDomainRange,
   XYBrushEvent,
+  YDomainRange,
 } from '@elastic/charts';
 import { EuiIcon } from '@elastic/eui';
 import { i18n } from '@kbn/i18n';
@@ -46,6 +46,7 @@ import { getLatencyChartSelector } from '../../../selectors/latency_chart_select
 import { unit } from '../../../utils/style';
 import { ChartContainer } from './chart_container';
 import { getAlertAnnotations } from './helper/get_alert_annotations';
+import { getTimeZone } from './helper/timezone';
 import { isTimeseriesEmpty, onBrushEnd } from './helper/helper';
 
 interface Props {
@@ -85,7 +86,7 @@ export function TimeseriesChart({
   alerts,
 }: Props) {
   const history = useHistory();
-  const { observabilityRuleTypeRegistry } = useApmPluginContext();
+  const { observabilityRuleTypeRegistry, core } = useApmPluginContext();
   const { getFormatter } = observabilityRuleTypeRegistry;
   const { annotations } = useAnnotationsContext();
   const { setPointerEvent, chartRef } = useChartPointerEventContext();
@@ -97,6 +98,8 @@ export function TimeseriesChart({
 
   const xValues = timeseries.flatMap(({ data }) => data.map(({ x }) => x));
 
+  const timeZone = getTimeZone(core.uiSettings);
+
   const min = Math.min(...xValues);
   const max = Math.max(...xValues);
 
@@ -180,6 +183,7 @@ export function TimeseriesChart({
 
           return (
             <Series
+              timeZone={timeZone}
               key={serie.title}
               id={serie.title}
               xScaleType={ScaleType.Time}