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

src/locales/en-US.json

@@ -658,6 +658,7 @@
   "已停止": "Stopped",
   "退出码": "Exit Code",
   "结束": "End",
+  "成功次数": "Success count",
   "失败次数": "Failure count",
   "最新日志": "Latest log",
   "加载失败": "Failed to load",

src/locales/zh-CN.json

@@ -658,6 +658,7 @@
   "已停止": "已停止",
   "退出码": "退出码",
   "结束": "结束",
+  "成功次数": "成功次数",
   "失败次数": "失败次数",
   "最新日志": "最新日志",
   "加载失败": "加载失败",

src/pages/dashboard/index.tsx

@@ -16,7 +16,7 @@ import { SharedContext } from '@/layouts';
 import { request } from '@/utils/http';
 import config from '@/utils/config';
 import CronLogModal from '../crontab/logModal';
-import FailureModal from './failureModal';
+import TaskResultModal from './taskResultModal';
 
 interface Overview {
   total: number;
@@ -94,7 +94,7 @@ const Dashboard = () => {
   const [labels, setLabels] = useState<any[]>([]);
   const [logCron, setLogCron] = useState<any>(null);
   const [loading, setLoading] = useState(true);
-  const [showFailures, setShowFailures] = useState(false);
+  const [result, setResult] = useState<'success' | 'failure' | null>(null);
 
   const fetchData = useCallback(async () => {
     try {
@@ -192,16 +192,25 @@ const Dashboard = () => {
           <Card size="small"><Statistic title={intl.get('成功率')} value={`${overview?.successRate || '0'}%`} valueStyle={{ color: '#52c41a' }} /></Card>
         </Col>
         <Col xs={12} sm={8} md={6} lg={3}>
-          <Card size="small"><Statistic title={intl.get('今日成功')} value={overview?.todaySuccess || 0} valueStyle={{ color: '#52c41a' }} prefix={<CheckCircleOutlined />} /></Card>
+          <Card size="small" hoverable role="button" tabIndex={0}
+            aria-label={intl.get('今日成功')}
+            onClick={() => setResult('success')}
+            onKeyDown={(event) => {
+              if (event.key === 'Enter' || event.key === ' ') {
+                event.preventDefault();
+                setResult('success');
+              }
+            }}
+          ><Statistic title={intl.get('今日成功')} value={overview?.todaySuccess || 0} valueStyle={{ color: '#52c41a' }} prefix={<CheckCircleOutlined />} /></Card>
         </Col>
         <Col xs={12} sm={8} md={6} lg={3}>
           <Card size="small" hoverable role="button" tabIndex={0}
             aria-label={intl.get('今日失败')}
-            onClick={() => setShowFailures(true)}
+            onClick={() => setResult('failure')}
             onKeyDown={(event) => {
               if (event.key === 'Enter' || event.key === ' ') {
                 event.preventDefault();
-                setShowFailures(true);
+                setResult('failure');
               }
             }}
           ><Statistic title={intl.get('今日失败')} value={overview?.todayFail || 0} valueStyle={{ color: '#ff4d4f' }} prefix={<CloseCircleOutlined />} /></Card>
@@ -361,7 +370,7 @@ const Dashboard = () => {
           </Card>
         </Col>
       </Row>
-      {showFailures && <FailureModal onCancel={() => setShowFailures(false)} />}
+      {result && <TaskResultModal key={result} result={result} onCancel={() => setResult(null)} />}
       {logCron && (
         <CronLogModal
           cron={logCron}

src/pages/dashboard/taskResultModal.tsx

@@ -5,31 +5,41 @@ import { request } from '@/utils/http';
 import config from '@/utils/config';
 import CronLogModal from '../crontab/logModal';
 
-interface FailedTask {
+interface TaskResult {
   id: number;
   name: string;
   command: string;
-  failCount: number;
+  failCount?: number;
+  successCount?: number;
   deleted: boolean;
 }
 
-export default function FailureModal({ onCancel }: { onCancel: () => void }) {
-  const [tasks, setTasks] = useState<FailedTask[]>([]);
+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<FailedTask | null>(null);
+  const [logCron, setLogCron] = useState<TaskResult | null>(null);
 
   useEffect(() => {
     let active = true;
     setLoading(true);
     setFailed(false);
     request
-      .get(`${config.apiPrefix}dashboard/failures`)
+      .get(
+        `${config.apiPrefix}dashboard/${isSuccess ? 'successes' : 'failures'}`,
+      )
       .then((response) => {
         if (!active) return;
         if (response.code !== 200)
-          throw new Error('Failed to load dashboard failures');
+          throw new Error('Failed to load dashboard task results');
         setTasks(response.data);
       })
       .catch(() => {
@@ -41,12 +51,12 @@ export default function FailureModal({ onCancel }: { onCancel: () => void }) {
     return () => {
       active = false;
     };
-  }, [reload]);
+  }, [reload, isSuccess]);
 
   return (
     <>
       <Modal
-        title={intl.get('今日失败')}
+        title={intl.get(isSuccess ? '今日成功' : '今日失败')}
         open
         onCancel={onCancel}
         footer={null}
@@ -64,7 +74,7 @@ export default function FailureModal({ onCancel }: { onCancel: () => void }) {
             }
           />
         ) : (
-          <Table<FailedTask>
+          <Table<TaskResult>
             loading={loading}
             dataSource={tasks}
             rowKey="id"
@@ -84,8 +94,8 @@ export default function FailureModal({ onCancel }: { onCancel: () => void }) {
               },
               { title: intl.get('命令'), dataIndex: 'command', ellipsis: true },
               {
-                title: intl.get('失败次数'),
-                dataIndex: 'failCount',
+                title: intl.get(isSuccess ? '成功次数' : '失败次数'),
+                dataIndex: isSuccess ? 'successCount' : 'failCount',
                 width: 100,
               },
               {