Update interval replacement (#4011)

Update interval replacement to use replace api

ui/src/dashboards/components/CellEditorOverlay.tsx

@@ -14,6 +14,7 @@ import CEOBottom from 'src/dashboards/components/CEOBottom'
 
 // APIs
 import {getQueryConfigAndStatus} from 'src/shared/apis'
+import {replace as replaceTempVars} from 'src/shared/apis/query'
 
 // Utils
 import {getDeep} from 'src/utils/wrappers'
@@ -21,7 +22,6 @@ import * as queryTransitions from 'src/utils/queryTransitions'
 import defaultQueryConfig from 'src/utils/defaultQueryConfig'
 import {buildQuery} from 'src/utils/influxql'
 import {nextSource} from 'src/dashboards/utils/sources'
-import replaceTemplate, {replaceInterval} from 'src/tempVars/utils/replace'
 import {editCellQueryStatus} from 'src/dashboards/actions'
 
 // Constants
@@ -33,7 +33,6 @@ import {
   AUTO_GROUP_BY,
   PREDEFINED_TEMP_VARS,
   TEMP_VAR_DASHBOARD_TIME,
-  DEFAULT_DURATION_MS,
   DEFAULT_PIXELS,
 } from 'src/shared/constants'
 import {getCellTypeColors} from 'src/dashboards/constants/cellEditor'
@@ -47,7 +46,7 @@ import {Template} from 'src/types/tempVars'
 
 type QueryTransitions = typeof queryTransitions
 type EditRawTextAsyncFunc = (
-  url: string,
+  source: SourcesModels.Source,
   id: string,
   text: string
 ) => Promise<void>
@@ -409,23 +408,13 @@ class CellEditorOverlay extends Component<Props, State> {
   }
 
   private getConfig = async (
-    url,
+    source: SourcesModels.Source,
     id: string,
     query: string,
     templates: Template[]
   ): Promise<QueriesModels.QueryConfig> => {
-    // replace all templates but :interval:
-    query = replaceTemplate(query, templates)
-    let queries = []
-    let durationMs = DEFAULT_DURATION_MS
-
     try {
-      // get durationMs to calculate interval
-      queries = await getQueryConfigAndStatus(url, [{query, id}])
-      durationMs = _.get(queries, '0.durationMs', DEFAULT_DURATION_MS)
-
-      // calc and replace :interval:
-      query = replaceInterval(query, DEFAULT_PIXELS, durationMs)
+      query = await replaceTempVars(query, source, templates, DEFAULT_PIXELS)
     } catch (error) {
       console.error(error)
       throw error
@@ -433,15 +422,16 @@ class CellEditorOverlay extends Component<Props, State> {
 
     try {
       // fetch queryConfig for with all template variables replaced
-      queries = await getQueryConfigAndStatus(url, [{query, id}])
+      const queries = await getQueryConfigAndStatus(source.links.queries, [
+        {query, id},
+      ])
+      const {queryConfig} = queries.find(q => q.id === id)
+
+      return queryConfig
     } catch (error) {
       console.error(error)
       throw error
     }
-
-    const {queryConfig} = queries.find(q => q.id === id)
-
-    return queryConfig
   }
 
   // The schema explorer is not built to handle user defined template variables
@@ -449,7 +439,7 @@ class CellEditorOverlay extends Component<Props, State> {
   // the query config in order to disable the fields column down stream because
   // at this point the query string is disconnected from the schema explorer.
   private handleEditRawText = async (
-    url: string,
+    source: SourcesModels.Source,
     id: string,
     text: string
   ): Promise<void> => {
@@ -462,7 +452,7 @@ class CellEditorOverlay extends Component<Props, State> {
     const isUsingUserDefinedTempVars: boolean = !!userDefinedTempVarsInQuery.length
 
     try {
-      const queryConfig = await this.getConfig(url, id, text, templates)
+      const queryConfig = await this.getConfig(source, id, text, templates)
       const nextQueries = this.state.queriesWorkingDraft.map(q => {
         if (q.id === id) {
           const isQuerySupportedByExplorer = !isUsingUserDefinedTempVars

ui/src/dashboards/components/QueryMaker.tsx

@@ -5,22 +5,12 @@ import EmptyQuery from 'src/shared/components/EmptyQuery'
 import QueryTabList from 'src/shared/components/QueryTabList'
 import InfluxQLEditor from 'src/dashboards/components/InfluxQLEditor'
 import SchemaExplorer from 'src/shared/components/SchemaExplorer'
-import {buildQuery} from 'src/utils/influxql'
-import {TYPE_QUERY_CONFIG} from 'src/dashboards/constants'
-import {TEMPLATE_RANGE} from 'src/tempVars/constants'
 
-import {QueryConfig, Source, SourceLinks, TimeRange, Template} from 'src/types'
+import {buildText, rawTextBinder} from 'src/dashboards/utils/queryMaker'
+
+import {QueryConfig, Source, TimeRange, Template} from 'src/types'
 import {CellEditorOverlayActions} from 'src/dashboards/components/CellEditorOverlay'
 
-const rawTextBinder = (
-  links: SourceLinks,
-  id: string,
-  action: (linksQueries: string, id: string, text: string) => void
-) => (text: string) => action(links.queries, id, text)
-
-const buildText = (q: QueryConfig): string =>
-  q.rawText || buildQuery(TYPE_QUERY_CONFIG, q.range || TEMPLATE_RANGE, q) || ''
-
 interface Props {
   source: Source
   queries: QueryConfig[]
@@ -63,7 +53,7 @@ const QueryMaker: SFC<Props> = ({
           query={buildText(activeQuery)}
           config={activeQuery}
           onUpdate={rawTextBinder(
-            source.links,
+            source,
             activeQuery.id,
             actions.editRawTextAsync
           )}

ui/src/dashboards/utils/queryMaker.ts

@@ -0,0 +1,14 @@
+import {buildQuery} from 'src/utils/influxql'
+import {TYPE_QUERY_CONFIG} from 'src/dashboards/constants'
+import {TEMPLATE_RANGE} from 'src/tempVars/constants'
+
+import {QueryConfig, Source} from 'src/types'
+
+export const rawTextBinder = (
+  source: Source,
+  id: string,
+  action: (source: Source, id: string, text: string) => void
+) => (text: string) => action(source, id, text)
+
+export const buildText = (q: QueryConfig): string =>
+  q.rawText || buildQuery(TYPE_QUERY_CONFIG, q.range || TEMPLATE_RANGE, q) || ''

ui/src/data_explorer/apis/index.ts

@@ -6,9 +6,10 @@ import download from 'src/external/download'
 import {proxy} from 'src/utils/queryUrlGenerator'
 import {timeSeriesToTableGraph} from 'src/utils/timeSeriesTransformers'
 import {dataToCSV} from 'src/shared/parsing/dataToCSV'
+
+import {replace as replaceTempVars} from 'src/shared/apis/query'
+
 import {Source, QueryConfig} from 'src/types'
-import {duration} from 'src/shared/apis/query'
-import {replaceInterval} from 'src/tempVars/utils/replace'
 
 export const writeLineProtocol = async (
   source: Source,
@@ -34,13 +35,7 @@ export const getDataForCSV = (
   errorThrown
 ) => async () => {
   try {
-    let queryString = query.text
-
-    if (queryString.includes(':interval:')) {
-      const queryDuration = await duration(query.text, source)
-
-      queryString = replaceInterval(query.text, null, queryDuration)
-    }
+    const queryString = await replaceTempVars(query.text, source, [], null)
 
     const response = await fetchTimeSeriesForCSV({
       source: source.links.proxy,

ui/src/shared/apis/query.ts

@@ -6,7 +6,7 @@ import {
   handleLoading,
 } from 'src/shared/actions/timeSeries'
 import {analyzeQueries} from 'src/shared/apis'
-import {DEFAULT_DURATION_MS} from 'src/shared/constants'
+import {DEFAULT_DURATION_MS, TEMP_VAR_INTERVAL} from 'src/shared/constants'
 import replaceTemplates, {replaceInterval} from 'src/tempVars/utils/replace'
 import {proxy} from 'src/utils/queryUrlGenerator'
 
@@ -82,14 +82,26 @@ export const replace = async (
 ): Promise<string> => {
   try {
     query = replaceTemplates(query, templates)
-    const durationMs = await duration(query, source)
-    return replaceInterval(query, Math.floor(resolution / 3), durationMs)
+    return replaceIntervalAsync(query, source, resolution)
   } catch (error) {
     console.error(error)
     throw error
   }
 }
 
+const replaceIntervalAsync = async (
+  query: string,
+  source: Source,
+  resolution: number
+): Promise<string> => {
+  if (query.includes(TEMP_VAR_INTERVAL)) {
+    const durationMs = await duration(query, source)
+    return replaceInterval(query, Math.floor(resolution / 3), durationMs)
+  } else {
+    return query
+  }
+}
+
 export const duration = async (
   query: string,
   source: Source