From a961555fa9e79177ba19abb9ea30abf6a54ef009 Mon Sep 17 00:00:00 2001
From: Abhishek Kumar <abhishek.mrt22@gmail.com>
Date: Fri, 14 Feb 2020 16:59:14 +0530
Subject: [PATCH] fix for check select pair and network offering form

Signed-off-by: Abhishek Kumar <abhishek.mrt22@gmail.com>
Signed-off-by: Rohit Yadav <rohit.yadav@shapeblue.com>
---
 ui/src/components/CheckBoxSelectPair.vue     |  28 +++--
 ui/src/views/offering/AddNetworkOffering.vue | 113 +++++++++----------
 ui/src/views/offering/AddVpcOffering.vue     |  30 +++--
 3 files changed, 95 insertions(+), 76 deletions(-)

diff --git a/ui/src/components/CheckBoxSelectPair.vue b/ui/src/components/CheckBoxSelectPair.vue
index 11c41345016..0df013705eb 100644
--- a/ui/src/components/CheckBoxSelectPair.vue
+++ b/ui/src/components/CheckBoxSelectPair.vue
@@ -16,20 +16,21 @@
 // under the License.
 
 <template>
-  <div v-decorator="['service.' + resourceTitle, {}]">
-    <a-checkbox class="pair-checkbox" @change="handleCheckChange">
+  <div>
+    <a-checkbox v-decorator="[checkDecorator, {}]" class="pair-checkbox" @change="handleCheckChange">
       {{ resourceTitle }}
     </a-checkbox>
-    <a-form-item class="pair-select-container" :label="$t('label.provider')" v-if="this.checked">
+    <a-form-item class="pair-select-container" :label="$t('serviceprovider')" v-if="this.checked">
       <a-select
-        v-decorator="[resourceTitle + '.provider', {
+        v-decorator="[selectDecorator, {
           initialValue: resourceOptions[0].name
         }]"
         showSearch
         optionFilterProp="children"
         :filterOption="(input, option) => {
           return option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
-        }">
+        }"
+        @change="val => { this.handleSelectChange(val) }">
         <a-select-option v-for="(opt) in resourceOptions" :key="opt.name" :disabled="!opt.enabled">
           {{ opt.name || opt.description }}
         </a-select-option>
@@ -54,6 +55,14 @@ export default {
     resourceOptions: {
       type: Array,
       required: true
+    },
+    checkDecorator: {
+      type: String,
+      default: ''
+    },
+    selectDecorator: {
+      type: String,
+      default: ''
     }
   },
   data () {
@@ -71,7 +80,10 @@ export default {
       if (this.checked && this.arrayHasItems(this.resourceOptions)) {
         this.selectedOption = this.resourceOptions[0].name
       }
-      this.$emit('handle-check-change', this.resourceKey, this.checked)
+      this.$emit('handle-checkpair-change', this.resourceKey, this.checked, '')
+    },
+    handleSelectChange (val) {
+      this.$emit('handle-checkpair-change', this.resourceKey, this.checked, val)
     }
   }
 }
@@ -79,13 +91,13 @@ export default {
 
 <style scoped lang="scss">
   .pair-checkbox {
-    width: 20vw;
+    width: 18vw;
   }
   .pair-select-container {
     position: relative;
     float: right;
     margin-left: 5vw;
     margin-bottom: 0;
-    width: 25vw
+    width: 20vw;
   }
 </style>
diff --git a/ui/src/views/offering/AddNetworkOffering.vue b/ui/src/views/offering/AddNetworkOffering.vue
index 148cb794f79..768a5dc98a2 100644
--- a/ui/src/views/offering/AddNetworkOffering.vue
+++ b/ui/src/views/offering/AddNetworkOffering.vue
@@ -27,30 +27,28 @@
             v-decorator="['name', {
               rules: [{ required: true, message: 'Please enter name' }]
             }]"
-            :placeholder="this.$t('Name')"/>
+            :placeholder="this.$t('name')"/>
         </a-form-item>
-        <a-form-item :label="$t('description')">
+        <a-form-item :label="$t('displaytext')">
           <a-input
-            v-decorator="['description', {
+            v-decorator="['displaytext', {
               rules: [{ required: true, message: 'Please enter description' }]
             }]"
-            :placeholder="this.$t('Description')"/>
+            :placeholder="this.$t('displaytext')"/>
         </a-form-item>
-        <a-form-item :label="$t('label.networkrate.mbps')">
+        <a-form-item :label="$t('networkrate')">
           <a-input
-            v-decorator="['disksize', {
-              rules: [{ required: true, message: 'Please enter disk size' },
-                      {
-                        validator: (rule, value, callback) => {
-                          if (value && (isNaN(value) || value <= 0)) {
-                            callback('Please enter a valid number')
-                          }
-                          callback()
-                        }
-                      }
-              ]
+            v-decorator="['networkrate', {
+              rules: [{
+                validator: (rule, value, callback) => {
+                  if (value && (isNaN(value) || value <= 0)) {
+                    callback('Please enter a valid number')
+                  }
+                  callback()
+                }
+              }]
             }]"
-            :placeholder="this.$t('label.networkrate.mbps')"/>
+            :placeholder="this.$t('networkrate')"/>
         </a-form-item>
         <a-form-item :label="$t('label.guesttype')">
           <a-radio-group
@@ -60,31 +58,31 @@
             buttonStyle="solid"
             @change="selected => { this.handleGuestTypeChange(selected.target.value) }">
             <a-radio-button value="isolated">
-              {{ $t('label.isolated') }}
+              {{ $t('isolated') }}
             </a-radio-button>
             <a-radio-button value="l2">
-              {{ $t('label.l2') }}
+              {{ $t('l2') }}
             </a-radio-button>
             <a-radio-button value="shared">
-              {{ $t('label.shared') }}
+              {{ $t('shared') }}
             </a-radio-button>
           </a-radio-group>
         </a-form-item>
-        <a-form-item :label="$t('label.persisitent')">
+        <a-form-item :label="$t('ispersisitent')">
           <a-switch v-decorator="['ispersisitent', {initialValue: false}]" />
         </a-form-item>
-        <a-form-item :label="$t('label.specifyvlan')">
+        <a-form-item :label="$t('specifyvlan')">
           <a-switch v-decorator="['specifyvlan', {initialValue: false}]" />
         </a-form-item>
-        <a-form-item :label="$t('label.vpc')" v-if="this.guestType === 'isolated'">
+        <a-form-item :label="$t('forvpc')" v-if="this.guestType === 'isolated'">
           <a-switch v-decorator="['forvpc', {initialValue: this.forVpc}]" :defaultChecked="this.forVpc" @change="this.handleForVpcChange(val)" />
         </a-form-item>
         <a-form-item :label="$t('userdatal2')" v-if="this.guestType === 'l2'">
           <a-switch v-decorator="['userdatal2', {initialValue: false}]" />
         </a-form-item>
-        <a-form-item :label="$t('load.balancer.type')" v-if="this.forVpc && this.lbServiceChecked">
+        <a-form-item :label="$t('lbtype')" v-if="this.forVpc && this.lbServiceChecked">
           <a-radio-group
-            v-decorator="['lbType', {
+            v-decorator="['lbtype', {
               initialValue: 'publicLb'
             }]"
             buttonStyle="solid">
@@ -96,7 +94,7 @@
             </a-radio-button>
           </a-radio-group>
         </a-form-item>
-        <a-form-item :label="$t('label.promiscuousmode')">
+        <a-form-item :label="$t('promiscuousmode')">
           <a-radio-group
             v-decorator="['promiscuousmode', {
               initialValue: this.promiscuousMode
@@ -104,17 +102,17 @@
             buttonStyle="solid"
             @change="selected => { this.handlePromiscuousModeChange(selected.target.value) }">
             <a-radio-button value="">
-              {{ $t('label.none') }}
+              {{ $t('none') }}
             </a-radio-button>
             <a-radio-button value="accept">
-              {{ $t('label.accept') }}
+              {{ $t('accept') }}
             </a-radio-button>
             <a-radio-button value="reject">
-              {{ $t('label.reject') }}
+              {{ $t('reject') }}
             </a-radio-button>
           </a-radio-group>
         </a-form-item>
-        <a-form-item :label="$t('label.macaddresschanges')">
+        <a-form-item :label="$t('macaddresschanges')">
           <a-radio-group
             v-decorator="['macaddresschanges', {
               initialValue: this.macAddressChanges
@@ -122,17 +120,17 @@
             buttonStyle="solid"
             @change="selected => { this.handleMacAddressChangesChange(selected.target.value) }">
             <a-radio-button value="">
-              {{ $t('label.none') }}
+              {{ $t('none') }}
             </a-radio-button>
             <a-radio-button value="accept">
-              {{ $t('label.accept') }}
+              {{ $t('accept') }}
             </a-radio-button>
             <a-radio-button value="reject">
-              {{ $t('label.reject') }}
+              {{ $t('reject') }}
             </a-radio-button>
           </a-radio-group>
         </a-form-item>
-        <a-form-item :label="$t('label.forgedtransmits')">
+        <a-form-item :label="$t('forgedtransmits')">
           <a-radio-group
             v-decorator="['forgedtransmits', {
               initialValue: this.forgedTransmits
@@ -140,17 +138,17 @@
             buttonStyle="solid"
             @change="selected => { this.handleForgedTransmitsChange(selected.target.value) }">
             <a-radio-button value="">
-              {{ $t('label.none') }}
+              {{ $t('none') }}
             </a-radio-button>
             <a-radio-button value="accept">
-              {{ $t('label.accept') }}
+              {{ $t('accept') }}
             </a-radio-button>
             <a-radio-button value="reject">
-              {{ $t('label.reject') }}
+              {{ $t('reject') }}
             </a-radio-button>
           </a-radio-group>
         </a-form-item>
-        <a-form-item :label="$t('label.supported.services')" v-if="this.guestType !== 'l2'">
+        <a-form-item :label="$t('supportedservices')" v-if="this.guestType !== 'l2'">
           <div class="supported-services-container" scroll-to="last-child">
             <a-list itemLayout="horizontal" :dataSource="this.supportedServices">
               <a-list-item slot="renderItem" slot-scope="item">
@@ -159,7 +157,9 @@
                   :resourceKey="item.name"
                   :resourceTitle="item.description"
                   :resourceOptions="item.provider"
-                  @handle-check-change="handleSupportedServiceChange"/>
+                  :checkDecorator="'service.' + item.name"
+                  :selectDecorator="item.name + '.provider'"
+                  @handle-checkpair-change="handleSupportedServiceChange"/>
               </a-list-item>
             </a-list>
           </div>
@@ -197,10 +197,10 @@
             }]"
             buttonStyle="solid">
             <a-radio-button value="peraccount">
-              {{ $t('label.peraccount') }}
+              {{ $t('peraccount') }}
             </a-radio-button>
             <a-radio-button value="perzone">
-              {{ $t('label.perzone') }}
+              {{ $t('perzone') }}
             </a-radio-button>
           </a-radio-group>
         </a-form-item>
@@ -223,14 +223,7 @@
         </a-form-item>
         <a-form-item :label="$t('service.Lb.netscaler.service.packages')" v-if="this.lbServiceChecked && this.lbServiceProvider === 'Netscaler'">
           <a-select
-            v-decorator="['netscalerservicepackages', {
-              rules: [
-                {
-                  required: true,
-                  message: 'Please select option'
-                }
-              ]
-            }]"
+            v-decorator="['netscalerservicepackages', {}]"
             showSearch
             optionFilterProp="children"
             :filterOption="(input, option) => {
@@ -248,7 +241,7 @@
             v-decorator="['netscalerservicepackagesdescription', {}]"
             :placeholder="this.$t('netscaler.service.packages.description')"/>
         </a-form-item>
-        <a-form-item :label="$t('service.Lb.lbIsolation')" v-if="this.lbServiceChecked">
+        <a-form-item :label="$t('service.Lb.lbIsolation')" v-if="false">
           <a-radio-group
             v-decorator="['isolation', {
               initialValue: 'dedicated'
@@ -271,16 +264,16 @@
         <a-form-item :label="$t('service.Connectivity.supportsstrechedl2subnet')" v-if="this.connectivityServiceChecked">
           <a-switch v-decorator="['supportsstrechedl2subnet', {initialValue: false}]" />
         </a-form-item>
-        <a-form-item :label="$t('service.Connectivity.supportspublicaccess')" v-if="this.connectivityServiceChecked">
+        <a-form-item :label="$t('service.Connectivity.supportspublicaccess')" v-if="false">
           <a-switch v-decorator="['supportspublicaccess', {initialValue: false}]" />
         </a-form-item>
-        <a-form-item :label="$t('label.conservemode')" v-if="(this.guestType === 'shared' || this.guestType === 'isolated') && !this.isVpcVirtualRouterForAtLeastOneService">
-          <a-switch v-decorator="['isconservemode', {initialValue: true}]" :defaultChecked="true" />
+        <a-form-item :label="$t('conservemode')" v-if="(this.guestType === 'shared' || this.guestType === 'isolated') && !this.isVpcVirtualRouterForAtLeastOneService">
+          <a-switch v-decorator="['conservemode', {initialValue: true}]" :defaultChecked="true" />
         </a-form-item>
-        <a-form-item :label="$t('label.tags')">
+        <a-form-item :label="$t('tags')">
           <a-input
             v-decorator="['tags', {}]"
-            :placeholder="this.$t('label.networktags')"/>
+            :placeholder="this.$t('networktags')"/>
         </a-form-item>
         <a-form-item :label="$t('availability')" v-if="this.requiredNetworkOfferingExists && this.guestType === 'isolated' && this.sourceNatServiceChecked">
           <a-radio-group
@@ -330,7 +323,7 @@
               return option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
             }"
             :loading="domainLoading"
-            :placeholder="this.$t('label.domain')">
+            :placeholder="this.$t('domain')">
             <a-select-option v-for="(opt, optIndex) in this.domains" :key="optIndex">
               {{ opt.name || opt.description }}
             </a-select-option>
@@ -358,7 +351,7 @@
               return option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
             }"
             :loading="zoneLoading"
-            :placeholder="this.$t('label.zone')">
+            :placeholder="this.$t('zone')">
             <a-select-option v-for="(opt, optIndex) in this.zones" :key="optIndex">
               {{ opt.name || opt.description }}
             </a-select-option>
@@ -528,7 +521,7 @@ export default {
           for (var j in this.supportedServices[i].provider) {
             var provider = this.supportedServices[i].provider[j]
             provider.description = provider.name
-            provider.enabled = provider.canenableindividualservice
+            provider.enabled = true
             if (provider.name === 'VpcVirtualRouter') {
               provider.enabled = false
             }
@@ -849,10 +842,10 @@ export default {
 
 <style scoped lang="scss">
   .form-layout {
-    width: 60vw;
+    width: 50vw;
 
     @media (min-width: 450px) {
-      width: 40vw;
+      width: 50vw;
     }
   }
   .supported-services-container {
diff --git a/ui/src/views/offering/AddVpcOffering.vue b/ui/src/views/offering/AddVpcOffering.vue
index 6a5f6e2e123..a9259909177 100644
--- a/ui/src/views/offering/AddVpcOffering.vue
+++ b/ui/src/views/offering/AddVpcOffering.vue
@@ -44,7 +44,9 @@
                   :resourceKey="item.name"
                   :resourceTitle="item.description"
                   :resourceOptions="item.provider"
-                  @handle-check-change="handleSupportedServiceChange"/>
+                  :checkDecorator="'service.' + item.name"
+                  :selectDecorator="item.name + '.provider'"
+                  @handle-checkpair-change="handleSupportedServiceChange"/>
               </a-list-item>
             </a-list>
           </div>
@@ -78,7 +80,7 @@
               return option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
             }"
             :loading="domainLoading"
-            :placeholder="this.$t('label.domain')">
+            :placeholder="this.$t('domain')">
             <a-select-option v-for="(opt, optIndex) in this.domains" :key="optIndex">
               {{ opt.name || opt.description }}
             </a-select-option>
@@ -106,7 +108,7 @@
               return option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
             }"
             :loading="zoneLoading"
-            :placeholder="this.$t('label.zone')">
+            :placeholder="this.$t('zone')">
             <a-select-option v-for="(opt, optIndex) in this.zones" :key="optIndex">
               {{ opt.name || opt.description }}
             </a-select-option>
@@ -170,6 +172,9 @@ export default {
     isAdmin () {
       return ['Admin'].includes(this.$store.getters.userInfo.roletype)
     },
+    isSupportedServiceObject (obj) {
+      return (obj !== null && obj !== undefined && Object.keys(obj).length > 0 && obj.constructor === Object && 'provider' in obj)
+    },
     fetchDomainData () {
       const params = {}
       params.listAll = true
@@ -269,7 +274,7 @@ export default {
       })
       for (var i in this.supportedServices) {
         var serviceName = this.supportedServices[i].name
-        var serviceDisplayName = 'label.' + serviceName
+        var serviceDisplayName = serviceName
         // Sanitize names
         // switch (serviceName) {
         //   case 'Vpn':
@@ -303,7 +308,7 @@ export default {
         this.supportedServices[i].description = serviceDisplayName
       }
     },
-    handleSupportedServiceChange (service, checked) {
+    handleSupportedServiceChange (service, checked, provider) {
       if (service === 'Connectivity') {
         this.connectivityServiceChecked = checked
       }
@@ -346,7 +351,16 @@ export default {
         if (zoneId) {
           params.zoneid = zoneId
         }
-        var selectedServices = values.label
+        var selectedServices = null
+        var keys = Object.keys(values)
+        keys.forEach(function (key, keyIndex) {
+          if (this.isSupportedServiceObject(values[key])) {
+            if (selectedServices == null) {
+              selectedServices = {}
+            }
+            selectedServices[key] = values[key]
+          }
+        })
         if (selectedServices != null) {
           var supportedServices = Object.keys(selectedServices)
           params.supportedservices = supportedServices.join(',')
@@ -401,10 +415,10 @@ export default {
 
 <style scoped lang="scss">
   .form-layout {
-    width: 60vw;
+    width: 50vw;
 
     @media (min-width: 450px) {
-      width: 60vw;
+      width: 50vw;
     }
   }
   .supported-services-container {