Support custom sources in TimeSeries component

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<ExecuteFluxQueryResult[]> => {
-  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
 }

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<Props> {
   public static defaultProps: Partial<Props> = {
     inView: true,
@@ -43,7 +32,6 @@ class RefreshingView extends PureComponent<Props> {
 
   public render() {
     const {
-      link,
       inView,
       onZoom,
       viewID,
@@ -54,7 +42,6 @@ class RefreshingView extends PureComponent<Props> {
 
     return (
       <TimeSeries
-        link={link}
         inView={inView}
         autoRefresher={GlobalAutoRefresher}
         queries={this.queries}
@@ -100,15 +87,4 @@ class RefreshingView extends PureComponent<Props> {
   }
 }
 
-const mstp = (state: AppState): StateProps => {
-  const link = getActiveSource(state).links.query
-
-  return {link}
-}
-
-const mdtp = {}
-
-export default connect<StateProps, DispatchProps, OwnProps>(
-  mstp,
-  mdtp
-)(RefreshingView)
+export default RefreshingView

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<StateProps> = props => {
-  const {queryLink, queries} = props
+  const {queries} = props
 
   return (
     <div className="time-machine">
-      <TimeSeries link={queryLink} queries={queries}>
+      <TimeSeries queries={queries}>
         {queriesState => {
           const divisions: DivisionProps[] = [
             {
@@ -71,9 +69,8 @@ const TimeMachine: SFC<StateProps> = 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<StateProps, {}, {}>(

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<Props, State> {
     })
   }
 
+  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<Props, State> {
     })
 
     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<Props, State> {
   }
 
   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<Props, State> {
   }
 }
 
-export default TimeSeries
+const mstp = (state: AppState) => {
+  const sources = getSources(state)
+  const dynamicSourceURL = getActiveSource(state).links.query
+
+  return {sources, dynamicSourceURL}
+}
+
+export default connect<StateProps, {}, OwnProps>(
+  mstp,
+  null
+)(TimeSeries)

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() {

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 {