@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);
   }