WIP show query errors on cells

ui/src/dashboards/actions/index.js

@@ -158,6 +158,21 @@ export const editTemplateVariableValues = (
   },
 })
 
+export const editDashboardQueryStatus = (
+  dashboardID,
+  cellID,
+  queryID,
+  status
+) => ({
+  type: 'EDIT_DASHBOARD_QUERY_STATUS',
+  payload: {
+    dashboardID,
+    cellID,
+    queryID,
+    status,
+  },
+})
+
 // Async Action Creators
 
 export const getDashboardsAsync = () => async dispatch => {

ui/src/dashboards/components/Dashboard.js

@@ -17,14 +17,15 @@ const Dashboard = ({
   onUpdateCell,
   onDeleteCell,
   synchronizer,
+  editQueryStatus,
+  onSelectTemplate,
   onPositionChange,
+  onCancelEditCell,
   inPresentationMode,
   onOpenTemplateManager,
+  showTemplateControlBar,
   templatesIncludingDashTime,
   onSummonOverlayTechnologies,
-  onSelectTemplate,
-  showTemplateControlBar,
-  onCancelEditCell,
 }) => {
   const cells = dashboard.cells.map(cell => {
     const dashboardCell = {...cell}
@@ -73,6 +74,7 @@ const Dashboard = ({
               onSummonOverlayTechnologies={onSummonOverlayTechnologies}
               synchronizer={synchronizer}
               onZoom={onZoom}
+              editQueryStatus={editQueryStatus}
             />
           : <div className="dashboard__empty">
               <p>This Dashboard has no Cells</p>
@@ -116,6 +118,7 @@ Dashboard.propTypes = {
   onRenameCell: func,
   onUpdateCell: func,
   onDeleteCell: func,
+  editQueryStatus: func,
   onSummonOverlayTechnologies: func,
   synchronizer: func,
   source: shape({

ui/src/dashboards/containers/DashboardPage.js

@@ -198,6 +198,16 @@ class DashboardPage extends Component {
     this.setState({zoomedTimeRange: {zoomedLower, zoomedUpper}})
   }
 
+  handleEditDashboardQueryStatus = cellID => (queryID, status) => {
+    const {params: dashboardID, dashboardActions} = this.props
+    dashboardActions.editDashboardQueryStatus(
+      dashboardID,
+      cellID,
+      queryID,
+      status
+    )
+  }
+
   getActiveDashboard() {
     const {params: {dashboardID}, dashboards} = this.props
     return dashboards.find(d => d.id === +dashboardID)
@@ -215,7 +225,7 @@ class DashboardPage extends Component {
       dashboards,
       autoRefresh,
       cellQueryStatus,
-      dashboardActions,
+      dashboardActions: {editCellQueryStatus},
       inPresentationMode,
       handleChooseAutoRefresh,
       handleClickPresentationButton,
@@ -304,7 +314,7 @@ class DashboardPage extends Component {
               onSave={this.handleSaveEditedCell}
               onCancel={this.handleDismissOverlay}
               templates={templatesIncludingDashTime}
-              editQueryStatus={dashboardActions.editCellQueryStatus}
+              editQueryStatus={editCellQueryStatus}
             />
           : null}
         {isEditMode
@@ -349,6 +359,7 @@ class DashboardPage extends Component {
               onZoom={this.handleZoomedTimeRange}
               onAddCell={this.handleAddCell}
               synchronizer={this.synchronizer}
+              editQueryStatus={this.handleEditDashboardQueryStatus}
               inPresentationMode={inPresentationMode}
               onEditCell={this.handleEditDashboardCell}
               onPositionChange={this.handleUpdatePosition}

ui/src/dashboards/reducers/ui.js

@@ -24,6 +24,12 @@ export default function ui(state = initialState, action) {
         dashboards,
       }
 
+      const dashboards = state.dashboards.map(
+        d => {
+          dashboards: 
+        }
+      )
+
       return {...state, ...newState}
     }
 
@@ -303,6 +309,35 @@ export default function ui(state = initialState, action) {
 
       return {...state, dashboards}
     }
+
+    case 'EDIT_DASHBOARD_QUERY_STATUS': {
+      const {dashboardID, cellID, queryID, status} = action.payload
+
+      const dashboards = state.dashboards.map(
+        dashboard =>
+          dashboard.id === dashboardID
+            ? {
+                ...dashboard,
+                cells: dashboard.cells.map(
+                  cell =>
+                    cell.i === cellID
+                      ? {
+                          ...cell,
+                          queries: cell.queries.map(q => {
+                            q.id === queryID
+                              ? {
+                                  ...q,
+                                  status,
+                                }
+                              : q
+                          }),
+                        }
+                      : cell
+                ),
+              }
+            : dashboard
+      )
+    }
   }
 
   return state

ui/src/shared/components/LayoutRenderer.js

@@ -149,6 +149,7 @@ class LayoutRenderer extends Component {
       synchronizer,
       isEditable,
       onZoom,
+      editQueryStatus,
     } = this.props
 
     return cells.map(cell => {
@@ -178,6 +179,7 @@ class LayoutRenderer extends Component {
                   cellHeight={h}
                   axes={axes}
                   onZoom={onZoom}
+                  editQueryStatus={editQueryStatus(cell.i)}
                 />}
           </NameableGraph>
         </div>
@@ -300,6 +302,7 @@ LayoutRenderer.propTypes = {
   onRenameCell: func,
   onUpdateCell: func,
   onDeleteCell: func,
+  editQueryStatus: func,
   onSummonOverlayTechnologies: func,
   synchronizer: func,
   isStatusPage: bool,