diff --git a/superset-frontend/src/components/Chart/Chart.jsx b/superset-frontend/src/components/Chart/Chart.jsx index ab4fde84d2..0d2914522d 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 ( diff --git a/superset-frontend/src/dashboard/containers/Chart.jsx b/superset-frontend/src/dashboard/containers/Chart.jsx index 96e053e8ed..79b4e936da 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 cd67725275..be0ba91772 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; @@ -107,6 +111,10 @@ const DashboardPage: FC = () => { migrationStateParam || FILTER_BOX_MIGRATION_STATES.NOOP, ); + useEffect(() => { + dispatch(setDatasetsStatus(status)); + }, [dispatch, status]); + useEffect(() => { // should convert filter_box to filter component? const hasFilterBox = diff --git a/superset-frontend/src/dashboard/reducers/dashboardState.js b/superset-frontend/src/dashboard/reducers/dashboardState.js index 21d70b4f53..277865030c 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) {