WIP

ui/src/dashboards/actions/index.js

@@ -6,15 +6,12 @@ import {
   addDashboardCell as addDashboardCellAJAX,
   deleteDashboardCell as deleteDashboardCellAJAX,
   editTemplateVariable as editTemplateVariableAJAX,
-  runTemplateVariableQuery as runTemplateVariableQueryAJAX,
 } from 'src/dashboards/apis'
 
 import {publishNotification} from 'shared/actions/notifications'
 import {publishAutoDismissingNotification} from 'shared/dispatchers'
 // import {errorThrown} from 'shared/actions/errors'
 
-import parsers from 'shared/parsing'
-
 import {NEW_DEFAULT_DASHBOARD_CELL} from 'src/dashboards/constants'
 
 import {TEMPLATE_VARIABLE_SELECTED} from 'shared/constants/actionTypes'
@@ -135,14 +132,6 @@ export const editTemplateVariableSuccess = (dashboardID, data) => ({
   },
 })
 
-export const runTemplateVariableQuerySuccess = (templateVariable, values) => ({
-  type: 'RUN_TEMPLATE_VARIABLE_QUERY_SUCCESS',
-  payload: {
-    templateVariable,
-    values,
-  },
-})
-
 // Async Action Creators
 
 export const getDashboardsAsync = () => async dispatch => {
@@ -229,30 +218,3 @@ export const editTemplateVariableAsync = (
     // dispatch(editTemplateVariableFailed())
   }
 }
-
-export const runTemplateVariableQueryAsync = (
-  templateVariable,
-  {source, query, database, rp, tempVars, type, measurement, tagKey}
-) => async dispatch => {
-  // dispatch(runTemplateVariableQueryRequested())
-  try {
-    const {data} = await runTemplateVariableQueryAJAX({
-      source,
-      query,
-      db: database,
-      rp,
-      tempVars,
-    })
-    const parsedData = parsers[type](data, tagKey || measurement) // tagKey covers tagKey and fieldKey
-    if (parsedData.errors.length) {
-      throw parsedData.errors
-    }
-    dispatch(
-      runTemplateVariableQuerySuccess(templateVariable, parsedData[type])
-    )
-  } catch (error) {
-    console.error(error)
-    // dispatch(errorThrown(error))
-    // dispatch(runTemplateVariableQueryFailed())
-  }
-}

ui/src/dashboards/apis/index.js

@@ -90,13 +90,15 @@ export const editTemplateVariable = async (
   }
 }
 
-export const runTemplateVariableQuery = async ({
+export const runTemplateVariableQuery = async (
   source,
-  query,
-  db,
-  // rp, TODO
-  tempVars,
-}) => {
+  {
+    query,
+    db,
+    // rp, TODO
+    tempVars,
+  }
+) => {
   try {
     // TODO: add rp as argument to proxy
     return await proxy({source: source.links.proxy, query, db, tempVars})

ui/src/dashboards/components/TemplateVariableManager.js

@@ -1,4 +1,4 @@
-import React, {PropTypes} from 'react'
+import React, {Component, PropTypes} from 'react'
 import OnClickOutside from 'react-onclickoutside'
 import TemplateVariableTable
   from 'src/dashboards/components/TemplateVariableTable'
@@ -6,8 +6,10 @@ import TemplateVariableTable
 const TemplateVariableManager = ({
   onClose,
   onEditTemplateVariables,
-  onRunTemplateVariableQuery,
+  source,
   templates,
+  onRunQuerySuccess,
+  onRunQueryFailure,
 }) => (
   <div className="template-variable-manager">
     <div className="template-variable-manager--header">
@@ -19,7 +21,8 @@ const TemplateVariableManager = ({
         <button
           className="btn btn-primary btn-sm"
           onClick={onEditTemplateVariables}
-        >Save Template
+        >
+          Save Template
         </button>
         <span
           className="icon remove"
@@ -30,19 +33,108 @@ const TemplateVariableManager = ({
     </div>
     <div className="template-variable-manager--body">
       <TemplateVariableTable
+        source={source}
         templates={templates}
-        onRunTemplateVariableQuery={onRunTemplateVariableQuery}
+        onRunQuerySuccess={onRunQuerySuccess}
+        onRunQueryFailure={onRunQueryFailure}
       />
     </div>
   </div>
 )
 
+class TemplateVariableManagerWrapper extends Component {
+  constructor(props) {
+    super(props)
+
+    this.state = {
+      rows: this.props.templates,
+    }
+
+    this.onRunQuerySuccess = ::this.onRunQuerySuccess
+  }
+
+  onRunQuerySuccess(template, queryConfig, parsedData, {tempVar, label}) {
+    const {rows} = this.state
+    const {id} = template
+    const {
+      type,
+      query: influxql,
+      database: db,
+      measurement,
+      tagKey,
+    } = queryConfig
+
+    // Determine which is the selectedValue, if any
+    const currentRow = rows.find(row => row.tempVar === tempVar)
+
+    let selectedValue
+    if (currentRow && currentRow.values && currentRow.values.length) {
+      selectedValue = currentRow.values.find(val => val.selected).value
+    }
+
+    if (
+      !selectedValue &&
+      currentRow &&
+      currentRow.values &&
+      currentRow.values.length
+    ) {
+      selectedValue = currentRow.values[0].value
+    }
+
+    const values = parsedData.map(value => ({
+      value,
+      type,
+      selected: selectedValue === value,
+    }))
+
+    const templateVariable = {
+      tempVar,
+      values,
+      id,
+      type,
+      label,
+      query: {
+        influxql,
+        db,
+        // rp, TODO
+        measurement,
+        tagKey,
+      },
+    }
+
+    const newRows = rows.map(r => (r.id === template.id ? templateVariable : r))
+
+    console.log(newRows)
+
+    this.setState({rows: newRows})
+  }
+
+  render() {
+    return (
+      <TemplateVariableManager
+        {...this.props}
+        onRunQuerySuccess={this.onRunQuerySuccess}
+        templates={this.state.rows}
+      />
+    )
+  }
+}
+
 const {arrayOf, bool, func, shape, string} = PropTypes
 
 TemplateVariableManager.propTypes = {
+  ...TemplateVariableManagerWrapper.propTypes,
+  onRunQuerySuccess: func.isRequired,
+}
+
+TemplateVariableManagerWrapper.propTypes = {
   onClose: func.isRequired,
   onEditTemplateVariables: func.isRequired,
-  onRunTemplateVariableQuery: func.isRequired,
+  source: shape({
+    links: shape({
+      proxy: string,
+    }),
+  }).isRequired,
   templates: arrayOf(
     shape({
       type: string.isRequired,
@@ -61,6 +153,7 @@ TemplateVariableManager.propTypes = {
       ).isRequired,
     })
   ),
+  onRunQueryFailure: func.isRequired,
 }
 
-export default OnClickOutside(TemplateVariableManager)
+export default OnClickOutside(TemplateVariableManagerWrapper)

ui/src/dashboards/components/TemplateVariableRow.js

@@ -4,6 +4,12 @@ import Dropdown from 'shared/components/Dropdown'
 import TemplateQueryBuilder
   from 'src/dashboards/components/TemplateQueryBuilder'
 
+import {
+  runTemplateVariableQuery as runTemplateVariableQueryAJAX,
+} from 'src/dashboards/apis'
+
+import parsers from 'shared/parsing'
+
 import {TEMPLATE_TYPES} from 'src/dashboards/constants'
 import q
   from 'src/dashboards/utils/onlyTheBigliestBigLeagueTemplateVariableQueryGenerator'
@@ -69,7 +75,9 @@ const TemplateVariableRow = ({
       />
     </div>
     <div className="td">
-      {values.map(({value}) => value).join(', ')}
+      {values.length
+        ? values.map(({value}) => value).join(', ')
+        : '(Query returned no values)'}
     </div>
     <div className="td" style={{display: 'flex'}}>
       {isEditing
@@ -127,28 +135,35 @@ class RowWrapper extends Component {
       autoFocusTarget: null,
     }
 
-    this.handleRunQuery = ::this.handleRunQuery
+    this.handleRunQueryRequested = ::this.handleRunQueryRequested
     this.handleSelectType = ::this.handleSelectType
     this.handleSelectDatabase = ::this.handleSelectDatabase
     this.handleSelectMeasurement = ::this.handleSelectMeasurement
     this.handleSelectTagKey = ::this.handleSelectTagKey
     this.handleStartEdit = ::this.handleStartEdit
     this.handleCancelEdit = ::this.handleCancelEdit
+    this.runTemplateVariableQuery = ::this.runTemplateVariableQuery
   }
 
-  handleRunQuery({
+  handleRunQueryRequested({
     selectedDatabase: database,
     selectedMeasurement: measurement,
     selectedTagKey: tagKey,
     selectedType: type,
   }) {
-    return e => {
+    return async e => {
       e.preventDefault()
 
       const label = e.target.label.value
       const tempVar = e.target.tempVar.value
 
-      const {template, onRunTemplateVariableQuery} = this.props
+      const {
+        source,
+        template,
+        onRunQuerySuccess,
+        onRunQueryFailure,
+      } = this.props
+
       const {query, tempVars} = q({
         type,
         label,
@@ -161,7 +176,7 @@ class RowWrapper extends Component {
         },
       })
 
-      onRunTemplateVariableQuery(template, {
+      const queryConfig = {
         query,
         database,
         // rp: TODO
@@ -169,9 +184,17 @@ class RowWrapper extends Component {
         type,
         measurement,
         tagKey,
-      })
-
-      // TODO: save values to state in TVM, using template
+      }
+      console.log('bob', this.runTemplateVariableQuery)
+      try {
+        const parsedData = await this.runTemplateVariableQuery(
+          source,
+          queryConfig
+        )
+        onRunQuerySuccess(template, queryConfig, parsedData, {tempVar, label})
+      } catch (error) {
+        onRunQueryFailure(error)
+      }
     }
   }
 
@@ -215,6 +238,29 @@ class RowWrapper extends Component {
     this.setState({selectedTagKey: item.text})
   }
 
+  async runTemplateVariableQuery(
+    source,
+    {query, database, rp, tempVars, type, measurement, tagKey}
+  ) {
+    try {
+      const {data} = await runTemplateVariableQueryAJAX(source, {
+        query,
+        db: database,
+        rp,
+        tempVars,
+      })
+      const parsedData = parsers[type](data, tagKey || measurement) // tagKey covers tagKey and fieldKey
+      if (parsedData.errors.length) {
+        throw parsedData.errors
+      }
+
+      return parsedData[type]
+    } catch (error) {
+      console.error(error)
+      throw error
+    }
+  }
+
   render() {
     const {
       isEditing,
@@ -240,7 +286,7 @@ class RowWrapper extends Component {
         onStartEdit={this.handleStartEdit}
         onCancelEdit={this.handleCancelEdit}
         autoFocusTarget={autoFocusTarget}
-        onSubmit={this.handleRunQuery}
+        onSubmit={this.handleRunQueryRequested}
       />
     )
   }
@@ -249,6 +295,11 @@ class RowWrapper extends Component {
 const {arrayOf, bool, func, shape, string} = PropTypes
 
 RowWrapper.propTypes = {
+  source: shape({
+    links: shape({
+      proxy: string,
+    }),
+  }).isRequired,
   template: shape({
     type: string.isRequired,
     label: string.isRequired,
@@ -270,7 +321,8 @@ RowWrapper.propTypes = {
       self: string.isRequired,
     }).isRequired,
   }),
-  onRunTemplateVariableQuery: func.isRequired,
+  onRunQuerySuccess: func.isRequired,
+  onRunQueryFailure: func.isRequired,
 }
 
 TemplateVariableRow.propTypes = {

ui/src/dashboards/components/TemplateVariableTable.js

@@ -2,7 +2,12 @@ import React, {PropTypes} from 'react'
 
 import TemplateVariableRow from 'src/dashboards/components/TemplateVariableRow'
 
-const TemplateVariableTable = ({templates, onRunTemplateVariableQuery}) => (
+const TemplateVariableTable = ({
+  source,
+  templates,
+  onRunQuerySuccess,
+  onRunQueryFailure,
+}) => (
   <div className="table-custom">
     <div className="thead">
       <div className="tr">
@@ -18,8 +23,10 @@ const TemplateVariableTable = ({templates, onRunTemplateVariableQuery}) => (
       {templates.map(t => (
         <TemplateVariableRow
           key={t.id}
+          source={source}
           template={t}
-          onRunTemplateVariableQuery={onRunTemplateVariableQuery}
+          onRunQuerySuccess={onRunQuerySuccess}
+          onRunQueryFailure={onRunQueryFailure}
         />
       ))}
     </div>
@@ -29,6 +36,11 @@ const TemplateVariableTable = ({templates, onRunTemplateVariableQuery}) => (
 const {arrayOf, bool, func, shape, string} = PropTypes
 
 TemplateVariableTable.propTypes = {
+  source: shape({
+    links: shape({
+      proxy: string,
+    }),
+  }).isRequired,
   templates: arrayOf(
     shape({
       type: string.isRequired,
@@ -47,7 +59,8 @@ TemplateVariableTable.propTypes = {
       ).isRequired,
     })
   ),
-  onRunTemplateVariableQuery: func.isRequired,
+  onRunQuerySuccess: func.isRequired,
+  onRunQueryFailure: func.isRequired,
 }
 
 export default TemplateVariableTable

ui/src/dashboards/containers/DashboardPage.js

@@ -45,6 +45,7 @@ class DashboardPage extends Component {
     this.handleRunTemplateVariableQuery = ::this.handleRunTemplateVariableQuery
     this.handleSelectTemplate = ::this.handleSelectTemplate
     this.handleEditTemplateVariables = ::this.handleEditTemplateVariables
+    this.handleRunQueryFailure = ::this.handleRunQueryFailure
   }
 
   componentDidMount() {
@@ -185,6 +186,11 @@ class DashboardPage extends Component {
     //   console.log('hello')
   }
 
+  handleRunQueryFailure(error) {
+    console.error(error)
+    // this.props.errorThrown(error)
+  }
+
   getActiveDashboard() {
     const {params: {dashboardID}, dashboards} = this.props
     return dashboards.find(d => d.id === +dashboardID)
@@ -214,10 +220,11 @@ class DashboardPage extends Component {
           ? <OverlayTechnologies>
               <TemplateVariableManager
                 onClose={this.handleCloseTemplateManager}
-                onRunTemplateVariableQuery={this.handleRunTemplateVariableQuery}
                 onEditTemplateVariables={this.handleEditTemplateVariables}
                 handleClickOutside={this.handleCloseTemplateManager}
+                source={source}
                 templates={dashboard.templates}
+                onRunQueryFailure={this.handleRunQueryFailure}
               />
             </OverlayTechnologies>
           : null}
@@ -368,6 +375,7 @@ const mapDispatchToProps = dispatch => ({
   handleChooseAutoRefresh: bindActionCreators(setAutoRefresh, dispatch),
   handleClickPresentationButton: presentationButtonDispatcher(dispatch),
   dashboardActions: bindActionCreators(dashboardActionCreators, dispatch),
+  // errorThrown: bindActionCreators(errorThrownAction, dispatch),
 })
 
 export default connect(mapStateToProps, mapDispatchToProps)(DashboardPage)

ui/src/shared/parsing/showFieldKeys.js

@@ -2,7 +2,7 @@ export default function parseShowFieldKeys(response) {
   const errors = []
   const fieldSets = {}
 
-  response.results.forEach((result) => {
+  response.results.forEach(result => {
     if (result.error) {
       errors.push(result.error)
       return
@@ -14,7 +14,7 @@ export default function parseShowFieldKeys(response) {
 
     const series = result.series[0]
     const fieldKeyIndex = series.columns.indexOf('fieldKey')
-    const fields = series.values.map((value) => {
+    const fields = series.values.map(value => {
       return value[fieldKeyIndex]
     })
     const measurement = series.name