[INLONG-10839][Dashboard] Data preview style structure modification

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": "数据条数",

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",

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>
   );
 };