Chore: parse parseDuration values as numbers (#42826)

* Chore: parseDuration values as numbers

* Clean up RefreshPicker labels

packages/grafana-data/src/datetime/durationutil.test.ts

@@ -18,12 +18,12 @@ describe('Duration util', () => {
   describe('parseDuration', () => {
     it('parses a duration string', () => {
       const durationString = '3M 5d 20m';
-      expect(parseDuration(durationString)).toEqual({ months: '3', days: '5', minutes: '20' });
+      expect(parseDuration(durationString)).toEqual({ months: 3, days: 5, minutes: 20 });
     });
 
     it('strips out non valid durations', () => {
       const durationString = '3M 6v 5b 4m';
-      expect(parseDuration(durationString)).toEqual({ months: '3', minutes: '4' });
+      expect(parseDuration(durationString)).toEqual({ months: 3, minutes: 4 });
     });
   });
 

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

@@ -35,19 +35,25 @@ export function intervalToAbbreviatedDurationString(interval: Interval, includeS
 /**
  * parseDuration parses duration string into datefns Duration object
  *
- * @param duration - string to convert. For example '2m', '5h 20s'
+ * @param durationString - string to convert. For example '2m', '5h 20s'
  *
  * @public
  */
-export function parseDuration(duration: string): Duration {
+export function parseDuration(durationString: string): Duration {
-  return duration.split(' ').reduce<Duration>((acc, value) => {
+  return durationString.split(' ').reduce<Duration>((acc, value) => {
     const match = value.match(/(\d+)(.+)/);
-    if (match === null || match.length !== 3) {
+
+    const rawLength = match?.[1];
+    const unit = match?.[2];
+
+    if (!(rawLength && unit)) {
       return acc;
     }
 
-    const key = Object.entries(durationMap).find(([_, abbreviations]) => abbreviations?.includes(match[2]))?.[0];
+    const mapping = Object.entries(durationMap).find(([_, abbreviations]) => abbreviations?.includes(match[2]));
-    return !key ? acc : { ...acc, [key]: match[1] };
+    const length = parseInt(rawLength, 10);
+
+    return mapping ? { ...acc, [mapping[0]]: length } : acc;
   }, {});
 }
 

packages/grafana-ui/src/components/RefreshPicker/RefreshPicker.test.tsx

@@ -35,5 +35,16 @@ describe('RefreshPicker', () => {
         ]);
       });
     });
+
+    it('should format durations with multiple units', () => {
+      const intervals = ['10s', '1m 30s'];
+
+      const result = intervalsToOptions({ intervals });
+      expect(result).toEqual([
+        { value: '', label: 'Off', ariaLabel: 'Turn off auto refresh' },
+        { value: '10s', label: '10s', ariaLabel: '10 seconds' },
+        { value: '1m 30s', label: '1m 30s', ariaLabel: '1 minute 30 seconds' },
+      ]);
+    });
   });
 });

packages/grafana-ui/src/components/RefreshPicker/RefreshPicker.tsx

@@ -102,12 +102,7 @@ export function intervalsToOptions({ intervals = defaultIntervals }: { intervals
 > {
   const intervalsOrDefault = intervals || defaultIntervals;
   const options = intervalsOrDefault.map((interval) => {
-    const duration: { [key: string]: string | number } = parseDuration(interval);
+    const duration = parseDuration(interval);
-
-    const key = Object.keys(duration)[0];
-    const value = duration[key];
-    duration[key] = Number(value);
-
     const ariaLabel = formatDuration(duration);
 
     return {