From 79d943082449dcf9eae18ed5b748767bdc983159 Mon Sep 17 00:00:00 2001
From: kamianlaida <165994047+wohainilaodou@users.noreply.github.com>
Date: Tue, 29 Oct 2024 12:45:39 +0800
Subject: [PATCH] [INLONG-11425][Dashboard] Data synchronization corrects the
 display problem of uncommitted data (#11428)

---
 .../pages/GroupDetail/DataStream/PreviewModal.tsx  | 14 +++++++++-----
 1 file changed, 9 insertions(+), 5 deletions(-)

diff --git a/inlong-dashboard/src/ui/pages/GroupDetail/DataStream/PreviewModal.tsx b/inlong-dashboard/src/ui/pages/GroupDetail/DataStream/PreviewModal.tsx
index 6593c59e6c3..fc3b5361850 100644
--- a/inlong-dashboard/src/ui/pages/GroupDetail/DataStream/PreviewModal.tsx
+++ b/inlong-dashboard/src/ui/pages/GroupDetail/DataStream/PreviewModal.tsx
@@ -89,8 +89,8 @@ const Comp: React.FC<Props> = ({ inlongGroupId, inlongStreamId, ...modalProps })
     return;
   };
   const timestampSorter = (a, b) => {
-    const dateA = dayjs(a.dt, 'YYYY-MM-DD HH:mm:ss');
-    const dateB = dayjs(b.dt, 'YYYY-MM-DD HH:mm:ss');
+    const dateA = dayjs(a?.dt, 'YYYY-MM-DD HH:mm:ss');
+    const dateB = dayjs(b?.dt, 'YYYY-MM-DD HH:mm:ss');
     return dateA.isBefore(dateB) ? -1 : dateA.isAfter(dateB) ? 1 : 0;
   };
   const sortOrder: SortOrder = 'descend';
@@ -135,7 +135,8 @@ const Comp: React.FC<Props> = ({ inlongGroupId, inlongStreamId, ...modalProps })
       }, {});
       temp['id'] = temp['id'] ? temp['id'] : i;
       temp['headers'] = previewData?.[i]?.headers;
-      temp['body'] = previewData?.[i]?.body;
+      temp['preBody'] = previewData?.[i]?.body;
+      temp['attribute'] = previewData?.[i]?.attribute;
       temp['dt'] = dayjs(previewData?.[i]?.dt).format('YYYY-MM-DD HH:mm:ss');
       result.push(temp);
     }
@@ -187,11 +188,14 @@ const Comp: React.FC<Props> = ({ inlongGroupId, inlongStreamId, ...modalProps })
         ]}
       >
         <div>
-          <Card title="headers" bordered={false} style={{ width: 700 }}>
+          <Card title="atrributes" bordered={false} style={{ width: 700 }}>
+            <p style={{ margin: 0 }}>{JSON.stringify(originalModal?.record['attribute'])}</p>
+          </Card>
+          <Card title="headers" bordered={false} style={{ width: 700, marginTop: 10 }}>
             <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>
+            <p style={{ margin: 0 }}>{originalModal?.record['preBody']}</p>
           </Card>
         </div>
       </Modal>