Make submit button for dashboard sending disabled if no flux query

ui/src/data_explorer/components/SendToDashboardOverlay.tsx

@@ -21,31 +21,31 @@ import {
 import {addDashboardCellAsync} from 'src/dashboards/actions'
 
 // Types
-import {QueryConfig, Dashboard, Source} from 'src/types'
+import {QueryConfig, Dashboard, Source, Service} from 'src/types'
+import {getDeep} from 'src/utils/wrappers'
 
 interface Props {
   queryConfig: QueryConfig
+  script: string
   dashboards: Dashboard[]
   source: Source
   rawText: string
+  service: Service
   onCancel: () => void
   addDashboardCell: typeof addDashboardCellAsync
 }
 
 interface State {
   selectedIDs: string[]
-  hasQuery: boolean
   name: string
 }
 
 class SendToDashboardOverlay extends PureComponent<Props, State> {
   constructor(props) {
     super(props)
-    const {queryConfig} = this.props
 
     this.state = {
       selectedIDs: [],
-      hasQuery: queryConfig.fields.length !== 0,
       name: '',
     }
   }
@@ -119,6 +119,19 @@ class SendToDashboardOverlay extends PureComponent<Props, State> {
     })
   }
 
+  private get hasQuery(): boolean {
+    const {queryConfig, script} = this.props
+    if (this.isFlux) {
+      return !!script.length
+    }
+    return getDeep<number>(queryConfig, 'fields.length', 0) !== 0
+  }
+
+  private get isFlux(): boolean {
+    const {service} = this.props
+    return !!service
+  }
+
   private get selectedDashboards(): Dashboard[] {
     const {dashboards} = this.props
     const {selectedIDs} = this.state
@@ -129,9 +142,13 @@ class SendToDashboardOverlay extends PureComponent<Props, State> {
   }
 
   private get submitButtonStatus(): ComponentStatus {
-    const {hasQuery, name, selectedIDs} = this.state
+    const {name, selectedIDs} = this.state
 
-    if (!hasQuery || selectedIDs.length === 0 || name.trim().length === 0) {
+    if (
+      !this.hasQuery ||
+      selectedIDs.length === 0 ||
+      name.trim().length === 0
+    ) {
       return ComponentStatus.Disabled
     }
 
@@ -145,27 +162,37 @@ class SendToDashboardOverlay extends PureComponent<Props, State> {
   private sendToDashboard = async () => {
     const {
       queryConfig,
+      script,
       addDashboardCell,
       rawText,
       source,
       onCancel,
+      service,
     } = this.props
-    const {hasQuery, name} = this.state
+    const {name} = this.state
 
-    if (hasQuery) {
-      await Promise.all(
-        this.selectedDashboards.map(dashboard => {
-          const emptyCell = getNewDashboardCell(dashboard)
-          const newCell = {
-            ...emptyCell,
-            name,
-            queries: [{queryConfig, query: rawText, source: source.links.self}],
-          }
-          return addDashboardCell(dashboard, newCell)
-        })
-      )
-      onCancel()
-    }
+    const newCellQueries = this.isFlux
+      ? [
+          {
+            queryConfig: null,
+            query: script,
+            source: service.links.self,
+          },
+        ]
+      : [{queryConfig, query: rawText, source: source.links.self}]
+
+    await Promise.all(
+      this.selectedDashboards.map(dashboard => {
+        const emptyCell = getNewDashboardCell(dashboard)
+        const newCell = {
+          ...emptyCell,
+          name,
+          queries: newCellQueries,
+        }
+        return addDashboardCell(dashboard, newCell)
+      })
+    )
+    onCancel()
   }
 }
 

ui/src/data_explorer/containers/DataExplorer.tsx

@@ -12,6 +12,7 @@ import _ from 'lodash'
 import {stripPrefix} from 'src/utils/basepath'
 import {GlobalAutoRefresher} from 'src/utils/AutoRefresher'
 import {getConfig} from 'src/dashboards/utils/cellGetters'
+import {buildRawText} from 'src/utils/influxql'
 
 // Constants
 import {timeRanges} from 'src/shared/data/timeRanges'
@@ -54,7 +55,6 @@ import {
   TEMP_VAR_DASHBOARD_TIME,
   TEMP_VAR_UPPER_DASHBOARD_TIME,
 } from 'src/shared/constants'
-import {buildRawText} from 'src/utils/influxql'
 
 // Types
 import {
@@ -244,25 +244,16 @@ export class DataExplorer extends PureComponent<Props, State> {
       fluxLinks,
       notify,
       updateSourceLink,
-      sourceLink,
     } = this.props
     const {isStaticLegend} = this.state
 
-    let service: Service = null
-
-    if (sourceLink.indexOf('services') !== -1) {
-      service = services.find(s => {
-        return s.links.self === sourceLink
-      })
-    }
-
     return (
       <>
         {this.writeDataForm}
         {this.sendToDashboardOverlay}
         <div className="deceo--page">
           <TimeMachine
-            service={service}
+            service={this.service}
             updateSourceLink={updateSourceLink}
             queryDrafts={queryDrafts}
             editQueryStatus={editQueryStatus}
@@ -322,7 +313,7 @@ export class DataExplorer extends PureComponent<Props, State> {
   }
 
   private get sendToDashboardOverlay(): JSX.Element {
-    const {source, dashboards, addDashboardCell} = this.props
+    const {source, dashboards, addDashboardCell, script} = this.props
 
     const {isSendToDashboardVisible} = this.state
     return (
@@ -331,7 +322,9 @@ export class DataExplorer extends PureComponent<Props, State> {
           <SendToDashboardOverlay
             onCancel={this.toggleSendToDashboard}
             queryConfig={this.activeQueryConfig}
+            script={script}
             source={source}
+            service={this.service}
             rawText={this.rawText}
             dashboards={dashboards}
             addDashboardCell={addDashboardCell}
@@ -432,6 +425,18 @@ export class DataExplorer extends PureComponent<Props, State> {
     return ''
   }
 
+  private get service(): Service {
+    const {sourceLink, services} = this.props
+    let service: Service = null
+
+    if (sourceLink.indexOf('services') !== -1) {
+      service = services.find(s => {
+        return s.links.self === sourceLink
+      })
+    }
+    return service
+  }
+
   private get visualizationOptions(): VisualizationOptions {
     const {
       visType,
@@ -479,7 +484,7 @@ export class DataExplorer extends PureComponent<Props, State> {
   }
 }
 
-const mapStateToProps = state => {
+const mstp = state => {
   const {
     app: {
       persisted: {autoRefresh},
@@ -535,7 +540,7 @@ const mapStateToProps = state => {
   }
 }
 
-const mapDispatchToProps = dispatch => {
+const mdtp = dispatch => {
   return {
     handleChooseAutoRefresh: bindActionCreators(setAutoRefresh, dispatch),
     errorThrownAction: bindActionCreators(errorThrown, dispatch),
@@ -556,6 +561,4 @@ const mapDispatchToProps = dispatch => {
   }
 }
 
-export default connect(mapStateToProps, mapDispatchToProps)(
-  withRouter(ManualRefresh(DataExplorer))
-)
+export default connect(mstp, mdtp)(withRouter(ManualRefresh(DataExplorer)))