fix: use remoteDestination replace DestinationIP in connection page, #2668 (#2679)

* fix: use remoteDestination replace DestinationIP  in connection page, #2668

* add: missing i18n text

* fix: display the target address details in connection page

src/components/connection/connection-detail.tsx

@@ -51,8 +51,8 @@ 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.destinationPort}`
-    : `${metadata.destinationIP}:${metadata.destinationPort}`;
+    ? `${metadata.host}:${metadata.remoteDestination}`
+    : `${metadata.remoteDestination}:${metadata.destinationPort}`;
 
   const information = [
     { label: t("Host"), value: host },
@@ -79,7 +79,8 @@ const InnerConnectionDetail = ({ data, onClose }: InnerProps) => {
       label: t("Source"),
       value: `${metadata.sourceIP}:${metadata.sourcePort}`,
     },
-    { label: t("Destination IP"), value: metadata.destinationIP },
+    { label: t("Destination"), value: metadata.remoteDestination },
+    { label: t("DestinationPort"), value: `${metadata.destinationPort}` },
     { label: t("Type"), value: `${metadata.type}(${metadata.network})` },
   ];
 

src/components/connection/connection-table.tsx

@@ -71,8 +71,8 @@ export const ConnectionTable = (props: Props) => {
     },
     { field: "source", headerName: t("Source"), flex: 200, minWidth: 130 },
     {
-      field: "destinationIP",
-      headerName: t("Destination IP"),
+      field: "remoteDestination",
+      headerName: t("Destination"),
       flex: 200,
       minWidth: 130,
     },
@@ -88,7 +88,7 @@ export const ConnectionTable = (props: Props) => {
         id: each.id,
         host: metadata.host
           ? `${metadata.host}:${metadata.destinationPort}`
-          : `${metadata.destinationIP}:${metadata.destinationPort}`,
+          : `${metadata.remoteDestination}:${metadata.destinationPort}`,
         download: each.download,
         upload: each.upload,
         dlSpeed: each.curDownload,
@@ -98,7 +98,7 @@ export const ConnectionTable = (props: Props) => {
         process: truncateStr(metadata.process || metadata.processPath),
         time: each.start,
         source: `${metadata.sourceIP}:${metadata.sourcePort}`,
-        destinationIP: metadata.destinationIP,
+        remoteDestination: `${metadata.remoteDestination}:${metadata.destinationPort}`,
         type: `${metadata.type}(${metadata.network})`,
         connectionData: each,
       };

src/locales/ar.json

@@ -178,7 +178,8 @@
   "Process": "عملية",
   "Time": "الوقت",
   "Source": "المصدر",
-  "Destination IP": "عنوان IP الوجهة",
+  "Destination": "عنوان IP الوجهة",
+  "DestinationPort": "ميناء الوجهة",
   "Close Connection": "إغلاق الاتصال",
   "Rules": "القواعد",
   "Rule Provider": "مزود القواعد",

src/locales/en.json

@@ -178,7 +178,8 @@
   "Process": "Process",
   "Time": "Time",
   "Source": "Source",
-  "Destination IP": "Destination IP",
+  "Destination": "Destination IP",
+  "DestinationPort": "Destination Port",
   "Close Connection": "Close Connection",
   "Rules": "Rules",
   "Rule Provider": "Rule Provider",

src/locales/fa.json

@@ -178,7 +178,8 @@
   "Process": "فرآیند",
   "Time": "زمان",
   "Source": "منبع",
-  "Destination IP": "آدرس IP مقصد",
+  "Destination": "آدرس IP مقصد",
+  "DestinationPort": "بندر هدف",
   "Close Connection": "بستن اتصال",
   "Rules": "قوانین",
   "Rule Provider": "تأمین‌کننده قانون",

src/locales/id.json

@@ -210,7 +210,8 @@
   "Process": "Proses",
   "Time": "Waktu",
   "Source": "Sumber",
-  "Destination IP": "IP Tujuan",
+  "Destination": "IP Tujuan",
+  "DestinationPort": "Port Tujuan",
   "Close Connection": "Tutup Koneksi",
   "Rules": "Aturan",
   "Rule Provider": "Penyedia Aturan",

src/locales/ru.json

@@ -178,7 +178,8 @@
   "Process": "Процесс",
   "Time": "Время подключения",
   "Source": "Исходный адрес",
-  "Destination IP": "IP-адрес назначения",
+  "Destination": "IP-адрес назначения",
+  "DestinationPort": "Целевой порт",
   "Close Connection": "Закрыть соединение",
   "Rules": "Правила",
   "Rule Provider": "Провайдер правило",

src/locales/tt.json

@@ -178,7 +178,8 @@
   "Process": "Процесс",
   "Time": "Тоташу вакыты",
   "Source": "Чыганак адресы",
-  "Destination IP": "Максат IP-адресы",
+  "Destination": "Максат IP-адресы",
+  "DestinationPort": "Барасы порты",
   "Close Connection": "Тоташуны ябу",
   "Rules": "Кагыйдәләр",
   "Rule Provider": "Кагыйдә провайдеры",

src/locales/zh.json

@@ -178,7 +178,8 @@
   "Process": "进程",
   "Time": "连接时间",
   "Source": "源地址",
-  "Destination IP": "目标地址",
+  "Destination": "目标地址",
+  "DestinationPort": "目标端口",
   "Close Connection": "关闭连接",
   "Rules": "规则",
   "Rule Provider": "规则集合",

src/services/types.d.ts

@@ -120,6 +120,7 @@ interface IConnectionsItem {
     sourcePort: string;
     destinationPort: string;
     destinationIP?: string;
+    remoteDestination?: string;
     process?: string;
     processPath?: string;
   };