This is an automated email from the ASF dual-hosted git repository.
dockerzhang pushed a commit to branch master
in repository https://gitbox.apache.org/repos/asf/inlong.git
The following commit(s) were added to refs/heads/master by this push:
new dfed058f5a [INLONG-8298][Dashboard] Stream supports data preview
(#8299)
dfed058f5a is described below
commit dfed058f5ad5307fed2ec0509680ef9e8f70d3e2
Author: Lizhen <[email protected]>
AuthorDate: Wed Jun 28 14:25:31 2023 +0800
[INLONG-8298][Dashboard] Stream supports data preview (#8299)
---
inlong-dashboard/src/ui/locales/cn.json | 5 +
inlong-dashboard/src/ui/locales/en.json | 5 +
.../pages/GroupDetail/DataStream/PreviewModal.tsx | 122 +++++++++++++++++++++
.../src/ui/pages/GroupDetail/DataStream/index.tsx | 22 ++++
4 files changed, 154 insertions(+)
diff --git a/inlong-dashboard/src/ui/locales/cn.json
b/inlong-dashboard/src/ui/locales/cn.json
index db3c861f09..5668d2079d 100644
--- a/inlong-dashboard/src/ui/locales/cn.json
+++ b/inlong-dashboard/src/ui/locales/cn.json
@@ -629,6 +629,11 @@
"pages.GroupDetail.Audit.Hour": "小时",
"pages.GroupDetail.Audit.Day": "天",
"pages.GroupDetail.Audit.Sink": "数据目标",
+ "pages.GroupDetail.Stream.Preview": "数据预览",
+ "pages.GroupDetail.Stream.NodeIp": "数据节点 IP",
+ "pages.GroupDetail.Stream.Dt": "数据时间 (dt)",
+ "pages.GroupDetail.Stream.Content": "数据内容",
+ "pages.GroupDetail.Stream.Number": "数据条数",
"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 249d073c43..40e71f8cbe 100644
--- a/inlong-dashboard/src/ui/locales/en.json
+++ b/inlong-dashboard/src/ui/locales/en.json
@@ -629,6 +629,11 @@
"pages.GroupDetail.Audit.Hour": "Hour",
"pages.GroupDetail.Audit.Day": "Day",
"pages.GroupDetail.Audit.Sink": "Sink",
+ "pages.GroupDetail.Stream.Preview": "Data Preview",
+ "pages.GroupDetail.Stream.NodeIp": "DataNode IP",
+ "pages.GroupDetail.Stream.Dt": "Data Time(dt)",
+ "pages.GroupDetail.Stream.Content": "Data Content",
+ "pages.GroupDetail.Stream.Number": "Records Number",
"pages.ApprovalDetail.GroupConfig.DataStorages": "DataStorages",
"pages.ApprovalDetail.GroupConfig.ApprovalInformation": "Approval
information",
"pages.ApprovalDetail.GroupConfig.DataFlowInformation": "Data stream
information",
diff --git
a/inlong-dashboard/src/ui/pages/GroupDetail/DataStream/PreviewModal.tsx
b/inlong-dashboard/src/ui/pages/GroupDetail/DataStream/PreviewModal.tsx
new file mode 100644
index 0000000000..001152bb9b
--- /dev/null
+++ b/inlong-dashboard/src/ui/pages/GroupDetail/DataStream/PreviewModal.tsx
@@ -0,0 +1,122 @@
+/*
+ * 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, { useState } from 'react';
+import { Modal, Table, Radio, RadioChangeEvent } from 'antd';
+import { ModalProps } from 'antd/es/modal';
+import { useRequest, useUpdateEffect } from '@/ui/hooks';
+import i18n from '@/i18n';
+import { ColumnsType } from 'antd/es/table';
+import { timestampFormat } from '@/core/utils';
+
+export interface Props extends ModalProps {
+ inlongGroupId: string;
+ inlongStreamId?: string;
+ record?: Record<string, any>;
+}
+
+const Comp: React.FC<Props> = ({ inlongGroupId, inlongStreamId, ...modalProps
}) => {
+ const [position, setPosition] = useState(1);
+ interface DataType {
+ id: React.Key;
+ nodeIp: string;
+ dt: string;
+ body: string;
+ }
+
+ const detailColumns: ColumnsType<DataType> = [
+ {
+ title: 'ID',
+ dataIndex: 'id',
+ },
+ {
+ title: i18n.t('pages.GroupDetail.Stream.NodeIp'),
+ dataIndex: 'nodeIp',
+ },
+ {
+ title: i18n.t('pages.GroupDetail.Stream.Dt'),
+ dataIndex: 'dt',
+ render: text => text && timestampFormat(text),
+ },
+ {
+ title: i18n.t('pages.GroupDetail.Stream.Content'),
+ dataIndex: 'body',
+ ellipsis: true,
+ render: text => <a>{text}</a>,
+ },
+ ];
+
+ const { data: previewData, run: getPreviewData } = useRequest(
+ {
+ url: '/stream/queryMessage',
+ params: {
+ groupId: inlongGroupId,
+ streamId: inlongStreamId,
+ position: position,
+ },
+ },
+ {
+ refreshDeps: [position],
+ manual: inlongStreamId !== '' ? false : true,
+ },
+ );
+
+ const onChange = ({ target: { value } }: RadioChangeEvent) => {
+ setPosition(value);
+ };
+
+ useUpdateEffect(() => {
+ if (modalProps.open) {
+ if (inlongStreamId) {
+ getPreviewData();
+ }
+ }
+ }, [modalProps.open]);
+
+ return (
+ <Modal
+ {...modalProps}
+ title={i18n.t('pages.GroupDetail.Stream.Preview')}
+ width={1000}
+ footer={null}
+ >
+ <div style={{ marginBottom: 20, marginTop: 20 }}>
+ <span>{i18n.t('pages.GroupDetail.Stream.Number')}: </span>
+ <Radio.Group defaultValue="1" style={{ marginLeft: 20 }}
onChange={onChange}>
+ <Radio.Button value="1">1</Radio.Button>
+ <Radio.Button value="5">5</Radio.Button>
+ <Radio.Button value="10">10</Radio.Button>
+ <Radio.Button value="50">50</Radio.Button>
+ </Radio.Group>
+ </div>
+ <Table
+ columns={detailColumns}
+ dataSource={previewData}
+ rowKey={'id'}
+ expandable={{
+ expandedRowRender: record => <p style={{ margin: 0
}}>{record.body}</p>,
+ rowExpandable: record => record.id !== 'Not Expandable',
+ expandRowByClick: true,
+ }}
+ ></Table>
+ </Modal>
+ );
+};
+
+export default Comp;
diff --git a/inlong-dashboard/src/ui/pages/GroupDetail/DataStream/index.tsx
b/inlong-dashboard/src/ui/pages/GroupDetail/DataStream/index.tsx
index f80d593fc1..878f6fdfd6 100644
--- a/inlong-dashboard/src/ui/pages/GroupDetail/DataStream/index.tsx
+++ b/inlong-dashboard/src/ui/pages/GroupDetail/DataStream/index.tsx
@@ -31,6 +31,7 @@ import { CommonInterface } from '../common';
import StreamItemModal from './StreamItemModal';
import SourceSinkCard from './SourceSinkCard';
import { getFilterFormContent } from './config';
+import PreviewModal from './PreviewModal';
type Props = CommonInterface;
@@ -50,6 +51,12 @@ const Comp = ({ inlongGroupId, readonly, mqType }: Props,
ref) => {
inlongGroupId,
});
+ const [previewModal, setPreviewModal] = useState({
+ open: false,
+ inlongStreamId: '',
+ inlongGroupId,
+ });
+
const [groupLogs, setGroupLogs] = useState({
open: false,
inlongGroupId,
@@ -151,6 +158,10 @@ const Comp = ({ inlongGroupId, readonly, mqType }: Props,
ref) => {
});
};
+ const onPreview = record => {
+ setPreviewModal({ open: true, inlongGroupId, inlongStreamId:
record.inlongStreamId });
+ };
+
const onChange = ({ current: pageNum, pageSize }) => {
setOptions(prev => ({
...prev,
@@ -204,6 +215,9 @@ const Comp = ({ inlongGroupId, readonly, mqType }: Props,
ref) => {
{t('meta.Stream.ExecuteWorkflow')}
</Button>
)}
+ <Button type="link" onClick={() => onPreview(record)}>
+ {t('pages.GroupDetail.Stream.Preview')}
+ </Button>
</div>
),
},
@@ -255,6 +269,14 @@ const Comp = ({ inlongGroupId, readonly, mqType }: Props,
ref) => {
onCancel={() => setStreamItemModal(prev => ({ ...prev, open: false }))}
/>
+ <PreviewModal
+ {...previewModal}
+ onOk={async () => {
+ setPreviewModal(prev => ({ ...prev, open: false }));
+ }}
+ onCancel={() => setPreviewModal(prev => ({ ...prev, open: false }))}
+ />
+
<GroupLogs
{...groupLogs}
onOk={() =>
