Running worker status (#7215)

* Add more information to the TaskManagement panel

- Overview of task counts
- Display alert if background worker is not running

* Add a divider

src/frontend/src/hooks/UseInstance.tsx

@@ -23,7 +23,8 @@ export function useInstance<T = any>({
   hasPrimaryKey = true,
   refetchOnMount = true,
   refetchOnWindowFocus = false,
-  throwError = false
+  throwError = false,
+  updateInterval
 }: {
   endpoint: ApiEndpoints;
   pk?: string | undefined;
@@ -34,6 +35,7 @@ export function useInstance<T = any>({
   refetchOnMount?: boolean;
   refetchOnWindowFocus?: boolean;
   throwError?: boolean;
+  updateInterval?: number;
 }) {
   const [instance, setInstance] = useState<T | undefined>(defaultValue);
 
@@ -74,7 +76,8 @@ export function useInstance<T = any>({
         });
     },
     refetchOnMount: refetchOnMount,
-    refetchOnWindowFocus: refetchOnWindowFocus
+    refetchOnWindowFocus: refetchOnWindowFocus,
+    refetchInterval: updateInterval
   });
 
   const refreshInstance = useCallback(function () {

src/frontend/src/pages/Index/Settings/AdminCenter/TaskManagementPanel.tsx

@@ -1,9 +1,19 @@
 import { t } from '@lingui/macro';
-import { Accordion } from '@mantine/core';
+import {
+  Accordion,
+  Alert,
+  Divider,
+  Paper,
+  SimpleGrid,
+  Stack,
+  Text
+} from '@mantine/core';
 import { lazy } from 'react';
 
 import { StylishText } from '../../../../components/items/StylishText';
+import { ApiEndpoints } from '../../../../enums/ApiEndpoints';
 import { Loadable } from '../../../../functions/loading';
+import { useInstance } from '../../../../hooks/UseInstance';
 
 const PendingTasksTable = Loadable(
   lazy(() => import('../../../../tables/settings/PendingTasksTable'))
@@ -17,8 +27,49 @@ const FailedTasksTable = Loadable(
   lazy(() => import('../../../../tables/settings/FailedTasksTable'))
 );
 
-export default function TaskManagementPanel() {
+function TaskCountOverview({ title, value }: { title: string; value: number }) {
   return (
+    <Paper p="md" shadow="xs">
+      <Stack gap="xs">
+        <StylishText size="md">{title}</StylishText>
+        <Text>{value}</Text>
+      </Stack>
+    </Paper>
+  );
+}
+
+export default function TaskManagementPanel() {
+  const { instance: taskInfo } = useInstance({
+    endpoint: ApiEndpoints.task_overview,
+    hasPrimaryKey: false,
+    refetchOnMount: true,
+    defaultValue: {},
+    updateInterval: 30 * 1000
+  });
+
+  return (
+    <>
+      {!taskInfo.is_running && (
+        <Alert title={t`Background Worker Not Running`} color="red">
+          <Text>{t`The background task manager service is not running. Contact your system administrator.`}</Text>
+        </Alert>
+      )}
+      <Stack gap="xs">
+        <SimpleGrid cols={3} spacing="xs">
+          <TaskCountOverview
+            title={t`Pending Tasks`}
+            value={taskInfo?.pending_tasks}
+          />
+          <TaskCountOverview
+            title={t`Scheduled Tasks`}
+            value={taskInfo?.scheduled_tasks}
+          />
+          <TaskCountOverview
+            title={t`Failed Tasks`}
+            value={taskInfo?.failed_tasks}
+          />
+        </SimpleGrid>
+        <Divider />
         <Accordion defaultValue="pending">
           <Accordion.Item value="pending" key="pending-tasks">
             <Accordion.Control>
@@ -45,5 +96,7 @@ export default function TaskManagementPanel() {
             </Accordion.Panel>
           </Accordion.Item>
         </Accordion>
+      </Stack>
+    </>
   );
 }