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
This commit is contained in:
Oliver 2024-05-14 13:59:06 +10:00 committed by GitHub
parent 90e15b6bf3
commit 21209d6242
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
2 changed files with 86 additions and 30 deletions

View File

@ -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 () {

View File

@ -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,33 +27,76 @@ const FailedTasksTable = Loadable(
lazy(() => import('../../../../tables/settings/FailedTasksTable'))
);
export default function TaskManagementPanel() {
function TaskCountOverview({ title, value }: { title: string; value: number }) {
return (
<Accordion defaultValue="pending">
<Accordion.Item value="pending" key="pending-tasks">
<Accordion.Control>
<StylishText size="lg">{t`Pending Tasks`}</StylishText>
</Accordion.Control>
<Accordion.Panel>
<PendingTasksTable />
</Accordion.Panel>
</Accordion.Item>
<Accordion.Item value="scheduled" key="scheduled-tasks">
<Accordion.Control>
<StylishText size="lg">{t`Scheduled Tasks`}</StylishText>
</Accordion.Control>
<Accordion.Panel>
<ScheduledTasksTable />
</Accordion.Panel>
</Accordion.Item>
<Accordion.Item value="failed" key="failed-tasks">
<Accordion.Control>
<StylishText size="lg">{t`Failed Tasks`}</StylishText>
</Accordion.Control>
<Accordion.Panel>
<FailedTasksTable />
</Accordion.Panel>
</Accordion.Item>
</Accordion>
<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>
<StylishText size="lg">{t`Pending Tasks`}</StylishText>
</Accordion.Control>
<Accordion.Panel>
<PendingTasksTable />
</Accordion.Panel>
</Accordion.Item>
<Accordion.Item value="scheduled" key="scheduled-tasks">
<Accordion.Control>
<StylishText size="lg">{t`Scheduled Tasks`}</StylishText>
</Accordion.Control>
<Accordion.Panel>
<ScheduledTasksTable />
</Accordion.Panel>
</Accordion.Item>
<Accordion.Item value="failed" key="failed-tasks">
<Accordion.Control>
<StylishText size="lg">{t`Failed Tasks`}</StylishText>
</Accordion.Control>
<Accordion.Panel>
<FailedTasksTable />
</Accordion.Panel>
</Accordion.Item>
</Accordion>
</Stack>
</>
);
}