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

e1acc772 · Ryan McKinley · GitHub · c1b70787 · e1acc772 · e1acc772
Commit e1acc772 authored Jan 02, 2020 by Ryan McKinley Committed by GitHub Jan 02, 2020
13 changed files
--- a/packages/grafana-data/src/field/displayProcessor.test.ts
+++ b/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: {

--- a/packages/grafana-data/src/field/displayProcessor.ts
+++ b/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;

--- a/packages/grafana-data/src/valueFormats/dateTimeFormatters.test.ts
+++ b/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);
  });
 });

--- a/packages/grafana-data/src/valueFormats/dateTimeFormatters.ts
+++ b/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() };
 }
--- a/packages/grafana-data/src/valueFormats/valueFormats.ts
+++ b/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 {

--- a/packages/grafana-ui/src/components/TimePicker/TimePickerContent/mapper.ts
+++ b/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 from = dateTimeToString(range.from, timeZone);
-  const to = dateTimeToString(range.to, timeZone === 'utc');
+  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);
  }

--- a/public/app/core/logs_model.ts
+++ b/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];

--- a/public/app/core/utils/kbn.ts
+++ b/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'));
        };
      }

--- a/public/app/features/panel/panel_ctrl.ts
+++ b/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;

--- a/public/app/plugins/panel/graph2/getGraphSeriesModel.ts
+++ b/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,

--- a/public/app/plugins/panel/singlestat/module.ts
+++ b/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[] = [];

--- a/public/app/plugins/panel/singlestat/specs/singlestat.test.ts
+++ b/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 = {
+  SingleStatCtrl.prototype.dashboard = ({
-    isTimezoneUtc: jest.fn(() => true),
+    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', () => {

--- a/public/test/specs/helpers.ts
+++ b/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;
      };