优化运行定时任务后日志查看

back/api/cron.ts

@@ -185,4 +185,24 @@ export default (app: Router) => {
       }
     },
   );
+
+  route.get(
+    '/crons/:id',
+    celebrate({
+      params: Joi.object({
+        id: Joi.string().required(),
+      }),
+    }),
+    async (req: Request, res: Response, next: NextFunction) => {
+      const logger: Logger = Container.get('logger');
+      try {
+        const cookieService = Container.get(CronService);
+        const data = await cookieService.get(req.params.id);
+        return res.send({ code: 200, data });
+      } catch (e) {
+        logger.error('🔥 error: %o', e);
+        return next(e);
+      }
+    },
+  );
 };

src/pages/crontab/index.tsx

@@ -28,6 +28,7 @@ import config from '@/utils/config';
 import { PageContainer } from '@ant-design/pro-layout';
 import { request } from '@/utils/http';
 import CronModal from './modal';
+import CronLogModal from './logModal';
 
 const { Text } = Typography;
 const { Search } = Input;
@@ -119,7 +120,8 @@ const Crontab = () => {
           <Tooltip title="日志">
             <a
               onClick={() => {
-                logCron(record);
+                setLogCron(record);
+                setIsLogModalVisible(true);
               }}
             >
               <FileTextOutlined />
@@ -139,6 +141,8 @@ const Crontab = () => {
   const [isModalVisible, setIsModalVisible] = useState(false);
   const [editedCron, setEditedCron] = useState();
   const [searchText, setSearchText] = useState('');
+  const [isLogModalVisible, setIsLogModalVisible] = useState(false);
+  const [logCron, setLogCron] = useState<any>();
 
   const getCrons = () => {
     setLoading(true);
@@ -210,7 +214,6 @@ const Crontab = () => {
                 ...record,
                 status: CrontabStatus.running,
               });
-              console.log(result);
               setValue(result);
             } else {
               notification.error({
@@ -276,23 +279,6 @@ const Crontab = () => {
     });
   };
 
-  const logCron = (record: any) => {
-    request
-      .get(`${config.apiPrefix}crons/${record._id}/log`)
-      .then((data: any) => {
-        Modal.info({
-          width: 650,
-          title: `${record.name || record._id}`,
-          content: (
-            <pre style={{ whiteSpace: 'pre-wrap', wordWrap: 'break-word' }}>
-              {data.data || '暂无日志'}
-            </pre>
-          ),
-          onOk() {},
-        });
-      });
-  };
-
   const MoreBtn: React.FC<{
     record: any;
     index: number;
@@ -360,6 +346,21 @@ const Crontab = () => {
     setSearchText(value);
   };
 
+  const getCronDetail = () => {
+    request
+      .get(`${config.apiPrefix}crons/${logCron._id}`)
+      .then((data: any) => {
+        const index = value.findIndex((x) => x._id === logCron._id);
+        const result = [...value];
+        result.splice(index, 1, {
+          ...logCron,
+          status: data.data.status,
+        });
+        setValue(result);
+      })
+      .finally(() => setLoading(false));
+  };
+
   useEffect(() => {
     getCrons();
   }, [searchText]);
@@ -419,6 +420,14 @@ const Crontab = () => {
         bordered
         scroll={{ x: 768 }}
       />
+      <CronLogModal
+        visible={isLogModalVisible}
+        handleCancel={() => {
+          getCronDetail();
+          setIsLogModalVisible(false);
+        }}
+        cron={logCron}
+      />
       <CronModal
         visible={isModalVisible}
         handleCancel={handleCancel}

src/pages/crontab/logModal.tsx

@@ -0,0 +1,56 @@
+import React, { useEffect, useState } from 'react';
+import { Modal, notification, Input, Form } from 'antd';
+import { request } from '@/utils/http';
+import config from '@/utils/config';
+
+const CronLogModal = ({
+  cron,
+  handleCancel,
+  visible,
+}: {
+  cron?: any;
+  visible: boolean;
+  handleCancel: () => void;
+}) => {
+  const [value, setValue] = useState<string>('运行中...');
+  const [logTimer, setLogTimer] = useState<any>();
+
+  const getCronLog = () => {
+    request
+      .get(`${config.apiPrefix}crons/${cron._id}/log`)
+      .then((data: any) => {
+        setValue(data.data);
+      });
+  };
+
+  const cancel = () => {
+    clearInterval(logTimer);
+    handleCancel();
+  };
+
+  useEffect(() => {
+    if (cron) {
+      const timer = setInterval(() => {
+        getCronLog();
+      }, 2000);
+      setLogTimer(timer);
+    }
+  }, [cron]);
+
+  return (
+    <Modal
+      title={`日志-${cron && cron.name}`}
+      visible={visible}
+      forceRender
+      onOk={() => cancel()}
+      onCancel={() => cancel()}
+      destroyOnClose
+    >
+      <pre style={{ whiteSpace: 'pre-wrap', wordWrap: 'break-word' }}>
+        {value}
+      </pre>
+    </Modal>
+  );
+};
+
+export default CronLogModal;