feat: add notification audit log feature

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

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

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,93 @@
+import intl from 'react-intl-universal';
+import React from 'react';
+import { Table, Tag } from 'antd';
+import dayjs from 'dayjs';
+
+enum NotifyStatus {
+  '成功',
+  '失败',
+}
+
+enum NotifyStatusColor {
+  'success',
+  '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: any) => {
+      return (
+        <Tag
+          color={NotifyStatusColor[record.status]}
+          style={{ marginRight: 0 }}
+        >
+          {intl.get(NotifyStatus[record.status])}
+        </Tag>
+      );
+    },
+  },
+];
+
+const NotifyLog = ({
+  data,
+  height,
+}: {
+  data: Array<object>;
+  height: number;
+}) => {
+  return (
+    <>
+      <Table
+        columns={columns}
+        pagination={false}
+        dataSource={data}
+        rowKey="id"
+        size="middle"
+        scroll={{ x: 1000, y: height }}
+      />
+    </>
+  );
+};
+
+export default NotifyLog;