diff --git a/packages/dashboard/src/components/app-base.tsx b/packages/dashboard/src/components/app-base.tsx index c40420773..b6ebd242f 100644 --- a/packages/dashboard/src/components/app-base.tsx +++ b/packages/dashboard/src/components/app-base.tsx @@ -1,6 +1,8 @@ import { Alert, AlertProps, + Backdrop, + CircularProgress, createTheme, CssBaseline, GlobalStyles, @@ -14,6 +16,7 @@ import { loadSettings, saveSettings, Settings, ThemeMode } from '../settings'; import { AppController, AppControllerContext, SettingsContext } from './app-contexts'; import AppBar from './appbar'; import { AlertStore } from './alert-store'; +import { AppEvents } from './app-events'; import { DeliveryAlertStore } from './delivery-alert-store'; const DefaultAlertDuration = 2000; @@ -39,6 +42,7 @@ export function AppBase({ children }: React.PropsWithChildren<{}>): JSX.Element const [alertMessage, setAlertMessage] = React.useState(''); const [alertDuration, setAlertDuration] = React.useState(DefaultAlertDuration); const [extraAppbarIcons, setExtraAppbarIcons] = React.useState(null); + const [openLoadingBackdrop, setOpenLoadingBackdrop] = React.useState(false); const theme = React.useMemo(() => { switch (settings.themeMode) { @@ -70,10 +74,26 @@ export function AppBase({ children }: React.PropsWithChildren<{}>): JSX.Element [updateSettings], ); + React.useEffect(() => { + const sub = AppEvents.loadingBackdrop.subscribe((value) => { + console.log('got event'); + setOpenLoadingBackdrop(value); + }); + return () => sub.unsubscribe(); + }, []); + return ( {settings.themeMode === ThemeMode.RmfDark && } + {openLoadingBackdrop && ( + theme.zIndex.drawer + 1 }} + open={openLoadingBackdrop} + > + + + )} diff --git a/packages/dashboard/src/components/app-events.ts b/packages/dashboard/src/components/app-events.ts index 72626d905..585979224 100644 --- a/packages/dashboard/src/components/app-events.ts +++ b/packages/dashboard/src/components/app-events.ts @@ -30,4 +30,5 @@ export const AppEvents = { levelSelect: new BehaviorSubject(null), justLoggedIn: new BehaviorSubject(false), resetCamera: new Subject<[x: number, y: number, z: number, zoom: number]>(), + loadingBackdrop: new Subject(), }; diff --git a/packages/dashboard/src/components/tasks/tasks-app.tsx b/packages/dashboard/src/components/tasks/tasks-app.tsx index a0357cf30..7ac77e52f 100644 --- a/packages/dashboard/src/components/tasks/tasks-app.tsx +++ b/packages/dashboard/src/components/tasks/tasks-app.tsx @@ -1,9 +1,9 @@ import DownloadIcon from '@mui/icons-material/Download'; import RefreshIcon from '@mui/icons-material/Refresh'; import { - Backdrop, + // Backdrop, Box, - CircularProgress, + // CircularProgress, IconButton, Menu, MenuItem, @@ -85,7 +85,7 @@ export const TasksApp = React.memo( ) => { const rmf = React.useContext(RmfAppContext); const [autoRefresh, setAutoRefresh] = React.useState(true); - const [openLoadingBackdrop, setOpenLoadingBackdrop] = React.useState(false); + // const [openLoadingBackdrop, setOpenLoadingBackdrop] = React.useState(false); const [refreshTaskAppCount, setRefreshTaskAppCount] = React.useState(0); const [selectedPanelIndex, setSelectedPanelIndex] = React.useState(TaskTablePanel.QueueTable); @@ -249,6 +249,7 @@ export const TasksApp = React.memo( } const taskStateCount = (await rmf.tasksApi.taskStatesCountTasksCountGet()).data; + console.log(taskStateCount); const QUERY_LIMIT = 100; const queriesRequired = Math.ceil(taskStateCount / QUERY_LIMIT); const allTasks: TaskState[] = []; @@ -272,24 +273,6 @@ export const TasksApp = React.memo( ); allTasks.push(...resp.data); } - - // const resp = await rmf.tasksApi.queryTaskStatesTasksGet( - // undefined, - // undefined, - // undefined, - // undefined, - // undefined, - // undefined, - // undefined, - // `0,${timestamp.getTime()}`, - // undefined, - // undefined, - // 5000, - // undefined, - // '-unix_millis_start_time', - // undefined, - // ); - // const allTasks = resp.data as TaskState[]; return allTasks; }; @@ -315,6 +298,7 @@ export const TasksApp = React.memo( }; const exportTasksToCsv = async (minimal: boolean) => { + AppEvents.loadingBackdrop.next(true); const now = new Date(); const allTasks = await getAllTasks(now); const allTaskRequests = await getAllTaskRequests(allTasks); @@ -326,6 +310,7 @@ export const TasksApp = React.memo( } else { downloadCsvFull(now, allTasks); } + AppEvents.loadingBackdrop.next(false); }; const [anchorExportElement, setAnchorExportElement] = React.useState( @@ -376,12 +361,8 @@ export const TasksApp = React.memo( > { - handleCloseExportMenu(); - console.log('starting minimal export'); - setOpenLoadingBackdrop(true); exportTasksToCsv(true); - console.log('ending minimal export'); - setOpenLoadingBackdrop(false); + handleCloseExportMenu(); }} disableRipple > @@ -389,12 +370,8 @@ export const TasksApp = React.memo( { - handleCloseExportMenu(); - console.log('starting full export'); - setOpenLoadingBackdrop(true); exportTasksToCsv(false); - console.log('ending full export'); - setOpenLoadingBackdrop(false); + handleCloseExportMenu(); }} disableRipple > @@ -471,15 +448,6 @@ export const TasksApp = React.memo( /> )} {children} - theme.zIndex.drawer + 1 }} - open={openLoadingBackdrop} - // onClick={() => { - // setOpenLoadingBackdrop(false); - // }} - > - - ); },