Move service fetching

Co-authored-by: Chris Henn <chris.henn@influxdata.com>
Co-authored-by: Andrew Watkins <andrew.watkinz@gmail.com>

ui/src/ifql/containers/CheckServices.tsx

@@ -1,10 +1,17 @@
 import React, {PureComponent, ReactChildren} from 'react'
 import {connect} from 'react-redux'
-import {withRouter, WithRouterProps} from 'react-router'
+import {WithRouterProps} from 'react-router'
 
+import {IFQLPage} from 'src/ifql'
 import IFQLOverlay from 'src/ifql/components/IFQLOverlay'
 import {OverlayContext} from 'src/shared/components/OverlayTechnology'
-import {Source, Service} from 'src/types'
+import {Source, Service, Notification} from 'src/types'
+import {Links} from 'src/types/ifql'
+import {notify as notifyAction} from 'src/shared/actions/notifications'
+import {
+  updateScript as updateScriptAction,
+  UpdateScript,
+} from 'src/ifql/actions'
 import * as a from 'src/shared/actions/overlayTechnology'
 import * as b from 'src/shared/actions/services'
 
@@ -16,6 +23,10 @@ interface Props {
   children: ReactChildren
   showOverlay: a.ShowOverlay
   fetchServicesAsync: b.FetchServicesAsync
+  notify: (message: Notification) => void
+  updateScript: UpdateScript
+  script: string
+  links: Links
 }
 
 export class CheckServices extends PureComponent<Props & WithRouterProps> {
@@ -36,11 +47,22 @@ export class CheckServices extends PureComponent<Props & WithRouterProps> {
   }
 
   public render() {
+    const {services, sources, notify, updateScript, links, script} = this.props
+
     if (!this.props.services.length) {
-      return null
+      return null // put loading spinner here
     }
 
-    return this.props.children
+    return (
+      <IFQLPage
+        sources={sources}
+        services={services}
+        links={links}
+        script={script}
+        notify={notify}
+        updateScript={updateScript}
+      />
+    )
   }
 
   private overlay() {
@@ -69,8 +91,17 @@ export class CheckServices extends PureComponent<Props & WithRouterProps> {
 const mdtp = {
   fetchServicesAsync: actions.fetchServicesAsync,
   showOverlay: actions.showOverlay,
+  updateScript: updateScriptAction,
+  notify: notifyAction,
 }
 
-const mstp = ({sources, services}) => ({sources, services})
+const mstp = ({sources, services, links, script}) => {
+  return {
+    links: links.ifql,
+    script,
+    sources,
+    services,
+  }
+}
 
-export default connect(mstp, mdtp)(withRouter(CheckServices))
+export default connect(mstp, mdtp)(CheckServices)

ui/src/ifql/containers/IFQLPage.tsx

@@ -1,19 +1,13 @@
 import React, {PureComponent} from 'react'
-import {connect} from 'react-redux'
 import _ from 'lodash'
 
-import CheckServices from 'src/ifql/containers/CheckServices'
 import TimeMachine from 'src/ifql/components/TimeMachine'
 import IFQLHeader from 'src/ifql/components/IFQLHeader'
 import {ErrorHandling} from 'src/shared/decorators/errors'
 import KeyboardShortcuts from 'src/shared/components/KeyboardShortcuts'
 
-import {notify as notifyAction} from 'src/shared/actions/notifications'
 import {analyzeSuccess} from 'src/shared/copy/notifications'
-import {
-  updateScript as updateScriptAction,
-  UpdateScript,
-} from 'src/ifql/actions'
+import {UpdateScript} from 'src/ifql/actions'
 
 import {bodyNodes} from 'src/ifql/helpers'
 import {getSuggestions, getAST, getTimeSeries} from 'src/ifql/apis'
@@ -42,9 +36,6 @@ interface Props {
   notify: (message: Notification) => void
   script: string
   updateScript: UpdateScript
-  params: {
-    sourceID: string
-  }
 }
 
 interface Body extends FlatBody {
@@ -101,28 +92,26 @@ export class IFQLPage extends PureComponent<Props, State> {
     const {script} = this.props
 
     return (
-      <CheckServices>
-        <IFQLContext.Provider value={this.handlers}>
-          <KeyboardShortcuts onControlEnter={this.getTimeSeries}>
-            <div className="page hosts-list-page">
-              {this.header}
-              <TimeMachine
-                data={data}
-                body={body}
-                script={script}
-                status={status}
-                visStatus={visStatus}
-                suggestions={suggestions}
-                onAnalyze={this.handleAnalyze}
-                onAppendFrom={this.handleAppendFrom}
-                onAppendJoin={this.handleAppendJoin}
-                onChangeScript={this.handleChangeScript}
-                onSubmitScript={this.handleSubmitScript}
-              />
-            </div>
-          </KeyboardShortcuts>
-        </IFQLContext.Provider>
-      </CheckServices>
+      <IFQLContext.Provider value={this.handlers}>
+        <KeyboardShortcuts onControlEnter={this.getTimeSeries}>
+          <div className="page hosts-list-page">
+            {this.header}
+            <TimeMachine
+              data={data}
+              body={body}
+              script={script}
+              status={status}
+              visStatus={visStatus}
+              suggestions={suggestions}
+              onAnalyze={this.handleAnalyze}
+              onAppendFrom={this.handleAppendFrom}
+              onAppendJoin={this.handleAppendJoin}
+              onChangeScript={this.handleChangeScript}
+              onSubmitScript={this.handleSubmitScript}
+            />
+          </div>
+        </KeyboardShortcuts>
+      </IFQLContext.Provider>
     )
   }
 
@@ -455,13 +444,4 @@ export class IFQLPage extends PureComponent<Props, State> {
   }
 }
 
-const mapStateToProps = ({links, services, sources, script}) => {
-  return {links: links.ifql, services, sources, script}
-}
-
-const mapDispatchToProps = {
-  notify: notifyAction,
-  updateScript: updateScriptAction,
-}
-
-export default connect(mapStateToProps, mapDispatchToProps)(IFQLPage)
+export default IFQLPage

ui/src/index.tsx

@@ -35,7 +35,7 @@ import {
 } from 'src/kapacitor'
 import {AdminChronografPage, AdminInfluxDBPage} from 'src/admin'
 import {SourcePage, ManageSources} from 'src/sources'
-import {IFQLPage} from 'src/ifql'
+import {CheckServices} from 'src/ifql'
 import NotFound from 'src/shared/components/NotFound'
 
 import {getLinksAsync} from 'src/shared/actions/links'
@@ -154,7 +154,7 @@ class Root extends PureComponent<{}, State> {
               <Route path="manage-sources" component={ManageSources} />
               <Route path="manage-sources/new" component={SourcePage} />
               <Route path="manage-sources/:id/edit" component={SourcePage} />
-              <Route path="delorean" component={IFQLPage} />
+              <Route path="delorean" component={CheckServices} />
             </Route>
           </Route>
           <Route path="*" component={NotFound} />