From 26bae2da6f680a51b3f853f9092aebc5dca9f2bf Mon Sep 17 00:00:00 2001
From: Alex P <thealexpaxton@gmail.com>
Date: Tue, 1 May 2018 14:08:44 -0700
Subject: [PATCH] Send notification when query text contains user-defined
 template variable

---
 ui/src/dashboards/components/CellEditorOverlay.tsx | 7 +++++++
 ui/src/dashboards/containers/DashboardPage.js      | 2 ++
 ui/src/shared/copy/notifications.js                | 7 +++++++
 ui/src/types/index.ts                              | 2 ++
 4 files changed, 18 insertions(+)

diff --git a/ui/src/dashboards/components/CellEditorOverlay.tsx b/ui/src/dashboards/components/CellEditorOverlay.tsx
index 4afd2ea3b4..6a756361c4 100644
--- a/ui/src/dashboards/components/CellEditorOverlay.tsx
+++ b/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)
diff --git a/ui/src/dashboards/containers/DashboardPage.js b/ui/src/dashboards/containers/DashboardPage.js
index aee57c1187..45db47e522 100644
--- a/ui/src/dashboards/containers/DashboardPage.js
+++ b/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
diff --git a/ui/src/shared/copy/notifications.js b/ui/src/shared/copy/notifications.js
index 7e5ff396a3..e175a152cd 100644
--- a/ui/src/shared/copy/notifications.js
+++ b/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 = () => ({
diff --git a/ui/src/types/index.ts b/ui/src/types/index.ts
index 6ac32fbf96..b36075edf6 100644
--- a/ui/src/types/index.ts
+++ b/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,
 }