Feature/task table auto update (#763)

* Sent refresh counter app event to be void, introduced interval event Signed-off-by: Aaron Chong <aaronchongth@gmail.com> * Fix prepend addition Signed-off-by: Aaron Chong <aaronchongth@gmail.com> * Using 5 second periodic query interval Signed-off-by: Aaron Chong <aaronchongth@gmail.com> * Refactor alert event to use void subject as well Signed-off-by: Aaron Chong <aaronchongth@gmail.com> --------- Signed-off-by: Aaron Chong <aaronchongth@gmail.com>
open-rmf · Sep 7, 2023 · 58f4869 · 58f4869
1 parent 274ca26
commit 58f4869
Show file tree

Hide file tree

Showing 4 changed files with 45 additions and 27 deletions.
diff --git a/packages/dashboard/src/components/alert-store.tsx b/packages/dashboard/src/components/alert-store.tsx
@@ -17,7 +17,6 @@ enum AlertCategory {
 export const AlertStore = React.memo(() => {
   const rmf = React.useContext(RmfAppContext);
   const [taskAlerts, setTaskAlerts] = React.useState<Record<string, Alert>>({});
-  const refreshAlertCount = React.useRef(0);
 
   const categorizeAndPushAlerts = (alert: Alert) => {
     // We check if an existing alert has been acknowledged, remove it before
@@ -51,8 +50,7 @@ export const AlertStore = React.memo(() => {
     }
     const sub = rmf.alertObsStore.subscribe(async (alert) => {
       categorizeAndPushAlerts(alert);
-      refreshAlertCount.current += 1;
-      AppEvents.refreshAlertCount.next(refreshAlertCount.current);
+      AppEvents.refreshAlert.next();
     });
     return () => sub.unsubscribe();
   }, [rmf]);

diff --git a/packages/dashboard/src/components/app-events.ts b/packages/dashboard/src/components/app-events.ts
@@ -15,8 +15,8 @@ export const AppEvents = {
   ingestorSelect: new Subject<Ingestor | null>(),
   robotSelect: new Subject<[fleetName: string, robotName: string] | null>(),
   taskSelect: new Subject<TaskState | null>(),
-  refreshTaskAppCount: new Subject<number>(),
-  refreshAlertCount: new Subject<number>(),
+  refreshTaskApp: new Subject<void>(),
+  refreshAlert: new Subject<void>(),
   alertListOpenedAlert: new Subject<Alert | null>(),
   disabledLayers: new ReplaySubject<Record<string, boolean>>(),
   zoom: new BehaviorSubject<number | null>(null),

diff --git a/packages/dashboard/src/components/appbar.tsx b/packages/dashboard/src/components/appbar.tsx
@@ -203,8 +203,8 @@ export const AppBar = React.memo(({ extraToolbarItems }: AppBarProps): React.Rea
   }, [rmf]);
 
   React.useEffect(() => {
-    const sub = AppEvents.refreshTaskAppCount.subscribe((currentValue) => {
-      setRefreshTaskAppCount(currentValue);
+    const sub = AppEvents.refreshTaskApp.subscribe({
+      next: () => setRefreshTaskAppCount((oldValue) => ++oldValue),
     });
     return () => sub.unsubscribe();
   }, []);
@@ -249,18 +249,21 @@ export const AppBar = React.memo(({ extraToolbarItems }: AppBarProps): React.Rea
       }),
     );
     subs.push(
-      AppEvents.refreshAlertCount.subscribe((_) => {
-        (async () => {
-          const resp = await rmf.alertsApi.getAlertsAlertsGet();
-          const alerts = resp.data as Alert[];
-          setUnacknowledgedAlertsNum(
-            alerts.filter(
-              (alert) => !(alert.acknowledged_by && alert.unix_millis_acknowledged_time),
-            ).length,
-          );
-        })();
+      AppEvents.refreshAlert.subscribe({
+        next: () => {
+          (async () => {
+            const resp = await rmf.alertsApi.getAlertsAlertsGet();
+            const alerts = resp.data as Alert[];
+            setUnacknowledgedAlertsNum(
+              alerts.filter(
+                (alert) => !(alert.acknowledged_by && alert.unix_millis_acknowledged_time),
+              ).length,
+            );
+          })();
+        },
       }),
     );
+
     // Get the initial number of unacknowledged alerts
     (async () => {
       const resp = await rmf.alertsApi.getAlertsAlertsGet();
@@ -293,9 +296,9 @@ export const AppBar = React.memo(({ extraToolbarItems }: AppBarProps): React.Rea
           scheduleRequests.map((req) => rmf.tasksApi.postScheduledTaskScheduledTasksPost(req)),
         );
       }
-      AppEvents.refreshTaskAppCount.next(refreshTaskAppCount + 1);
+      AppEvents.refreshTaskApp.next();
     },
-    [rmf, refreshTaskAppCount],
+    [rmf],
   );
 
   const uploadFileInputRef = React.useRef<HTMLInputElement>(null);
@@ -352,9 +355,9 @@ export const AppBar = React.memo(({ extraToolbarItems }: AppBarProps): React.Rea
         throw new Error('tasks api not available');
       }
       await rmf.tasksApi.postFavoriteTaskFavoriteTasksPost(taskFavoriteRequest);
-      AppEvents.refreshTaskAppCount.next(refreshTaskAppCount + 1);
+      AppEvents.refreshTaskApp.next();
     },
-    [rmf, refreshTaskAppCount],
+    [rmf],
   );
 
   const deleteFavoriteTask = React.useCallback<Required<CreateTaskFormProps>['deleteFavoriteTask']>(
@@ -367,9 +370,9 @@ export const AppBar = React.memo(({ extraToolbarItems }: AppBarProps): React.Rea
       }
 
       await rmf.tasksApi.deleteFavoriteTaskFavoriteTasksFavoriteTaskIdDelete(favoriteTask.id);
-      AppEvents.refreshTaskAppCount.next(refreshTaskAppCount + 1);
+      AppEvents.refreshTaskApp.next();
     },
-    [rmf, refreshTaskAppCount],
+    [rmf],
   );
   //#endregion 'Favorite Task'
 

diff --git a/packages/dashboard/src/components/tasks/tasks-app.tsx b/packages/dashboard/src/components/tasks/tasks-app.tsx
@@ -58,6 +58,8 @@ import { RmfAppContext } from '../rmf-app';
 import { TaskSummary } from './task-summary';
 import { downloadCsvFull, downloadCsvMinimal } from './utils';
 
+const RefreshTaskQueueTableInterval = 5000;
+
 interface TabPanelProps {
   children?: React.ReactNode;
   index: number;
@@ -222,12 +224,27 @@ export const TasksApp = React.memo(
       const [sortFields, setSortFields] = React.useState<SortFields>({ model: undefined });
 
       React.useEffect(() => {
-        const sub = AppEvents.refreshTaskAppCount.subscribe((currentValue) => {
-          setRefreshTaskAppCount(currentValue);
+        const sub = AppEvents.refreshTaskApp.subscribe({
+          next: () => {
+            setRefreshTaskAppCount((oldValue) => ++oldValue);
+          },
         });
         return () => sub.unsubscribe();
       }, []);
 
+      React.useEffect(() => {
+        const refreshTaskQueueTable = async () => {
+          AppEvents.refreshTaskApp.next();
+        };
+        const refreshInterval = window.setInterval(
+          refreshTaskQueueTable,
+          RefreshTaskQueueTableInterval,
+        );
+        return () => {
+          clearInterval(refreshInterval);
+        };
+      }, []);
+
       // TODO: parameterize this variable
       const GET_LIMIT = 10;
       React.useEffect(() => {
@@ -409,7 +426,7 @@ export const TasksApp = React.memo(
           } else {
             await rmf.tasksApi.delScheduledTasksScheduledTasksTaskIdDelete(task.id);
           }
-          AppEvents.refreshTaskAppCount.next(refreshTaskAppCount + 1);
+          AppEvents.refreshTaskApp.next();
 
           // Set the default values
           setOpenDeleteScheduleDialog(false);
@@ -472,7 +489,7 @@ export const TasksApp = React.memo(
               <Tooltip title="Refresh" color="inherit" placement="top">
                 <IconButton
                   onClick={() => {
-                    AppEvents.refreshTaskAppCount.next(refreshTaskAppCount + 1);
+                    AppEvents.refreshTaskApp.next();
                   }}
                   aria-label="Refresh"
                 >