Support for parameter cidrlist added to the UI

Author: João Jandre

ui/src/components/view/BulkActionProgress.vue

@@ -80,6 +80,9 @@
         <template #vm="{record}">
           <div><desktop-outlined /> {{ record.virtualmachinename }} ({{ record.vmguestip }})</div>
         </template>
+        <template #cidrlist="{ record }">
+          <span style="white-space: pre-line"> {{ record.cidrlist.replaceAll(" ", "\n") }}</span>
+        </template>
       </a-table>
       <br/>
     </div>

ui/src/components/view/BulkActionView.vue

@@ -82,6 +82,9 @@
           <template #endport="{record}">
             {{ record.icmpcode || record.endport >= 0 ? record.icmpcode || record.endport : $t('label.all') }}
           </template>
+          <template #cidrlist="{record}">
+            <span style="white-space: pre-line"> {{ record.cidrlist.replaceAll(" ", "\n") }}</span>
+          </template>
         </a-table>
         <a-divider />
         <br/>
@@ -149,12 +152,6 @@ export default {
       default: () => {}
     }
   },
-  filters: {
-    capitalise: val => {
-      if (val === 'all') return 'All'
-      return val.toUpperCase()
-    }
-  },
   inject: ['parentFetchData'],
   data () {
     return {
@@ -164,6 +161,10 @@ export default {
     }
   },
   methods: {
+    capitalise (val) {
+      if (val === 'all') return 'All'
+      return val.toUpperCase()
+    },
     handleCancel () {
       this.$emit('handle-cancel')
     },

ui/src/components/widgets/TooltipLabel.vue

@@ -17,7 +17,12 @@
 
 <template>
   <span>
-    {{ title }}
+    <b v-if="bold">
+      {{ title }}
+    </b>
+    <span v-else>
+      {{ title }}
+    </span>
     <a-tooltip v-if="tooltip" :title="tooltip" :placement="tooltipPlacement">
       <info-circle-outlined class="tooltip-icon" />
     </a-tooltip>
@@ -40,7 +45,8 @@ export default {
     tooltipPlacement: {
       type: String,
       default: 'top'
-    }
+    },
+    bold: Boolean
   }
 }
 </script>

ui/src/views/network/LoadBalancing.vue

@@ -36,6 +36,10 @@
         </div>
       </div>
       <div class="form">
+        <div class="form__item" ref="newCidrList">
+          <tooltip-label :title="$t('label.cidrlist')" bold :tooltip="createLoadBalancerRuleParams.cidrlist.description" :tooltip-placement="'right'"/>
+          <a-input v-model:value="newRule.cidrlist"></a-input>
+        </div>
         <div class="form__item">
           <div class="form__label">{{ $t('label.algorithm') }}</div>
           <a-select
@@ -93,6 +97,9 @@
       :pagination="false"
       :rowSelection="{selectedRowKeys: selectedRowKeys, onChange: onSelectChange}"
       :rowKey="record => record.id">
+      <template #cidrlist="{ record }">
+        <span style="white-space: pre-line"> {{ record.cidrlist.replaceAll(" ", "\n") }}</span>
+      </template>
       <template #algorithm="{ record }">
         {{ returnAlgorithmName(record.algorithm) }}
       </template>
@@ -500,14 +507,16 @@ 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'
 
 export default {
   name: 'LoadBalancing',
   mixins: [mixinForm],
   components: {
     Status,
     TooltipButton,
-    BulkActionView
+    BulkActionView,
+    TooltipLabel
   },
   props: {
     resource: {
@@ -554,7 +563,8 @@ export default {
         publicport: '',
         protocol: 'tcp',
         virtualmachineid: [],
-        vmguestip: []
+        vmguestip: [],
+        cidrlist: ''
       },
       addVmModalVisible: false,
       addVmModalLoading: false,
@@ -577,6 +587,10 @@ export default {
           title: this.$t('label.privateport'),
           dataIndex: 'privateport'
         },
+        {
+          title: this.$t('label.cidrlist'),
+          slots: { customRender: 'cidrlist' }
+        },
         {
           title: this.$t('label.algorithm'),
           slots: { customRender: 'algorithm' }
@@ -648,6 +662,9 @@ export default {
       return this.selectedRowKeys.length > 0
     }
   },
+  beforeCreate () {
+    this.createLoadBalancerRuleParams = this.$getApiParams('createLoadBalancerRule')
+  },
   created () {
     this.initForm()
     this.fetchData()
@@ -1321,7 +1338,8 @@ export default {
         name: this.newRule.name,
         privateport: this.newRule.privateport,
         protocol: this.newRule.protocol,
-        publicport: this.newRule.publicport
+        publicport: this.newRule.publicport,
+        cidrlist: this.newRule.cidrlist
       }).then(response => {
         this.addVmModalVisible = false
         this.handleAssignToLBRule(response.createloadbalancerruleresponse.id)