merge: merge branch 'THU/superset_embedding_bugfixes'

Author: csm-thu

src/charts/DashboardPlaceholder/useDashboardPlaceholder.js

@@ -14,14 +14,11 @@ const DEFAULT_LABELS = {
   inProgress: { label: 'Scenario run in progress...' },
   hasErrors: { label: 'An error occured during the scenario run' },
   hasUnknownStatus: {
-    label: 'This scenario has an unknown state, if the problem persists, please, contact your administrator',
+    label: 'This scenario has an unknown state. If the problem persists, please contact your administrator.',
   },
   resultsDisplayDisabled: 'Display of results is disabled',
   downloadButton: 'Download logs',
-  errors: {
-    unknown: 'Unknown error',
-    details: 'Something went wrong when fetching PowerBI reports info',
-  },
+  noTokenForBI: 'Authentication failed. If the problem persists, please contact your administrator.',
 };
 
 const forgeDashboardPlaceholder = ({
@@ -32,6 +29,7 @@ const forgeDashboardPlaceholder = ({
   labels: tmpLabels,
   scenario,
   scenarioDTO,
+  hasTokenForBI,
 }) => {
   const labels = { ...DEFAULT_LABELS, ...tmpLabels };
 
@@ -42,23 +40,22 @@ const forgeDashboardPlaceholder = ({
   const hasError = scenarioLastRunStatus === RUNNER_RUN_STATE.FAILED;
   const hasUnknownStatus = scenarioLastRunStatus === RUNNER_RUN_STATE.UNKNOWN;
 
-  if (alwaysShowReports) return null;
+  if (alwaysShowReports && !disabled) return null;
   if (noScenario) return <DashboardPlaceholderLayout label={labels.noScenario.label} title={labels.noScenario.title} />;
-  if (noRun) return <DashboardPlaceholderLayout label={labels.noRun.label} title={labels.noRun.title} />;
-  if (runInProgress)
-    return <DashboardPlaceholderLayout label={labels.inProgress.label} title={labels.inProgress.title} inProgress />;
+  if (noRun) return <DashboardPlaceholderLayout label={labels.noRun.label} />;
+  if (runInProgress) return <DashboardPlaceholderLayout label={labels.inProgress.label} inProgress />;
   if (hasError)
     return (
       <DashboardPlaceholderLayout
         label={labels.hasErrors.label}
-        title={labels.hasErrors.title}
         downloadLogsFile={downloadLogsFile}
         downloadLabel={labels.downloadButton}
       />
     );
   if (hasUnknownStatus) return <DashboardPlaceholderLayout label={labels.hasUnknownStatus.label} />;
   if (disabled) return <DashboardPlaceholderLayout label={labels.resultsDisplayDisabled} />;
   if (noDashboardConfigured) return <DashboardPlaceholderLayout label={labels.noDashboard.label} />;
+  if (!hasTokenForBI) return <DashboardPlaceholderLayout label={labels.noTokenForBI} />;
   return null;
 };
 

src/charts/PowerBIReport/PowerBIReport.js

@@ -70,7 +70,7 @@ export const PowerBIReport = ({
   const tokenType = useAAD ? 0 : 1;
   // PowerBI Report object (received via callback)
   const [report, setReport] = useState();
-  const [disabled, setDisabled] = useState(false);
+  const [canTriggerRefresh, setCanTriggerRefresh] = useState(true);
   const [embedConfig, setEmbedConfig] = useState({
     type: 'report',
     id: reportId,
@@ -91,20 +91,24 @@ export const PowerBIReport = ({
     [dynamicFilters, scenarioDTO]
   );
 
+  const disabled = useMemo(() => reports?.status === 'DISABLED', [reports]);
+  const hasTokenFetchFailed = useMemo(() => reports?.status === 'ERROR', [reports]);
   const { placeholder } = useMemo(() => {
     return getDashboardPlaceholder({
       alwaysShowReports,
-      disabled: reports?.status === 'DISABLED',
+      disabled,
       downloadLogsFile,
       noDashboardConfigured: reportConfiguration[index] == null,
       scenario,
       scenarioDTO,
       labels,
+      hasTokenForBI: embedConfig?.accessToken != null && embedConfig.accessToken.length > 0,
     });
   }, [
+    disabled,
+    embedConfig.accessToken,
     getDashboardPlaceholder,
     alwaysShowReports,
-    reports,
     downloadLogsFile,
     reportConfiguration,
     index,
@@ -140,10 +144,8 @@ export const PowerBIReport = ({
       report.refresh();
 
       if (triggerTimeout) {
-        setDisabled(true);
-        setTimeout(() => {
-          setDisabled(false);
-        }, refreshTimeout);
+        setCanTriggerRefresh(false);
+        setTimeout(() => setCanTriggerRefresh(true), refreshTimeout);
       }
     },
     [refreshTimeout, report]
@@ -164,7 +166,7 @@ export const PowerBIReport = ({
         <PowerBIEmbed cssClassName={classes.report} embedConfig={embedConfig} getEmbeddedComponent={setReport} />
       );
     } catch (error) {
-      console.log('Error when intializing the PowerBIEmbed component.');
+      console.log('Error when initializing the PowerBIEmbed component.');
       console.error(error);
       return null;
     }
@@ -176,7 +178,7 @@ export const PowerBIReport = ({
     (scenarioLastRunStatus === undefined || scenarioLastRunStatus === RUNNER_RUN_STATE.SUCCESSFUL) && !noScenario;
 
   const divContainerStyle = {};
-  if (!isReady && !alwaysShowReports) {
+  if (disabled || hasTokenFetchFailed || (!isReady && !alwaysShowReports)) {
     divContainerStyle.display = 'none';
   }
 
@@ -195,7 +197,7 @@ export const PowerBIReport = ({
             <FadingTooltip title={labels.refreshTooltip}>
               <IconButton
                 aria-label="refresh"
-                disabled={!report || disabled}
+                disabled={!report || !canTriggerRefresh}
                 color="primary"
                 onClick={refreshReport}
                 size="large"
@@ -331,6 +333,7 @@ PowerBIReport.propTypes = {
       label: PropTypes.string,
     }),
     resultsDisplayDisabled: PropTypes.string,
+    noTokenForBI: PropTypes.string,
     downloadButton: PropTypes.string.isRequired,
     refreshTooltip: PropTypes.string.isRequired,
     errors: PropTypes.shape({

src/charts/SupersetReport/SupersetReport.js

@@ -26,10 +26,12 @@ export const SupersetReport = ({
   report,
   scenario,
   style,
-  visibleScenarios,
+  visibleScenarios = [],
 }) => {
   const containerRef = useRef(null);
   const tokenRef = useRef(null);
+  const previousUiConfigRef = useRef(null);
+
   const [isEmbedded, setIsEmbedded] = useState(false);
   const [dashboard, setDashboard] = useState(null);
 
@@ -45,15 +47,19 @@ export const SupersetReport = ({
     if (!report?.id || !options?.supersetUrl) return;
 
     const loadSuperset = async () => {
-      if (isEmbedded || guestToken?.status !== SUPERSET_GUEST_TOKEN_STATUS.SUCCESS) return;
+      if (guestToken?.status !== SUPERSET_GUEST_TOKEN_STATUS.SUCCESS) return;
+
+      const forceRefresh = JSON.stringify(report?.uiConfig) !== JSON.stringify(previousUiConfigRef.current);
+      if (isEmbedded && !forceRefresh) return;
 
+      previousUiConfigRef.current = report?.uiConfig;
       try {
         const embedded = await embedDashboard({
           id: report.id,
           supersetDomain: options.supersetUrl,
           mountPoint: containerRef.current,
           fetchGuestToken: async () => tokenRef.current,
-          dashboardUiConfig: report?.uiConfig || {},
+          dashboardUiConfig: report?.uiConfig ?? {},
         });
         setDashboard(embedded);
         setIsEmbedded(true);
@@ -73,7 +79,7 @@ export const SupersetReport = ({
       if (dashboard?.destroy) dashboard.destroy();
     };
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [report.id, options.supersetUrl, guestToken]);
+  }, [isEmbedded, report?.id, report?.uiConfig, options.supersetUrl, guestToken]);
 
   const { placeholder, showPlaceholder } = useMemo(() => {
     const scenarioDTO = PowerBIUtils.constructScenarioDTO(scenario, visibleScenarios);
@@ -85,8 +91,10 @@ export const SupersetReport = ({
       scenario,
       scenarioDTO,
       labels,
+      hasTokenForBI: guestToken?.status === SUPERSET_GUEST_TOKEN_STATUS.SUCCESS,
     });
   }, [
+    guestToken?.status,
     getDashboardPlaceholder,
     alwaysShowReports,
     disabled,
@@ -101,11 +109,12 @@ export const SupersetReport = ({
   const containerHeight = isReportVisible ? (report?.height ?? style?.height ?? '800px') : '100%';
   const containerWidth = isReportVisible ? (report?.width ?? style?.width ?? '100%') : '100%';
   const reportContainerDisplay = isReportVisible ? undefined : 'none';
+  const isWaitingForToken = guestToken?.status === SUPERSET_GUEST_TOKEN_STATUS.LOADING && guestToken?.value === '';
   const showLoadingSpinner =
     !isParentLoading &&
     guestToken?.status !== SUPERSET_GUEST_TOKEN_STATUS.ERROR &&
     placeholder == null &&
-    (!isEmbedded || guestToken?.status === SUPERSET_GUEST_TOKEN_STATUS.LOADING);
+    (!isEmbedded || isWaitingForToken);
 
   return (
     <Box sx={{ position: 'relative', width: containerWidth, height: containerHeight, overflow: 'hidden' }}>