Line data    Source code

       1              : import * as React from 'react';
       2              : 
       3              : import * as baseStyles from '../ui/foundations/banner_page.module.css';
       4              : 
       5              : import { AppLoadingStatus } from './loading/app_loading_status.js';
       6              : import { Button, ButtonVariant } from '../ui/foundations/button.js';
       7              : import { CONFIRM_FINISHED_SETUP, useRouteContext, useRouterNavigate } from './router/router.js';
       8              : import { getStatusFromProgressCounter, IndicatorStatus } from '../ui/foundations/status_indicator.js';
       9              : import { useDashQLCoreSetup } from '../runtime/core_provider.js';
      10              : import { AppLoadingProgress } from './loading/app_loading_progress.js';
      11              : import { useStorageMigrationStatus } from '../storage/storage_provider.js';
      12              : import { AppSetupPage } from './app_setup_page.js';
      13              : 
      14              : interface Props {
      15              :     pauseAfterSetup: boolean;
      16              :     progress: AppLoadingProgress;
      17              :     embeddedDatabaseStatus: IndicatorStatus;
      18              : }
      19              : 
      20            1 : export const AppLoadingPage: React.FC<Props> = (props: Props) => {
      21            1 :     const navigate = useRouterNavigate();
      22            1 :     const coreSetup = useDashQLCoreSetup();
      23            1 :     const routeContext = useRouteContext();
      24            1 :     const migrationStatus = useStorageMigrationStatus();
      25              : 
      26              :     // Subscribe core setup.
      27              :     // Core setup does not have to run to completion, we're skipping past the loader before the wasm setup is done.
      28            1 :     const [coreStatus, setCoreStatus] = React.useState<IndicatorStatus>(IndicatorStatus.None);
      29            1 :     React.useEffect(() => {
      30            1 :         const abort = new AbortController();
      31            1 :         const run = async () => {
      32            1 :             try {
      33            1 :                 setCoreStatus(IndicatorStatus.Running);
      34            1 :                 await coreSetup("app_loader");
      35            1 :                 if (!abort.signal.aborted) {
      36            1 :                     setCoreStatus(IndicatorStatus.Succeeded);
      37              :                 }
      38            1 :             } catch (e: any) {
      39            1 :                 setCoreStatus(IndicatorStatus.Failed);
      40            1 :             }
      41            1 :         };
      42            1 :         run();
      43            1 :         return () => abort.abort();
      44            1 :     }, []);
      45              : 
      46              :     // Show the continue button?
      47            1 :     const showContinueButton = props.pauseAfterSetup && routeContext.appLoadingStatus == AppLoadingStatus.SETUP_DONE;
      48            1 :     const confirmFinishedSetup = React.useCallback(() => {
      49            0 :         navigate({
      50            0 :             type: CONFIRM_FINISHED_SETUP,
      51            0 :             value: true
      52            0 :         });
      53            1 :     }, [navigate]);
      54              : 
      55            1 :     return (
      56            1 :         <AppSetupPage
      57            1 :             status={{
      58            1 :                 applyMigrations: migrationStatus,
      59            1 :                 initializeCore: coreStatus,
      60            1 :                 initializeHyperDB: props.embeddedDatabaseStatus,
      61            1 :                 discoverSessions: getStatusFromProgressCounter(props.progress.restoreConnections),
      62            1 :                 loadSessionScripts: getStatusFromProgressCounter(props.progress.restoreSessionScripts),
      63            1 :             }}
      64            1 :             actions={props.pauseAfterSetup && (
      65            1 :                 <div className={baseStyles.card_actions}>
      66            1 :                     <div className={baseStyles.card_actions_right}>
      67            1 :                         <Button
      68            1 :                             variant={ButtonVariant.Primary}
      69            1 :                             disabled={!showContinueButton}
      70            1 :                             onClick={confirmFinishedSetup}
      71            1 :                         >
      72              :                             Continue
      73            1 :                         </Button>
      74            1 :                     </div>
      75            1 :                 </div>
      76              :             )}
      77            1 :         />
      78              :     );
      79            1 : };