From a8339009e238542dc721063dd0e9268914f7c4bb Mon Sep 17 00:00:00 2001 From: wanglz Date: Wed, 6 Dec 2023 11:20:33 +0800 Subject: [PATCH 1/5] [INLONG-9427][Dashboard] Data access supports viewing operation logs --- inlong-dashboard/src/ui/locales/cn.json | 10 ++ inlong-dashboard/src/ui/locales/en.json | 10 ++ .../pages/GroupDetail/OperationLog/config.tsx | 125 ++++++++++++++++++ .../pages/GroupDetail/OperationLog/index.tsx | 93 +++++++++++++ .../src/ui/pages/GroupDetail/index.tsx | 7 + 5 files changed, 245 insertions(+) create mode 100644 inlong-dashboard/src/ui/pages/GroupDetail/OperationLog/config.tsx create mode 100644 inlong-dashboard/src/ui/pages/GroupDetail/OperationLog/index.tsx diff --git a/inlong-dashboard/src/ui/locales/cn.json b/inlong-dashboard/src/ui/locales/cn.json index 4d88c282162..c35005a1637 100644 --- a/inlong-dashboard/src/ui/locales/cn.json +++ b/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": "数据流信息", diff --git a/inlong-dashboard/src/ui/locales/en.json b/inlong-dashboard/src/ui/locales/en.json index 00fbe020d06..9853526fe1b 100644 --- a/inlong-dashboard/src/ui/locales/en.json +++ b/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", diff --git a/inlong-dashboard/src/ui/pages/GroupDetail/OperationLog/config.tsx b/inlong-dashboard/src/ui/pages/GroupDetail/OperationLog/config.tsx new file mode 100644 index 00000000000..7583cf9ae08 --- /dev/null +++ b/inlong-dashboard/src/ui/pages/GroupDetail/OperationLog/config.tsx @@ -0,0 +1,125 @@ +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 => ( + + {body} + + ), + }, +]; diff --git a/inlong-dashboard/src/ui/pages/GroupDetail/OperationLog/index.tsx b/inlong-dashboard/src/ui/pages/GroupDetail/OperationLog/index.tsx new file mode 100644 index 00000000000..9ad3d5b9030 --- /dev/null +++ b/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 = ({ inlongGroupId }) => { + const [options, setOptions] = useState({ + pageSize: defaultSize, + pageNum: 1, + }); + + const { data: sourceData, run } = useRequest( + { + url: '/operationLog/list', + method: 'POST', + data: { + inlongGroupId, + ...options, + }, + }, + { + 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 ( + <> + + + ); +}; + +export default Comp; diff --git a/inlong-dashboard/src/ui/pages/GroupDetail/index.tsx b/inlong-dashboard/src/ui/pages/GroupDetail/index.tsx index 685fa025d77..ec025a322b6 100644 --- a/inlong-dashboard/src/ui/pages/GroupDetail/index.tsx +++ b/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], ); From 738a3c6944fdd10dcdd5a7b5aed94e9d74cca6d0 Mon Sep 17 00:00:00 2001 From: wanglz Date: Wed, 6 Dec 2023 11:33:44 +0800 Subject: [PATCH 2/5] make some changes --- .../src/ui/pages/GroupDetail/OperationLog/index.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/inlong-dashboard/src/ui/pages/GroupDetail/OperationLog/index.tsx b/inlong-dashboard/src/ui/pages/GroupDetail/OperationLog/index.tsx index 9ad3d5b9030..d00138ceb38 100644 --- a/inlong-dashboard/src/ui/pages/GroupDetail/OperationLog/index.tsx +++ b/inlong-dashboard/src/ui/pages/GroupDetail/OperationLog/index.tsx @@ -37,8 +37,8 @@ const Comp: React.FC = ({ inlongGroupId }) => { url: '/operationLog/list', method: 'POST', data: { - inlongGroupId, ...options, + inlongGroupId, }, }, { From e448f6045b8fd05b446476c306185fda3c2321c3 Mon Sep 17 00:00:00 2001 From: wanglz Date: Wed, 6 Dec 2023 11:37:12 +0800 Subject: [PATCH 3/5] make some changes --- .../pages/GroupDetail/OperationLog/config.tsx | 19 +++++++++++++++++++ 1 file changed, 19 insertions(+) diff --git a/inlong-dashboard/src/ui/pages/GroupDetail/OperationLog/config.tsx b/inlong-dashboard/src/ui/pages/GroupDetail/OperationLog/config.tsx index 7583cf9ae08..6816e2cf463 100644 --- a/inlong-dashboard/src/ui/pages/GroupDetail/OperationLog/config.tsx +++ b/inlong-dashboard/src/ui/pages/GroupDetail/OperationLog/config.tsx @@ -1,3 +1,22 @@ +/* + * 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'; From 69c0018a88ccbba3795fc4fac3cdefa5f345373f Mon Sep 17 00:00:00 2001 From: wanglz Date: Wed, 6 Dec 2023 15:05:29 +0800 Subject: [PATCH 4/5] log use stringify --- .../src/ui/pages/GroupDetail/OperationLog/config.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/inlong-dashboard/src/ui/pages/GroupDetail/OperationLog/config.tsx b/inlong-dashboard/src/ui/pages/GroupDetail/OperationLog/config.tsx index 6816e2cf463..5b66ba3afb0 100644 --- a/inlong-dashboard/src/ui/pages/GroupDetail/OperationLog/config.tsx +++ b/inlong-dashboard/src/ui/pages/GroupDetail/OperationLog/config.tsx @@ -136,8 +136,8 @@ export const getTableColumns = [ dataIndex: 'body', ellipsis: true, render: body => ( - - {body} + + {JSON.stringify(body)} ), }, From 24b4184d36918a73f17faa5ba62e33c1180e064e Mon Sep 17 00:00:00 2001 From: wanglz Date: Wed, 6 Dec 2023 15:24:16 +0800 Subject: [PATCH 5/5] make some changes --- .../src/ui/pages/GroupDetail/OperationLog/config.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/inlong-dashboard/src/ui/pages/GroupDetail/OperationLog/config.tsx b/inlong-dashboard/src/ui/pages/GroupDetail/OperationLog/config.tsx index 5b66ba3afb0..6816e2cf463 100644 --- a/inlong-dashboard/src/ui/pages/GroupDetail/OperationLog/config.tsx +++ b/inlong-dashboard/src/ui/pages/GroupDetail/OperationLog/config.tsx @@ -136,8 +136,8 @@ export const getTableColumns = [ dataIndex: 'body', ellipsis: true, render: body => ( - - {JSON.stringify(body)} + + {body} ), },