Move replate replacement functions to the frontend

ui/src/tempVars/utils/replace.ts

@@ -42,24 +42,56 @@ const renderTemplate = (query: string, template: Template): string => {
   const {tempVar} = template
   const {value, type} = templateValue
 
+  let q = ''
+
+  // First replace all template variable types in regular expressions.  Values should appear unquoted.
   switch (type) {
     case TemplateValueType.TagKey:
     case TemplateValueType.FieldKey:
     case TemplateValueType.Measurement:
     case TemplateValueType.Database:
-      return replaceAll(query, tempVar, `"${value}"`)
     case TemplateValueType.TagValue:
     case TemplateValueType.TimeStamp:
-      return replaceAll(query, tempVar, `'${value}'`)
+      q = replaceAllRegex(query, tempVar, value)
+      break
+    default:
+      q = query
+  }
+
+  // Then render template variables not in regular expressions
+  switch (type) {
+    case TemplateValueType.TagKey:
+    case TemplateValueType.FieldKey:
+    case TemplateValueType.Measurement:
+    case TemplateValueType.Database:
+      return replaceAll(q, tempVar, `"${value}"`)
+    case TemplateValueType.TagValue:
+    case TemplateValueType.TimeStamp:
+      return replaceAll(q, tempVar, `'${value}'`)
     case TemplateValueType.CSV:
     case TemplateValueType.Constant:
     case TemplateValueType.MetaQuery:
-      return replaceAll(query, tempVar, value)
+      return replaceAll(q, tempVar, value)
     default:
       return query
   }
 }
 
+const replaceAllRegex = (
+  query: string,
+  search: string,
+  replacement: string
+) => {
+  const matches = query.match(/\/([^\/]*)\//gm)
+  const isReplaceable = !!matches && matches.some(m => m.includes(search))
+
+  if (!isReplaceable) {
+    return query
+  }
+
+  return replaceAll(query, search, replacement)
+}
+
 const replaceAll = (query: string, search: string, replacement: string) => {
   return query.split(search).join(replacement)
 }

ui/test/tempVars/utils/replace.test.ts

@@ -4,9 +4,6 @@ import {emptyTemplate} from 'test/resources'
 
 describe('templates.utils.replace', () => {
   it('can replace select with parameters', () => {
-    const query =
-      ':method: field1, :field: FROM :measurement: WHERE temperature > :temperature:'
-
     const vars = [
       {
         ...emptyTemplate,
@@ -33,7 +30,8 @@ describe('templates.utils.replace', () => {
         values: [{type: TemplateValueType.CSV, value: `"cpu"`, selected: true}],
       },
     ]
-
+    const query =
+      ':method: field1, :field: FROM :measurement: WHERE temperature > :temperature:'
     const expected = `SELECT field1, "field2" FROM "cpu" WHERE temperature > 10`
 
     const actual = templateReplace(query, vars)
@@ -76,6 +74,41 @@ describe('templates.utils.replace', () => {
     expect(actual).toBe(expected)
   })
 
+  describe('queries with a regex', () => {
+    it('replaces properly', () => {
+      const vars = [
+        {
+          ...emptyTemplate,
+          tempVar: ':host:',
+          values: [
+            {
+              type: TemplateValueType.TagValue,
+              value: 'my-host.local',
+              selected: true,
+            },
+          ],
+        },
+        {
+          ...emptyTemplate,
+          tempVar: ':dashboardTime:',
+          values: [
+            {
+              value: 'now() - 1h',
+              type: TemplateValueType.Constant,
+              selected: true,
+            },
+          ],
+        },
+      ]
+
+      const query = `SELECT "usage_active" FROM "cpu" WHERE host =~ /^:host:$/ AND time > :dashboardTime: FILL(null)`
+      const expected = `SELECT "usage_active" FROM "cpu" WHERE host =~ /^my-host.local$/ AND time > now() - 1h FILL(null)`
+      const actual = templateReplace(query, vars)
+
+      expect(actual).toBe(expected)
+    })
+  })
+
   describe('with no templates', () => {
     it('does not do a replacement', () => {
       const query = `SELECT :field: FROM "cpu"`