diff --git a/ui/src/ifql/containers/CheckServices.tsx b/ui/src/ifql/containers/CheckServices.tsx index fc49e04643..54c4f77bd5 100644 --- a/ui/src/ifql/containers/CheckServices.tsx +++ b/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 { @@ -36,11 +47,22 @@ export class CheckServices extends PureComponent { } 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 ( + + ) } private overlay() { @@ -69,8 +91,17 @@ export class CheckServices extends PureComponent { 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) diff --git a/ui/src/ifql/containers/IFQLPage.tsx b/ui/src/ifql/containers/IFQLPage.tsx index 831cbb3a86..99d83e88a2 100644 --- a/ui/src/ifql/containers/IFQLPage.tsx +++ b/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 { const {script} = this.props return ( - - - -
- {this.header} - -
-
-
-
+ + +
+ {this.header} + +
+
+
) } @@ -455,13 +444,4 @@ export class IFQLPage extends PureComponent { } } -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 diff --git a/ui/src/index.tsx b/ui/src/index.tsx index 743e781c18..8ad735b9c6 100644 --- a/ui/src/index.tsx +++ b/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> { - +