From d255df23ee8a845258c3dea7fe98219d2e00f06e Mon Sep 17 00:00:00 2001
From: "Christine." <Ty.christine@outlook.com>
Date: Thu, 27 Feb 2025 14:53:17 +0800
Subject: [PATCH] fix: connection details (#2778)

---
 src/components/connection/connection-detail.tsx | 7 +++++--
 src/components/connection/connection-table.tsx  | 5 ++++-
 2 files changed, 9 insertions(+), 3 deletions(-)

diff --git a/src/components/connection/connection-detail.tsx b/src/components/connection/connection-detail.tsx
index e101841c..3ee9da06 100644
--- a/src/components/connection/connection-detail.tsx
+++ b/src/components/connection/connection-detail.tsx
@@ -51,8 +51,11 @@ const InnerConnectionDetail = ({ data, onClose }: InnerProps) => {
   const chains = [...data.chains].reverse().join(" / ");
   const rule = rulePayload ? `${data.rule}(${rulePayload})` : data.rule;
   const host = metadata.host
-    ? `${metadata.host}:${metadata.remoteDestination}`
+    ? `${metadata.host}:${metadata.destinationPort}`
     : `${metadata.remoteDestination}:${metadata.destinationPort}`;
+  const Destination = metadata.destinationIP
+    ? metadata.destinationIP
+    : metadata.remoteDestination;
 
   const information = [
     { label: t("Host"), value: host },
@@ -79,7 +82,7 @@ const InnerConnectionDetail = ({ data, onClose }: InnerProps) => {
       label: t("Source"),
       value: `${metadata.sourceIP}:${metadata.sourcePort}`,
     },
-    { label: t("Destination"), value: metadata.remoteDestination },
+    { label: t("Destination"), value: Destination },
     { label: t("DestinationPort"), value: `${metadata.destinationPort}` },
     { label: t("Type"), value: `${metadata.type}(${metadata.network})` },
   ];
diff --git a/src/components/connection/connection-table.tsx b/src/components/connection/connection-table.tsx
index ce389ec9..eb2cd35b 100644
--- a/src/components/connection/connection-table.tsx
+++ b/src/components/connection/connection-table.tsx
@@ -138,6 +138,9 @@ export const ConnectionTable = (props: Props) => {
       const { metadata, rulePayload } = each;
       const chains = [...each.chains].reverse().join(" / ");
       const rule = rulePayload ? `${each.rule}(${rulePayload})` : each.rule;
+      const Destination = metadata.destinationIP
+        ? `${metadata.destinationIP}:${metadata.destinationPort}`
+        : `${metadata.remoteDestination}:${metadata.destinationPort}`;
       return {
         id: each.id,
         host: metadata.host
@@ -152,7 +155,7 @@ export const ConnectionTable = (props: Props) => {
         process: truncateStr(metadata.process || metadata.processPath),
         time: each.start,
         source: `${metadata.sourceIP}:${metadata.sourcePort}`,
-        remoteDestination: `${metadata.remoteDestination}:${metadata.destinationPort}`,
+        remoteDestination: Destination,
         type: `${metadata.type}(${metadata.network})`,
         connectionData: each,
       };