This is an automated email from the ASF dual-hosted git repository.
kgabryje pushed a commit to branch master
in repository https://gitbox.apache.org/repos/asf/superset.git
The following commit(s) were added to refs/heads/master by this push:
new a08f83b fix(dashboard): Chart stuck in loading state when when
datasets request and chart request fail (#19327)
a08f83b is described below
commit a08f83bc608f02ab29a2f1eb433d0405eea6f721
Author: Kamil Gabryjelski <[email protected]>
AuthorDate: Wed Mar 23 15:43:32 2022 +0100
fix(dashboard): Chart stuck in loading state when when datasets request and
chart request fail (#19327)
---
superset-frontend/src/components/Chart/Chart.jsx | 6 +++++-
superset-frontend/src/dashboard/actions/dashboardState.js | 8 ++++++++
superset-frontend/src/dashboard/actions/hydrate.js | 2 ++
.../src/dashboard/components/gridComponents/Chart.jsx | 3 +++
superset-frontend/src/dashboard/containers/Chart.jsx | 3 ++-
superset-frontend/src/dashboard/containers/DashboardPage.tsx | 12 ++++++++++--
superset-frontend/src/dashboard/reducers/dashboardState.js | 7 +++++++
7 files changed, 37 insertions(+), 4 deletions(-)
diff --git a/superset-frontend/src/components/Chart/Chart.jsx
b/superset-frontend/src/components/Chart/Chart.jsx
index ab4fde8..0d29145 100644
--- a/superset-frontend/src/components/Chart/Chart.jsx
+++ b/superset-frontend/src/components/Chart/Chart.jsx
@@ -29,6 +29,7 @@ import ErrorBoundary from 'src/components/ErrorBoundary';
import { Logger, LOG_ACTIONS_RENDER_CHART } from 'src/logger/LogUtils';
import { URL_PARAMS } from 'src/constants';
import { getUrlParam } from 'src/utils/urlUtils';
+import { ResourceStatus } from 'src/hooks/apiResources/apiResources';
import ChartRenderer from './ChartRenderer';
import { ChartErrorMessage } from './ChartErrorMessage';
@@ -72,6 +73,7 @@ const propTypes = {
onFilterMenuClose: PropTypes.func,
ownState: PropTypes.object,
postTransformProps: PropTypes.func,
+ datasetsStatus: PropTypes.oneOf(['loading', 'error', 'complete']),
};
const BLANK = {};
@@ -207,6 +209,7 @@ class Chart extends React.PureComponent {
datasource,
dashboardId,
height,
+ datasetsStatus,
} = this.props;
const error = queryResponse?.errors?.[0];
@@ -216,7 +219,8 @@ class Chart extends React.PureComponent {
if (
chartAlert !== undefined &&
chartAlert !== NONEXISTENT_DATASET &&
- datasource === PLACEHOLDER_DATASOURCE
+ datasource === PLACEHOLDER_DATASOURCE &&
+ datasetsStatus !== ResourceStatus.ERROR
) {
return (
<Styles
diff --git a/superset-frontend/src/dashboard/actions/dashboardState.js
b/superset-frontend/src/dashboard/actions/dashboardState.js
index 839b5fe..053aa2f 100644
--- a/superset-frontend/src/dashboard/actions/dashboardState.js
+++ b/superset-frontend/src/dashboard/actions/dashboardState.js
@@ -612,3 +612,11 @@ export function maxUndoHistoryToast() {
);
};
}
+
+export const SET_DATASETS_STATUS = 'SET_DATASETS_STATUS';
+export function setDatasetsStatus(status) {
+ return {
+ type: SET_DATASETS_STATUS,
+ status,
+ };
+}
diff --git a/superset-frontend/src/dashboard/actions/hydrate.js
b/superset-frontend/src/dashboard/actions/hydrate.js
index f02d6f2..4174d97 100644
--- a/superset-frontend/src/dashboard/actions/hydrate.js
+++ b/superset-frontend/src/dashboard/actions/hydrate.js
@@ -51,6 +51,7 @@ import { TIME_RANGE } from
'src/visualizations/FilterBox/FilterBox';
import { URL_PARAMS } from 'src/constants';
import { getUrlParam } from 'src/utils/urlUtils';
import { FILTER_BOX_MIGRATION_STATES } from 'src/explore/constants';
+import { ResourceStatus } from 'src/hooks/apiResources/apiResources';
import { FeatureFlag, isFeatureEnabled } from '../../featureFlags';
import extractUrlParams from '../util/extractUrlParams';
import getNativeFilterConfig from '../util/filterboxMigrationHelper';
@@ -400,6 +401,7 @@ export const hydrateDashboard =
isFiltersRefreshing: false,
activeTabs: dashboardState?.activeTabs || [],
filterboxMigrationState,
+ datasetsStatus: ResourceStatus.LOADING,
},
dashboardLayout,
},
diff --git
a/superset-frontend/src/dashboard/components/gridComponents/Chart.jsx
b/superset-frontend/src/dashboard/components/gridComponents/Chart.jsx
index 821b311..134e026 100644
--- a/superset-frontend/src/dashboard/components/gridComponents/Chart.jsx
+++ b/superset-frontend/src/dashboard/components/gridComponents/Chart.jsx
@@ -83,6 +83,7 @@ const propTypes = {
ownState: PropTypes.object,
filterState: PropTypes.object,
postTransformProps: PropTypes.func,
+ datasetsStatus: PropTypes.oneOf(['loading', 'error', 'complete']),
};
const defaultProps = {
@@ -338,6 +339,7 @@ export default class Chart extends React.Component {
isFullSize,
filterboxMigrationState,
postTransformProps,
+ datasetsStatus,
} = this.props;
const { width } = this.state;
@@ -463,6 +465,7 @@ export default class Chart extends React.Component {
isDeactivatedViz={isDeactivatedViz}
filterboxMigrationState={filterboxMigrationState}
postTransformProps={postTransformProps}
+ datasetsStatus={datasetsStatus}
/>
</div>
</div>
diff --git a/superset-frontend/src/dashboard/containers/Chart.jsx
b/superset-frontend/src/dashboard/containers/Chart.jsx
index 96e053e..79b4e93 100644
--- a/superset-frontend/src/dashboard/containers/Chart.jsx
+++ b/superset-frontend/src/dashboard/containers/Chart.jsx
@@ -60,7 +60,7 @@ function mapStateToProps(
const datasource =
(chart && chart.form_data && datasources[chart.form_data.datasource]) ||
PLACEHOLDER_DATASOURCE;
- const { colorScheme, colorNamespace } = dashboardState;
+ const { colorScheme, colorNamespace, datasetsStatus } = dashboardState;
const labelColors = dashboardInfo?.metadata?.label_colors || {};
const sharedLabelColors = dashboardInfo?.metadata?.shared_label_colors || {};
// note: this method caches filters if possible to prevent render cascades
@@ -101,6 +101,7 @@ function mapStateToProps(
filterState: dataMask[id]?.filterState,
maxRows: common.conf.SQL_MAX_ROW,
filterboxMigrationState: dashboardState.filterboxMigrationState,
+ datasetsStatus,
};
}
diff --git a/superset-frontend/src/dashboard/containers/DashboardPage.tsx
b/superset-frontend/src/dashboard/containers/DashboardPage.tsx
index cd67725..be0ba91 100644
--- a/superset-frontend/src/dashboard/containers/DashboardPage.tsx
+++ b/superset-frontend/src/dashboard/containers/DashboardPage.tsx
@@ -56,6 +56,7 @@ import { URL_PARAMS } from 'src/constants';
import { getUrlParam } from 'src/utils/urlUtils';
import { canUserEditDashboard } from 'src/dashboard/util/findPermission';
import { getFilterSets } from '../actions/nativeFilters';
+import { setDatasetsStatus } from '../actions/dashboardState';
import {
getFilterValue,
getPermalinkValue,
@@ -90,8 +91,11 @@ const DashboardPage: FC = () => {
useDashboard(idOrSlug);
const { result: charts, error: chartsApiError } =
useDashboardCharts(idOrSlug);
- const { result: datasets, error: datasetsApiError } =
- useDashboardDatasets(idOrSlug);
+ const {
+ result: datasets,
+ error: datasetsApiError,
+ status,
+ } = useDashboardDatasets(idOrSlug);
const isDashboardHydrated = useRef(false);
const error = dashboardApiError || chartsApiError;
@@ -108,6 +112,10 @@ const DashboardPage: FC = () => {
);
useEffect(() => {
+ dispatch(setDatasetsStatus(status));
+ }, [dispatch, status]);
+
+ useEffect(() => {
// should convert filter_box to filter component?
const hasFilterBox =
charts &&
diff --git a/superset-frontend/src/dashboard/reducers/dashboardState.js
b/superset-frontend/src/dashboard/reducers/dashboardState.js
index 21d70b4..2778650 100644
--- a/superset-frontend/src/dashboard/reducers/dashboardState.js
+++ b/superset-frontend/src/dashboard/reducers/dashboardState.js
@@ -42,6 +42,7 @@ import {
RESET_SLICE,
ON_FILTERS_REFRESH,
ON_FILTERS_REFRESH_SUCCESS,
+ SET_DATASETS_STATUS,
} from '../actions/dashboardState';
import { HYDRATE_DASHBOARD } from '../actions/hydrate';
@@ -212,6 +213,12 @@ export default function dashboardStateReducer(state = {},
action) {
fullSizeChartId: action.chartId,
};
},
+ [SET_DATASETS_STATUS]() {
+ return {
+ ...state,
+ datasetsStatus: action.status,
+ };
+ },
};
if (action.type in actionHandlers) {
