From e1acc772979e4dd8db4fbaeda58b842991c00f99 Mon Sep 17 00:00:00 2001 From: Ryan McKinley Date: Thu, 2 Jan 2020 08:11:28 -0800 Subject: [PATCH] @grafana/data: use timeZone parameter rather than isUtc (#21276) --- .../src/field/displayProcessor.test.ts | 6 ++--- .../src/field/displayProcessor.ts | 6 ++--- .../valueFormats/dateTimeFormatters.test.ts | 24 +++++++++---------- .../src/valueFormats/dateTimeFormatters.ts | 7 ++++-- .../src/valueFormats/valueFormats.ts | 3 ++- .../TimePicker/TimePickerContent/mapper.ts | 7 +++--- public/app/core/logs_model.ts | 2 +- public/app/core/utils/kbn.ts | 2 +- public/app/features/panel/panel_ctrl.ts | 3 ++- .../panel/graph2/getGraphSeriesModel.ts | 2 +- public/app/plugins/panel/singlestat/module.ts | 2 +- .../panel/singlestat/specs/singlestat.test.ts | 15 ++++++------ public/test/specs/helpers.ts | 3 +++ 13 files changed, 46 insertions(+), 36 deletions(-) diff --git a/packages/grafana-data/src/field/displayProcessor.test.ts b/packages/grafana-data/src/field/displayProcessor.test.ts index f5ed8d8e151..1b4fbaffe79 100644 --- 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: { diff --git a/packages/grafana-data/src/field/displayProcessor.ts b/packages/grafana-data/src/field/displayProcessor.ts index 001ce558878..14a7a0ac1cd 100644 --- 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; // 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; diff --git a/packages/grafana-data/src/valueFormats/dateTimeFormatters.test.ts b/packages/grafana-data/src/valueFormats/dateTimeFormatters.test.ts index eaab9a5e4d3..62e79953d71 100644 --- 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); }); }); diff --git a/packages/grafana-data/src/valueFormats/dateTimeFormatters.ts b/packages/grafana-data/src/valueFormats/dateTimeFormatters.ts index c168b344386..361a506449f 100644 --- 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() }; } diff --git a/packages/grafana-data/src/valueFormats/valueFormats.ts b/packages/grafana-data/src/valueFormats/valueFormats.ts index 179542cfed2..020de440f24 100644 --- 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 { diff --git a/packages/grafana-ui/src/components/TimePicker/TimePickerContent/mapper.ts b/packages/grafana-ui/src/components/TimePicker/TimePickerContent/mapper.ts index 6a3fbc13ddd..892633a177c 100644 --- 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 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); } diff --git a/public/app/core/logs_model.ts b/public/app/core/logs_model.ts index 5115118ced3..5023cb05b1a 100644 --- 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]; diff --git a/public/app/core/utils/kbn.ts b/public/app/core/utils/kbn.ts index 1b1a284ebf0..77bc252f6f6 100644 --- 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')); }; } diff --git a/public/app/features/panel/panel_ctrl.ts b/public/app/features/panel/panel_ctrl.ts index ce9813fae99..067cb458926 100644 --- 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; diff --git a/public/app/plugins/panel/graph2/getGraphSeriesModel.ts b/public/app/plugins/panel/graph2/getGraphSeriesModel.ts index cc2fc3eb893..98cc37b478f 100644 --- 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, diff --git a/public/app/plugins/panel/singlestat/module.ts b/public/app/plugins/panel/singlestat/module.ts index a0da13c2a18..6295f18baa6 100644 --- 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[] = []; diff --git a/public/app/plugins/panel/singlestat/specs/singlestat.test.ts b/public/app/plugins/panel/singlestat/specs/singlestat.test.ts index 4aba951be9f..3b39a912c3b 100644 --- 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 = { - 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', () => { diff --git a/public/test/specs/helpers.ts b/public/test/specs/helpers.ts index 7ace54a6aec..628d00692af 100644 --- 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; };