TimePicker: fixed so you can enter a relative range in the time picker without being converted to absolute range (#24534)

* fixed so you can enter a relative date in the time range form.

* did some small adjustments to make sure proper value is stored.

packages/grafana-data/src/datetime/rangeutil.ts

@@ -63,10 +63,33 @@ const rangeOptions = [
   { from: 'now-5y', to: 'now', display: 'Last 5 years', section: 0 },
 ];
 
+const hiddenRangeOptions = [
+  { from: 'now', to: 'now+1m', display: 'Next minute', section: 3 },
+  { from: 'now', to: 'now+5m', display: 'Next 5 minutes', section: 3 },
+  { from: 'now', to: 'now+15m', display: 'Next 15 minutes', section: 3 },
+  { from: 'now', to: 'now+30m', display: 'Next 30 minutes', section: 3 },
+  { from: 'now', to: 'now+1h', display: 'Next hour', section: 3 },
+  { from: 'now', to: 'now+3h', display: 'Next 3 hours', section: 3 },
+  { from: 'now', to: 'now+6h', display: 'Next 6 hours', section: 3 },
+  { from: 'now', to: 'now+12h', display: 'Next 12 hours', section: 3 },
+  { from: 'now', to: 'now+24h', display: 'Next 24 hours', section: 3 },
+  { from: 'now', to: 'now+2d', display: 'Next 2 days', section: 0 },
+  { from: 'now', to: 'now+7d', display: 'Next 7 days', section: 0 },
+  { from: 'now', to: 'now+30d', display: 'Next 30 days', section: 0 },
+  { from: 'now', to: 'now+90d', display: 'Next 90 days', section: 0 },
+  { from: 'now', to: 'now+6M', display: 'Next 6 months', section: 0 },
+  { from: 'now', to: 'now+1y', display: 'Next year', section: 0 },
+  { from: 'now', to: 'now+2y', display: 'Next 2 years', section: 0 },
+  { from: 'now', to: 'now+5y', display: 'Next 5 years', section: 0 },
+];
+
 const rangeIndex: any = {};
 each(rangeOptions, (frame: any) => {
   rangeIndex[frame.from + ' to ' + frame.to] = frame;
 });
+each(hiddenRangeOptions, (frame: any) => {
+  rangeIndex[frame.from + ' to ' + frame.to] = frame;
+});
 
 export function getRelativeTimesList(timepickerSettings: any, currentDisplay: any) {
   const groups = groupBy(rangeOptions, (option: any) => {
@@ -188,8 +211,13 @@ export const describeTimeRangeAbbrevation = (range: TimeRange, timeZone?: TimeZo
   return parsed ? timeZoneAbbrevation(parsed, { timeZone }) : '';
 };
 
-export const convertRawToRange = (raw: RawTimeRange): TimeRange => {
+export const convertRawToRange = (raw: RawTimeRange, timeZone?: TimeZone): TimeRange => {
-  const from = dateTimeParse(raw.from, { roundUp: false });
+  const from = dateTimeParse(raw.from, { roundUp: false, timeZone });
-  const to = dateTimeParse(raw.to, { roundUp: true });
+  const to = dateTimeParse(raw.to, { roundUp: true, timeZone });
-  return { from, to, raw };
+
+  if (dateMath.isMathString(raw.from) || dateMath.isMathString(raw.to)) {
+    return { from, to, raw };
+  }
+
+  return { from, to, raw: { from, to } };
 };

packages/grafana-ui/src/components/TimePicker/TimePickerContent/TimeRangeForm.tsx

@@ -8,6 +8,7 @@ import {
   dateTimeFormat,
   dateTimeParse,
   rangeUtil,
+  RawTimeRange,
 } from '@grafana/data';
 import { TimePickerCalendar } from './TimePickerCalendar';
 import { Field } from '../../Forms/Field';
@@ -59,10 +60,8 @@ export const TimeRangeForm: React.FC<Props> = props => {
       return;
     }
 
-    const timeRange = rangeUtil.convertRawToRange({
+    const raw: RawTimeRange = { from: from.value, to: to.value };
-      from: dateTimeParse(from.value, { timeZone }),
+    const timeRange = rangeUtil.convertRawToRange(raw, timeZone);
-      to: dateTimeParse(to.value, { timeZone }),
-    });
 
     props.onApply(timeRange);
   }, [from, to, roundup, timeZone]);

packages/grafana-ui/src/components/TimePicker/TimePickerContent/TimeRangeList.tsx

@@ -69,7 +69,7 @@ const Options: React.FC<Props> = ({ options, value, onSelect, timeZone }) => {
             key={keyForOption(option, index)}
             value={option}
             selected={isEqual(option, value)}
-            onSelect={option => onSelect(mapOptionToTimeRange(option))}
+            onSelect={option => onSelect(mapOptionToTimeRange(option, timeZone))}
           />
         ))}
       </div>

packages/grafana-ui/src/components/TimePicker/TimePickerContent/mapper.ts

@@ -1,7 +1,7 @@
 import { TimeOption, TimeRange, TimeZone, rangeUtil, dateTimeFormat, dateTimeFormatISO } from '@grafana/data';
 
-export const mapOptionToTimeRange = (option: TimeOption): TimeRange => {
+export const mapOptionToTimeRange = (option: TimeOption, timeZone?: TimeZone): TimeRange => {
-  return rangeUtil.convertRawToRange({ from: option.from, to: option.to });
+  return rangeUtil.convertRawToRange({ from: option.from, to: option.to }, timeZone);
 };
 
 export const mapRangeToTimeOption = (range: TimeRange, timeZone?: TimeZone): TimeOption => {