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 b57d63197d [INLONG-10839][Dashboard] Data preview style structure
modification (#10840)
b57d63197d is described below
commit b57d63197d1735461517578a6397ff4abe72ead4
Author: kamianlaida <165994047+wohainilao...@users.noreply.github.com>
AuthorDate: Wed Aug 21 18:15:34 2024 +0800
[INLONG-10839][Dashboard] Data preview style structure modification (#10840)
---
inlong-dashboard/src/ui/locales/cn.json | 3 +
inlong-dashboard/src/ui/locales/en.json | 3 +
.../pages/GroupDetail/DataStream/PreviewModal.tsx | 132 ++++++++++++++++-----
3 files changed, 110 insertions(+), 28 deletions(-)
diff --git a/inlong-dashboard/src/ui/locales/cn.json
b/inlong-dashboard/src/ui/locales/cn.json
index 2c00ea1dc0..379a5a83e1 100644
--- a/inlong-dashboard/src/ui/locales/cn.json
+++ b/inlong-dashboard/src/ui/locales/cn.json
@@ -703,6 +703,9 @@
"pages.GroupDetail.Delay.AverageTitle": "平均传输时延 (ms)",
"pages.GroupDetail.Delay.RealTimeTitle": "传输时延 (ms)",
"pages.GroupDetail.Stream.Preview": "数据预览",
+ "pages.GroupDetail.Stream.Original": "原文",
+ "pages.GroupDetail.Stream.ShowOriginal": "显示原文",
+ "pages.GroupDetail.Stream.Closed": "关闭",
"pages.GroupDetail.Stream.Dt": "数据时间 (dt)",
"pages.GroupDetail.Stream.Content": "数据内容",
"pages.GroupDetail.Stream.Number": "数据条数",
diff --git a/inlong-dashboard/src/ui/locales/en.json
b/inlong-dashboard/src/ui/locales/en.json
index 7546f2e399..bc1106fdd6 100644
--- a/inlong-dashboard/src/ui/locales/en.json
+++ b/inlong-dashboard/src/ui/locales/en.json
@@ -703,6 +703,9 @@
"pages.GroupDetail.Delay.AverageTitle": "Average transmission delay (ms)",
"pages.GroupDetail.Delay.RealTimeTitle": "Transmission delay (ms)",
"pages.GroupDetail.Stream.Preview": "Data preview",
+ "pages.GroupDetail.Stream.Original": "Original",
+ "pages.GroupDetail.Stream.ShowOriginal": "Show Original",
+ "pages.GroupDetail.Stream.Closed": "Close",
"pages.GroupDetail.Stream.Dt": "Data time(dt)",
"pages.GroupDetail.Stream.Content": "Data content",
"pages.GroupDetail.Stream.Number": "Records number",
diff --git
a/inlong-dashboard/src/ui/pages/GroupDetail/DataStream/PreviewModal.tsx
b/inlong-dashboard/src/ui/pages/GroupDetail/DataStream/PreviewModal.tsx
index 7481992245..a608dbcb7e 100644
--- a/inlong-dashboard/src/ui/pages/GroupDetail/DataStream/PreviewModal.tsx
+++ b/inlong-dashboard/src/ui/pages/GroupDetail/DataStream/PreviewModal.tsx
@@ -18,12 +18,12 @@
*/
import React, { useState } from 'react';
-import { Modal, Table, Radio, RadioChangeEvent } from 'antd';
+import { Modal, Table, Radio, RadioChangeEvent, Button, Card } 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';
+import dayjs from 'dayjs';
export interface Props extends ModalProps {
inlongGroupId: string;
@@ -33,29 +33,18 @@ export interface Props extends ModalProps {
const Comp: React.FC<Props> = ({ inlongGroupId, inlongStreamId, ...modalProps
}) => {
const [position, setPosition] = useState(1);
+
+ const [originalModal, setOriginalModal] = useState({
+ open: false,
+ record: {},
+ });
interface DataType {
id: React.Key;
- dt: string;
- body: string;
}
- const detailColumns: ColumnsType<DataType> = [
- {
- title: 'ID',
- dataIndex: 'id',
- },
- {
- 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 onShowOriginModal = record => {
+ setOriginalModal({ open: true, record: record });
+ };
const { data: previewData, run: getPreviewData } = useRequest(
{
@@ -72,10 +61,80 @@ const Comp: React.FC<Props> = ({ inlongGroupId,
inlongStreamId, ...modalProps })
},
);
+ const getColumn = () => {
+ let exitsId = false;
+ const result = previewData?.[0]?.fieldList?.reduce((acc, cur) => {
+ if (cur['fieldName'] === 'id') {
+ exitsId = true;
+ }
+ const width =
+ (cur['fieldName'].length > cur['fieldValue'].length
+ ? cur['fieldName'].length
+ : cur['fieldValue'].length) * 10;
+ acc.push({
+ title: cur['fieldName'],
+ key: cur['fieldName'],
+ dataIndex: cur['fieldName'],
+ width: width >= 100 ? width : 100,
+ });
+ return acc;
+ }, []);
+ if (result) {
+ if (exitsId) {
+ return result;
+ }
+ return [{ title: 'id', key: 'id', dataIndex: 'id', width: 100
}].concat([...result]);
+ }
+ return;
+ };
+
+ const detailColumns: ColumnsType<DataType> = [
+ {
+ title: i18n.t('pages.GroupDetail.Stream.Dt'),
+ key: 'dt',
+ width: 200,
+ dataIndex: 'dt',
+ },
+ ].concat(
+ (getColumn() ? getColumn() : []).concat([
+ {
+ title: 'operation',
+ key: 'operation',
+ fixed: 'right',
+ width: 100,
+ render: (text, record: any) => (
+ <>
+ <Button
+ type="link"
+ onClick={() => {
+ onShowOriginModal(record);
+ }}
+ >
+ {i18n.t('pages.GroupDetail.Stream.ShowOriginal')}
+ </Button>
+ </>
+ ),
+ },
+ ]),
+ );
+ const convertListToMap = () => {
+ const result = [];
+ for (let i = 0; i < previewData?.length; i++) {
+ const temp = previewData?.[i]?.fieldList.reduce((acc, item) => {
+ acc[item.fieldName] = item.fieldValue;
+ return acc;
+ }, {});
+ temp['id'] = temp['id'] ? temp['id'] : i;
+ temp['headers'] = previewData?.[i]?.headers;
+ temp['body'] = previewData?.[i]?.body;
+ temp['dt'] = dayjs(previewData?.[i]?.dt).format('YYYY-MM-DD HH:mm:ss');
+ result.push(temp);
+ }
+ return result;
+ };
const onChange = ({ target: { value } }: RadioChangeEvent) => {
setPosition(value);
};
-
useUpdateEffect(() => {
if (modalProps.open) {
if (inlongStreamId) {
@@ -102,14 +161,31 @@ const Comp: React.FC<Props> = ({ inlongGroupId,
inlongStreamId, ...modalProps })
</div>
<Table
columns={detailColumns}
- dataSource={previewData}
+ dataSource={convertListToMap()}
+ scroll={{ x: 950 }}
rowKey={'id'}
- expandable={{
- expandedRowRender: record => <p style={{ margin: 0
}}>{record.body}</p>,
- rowExpandable: record => record.id !== 'Not Expandable',
- expandRowByClick: true,
- }}
></Table>
+
+ <Modal
+ width={800}
+ open={originalModal.open}
+ title={i18n.t('pages.GroupDetail.Stream.Original')}
+ onCancel={() => setOriginalModal(prev => ({ ...prev, open: false }))}
+ footer={[
+ <Button key="back" onClick={() => setOriginalModal(prev => ({
...prev, open: false }))}>
+ {i18n.t('pages.GroupDetail.Stream.Closed')}
+ </Button>,
+ ]}
+ >
+ <div>
+ <Card title="headers" bordered={false} style={{ width: 700 }}>
+ <p style={{ margin: 0
}}>{JSON.stringify(originalModal?.record['headers'])}</p>
+ </Card>
+ <Card title="body" bordered={false} style={{ width: 700, marginTop:
10 }}>
+ <p style={{ margin: 0 }}>{originalModal?.record['body']}</p>
+ </Card>
+ </div>
+ </Modal>
</Modal>
);
};
