Pass editQueryStatus as prop and refactor Visualization

ui/src/data_explorer/components/View.js

@@ -0,0 +1,81 @@
+import React, {PropTypes} from 'react'
+
+import Table from './Table'
+import AutoRefresh from 'shared/components/AutoRefresh'
+import LineGraph from 'shared/components/LineGraph'
+import SingleStat from 'shared/components/SingleStat'
+const RefreshingLineGraph = AutoRefresh(LineGraph)
+const RefreshingSingleStat = AutoRefresh(SingleStat)
+
+const View = ({
+  view,
+  queries,
+  cellType,
+  autoRefresh,
+  heightPixels,
+  editQueryStatus,
+  fetchTimeSeries,
+  activeQueryIndex,
+}) => {
+  const activeQuery = queries[activeQueryIndex]
+  const defaultQuery = queries[0]
+  const query = activeQuery || defaultQuery
+
+  if (view === 'table') {
+    if (!query) {
+      return <div className="generic-empty-state">Enter your query above</div>
+    }
+
+    return (
+      <Table
+        query={query}
+        height={heightPixels}
+        editQueryStatus={editQueryStatus}
+        fetchTimeSeries={fetchTimeSeries}
+      />
+    )
+  }
+
+  if (cellType === 'single-stat') {
+    return <RefreshingSingleStat queries={[queries[0]]} autoRefresh={autoRefresh} />
+  }
+
+  const displayOptions = {
+    stepPlot: cellType === 'line-stepplot',
+    stackedGraph: cellType === 'line-stacked',
+  }
+
+  return (
+    <RefreshingLineGraph
+      queries={queries}
+      autoRefresh={autoRefresh}
+      activeQueryIndex={activeQueryIndex}
+      isInDataExplorer={true}
+      showSingleStat={cellType === "line-plus-single-stat"}
+      displayOptions={displayOptions}
+      fetchTimeSeries={fetchTimeSeries}
+      editQueryStatus={editQueryStatus}
+    />
+  )
+}
+
+const {
+  arrayOf,
+  func,
+  number,
+  shape,
+  string,
+} = PropTypes
+
+View.propTypes = {
+  view: string.isRequired,
+  queries: arrayOf(shape()).isRequired,
+  cellType: string,
+  autoRefresh: number.isRequired,
+  heightPixels: number,
+  editQueryStatus: func,
+  fetchTimeSeries: func.isRequired,
+  activeQueryIndex: number,
+}
+
+export default View

ui/src/data_explorer/components/Visualization.js

@@ -1,14 +1,8 @@
 import React, {PropTypes} from 'react'
 import buildInfluxQLQuery from 'utils/influxql'
 import classNames from 'classnames'
-import AutoRefresh from 'shared/components/AutoRefresh'
-import LineGraph from 'shared/components/LineGraph'
-import SingleStat from 'shared/components/SingleStat'
-import Table from './Table'
 import VisHeader from 'src/data_explorer/components/VisHeader'
-
+import View from 'src/data_explorer/components/View'
-const RefreshingLineGraph = AutoRefresh(LineGraph)
-const RefreshingSingleStat = AutoRefresh(SingleStat)
 
 const GRAPH = 'graph'
 const TABLE = 'table'
@@ -36,6 +30,7 @@ const Visualization = React.createClass({
     height: string,
     heightPixels: number,
     fetchTimeSeries: func.isRequired,
+    editQueryStatus: func,
   },
 
   contextTypes: {
@@ -76,7 +71,17 @@ const Visualization = React.createClass({
   },
 
   render() {
-    const {queryConfigs, timeRange, height, heightPixels, fetchTimeSeries, activeQueryIndex} = this.props
+    const {
+      height,
+      cellType,
+      timeRange,
+      autoRefresh,
+      heightPixels,
+      queryConfigs,
+      editQueryStatus,
+      fetchTimeSeries,
+      activeQueryIndex,
+    } = this.props
     const {source} = this.context
     const proxyLink = source.links.proxy
     const {view} = this.state
@@ -93,52 +98,18 @@ 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, fetchTimeSeries, activeQueryIndex)}
+          <View
-        </div>
+            view={view}
-      </div>
-    )
-  },
-
-  renderVisualization(view, queries, heightPixels, fetchTimeSeries, activeQueryIndex) {
-    const activeQuery = queries[activeQueryIndex]
-    const defaultQuery = queries[0]
-
-    if (view === TABLE) {
-      return this.renderTable(activeQuery || defaultQuery, heightPixels, fetchTimeSeries)
-    }
-
-    return this.renderGraph(queries)
-  },
-
-  renderTable(query, heightPixels, fetchTimeSeries) {
-    if (!query) {
-      return <div className="generic-empty-state">Enter your query above</div>
-    }
-
-    return <Table query={query} height={heightPixels} fetchTimeSeries={fetchTimeSeries} />
-  },
-
-  renderGraph(queries) {
-    const {cellType, autoRefresh, activeQueryIndex} = this.props
-    const isInDataExplorer = true
-
-    if (cellType === 'single-stat') {
-      return <RefreshingSingleStat queries={[queries[0]]} autoRefresh={autoRefresh} />
-    }
-
-    const displayOptions = {
-      stepPlot: cellType === 'line-stepplot',
-      stackedGraph: cellType === 'line-stacked',
-    }
-    return (
-      <RefreshingLineGraph
             queries={queries}
+            cellType={cellType}
             autoRefresh={autoRefresh}
+            heightPixels={heightPixels}
+            editQueryStatus={editQueryStatus}
+            fetchTimeSeries={fetchTimeSeries}
             activeQueryIndex={activeQueryIndex}
-        isInDataExplorer={isInDataExplorer}
-        showSingleStat={cellType === "line-plus-single-stat"}
-        displayOptions={displayOptions}
           />
+        </div>
+      </div>
     )
   },
 })

ui/src/data_explorer/containers/DataExplorer.js

@@ -11,6 +11,7 @@ import ResizeContainer, {ResizeBottom} from 'src/shared/components/ResizeContain
 
 import {setAutoRefresh} from 'shared/actions/app'
 import {fetchTimeSeriesAsync} from 'shared/actions/timeSeries'
+import {editQueryStatus} from 'src/data_explorer/actions/view'
 import * as viewActions from 'src/data_explorer/actions/view'
 
 const {
@@ -112,8 +113,8 @@ const DataExplorer = React.createClass({
               timeRange={timeRange}
               queryConfigs={queryConfigs}
               activeQueryIndex={activeQueryIndex}
-              onEditRawStatus={queryConfigActions.editRawQueryStatus}
               fetchTimeSeries={fetchTimeSeries}
+              editQueryStatus={editQueryStatus}
             />
           </ResizeBottom>
         </ResizeContainer>

ui/src/shared/actions/timeSeries.js

@@ -1,12 +1,15 @@
 import {proxy} from 'utils/queryUrlGenerator'
-import {editQueryStatus} from 'src/data_explorer/actions/view'
 import _ from 'lodash'
 
-export const handleLoading = (query, dispatch) => {
+const NOOP = () => ({
+  type: 'I_NEED_TO_EDIT_QUERY_STATUS',
+})
+
+export const handleLoading = (query, editQueryStatus, dispatch) => {
   dispatch(editQueryStatus(query.id, {loading: true}))
 }
 // {results: [{}]}
-export const handleSuccess = (data, query, dispatch) => {
+export const handleSuccess = (data, query, editQueryStatus, dispatch) => {
   const {results} = data
   const error = _.get(results, ['0', 'error'], false)
   const series = _.get(results, ['0', 'series'], false)
@@ -27,7 +30,7 @@ export const handleSuccess = (data, query, dispatch) => {
   return data
 }
 
-export const handleError = (error, query, dispatch) => {
+export const handleError = (error, query, editQueryStatus, dispatch) => {
   const message = _.get(error, ['data', 'message'], error)
 
   // 400 from chrono server = fail
@@ -35,13 +38,13 @@ export const handleError = (error, query, dispatch) => {
   console.error(error)
 }
 
-export const fetchTimeSeriesAsync = ({source, db, rp, query}) => async (dispatch) => {
+export const fetchTimeSeriesAsync = ({source, db, rp, query}, editQueryStatus = NOOP) => async (dispatch) => {
-  handleLoading(query, dispatch)
+  handleLoading(query, editQueryStatus, dispatch)
   try {
     const {data} = await proxy({source, db, rp, query: query.text})
-    return handleSuccess(data, query, dispatch)
+    return handleSuccess(data, query, editQueryStatus, dispatch)
   } catch (error) {
-    handleError(error, query, dispatch)
+    handleError(error, query, editQueryStatus, dispatch)
     throw error
   }
 }

ui/src/shared/components/AutoRefresh.js

@@ -25,6 +25,7 @@ const AutoRefresh = (ComposedComponent) => {
         text: string,
       }).isRequired).isRequired,
       fetchTimeSeries: func.isRequired,
+      editQueryStatus: func,
     },
     getInitialState() {
       return {
@@ -72,7 +73,7 @@ const AutoRefresh = (ComposedComponent) => {
       const newSeries = []
       for (const query of queries) {
         const {host, database, rp} = query
-        const response = await this.props.fetchTimeSeries({source: host, db: database, rp, query})
+        const response = await this.props.fetchTimeSeries({source: host, db: database, rp, query}, this.props.editQueryStatus)
         newSeries.push({response})
         count += 1
         if (count === queries.length) {