DateFormats: Default ISO & US formats should be consistent and not change if current date is today (#27300)

* DateFormats: Default iso / US formats should be consistent and not change if current date is today

* rename and updated tests

* Updated changelog

CHANGELOG.md

@@ -1,3 +1,11 @@
+# 7.2.0-beta1 (unreleased)
+
+### Breaking changes
+
+* **Units**: The date time units `YYYY-MM-DD HH:mm:ss` and `MM/DD/YYYY h:mm:ss a` have been renamed to `Datetime ISO`
+ and `Datetime US` respectively. This is no breaking change just a visual name change (the unit id is unchanged). The
+ unit behavior is different however, it no longer hides the date part if the date is today. If you want this old
+ behavior you need to change unit to `Datetime ISO (No date if today)` or  `Datetime US (No date if today)`.
 
 # 7.1.5 (2020-08-25)
 
@@ -207,7 +215,7 @@
 * **Variables**: Fixes maximum call stack bug for empty value. [#25503](https://github.com/grafana/grafana/pull/25503), [@hugohaggmark](https://github.com/hugohaggmark)
 
 ### Security fixes
-* **Graph**: Fix XSS vulnerability with series overrides [#25401](https://github.com/grafana/grafana/pull/25401). Thanks to Rotem Reiss for reporting this. 
+* **Graph**: Fix XSS vulnerability with series overrides [#25401](https://github.com/grafana/grafana/pull/25401). Thanks to Rotem Reiss for reporting this.
 
 # 7.0.5 (2020-06-30)
 

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

@@ -22,7 +22,9 @@ interface DisplayProcessorOptions {
 // Reasonable units for time
 const timeFormats: KeyValue<boolean> = {
   dateTimeAsIso: true,
+  dateTimeAsIsoSmart: true,
   dateTimeAsUS: true,
+  dateTimeAsUSSmart: true,
   dateTimeFromNow: true,
 };
 

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

@@ -1,7 +1,9 @@
 import { locale, scaledUnits, simpleCountUnit, toFixedUnit, ValueFormatCategory, stringFormater } from './valueFormats';
 import {
   dateTimeAsIso,
+  dateTimeAsIsoNoDateIfToday,
   dateTimeAsUS,
+  dateTimeAsUSNoDateIfToday,
   dateTimeFromNow,
   toClockMilliseconds,
   toClockSeconds,
@@ -137,7 +139,7 @@ export const getCategories = (): ValueFormatCategory[] => [
     ],
   },
   {
-    name: 'Data (Metric)',
+    name: 'Data (metric)',
     formats: [
       { name: 'bits(Metric)', id: 'decbits', fn: decimalSIPrefix('b') },
       { name: 'bytes(Metric)', id: 'decbytes', fn: decimalSIPrefix('B') },
@@ -149,7 +151,7 @@ export const getCategories = (): ValueFormatCategory[] => [
     ],
   },
   {
-    name: 'Data Rate',
+    name: 'Data rate',
     formats: [
       { name: 'packets/sec', id: 'pps', fn: decimalSIPrefix('pps') },
       { name: 'bits/sec', id: 'bps', fn: decimalSIPrefix('bps') },
@@ -167,10 +169,12 @@ export const getCategories = (): ValueFormatCategory[] => [
     ],
   },
   {
-    name: 'Date & Time',
+    name: 'Date & time',
     formats: [
-      { name: 'YYYY-MM-DD HH:mm:ss', id: 'dateTimeAsIso', fn: dateTimeAsIso },
-      { name: 'MM/DD/YYYY h:mm:ss a', id: 'dateTimeAsUS', fn: dateTimeAsUS },
+      { name: 'Datetime ISO', id: 'dateTimeAsIso', fn: dateTimeAsIso },
+      { name: 'Datetime ISO (No date if today)', id: 'dateTimeAsIsoNoDateIfToday', fn: dateTimeAsIsoNoDateIfToday },
+      { name: 'Datetime US', id: 'dateTimeAsUS', fn: dateTimeAsUS },
+      { name: 'Datetime US (No date if today)', id: 'dateTimeAsUSNoDateIfToday', fn: dateTimeAsUSNoDateIfToday },
       { name: 'From Now', id: 'dateTimeFromNow', fn: dateTimeFromNow },
     ],
   },
@@ -240,7 +244,7 @@ export const getCategories = (): ValueFormatCategory[] => [
     ],
   },
   {
-    name: 'Hash Rate',
+    name: 'Hash rate',
     formats: [
       { name: 'hashes/sec', id: 'Hs', fn: decimalSIPrefix('H/s') },
       { name: 'kilohashes/sec', id: 'KHs', fn: decimalSIPrefix('H/s', 1) },

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

@@ -1,6 +1,8 @@
 import {
   dateTimeAsIso,
+  dateTimeAsIsoNoDateIfToday,
   dateTimeAsUS,
+  dateTimeAsUSNoDateIfToday,
   dateTimeFromNow,
   Interval,
   toClock,
@@ -34,14 +36,14 @@ describe('date time formats', () => {
   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);
+    const actual = dateTimeAsIsoNoDateIfToday(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, 'utc');
+    const actual = dateTimeAsIsoNoDateIfToday(now.valueOf(), 0, 0, 'utc');
     expect(actual.text).toBe(expected);
   });
 
@@ -60,14 +62,14 @@ describe('date time formats', () => {
   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);
+    const actual = dateTimeAsUSNoDateIfToday(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, 'utc');
+    const actual = dateTimeAsUSNoDateIfToday(now.valueOf(), 0, 0, 'utc');
     expect(actual.text).toBe(expected);
   });
 

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

@@ -360,8 +360,10 @@ export function toDateTimeValueFormatter(pattern: string, todayPattern?: string)
   };
 }
 
-export const dateTimeAsIso = toDateTimeValueFormatter('YYYY-MM-DD HH:mm:ss', 'HH:mm:ss');
-export const dateTimeAsUS = toDateTimeValueFormatter('MM/DD/YYYY h:mm:ss a', 'h:mm:ss a');
+export const dateTimeAsIso = toDateTimeValueFormatter('YYYY-MM-DD HH:mm:ss');
+export const dateTimeAsIsoNoDateIfToday = toDateTimeValueFormatter('YYYY-MM-DD HH:mm:ss', 'HH:mm:ss');
+export const dateTimeAsUS = toDateTimeValueFormatter('MM/DD/YYYY h:mm:ss a');
+export const dateTimeAsUSNoDateIfToday = toDateTimeValueFormatter('MM/DD/YYYY h:mm:ss a', 'h:mm:ss a');
 
 export function dateTimeFromNow(
   value: number,