[INLONG-9427][Dashboard] Data access supports viewing operation logs

inlong-dashboard/src/ui/locales/cn.json

@@ -603,6 +603,7 @@
   "pages.GroupDetail.Audit": "审计对账",
   "pages.GroupDetail.Resource": "资源详情",
   "pages.GroupDetail.Delay": "传输时延",
+  "pages.GroupDetail.OperationLog": "操作日志",
   "pages.GroupDetail.Resource.Info": " 信息",
   "pages.GroupDetail.Audit.DataStream": "数据流",
   "pages.GroupDetail.Audit.StartDate": "开始日期",
@@ -624,6 +625,15 @@
   "pages.GroupDetail.Stream.Dt": "数据时间 (dt)",
   "pages.GroupDetail.Stream.Content": "数据内容",
   "pages.GroupDetail.Stream.Number": "数据条数",
+  "pages.GroupDetail.OperationLog.Stream": "数据流 ID",
+  "pages.GroupDetail.OperationLog.OperationTarget": "操作目标",
+  "pages.GroupDetail.OperationLog.OperationType": "操作类型",
+  "pages.GroupDetail.OperationLog.Table.GroupId": "数据流组 ID",
+  "pages.GroupDetail.OperationLog.Table.StreamId": "数据流 ID",
+  "pages.GroupDetail.OperationLog.Table.Operator": "操作人",
+  "pages.GroupDetail.OperationLog.Table.OperationType": "操作类型",
+  "pages.GroupDetail.OperationLog.Table.OperationTarget": "操作目标",
+  "pages.GroupDetail.OperationLog.Table.Log": "日志",
   "pages.ApprovalDetail.GroupConfig.DataStorages": "数据存储",
   "pages.ApprovalDetail.GroupConfig.ApprovalInformation": "审批信息",
   "pages.ApprovalDetail.GroupConfig.DataFlowInformation": "数据流信息",

inlong-dashboard/src/ui/locales/en.json

@@ -601,6 +601,7 @@
   "pages.GroupDetail.Sinks": "Sinks",
   "pages.GroupDetail.Audit": "Audit",
   "pages.GroupDetail.Delay": "Transmission delay",
+  "pages.GroupDetail.OperationLog": "Operation log",
   "pages.GroupDetail.Resource": "Resource detail",
   "pages.GroupDetail.Resource.Info": " Info",
   "pages.GroupDetail.Audit.DataStream": "Data stream",
@@ -623,6 +624,15 @@
   "pages.GroupDetail.Stream.Dt": "Data time(dt)",
   "pages.GroupDetail.Stream.Content": "Data content",
   "pages.GroupDetail.Stream.Number": "Records number",
+  "pages.GroupDetail.OperationLog.Stream": "Stream",
+  "pages.GroupDetail.OperationLog.OperationTarget": "Operation target",
+  "pages.GroupDetail.OperationLog.OperationType": "Operation type",
+  "pages.GroupDetail.OperationLog.Table.GroupId": "Group id",
+  "pages.GroupDetail.OperationLog.Table.StreamId": "Stream id",
+  "pages.GroupDetail.OperationLog.Table.Operator": "Operator",
+  "pages.GroupDetail.OperationLog.Table.OperationType": "Operation type",
+  "pages.GroupDetail.OperationLog.Table.OperationTarget": "Operation target",
+  "pages.GroupDetail.OperationLog.Table.Log": "Log",
   "pages.ApprovalDetail.GroupConfig.DataStorages": "Data storages",
   "pages.ApprovalDetail.GroupConfig.ApprovalInformation": "Approval information",
   "pages.ApprovalDetail.GroupConfig.DataFlowInformation": "Data stream information",

inlong-dashboard/src/ui/pages/GroupDetail/OperationLog/config.tsx

@@ -0,0 +1,144 @@
+/*
+ * Licensed to the Apache Software Foundation (ASF) under one
+ * or more contributor license agreements.  See the NOTICE file
+ * distributed with this work for additional information
+ * regarding copyright ownership.  The ASF licenses this file
+ * to you under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance
+ * with the License.  You may obtain a copy of the License at
+ *
+ *   http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied.  See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+import i18n from '@/i18n';
+import { Tooltip } from 'antd';
+import React from 'react';
+
+const targetList = [
+  {
+    label: 'Group',
+    value: 'GROUP',
+  },
+  {
+    label: 'Stream',
+    value: 'STREAM',
+  },
+  {
+    label: 'Source',
+    value: 'SOURCE',
+  },
+  {
+    label: 'Sink',
+    value: 'SINK',
+  },
+];
+
+const typeList = [
+  {
+    label: 'Create',
+    value: 'CREATE',
+  },
+  {
+    label: 'Update',
+    value: 'UPDATE',
+  },
+  {
+    label: 'Delete',
+    value: 'DELETE',
+  },
+  {
+    label: 'Get',
+    value: 'GET',
+  },
+];
+
+export const getFormContent = inlongGroupId => [
+  {
+    type: 'select',
+    label: i18n.t('pages.GroupDetail.OperationLog.Stream'),
+    name: 'inlongStreamId',
+    props: {
+      options: {
+        requestAuto: true,
+        requestTrigger: ['onOpen', 'onSearch'],
+        requestService: keyword => ({
+          url: '/stream/list',
+          method: 'POST',
+          data: {
+            keyword,
+            pageNum: 1,
+            pageSize: 20,
+            inlongGroupId,
+          },
+        }),
+        requestParams: {
+          formatResult: result =>
+            result?.list?.map(item => ({
+              label: item.inlongStreamId,
+              value: item.inlongStreamId,
+            })),
+        },
+      },
+    },
+  },
+  {
+    type: 'select',
+    label: i18n.t('pages.GroupDetail.OperationLog.OperationTarget'),
+    name: 'operationTarget',
+    props: {
+      dropdownMatchSelectWidth: false,
+      options: targetList,
+    },
+  },
+  {
+    type: 'select',
+    label: i18n.t('pages.GroupDetail.OperationLog.OperationType'),
+    name: 'operationType',
+    props: {
+      dropdownMatchSelectWidth: false,
+      options: typeList,
+    },
+  },
+];
+
+export const getTableColumns = [
+  {
+    title: i18n.t('pages.GroupDetail.OperationLog.Table.GroupId'),
+    dataIndex: 'inlongGroupId',
+  },
+  {
+    title: i18n.t('pages.GroupDetail.OperationLog.Table.StreamId'),
+    dataIndex: 'inlongStreamId',
+  },
+  {
+    title: i18n.t('pages.GroupDetail.OperationLog.Table.Operator'),
+    dataIndex: 'operator',
+  },
+  {
+    title: i18n.t('pages.GroupDetail.OperationLog.Table.OperationType'),
+    dataIndex: 'operationType',
+    render: text => typeList.find(c => c.value === text)?.label || text,
+  },
+  {
+    title: i18n.t('pages.GroupDetail.OperationLog.Table.OperationTarget'),
+    dataIndex: 'operationTarget',
+    render: text => targetList.find(c => c.value === text)?.label || text,
+  },
+  {
+    title: i18n.t('pages.GroupDetail.OperationLog.Table.Log'),
+    dataIndex: 'body',
+    ellipsis: true,
+    render: body => (
+      <Tooltip placement="topLeft" title={body}>
+        {body}
+      </Tooltip>
+    ),
+  },
+];

inlong-dashboard/src/ui/pages/GroupDetail/OperationLog/index.tsx

@@ -0,0 +1,93 @@
+/*
+ * Licensed to the Apache Software Foundation (ASF) under one
+ * or more contributor license agreements.  See the NOTICE file
+ * distributed with this work for additional information
+ * regarding copyright ownership.  The ASF licenses this file
+ * to you under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance
+ * with the License.  You may obtain a copy of the License at
+ *
+ *   http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied.  See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+import React, { useEffect, useState } from 'react';
+import HighTable from '@/ui/components/HighTable';
+import { useRequest } from '@/ui/hooks';
+import { CommonInterface } from '../common';
+import { getFormContent, getTableColumns } from './config';
+import { defaultSize } from '@/configs/pagination';
+
+type Props = CommonInterface;
+
+const Comp: React.FC<Props> = ({ inlongGroupId }) => {
+  const [options, setOptions] = useState({
+    pageSize: defaultSize,
+    pageNum: 1,
+  });
+
+  const { data: sourceData, run } = useRequest(
+    {
+      url: '/operationLog/list',
+      method: 'POST',
+      data: {
+        ...options,
+        inlongGroupId,
+      },
+    },
+    {
+      refreshDeps: [options],
+    },
+  );
+
+  const pagination = {
+    pageSize: options.pageSize,
+    current: options.pageNum,
+    total: sourceData?.total,
+  };
+  const onChange = ({ current: pageNum, pageSize }) => {
+    setOptions(prev => ({
+      ...prev,
+      pageNum,
+      pageSize,
+    }));
+  };
+
+  const onFilter = allValues => {
+    setOptions(prev => ({
+      ...prev,
+      ...allValues,
+      pageNum: 1,
+    }));
+  };
+
+  useEffect(() => {
+    run();
+  }, []);
+
+  return (
+    <>
+      <HighTable
+        filterForm={{
+          content: getFormContent(inlongGroupId),
+          onFilter,
+        }}
+        table={{
+          columns: getTableColumns,
+          dataSource: sourceData?.list,
+          pagination: pagination,
+          rowKey: 'inlongGroupId',
+          onChange,
+        }}
+      />
+    </>
+  );
+};
+
+export default Comp;

inlong-dashboard/src/ui/pages/GroupDetail/index.tsx

@@ -29,6 +29,7 @@ import DataStream from './DataStream';
 import Audit from './Audit';
 import ResourceInfo from './ResourceInfo';
 import Delay from './Delay';
+import OperationLog from './OperationLog';
 
 const Comp: React.FC = () => {
   const { t } = useTranslation();
@@ -90,6 +91,12 @@ const Comp: React.FC = () => {
           content: Delay,
           hidden: isReadonly || isCreate,
         },
+        {
+          label: t('pages.GroupDetail.OperationLog'),
+          value: 'OperationLog',
+          content: OperationLog,
+          hidden: isReadonly || isCreate,
+        },
       ].filter(item => !item.hidden),
     [isReadonly, isCreate, t],
   );