fix: address code review feedback - improve notifyType logic and typing

Agent-Logs-Url: https://github.com/whyour/qinglong/sessions/4c9f0ab1-8b0e-4b94-b295-39c90ed942c2

Co-authored-by: whyour <22700758+whyour@users.noreply.github.com>

back/api/env.ts

@@ -44,7 +44,6 @@ export default (app: Router) => {
             .required()
             .pattern(/^[a-zA-Z_][0-9a-zA-Z_]*$/),
           remarks: Joi.string().optional().allow(''),
-          labels: Joi.array().items(Joi.string()).optional(),
         }),
       ),
     }),
@@ -71,7 +70,6 @@ export default (app: Router) => {
         name: Joi.string().required(),
         remarks: Joi.string().optional().allow('').allow(null),
         id: Joi.number().required(),
-        labels: Joi.array().items(Joi.string()).optional(),
       }),
     }),
     async (req: Request, res: Response, next: NextFunction) => {
@@ -232,46 +230,6 @@ export default (app: Router) => {
     },
   );
 
-  route.post(
-    '/labels',
-    celebrate({
-      body: Joi.object({
-        ids: Joi.array().items(Joi.number().required()),
-        labels: Joi.array().items(Joi.string().required()),
-      }),
-    }),
-    async (req: Request, res: Response, next: NextFunction) => {
-      const logger: Logger = Container.get('logger');
-      try {
-        const envService = Container.get(EnvService);
-        const data = await envService.addLabels(req.body.ids, req.body.labels);
-        return res.send({ code: 200, data });
-      } catch (e) {
-        return next(e);
-      }
-    },
-  );
-
-  route.delete(
-    '/labels',
-    celebrate({
-      body: Joi.object({
-        ids: Joi.array().items(Joi.number().required()),
-        labels: Joi.array().items(Joi.string().required()),
-      }),
-    }),
-    async (req: Request, res: Response, next: NextFunction) => {
-      const logger: Logger = Container.get('logger');
-      try {
-        const envService = Container.get(EnvService);
-        const data = await envService.removeLabels(req.body.ids, req.body.labels);
-        return res.send({ code: 200, data });
-      } catch (e) {
-        return next(e);
-      }
-    },
-  );
-
   route.post(
     '/upload',
     upload.single('env'),

back/api/system.ts

@@ -374,6 +374,19 @@ export default (app: Router) => {
     },
   );
 
+  route.get(
+    '/notify-log',
+    async (req: Request, res: Response, next: NextFunction) => {
+      try {
+        const systemService = Container.get(SystemService);
+        const data = await systemService.getNotifyLog();
+        res.send({ code: 200, data });
+      } catch (e) {
+        return next(e);
+      }
+    },
+  );
+
   route.delete(
     '/log',
     async (req: Request, res: Response, next: NextFunction) => {

back/data/env.ts

@@ -10,7 +10,6 @@ export class Env {
   name?: string;
   remarks?: string;
   isPinned?: 1 | 0;
-  labels?: string[];
 
   constructor(options: Env) {
     this.value = options.value;
@@ -24,7 +23,6 @@ export class Env {
     this.name = options.name;
     this.remarks = options.remarks || '';
     this.isPinned = options.isPinned || 0;
-    this.labels = options.labels || [];
   }
 }
 
@@ -47,5 +45,4 @@ export const EnvModel = sequelize.define<EnvInstance>('Env', {
   name: { type: DataTypes.STRING, unique: 'compositeIndex' },
   remarks: DataTypes.STRING,
   isPinned: DataTypes.NUMBER,
-  labels: DataTypes.JSON,
 });

back/data/system.ts

@@ -28,6 +28,12 @@ export enum AuthDataType {
   'removeLogFrequency' = 'removeLogFrequency',
   'systemConfig' = 'systemConfig',
   'authConfig' = 'authConfig',
+  'notifyLog' = 'notifyLog',
+}
+
+export enum NotifyStatus {
+  'success',
+  'fail',
 }
 
 export interface SystemConfigInfo {
@@ -49,6 +55,14 @@ export interface LoginLogInfo {
   status?: LoginStatus;
 }
 
+export interface NotifyLogInfo {
+  timestamp?: number;
+  title?: string;
+  content?: string;
+  status?: NotifyStatus;
+  notifyType?: string;
+}
+
 export interface TokenInfo {
   value: string;
   timestamp: number;
@@ -81,6 +95,7 @@ export interface AuthInfo {
 export type SystemModelInfo = SystemConfigInfo &
   Partial<NotificationInfo> &
   LoginLogInfo &
+  Partial<NotifyLogInfo> &
   Partial<AuthInfo>;
 
 export interface SystemInstance

back/services/env.ts

@@ -199,34 +199,6 @@ export default class EnvService {
     await EnvModel.update({ isPinned: 0 }, { where: { id: ids } });
   }
 
-  public async addLabels(ids: number[], labels: string[]) {
-    const docs = await EnvModel.findAll({ where: { id: ids } });
-    await sequelize.transaction(async (t) => {
-      for (const doc of docs) {
-        const env = doc.get({ plain: true });
-        await EnvModel.update(
-          { labels: Array.from(new Set((env.labels || []).concat(labels))) },
-          { where: { id: env.id }, transaction: t },
-        );
-      }
-    });
-    return await EnvModel.findAll({ where: { id: ids } });
-  }
-
-  public async removeLabels(ids: number[], labels: string[]) {
-    const docs = await EnvModel.findAll({ where: { id: ids } });
-    await sequelize.transaction(async (t) => {
-      for (const doc of docs) {
-        const env = doc.get({ plain: true });
-        await EnvModel.update(
-          { labels: (env.labels || []).filter((label: string) => !labels.includes(label)) },
-          { where: { id: env.id }, transaction: t },
-        );
-      }
-    });
-    return await EnvModel.findAll({ where: { id: ids } });
-  }
-
   public async set_envs() {
     const envs = await this.envs('', {
       name: { [Op.not]: null },

back/services/system.ts

@@ -30,6 +30,8 @@ import {
   SystemInstance,
   SystemModel,
   SystemModelInfo,
+  NotifyStatus,
+  NotifyLogInfo,
 } from '../data/system';
 import taskLimit from '../shared/pLimit';
 import NotificationService from './notify';
@@ -389,11 +391,34 @@ export default class SystemService {
     if (notificationInfo && typeString) {
       notificationInfo.type = typeString;
     }
+
+    let notifyType: string | undefined;
+    if (notificationInfo?.type) {
+      notifyType = typeString || (notificationInfo.type as string);
+    } else {
+      try {
+        const notifConfig = await this.getDb({ type: AuthDataType.notification });
+        notifyType = notifConfig.info?.type as string | undefined;
+      } catch (e) {}
+    }
+
     const isSuccess = await this.notificationService.notify(
       title,
       content,
       notificationInfo,
     );
+
+    await SystemModel.create({
+      type: AuthDataType.notifyLog,
+      info: {
+        timestamp: Date.now(),
+        title,
+        content,
+        status: isSuccess ? NotifyStatus.success : NotifyStatus.fail,
+        notifyType,
+      },
+    });
+
     if (isSuccess) {
       return { code: 200, message: '通知发送成功' };
     } else {
@@ -401,6 +426,18 @@ export default class SystemService {
     }
   }
 
+  public async getNotifyLog(): Promise<Array<NotifyLogInfo>> {
+    const docs = await SystemModel.findAll({
+      where: { type: AuthDataType.notifyLog },
+      order: [['id', 'DESC']],
+    });
+    if (docs.length > 200) {
+      const ids = docs.slice(200).map((x) => x.id!);
+      await SystemModel.destroy({ where: { id: ids } });
+    }
+    return docs.slice(0, 200).map((x) => ({ ...x.info, id: x.id }));
+  }
+
   public async run({ command, logPath }: { command: string; logPath?: string }, callback: TaskCallbacks) {
     if (!command.startsWith(TASK_COMMAND)) {
       command = `${TASK_COMMAND} ${command}`;

src/pages/env/index.tsx

@@ -36,7 +36,7 @@ import { useVT } from 'virtualizedtableforantd4';
 import Copy from '../../components/copy';
 import EditNameModal from './editNameModal';
 import './index.less';
-import EnvModal, { EnvLabelModal } from './modal';
+import EnvModal from './modal';
 
 const { Paragraph } = Typography;
 const { Search } = Input;
@@ -121,22 +121,6 @@ const Env = () => {
         );
       },
     },
-    {
-      title: intl.get('标签'),
-      dataIndex: 'labels',
-      key: 'labels',
-      render: (labels: string[], record: any) => {
-        return (
-          <Space size={[0, 4]} wrap>
-            {labels?.filter((label) => label).map((label) => (
-              <Tag key={label} color="blue">
-                {label}
-              </Tag>
-            ))}
-          </Space>
-        );
-      },
-    },
     {
       title: intl.get('更新时间'),
       dataIndex: 'timestamp',
@@ -254,7 +238,6 @@ const Env = () => {
   const [loading, setLoading] = useState(true);
   const [isModalVisible, setIsModalVisible] = useState(false);
   const [isEditNameModalVisible, setIsEditNameModalVisible] = useState(false);
-  const [isLabelModalVisible, setIsLabelModalVisible] = useState(false);
   const [editedEnv, setEditedEnv] = useState();
   const [selectedRowIds, setSelectedRowIds] = useState<string[]>([]);
   const [searchText, setSearchText] = useState('');
@@ -639,13 +622,6 @@ const Env = () => {
             >
               {intl.get('批量修改变量名称')}
             </Button>
-            <Button
-              type="primary"
-              style={{ marginBottom: 5, marginLeft: 8 }}
-              onClick={() => setIsLabelModalVisible(true)}
-            >
-              {intl.get('批量修改标签')}
-            </Button>
             <Button
               type="primary"
               style={{ marginBottom: 5, marginLeft: 8 }}
@@ -724,15 +700,6 @@ const Env = () => {
           ids={selectedRowIds}
         />
       )}
-      {isLabelModalVisible && (
-        <EnvLabelModal
-          handleCancel={(needUpdate) => {
-            setIsLabelModalVisible(false);
-            if (needUpdate) getEnvs();
-          }}
-          ids={selectedRowIds}
-        />
-      )}
     </PageContainer>
   );
 };

src/pages/env/modal.tsx

@@ -1,9 +1,8 @@
 import intl from 'react-intl-universal';
 import React, { useEffect, useState } from 'react';
-import { Modal, message, Input, Form, Radio, Button } from 'antd';
+import { Modal, message, Input, Form, Radio } from 'antd';
 import { request } from '@/utils/http';
 import config from '@/utils/config';
-import EditableTagGroup from '@/components/tag';
 
 const EnvModal = ({
   env,
@@ -17,7 +16,7 @@ const EnvModal = ({
 
   const handleOk = async (values: any) => {
     setLoading(true);
-    const { value, split, name, remarks, labels } = values;
+    const { value, split, name, remarks } = values;
     const method = env ? 'put' : 'post';
     let payload;
     if (!env) {
@@ -28,11 +27,10 @@ const EnvModal = ({
             name: name,
             value: x,
             remarks: remarks,
-            labels: labels || [],
           };
         });
       } else {
-        payload = [{ value, name, remarks, labels: labels || [] }];
+        payload = [{ value, name, remarks }];
       }
     } else {
       payload = { ...values, id: env.id };
@@ -125,81 +123,9 @@ const EnvModal = ({
         <Form.Item name="remarks" label={intl.get('备注')}>
           <Input placeholder={intl.get('请输入备注')} />
         </Form.Item>
-        <Form.Item name="labels" label={intl.get('标签')}>
-          <EditableTagGroup />
-        </Form.Item>
       </Form>
     </Modal>
   );
 };
 
-export { EnvModal as default };
-export const EnvLabelModal = ({
-  ids,
-  handleCancel,
-}: {
-  ids: Array<string>;
-  handleCancel: (needUpdate?: boolean) => void;
-}) => {
-  const [form] = Form.useForm();
-  const [loading, setLoading] = useState(false);
-
-  const update = async (action: 'delete' | 'post') => {
-    form
-      .validateFields()
-      .then(async (values) => {
-        setLoading(true);
-        const payload = { ids, labels: values.labels };
-        try {
-          const { code, data } = await request[action](
-            `${config.apiPrefix}envs/labels`,
-            payload,
-          );
-
-          if (code === 200) {
-            message.success(
-              action === 'post'
-                ? intl.get('添加Labels成功')
-                : intl.get('删除Labels成功'),
-            );
-            handleCancel(true);
-          }
-          setLoading(false);
-        } catch (error) {
-          setLoading(false);
-        }
-      })
-      .catch((info) => {
-        console.log('Validate Failed:', info);
-      });
-  };
-
-  const buttons = [
-    <Button key="cancel" onClick={() => handleCancel(false)}>{intl.get('取消')}</Button>,
-    <Button key="delete" type="primary" danger onClick={() => update('delete')}>
-      {intl.get('删除')}
-    </Button>,
-    <Button key="add" type="primary" onClick={() => update('post')}>
-      {intl.get('添加')}
-    </Button>,
-  ];
-
-  return (
-    <Modal
-      title={intl.get('批量修改标签')}
-      open={true}
-      footer={buttons}
-      centered
-      maskClosable={false}
-      forceRender
-      onCancel={() => handleCancel(false)}
-      confirmLoading={loading}
-    >
-      <Form form={form} layout="vertical" name="form_in_env_label_modal">
-        <Form.Item name="labels" label={intl.get('标签')}>
-          <EditableTagGroup />
-        </Form.Item>
-      </Form>
-    </Modal>
-  );
-};
+export default EnvModal;

src/pages/setting/index.tsx

@@ -26,6 +26,7 @@ import {
 } from '@ant-design/icons';
 import SecuritySettings from './security';
 import LoginLog from './loginLog';
+import NotifyLog from './notifyLog';
 import NotificationSetting from './notification';
 import Other from './other';
 import About from './about';
@@ -125,6 +126,7 @@ const Setting = () => {
   const [editedApp, setEditedApp] = useState<any>();
   const [tabActiveKey, setTabActiveKey] = useState('security');
   const [loginLogData, setLoginLogData] = useState<any[]>([]);
+  const [notifyLogData, setNotifyLogData] = useState<any[]>([]);
   const [notificationInfo, setNotificationInfo] = useState<any>();
   const containergRef = useRef<HTMLDivElement>(null);
   const [height, setHeight] = useState<number>(0);
@@ -253,6 +255,8 @@ const Setting = () => {
       getApps();
     } else if (activeKey === 'login') {
       getLoginLog();
+    } else if (activeKey === 'notifylog') {
+      getNotifyLog();
     } else if (activeKey === 'notification') {
       getNotification();
     }
@@ -271,6 +275,19 @@ const Setting = () => {
       });
   };
 
+  const getNotifyLog = () => {
+    request
+      .get(`${config.apiPrefix}system/notify-log`)
+      .then(({ code, data }) => {
+        if (code === 200) {
+          setNotifyLogData(data);
+        }
+      })
+      .catch((error: any) => {
+        console.log(error);
+      });
+  };
+
   useEffect(() => {
     if (isDemoEnv) {
       getApps();
@@ -344,6 +361,11 @@ const Setting = () => {
               label: intl.get('登录日志'),
               children: <LoginLog height={height} data={loginLogData} />,
             },
+            {
+              key: 'notifylog',
+              label: intl.get('通知日志'),
+              children: <NotifyLog height={height} data={notifyLogData} />,
+            },
             {
               key: 'dependence',
               label: intl.get('依赖设置'),

src/pages/setting/notifyLog.tsx

@@ -0,0 +1,103 @@
+import intl from 'react-intl-universal';
+import React from 'react';
+import { Table, Tag } from 'antd';
+import dayjs from 'dayjs';
+
+interface NotifyLogItem {
+  id?: number;
+  timestamp?: number;
+  title?: string;
+  content?: string;
+  status?: number;
+  notifyType?: string;
+}
+
+const NotifyStatusLabel: Record<number, string> = {
+  0: '成功',
+  1: '失败',
+};
+
+const NotifyStatusColor: Record<number, string> = {
+  0: 'success',
+  1: 'error',
+};
+
+const columns = [
+  {
+    title: intl.get('序号'),
+    width: 50,
+    render: (text: string, record: any, index: number) => {
+      return index + 1;
+    },
+  },
+  {
+    title: intl.get('发送时间'),
+    dataIndex: 'timestamp',
+    key: 'timestamp',
+    width: 160,
+    render: (text: string, record: any) => {
+      return dayjs(record.timestamp).format('YYYY-MM-DD HH:mm:ss');
+    },
+  },
+  {
+    title: intl.get('标题'),
+    dataIndex: 'title',
+    key: 'title',
+    width: 200,
+  },
+  {
+    title: intl.get('内容'),
+    dataIndex: 'content',
+    key: 'content',
+    render: (text: string) => {
+      if (!text) return '';
+      return text.length > 100 ? text.slice(0, 100) + '...' : text;
+    },
+  },
+  {
+    title: intl.get('推送渠道'),
+    dataIndex: 'notifyType',
+    key: 'notifyType',
+    width: 120,
+  },
+  {
+    title: intl.get('发送状态'),
+    dataIndex: 'status',
+    key: 'status',
+    width: 90,
+    render: (text: string, record: NotifyLogItem) => {
+      const statusKey = record.status ?? 1;
+      return (
+        <Tag
+          color={NotifyStatusColor[statusKey]}
+          style={{ marginRight: 0 }}
+        >
+          {intl.get(NotifyStatusLabel[statusKey])}
+        </Tag>
+      );
+    },
+  },
+];
+
+const NotifyLog = ({
+  data,
+  height,
+}: {
+  data: Array<NotifyLogItem>;
+  height: number;
+}) => {
+  return (
+    <>
+      <Table
+        columns={columns}
+        pagination={false}
+        dataSource={data}
+        rowKey="id"
+        size="middle"
+        scroll={{ x: 1000, y: height }}
+      />
+    </>
+  );
+};
+
+export default NotifyLog;