mirror of
https://github.com/DrizzleTime/Foxel.git
synced 2026-09-05 15:47:00 +08:00
feat(task-queue): implement task queue management with settings and UI integration
This commit is contained in:
shiyu
@@ -0,0 +1,297 @@
|
||||
import { memo, useCallback, useEffect, useMemo, useState } from 'react';
|
||||
import { Button, Card, Col, Form, Input, InputNumber, message, Progress, Row, Segmented, Select, Space, Table, Tag, Tooltip, Typography } from 'antd';
|
||||
import type { ColumnsType } from 'antd/es/table';
|
||||
import PageCard from '../components/PageCard';
|
||||
import { tasksApi, type QueuedTask, type TaskQueueSettings } from '../api/tasks';
|
||||
import { useI18n } from '../i18n';
|
||||
import { SearchOutlined } from '@ant-design/icons';
|
||||
|
||||
type QueueStatus = QueuedTask['status'];
|
||||
|
||||
const AUTO_REFRESH_INTERVAL = 5000;
|
||||
|
||||
const TaskQueuePage = memo(function TaskQueuePage() {
|
||||
const { t } = useI18n();
|
||||
const [messageApi, contextHolder] = message.useMessage();
|
||||
const [tasks, setTasks] = useState<QueuedTask[]>([]);
|
||||
const [loading, setLoading] = useState(false);
|
||||
const [keyword, setKeyword] = useState('');
|
||||
const [statusFilter, setStatusFilter] = useState<QueueStatus[]>(['pending', 'running']);
|
||||
const [autoRefresh, setAutoRefresh] = useState<'on' | 'off'>('on');
|
||||
const [settings, setSettings] = useState<TaskQueueSettings>({ concurrency: 1, active_workers: 0 });
|
||||
const [concurrencyDraft, setConcurrencyDraft] = useState<number>(1);
|
||||
const [settingsLoading, setSettingsLoading] = useState(false);
|
||||
const [lastUpdated, setLastUpdated] = useState<number | null>(null);
|
||||
|
||||
const statusOptions = useMemo(() => ([
|
||||
{ label: t('Pending'), value: 'pending' },
|
||||
{ label: t('Running'), value: 'running' },
|
||||
{ label: t('Success'), value: 'success' },
|
||||
{ label: t('Failed'), value: 'failed' },
|
||||
]), [t]);
|
||||
|
||||
const loadTasks = useCallback(async (withSpinner = false) => {
|
||||
if (withSpinner) setLoading(true);
|
||||
try {
|
||||
const data = await tasksApi.getQueue();
|
||||
setTasks(data);
|
||||
setLastUpdated(Date.now());
|
||||
} catch (err) {
|
||||
const msg = err instanceof Error && err.message ? err.message : t('Load failed');
|
||||
messageApi.error(msg);
|
||||
} finally {
|
||||
if (withSpinner) setLoading(false);
|
||||
}
|
||||
}, [messageApi, t]);
|
||||
|
||||
const loadSettings = useCallback(async () => {
|
||||
try {
|
||||
const data = await tasksApi.getQueueSettings();
|
||||
setSettings(data);
|
||||
setConcurrencyDraft(data.concurrency);
|
||||
} catch (err) {
|
||||
const msg = err instanceof Error && err.message ? err.message : t('Load failed');
|
||||
messageApi.error(msg);
|
||||
}
|
||||
}, [messageApi, t]);
|
||||
|
||||
useEffect(() => {
|
||||
loadTasks(true).catch(() => {});
|
||||
loadSettings().catch(() => {});
|
||||
}, [loadTasks, loadSettings]);
|
||||
|
||||
useEffect(() => {
|
||||
if (autoRefresh === 'off') return () => {};
|
||||
const timer = window.setInterval(() => {
|
||||
loadTasks().catch(() => {});
|
||||
}, AUTO_REFRESH_INTERVAL);
|
||||
return () => window.clearInterval(timer);
|
||||
}, [autoRefresh, loadTasks]);
|
||||
|
||||
const metrics = useMemo(() => {
|
||||
const counts = {
|
||||
total: tasks.length,
|
||||
pending: 0,
|
||||
running: 0,
|
||||
success: 0,
|
||||
failed: 0,
|
||||
};
|
||||
tasks.forEach(task => {
|
||||
counts[task.status] += 1;
|
||||
});
|
||||
return counts;
|
||||
}, [tasks]);
|
||||
|
||||
const filteredTasks = useMemo(() => {
|
||||
const normalizedKeyword = keyword.trim().toLowerCase();
|
||||
return tasks.filter(task => {
|
||||
if (statusFilter.length > 0 && !statusFilter.includes(task.status)) return false;
|
||||
if (!normalizedKeyword) return true;
|
||||
const haystack = [
|
||||
task.id,
|
||||
task.name,
|
||||
JSON.stringify(task.task_info ?? {}),
|
||||
task.meta ? JSON.stringify(task.meta) : '',
|
||||
task.error ?? '',
|
||||
].join(' ').toLowerCase();
|
||||
return haystack.includes(normalizedKeyword);
|
||||
});
|
||||
}, [keyword, statusFilter, tasks]);
|
||||
|
||||
const progressLabel = useCallback((task: QueuedTask) => {
|
||||
const percent = task.progress?.percent;
|
||||
const stage = task.progress?.stage;
|
||||
if (percent !== undefined && percent !== null) {
|
||||
const percentText = `${percent.toFixed(1)}%`;
|
||||
return stage ? `${percentText} · ${stage}` : percentText;
|
||||
}
|
||||
return stage ?? '--';
|
||||
}, []);
|
||||
|
||||
const columns: ColumnsType<QueuedTask> = useMemo(() => ([
|
||||
{
|
||||
title: 'ID',
|
||||
dataIndex: 'id',
|
||||
width: 160,
|
||||
render: (id: string) => (
|
||||
<Tooltip title={id}>
|
||||
<Tag color="default" style={{ cursor: 'pointer', margin: 0 }}>
|
||||
<Typography.Text style={{ fontSize: 12 }} copyable={{ text: id }}>
|
||||
{id.slice(0, 8)}
|
||||
</Typography.Text>
|
||||
</Tag>
|
||||
</Tooltip>
|
||||
),
|
||||
},
|
||||
{
|
||||
title: t('Task Type'),
|
||||
dataIndex: 'name',
|
||||
sorter: (a, b) => a.name.localeCompare(b.name),
|
||||
width: 160,
|
||||
},
|
||||
{
|
||||
title: t('Status'),
|
||||
dataIndex: 'status',
|
||||
width: 120,
|
||||
render: (status: QueueStatus) => {
|
||||
const colorMap: Record<QueueStatus, string> = {
|
||||
pending: 'default',
|
||||
running: 'processing',
|
||||
success: 'success',
|
||||
failed: 'error',
|
||||
};
|
||||
const labelMap: Record<QueueStatus, string> = {
|
||||
pending: t('Pending'),
|
||||
running: t('Running'),
|
||||
success: t('Success'),
|
||||
failed: t('Failed'),
|
||||
};
|
||||
return <Tag color={colorMap[status]}>{labelMap[status]}</Tag>;
|
||||
},
|
||||
},
|
||||
{
|
||||
title: t('Progress'),
|
||||
render: (_: unknown, record) => (
|
||||
record.progress?.percent !== undefined && record.progress.percent !== null
|
||||
? <Progress percent={Number(record.progress.percent.toFixed(1))} size="small" status={record.status === 'failed' ? 'exception' : record.status === 'success' ? 'success' : 'active'} />
|
||||
: <Typography.Text type="secondary" style={{ fontSize: 12 }}>{progressLabel(record)}</Typography.Text>
|
||||
),
|
||||
},
|
||||
{
|
||||
title: t('Details'),
|
||||
dataIndex: 'task_info',
|
||||
render: (_: unknown, record) => {
|
||||
const info = record.task_info ? JSON.stringify(record.task_info) : '--';
|
||||
return (
|
||||
<Typography.Paragraph
|
||||
ellipsis={{ rows: 2, expandable: true, symbol: t('Expand') }}
|
||||
style={{ marginBottom: 0, fontFamily: 'Menlo, Consolas, monospace', fontSize: 12 }}
|
||||
>
|
||||
{info}
|
||||
</Typography.Paragraph>
|
||||
);
|
||||
},
|
||||
},
|
||||
{
|
||||
title: t('Error'),
|
||||
dataIndex: 'error',
|
||||
render: (error: string | undefined) => error ? <Typography.Text type="danger">{error}</Typography.Text> : '--',
|
||||
},
|
||||
]), [progressLabel, t]);
|
||||
|
||||
const handleSaveSettings = useCallback(async () => {
|
||||
setSettingsLoading(true);
|
||||
try {
|
||||
const next = await tasksApi.updateQueueSettings({ concurrency: concurrencyDraft });
|
||||
setSettings(next);
|
||||
setConcurrencyDraft(next.concurrency);
|
||||
messageApi.success(t('Settings saved'));
|
||||
await loadTasks();
|
||||
} catch (err) {
|
||||
const msg = err instanceof Error && err.message ? err.message : t('Operation failed');
|
||||
messageApi.error(msg);
|
||||
} finally {
|
||||
setSettingsLoading(false);
|
||||
}
|
||||
}, [concurrencyDraft, loadTasks, messageApi, t]);
|
||||
|
||||
const lastUpdatedText = useMemo(() => {
|
||||
if (!lastUpdated) return '--';
|
||||
return new Date(lastUpdated).toLocaleTimeString();
|
||||
}, [lastUpdated]);
|
||||
|
||||
return (
|
||||
<>
|
||||
{contextHolder}
|
||||
<PageCard
|
||||
title={t('Task Queue')}
|
||||
extra={
|
||||
<Space size={16} wrap>
|
||||
<Typography.Text type="secondary">{t('Last updated at {time}', { time: lastUpdatedText })}</Typography.Text>
|
||||
<Segmented
|
||||
options={[{ label: t('Auto'), value: 'on' }, { label: t('Manual'), value: 'off' }]}
|
||||
value={autoRefresh}
|
||||
onChange={(value) => setAutoRefresh(value as 'on' | 'off')}
|
||||
/>
|
||||
<Button onClick={() => loadTasks(true)} loading={loading} type="default" disabled={autoRefresh === 'on'}>
|
||||
{t('Refresh')}
|
||||
</Button>
|
||||
</Space>
|
||||
}
|
||||
>
|
||||
<Row gutter={[16, 16]} style={{ marginBottom: 24 }}>
|
||||
{[{
|
||||
label: t('Total Tasks'), value: metrics.total, color: '#1677ff'
|
||||
}, {
|
||||
label: t('Running Tasks'), value: metrics.running, color: '#52c41a'
|
||||
}, {
|
||||
label: t('Waiting Tasks'), value: metrics.pending, color: '#faad14'
|
||||
}, {
|
||||
label: t('Failed Tasks'), value: metrics.failed, color: '#ff4d4f'
|
||||
}, {
|
||||
label: t('Active Workers'), value: settings.active_workers, color: '#722ed1'
|
||||
}].map((item) => (
|
||||
<Col key={item.label} xs={24} sm={12} md={8} lg={6} xl={4}>
|
||||
<Card size="small" bodyStyle={{ padding: '12px 16px' }}>
|
||||
<Typography.Text type="secondary">{item.label}</Typography.Text>
|
||||
<Typography.Title level={4} style={{ margin: '4px 0 0', color: item.color }}>{item.value}</Typography.Title>
|
||||
</Card>
|
||||
</Col>
|
||||
))}
|
||||
</Row>
|
||||
|
||||
<Form layout="inline" style={{ marginBottom: 16, gap: 16, flexWrap: 'wrap' }}>
|
||||
<Form.Item>
|
||||
<Input
|
||||
allowClear
|
||||
placeholder={t('Search by name or ID')}
|
||||
prefix={<SearchOutlined style={{ color: 'var(--ant-color-text-tertiary)' }} />}
|
||||
onChange={(e) => setKeyword(e.target.value)}
|
||||
style={{ width: 260 }}
|
||||
/>
|
||||
</Form.Item>
|
||||
<Form.Item>
|
||||
<Select
|
||||
mode="multiple"
|
||||
allowClear
|
||||
placeholder={t('Filter by status')}
|
||||
value={statusFilter}
|
||||
maxTagCount={2}
|
||||
onChange={(value) => setStatusFilter(value as QueueStatus[])}
|
||||
options={statusOptions}
|
||||
style={{ minWidth: 220 }}
|
||||
/>
|
||||
</Form.Item>
|
||||
<Form.Item>
|
||||
<Tooltip title={t('Adjust worker concurrency immediately')}>
|
||||
<Space size={8}>
|
||||
<Typography.Text>{t('Queue Concurrency')}:</Typography.Text>
|
||||
<InputNumber
|
||||
min={1}
|
||||
controls={false}
|
||||
style={{ width: 80 }}
|
||||
value={concurrencyDraft}
|
||||
onChange={(value) => setConcurrencyDraft(value ?? 1)}
|
||||
/>
|
||||
<Button type="primary" onClick={handleSaveSettings} loading={settingsLoading}>
|
||||
{t('Save')}
|
||||
</Button>
|
||||
</Space>
|
||||
</Tooltip>
|
||||
</Form.Item>
|
||||
</Form>
|
||||
|
||||
<Table
|
||||
rowKey="id"
|
||||
dataSource={filteredTasks}
|
||||
columns={columns}
|
||||
loading={loading}
|
||||
pagination={{ pageSize: 10 }}
|
||||
style={{ marginBottom: 0 }}
|
||||
/>
|
||||
</PageCard>
|
||||
</>
|
||||
);
|
||||
});
|
||||
|
||||
export default TaskQueuePage;
|
||||
Reference in New Issue
Block a user