Ensure that flux cells have correct type

Co-authored-by: Iris Scholten <ischolten.is@gmail.com>

ui/src/data_explorer/containers/DataExplorer.tsx

@@ -134,6 +134,7 @@ interface State {
   isWriteFormVisible: boolean
   isSendToDashboardVisible: boolean
   isStaticLegend: boolean
+  isComponentMounted: boolean
 }
 
 @ErrorHandling
@@ -145,6 +146,7 @@ export class DataExplorer extends PureComponent<Props, State> {
       isWriteFormVisible: false,
       isSendToDashboardVisible: false,
       isStaticLegend: false,
+      isComponentMounted: false,
     }
   }
 
@@ -157,10 +159,13 @@ export class DataExplorer extends PureComponent<Props, State> {
       handleGetDashboards,
     } = this.props
     const {query, script} = this.queryString
+    const isFlux = !!script
 
-    GlobalAutoRefresher.poll(autoRefresh)
+    await this.fetchFluxServices()
 
-    if (script || _.isEmpty(query)) {
+    if (isFlux) {
+      this.createNewQueryDraft()
+    } else if (_.isEmpty(query)) {
       let drafts = []
       if (!_.isEmpty(queryDrafts)) {
         drafts = queryDrafts
@@ -179,7 +184,9 @@ export class DataExplorer extends PureComponent<Props, State> {
     }
 
     await handleGetDashboards()
-    await this.fetchFluxServices()
+
+    GlobalAutoRefresher.poll(autoRefresh)
+    this.setState({isComponentMounted: true})
   }
 
   public componentDidUpdate(prevProps: Props) {
@@ -213,7 +220,11 @@ export class DataExplorer extends PureComponent<Props, State> {
       notify,
       updateSourceLink,
     } = this.props
-    const {isStaticLegend} = this.state
+    const {isStaticLegend, isComponentMounted} = this.state
+
+    if (!isComponentMounted) {
+      return <h3 className="graph-spinner" />
+    }
 
     return (
       <>

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

@@ -639,7 +639,10 @@ class TimeMachine extends PureComponent<Props, State> {
     }
   }
 
-  private updateQueryDraftsSource(selectedSource: Source, type: string) {
+  private updateQueryDraftsSource(
+    selectedSource: Source | Service,
+    type: string
+  ) {
     const {queryDrafts, updateQueryDrafts} = this.props
 
     const queries: CellQuery[] = queryDrafts.map(q => {
@@ -650,7 +653,7 @@ class TimeMachine extends PureComponent<Props, State> {
         source: getDeep<string>(selectedSource, 'links.self', ''),
         type,
       }
-    })
+    }) as CellQuery[]
 
     updateQueryDrafts(queries, this.stateToUpdate)
   }
@@ -665,8 +668,11 @@ class TimeMachine extends PureComponent<Props, State> {
       updateSourceLink(getDeep<string>(selectedService, 'links.self', ''))
     }
 
-    const type = selectedService ? QueryType.Flux : QueryType.InfluxQL
-    this.updateQueryDraftsSource(selectedSource, type)
+    if (selectedService) {
+      this.updateQueryDraftsSource(selectedService, QueryType.Flux)
+    } else {
+      this.updateQueryDraftsSource(selectedSource, QueryType.InfluxQL)
+    }
     this.setState({selectedService, selectedSource})
   }