From bb133015a302beee31d75d7c856c0c038bedc21b Mon Sep 17 00:00:00 2001
From: "Jingwei.Zhang" <zhang.jingwei@99cloud.net>
Date: Mon, 25 Jul 2022 10:08:54 +0800
Subject: [PATCH] feat: add protocal in the port forwarding display in the
 floating ip list

1. Add protocal when show the port forwarding info in the floating ip list
2. Add protocal to the port forwarding info when download the floating ip list

Change-Id: I7f9cea6cbfc276205c75e2ab8708124c49106ffc
---
 src/pages/network/containers/FloatingIp/index.jsx | 14 +++++++++-----
 1 file changed, 9 insertions(+), 5 deletions(-)

diff --git a/src/pages/network/containers/FloatingIp/index.jsx b/src/pages/network/containers/FloatingIp/index.jsx
index 23cab9ee..4dcbb059 100644
--- a/src/pages/network/containers/FloatingIp/index.jsx
+++ b/src/pages/network/containers/FloatingIp/index.jsx
@@ -149,6 +149,13 @@ export class FloatingIps extends Base {
     );
   }
 
+  getPortForwardingDetail(record, detail) {
+    const { floating_ip_address: fip } = record;
+    const { protocol, external_port, internal_ip_address, internal_port } =
+      detail;
+    return `${protocol}: ${fip}:${external_port} => ${internal_ip_address}:${internal_port}`;
+  }
+
   getPortForwardingRender(record) {
     const data = this.getRecordPortForwarding(record);
     if (!data.length) {
@@ -160,7 +167,7 @@ export class FloatingIps extends Base {
           <Row className={styles['popover-row']} gutter={[8, 8]}>
             {data.map((i, idx) => (
               <Col span={24} key={`pfw-${idx}`}>
-                {`${record.floating_ip_address}:${i.external_port} => ${i.internal_ip_address}:${i.internal_port}`}
+                {this.getPortForwardingDetail(record, i)}
               </Col>
             ))}
           </Row>
@@ -182,10 +189,7 @@ export class FloatingIps extends Base {
     if (!data.length) {
       return '';
     }
-    const ret = data.map(
-      (i) =>
-        `${record.floating_ip_address}:${i.external_port} => ${i.internal_ip_address}:${i.internal_port}`
-    );
+    const ret = data.map((i) => this.getPortForwardingDetail(record, i));
     const total = t('{number} port forwarding rules', {
       number: data.length,
     });