feat(mis-web): 管理系统web后端直接返回grpc操作日志结果，在浏览器端进行后处理 (#864)

### 做了什么

删除`apps/mis-web/src/api/log`的`getOperationLog`中的返回值
```
 operationType: x.operationEvent?.["$case"] || "unknown",
 operationCode: x.operationEvent?.["$case"] ? OperationCodeMap[x.operationEvent?.["$case"]] : "000000",
 operationDetail: getOperationDetail(x),
```
增加返回
` operationEvent: x.operationEvent,`
 
 让`mis-web`前端去实现对`audit-server`服务的`grpc`返回值的再处理

.changeset/tender-clocks-decide.md

@@ -0,0 +1,5 @@
+---
+"@scow/mis-web": patch
+---
+
+修改 mis-web 下后端返回的操作日志内容，在 mis-web 前端处理操作类型，操作行为，操作详细的展示

apps/mis-web/src/apis/api.mock.ts

@@ -17,7 +17,7 @@ import type { RunningJob } from "@scow/protos/build/common/job";
 import type { Account } from "@scow/protos/build/server/account";
 import type { AccountUserInfo, GetUserStatusResponse } from "@scow/protos/build/server/user";
 import { api } from "src/apis/api";
-import { OperationResult, OperationType } from "src/models/operationLog";
+import { OperationResult } from "src/models/operationLog";
 import { ClusterAccountInfo_ImportStatus, PlatformRole,
   TenantRole, UserInfo, UserRole, UserStatus } from "src/models/User";
 import { DEFAULT_TENANT_NAME } from "src/utils/constants";
@@ -415,11 +415,9 @@ export const mockApi: MockApi<typeof api> = {
     operatorUserId: "testUser",
     operatorUserName: "testUser",
     operatorIp: "localhost",
-    operationCode: "000000",
-    operationType: OperationType.login,
     operationResult: OperationResult.SUCCESS,
     operationTime: "2020-04-23T23:49:50.000Z",
-    operationDetail:"用户登录",
+    operationEvent: { $case: "login", login: {} },
   }], totalCount: 1 }),
 };
 

apps/mis-web/src/components/OperationLogTable.tsx

@@ -19,6 +19,7 @@ import { useAsync } from "react-async";
 import { api } from "src/apis";
 import { FilterFormContainer } from "src/components/FilterFormContainer";
 import {
+  getOperationDetail, OperationCodeMap,
   OperationLog,
   OperationLogQueryType,
   OperationResult,
@@ -86,6 +87,20 @@ export const OperationLogTable: React.FC<Props> = ({ user, queryType, accountNam
 
   const { data, isLoading } = useAsync({ promiseFn });
 
+  const getformatData = (results: OperationLog[] | undefined) => {
+    if (!results) {
+      return [];
+    }
+    return results.map((data) => {
+      return {
+        ...data,
+        operationCode: data.operationEvent?.["$case"] ? OperationCodeMap[data.operationEvent?.["$case"]] : "000000",
+        operationType: data.operationEvent?.["$case"] || "unknown",
+        operationDetail: getOperationDetail(data.operationEvent),
+      };
+    });
+  };
+
   return (
     <div>
       <FilterFormContainer>
@@ -137,7 +152,7 @@ export const OperationLogTable: React.FC<Props> = ({ user, queryType, accountNam
         </Form>
       </FilterFormContainer>
       <Table
-        dataSource={data?.results}
+        dataSource={getformatData(data?.results)}
         loading={isLoading}
         pagination={{
           current: pageInfo.page,
@@ -148,13 +163,16 @@ export const OperationLogTable: React.FC<Props> = ({ user, queryType, accountNam
         }}
       >
         <Table.Column<OperationLog> dataIndex="operationLogId" title="ID" />
-        <Table.Column<OperationLog> dataIndex="operationCode" title="操作码" />
-        <Table.Column<OperationLog>
+        <Table.Column
+          dataIndex="operationCode"
+          title="操作码"
+        />
+        <Table.Column
           dataIndex="operationType"
           title="操作行为"
-          render={(operationType) => OperationTypeTexts[operationType] }
+          render={(operationType) => OperationTypeTexts[operationType]}
         />
-        <Table.Column<OperationLog>
+        <Table.Column
           dataIndex="operationDetail"
           title="操作内容"
         />

apps/mis-web/src/models/operationLog.ts

@@ -10,8 +10,7 @@
  * See the Mulan PSL v2 for more details.
  */
 
-import { OperationType as LibOperationType, OperationTypeEnum } from "@scow/lib-operation-log";
-import { OperationLog as OperationLogProto } from "@scow/protos/build/audit/operation_log";
+import { OperationEvent, OperationType as LibOperationType, OperationTypeEnum } from "@scow/lib-operation-log";
 import { Static, Type } from "@sinclair/typebox";
 import { ValueOf } from "next/dist/shared/lib/constants";
 import { nullableMoneyToString } from "src/utils/money";
@@ -81,11 +80,9 @@ export const OperationLog = Type.Object({
   operatorUserId: Type.String(),
   operatorUserName: Type.String(),
   operatorIp: Type.String(),
-  operationCode: Type.String(),
-  operationType: Type.Enum(OperationType),
   operationResult: Type.Enum(OperationResult),
   operationTime: Type.Optional(Type.String()),
-  operationDetail: Type.String(),
+  operationEvent: Type.Any(),
 });
 export type OperationLog = Static<typeof OperationLog>;
 
@@ -206,10 +203,9 @@ export const OperationCodeMap: { [key in LibOperationType]: string } = {
   tenantPay: "040302",
 };
 
-export const getOperationDetail = (operationLog: OperationLogProto) => {
+export const getOperationDetail = (operationEvent: OperationEvent) => {
 
   try {
-    const { operationEvent } = operationLog;
     if (!operationEvent) {
       return "";
     }

apps/mis-web/src/pages/api/log/getOperationLog.ts

@@ -16,7 +16,7 @@ import { createOperationLogClient } from "@scow/lib-operation-log/build/index";
 import { UserServiceClient } from "@scow/protos/build/server/user";
 import { Static, Type } from "@sinclair/typebox";
 import { authenticate } from "src/auth/server";
-import { getOperationDetail, OperationCodeMap, OperationLog, OperationLogQueryType,
+import { OperationLog, OperationLogQueryType,
   OperationResult, OperationType } from "src/models/operationLog";
 import { PlatformRole, TenantRole, UserRole } from "src/models/User";
 import { getClient } from "src/utils/client";
@@ -158,12 +158,10 @@ export default typeboxRoute(GetOperationLogsSchema, async (req, res) => {
       operatorIp: x.operatorIp,
       operationResult: x.operationResult,
       operationTime: x.operationTime,
-      operationType: x.operationEvent?.["$case"] || "unknown",
-      operationCode: x.operationEvent?.["$case"] ? OperationCodeMap[x.operationEvent?.["$case"]] : "000000",
-      operationDetail: getOperationDetail(x),
+      operationEvent: x.operationEvent,
     };
   });
   return {
-    200: { results: operationLogs as OperationLog[], totalCount },
+    200: { results: operationLogs as any as OperationLog[], totalCount },
   };
 });