定时任务详情增加额外定时展示

whyour · Sep 29, 2023 · 9d55cb1 · 9d55cb1
1 parent 4c19054
commit 9d55cb1
Show file tree

Hide file tree

Showing 8 changed files with 282 additions and 210 deletions.
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
diff --git a/src/pages/crontab/detail.tsx b/src/pages/crontab/detail.tsx
@@ -33,6 +33,7 @@ import IconFont from '@/components/iconfont';
 import { getCommandScript, getEditorMode } from '@/utils';
 import VirtualList from 'rc-virtual-list';
 import useScrollHeight from '@/hooks/useScrollHeight';
+import dayjs from 'dayjs';
 
 const { Text } = Typography;
 
@@ -52,8 +53,6 @@ interface LogItem {
   filename: string;
 }
 
-const language = navigator.language || navigator.languages[0];
-
 const CronDetailModal = ({
   cron = {},
   handleCancel,
@@ -498,19 +497,22 @@ const CronDetailModal = ({
           </div>
           <div className="cron-detail-info-item">
             <div className="cron-detail-info-title">{intl.get('定时')}</div>
-            <div className="cron-detail-info-value">{currentCron.schedule}</div>
+            <div className="cron-detail-info-value">
+              <div>{currentCron.schedule}</div>
+              {currentCron.extra_schedules?.map((x) => (
+                <div key={x.schedule}>{x.schedule}</div>
+              ))}
+            </div>
           </div>
           <div className="cron-detail-info-item">
             <div className="cron-detail-info-title">
               {intl.get('最后运行时间')}
             </div>
             <div className="cron-detail-info-value">
               {currentCron.last_execution_time
-                ? new Date(currentCron.last_execution_time * 1000)
-                    .toLocaleString(language, {
-                      hour12: false,
-                    })
-                    .replace(' 24:', ' 00:')
+                ? dayjs(currentCron.last_execution_time * 1000).format(
+                    'YYYY-MM-DD HH:mm:ss',
+                  )
                 : '-'}
             </div>
           </div>
@@ -530,11 +532,7 @@ const CronDetailModal = ({
             </div>
             <div className="cron-detail-info-value">
               {currentCron.nextRunTime &&
-                currentCron.nextRunTime
-                  .toLocaleString(language, {
-                    hour12: false,
-                  })
-                  .replace(' 24:', ' 00:')}
+                dayjs(currentCron.nextRunTime).format('YYYY-MM-DD HH:mm:ss')}
             </div>
           </div>
         </Card>

diff --git a/src/pages/crontab/index.less b/src/pages/crontab/index.less
@@ -35,7 +35,7 @@
     overflow: auto;
 
     .ant-card-body {
-      min-width: 600px;
+      min-width: 1000px;
     }
 
     .cron-detail-info-item {
@@ -58,7 +58,7 @@
     .ant-card-body {
       display: flex;
       justify-content: space-between;
-      min-width: 600px;
+      min-width: 1000px;
     }
   }
 
@@ -78,7 +78,6 @@
     display: flex;
     align-items: center;
     justify-content: space-between;
-    margin-right: 32px;
 
     .operations {
       display: flex;

diff --git a/src/pages/crontab/index.tsx b/src/pages/crontab/index.tsx
@@ -51,13 +51,14 @@ import ViewManageModal from './viewManageModal';
 import { FilterValue, SorterResult } from 'antd/lib/table/interface';
 import { SharedContext } from '@/layouts';
 import useTableScrollHeight from '@/hooks/useTableScrollHeight';
-import { getCommandScript, parseCrontab } from '@/utils';
+import { getCommandScript, getCrontabsNextDate, parseCrontab } from '@/utils';
 import { ColumnProps } from 'antd/lib/table';
 import { useVT } from 'virtualizedtableforantd4';
 import { ICrontab, OperationName, OperationPath, CrontabStatus } from './type';
 import Name from '@/components/name';
+import dayjs from 'dayjs';
 
-const { Text, Paragraph } = Typography;
+const { Text, Paragraph, Link } = Typography;
 const { Search } = Input;
 
 const Crontab = () => {
@@ -74,17 +75,18 @@ const Crontab = () => {
           style={{
             wordBreak: 'break-all',
             marginBottom: 0,
+            color: '#1890ff'
           }}
           ellipsis={{ tooltip: text, rows: 2 }}
         >
-          <a
+          <Link
             onClick={() => {
               setDetailCron(record);
               setIsDetailModalVisible(true);
             }}
           >
             {record.name || '-'}
-          </a>
+          </Link>
         </Paragraph>
       ),
       sorter: {
@@ -183,17 +185,29 @@ const Crontab = () => {
         compare: (a, b) => a.schedule.localeCompare(b.schedule),
       },
       render: (text, record) => {
-        return record.extra_schedules?.length ? (
-          <Popover
-            placement="right"
-            content={record.extra_schedules?.map((x) => (
-              <div>{x.schedule}</div>
-            ))}
+        return (
+          <Paragraph
+            style={{
+              wordBreak: 'break-all',
+              marginBottom: 0,
+            }}
+            ellipsis={{
+              tooltip: {
+                placement: 'right',
+                title: (
+                  <>
+                    <div>{text}</div>
+                    {record.extra_schedules?.map((x) => (
+                      <div key={x.schedule}>{x.schedule}</div>
+                    ))}
+                  </>
+                ),
+              },
+              rows: 2,
+            }}
           >
             {text}
-          </Popover>
-        ) : (
-          text
+          </Paragraph>
         );
       },
     },
@@ -224,19 +238,16 @@ const Crontab = () => {
         },
       },
       render: (text, record) => {
-        const language = navigator.language || navigator.languages[0];
         return (
           <span
             style={{
               display: 'block',
             }}
           >
             {record.last_execution_time
-              ? new Date(record.last_execution_time * 1000)
-                  .toLocaleString(language, {
-                    hour12: false,
-                  })
-                  .replace(' 24:', ' 00:')
+              ? dayjs(record.last_execution_time * 1000).format(
+                  'YYYY-MM-DD HH:mm:ss',
+                )
               : '-'}
           </span>
         );
@@ -251,12 +262,7 @@ const Crontab = () => {
         },
       },
       render: (text, record) => {
-        const language = navigator.language || navigator.languages[0];
-        return record.nextRunTime
-          .toLocaleString(language, {
-            hour12: false,
-          })
-          .replace(' 24:', ' 00:');
+        return dayjs(record.nextRunTime).format('YYYY-MM-DD HH:mm:ss');
       },
     },
     {
@@ -389,7 +395,7 @@ const Crontab = () => {
             data.map((x) => {
               return {
                 ...x,
-                nextRunTime: parseCrontab(x.schedule),
+                nextRunTime: getCrontabsNextDate(x.schedule, x.extra_schedules),
               };
             }),
           );
@@ -677,7 +683,10 @@ const Crontab = () => {
         if (code === 200) {
           const index = value.findIndex((x) => x.id === cron.id);
           const result = [...value];
-          data.nextRunTime = parseCrontab(data.schedule);
+          data.nextRunTime = getCrontabsNextDate(
+            data.schedule,
+            data.extra_schedules,
+          );
           if (index !== -1) {
             result.splice(index, 1, {
               ...cron,

diff --git a/src/pages/env/index.tsx b/src/pages/env/index.tsx
@@ -41,6 +41,7 @@ import { SharedContext } from '@/layouts';
 import useTableScrollHeight from '@/hooks/useTableScrollHeight';
 import Copy from '../../components/copy';
 import { useVT } from 'virtualizedtableforantd4';
+import dayjs from 'dayjs';
 
 const { Paragraph } = Typography;
 const { Search } = Input;
@@ -137,13 +138,9 @@ const Env = () => {
         },
       },
       render: (text: string, record: any) => {
-        const language = navigator.language || navigator.languages[0];
-        const time = record.updatedAt || record.timestamp;
-        const date = new Date(time)
-          .toLocaleString(language, {
-            hour12: false,
-          })
-          .replace(' 24:', ' 00:');
+        const date = dayjs(record.updatedAt || record.timestamp).format(
+          'YYYY-MM-DD HH:mm:ss',
+        );
         return (
           <Tooltip
             placement="topLeft"

diff --git a/src/pages/login/index.tsx b/src/pages/login/index.tsx
@@ -16,6 +16,7 @@ import { request } from '@/utils/http';
 import { useTheme } from '@/utils/hooks';
 import { MobileOutlined } from '@ant-design/icons';
 import { SharedContext } from '@/layouts';
+import dayjs from 'dayjs';
 
 const FormItem = Form.Item;
 const { Countdown } = Statistic;
@@ -86,7 +87,7 @@ const Login = () => {
           <>
             <div>
               {intl.get('上次登录时间：')}
-              {lastlogon ? new Date(lastlogon).toLocaleString() : '-'}
+              {lastlogon ? dayjs(lastlogon).format('YYYY-MM-DD HH:mm:ss') : '-'}
             </div>
             <div>
               {intl.get('上次登录地点：')}

diff --git a/src/pages/setting/loginLog.tsx b/src/pages/setting/loginLog.tsx
@@ -3,6 +3,7 @@ import React, { useEffect, useState } from 'react';
 import { Typography, Table, Tag, Button, Spin, message } from 'antd';
 import { request } from '@/utils/http';
 import config from '@/utils/config';
+import dayjs from 'dayjs';
 
 const { Text, Link } = Typography;
 
@@ -30,7 +31,7 @@ const columns = [
     key: 'timestamp',
     width: 120,
     render: (text: string, record: any) => {
-      return new Date(record.timestamp).toLocaleString();
+      return dayjs(record.timestamp).format('YYYY-MM-DD HH:mm:ss');
     },
   },
   {

diff --git a/src/utils/index.ts b/src/utils/index.ts
@@ -329,15 +329,28 @@ export function getCommandScript(
   return [s, p];
 }
 
-export function parseCrontab(schedule: string): Date {
+export function parseCrontab(schedule: string): Date | null {
   try {
     const time = cron_parser.parseExpression(schedule);
     if (time) {
       return time.next().toDate();
     }
   } catch (error) { }
 
-  return new Date('1970');
+  return null;
+}
+
+export function getCrontabsNextDate(schedule: string, extra_schedules: string[]): Date | null {
+  let date = parseCrontab(schedule)
+  if (extra_schedules?.length) {
+    extra_schedules.forEach(x => {
+      const _date = parseCrontab(x)
+      if (_date && (!date || _date < date)) {
+        date = _date;
+      }
+    })
+  }
+  return date;
 }
 
 export function getExtension(filename: string) {