@grafana/data: use timeZone parameter rather than isUtc (#21276)

packages/grafana-data/src/field/displayProcessor.test.ts

@@ -246,7 +246,7 @@ describe('Format value', () => {
 describe('Date display options', () => {
   it('should format UTC dates', () => {
     const processor = getDisplayProcessor({
-      isUtc: true,
+      timeZone: 'utc',
       field: {
         type: FieldType.time,
         config: {
@@ -259,7 +259,7 @@ describe('Date display options', () => {
 
   it('should pick configured time format', () => {
     const processor = getDisplayProcessor({
-      isUtc: true,
+      timeZone: 'utc',
       field: {
         type: FieldType.time,
         config: {
@@ -272,7 +272,7 @@ describe('Date display options', () => {
 
   it('respect the configured date format', () => {
     const processor = getDisplayProcessor({
-      isUtc: true,
+      timeZone: 'utc',
       field: {
         type: FieldType.time,
         config: {

packages/grafana-data/src/field/displayProcessor.ts

@@ -8,14 +8,14 @@ import { DisplayProcessor, DisplayValue, DecimalCount, DecimalInfo } from '../ty
 import { getValueFormat } from '../valueFormats/valueFormats';
 import { getMappedValue } from '../utils/valueMappings';
 import { DEFAULT_DATE_TIME_FORMAT } from '../datetime';
-import { KeyValue } from '../types';
+import { KeyValue, TimeZone } from '../types';
 import { getScaleCalculator } from './scale';
 
 interface DisplayProcessorOptions {
   field: Partial<Field>;
 
   // Context
-  isUtc?: boolean;
+  timeZone?: TimeZone;
   theme?: GrafanaTheme; // Will pick 'dark' if not defined
 }
 
@@ -73,7 +73,7 @@ export function getDisplayProcessor(options?: DisplayProcessorOptions): DisplayP
     if (!isNaN(numeric)) {
       if (shouldFormat && !_.isBoolean(value)) {
         const { decimals, scaledDecimals } = getDecimalsForValue(value, config.decimals);
-        const v = formatFunc(numeric, decimals, scaledDecimals, options.isUtc);
+        const v = formatFunc(numeric, decimals, scaledDecimals, options.timeZone);
         text = v.text;
         suffix = v.suffix;
         prefix = v.prefix;

packages/grafana-data/src/valueFormats/dateTimeFormatters.test.ts

@@ -19,81 +19,81 @@ describe('date time formats', () => {
 
   it('should format as iso date', () => {
     const expected = browserTime.format('YYYY-MM-DD HH:mm:ss');
-    const actual = dateTimeAsIso(epoch, 0, 0, false);
+    const actual = dateTimeAsIso(epoch, 0, 0);
     expect(actual.text).toBe(expected);
   });
 
   it('should format as iso date (in UTC)', () => {
     const expected = utcTime.format('YYYY-MM-DD HH:mm:ss');
-    const actual = dateTimeAsIso(epoch, 0, 0, true);
+    const actual = dateTimeAsIso(epoch, 0, 0);
     expect(actual.text).toBe(expected);
   });
 
   it('should format as iso date and skip date when today', () => {
     const now = dateTime();
     const expected = now.format('HH:mm:ss');
-    const actual = dateTimeAsIso(now.valueOf(), 0, 0, false);
+    const actual = dateTimeAsIso(now.valueOf(), 0, 0);
     expect(actual.text).toBe(expected);
   });
 
   it('should format as iso date (in UTC) and skip date when today', () => {
     const now = toUtc();
     const expected = now.format('HH:mm:ss');
-    const actual = dateTimeAsIso(now.valueOf(), 0, 0, true);
+    const actual = dateTimeAsIso(now.valueOf(), 0, 0, 'utc');
     expect(actual.text).toBe(expected);
   });
 
   it('should format as US date', () => {
     const expected = browserTime.format('MM/DD/YYYY h:mm:ss a');
-    const actual = dateTimeAsUS(epoch, 0, 0, false);
+    const actual = dateTimeAsUS(epoch, 0, 0);
     expect(actual.text).toBe(expected);
   });
 
   it('should format as US date (in UTC)', () => {
     const expected = utcTime.format('MM/DD/YYYY h:mm:ss a');
-    const actual = dateTimeAsUS(epoch, 0, 0, true);
+    const actual = dateTimeAsUS(epoch, 0, 0, 'utc');
     expect(actual.text).toBe(expected);
   });
 
   it('should format as US date and skip date when today', () => {
     const now = dateTime();
     const expected = now.format('h:mm:ss a');
-    const actual = dateTimeAsUS(now.valueOf(), 0, 0, false);
+    const actual = dateTimeAsUS(now.valueOf(), 0, 0);
     expect(actual.text).toBe(expected);
   });
 
   it('should format as US date (in UTC) and skip date when today', () => {
     const now = toUtc();
     const expected = now.format('h:mm:ss a');
-    const actual = dateTimeAsUS(now.valueOf(), 0, 0, true);
+    const actual = dateTimeAsUS(now.valueOf(), 0, 0, 'utc');
     expect(actual.text).toBe(expected);
   });
 
   it('should format as from now with days', () => {
     const daysAgo = dateTime().add(-7, 'd');
     const expected = '7 days ago';
-    const actual = dateTimeFromNow(daysAgo.valueOf(), 0, 0, false);
+    const actual = dateTimeFromNow(daysAgo.valueOf(), 0, 0);
     expect(actual.text).toBe(expected);
   });
 
   it('should format as from now with days (in UTC)', () => {
     const daysAgo = toUtc().add(-7, 'd');
     const expected = '7 days ago';
-    const actual = dateTimeFromNow(daysAgo.valueOf(), 0, 0, true);
+    const actual = dateTimeFromNow(daysAgo.valueOf(), 0, 0, 'utc');
     expect(actual.text).toBe(expected);
   });
 
   it('should format as from now with minutes', () => {
     const daysAgo = dateTime().add(-2, 'm');
     const expected = '2 minutes ago';
-    const actual = dateTimeFromNow(daysAgo.valueOf(), 0, 0, false);
+    const actual = dateTimeFromNow(daysAgo.valueOf(), 0, 0);
     expect(actual.text).toBe(expected);
   });
 
   it('should format as from now with minutes (in UTC)', () => {
     const daysAgo = toUtc().add(-2, 'm');
     const expected = '2 minutes ago';
-    const actual = dateTimeFromNow(daysAgo.valueOf(), 0, 0, true);
+    const actual = dateTimeFromNow(daysAgo.valueOf(), 0, 0, 'utc');
     expect(actual.text).toBe(expected);
   });
 });

packages/grafana-data/src/valueFormats/dateTimeFormatters.ts

@@ -2,6 +2,7 @@ import { toDuration as duration, toUtc, dateTime } from '../datetime/moment_wrap
 
 import { toFixed, toFixedScaled, FormattedValue, ValueFormatter } from './valueFormats';
 import { DecimalCount } from '../types/displayValue';
+import { TimeZone } from '../types';
 
 interface IntervalsInSeconds {
   [interval: string]: number;
@@ -324,7 +325,8 @@ export function toClockSeconds(size: number, decimals: DecimalCount): FormattedV
 }
 
 export function toDateTimeValueFormatter(pattern: string, todayPattern?: string): ValueFormatter {
-  return (value: number, decimals: DecimalCount, scaledDecimals: DecimalCount, isUtc?: boolean): FormattedValue => {
+  return (value: number, decimals: DecimalCount, scaledDecimals: DecimalCount, timeZone?: TimeZone): FormattedValue => {
+    const isUtc = timeZone === 'utc';
     const time = isUtc ? toUtc(value) : dateTime(value);
     if (todayPattern) {
       if (dateTime().isSame(value, 'day')) {
@@ -342,8 +344,9 @@ export function dateTimeFromNow(
   value: number,
   decimals: DecimalCount,
   scaledDecimals: DecimalCount,
-  isUtc?: boolean
+  timeZone?: TimeZone
 ): FormattedValue {
+  const isUtc = timeZone === 'utc';
   const time = isUtc ? toUtc(value) : dateTime(value);
   return { text: time.fromNow() };
 }

packages/grafana-data/src/valueFormats/valueFormats.ts

@@ -2,6 +2,7 @@ import { getCategories } from './categories';
 import { DecimalCount } from '../types/displayValue';
 import { toDateTimeValueFormatter } from './dateTimeFormatters';
 import { getOffsetFromSIPrefix, decimalSIPrefix, currency } from './symbolFormatters';
+import { TimeZone } from '../types';
 
 export interface FormattedValue {
   text: string;
@@ -17,7 +18,7 @@ export type ValueFormatter = (
   value: number,
   decimals?: DecimalCount,
   scaledDecimals?: DecimalCount,
-  isUtc?: boolean // TODO: timezone?: string,
+  timeZone?: TimeZone
 ) => FormattedValue;
 
 export interface ValueFormat {

packages/grafana-ui/src/components/TimePicker/TimePickerContent/mapper.ts

@@ -26,8 +26,8 @@ export const mapOptionToTimeRange = (option: TimeOption, timeZone?: TimeZone): T
 export const mapRangeToTimeOption = (range: TimeRange, timeZone?: TimeZone): TimeOption => {
   const formattedFrom = stringToDateTime(range.from, false, timeZone).format(TIME_FORMAT);
   const formattedTo = stringToDateTime(range.to, true, timeZone).format(TIME_FORMAT);
-  const from = dateTimeToString(range.from, timeZone === 'utc');
-  const to = dateTimeToString(range.to, timeZone === 'utc');
+  const from = dateTimeToString(range.from, timeZone);
+  const to = dateTimeToString(range.to, timeZone);
 
   return {
     from,
@@ -82,11 +82,12 @@ const stringToDateTime = (value: string | DateTime, roundUp?: boolean, timeZone?
   return dateTimeForTimeZone(timeZone, value, TIME_FORMAT);
 };
 
-const dateTimeToString = (value: DateTime, isUtc: boolean): string => {
+const dateTimeToString = (value: DateTime, timeZone?: TimeZone): string => {
   if (!isDateTime(value)) {
     return value;
   }
 
+  const isUtc = timeZone === 'utc';
   if (isUtc) {
     return value.utc().format(TIME_FORMAT);
   }

public/app/core/logs_model.ts

@@ -151,7 +151,7 @@ export function makeSeriesForLogs(rows: LogRowModel[], intervalMs: number, timeZ
     const timeField = data.fields[1];
     timeField.display = getDisplayProcessor({
       field: timeField,
-      isUtc: timeZone === 'utc',
+      timeZone,
     });
 
     const valueField = data.fields[0];

public/app/core/utils/kbn.ts

@@ -312,7 +312,7 @@ if (typeof Proxy !== 'undefined') {
       if (formatter) {
         // Return the results as a simple string
         return (value: number, decimals?: DecimalCount, scaledDecimals?: DecimalCount, isUtc?: boolean) => {
-          return formattedValueToString(formatter(value, decimals, scaledDecimals, isUtc));
+          return formattedValueToString(formatter(value, decimals, scaledDecimals, isUtc ? 'utc' : 'browser'));
         };
       }
 

public/app/features/panel/panel_ctrl.ts

@@ -18,11 +18,12 @@ import { TemplateSrv } from '../templating/template_srv';
 import { getPanelLinksSupplier } from './panellinks/linkSuppliers';
 import { AppEvent, PanelEvents, PanelPluginMeta, renderMarkdown } from '@grafana/data';
 import { getLocationSrv } from '@grafana/runtime';
+import { DashboardModel } from '../dashboard/state';
 
 export class PanelCtrl {
   panel: any;
   error: any;
-  dashboard: any;
+  dashboard: DashboardModel;
   pluginName: string;
   pluginId: string;
   editorTabs: any;

public/app/plugins/panel/graph2/getGraphSeriesModel.ts

@@ -110,7 +110,7 @@ export const getGraphSeriesModel = (
         const useMsDateFormat = hasMsResolution(timeField);
 
         timeField.display = getDisplayProcessor({
-          isUtc: timeZone === 'utc',
+          timeZone,
           field: {
             ...timeField,
             type: timeField.type,

public/app/plugins/panel/singlestat/module.ts

@@ -254,7 +254,7 @@ class SingleStatCtrl extends MetricsPanelCtrl {
         },
       },
       theme: config.theme,
-      isUtc: dashboard.isTimezoneUtc && dashboard.isTimezoneUtc(),
+      timeZone: dashboard.getTimezone(),
     });
 
     const sparkline: any[] = [];

public/app/plugins/panel/singlestat/specs/singlestat.test.ts

@@ -2,6 +2,7 @@ import { SingleStatCtrl, ShowData } from '../module';
 import { dateTime, ReducerID } from '@grafana/data';
 import { LinkSrv } from 'app/features/panel/panellinks/link_srv';
 import { LegacyResponseData } from '@grafana/data';
+import { DashboardModel } from 'app/features/dashboard/state';
 
 interface TestContext {
   ctrl: SingleStatCtrl;
@@ -31,9 +32,9 @@ describe('SingleStatCtrl', () => {
       emit: () => {},
     },
   };
-  SingleStatCtrl.prototype.dashboard = {
-    isTimezoneUtc: jest.fn(() => true),
-  };
+  SingleStatCtrl.prototype.dashboard = ({
+    getTimezone: jest.fn(() => 'utc'),
+  } as any) as DashboardModel;
   SingleStatCtrl.prototype.events = {
     on: () => {},
   };
@@ -112,7 +113,7 @@ describe('SingleStatCtrl', () => {
       ];
       ctx.ctrl.panel.valueName = 'last_time';
       ctx.ctrl.panel.format = 'dateTimeAsIso';
-      ctx.ctrl.dashboard.isTimezoneUtc = () => false;
+      ctx.ctrl.dashboard.getTimezone = () => 'browser';
     });
 
     it('Should use time instead of value', () => {
@@ -137,7 +138,7 @@ describe('SingleStatCtrl', () => {
       ];
       ctx.ctrl.panel.valueName = 'last_time';
       ctx.ctrl.panel.format = 'dateTimeAsIso';
-      ctx.ctrl.dashboard.isTimezoneUtc = () => true;
+      ctx.ctrl.dashboard.getTimezone = () => 'utc';
     });
 
     it('should set value', () => {
@@ -158,7 +159,7 @@ describe('SingleStatCtrl', () => {
       ];
       ctx.ctrl.panel.valueName = 'last_time';
       ctx.ctrl.panel.format = 'dateTimeAsUS';
-      ctx.ctrl.dashboard.isTimezoneUtc = () => false;
+      ctx.ctrl.dashboard.getTimezone = () => 'browser';
     });
 
     it('Should use time instead of value', () => {
@@ -183,7 +184,7 @@ describe('SingleStatCtrl', () => {
       ];
       ctx.ctrl.panel.valueName = 'last_time';
       ctx.ctrl.panel.format = 'dateTimeAsUS';
-      ctx.ctrl.dashboard.isTimezoneUtc = () => true;
+      ctx.ctrl.dashboard.getTimezone = () => 'utc';
     });
 
     it('should set formatted value', () => {

public/test/specs/helpers.ts

@@ -54,6 +54,9 @@ export function ControllerTestContext(this: any) {
       self.panel = new PanelModel({ type: 'test' });
       self.dashboard = { meta: {} };
       self.isUtc = false;
+      self.dashboard.getTimezone = () => {
+        return self.isUtc ? 'utc' : 'browser';
+      };
       self.dashboard.isTimezoneUtc = () => {
         return self.isUtc;
       };