feat: show today's successful tasks from dashboard (#3072)

2026-10-17 07:20:51 +08:00 · 2026-09-18 02:16:54 +08:00
parent 4eb27427f8
commit a60ec5587a
6 changed files with 127 additions and 56 deletions
@@ -0,0 +1,127 @@
+import { useEffect, useState } from 'react';
+import { Alert, Button, Modal, Table, Tag } from 'antd';
+import intl from 'react-intl-universal';
+import { request } from '@/utils/http';
+import config from '@/utils/config';
+import CronLogModal from '../crontab/logModal';
+
+interface TaskResult {
+  id: number;
+  name: string;
+  command: string;
+  failCount?: number;
+  successCount?: number;
+  deleted: boolean;
+}
+
+export default function TaskResultModal({
+  result,
+  onCancel,
+}: {
+  result: 'success' | 'failure';
+  onCancel: () => void;
+}) {
+  const isSuccess = result === 'success';
+  const [tasks, setTasks] = useState<TaskResult[]>([]);
+  const [loading, setLoading] = useState(true);
+  const [failed, setFailed] = useState(false);
+  const [reload, setReload] = useState(0);
+  const [logCron, setLogCron] = useState<TaskResult | null>(null);
+
+  useEffect(() => {
+    let active = true;
+    setLoading(true);
+    setFailed(false);
+    request
+      .get(
+        `${config.apiPrefix}dashboard/${isSuccess ? 'successes' : 'failures'}`,
+      )
+      .then((response) => {
+        if (!active) return;
+        if (response.code !== 200)
+          throw new Error('Failed to load dashboard task results');
+        setTasks(response.data);
+      })
+      .catch(() => {
+        if (active) setFailed(true);
+      })
+      .finally(() => {
+        if (active) setLoading(false);
+      });
+    return () => {
+      active = false;
+    };
+  }, [reload, isSuccess]);
+
+  return (
+    <>
+      <Modal
+        title={intl.get(isSuccess ? '今日成功' : '今日失败')}
+        open
+        onCancel={onCancel}
+        footer={null}
+        width={900}
+      >
+        {failed ? (
+          <Alert
+            type="error"
+            showIcon
+            message={intl.get('加载失败')}
+            action={
+              <Button onClick={() => setReload((value) => value + 1)}>
+                {intl.get('重试')}
+              </Button>
+            }
+          />
+        ) : (
+          <Table<TaskResult>
+            loading={loading}
+            dataSource={tasks}
+            rowKey="id"
+            size="small"
+            scroll={{ x: 650 }}
+            pagination={{ pageSize: 10, showSizeChanger: false }}
+            columns={[
+              {
+                title: intl.get('定时任务'),
+                dataIndex: 'name',
+                ellipsis: true,
+                render: (name, task) => (
+                  <>
+                    {name} {task.deleted && <Tag>{intl.get('已删除')}</Tag>}
+                  </>
+                ),
+              },
+              { title: intl.get('命令'), dataIndex: 'command', ellipsis: true },
+              {
+                title: intl.get(isSuccess ? '成功次数' : '失败次数'),
+                dataIndex: isSuccess ? 'successCount' : 'failCount',
+                width: 100,
+              },
+              {
+                title: intl.get('日志'),
+                width: 120,
+                render: (_, task) => (
+                  <Button
+                    type="link"
+                    size="small"
+                    disabled={task.deleted}
+                    onClick={() => {
+                      localStorage.setItem('logCron', String(task.id));
+                      setLogCron(task);
+                    }}
+                  >
+                    {intl.get('最新日志')}
+                  </Button>
+                ),
+              },
+            ]}
+          />
+        )}
+      </Modal>
+      {logCron && (
+        <CronLogModal cron={logCron} handleCancel={() => setLogCron(null)} />
+      )}
+    </>
+  );
+}