Update query status state in thunk

ui/src/data_explorer/components/Table.js

@@ -1,7 +1,6 @@
 import React, {PropTypes} from 'react'
 import {Table, Column, Cell} from 'fixed-data-table'
 import Dimensions from 'react-dimensions'
-import fetchTimeSeries from 'shared/apis/timeSeries'
 import _ from 'lodash'
 import moment from 'moment'
 
@@ -45,10 +44,12 @@ const ChronoTable = React.createClass({
     query: shape({
       host: arrayOf(string.isRequired).isRequired,
       text: string.isRequired,
+      id: string.isRequired,
     }).isRequired,
     containerWidth: number.isRequired,
     height: number,
     onEditRawStatus: func,
+    fetchTimeSeries: func.isRequired,
   },
 
   getInitialState() {
@@ -82,44 +83,25 @@ const ChronoTable = React.createClass({
       return
     }
 
-    const {onEditRawStatus} = this.props
-
-    onEditRawStatus(query.id, {loading: true})
     this.setState({isLoading: true})
     // second param is db, we want to leave this blank
     try {
-      const {data} = await fetchTimeSeries(query.host, undefined, query.text)
+      const results = await this.props.fetchTimeSeries(query.host, undefined, query)
       this.setState({isLoading: false})
-      onEditRawStatus(query.id, {loading: false})
 
-      const results = _.get(data, ['results', '0'], false)
       if (!results) {
-        return
+        return this.setState({cellData: emptyCells})
       }
 
-      // 200 from server and no results = warn
-      if (_.isEmpty(results)) {
-        this.setState({cellData: emptyCells})
-        return onEditRawStatus(query.id, {warn: 'Your query is syntactically correct but returned no results'})
-      }
-
-      // 200 from chrono server but influx returns an error = warn
-      const warn = _.get(results, 'error', false)
-      if (warn) {
-        this.setState({cellData: emptyCells})
-        return onEditRawStatus(query.id, {warn})
-      }
-
-      // 200 from server and results contains data = success
       const cellData = _.get(results, ['series', '0'], {})
-      onEditRawStatus(query.id, {success: 'Success!'})
       this.setState({cellData})
     } catch (error) {
-      // 400 from chrono server = fail
-      const message = _.get(error, ['data', 'message'], error)
-      this.setState({isLoading: false})
-      console.error(message)
-      onEditRawStatus(query.id, {error: message})
+      this.setState({
+        isLoading: false,
+        cellData: emptyCells,
+      })
+      console.error(error)
+      throw error
     }
   },
 

ui/src/data_explorer/components/Visualization.js

@@ -35,7 +35,7 @@ const Visualization = React.createClass({
     activeQueryIndex: number,
     height: string,
     heightPixels: number,
-    onEditRawStatus: func.isRequired,
+    fetchTimeSeries: func.isRequired,
   },
 
   contextTypes: {
@@ -76,7 +76,7 @@ const Visualization = React.createClass({
   },
 
   render() {
-    const {queryConfigs, timeRange, height, heightPixels, onEditRawStatus, activeQueryIndex} = this.props
+    const {queryConfigs, timeRange, height, heightPixels, fetchTimeSeries, activeQueryIndex} = this.props
     const {source} = this.context
     const proxyLink = source.links.proxy
     const {view} = this.state
@@ -93,29 +93,29 @@ const Visualization = React.createClass({
       <div className="graph" style={{height}}>
         <VisHeader views={VIEWS} view={view} onToggleView={this.handleToggleView} name={name || 'Graph'}/>
         <div className={classNames({"graph-container": view === GRAPH, "table-container": view === TABLE})}>
-          {this.renderVisualization(view, queries, heightPixels, onEditRawStatus, activeQueryIndex)}
+          {this.renderVisualization(view, queries, heightPixels, fetchTimeSeries, activeQueryIndex)}
         </div>
       </div>
     )
   },
 
-  renderVisualization(view, queries, heightPixels, onEditRawStatus, activeQueryIndex) {
+  renderVisualization(view, queries, heightPixels, fetchTimeSeries, activeQueryIndex) {
     const activeQuery = queries[activeQueryIndex]
     const defaultQuery = queries[0]
 
     if (view === TABLE) {
-      return this.renderTable(activeQuery || defaultQuery, heightPixels, onEditRawStatus)
+      return this.renderTable(activeQuery || defaultQuery, heightPixels, fetchTimeSeries)
     }
 
     return this.renderGraph(queries)
   },
 
-  renderTable(query, heightPixels, onEditRawStatus) {
+  renderTable(query, heightPixels, fetchTimeSeries) {
     if (!query) {
       return <div className="generic-empty-state">Enter your query below</div>
     }
 
-    return <Table query={query} height={heightPixels} onEditRawStatus={onEditRawStatus} />
+    return <Table query={query} height={heightPixels} fetchTimeSeries={fetchTimeSeries} />
   },
 
   renderGraph(queries) {

ui/src/data_explorer/containers/DataExplorer.js

@@ -10,6 +10,7 @@ import Header from '../containers/Header'
 import ResizeContainer, {ResizeBottom} from 'src/shared/components/ResizeContainer'
 
 import {setAutoRefresh} from 'shared/actions/app'
+import {fetchTimeSeriesAsync} from 'shared/actions/timeSeries'
 import * as viewActions from 'src/data_explorer/actions/view'
 
 const {
@@ -40,6 +41,7 @@ const DataExplorer = React.createClass({
     dataExplorer: shape({
       queryIDs: arrayOf(string).isRequired,
     }).isRequired,
+    fetchTimeSeries: func.isRequired,
   },
 
   childContextTypes: {
@@ -72,7 +74,7 @@ const DataExplorer = React.createClass({
   },
 
   render() {
-    const {autoRefresh, handleChooseAutoRefresh, timeRange, setTimeRange, queryConfigs, queryConfigActions} = this.props
+    const {autoRefresh, handleChooseAutoRefresh, timeRange, setTimeRange, queryConfigs, queryConfigActions, fetchTimeSeries} = this.props
     const {activeQueryIndex} = this.state
 
     return (
@@ -88,7 +90,7 @@ const DataExplorer = React.createClass({
             timeRange={timeRange}
             queryConfigs={queryConfigs}
             activeQueryIndex={activeQueryIndex}
-            onEditRawStatus={queryConfigActions.editRawQueryStatus}
+            fetchTimeSeries={fetchTimeSeries}
           />
           <ResizeBottom>
             <QueryBuilder
@@ -124,6 +126,7 @@ function mapDispatchToProps(dispatch) {
     handleChooseAutoRefresh: bindActionCreators(setAutoRefresh, dispatch),
     setTimeRange: bindActionCreators(viewActions.setTimeRange, dispatch),
     queryConfigActions: bindActionCreators(viewActions, dispatch),
+    fetchTimeSeries: bindActionCreators(fetchTimeSeriesAsync, dispatch),
   }
 }
 

ui/src/shared/actions/timeSeries.js

@@ -1,10 +1,35 @@
-import {fetchTimeSeries} from 'shared/apis/timeSeries'
+import {proxy} from 'utils/queryUrlGenerator'
 import {editQueryStatus} from 'src/data_explorer/actions/view'
+import _ from 'lodash'
+
+export const fetchTimeSeriesAsync = (source, db, query) => async (dispatch) => {
+  dispatch(editQueryStatus(query.id, {loading: true}))
 
-export const fetchTimeSeriesAsync = (source, database, query) => async (dispatch) => {
   try {
-    const {data} = await fetchTimeSeries(source, database, query)
+    const {data} = await proxy({source, db, query: query.text})
+    const results = _.get(data, ['results', '0'], false)
+    const warn = _.get(results, 'error', false)
+
+    // 200 from server and no results = warn
+    if (_.isEmpty(results)) {
+      dispatch(editQueryStatus(query.id, {warn: 'Your query is syntactically correct but returned no results'}))
+      return results
+    }
+
+    // 200 from chrono server but influx returns an error = warning
+    if (warn) {
+      dispatch(editQueryStatus(query.id, {warn}))
+      return warn
+    }
+
+    // 200 from server and results contains data = success
+    dispatch(editQueryStatus(query.id, {success: 'Success!'}))
+    return results
   } catch (error) {
+    const message = _.get(error, ['data', 'message'], error)
+
+    // 400 from chrono server = fail
+    dispatch(editQueryStatus(query.id, {error: message}))
     console.error(error)
     throw error
   }