Fix ceo visualization not using ceo time range for query

CHANGELOG.md

@@ -1,5 +1,6 @@
 ## v1.7.10 [unreleased]
 ### Bug Fixes
+1. [#5149](https://github.com/influxdata/chronograf/pull/5149): Fix Cell editor visualization not using ceo time range
 
 ## v1.7.9 [2019-03-20]
 ### Bug Fixes

ui/src/dashboards/components/CellEditorOverlay.tsx

@@ -41,6 +41,7 @@ import {
 } from 'src/types/dashboards'
 import {Links, ScriptStatus} from 'src/types/flux'
 import {ColorString, ColorNumber} from 'src/types/colors'
+import {createTimeRangeTemplates} from 'src/shared/utils/templates'
 
 interface ConnectedProps {
   queryType: QueryType
@@ -61,6 +62,7 @@ interface ConnectedProps {
   gaugeColors: ColorNumber[]
   lineColors: ColorString[]
   onResetTimeMachine: TimeMachineContainer['reset']
+  ceoTimeRange: TimeRange
 }
 
 interface PassedProps {
@@ -73,7 +75,7 @@ interface PassedProps {
   source: SourcesModels.Source
   dashboardID: number
   queryStatus: QueriesModels.QueryStatus
-  templates: Template[]
+  dashboardTemplates: Template[]
   cell: Cell | NewDefaultCell
   dashboardTimeRange: TimeRange
 }
@@ -123,7 +125,6 @@ class CellEditorOverlay extends Component<Props, State> {
       notify,
       source,
       sources,
-      templates,
       queryStatus,
     } = this.props
 
@@ -142,7 +143,7 @@ class CellEditorOverlay extends Component<Props, State> {
           isInCEO={true}
           sources={sources}
           fluxLinks={fluxLinks}
-          templates={templates}
+          templates={this.ceoTemplates}
           editQueryStatus={editQueryStatus}
           onResetFocus={this.handleResetFocus}
           onToggleStaticLegend={this.handleToggleStaticLegend}
@@ -166,6 +167,16 @@ class CellEditorOverlay extends Component<Props, State> {
     )
   }
 
+  private get ceoTemplates() {
+    const {dashboardTemplates, ceoTimeRange} = this.props
+    const {dashboardTime, upperDashboardTime} = createTimeRangeTemplates(
+      ceoTimeRange
+    )
+    return [...dashboardTemplates, dashboardTime, upperDashboardTime]
+
+    return dashboardTemplates
+  }
+
   private get isSaveable(): boolean {
     const {queryDrafts, type} = this.props
 
@@ -343,6 +354,7 @@ const ConnectedCellEditorOverlay = (props: PassedProps) => {
             gaugeColors={state.gaugeColors}
             lineColors={state.lineColors}
             onResetTimeMachine={container.reset}
+            ceoTimeRange={state.timeRange}
           />
         )
       }}

ui/src/dashboards/containers/DashboardPage.tsx

@@ -39,12 +39,7 @@ import {annotationsError} from 'src/shared/copy/notifications'
 import {loadDashboardLinks} from 'src/dashboards/apis'
 
 // Constants
-import {
-  interval,
-  DASHBOARD_LAYOUT_ROW_HEIGHT,
-  TEMP_VAR_DASHBOARD_TIME,
-  TEMP_VAR_UPPER_DASHBOARD_TIME,
-} from 'src/shared/constants'
+import {interval, DASHBOARD_LAYOUT_ROW_HEIGHT} from 'src/shared/constants'
 import {FORMAT_INFLUXQL} from 'src/shared/data/timeRanges'
 import {EMPTY_LINKS} from 'src/dashboards/constants/dashboardHeader'
 import {getNewDashboardCell} from 'src/dashboards/utils/cellGetters'
@@ -64,6 +59,7 @@ import {NewDefaultCell} from 'src/types/dashboards'
 import {NotificationAction} from 'src/types'
 import {AnnotationsDisplaySetting} from 'src/types/annotations'
 import {Links} from 'src/types/flux'
+import {createTimeRangeTemplates} from 'src/shared/utils/templates'
 
 interface Props extends ManualRefreshProps, WithRouterProps {
   fluxLinks: Links
@@ -207,9 +203,7 @@ class DashboardPage extends Component<Props, State> {
       source,
       sources,
       timeRange,
-      timeRange: {lower, upper},
       zoomedTimeRange,
-      zoomedTimeRange: {lower: zoomedLower, upper: zoomedUpper},
       dashboard,
       dashboardID,
       autoRefresh,
@@ -223,38 +217,10 @@ class DashboardPage extends Component<Props, State> {
       toggleTemplateVariableControlBar,
     } = this.props
 
-    const low = zoomedLower || lower
-    const up = zoomedUpper || upper
-
-    const lowerType = low && low.includes(':') ? 'timeStamp' : 'constant'
-    const upperType = up && up.includes(':') ? 'timeStamp' : 'constant'
-    const dashboardTime = {
-      id: 'dashtime',
-      tempVar: TEMP_VAR_DASHBOARD_TIME,
-      type: lowerType,
-      values: [
-        {
-          value: low,
-          type: lowerType,
-          selected: true,
-          localSelected: true,
-        },
-      ],
-    }
-
-    const upperDashboardTime = {
-      id: 'upperdashtime',
-      tempVar: TEMP_VAR_UPPER_DASHBOARD_TIME,
-      type: upperType,
-      values: [
-        {
-          value: up || 'now()',
-          type: upperType,
-          selected: true,
-          localSelected: true,
-        },
-      ],
-    }
+    const {dashboardTime, upperDashboardTime} = createTimeRangeTemplates(
+      timeRange,
+      zoomedTimeRange
+    )
 
     let templatesIncludingDashTime
     if (dashboard) {
@@ -288,7 +254,7 @@ class DashboardPage extends Component<Props, State> {
             queryStatus={cellQueryStatus}
             onSave={this.handleSaveEditedCell}
             onCancel={this.handleHideCellEditorOverlay}
-            templates={templatesIncludingDashTime}
+            dashboardTemplates={_.get(dashboard, 'templates', [])}
             editQueryStatus={this.props.editCellQueryStatus}
             dashboardTimeRange={timeRange}
           />

ui/src/shared/utils/templates.ts

@@ -0,0 +1,65 @@
+import {TimeRange, Template, TemplateType, TemplateValueType} from 'src/types'
+
+// Constants
+import {
+  TEMP_VAR_DASHBOARD_TIME,
+  TEMP_VAR_UPPER_DASHBOARD_TIME,
+} from 'src/shared/constants'
+
+export const createTimeRangeTemplates = (
+  timeRange: TimeRange,
+  zoomedTimeRange: TimeRange = {lower: null}
+): {
+  dashboardTime: Template
+  upperDashboardTime: Template
+} => {
+  const {upper: zoomedUpper, lower: zoomedLower} = zoomedTimeRange
+  const {upper, lower} = timeRange
+  const low = zoomedLower || lower
+  const up = zoomedUpper || upper
+
+  const lowerTemplateType =
+    low && low.includes(':') ? TemplateType.TimeStamp : TemplateType.Constant
+  const upperTemplateType =
+    up && up.includes(':') ? TemplateType.TimeStamp : TemplateType.Constant
+  const lowerTemplateValueType =
+    low && low.includes(':')
+      ? TemplateValueType.TimeStamp
+      : TemplateValueType.Constant
+  const upperTemplateValueType =
+    up && up.includes(':')
+      ? TemplateValueType.TimeStamp
+      : TemplateValueType.Constant
+
+  const dashboardTime: Template = {
+    id: 'dashtime',
+    tempVar: TEMP_VAR_DASHBOARD_TIME,
+    type: lowerTemplateType,
+    label: '',
+    values: [
+      {
+        value: low,
+        type: lowerTemplateValueType,
+        selected: true,
+        localSelected: true,
+      },
+    ],
+  }
+
+  const upperDashboardTime: Template = {
+    id: 'upperdashtime',
+    tempVar: TEMP_VAR_UPPER_DASHBOARD_TIME,
+    type: upperTemplateType,
+    label: '',
+    values: [
+      {
+        value: up || 'now()',
+        type: upperTemplateValueType,
+        selected: true,
+        localSelected: true,
+      },
+    ],
+  }
+
+  return {dashboardTime, upperDashboardTime}
+}