From 8bb8a294005bb9091703cf0c3c5ca61195d3a98d Mon Sep 17 00:00:00 2001
From: whyour <imwhyour@gmail.com>
Date: Sun, 24 Apr 2022 17:45:50 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BB=BB=E5=8A=A1=E8=AF=A6=E6=83=85=E5=A2=9E?=
 =?UTF-8?q?=E5=8A=A0=E8=BF=90=E8=A1=8C=E3=80=81=E7=A6=81=E7=94=A8=E3=80=81?=
 =?UTF-8?q?=E7=BD=AE=E9=A1=B6=E6=93=8D=E4=BD=9C?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/iconfont.tsx  |   7 +
 src/pages/crontab/detail.tsx | 268 +++++++++++++++++++++++++++++++----
 src/pages/crontab/index.less |  16 +++
 3 files changed, 261 insertions(+), 30 deletions(-)
 create mode 100644 src/components/iconfont.tsx

diff --git a/src/components/iconfont.tsx b/src/components/iconfont.tsx
new file mode 100644
index 00000000..620f49ed
--- /dev/null
+++ b/src/components/iconfont.tsx
@@ -0,0 +1,7 @@
+import { createFromIconfontCN } from '@ant-design/icons';
+
+const IconFont = createFromIconfontCN({
+  scriptUrl: ['//at.alicdn.com/t/font_3354854_pk18p04ny1a.js'],
+});
+
+export default IconFont;
diff --git a/src/pages/crontab/detail.tsx b/src/pages/crontab/detail.tsx
index b2742de9..0b30686e 100644
--- a/src/pages/crontab/detail.tsx
+++ b/src/pages/crontab/detail.tsx
@@ -10,6 +10,7 @@ import {
   List,
   Divider,
   Typography,
+  Tooltip,
 } from 'antd';
 import {
   ClockCircleOutlined,
@@ -17,6 +18,8 @@ import {
   FieldTimeOutlined,
   Loading3QuartersOutlined,
   FileOutlined,
+  PlayCircleOutlined,
+  PauseCircleOutlined,
 } from '@ant-design/icons';
 import { CrontabStatus } from './index';
 import { diffTime } from '@/utils/date';
@@ -24,6 +27,7 @@ import { request } from '@/utils/http';
 import config from '@/utils/config';
 import CronLogModal from './logModal';
 import Editor from '@monaco-editor/react';
+import IconFont from '@/components/iconfont';
 
 const { Text } = Typography;
 
@@ -68,6 +72,7 @@ const CronDetailModal = ({
   const [scriptInfo, setScriptInfo] = useState<any>({});
   const [logUrl, setLogUrl] = useState('');
   const [validTabs, setValidTabs] = useState(tabList);
+  const [currentCron, setCurrentCron] = useState<any>({});
 
   const contentList: any = {
     log: (
@@ -103,7 +108,7 @@ const CronDetailModal = ({
   };
 
   const onClickItem = (item: LogItem) => {
-    localStorage.setItem('logCron', cron.id);
+    localStorage.setItem('logCron', currentCron.id);
     setLogUrl(`${config.apiPrefix}logs/${item.directory}/${item.filename}`);
     request
       .get(`${config.apiPrefix}logs/${item.directory}/${item.filename}`)
@@ -196,8 +201,150 @@ const CronDetailModal = ({
     });
   };
 
+  const runCron = () => {
+    Modal.confirm({
+      title: '确认运行',
+      content: (
+        <>
+          确认运行定时任务{' '}
+          <Text style={{ wordBreak: 'break-all' }} type="warning">
+            {currentCron.name}
+          </Text>{' '}
+          吗
+        </>
+      ),
+      onOk() {
+        request
+          .put(`${config.apiPrefix}crons/run`, { data: [currentCron.id] })
+          .then((data: any) => {
+            if (data.code === 200) {
+              setCurrentCron({ ...currentCron, status: CrontabStatus.running });
+              setTimeout(() => {
+                getLogs();
+              }, 1000);
+            } else {
+              message.error(data);
+            }
+          });
+      },
+      onCancel() {
+        console.log('Cancel');
+      },
+    });
+  };
+
+  const stopCron = () => {
+    Modal.confirm({
+      title: '确认停止',
+      content: (
+        <>
+          确认停止定时任务{' '}
+          <Text style={{ wordBreak: 'break-all' }} type="warning">
+            {currentCron.name}
+          </Text>{' '}
+          吗
+        </>
+      ),
+      onOk() {
+        request
+          .put(`${config.apiPrefix}crons/stop`, { data: [currentCron.id] })
+          .then((data: any) => {
+            if (data.code === 200) {
+              setCurrentCron({ ...currentCron, status: CrontabStatus.idle });
+            } else {
+              message.error(data);
+            }
+          });
+      },
+      onCancel() {
+        console.log('Cancel');
+      },
+    });
+  };
+
+  const enabledOrDisabledCron = () => {
+    Modal.confirm({
+      title: `确认${currentCron.isDisabled === 1 ? '启用' : '禁用'}`,
+      content: (
+        <>
+          确认{currentCron.isDisabled === 1 ? '启用' : '禁用'}
+          定时任务{' '}
+          <Text style={{ wordBreak: 'break-all' }} type="warning">
+            {currentCron.name}
+          </Text>{' '}
+          吗
+        </>
+      ),
+      onOk() {
+        request
+          .put(
+            `${config.apiPrefix}crons/${
+              currentCron.isDisabled === 1 ? 'enable' : 'disable'
+            }`,
+            {
+              data: [currentCron.id],
+            },
+          )
+          .then((data: any) => {
+            if (data.code === 200) {
+              setCurrentCron({
+                ...currentCron,
+                isDisabled: currentCron.isDisabled === 1 ? 0 : 1,
+              });
+            } else {
+              message.error(data);
+            }
+          });
+      },
+      onCancel() {
+        console.log('Cancel');
+      },
+    });
+  };
+
+  const pinOrUnPinCron = () => {
+    Modal.confirm({
+      title: `确认${currentCron.isPinned === 1 ? '取消置顶' : '置顶'}`,
+      content: (
+        <>
+          确认{currentCron.isPinned === 1 ? '取消置顶' : '置顶'}
+          定时任务{' '}
+          <Text style={{ wordBreak: 'break-all' }} type="warning">
+            {currentCron.name}
+          </Text>{' '}
+          吗
+        </>
+      ),
+      onOk() {
+        request
+          .put(
+            `${config.apiPrefix}crons/${
+              currentCron.isPinned === 1 ? 'unpin' : 'pin'
+            }`,
+            {
+              data: [currentCron.id],
+            },
+          )
+          .then((data: any) => {
+            if (data.code === 200) {
+              setCurrentCron({
+                ...currentCron,
+                isPinned: currentCron.isPinned === 1 ? 0 : 1,
+              });
+            } else {
+              message.error(data);
+            }
+          });
+      },
+      onCancel() {
+        console.log('Cancel');
+      },
+    });
+  };
+
   useEffect(() => {
     if (cron && cron.id) {
+      setCurrentCron(cron);
       getLogs();
       getScript();
     }
@@ -206,19 +353,76 @@ const CronDetailModal = ({
   return (
     <Modal
       title={
-        <>
-          <span>{cron.name}</span>
-          {cron.labels?.length > 0 && cron.labels[0] !== '' && (
-            <Divider type="vertical"></Divider>
-          )}
-          {cron.labels?.length > 0 &&
-            cron.labels[0] !== '' &&
-            cron.labels?.map((label: string, i: number) => (
-              <Tag color="blue" style={{ marginRight: 5 }}>
-                {label}
-              </Tag>
-            ))}
-        </>
+        <div className="crontab-title-wrapper">
+          <div>
+            <span>{currentCron.name}</span>
+            {currentCron.labels?.length > 0 && currentCron.labels[0] !== '' && (
+              <Divider type="vertical"></Divider>
+            )}
+            {currentCron.labels?.length > 0 &&
+              currentCron.labels[0] !== '' &&
+              currentCron.labels?.map((label: string, i: number) => (
+                <Tag color="blue" style={{ marginRight: 5 }}>
+                  {label}
+                </Tag>
+              ))}
+          </div>
+
+          <div className="operations">
+            <Tooltip
+              title={
+                currentCron.status === CrontabStatus.idle ? '运行' : '停止'
+              }
+            >
+              <Button
+                type="link"
+                icon={
+                  currentCron.status === CrontabStatus.idle ? (
+                    <PlayCircleOutlined />
+                  ) : (
+                    <PauseCircleOutlined />
+                  )
+                }
+                size="small"
+                onClick={
+                  currentCron.status === CrontabStatus.idle ? runCron : stopCron
+                }
+              />
+            </Tooltip>
+            <Tooltip title={currentCron.isDisabled === 1 ? '启用' : '禁用'}>
+              <Button
+                type="link"
+                icon={
+                  <IconFont
+                    type={
+                      currentCron.isDisabled === 1
+                        ? 'ql-icon-qiyong'
+                        : 'ql-icon-jinyong'
+                    }
+                  />
+                }
+                size="small"
+                onClick={enabledOrDisabledCron}
+              />
+            </Tooltip>
+            <Tooltip title={currentCron.isPinned === 1 ? '取消置顶' : '置顶'}>
+              <Button
+                type="link"
+                icon={
+                  <IconFont
+                    type={
+                      currentCron.isPinned === 1
+                        ? 'ql-icon-quxiaozhiding'
+                        : 'ql-icon-zhiding'
+                    }
+                  />
+                }
+                size="small"
+                onClick={pinOrUnPinCron}
+              />
+            </Tooltip>
+          </div>
+        </div>
       }
       centered
       visible={visible}
@@ -232,21 +436,22 @@ const CronDetailModal = ({
         <Card>
           <div className="cron-detail-info-item">
             <div className="cron-detail-info-title">任务</div>
-            <div className="cron-detail-info-value">{cron.command}</div>
+            <div className="cron-detail-info-value">{currentCron.command}</div>
           </div>
         </Card>
         <Card style={{ marginTop: 10 }}>
           <div className="cron-detail-info-item">
             <div className="cron-detail-info-title">状态</div>
             <div className="cron-detail-info-value">
-              {(!cron.isDisabled || cron.status !== CrontabStatus.idle) && (
+              {(!currentCron.isDisabled ||
+                currentCron.status !== CrontabStatus.idle) && (
                 <>
-                  {cron.status === CrontabStatus.idle && (
+                  {currentCron.status === CrontabStatus.idle && (
                     <Tag icon={<ClockCircleOutlined />} color="default">
                       空闲中
                     </Tag>
                   )}
-                  {cron.status === CrontabStatus.running && (
+                  {currentCron.status === CrontabStatus.running && (
                     <Tag
                       icon={<Loading3QuartersOutlined spin />}
                       color="processing"
@@ -254,29 +459,30 @@ const CronDetailModal = ({
                       运行中
                     </Tag>
                   )}
-                  {cron.status === CrontabStatus.queued && (
+                  {currentCron.status === CrontabStatus.queued && (
                     <Tag icon={<FieldTimeOutlined />} color="default">
                       队列中
                     </Tag>
                   )}
                 </>
               )}
-              {cron.isDisabled === 1 && cron.status === CrontabStatus.idle && (
-                <Tag icon={<CloseCircleOutlined />} color="error">
-                  已禁用
-                </Tag>
-              )}
+              {currentCron.isDisabled === 1 &&
+                currentCron.status === CrontabStatus.idle && (
+                  <Tag icon={<CloseCircleOutlined />} color="error">
+                    已禁用
+                  </Tag>
+                )}
             </div>
           </div>
           <div className="cron-detail-info-item">
             <div className="cron-detail-info-title">定时</div>
-            <div className="cron-detail-info-value">{cron.schedule}</div>
+            <div className="cron-detail-info-value">{currentCron.schedule}</div>
           </div>
           <div className="cron-detail-info-item">
             <div className="cron-detail-info-title">最后运行时间</div>
             <div className="cron-detail-info-value">
-              {cron.last_execution_time
-                ? new Date(cron.last_execution_time * 1000)
+              {currentCron.last_execution_time
+                ? new Date(currentCron.last_execution_time * 1000)
                     .toLocaleString(language, {
                       hour12: false,
                     })
@@ -287,14 +493,16 @@ const CronDetailModal = ({
           <div className="cron-detail-info-item">
             <div className="cron-detail-info-title">最后运行时长</div>
             <div className="cron-detail-info-value">
-              {cron.last_running_time ? diffTime(cron.last_running_time) : '-'}
+              {currentCron.last_running_time
+                ? diffTime(currentCron.last_running_time)
+                : '-'}
             </div>
           </div>
           <div className="cron-detail-info-item">
             <div className="cron-detail-info-title">下次运行时间</div>
             <div className="cron-detail-info-value">
-              {cron.nextRunTime &&
-                cron.nextRunTime
+              {currentCron.nextRunTime &&
+                currentCron.nextRunTime
                   .toLocaleString(language, {
                     hour12: false,
                   })
diff --git a/src/pages/crontab/index.less b/src/pages/crontab/index.less
index 44ffdf67..c8880dd9 100644
--- a/src/pages/crontab/index.less
+++ b/src/pages/crontab/index.less
@@ -77,6 +77,22 @@
       margin-top: 12px;
     }
   }
+
+  .crontab-title-wrapper {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    margin-right: 32px;
+
+    .operations {
+      display: flex;
+      align-items: center;
+
+      .ant-btn:not(:first-child) {
+        margin-left: 8px;
+      }
+    }
+  }
 }
 
 .log-item {