diff --git a/ui/src/shared/apis/v2/query.ts b/ui/src/shared/apis/v2/query.ts index c9aec99d52..64d731d41a 100644 --- a/ui/src/shared/apis/v2/query.ts +++ b/ui/src/shared/apis/v2/query.ts @@ -1,7 +1,7 @@ import Deferred from 'src/utils/Deferred' import {InfluxLanguage} from 'src/types/v2/dashboards' -import {DashboardQuery} from 'src/types/v2/dashboards' +import {URLQuery} from 'src/types/v2/dashboards' const CHECK_LIMIT_INTERVAL = 200 const MAX_ROWS = 50000 @@ -133,10 +133,11 @@ export const executeQuery = async ( } export const executeQueries = async ( - url: string, - queries: DashboardQuery[] + queries: URLQuery[] ): Promise => { - return Promise.all( - queries.map(({type, text}) => executeQuery(url, text, type)) + const promise = Promise.all( + queries.map(({url, text, type}) => executeQuery(url, text, type)) ) + + return promise } diff --git a/ui/src/shared/components/RefreshingView.tsx b/ui/src/shared/components/RefreshingView.tsx index 57f1d4d398..95ff8c1a05 100644 --- a/ui/src/shared/components/RefreshingView.tsx +++ b/ui/src/shared/components/RefreshingView.tsx @@ -1,6 +1,5 @@ // Libraries import React, {PureComponent} from 'react' -import {connect} from 'react-redux' import _ from 'lodash' // Components @@ -9,16 +8,14 @@ import EmptyRefreshingView from 'src/shared/components/EmptyRefreshingView' import RefreshingViewSwitcher from 'src/shared/components/RefreshingViewSwitcher' // Utils -import {getActiveSource} from 'src/sources/selectors' import {GlobalAutoRefresher} from 'src/utils/AutoRefresher' // Types import {TimeRange} from 'src/types' -import {AppState} from 'src/types/v2' import {DashboardQuery} from 'src/types/v2/dashboards' import {RefreshingViewProperties, ViewType} from 'src/types/v2/dashboards' -interface OwnProps { +interface Props { timeRange: TimeRange viewID: string inView: boolean @@ -27,14 +24,6 @@ interface OwnProps { properties: RefreshingViewProperties } -interface StateProps { - link: string -} - -interface DispatchProps {} - -type Props = OwnProps & StateProps & DispatchProps - class RefreshingView extends PureComponent { public static defaultProps: Partial = { inView: true, @@ -43,7 +32,6 @@ class RefreshingView extends PureComponent { public render() { const { - link, inView, onZoom, viewID, @@ -54,7 +42,6 @@ class RefreshingView extends PureComponent { return ( { } } -const mstp = (state: AppState): StateProps => { - const link = getActiveSource(state).links.query - - return {link} -} - -const mdtp = {} - -export default connect( - mstp, - mdtp -)(RefreshingView) +export default RefreshingView diff --git a/ui/src/shared/components/TimeMachine.tsx b/ui/src/shared/components/TimeMachine.tsx index d0208a7139..62c512a9c4 100644 --- a/ui/src/shared/components/TimeMachine.tsx +++ b/ui/src/shared/components/TimeMachine.tsx @@ -13,7 +13,6 @@ import TimeMachineVis from 'src/shared/components/TimeMachineVis' import TimeSeries from 'src/shared/components/TimeSeries' // Utils -import {getActiveSource} from 'src/sources/selectors' import {getActiveTimeMachine} from 'src/shared/selectors/timeMachines' // Constants @@ -23,16 +22,15 @@ import {HANDLE_HORIZONTAL} from 'src/shared/constants' import {AppState, DashboardQuery} from 'src/types/v2' interface StateProps { - queryLink: string queries: DashboardQuery[] } const TimeMachine: SFC = props => { - const {queryLink, queries} = props + const {queries} = props return (
- + {queriesState => { const divisions: DivisionProps[] = [ { @@ -71,9 +69,8 @@ const TimeMachine: SFC = props => { const mstp = (state: AppState) => { const timeMachine = getActiveTimeMachine(state) const queries = get(timeMachine, 'view.properties.queries', []) - const queryLink = getActiveSource(state).links.query - return {queryLink, queries} + return {queries} } export default connect( diff --git a/ui/src/shared/components/TimeSeries.tsx b/ui/src/shared/components/TimeSeries.tsx index 58c84eb8a0..7e6d189ac7 100644 --- a/ui/src/shared/components/TimeSeries.tsx +++ b/ui/src/shared/components/TimeSeries.tsx @@ -1,18 +1,21 @@ // Library import {Component} from 'react' import {isEqual, flatten} from 'lodash' +import {connect} from 'react-redux' // API import {executeQueries} from 'src/shared/apis/v2/query' // Types import {RemoteDataState, FluxTable} from 'src/types' -import {DashboardQuery} from 'src/types/v2/dashboards' +import {DashboardQuery, URLQuery} from 'src/types/v2/dashboards' +import {AppState, Source} from 'src/types/v2' // Utils import {AutoRefresher} from 'src/utils/AutoRefresher' import {parseResponse} from 'src/shared/parsing/flux/response' import {restartable, CancellationError} from 'src/utils/restartable' +import {getSources, getActiveSource} from 'src/sources/selectors' export const DEFAULT_TIME_SERIES = [{response: {results: []}}] @@ -24,14 +27,20 @@ export interface QueriesState { isInitialFetch: boolean } -interface Props { - link: string +interface StateProps { + dynamicSourceURL: string + sources: Source[] +} + +interface OwnProps { queries: DashboardQuery[] autoRefresher?: AutoRefresher inView?: boolean children: (r: QueriesState) => JSX.Element } +type Props = StateProps & OwnProps + interface State { loading: RemoteDataState tables: FluxTable[] @@ -93,8 +102,20 @@ class TimeSeries extends Component { }) } + private get queries(): URLQuery[] { + const {sources, queries, dynamicSourceURL} = this.props + + return queries.filter(query => !!query.text).map(query => { + const source = sources.find(source => source.id === query.source) + const url: string = source ? source.links.query : dynamicSourceURL + + return {url, text: query.text, type: query.type} + }) + } + private reload = async () => { - const {link, inView, queries} = this.props + const {inView} = this.props + const queries = this.queries if (!inView) { return @@ -112,7 +133,7 @@ class TimeSeries extends Component { }) try { - const results = await this.executeQueries(link, queries) + const results = await this.executeQueries(queries) const tables = flatten(results.map(r => parseResponse(r.csv))) const files = results.map(r => r.csv) @@ -134,11 +155,11 @@ class TimeSeries extends Component { } private shouldReload(prevProps: Props) { - if (prevProps.link !== this.props.link) { + if (!isEqual(prevProps.queries, this.props.queries)) { return true } - if (!isEqual(prevProps.queries, this.props.queries)) { + if (prevProps.dynamicSourceURL !== this.props.dynamicSourceURL) { return true } @@ -146,4 +167,14 @@ class TimeSeries extends Component { } } -export default TimeSeries +const mstp = (state: AppState) => { + const sources = getSources(state) + const dynamicSourceURL = getActiveSource(state).links.query + + return {sources, dynamicSourceURL} +} + +export default connect( + mstp, + null +)(TimeSeries) diff --git a/ui/src/shared/utils/view.ts b/ui/src/shared/utils/view.ts index e4cbb71d91..0c191d0371 100644 --- a/ui/src/shared/utils/view.ts +++ b/ui/src/shared/utils/view.ts @@ -12,6 +12,7 @@ import { NewView, ViewProperties, DashboardQuery, + InfluxLanguage, } from 'src/types/v2/dashboards' function defaultView() { @@ -20,8 +21,14 @@ function defaultView() { } } -function defaultViewQueries() { - return [] +function defaultViewQueries(): DashboardQuery[] { + return [ + { + text: '', + type: InfluxLanguage.Flux, + source: '', + }, + ] } function defaultLineViewProperties() { diff --git a/ui/src/types/v2/dashboards.ts b/ui/src/types/v2/dashboards.ts index 051dae24a8..eb4ed1aec0 100644 --- a/ui/src/types/v2/dashboards.ts +++ b/ui/src/types/v2/dashboards.ts @@ -43,7 +43,13 @@ export enum InfluxLanguage { export interface DashboardQuery { text: string type: InfluxLanguage - source: string + source: string // ID of source to use when running the query; may be empty, which means “use the dynamic source” +} + +export interface URLQuery { + text: string + type: InfluxLanguage + url: string } export interface Legend {