Add in stop button during slice querying/rendering (#2121)

* Add in stop button during slice querying/rendering * Abort ajax request on stop
apache · Feb 10, 2017 · e1a6b56 · e1a6b56
1 parent 236ca49
commit e1a6b56
Show file tree

Hide file tree

Showing 5 changed files with 57 additions and 20 deletions.
diff --git a/superset/assets/javascripts/explorev2/actions/exploreActions.js b/superset/assets/javascripts/explorev2/actions/exploreActions.js
@@ -131,15 +131,23 @@ export function setFieldValue(fieldName, value, validationErrors) {
 }
 
 export const CHART_UPDATE_STARTED = 'CHART_UPDATE_STARTED';
-export function chartUpdateStarted() {
-  return { type: CHART_UPDATE_STARTED };
+export function chartUpdateStarted(queryRequest) {
+  return { type: CHART_UPDATE_STARTED, queryRequest };
 }
 
 export const CHART_UPDATE_SUCCEEDED = 'CHART_UPDATE_SUCCEEDED';
 export function chartUpdateSucceeded(queryResponse) {
   return { type: CHART_UPDATE_SUCCEEDED, queryResponse };
 }
 
+export const CHART_UPDATE_STOPPED = 'CHART_UPDATE_STOPPED';
+export function chartUpdateStopped(queryRequest) {
+  if (queryRequest) {
+    queryRequest.abort();
+  }
+  return { type: CHART_UPDATE_STOPPED };
+}
+
 export const CHART_UPDATE_FAILED = 'CHART_UPDATE_FAILED';
 export function chartUpdateFailed(queryResponse) {
   return { type: CHART_UPDATE_FAILED, queryResponse };
@@ -223,13 +231,15 @@ export function updateChartStatus(status) {
 export const RUN_QUERY = 'RUN_QUERY';
 export function runQuery(formData, datasourceType) {
   return function (dispatch) {
-    dispatch(chartUpdateStarted('loading'));
     const url = getExploreUrl(formData, datasourceType, 'json');
-    $.getJSON(url, function (queryResponse) {
+    const queryRequest = $.getJSON(url, function (queryResponse) {
       dispatch(chartUpdateSucceeded(queryResponse));
     }).fail(function (err) {
-      dispatch(chartUpdateFailed(err.responseJSON));
+      if (err.statusText !== 'abort') {
+        dispatch(chartUpdateFailed(err.responseJSON));
+      }
     });
+    dispatch(chartUpdateStarted(queryRequest));
   };
 }
 

diff --git a/superset/assets/javascripts/explorev2/components/ChartContainer.jsx b/superset/assets/javascripts/explorev2/components/ChartContainer.jsx
@@ -58,8 +58,9 @@ class ChartContainer extends React.PureComponent {
           prevProps.queryResponse !== this.props.queryResponse ||
           prevProps.height !== this.props.height ||
           this.props.triggerRender
-        ) &&
-        !this.props.queryResponse.error
+        ) && !this.props.queryResponse.error
+        && this.props.chartStatus !== 'failed'
+        && this.props.chartStatus !== 'stopped'
       ) {
       this.renderViz();
     }

diff --git a/superset/assets/javascripts/explorev2/components/ExploreViewContainer.jsx b/superset/assets/javascripts/explorev2/components/ExploreViewContainer.jsx
@@ -19,6 +19,7 @@ const propTypes = {
   form_data: PropTypes.object.isRequired,
   standalone: PropTypes.bool.isRequired,
   triggerQuery: PropTypes.bool.isRequired,
+  queryRequest: PropTypes.object,
 };
 
 class ExploreViewContainer extends React.Component {
@@ -67,6 +68,10 @@ class ExploreViewContainer extends React.Component {
       getExploreUrl(this.props.form_data));
   }
 
+  onStop() {
+    this.props.actions.chartUpdateStopped(this.props.queryRequest);
+  }
+
   getHeight() {
     if (this.props.forcedHeight) {
       return this.props.forcedHeight + 'px';
@@ -146,7 +151,8 @@ class ExploreViewContainer extends React.Component {
               canAdd="True"
               onQuery={this.onQuery.bind(this)}
               onSave={this.toggleModal.bind(this)}
-              disabled={this.props.chartStatus === 'loading'}
+              onStop={this.onStop.bind(this)}
+              loading={this.props.chartStatus === 'loading'}
               errorMessage={this.renderErrorMessage()}
             />
             <br />
@@ -177,6 +183,7 @@ function mapStateToProps(state) {
     standalone: state.standalone,
     triggerQuery: state.triggerQuery,
     forcedHeight: state.forced_height,
+    queryRequest: state.queryRequest,
   };
 }
 

diff --git a/superset/assets/javascripts/explorev2/components/QueryAndSaveBtns.jsx b/superset/assets/javascripts/explorev2/components/QueryAndSaveBtns.jsx
@@ -7,38 +7,49 @@ const propTypes = {
   canAdd: PropTypes.string.isRequired,
   onQuery: PropTypes.func.isRequired,
   onSave: PropTypes.func,
-  disabled: PropTypes.bool,
+  onStop: PropTypes.func,
+  loading: PropTypes.bool,
   errorMessage: PropTypes.string,
 };
 
 const defaultProps = {
+  onStop: () => {},
   onSave: () => {},
   disabled: false,
 };
 
-export default function QueryAndSaveBtns({ canAdd, onQuery, onSave, disabled, errorMessage }) {
+export default function QueryAndSaveBtns(
+  { canAdd, onQuery, onSave, onStop, loading, errorMessage }) {
   const saveClasses = classnames({
     'disabled disabledButton': canAdd !== 'True',
   });
   const qryButtonStyle = errorMessage ? 'danger' : 'primary';
-  const qryButtonDisabled = errorMessage ? true : disabled;
+  const saveButtonDisabled = errorMessage ? true : loading;
+  const qryOrStopButton = loading ? (
+    <Button
+      onClick={onStop}
+      bsStyle="warning"
+    >
+      <i className="fa-stop-circle-o" /> Stop
+    </Button>
+  ) : (
+    <Button
+      onClick={onQuery}
+      bsStyle={qryButtonStyle}
+    >
+      <i className="fa fa-bolt" /> Query
+    </Button>
+  );
 
   return (
     <div>
       <ButtonGroup className="query-and-save">
-        <Button
-          id="query_button"
-          onClick={onQuery}
-          disabled={qryButtonDisabled}
-          bsStyle={qryButtonStyle}
-        >
-          <i className="fa fa-bolt" /> Query
-        </Button>
+        {qryOrStopButton}
         <Button
           className={saveClasses}
           data-target="#save_modal"
           data-toggle="modal"
-          disabled={qryButtonDisabled}
+          disabled={saveButtonDisabled}
           onClick={onSave}
         >
           <i className="fa fa-plus-circle"></i> Save as

diff --git a/superset/assets/javascripts/explorev2/reducers/exploreReducer.js b/superset/assets/javascripts/explorev2/reducers/exploreReducer.js
@@ -87,6 +87,14 @@ export const exploreReducer = function (state, action) {
           chartUpdateEndTime: null,
           chartUpdateStartTime: now(),
           triggerQuery: false,
+          queryRequest: action.queryRequest,
+        });
+    },
+    [actions.CHART_UPDATE_STOPPED]() {
+      return Object.assign({}, state,
+        {
+          chartStatus: 'stopped',
+          chartAlert: 'Updating chart was stopped',
         });
     },
     [actions.CHART_RENDERING_FAILED]() {