wip: update

GZTimeWalker · Jul 17, 2022 · 8f3c96d · 8f3c96d
1 parent 50026a2
commit 8f3c96d
Show file tree

Hide file tree

Showing 8 changed files with 221 additions and 42 deletions.
diff --git a/GZCTF/ClientApp/next.config.js b/GZCTF/ClientApp/next.config.js
@@ -5,24 +5,26 @@ const TARGET = 'http://localhost:5000';
 const nextConfig = {
   reactStrictMode: true,
   async rewrites() {
-    return [
-      {
-        source: '/api/:path*',
-        destination: `${TARGET}/api/:path*`,
-      },
-      {
-        source: '/swagger/:path*',
-        destination: `${TARGET}/swagger/:path*`,
-      },
-      {
-        source: '/assets/:path*',
-        destination: `${TARGET}/assets/:path*`,
-      },
-      {
-        source: '/hub/:path*',
-        destination: `${TARGET}/hub/:path*`,
-      },
-    ];
+    return {
+      fallback: [
+        {
+          source: '/api/:path*',
+          destination: `${TARGET}/api/:path*`,
+        },
+        {
+          source: '/swagger/:path*',
+          destination: `${TARGET}/swagger/:path*`,
+        },
+        {
+          source: '/assets/:path*',
+          destination: `${TARGET}/assets/:path*`,
+        },
+        {
+          source: '/hub/:path*',
+          destination: `${TARGET}/hub/:path*`,
+        },
+      ],
+    };
   },
 };
 

diff --git a/GZCTF/ClientApp/package.json b/GZCTF/ClientApp/package.json
@@ -29,6 +29,7 @@
     "dayjs": "^1.11.3",
     "echarts": "^5.3.3",
     "echarts-for-react": "^3.0.2",
+    "http-proxy-middleware": "^2.0.6",
     "next": "12.1.6",
     "react": "^18.2.0",
     "react-dom": "^17.0.2",

diff --git a/GZCTF/ClientApp/pnpm-lock.yaml b/GZCTF/ClientApp/pnpm-lock.yaml
diff --git a/GZCTF/ClientApp/src/Api.ts b/GZCTF/ClientApp/src/Api.ts
@@ -271,6 +271,30 @@ export interface UpdateUserInfoModel {
   role?: Role | null;
 }
 
+/**
+ * 日志信息
+ */
+export interface LogMessageModel {
+  /**
+   * 日志时间
+   * @format date-time
+   */
+  time?: string;
+
+  /** 用户名 */
+  name?: string | null;
+  level?: string | null;
+
+  /** IP地址 */
+  ip?: string | null;
+
+  /** 日志信息 */
+  msg?: string | null;
+
+  /** 任务状态 */
+  status?: string | null;
+}
+
 export enum ParticipationStatus {
   Pending = 'Pending',
   Accepted = 'Accepted',
@@ -1647,7 +1671,7 @@ export class Api<SecurityDataType extends unknown> extends HttpClient<SecurityDa
       query?: { count?: number; skip?: number },
       params: RequestParams = {}
     ) =>
-      this.request<ClientUserInfoModel[], RequestResponse>({
+      this.request<LogMessageModel[], RequestResponse>({
         path: `/api/admin/logs/${level}`,
         method: 'GET',
         query: query,
@@ -1666,8 +1690,7 @@ export class Api<SecurityDataType extends unknown> extends HttpClient<SecurityDa
       level: string | null,
       query?: { count?: number; skip?: number },
       options?: SWRConfiguration
-    ) =>
-      useSWR<ClientUserInfoModel[], RequestResponse>([`/api/admin/logs/${level}`, query], options),
+    ) => useSWR<LogMessageModel[], RequestResponse>([`/api/admin/logs/${level}`, query], options),
 
     /**
      * @description 使用此接口获取全部日志，需要Admin权限
@@ -1680,9 +1703,9 @@ export class Api<SecurityDataType extends unknown> extends HttpClient<SecurityDa
     mutateAdminLogs: (
       level: string | null,
       query?: { count?: number; skip?: number },
-      data?: ClientUserInfoModel[] | Promise<ClientUserInfoModel[]>,
+      data?: LogMessageModel[] | Promise<LogMessageModel[]>,
       options?: MutatorOptions
-    ) => mutate<ClientUserInfoModel[]>([`/api/admin/logs/${level}`, query], data, options),
+    ) => mutate<LogMessageModel[]>([`/api/admin/logs/${level}`, query], data, options),
 
     /**
      * @description 使用此接口更新队伍参与状态，审核申请，需要Admin权限

diff --git a/GZCTF/ClientApp/src/components/admin/LogViewer.tsx b/GZCTF/ClientApp/src/components/admin/LogViewer.tsx
@@ -1,12 +1,107 @@
-import { FC } from 'react';
-import { Group, Title } from '@mantine/core';
+import * as signalR from '@microsoft/signalr';
+import { HubConnectionState, LogLevel } from '@microsoft/signalr';
+import { FC, useEffect, useState, useRef } from 'react';
+import { useRouter } from 'next/router';
+import { Stack, Title, Pagination, Group, Table } from '@mantine/core';
+import { showNotification, updateNotification } from '@mantine/notifications';
+import { mdiCheck, mdiClose } from '@mdi/js';
+import Icon from '@mdi/react';
+import api, { LogMessageModel } from '../../Api';
+
+const ITEM_COUNT_PER_PAGE = 30;
+
+function formatDate(dateString?: string) {
+  const date = new Date(dateString!);
+  return (
+    `${date.getMonth() + 1}`.padStart(2, '0') +
+    '/' +
+    `${date.getDate()}`.padStart(2, '0') +
+    ' ' +
+    `${date.getHours()}`.padStart(2, '0') +
+    ':' +
+    `${date.getMinutes()}`.padStart(2, '0') +
+    ':' +
+    `${date.getSeconds()}`.padStart(2, '0')
+  );
+}
 
 const LogViewer: FC = () => {
+  const router = useRouter();
+  const level = router.query.level ?? 'All';
+
+  const [activePage, setPage] = useState(1);
+
+  const newLogs = useRef<LogMessageModel[]>([]);
+  const [, update] = useState(new Date());
+
+  const { data: logs, error } = api.admin.useAdminLogs(
+    level as string,
+    {
+      count: ITEM_COUNT_PER_PAGE,
+      skip: (activePage - 1) * ITEM_COUNT_PER_PAGE,
+    },
+    {
+      refreshInterval: 0,
+      revalidateIfStale: false,
+      revalidateOnFocus: false,
+    }
+  );
+
+  useEffect(() => {
+    let connection = new signalR.HubConnectionBuilder()
+      .withUrl('/hub/admin')
+      .withHubProtocol(new signalR.JsonHubProtocol())
+      .withAutomaticReconnect()
+      .configureLogging(LogLevel.Debug)
+      .build();
+
+    connection.on('ReceivedLog', (message: LogMessageModel) => {
+      console.log(message);
+      newLogs.current = [message, ...newLogs.current];
+      update(new Date(message.time!));
+    });
+
+    connection.start().catch((error) => {
+      console.log(error);
+      showNotification({
+        color: 'red',
+        title: 'signalR 连接失败',
+        message: error.message.split(':')[0],
+        icon: <Icon path={mdiClose} size={1} />,
+      });
+    });
+
+    return () => {
+      connection.stop().catch(() => {});
+    };
+  });
+
+  const rows = logs?.map((item, i) => (
+    <tr key={`${item.time}@${i}`}>
+      <td>{formatDate(item.time)}</td>
+      <td>{item.name}</td>
+      <td>{item.ip}</td>
+      <td>{item.msg}</td>
+      <td>{item.status}</td>
+    </tr>
+  ));
 
   return (
-    <Group>
-        <Title>System Logs</Title>
-    </Group>
+    <Stack>
+      <Group></Group>
+      <Table>
+        <thead>
+          <tr>
+            <th>时间</th>
+            <th>用户名</th>
+            <th>IP</th>
+            <th>信息</th>
+            <th>状态</th>
+          </tr>
+        </thead>
+        <tbody>{rows}</tbody>
+      </Table>
+    </Stack>
   );
 };