feat(SIP-39): Async query support for charts

setup.cfg

@@ -30,7 +30,7 @@ combine_as_imports = true
 include_trailing_comma = true
 line_length = 88
 known_first_party = superset
-known_third_party =alembic,apispec,backoff,bleach,cachelib,celery,click,colorama,contextlib2,croniter,cryptography,dateutil,flask,flask_appbuilder,flask_babel,flask_caching,flask_compress,flask_login,flask_migrate,flask_sqlalchemy,flask_talisman,flask_testing,flask_wtf,freezegun,geohash,geopy,humanize,isodate,jinja2,markdown,markupsafe,marshmallow,msgpack,numpy,pandas,parameterized,parsedatetime,pathlib2,polyline,prison,pyarrow,pyhive,pytest,pytz,retry,selenium,setuptools,simplejson,slack,sqlalchemy,sqlalchemy_utils,sqlparse,werkzeug,wtforms,wtforms_json,yaml
+known_third_party =alembic,apispec,backoff,bleach,cachelib,celery,click,colorama,contextlib2,croniter,cryptography,dateutil,flask,flask_appbuilder,flask_babel,flask_caching,flask_compress,flask_login,flask_migrate,flask_sqlalchemy,flask_talisman,flask_testing,flask_wtf,freezegun,geohash,geopy,humanize,isodate,jinja2,jwt,markdown,markupsafe,marshmallow,msgpack,numpy,pandas,parameterized,parsedatetime,pathlib2,polyline,prison,pyarrow,pyhive,pytest,pytz,redis,retry,selenium,setuptools,simplejson,slack,sqlalchemy,sqlalchemy_utils,sqlparse,werkzeug,wtforms,wtforms_json,yaml
 multi_line_output = 3
 order_by_type = false
 

superset-frontend/spec/javascripts/utils/getClientErrorObject_spec.ts

@@ -17,7 +17,7 @@
  * under the License.
  */
 import { ErrorTypeEnum } from 'src/components/ErrorMessage/types';
-import getClientErrorObject from 'src/utils/getClientErrorObject';
+import { getClientErrorObject } from 'src/utils/getClientErrorObject';
 
 describe('getClientErrorObject()', () => {
   it('Returns a Promise', () => {

superset-frontend/src/SqlLab/actions/sqlLab.js

@@ -30,7 +30,7 @@ import {
   addSuccessToast as addSuccessToastAction,
   addWarningToast as addWarningToastAction,
 } from '../../messageToasts/actions/index';
-import getClientErrorObject from '../../utils/getClientErrorObject';
+import { getClientErrorObject } from '../../utils/getClientErrorObject';
 import COMMON_ERR_MESSAGES from '../../utils/errorMessages';
 
 export const RESET_STATE = 'RESET_STATE';

superset-frontend/src/SqlLab/components/ShareSqlLabQuery.jsx

@@ -25,7 +25,7 @@ import { isFeatureEnabled, FeatureFlag } from 'src/featureFlags';
 import Button from 'src/components/Button';
 import CopyToClipboard from '../../components/CopyToClipboard';
 import { storeQuery } from '../../utils/common';
-import getClientErrorObject from '../../utils/getClientErrorObject';
+import { getClientErrorObject } from '../../utils/getClientErrorObject';
 import withToasts from '../../messageToasts/enhancers/withToasts';
 
 const propTypes = {

superset-frontend/src/chart/Chart.jsx

@@ -157,6 +157,8 @@ class Chart extends React.PureComponent {
       queryResponse,
     } = this.props;
 
+    console.log('**** Chart renderError', queryResponse);
+
     const error = queryResponse?.errors?.[0];
     if (error) {
       const extra = error.extra || {};

superset-frontend/src/chart/chartAction.js

@@ -38,7 +38,7 @@ import {
 import { addDangerToast } from '../messageToasts/actions';
 import { logEvent } from '../logger/actions';
 import { Logger, LOG_ACTIONS_LOAD_CHART } from '../logger/LogUtils';
-import getClientErrorObject from '../utils/getClientErrorObject';
+import { getClientErrorObject } from '../utils/getClientErrorObject';
 import { allowCrossDomain as domainShardingEnabled } from '../utils/hostNamesConfig';
 
 export const CHART_UPDATE_STARTED = 'CHART_UPDATE_STARTED';
@@ -66,6 +66,11 @@ export function chartUpdateFailed(queryResponse, key) {
   return { type: CHART_UPDATE_FAILED, queryResponse, key };
 }
 
+export const CHART_UPDATE_QUEUED = 'CHART_UPDATE_QUEUED';
+export function chartUpdateQueued(asyncJobMeta, key) {
+  return { type: CHART_UPDATE_QUEUED, asyncJobMeta, key };
+}
+
 export const CHART_RENDERING_FAILED = 'CHART_RENDERING_FAILED';
 export function chartRenderingFailed(error, key, stackTrace) {
   return { type: CHART_RENDERING_FAILED, error, key, stackTrace };
@@ -356,6 +361,12 @@ export function exploreJSON(
 
     const chartDataRequestCaught = chartDataRequest
       .then(response => {
+        if (isFeatureEnabled(FeatureFlag.GLOBAL_ASYNC_QUERIES)) {
+          // deal with getChartDataRequest transforming the response data
+          const result = 'result' in response ? response.result[0] : response;
+          return dispatch(chartUpdateQueued(result, key));
+        }
+
         // new API returns an object with an array of restults
         // problem: response holds a list of results, when before we were just getting one result.
         // How to make the entire app compatible with multiple results?

superset-frontend/src/chart/chartReducer.js

@@ -71,6 +71,14 @@ export default function chartReducer(charts = {}, action) {
         chartUpdateEndTime: now(),
       };
     },
+    [actions.CHART_UPDATE_QUEUED](state) {
+      return {
+        ...state,
+        asyncJobId: action.asyncJobMeta.job_id,
+        chartStatus: 'loading',
+        chartUpdateEndTime: now(),
+      };
+    },
     [actions.CHART_RENDERING_SUCCEEDED](state) {
       return { ...state, chartStatus: 'rendered', chartUpdateEndTime: now() };
     },

superset-frontend/src/components/AsyncSelect.jsx

@@ -21,7 +21,7 @@ import PropTypes from 'prop-types';
 // TODO: refactor this with `import { AsyncSelect } from src/components/Select`
 import { Select } from 'src/components/Select';
 import { t, SupersetClient } from '@superset-ui/core';
-import getClientErrorObject from '../utils/getClientErrorObject';
+import { getClientErrorObject } from '../utils/getClientErrorObject';
 
 const propTypes = {
   dataEndpoint: PropTypes.string.isRequired,

superset-frontend/src/dashboard/actions/dashboardState.js

@@ -29,7 +29,7 @@ import {
   updateDirectPathToFilter,
 } from './dashboardFilters';
 import { applyDefaultFormData } from '../../explore/store';
-import getClientErrorObject from '../../utils/getClientErrorObject';
+import { getClientErrorObject } from '../../utils/getClientErrorObject';
 import { SAVE_TYPE_OVERWRITE } from '../util/constants';
 import {
   addSuccessToast,

superset-frontend/src/dashboard/actions/datasources.js

@@ -17,7 +17,7 @@
  * under the License.
  */
 import { SupersetClient } from '@superset-ui/core';
-import getClientErrorObject from '../../utils/getClientErrorObject';
+import { getClientErrorObject } from '../../utils/getClientErrorObject';
 
 export const SET_DATASOURCE = 'SET_DATASOURCE';
 export function setDatasource(datasource, key) {

superset-frontend/src/dashboard/actions/sliceEntities.js

@@ -22,7 +22,7 @@ import rison from 'rison';
 
 import { addDangerToast } from 'src/messageToasts/actions';
 import { getDatasourceParameter } from 'src/modules/utils';
-import getClientErrorObject from 'src/utils/getClientErrorObject';
+import { getClientErrorObject } from 'src/utils/getClientErrorObject';
 
 export const SET_ALL_SLICES = 'SET_ALL_SLICES';
 export function setAllSlices(slices) {

superset-frontend/src/dashboard/components/PropertiesModal.jsx

@@ -35,7 +35,7 @@ import FormLabel from 'src/components/FormLabel';
 import { JsonEditor } from 'src/components/AsyncAceEditor';
 
 import ColorSchemeControlWrapper from 'src/dashboard/components/ColorSchemeControlWrapper';
-import getClientErrorObject from '../../utils/getClientErrorObject';
+import { getClientErrorObject } from '../../utils/getClientErrorObject';
 import withToasts from '../../messageToasts/enhancers/withToasts';
 import '../stylesheets/buttons.less';
 

superset-frontend/src/dashboard/index.jsx

@@ -16,6 +16,7 @@
  * specific language governing permissions and limitations
  * under the License.
  */
+import { filter } from 'lodash';
 import React from 'react';
 import ReactDOM from 'react-dom';
 import thunk from 'redux-thunk';
@@ -24,7 +25,9 @@ import { initFeatureFlags } from 'src/featureFlags';
 import { initEnhancer } from '../reduxUtils';
 import getInitialState from './reducers/getInitialState';
 import rootReducer from './reducers/index';
+import initAsyncEvents from '../middleware/asyncEvent';
 import logger from '../middleware/loggerMiddleware';
+import * as actions from '../chart/chartAction';
 
 import App from './App';
 
@@ -33,10 +36,22 @@ const bootstrapData = JSON.parse(appContainer.getAttribute('data-bootstrap'));
 initFeatureFlags(bootstrapData.common.feature_flags);
 const initState = getInitialState(bootstrapData);
 
+const asyncEventMiddleware = initAsyncEvents({
+  getPendingComponents: state =>
+    filter(state.charts, { chartStatus: 'loading' }),
+  successAction: (componentId, componentData) =>
+    actions.chartUpdateSucceeded(componentData, componentId),
+  errorAction: (componentId, response) =>
+    actions.chartUpdateFailed(response, componentId),
+});
+
 const store = createStore(
   rootReducer,
   initState,
-  compose(applyMiddleware(thunk, logger), initEnhancer(false)),
+  compose(
+    applyMiddleware(thunk, logger, asyncEventMiddleware),
+    initEnhancer(false),
+  ),
 );
 
 ReactDOM.render(<App store={store} />, document.getElementById('app'));

superset-frontend/src/datasource/ChangeDatasourceModal.tsx

@@ -27,7 +27,7 @@ import { Alert, FormControl, FormControlProps } from 'react-bootstrap';
 import { SupersetClient, t } from '@superset-ui/core';
 import TableView from 'src/components/TableView';
 import Modal from 'src/common/components/Modal';
-import getClientErrorObject from '../utils/getClientErrorObject';
+import { getClientErrorObject } from '../utils/getClientErrorObject';
 import Loading from '../components/Loading';
 import withToasts from '../messageToasts/enhancers/withToasts';
 

superset-frontend/src/datasource/DatasourceEditor.jsx

@@ -31,7 +31,7 @@ import Loading from 'src/components/Loading';
 import TableSelector from 'src/components/TableSelector';
 import EditableTitle from 'src/components/EditableTitle';
 
-import getClientErrorObject from 'src/utils/getClientErrorObject';
+import { getClientErrorObject } from 'src/utils/getClientErrorObject';
 
 import CheckboxControl from 'src/explore/components/controls/CheckboxControl';
 import TextControl from 'src/explore/components/controls/TextControl';

superset-frontend/src/datasource/DatasourceModal.tsx

@@ -25,7 +25,7 @@ import Modal from 'src/common/components/Modal';
 import AsyncEsmComponent from 'src/components/AsyncEsmComponent';
 import { isFeatureEnabled, FeatureFlag } from 'src/featureFlags';
 
-import getClientErrorObject from 'src/utils/getClientErrorObject';
+import { getClientErrorObject } from 'src/utils/getClientErrorObject';
 import withToasts from 'src/messageToasts/enhancers/withToasts';
 
 const DatasourceEditor = AsyncEsmComponent(() => import('./DatasourceEditor'));

superset-frontend/src/explore/components/DisplayQueryButton.jsx

@@ -32,7 +32,7 @@ import { styled, t } from '@superset-ui/core';
 import { Menu } from 'src/common/components';
 import TableView, { EmptyWrapperType } from 'src/components/TableView';
 import Button from 'src/components/Button';
-import getClientErrorObject from '../../utils/getClientErrorObject';
+import { getClientErrorObject } from '../../utils/getClientErrorObject';
 import CopyToClipboard from '../../components/CopyToClipboard';
 import { getChartDataRequest } from '../../chart/chartAction';
 import downloadAsImage from '../../utils/downloadAsImage';

superset-frontend/src/explore/components/PropertiesModal.tsx

@@ -32,7 +32,7 @@ import rison from 'rison';
 import { t, SupersetClient } from '@superset-ui/core';
 import Chart, { Slice } from 'src/types/Chart';
 import FormLabel from 'src/components/FormLabel';
-import getClientErrorObject from '../../utils/getClientErrorObject';
+import { getClientErrorObject } from '../../utils/getClientErrorObject';
 
 type PropertiesModalProps = {
   slice: Slice;

superset-frontend/src/explore/index.jsx

@@ -16,6 +16,7 @@
  * specific language governing permissions and limitations
  * under the License.
  */
+import { filter } from 'lodash';
 import React from 'react';
 import ReactDOM from 'react-dom';
 import { createStore, applyMiddleware, compose } from 'redux';
@@ -25,6 +26,8 @@ import { initFeatureFlags } from '../featureFlags';
 import { initEnhancer } from '../reduxUtils';
 import getInitialState from './reducers/getInitialState';
 import rootReducer from './reducers/index';
+import initAsyncEvents from '../middleware/asyncEvent';
+import * as actions from '../chart/chartAction';
 
 import App from './App';
 
@@ -35,10 +38,22 @@ const bootstrapData = JSON.parse(
 initFeatureFlags(bootstrapData.common.feature_flags);
 const initState = getInitialState(bootstrapData);
 
+const asyncEventMiddleware = initAsyncEvents({
+  getPendingComponents: state =>
+    filter(state.charts, { chartStatus: 'loading' }),
+  successAction: (componentId, componentData) =>
+    actions.chartUpdateSucceeded(componentData, componentId),
+  errorAction: (componentId, response) =>
+    actions.chartUpdateFailed(response, componentId),
+});
+
 const store = createStore(
   rootReducer,
   initState,
-  compose(applyMiddleware(thunk, logger), initEnhancer(false)),
+  compose(
+    applyMiddleware(thunk, logger, asyncEventMiddleware),
+    initEnhancer(false),
+  ),
 );
 
 ReactDOM.render(<App store={store} />, document.getElementById('app'));

superset-frontend/src/featureFlags.ts

@@ -34,6 +34,7 @@ export enum FeatureFlag {
   ESCAPE_MARKDOWN_HTML = 'ESCAPE_MARKDOWN_HTML',
   VERSIONED_EXPORT = 'VERSIONED_EXPORT',
   SIP_34_QUERY_SEARCH_UI = 'SIP_34_QUERY_SEARCH_UI',
+  GLOBAL_ASYNC_QUERIES = 'GLOBAL_ASYNC_QUERIES',
 }
 
 export type FeatureFlagMap = {