From 46758c45d3174fb68e0515617bbf96886b473c10 Mon Sep 17 00:00:00 2001
From: Fabricio Duarte <fabricio.duarte.jr@gmail.com>
Date: Mon, 21 Oct 2024 11:18:24 -0300
Subject: [PATCH] Address UI

---
 ui/public/locales/en.json               |  1 +
 ui/src/views/network/LoadBalancing.vue  |  4 ++--
 ui/src/views/network/PortForwarding.vue | 27 +++++++++++++++++++++++--
 3 files changed, 28 insertions(+), 4 deletions(-)

diff --git a/ui/public/locales/en.json b/ui/public/locales/en.json
index eb1be420b2ed..0fafd5ca439b 100644
--- a/ui/public/locales/en.json
+++ b/ui/public/locales/en.json
@@ -2090,6 +2090,7 @@
 "label.source": "Select Import-Export Source Hypervisor",
 "label.source.based": "SourceBased",
 "label.sourcecidr": "Source CIDR",
+"label.sourcecidrlist": "Source CIDR list",
 "label.sourcehost": "Source host",
 "label.sourceipaddress": "Source IP address",
 "label.sourceipaddressnetworkid": "Network ID of source IP address",
diff --git a/ui/src/views/network/LoadBalancing.vue b/ui/src/views/network/LoadBalancing.vue
index eeec232cee53..d0da04dfe06a 100644
--- a/ui/src/views/network/LoadBalancing.vue
+++ b/ui/src/views/network/LoadBalancing.vue
@@ -37,7 +37,7 @@
       </div>
       <div class="form">
         <div class="form__item" ref="newCidrList">
-          <tooltip-label :title="$t('label.cidrlist')" bold :tooltip="createLoadBalancerRuleParams.cidrlist.description" :tooltip-placement="'right'"/>
+          <tooltip-label :title="$t('label.sourcecidrlist')" bold :tooltip="createLoadBalancerRuleParams.cidrlist.description" :tooltip-placement="'right'"/>
           <a-input v-model:value="newRule.cidrlist"></a-input>
         </div>
         <div class="form__item">
@@ -808,7 +808,7 @@ export default {
         },
         {
           key: 'cidrlist',
-          title: this.$t('label.cidrlist')
+          title: this.$t('label.sourcecidrlist')
         },
         {
           key: 'protocol',
diff --git a/ui/src/views/network/PortForwarding.vue b/ui/src/views/network/PortForwarding.vue
index 81843a1a0b09..aa2080d16b5d 100644
--- a/ui/src/views/network/PortForwarding.vue
+++ b/ui/src/views/network/PortForwarding.vue
@@ -72,6 +72,12 @@
             <a-select-option value="udp" :label="$t('label.udp')">{{ $t('label.udp') }}</a-select-option>
           </a-select>
         </div>
+        <div v-if="isVPC()">
+          <div class="form__item" ref="newCidrList">
+            <tooltip-label :title="$t('label.sourcecidrlist')" bold :tooltip="apiParams.cidrlist.description" :tooltip-placement="'right'"/>
+            <a-input v-model:value="newRule.cidrlist"></a-input>
+          </div>
+        </div>
         <div class="form__item" style="margin-left: auto;">
           <div class="form__label">{{ $t('label.add.vm') }}</div>
           <a-button :disabled="!('createPortForwardingRule' in $store.getters.apis)" type="primary" @click="openAddVMModal">{{ $t('label.add') }}</a-button>
@@ -108,6 +114,9 @@
         <template v-if="column.key === 'protocol'">
           {{ getCapitalise(record.protocol) }}
         </template>
+        <template v-if="column.key === 'cidrlist'">
+          <span style="white-space: pre-line"> {{ record.cidrlist?.replaceAll(" ", "\n") }}</span>
+        </template>
         <template v-if="column.key === 'vm'">
           <div><desktop-outlined/>
             <router-link
@@ -334,9 +343,11 @@ import Status from '@/components/widgets/Status'
 import TooltipButton from '@/components/widgets/TooltipButton'
 import BulkActionView from '@/components/view/BulkActionView'
 import eventBus from '@/config/eventBus'
+import TooltipLabel from '@/components/widgets/TooltipLabel.vue'
 
 export default {
   components: {
+    TooltipLabel,
     Status,
     TooltipButton,
     BulkActionView
@@ -399,6 +410,11 @@ export default {
           key: 'protocol',
           title: this.$t('label.protocol')
         },
+        {
+          key: 'cidrlist',
+          title: this.$t('label.sourcecidrlist'),
+          hidden: !this.isVPC()
+        },
         {
           title: this.$t('label.state'),
           dataIndex: 'state'
@@ -411,7 +427,7 @@ export default {
           key: 'actions',
           title: this.$t('label.actions')
         }
-      ],
+      ].filter(item => !item.hidden),
       tiers: {
         loading: false,
         data: []
@@ -450,7 +466,8 @@ export default {
       vmPage: 1,
       vmPageSize: 10,
       vmCount: 0,
-      searchQuery: null
+      searchQuery: null,
+      cidrlist: ''
     }
   },
   computed: {
@@ -458,6 +475,9 @@ export default {
       return this.selectedRowKeys.length > 0
     }
   },
+  beforeCreate () {
+    this.apiParams = this.$getApiParams('createPortForwardingRule')
+  },
   created () {
     console.log(this.resource)
     this.initForm()
@@ -830,6 +850,9 @@ export default {
     onSearch (value) {
       this.searchQuery = value
       this.fetchVirtualMachines()
+    },
+    isVPC () {
+      return 'vpcid' in this.resource
     }
   }
 }