Replace template variables in the CEO

ui/src/dashboards/components/CellEditorOverlay.tsx

@@ -21,11 +21,11 @@ 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'
 
 // Constants
 import {IS_STATIC_LEGEND} from 'src/shared/constants'
 import {TYPE_QUERY_CONFIG} from 'src/dashboards/constants'
-import {removeUnselectedTemplateValues} from 'src/tempVars/constants'
 import {OVERLAY_TECHNOLOGY} from 'src/shared/constants/classNames'
 import {MINIMUM_HEIGHTS, INITIAL_HEIGHTS} from 'src/data_explorer/constants'
 import {
@@ -42,6 +42,7 @@ import * as DashboardsActions from 'src/types/actions/dashboards'
 import * as DashboardsModels from 'src/types/dashboards'
 import * as QueriesModels from 'src/types/queries'
 import * as SourcesModels from 'src/types/sources'
+import {Template} from 'src/types/tempVars'
 
 type QueryTransitions = typeof queryTransitions
 type EditRawTextAsyncFunc = (
@@ -62,10 +63,6 @@ const staticLegend: DashboardsModels.Legend = {
   orientation: 'bottom',
 }
 
-interface Template {
-  tempVar: string
-}
-
 interface QueryStatus {
   queryID: string
   status: QueriesModels.Status
@@ -397,6 +394,29 @@ class CellEditorOverlay extends Component<Props, State> {
     })
   }
 
+  private getConfig = async (
+    url,
+    id: string,
+    query: string,
+    templates: Template[]
+  ): Promise<QueriesModels.QueryConfig> => {
+    // replace all templates but :interval:
+    query = replaceTemplate(query, templates)
+
+    // get durationMs to calculate interval
+    let queries = await getQueryConfigAndStatus(url, [{query, id}])
+    const durationMs = _.get(queries, '0.durationMs', 1000)
+
+    // calc and replace :interval:
+    query = replaceInterval(query, 333, durationMs)
+
+    // fetch queryConfig for with all template variables replaced
+    queries = await getQueryConfigAndStatus(url, [{query, id}])
+    const {queryConfig} = queries.find(q => q.id === id)
+
+    return queryConfig
+  }
+
   // The schema explorer is not built to handle user defined template variables
   // in the query in a clear manner. If they are being used, we indicate that in
   // the query config in order to disable the fields column down stream because
@@ -406,27 +426,18 @@ class CellEditorOverlay extends Component<Props, State> {
     id: string,
     text: string
   ): Promise<void> => {
+    const {templates} = this.props
     const userDefinedTempVarsInQuery = this.findUserDefinedTempVarsInQuery(
       text,
-      this.props.templates
+      templates
     )
 
     const isUsingUserDefinedTempVars: boolean = !!userDefinedTempVarsInQuery.length
 
     try {
-      const selectedTempVars: Template[] = isUsingUserDefinedTempVars
+      const queryConfig = await this.getConfig(url, id, text, templates)
-        ? removeUnselectedTemplateValues(userDefinedTempVarsInQuery)
-        : []
 
-      const {data} = await getQueryConfigAndStatus(
+      const nextQueries = this.state.queriesWorkingDraft.map(q => {
-        url,
-        [{query: text, id}],
-        selectedTempVars
-      )
-
-      const config = data.queries.find(q => q.id === id)
-      const nextQueries: QueriesModels.QueryConfig[] = this.state.queriesWorkingDraft.map(
-        (q: QueriesModels.QueryConfig) => {
         if (q.id === id) {
           const isQuerySupportedByExplorer = !isUsingUserDefinedTempVars
 
@@ -435,15 +446,14 @@ class CellEditorOverlay extends Component<Props, State> {
           }
 
           return {
-              ...config.queryConfig,
+            ...queryConfig,
             source: q.source,
             isQuerySupportedByExplorer,
           }
         }
 
         return q
-        }
+      })
-      )
 
       this.setState({queriesWorkingDraft: nextQueries})
     } catch (error) {

ui/src/data_explorer/actions/view/index.ts

@@ -393,13 +393,13 @@ export const editRawTextAsync = (
   text: string
 ) => async (dispatch): Promise<void> => {
   try {
-    const {data} = await getQueryConfigAndStatus(url, [
+    const queries = await getQueryConfigAndStatus(url, [
       {
         query: text,
         id,
       },
     ])
-    const config = data.queries.find(q => q.id === id)
+    const config = queries.find(q => q.id === id)
     dispatch(updateQueryConfig(config.queryConfig))
   } catch (error) {
     dispatch(errorThrown(error))

ui/src/shared/apis/index.ts

@@ -319,15 +319,26 @@ export function kapacitorProxy(kapacitor, method, path, body?) {
   })
 }
 
-export const getQueryConfigAndStatus = (url, queries, tempVars = []) => {
+export const getQueryConfigAndStatus = async (
-  return AJAX({
+  url,
+  queries
+): Promise<AnalyzeQueriesObject[]> => {
+  try {
+    const {data} = await AJAX({
       url,
       method: 'POST',
-    data: {queries, tempVars},
+      data: {queries},
     })
+
+    return data.queries
+  } catch (error) {
+    console.error(error)
+    throw error
+  }
 }
 
-interface AnalyzeQueriesResponse {
+interface AnalyzeQueriesObject {
+  id: string
   query: string
   duration: string
   queryConfig?: QueryConfig
@@ -336,7 +347,7 @@ interface AnalyzeQueriesResponse {
 export const analyzeQueries = async (
   url: string,
   queries: Array<{query: string}>
-): Promise<AnalyzeQueriesResponse> => {
+): Promise<AnalyzeQueriesObject[]> => {
   try {
     const {data} = await AJAX({
       url,