Include status in cell editor overlay

ui/src/dashboards/actions/index.js

@@ -103,6 +103,14 @@ export const deleteDashboardCell = (cell) => ({
   },
 })
 
+export const editCellQueryStatus = (queryID, status) => ({
+  type: 'EDIT_CELL_QUERY_STATUS',
+  payload: {
+    queryID,
+    status,
+  },
+})
+
 // Async Action Creators
 
 export const getDashboardsAsync = (dashboardID) => async (dispatch) => {

ui/src/dashboards/components/CellEditorOverlay.js

@@ -29,6 +29,7 @@ class CellEditorOverlay extends Component {
     this.handleEditRawText = ::this.handleEditRawText
 
     const {cell: {name, type, queries}} = props
+
     const queriesWorkingDraft = _.cloneDeep(queries.map(({queryConfig}) => ({...queryConfig, id: uuid.v4()})))
 
     this.state = {
@@ -39,6 +40,17 @@ class CellEditorOverlay extends Component {
     }
   }
 
+  componentWillReceiveProps(nextProps) {
+    const {status, queryID} = this.props.queryStatus
+    const nextStatus = nextProps.queryStatus
+    if (nextStatus.status && nextStatus.queryID) {
+      if (nextStatus.queryID !== queryID || nextStatus.status !== status) {
+        const nextQueries = this.state.queriesWorkingDraft.map((q) => q.id === queryID ? ({...q, status: nextStatus.status}) : q)
+        this.setState({queriesWorkingDraft: nextQueries})
+      }
+    }
+  }
+
   queryStateReducer(queryModifier) {
     return (queryID, payload) => {
       const {queriesWorkingDraft} = this.state
@@ -111,11 +123,12 @@ class CellEditorOverlay extends Component {
 
   render() {
     const {
-      onCancel,
-      autoRefresh,
-      timeRange,
       source,
+      onCancel,
+      timeRange,
+      autoRefresh,
       fetchTimeSeries,
+      editQueryStatus,
     } = this.props
 
     const {
@@ -142,6 +155,7 @@ class CellEditorOverlay extends Component {
             cellType={cellWorkingType}
             cellName={cellWorkingName}
             fetchTimeSeries={fetchTimeSeries}
+            editQueryStatus={editQueryStatus}
           />
           <ResizeBottom>
             <div style={{display: 'flex', flexDirection: 'column', height: '100%'}}>
@@ -191,6 +205,11 @@ CellEditorOverlay.propTypes = {
     }),
   }),
   fetchTimeSeries: func.isRequired,
+  editQueryStatus: func.isRequired,
+  queryStatus: shape({
+    queryID: string,
+    status: shape({}),
+  }).isRequired,
 }
 
 export default CellEditorOverlay

ui/src/dashboards/containers/DashboardPage.js

@@ -56,6 +56,10 @@ const DashboardPage = React.createClass({
     inPresentationMode: bool.isRequired,
     handleClickPresentationButton: func,
     fetchTimeSeries: func,
+    cellQueryStatus: shape({
+      queryID: string,
+      status: shape(),
+    }).isRequired,
   },
 
   childContextTypes: {
@@ -160,15 +164,17 @@ const DashboardPage = React.createClass({
 
   render() {
     const {
-      dashboards,
-      params: {sourceID, dashboardID},
-      inPresentationMode,
-      handleClickPresentationButton,
       source,
-      handleChooseAutoRefresh,
-      autoRefresh,
       timeRange,
+      dashboards,
+      autoRefresh,
       fetchTimeSeries,
+      cellQueryStatus,
+      dashboardActions,
+      inPresentationMode,
+      handleChooseAutoRefresh,
+      handleClickPresentationButton,
+      params: {sourceID, dashboardID},
     } = this.props
 
     const dashboard = dashboards.find(d => d.id === +dashboardID)
@@ -190,6 +196,8 @@ const DashboardPage = React.createClass({
               onCancel={this.handleDismissOverlay}
               onSave={this.handleSaveEditedCell}
               fetchTimeSeries={fetchTimeSeries}
+              editQueryStatus={dashboardActions.editCellQueryStatus}
+              queryStatus={cellQueryStatus}
             /> :
             null
         }
@@ -260,6 +268,7 @@ const mapStateToProps = (state) => {
     dashboardUI: {
       dashboards,
       timeRange,
+      cellQueryStatus,
     },
   } = state
 
@@ -268,6 +277,7 @@ const mapStateToProps = (state) => {
     autoRefresh,
     timeRange,
     inPresentationMode,
+    cellQueryStatus,
   }
 }
 

ui/src/dashboards/reducers/ui.js

@@ -7,6 +7,7 @@ const initialState = {
   dashboards: [],
   timeRange: {lower, upper},
   isEditMode: false,
+  cellQueryStatus: {queryID: null, status: null},
 }
 
 export default function ui(state = initialState, action) {
@@ -157,6 +158,12 @@ export default function ui(state = initialState, action) {
 
       return {...state, ...newState}
     }
+
+    case 'EDIT_CELL_QUERY_STATUS': {
+      const {queryID, status} = action.payload
+
+      return {...state, cellQueryStatus: {queryID, status}}
+    }
   }
 
   return state

ui/src/shared/actions/timeSeries.js

@@ -2,7 +2,7 @@ import {proxy} from 'utils/queryUrlGenerator'
 import _ from 'lodash'
 
 const NOOP = () => ({
-  type: 'I_NEED_TO_EDIT_QUERY_STATUS',
+  type: 'RUNNING_FETCH_TIME_SERIES',
 })
 
 export const handleLoading = (query, editQueryStatus, dispatch) => {