From 7e99d6dc46f9c71406a9facc5a910f5e8515160e Mon Sep 17 00:00:00 2001
From: Joao Silva <100691367+JoaoSilvaGrafana@users.noreply.github.com>
Date: Thu, 26 May 2022 14:31:46 +0100
Subject: [PATCH] TimeRange: Fixes issue when zooming out on a timerange with
 timespan 0 (#49622) (#49695)

---
 public/app/core/utils/timePicker.test.ts | 20 ++++++++++++++++++++
 public/app/core/utils/timePicker.ts      |  6 ++++--
 2 files changed, 24 insertions(+), 2 deletions(-)

diff --git a/public/app/core/utils/timePicker.test.ts b/public/app/core/utils/timePicker.test.ts
index aeca99657ec..3fe23e6e841 100644
--- a/public/app/core/utils/timePicker.test.ts
+++ b/public/app/core/utils/timePicker.test.ts
@@ -73,6 +73,26 @@ describe('getZoomedTimeRange', () => {
 
       const result = getZoomedTimeRange(range, 2);
 
+      expect(result).toEqual(expectedRange);
+    });
+  });
+  describe('when called with a timespan of 0', () => {
+    it('then it should return a timespan of 30s', () => {
+      const range = {
+        from: toUtc('2019-01-01 10:00:00'),
+        to: toUtc('2019-01-01 10:00:00'),
+        raw: {
+          from: 'now',
+          to: 'now',
+        },
+      };
+      const expectedRange: AbsoluteTimeRange = {
+        from: toUtc('2019-01-01 09:59:45').valueOf(),
+        to: toUtc('2019-01-01 10:00:15').valueOf(),
+      };
+
+      const result = getZoomedTimeRange(range, 2);
+
       expect(result).toEqual(expectedRange);
     });
   });
diff --git a/public/app/core/utils/timePicker.ts b/public/app/core/utils/timePicker.ts
index 7b6c01c59c7..08dd76c2531 100644
--- a/public/app/core/utils/timePicker.ts
+++ b/public/app/core/utils/timePicker.ts
@@ -30,9 +30,11 @@ export const getShiftedTimeRange = (direction: number, origRange: TimeRange): Ab
 export const getZoomedTimeRange = (range: TimeRange, factor: number): AbsoluteTimeRange => {
   const timespan = range.to.valueOf() - range.from.valueOf();
   const center = range.to.valueOf() - timespan / 2;
+  // If the timepsan is 0, zooming out would do nothing, so we force a zoom out to 30s
+  const newTimespan = timespan === 0 ? 30000 : timespan * factor;
 
-  const to = center + (timespan * factor) / 2;
-  const from = center - (timespan * factor) / 2;
+  const to = center + newTimespan / 2;
+  const from = center - newTimespan / 2;
 
   return { from, to };
 };