Pass templates through to proxy as ‘params’

ui/src/dashboards/components/Dashboard.js

@@ -67,6 +67,7 @@ const Dashboard = ({
       {cells.length ?
         <LayoutRenderer
           timeRange={timeRange}
+          templates={templates}
           cells={cells}
           autoRefresh={autoRefresh}
           source={source.links.proxy}

ui/src/shared/actions/timeSeries.js

@@ -35,10 +35,10 @@ export const handleError = (error, query, editQueryStatus) => {
   console.error(error)
 }
 
-export const fetchTimeSeriesAsync = async ({source, db, rp, query}, editQueryStatus = noop) => {
+export const fetchTimeSeriesAsync = async ({source, db, rp, query, params}, editQueryStatus = noop) => {
   handleLoading(query, editQueryStatus)
   try {
-    const {data} = await proxy({source, db, rp, query: query.text})
+    const {data} = await proxy({source, db, rp, query: query.text, params})
     return handleSuccess(data, query, editQueryStatus)
   } catch (error) {
     handleError(error, query, editQueryStatus)

ui/src/shared/components/AutoRefresh.js

@@ -17,18 +17,24 @@ const AutoRefresh = (ComposedComponent) => {
     propTypes: {
       children: element,
       autoRefresh: number.isRequired,
+      params: arrayOf(shape({
+        code: string.isRequired,
+        values: arrayOf(string),
+      })),
       queries: arrayOf(shape({
         host: oneOfType([string, arrayOf(string)]),
         text: string,
       }).isRequired).isRequired,
       editQueryStatus: func,
     },
+
     getInitialState() {
       return {
         lastQuerySuccessful: false,
         timeSeries: [],
       }
     },
+
     componentDidMount() {
       const {queries, autoRefresh} = this.props
       this.executeQueries(queries)
@@ -36,6 +42,7 @@ const AutoRefresh = (ComposedComponent) => {
         this.intervalID = setInterval(() => this.executeQueries(queries), autoRefresh)
       }
     },
+
     componentWillReceiveProps(nextProps) {
       const shouldRefetch = this.queryDifference(this.props.queries, nextProps.queries).length
 
@@ -51,41 +58,45 @@ const AutoRefresh = (ComposedComponent) => {
         }
       }
     },
+
     queryDifference(left, right) {
       const leftStrs = left.map((q) => `${q.host}${q.text}`)
       const rightStrs = right.map((q) => `${q.host}${q.text}`)
       return _.difference(_.union(leftStrs, rightStrs), _.intersection(leftStrs, rightStrs))
     },
+
     async executeQueries(queries) {
+      const {params, editQueryStatus} = this.props
+
       if (!queries.length) {
-        this.setState({
-          timeSeries: [],
-        })
+        this.setState({timeSeries: []})
         return
       }
 
       this.setState({isFetching: true})
-      let count = 0
-      const newSeries = []
-      for (const query of queries) {
+
+      const timeSeriesPromises = queries.map((query) => {
         const {host, database, rp} = query
-        const response = await fetchTimeSeriesAsync({source: host, db: database, rp, query}, this.props.editQueryStatus)
-        newSeries.push({response})
-        count += 1
-        if (count === queries.length) {
-          const querySuccessful = !this._noResultsForQuery(newSeries)
-          this.setState({
-            lastQuerySuccessful: querySuccessful,
-            isFetching: false,
-            timeSeries: newSeries,
-          })
-        }
-      }
+        return fetchTimeSeriesAsync({source: host, db: database, rp, query, params}, editQueryStatus)
+      })
+
+      Promise.all(timeSeriesPromises).then(timeSeries => {
+        const lastSeries = timeSeries[timeSeries.length - 1]
+        const lastQuerySuccessful = !this._noResultsForQuery(lastSeries)
+
+        this.setState({
+          timeSeries,
+          lastQuerySuccessful,
+          isFetching: false,
+        })
+      })
     },
+
     componentWillUnmount() {
       clearInterval(this.intervalID)
       this.intervalID = false
     },
+
     render() {
       const {timeSeries} = this.state
 
@@ -139,7 +150,7 @@ const AutoRefresh = (ComposedComponent) => {
       }
 
       return data.every((datum) => {
-        return datum.response.results.every((result) => {
+        return datum.results.every((result) => {
           return Object.keys(result).length === 0
         })
       })

ui/src/shared/components/LayoutRenderer.js

@@ -46,6 +46,10 @@ export const LayoutRenderer = React.createClass({
         type: string.isRequired,
       }).isRequired
     ),
+    templates: arrayOf(shape({
+      code: string.isRequired,
+      selected: string,
+    })).isRequired,
     host: string,
     source: string,
     onPositionChange: func,
@@ -89,9 +93,17 @@ export const LayoutRenderer = React.createClass({
     return text
   },
 
-  renderRefreshingGraph(type, queries, autoRefresh) {
+  renderRefreshingGraph(type, queries) {
+    const {autoRefresh, templates} = this.props
+
     if (type === 'single-stat') {
-      return <RefreshingSingleStat queries={[queries[0]]} autoRefresh={autoRefresh} />
+      return (
+        <RefreshingSingleStat
+          queries={[queries[0]]}
+          params={templates}
+          autoRefresh={autoRefresh}
+        />
+      )
     }
 
     const displayOptions = {
@@ -102,6 +114,7 @@ export const LayoutRenderer = React.createClass({
     return (
       <RefreshingLineGraph
         queries={queries}
+        params={templates}
         autoRefresh={autoRefresh}
         showSingleStat={type === 'line-plus-single-stat'}
         displayOptions={displayOptions}
@@ -110,7 +123,7 @@ export const LayoutRenderer = React.createClass({
   },
 
   generateVisualizations() {
-    const {autoRefresh, timeRange, source, cells, onEditCell, onRenameCell, onUpdateCell, onDeleteCell, onSummonOverlayTechnologies, shouldNotBeEditable} = this.props
+    const {timeRange, source, cells, onEditCell, onRenameCell, onUpdateCell, onDeleteCell, onSummonOverlayTechnologies, shouldNotBeEditable} = this.props
 
     return cells.map((cell) => {
       const queries = cell.queries.map((query) => {
@@ -143,7 +156,7 @@ export const LayoutRenderer = React.createClass({
             shouldNotBeEditable={shouldNotBeEditable}
             cell={cell}
           >
-            {this.renderRefreshingGraph(cell.type, queries, autoRefresh)}
+            {this.renderRefreshingGraph(cell.type, queries)}
           </NameableGraph>
         </div>
       )

ui/src/utils/queryUrlGenerator.js

@@ -1,11 +1,12 @@
 import AJAX from 'utils/ajax'
 
-export const proxy = async ({source, query, db, rp}) => {
+export const proxy = async ({source, query, db, rp, params}) => {
   try {
     return await AJAX({
       method: 'POST',
       url: source,
       data: {
+        params,
         query,
         db,
         rp,