From 349f3c60188b92922397bd427d68a6b2399ccaee Mon Sep 17 00:00:00 2001
From: Pavel Zavora <pavel.zavora@bonitoo.io>
Date: Thu, 23 Sep 2021 14:48:25 +0200
Subject: [PATCH] fix(ui): prefer zoomed time range in flux dashboard cell

---
 ui/src/flux/helpers/templates.ts              | 32 +++++++++++++++++--
 .../components/time_series/TimeSeries.tsx     |  7 ++--
 2 files changed, 35 insertions(+), 4 deletions(-)

diff --git a/ui/src/flux/helpers/templates.ts b/ui/src/flux/helpers/templates.ts
index 6d1db4322..9947d6ab9 100644
--- a/ui/src/flux/helpers/templates.ts
+++ b/ui/src/flux/helpers/templates.ts
@@ -1,6 +1,10 @@
-import {Template, TimeRange} from 'src/types'
+import {Template, TemplateValueType, TimeRange} from 'src/types'
 import {computeInterval} from 'src/tempVars/utils/replace'
-import {DEFAULT_DURATION_MS} from 'src/shared/constants'
+import {
+  DEFAULT_DURATION_MS,
+  TEMP_VAR_DASHBOARD_TIME,
+  TEMP_VAR_UPPER_DASHBOARD_TIME,
+} from 'src/shared/constants'
 import {extractImports} from 'src/shared/parsing/flux/extractImports'
 import {getMinDuration} from 'src/shared/parsing/flux/durations'
 import fluxString from './fluxString'
@@ -61,6 +65,30 @@ function fluxVariables(
   return `dashboardTime = ${lower}\nupperDashboardTime = ${upper}\nv = {${extraVars} timeRangeStart: dashboardTime , timeRangeStop: upperDashboardTime }`
 }
 
+/**
+ * Extracts exact time range from `dashboardTime` and `upperDashboardTime` variables or returns undefined.
+ */
+export function extractExactTimeRange(
+  templates: Template[]
+): TimeRange | undefined {
+  const lower = templates.find(x => x.tempVar === TEMP_VAR_DASHBOARD_TIME)
+  const upper = templates.find(x => x.tempVar === TEMP_VAR_UPPER_DASHBOARD_TIME)
+  if (!lower || !upper) {
+    return undefined
+  }
+
+  if (
+    lower.values?.[0]?.type === TemplateValueType.TimeStamp &&
+    upper.values?.[0]?.type === TemplateValueType.TimeStamp
+  ) {
+    return {
+      lower: lower.values?.[0]?.value,
+      upper: upper.values?.[0]?.value,
+    }
+  }
+  return undefined
+}
+
 export const renderTemplatesInScript = async (
   script: string,
   timeRange: TimeRange,
diff --git a/ui/src/shared/components/time_series/TimeSeries.tsx b/ui/src/shared/components/time_series/TimeSeries.tsx
index 34316a968..8432cd5df 100644
--- a/ui/src/shared/components/time_series/TimeSeries.tsx
+++ b/ui/src/shared/components/time_series/TimeSeries.tsx
@@ -16,7 +16,10 @@ import {notify} from 'src/shared/actions/notifications'
 import {fluxResponseTruncatedError} from 'src/shared/copy/notifications'
 import {getDeep} from 'src/utils/wrappers'
 import {restartable} from 'src/shared/utils/restartable'
-import {renderTemplatesInScript} from 'src/flux/helpers/templates'
+import {
+  extractExactTimeRange,
+  renderTemplatesInScript,
+} from 'src/flux/helpers/templates'
 import {parseResponse} from 'src/shared/parsing/flux/response'
 import DefaultDebouncer, {Debouncer} from 'src/shared/utils/debouncer'
 import {DEFAULT_X_PIXELS} from 'src/shared/constants'
@@ -281,7 +284,7 @@ class TimeSeries extends PureComponent<Props, State> {
 
     const renderedScript = await renderTemplatesInScript(
       script,
-      timeRange,
+      extractExactTimeRange(templates) || timeRange, // zoom functionality updates templates, prefer zoomed time range in flux
       templates,
       fluxASTLink
     )