Send notification when query text contains user-defined template variable

ui/src/dashboards/components/CellEditorOverlay.tsx

@@ -44,8 +44,10 @@ import {
   CellQuery,
   Legend,
   Status,
+  Notification,
 } from 'src/types'
 import {ErrorHandling} from 'src/shared/decorators/errors'
+import {notifyBuilderDisabled} from 'src/shared/copy/notifications'
 
 const staticLegend: Legend = {
   type: 'static',
@@ -77,6 +79,7 @@ interface Props {
   gaugeColors: ColorNumber[]
   lineColors: ColorString[]
   cell: Cell
+  notify: (notification: Notification) => void
 }
 
 interface State {
@@ -367,6 +370,10 @@ class CellEditorOverlay extends Component<Props, State> {
 
     const isUsingUserDefinedTempVars: boolean = !!userDefinedTempVarsInQuery.length
 
+    if (isUsingUserDefinedTempVars) {
+      this.props.notify(notifyBuilderDisabled())
+    }
+
     try {
       const selectedTempVars: Template[] = isUsingUserDefinedTempVars
         ? removeUnselectedTemplateValues(userDefinedTempVarsInQuery)

ui/src/dashboards/containers/DashboardPage.js

@@ -293,6 +293,7 @@ class DashboardPage extends Component {
     const {zoomedTimeRange} = this.state
     const {zoomedLower, zoomedUpper} = zoomedTimeRange
     const {
+      notify,
       source,
       sources,
       timeRange,
@@ -398,6 +399,7 @@ class DashboardPage extends Component {
             thresholdsListColors={thresholdsListColors}
             gaugeColors={gaugeColors}
             lineColors={lineColors}
+            notify={notify}
           />
         ) : null}
         <DashboardHeader

ui/src/shared/copy/notifications.js

@@ -438,6 +438,13 @@ export const notifyCellDeleted = name => ({
   message: `Deleted "${name}" from dashboard.`,
 })
 
+export const notifyBuilderDisabled = () => ({
+  type: 'info',
+  icon: 'graphline',
+  duration: 7500,
+  message: `Your query contains a user-defined Template Variable. The Schema Explorer cannot render the query and is disabled.`,
+})
+
 //  Rule Builder Notifications
 //  ----------------------------------------------------------------------------
 export const notifyAlertRuleCreated = () => ({

ui/src/types/index.ts

@@ -11,6 +11,7 @@ import {
 import {AlertRule, Kapacitor, Task} from './kapacitor'
 import {Source, SourceLinks} from './sources'
 import {DropdownAction, DropdownItem} from './shared'
+import {Notification} from 'src/kapacitor/components/AlertOutputs'
 
 export {
   Me,
@@ -35,4 +36,5 @@ export {
   DropdownItem,
   TimeRange,
   Task,
+  Notification,
 }