fix: make ui convert range static dates to rfc3339

Author: zumoshi

ui/src/dashboard/Entry/AddPopup.tsx

@@ -10,6 +10,7 @@ import * as gqlDashboard from '../../gql/dashboard';
 import {Fade} from '../../common/Fade';
 import {DashboardEntryForm, isValidDashboardEntry} from './DashboardEntryForm';
 import {AddDashboardEntry, AddDashboardEntryVariables} from '../../gql/__generated__/AddDashboardEntry';
+import {normalizeRangeDateFormat} from '../../utils/range';
 
 interface EditPopupProps {
     dashboardId: number;
@@ -83,10 +84,10 @@ export const AddPopup: React.FC<EditPopupProps> = ({
                                                 tags: entry.statsSelection.tags,
                                                 interval: entry.statsSelection.interval,
                                                 range: entry.statsSelection.range
-                                                    ? {
+                                                    ? normalizeRangeDateFormat({
                                                           from: entry.statsSelection.range.from,
                                                           to: entry.statsSelection.range.to,
-                                                      }
+                                                      })
                                                     : null,
                                                 rangeId: entry.statsSelection.rangeId,
                                             },

ui/src/dashboard/Entry/DashboardEntry.tsx

@@ -14,7 +14,7 @@ import {DashboardBarChart} from './DashboardBarChart';
 import {DashboardLineChart} from './DashboardLineChart';
 import {CenteredSpinner} from '../../common/CenteredSpinner';
 import {Center} from '../../common/Center';
-import {findRange, Range} from '../../utils/range';
+import {findRange, normalizeRangeDateFormat, Range} from '../../utils/range';
 import {DashboardTable} from './DashboardTable';
 
 interface DashboardEntryProps {
@@ -43,13 +43,14 @@ export const DashboardEntry: React.FC<DashboardEntryProps> = React.forwardRef<{}
 // tslint:disable-next-line:cyclomatic-complexity mccabe-complexity
 const SpecificDashboardEntry: React.FC<{entry: Dashboards_dashboards_items; range: Range}> = ({entry, range}) => {
     const interval = entry.statsSelection.interval;
+    const normalizedRange = normalizeRangeDateFormat(range);
     const stats = useQuery<Stats2, Stats2Variables>(gqlStats.Stats2, {
         variables: {
             now: moment()
                 .startOf('hour')
                 .format(),
             stats: {
-                range,
+                range: normalizedRange,
                 interval,
                 tags: entry.statsSelection.tags,
             },

ui/src/dashboard/Entry/EditPopup.tsx

@@ -10,6 +10,7 @@ import * as gqlDashboard from '../../gql/dashboard';
 import {UpdateDashboardEntry, UpdateDashboardEntryVariables} from '../../gql/__generated__/UpdateDashboardEntry';
 import {Fade} from '../../common/Fade';
 import {DashboardEntryForm, isValidDashboardEntry} from './DashboardEntryForm';
+import {normalizeRangeDateFormat} from '../../utils/range';
 
 interface EditPopupProps {
     entry: Dashboards_dashboards_items;
@@ -69,10 +70,10 @@ export const EditPopup: React.FC<EditPopupProps> = ({entry, anchorEl, onChange:
                                                 tags: entry.statsSelection.tags,
                                                 interval: entry.statsSelection.interval,
                                                 range: entry.statsSelection.range
-                                                    ? {
+                                                    ? normalizeRangeDateFormat({
                                                           from: entry.statsSelection.range.from,
                                                           to: entry.statsSelection.range.to,
-                                                      }
+                                                      })
                                                     : null,
                                                 rangeId: entry.statsSelection.rangeId,
                                             },

ui/src/utils/range.test.ts

@@ -0,0 +1,26 @@
+import {normalizeDate} from './range';
+import moment from 'moment';
+
+moment.updateLocale('en', {
+    week: {
+        dow: 1, // monday
+        doy: moment.localeData('en').firstDayOfYear(),
+    },
+});
+moment.tz.setDefault('UTC');
+
+it('should convert to RFC3339', () => {
+    expect(normalizeDate('2025-01-01 10:10')).toBe('2025-01-01T10:10:00Z');
+});
+
+it('should not modify relative ranges', () => {
+    expect(normalizeDate('now-1d')).toBe('now-1d');
+    expect(normalizeDate('now-120s')).toBe('now-120s');
+    expect(normalizeDate('now-1d-1h')).toBe('now-1d-1h');
+    expect(normalizeDate('now/w')).toBe('now/w');
+    expect(normalizeDate('now/w')).toBe('now/w');
+    expect(normalizeDate('now-1w/w')).toBe('now-1w/w');
+    expect(normalizeDate('now-1y+1w/w')).toBe('now-1y+1w/w');
+    expect(normalizeDate('now/d+5h')).toBe('now/d+5h');
+    expect(normalizeDate('now/y')).toBe('now/y');
+});

ui/src/utils/range.ts

@@ -1,3 +1,5 @@
+import moment from 'moment-timezone';
+
 export interface Range {
     from: string;
     to: string;
@@ -14,3 +16,16 @@ export const findRange = (selection: {range: Range | null; rangeId: number | nul
 };
 
 export const exclusiveRange = (range: Range) => ({from: range.from, to: range.to});
+
+export function normalizeDate(date: string): string {
+    const d = moment(date);
+    if (d.isValid()) {
+        return d.utc().format();
+    } else {
+        return date;
+    }
+}
+
+export function normalizeRangeDateFormat(range: Range): Range {
+    return {from: normalizeDate(range.from), to: normalizeDate(range.to)};
+}