[PUI] Task table enhancements (#8369)

* Refresh task counts when updating tables

* Handle case where error is null

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

@@ -7,21 +7,15 @@ import { FactCollection } from '../../../../components/settings/FactCollection';
 import { ApiEndpoints } from '../../../../enums/ApiEndpoints';
 import { Loadable } from '../../../../functions/loading';
 import { useInstance } from '../../../../hooks/UseInstance';
-
-const PendingTasksTable = Loadable(
-  lazy(() => import('../../../../tables/settings/PendingTasksTable'))
-);
+import FailedTasksTable from '../../../../tables/settings/FailedTasksTable';
+import PendingTasksTable from '../../../../tables/settings/PendingTasksTable';
 
 const ScheduledTasksTable = Loadable(
   lazy(() => import('../../../../tables/settings/ScheduledTasksTable'))
 );
 
-const FailedTasksTable = Loadable(
-  lazy(() => import('../../../../tables/settings/FailedTasksTable'))
-);
-
 export default function TaskManagementPanel() {
-  const { instance: taskInfo } = useInstance({
+  const { instance: taskInfo, refreshInstance: refreshTaskInfo } = useInstance({
     endpoint: ApiEndpoints.task_overview,
     hasPrimaryKey: false,
     refetchOnMount: true,
@@ -51,7 +45,7 @@ export default function TaskManagementPanel() {
               <StylishText size="lg">{t`Pending Tasks`}</StylishText>
             </Accordion.Control>
             <Accordion.Panel>
-              <PendingTasksTable />
+              <PendingTasksTable onRecordsUpdated={refreshTaskInfo} />
             </Accordion.Panel>
           </Accordion.Item>
           <Accordion.Item value="scheduled" key="scheduled-tasks">
@@ -67,7 +61,7 @@ export default function TaskManagementPanel() {
               <StylishText size="lg">{t`Failed Tasks`}</StylishText>
             </Accordion.Control>
             <Accordion.Panel>
-              <FailedTasksTable />
+              <FailedTasksTable onRecordsUpdated={refreshTaskInfo} />
             </Accordion.Panel>
           </Accordion.Item>
         </Accordion>

src/frontend/src/tables/settings/FailedTasksTable.tsx

@@ -1,6 +1,8 @@
 import { t } from '@lingui/macro';
 import { Drawer, Text } from '@mantine/core';
 import { useDisclosure } from '@mantine/hooks';
+import { hideNotification, showNotification } from '@mantine/notifications';
+import { IconExclamationCircle } from '@tabler/icons-react';
 import { useMemo, useState } from 'react';
 
 import { StylishText } from '../../components/items/StylishText';
@@ -11,7 +13,11 @@ import { useUserState } from '../../states/UserState';
 import { TableColumn } from '../Column';
 import { InvenTreeTable } from '../InvenTreeTable';
 
-export default function FailedTasksTable() {
+export default function FailedTasksTable({
+  onRecordsUpdated
+}: {
+  onRecordsUpdated: () => void;
+}) {
   const table = useTable('tasks-failed');
   const user = useUserState();
 
@@ -73,10 +79,22 @@ export default function FailedTasksTable() {
         columns={columns}
         props={{
           enableBulkDelete: user.isStaff(),
+          afterBulkDelete: onRecordsUpdated,
           enableSelection: true,
           onRowClick: (row: any) => {
-            setError(row.result);
-            open();
+            if (row.result) {
+              setError(row.result);
+              open();
+            } else {
+              hideNotification('failed-task');
+              showNotification({
+                id: 'failed-task',
+                title: t`No Information`,
+                message: t`No error details are available for this task`,
+                color: 'red',
+                icon: <IconExclamationCircle />
+              });
+            }
           }
         }}
       />

src/frontend/src/tables/settings/PendingTasksTable.tsx

@@ -8,7 +8,11 @@ import { useUserState } from '../../states/UserState';
 import { TableColumn } from '../Column';
 import { InvenTreeTable } from '../InvenTreeTable';
 
-export default function PendingTasksTable() {
+export default function PendingTasksTable({
+  onRecordsUpdated
+}: {
+  onRecordsUpdated: () => void;
+}) {
   const table = useTable('tasks-pending');
   const user = useUserState();
 
@@ -50,6 +54,7 @@ export default function PendingTasksTable() {
       tableState={table}
       columns={columns}
       props={{
+        afterBulkDelete: onRecordsUpdated,
         enableBulkDelete: user.isStaff(),
         enableSelection: true
       }}