diff --git a/ui/src/dashboards/actions/index.js b/ui/src/dashboards/actions/index.js index f60b2395a..849c4d39c 100644 --- a/ui/src/dashboards/actions/index.js +++ b/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) => { diff --git a/ui/src/dashboards/components/CellEditorOverlay.js b/ui/src/dashboards/components/CellEditorOverlay.js index 811e604b1..95f50d039 100644 --- a/ui/src/dashboards/components/CellEditorOverlay.js +++ b/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} />
@@ -191,6 +205,11 @@ CellEditorOverlay.propTypes = { }), }), fetchTimeSeries: func.isRequired, + editQueryStatus: func.isRequired, + queryStatus: shape({ + queryID: string, + status: shape({}), + }).isRequired, } export default CellEditorOverlay diff --git a/ui/src/dashboards/containers/DashboardPage.js b/ui/src/dashboards/containers/DashboardPage.js index c93dc00b6..d61693a9b 100644 --- a/ui/src/dashboards/containers/DashboardPage.js +++ b/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, } } diff --git a/ui/src/dashboards/reducers/ui.js b/ui/src/dashboards/reducers/ui.js index 5156c5da4..48a96dba8 100644 --- a/ui/src/dashboards/reducers/ui.js +++ b/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 diff --git a/ui/src/shared/actions/timeSeries.js b/ui/src/shared/actions/timeSeries.js index b50607166..11d3ff089 100644 --- a/ui/src/shared/actions/timeSeries.js +++ b/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) => {