72 lines
3.5 KiB
TypeScript
72 lines
3.5 KiB
TypeScript
|
import { useState } from 'react'
|
||
|
|
import { useQuery, useQueryClient } from '@tanstack/react-query'
|
||
|
|
import { Table, Tag, Button, Typography, App, Space, Badge } from 'antd'
|
||
|
|
import { ReloadOutlined, RetweetOutlined, CloudServerOutlined } from '@ant-design/icons'
|
||
|
|
import { getQueueOverview, getFailedJobs, retryJob } from '@/services/events-api'
|
||
|
|
|
||
|
|
const { Title, Text } = Typography
|
||
|
|
|
||
|
|
function EventsPage() {
|
||
|
|
const { message } = App.useApp()
|
||
|
|
const qc = useQueryClient()
|
||
|
|
const [selectedQueue, setSelectedQueue] = useState<string | null>(null)
|
||
|
|
|
||
|
|
const { data: overview } = useQuery({ queryKey: ['events', 'overview'], queryFn: getQueueOverview, staleTime: 10_000 })
|
||
|
|
const { data: failed } = useQuery({
|
||
|
|
queryKey: ['events', 'failed', selectedQueue],
|
||
|
|
queryFn: () => selectedQueue ? getFailedJobs(selectedQueue) : null,
|
||
|
|
enabled: !!selectedQueue,
|
||
|
|
})
|
||
|
|
|
||
|
|
const handleRetry = async (queue: string, jobId: string) => {
|
||
|
|
await retryJob(queue, jobId)
|
||
|
|
message.success('已重试')
|
||
|
|
qc.invalidateQueries({ queryKey: ['events'] })
|
||
|
|
}
|
||
|
|
|
||
|
|
const overviewColumns = [
|
||
|
|
{ title: '队列', dataIndex: 'name', width: 160 },
|
||
|
|
{ title: '总计', dataIndex: 'total', width: 60, align: 'center' as const },
|
||
|
|
{ title: '等待', dataIndex: 'waiting', width: 60, align: 'center' as const, render: (v: number) => <Badge count={v} showZero color="blue" /> },
|
||
|
|
{ title: '进行中', dataIndex: 'active', width: 70, align: 'center' as const, render: (v: number) => <Badge count={v} showZero color="processing" /> },
|
||
|
|
{ title: '完成', dataIndex: 'completed', width: 60, align: 'center' as const, render: (v: number) => <Text type="success">{v}</Text> },
|
||
|
|
{ title: '失败', dataIndex: 'failed', width: 60, align: 'center' as const, render: (v: number, r: any) => (
|
||
|
|
v > 0 ? <Button type="link" size="small" danger onClick={() => setSelectedQueue(r.name)}>{v}</Button> : <Text type="secondary">0</Text>
|
||
|
|
)},
|
||
|
|
{ title: '延迟', dataIndex: 'delayed', width: 60, align: 'center' as const },
|
||
|
|
]
|
||
|
|
|
||
|
|
const failedColumns = [
|
||
|
|
{ title: 'Job ID', dataIndex: 'id', width: 160, ellipsis: true },
|
||
|
|
{ title: '名称', dataIndex: 'name', width: 150 },
|
||
|
|
{ title: '重试', dataIndex: 'attemptsMade', width: 60, align: 'center' as const },
|
||
|
|
{ title: '失败原因', dataIndex: 'failedReason', ellipsis: true },
|
||
|
|
{ title: '操作', width: 80, render: (_: any, r: any) => (
|
||
|
|
<Button type="link" size="small" icon={<RetweetOutlined />} onClick={() => handleRetry(selectedQueue!, r.id)}>重试</Button>
|
||
|
|
)},
|
||
|
|
]
|
||
|
|
|
||
|
|
return (
|
||
|
|
<div>
|
||
|
|
<div style={{ display: 'flex', justifyContent: 'space-between', marginBottom: 16 }}>
|
||
|
|
<Title level={5} style={{ margin: 0 }}><CloudServerOutlined /> 事件队列</Title>
|
||
|
|
<Button icon={<ReloadOutlined />} onClick={() => qc.invalidateQueries({ queryKey: ['events'] })}>刷新</Button>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<Table dataSource={overview?.queues || []} columns={overviewColumns} rowKey="name" pagination={false} style={{ marginBottom: 24 }} />
|
||
|
|
|
||
|
|
{selectedQueue && (
|
||
|
|
<>
|
||
|
|
<div style={{ display: 'flex', justifyContent: 'space-between', marginBottom: 12 }}>
|
||
|
|
<Title level={5} style={{ margin: 0, fontSize: 14 }}>失败任务 · {selectedQueue}</Title>
|
||
|
|
<Button size="small" onClick={() => setSelectedQueue(null)}>关闭</Button>
|
||
|
|
</div>
|
||
|
|
<Table dataSource={failed?.jobs || []} columns={failedColumns} rowKey="id" pagination={false} size="small" />
|
||
|
|
</>
|
||
|
|
)}
|
||
|
|
</div>
|
||
|
|
)
|
||
|
|
}
|
||
|
|
|
||
|
|
export default EventsPage
|