Merge pull request #4468 from influxdata/flux/error-message-when-source-doesnt-have-flux

Add error message when current source doesn't support Flux

ui/src/shared/components/TimeMachine/TimeMachine.tsx

@@ -502,7 +502,9 @@ class TimeMachine extends PureComponent<Props, State> {
     const id = _.get(queryDrafts, 'id', '')
     if (this.isFluxSource) {
       // there will only be one flux query
-      const fluxQuery: Query[] = [{text: script, id, queryConfig: null}]
+      const fluxQuery: Query[] = [
+        {text: script, id, queryConfig: null, type: QueryType.Flux},
+      ]
       return fluxQuery
     }
 

ui/src/shared/components/time_series/TimeSeries.tsx

@@ -21,6 +21,7 @@ import {
   CellType,
   Status,
   FluxTable,
+  QueryType,
 } from 'src/types'
 import {TimeSeriesServerResponse} from 'src/types/series'
 import {GrabDataForDownloadHandler} from 'src/types/layout'
@@ -35,6 +36,7 @@ import {
 import {notify} from 'src/shared/actions/notifications'
 import {fluxResponseTruncatedError} from 'src/shared/copy/notifications'
 import DefaultDebouncer, {Debouncer} from 'src/shared/utils/debouncer'
+import {getDeep} from 'src/utils/wrappers'
 
 // Components
 import MarkdownCell from 'src/shared/components/MarkdownCell'
@@ -186,7 +188,7 @@ class TimeSeries extends Component<Props, State> {
   }
 
   public render() {
-    const {cellNoteVisibility, cellNote} = this.props
+    const {cellNoteVisibility, cellNote, service} = this.props
     const {
       timeSeriesInfluxQL,
       timeSeriesFlux,
@@ -211,6 +213,14 @@ class TimeSeries extends Component<Props, State> {
         return <MarkdownCell text={cellNote} />
       }
 
+      if (this.isFluxSource && !service) {
+        return (
+          <div className="graph-empty">
+            <p>The current source does not support flux</p>
+          </div>
+        )
+      }
+
       return (
         <div className="graph-empty">
           <p>No Results</p>
@@ -228,8 +238,8 @@ class TimeSeries extends Component<Props, State> {
 
   private get isFluxSource(): boolean {
     // TODO: update when flux not separate service
-    const {service} = this.props
-    return !!service
+    const {queries} = this.props
+    return getDeep<string>(queries, '0.type', '') === QueryType.Flux
   }
 
   private get loadingDots(): JSX.Element {

ui/src/types/queries.ts

@@ -5,6 +5,7 @@ export interface Query {
   text: string
   id: string
   queryConfig: QueryConfig
+  type: string
 }
 
 export interface QueryConfig {

ui/src/utils/buildQueriesForGraphs.ts

@@ -2,7 +2,7 @@ import _ from 'lodash'
 import {buildQuery} from 'src/utils/influxql'
 import {TYPE_QUERY_CONFIG, TYPE_SHIFTED} from 'src/dashboards/constants'
 
-import {Query, QueryConfig, TimeRange} from 'src/types'
+import {Query, QueryConfig, TimeRange, QueryType} from 'src/types'
 
 interface Statement {
   queryConfig: QueryConfig
@@ -45,6 +45,7 @@ const buildQueries = (queryConfigs: QueryConfig[], tR: TimeRange): Query[] => {
         text,
         id,
         queryConfig,
+        type: QueryType.InfluxQL,
       }
     })