UI support for extraconfig in deploy and update instance

Author: abh1sar

ui/public/locales/en.json

@@ -1051,6 +1051,8 @@
 "label.externalid": "External Id",
 "label.externalloadbalanceripaddress": "External load balancer IP address.",
 "label.extra": "Extra arguments",
+"label.extraconfig": "Additional Configuration",
+"label.extraconfig.tooltip": "Additional configuration parameters (extraconfig) to pass to the instance in plain text",
 "label.f5": "F5",
 "label.f5.ip.loadbalancer": "F5 BIG-IP load balancer.",
 "label.failed": "Failed",

ui/src/views/compute/DeployVM.vue

@@ -762,6 +762,12 @@
                         </div>
                       </a-card>
                     </a-form-item>
+                    <a-form-item v-if="extraConfigEnabledValue" name="extraconfig" ref="extraconfig">
+                      <template #label>
+                        <tooltip-label :title="$t('label.extraconfig')" :tooltip="$t('label.extraconfig.tooltip')"/>
+                      </template>
+                      <a-textarea v-model:value="form.extraconfig"/>
+                    </a-form-item>
                     <a-form-item :label="$t('label.affinity.groups')">
                       <affinity-group-selection
                         :items="options.affinityGroups"
@@ -1043,7 +1049,8 @@ export default {
         keyboards: [],
         bootTypes: [],
         bootModes: [],
-        ioPolicyTypes: []
+        ioPolicyTypes: [],
+        extraConfigEnabled: []
       },
       rowCount: {},
       loading: {
@@ -1091,6 +1098,7 @@ export default {
       sshKeyPairs: [],
       sshKeyPair: {},
       userData: {},
+      extraConfig: {},
       userDataParams: [],
       userDataParamCols: [
         {
@@ -1344,6 +1352,15 @@ export default {
             name: 'enable.dynamic.scale.vm'
           }
         },
+        extraConfigEnabled: {
+          list: 'listConfigurations',
+          isLoad: true,
+          options: {
+            accountid: store.getters.userInfo.accountid,
+            name: 'enable.additional.vm.configuration'
+          },
+          field: 'value'
+        },
         guestOsCategories: {
           list: 'listOsCategories',
           options: {
@@ -1510,6 +1527,9 @@ export default {
     dynamicScalingVmConfigValue () {
       return this.$store.getters.features.dynamicscalingenabled
     },
+    extraConfigEnabledValue () {
+      return this.options.extraConfigEnabled?.[0]?.value === 'true'
+    },
     isCustomizedDiskIOPS () {
       return this.diskSelected?.iscustomizediops || false
     },
@@ -2323,6 +2343,9 @@ export default {
         if (isUserdataAllowed && values.userdata && values.userdata.length > 0) {
           deployVmData.userdata = this.$toBase64AndURIEncoded(values.userdata)
         }
+        if (values.extraconfig && values.extraconfig.length > 0) {
+          deployVmData.extraconfig = encodeURIComponent(values.extraconfig)
+        }
         // step 2: select template/iso
         if (this.imageType === 'templateid') {
           deployVmData.templateid = values.templateid

ui/src/views/compute/EditVM.vue

@@ -91,6 +91,12 @@
         <a-textarea v-model:value="form.userdata">
         </a-textarea>
       </a-form-item>
+      <a-form-item v-if="extraConfigEnabled">
+        <template #label>
+          <tooltip-label :title="$t('label.extraconfig')" :tooltip="$t('label.extraconfig.tooltip')"/>
+        </template>
+        <a-textarea v-model:value="form.extraconfig"/>
+      </a-form-item>
       <a-form-item ref="securitygroupids" name="securitygroupids" :label="$t('label.security.groups')" v-if="securityGroupsEnabled">
         <a-select
           mode="multiple"
@@ -179,6 +185,7 @@ export default {
       serviceOffering: {},
       template: {},
       userDataEnabled: false,
+      extraConfigEnabled: false,
       securityGroupsEnabled: false,
       loading: false,
       securitygroups: {
@@ -224,7 +231,8 @@ export default {
         userdata: '',
         haenable: this.resource.haenable,
         leaseduration: this.resource.leaseduration,
-        leaseexpiryaction: this.resource.leaseexpiryaction
+        leaseexpiryaction: this.resource.leaseexpiryaction,
+        extraconfig: ''
       })
       this.rules = reactive({
         leaseduration: [this.naturalNumberRule]
@@ -239,6 +247,7 @@ export default {
       this.fetchServiceOfferingData()
       this.fetchTemplateData()
       this.fetchUserData()
+      this.fetchExtraConfigEnabled()
     },
     fetchZoneDetails () {
       getAPI('listZones', {
@@ -371,6 +380,17 @@ export default {
         })
       })
     },
+    fetchExtraConfigEnabled () {
+      getAPI('listConfigurations', {
+        accountid: this.$store.getters.userInfo.accountid,
+        name: 'enable.additional.vm.configuration'
+      }).then(json => {
+        const configResponse = json.listconfigurationsresponse.configuration || []
+        this.extraConfigEnabled = configResponse[0]?.value === 'true'
+      }).catch(error => {
+        this.$notifyError(error)
+      })
+    },
     handleSubmit () {
       this.formRef.value.validate().then(() => {
         const values = toRaw(this.form)
@@ -397,6 +417,9 @@ export default {
         if (values.userdata && values.userdata.length > 0) {
           params.userdata = this.$toBase64AndURIEncoded(values.userdata)
         }
+        if (values.extraconfig && values.extraconfig.length > 0) {
+          params.extraconfig = encodeURIComponent(values.extraconfig)
+        }
         if (values.leaseduration !== undefined && (values.leaseduration === -1 || values.leaseduration > 0)) {
           params.leaseduration = values.leaseduration
           if (values.leaseexpiryaction !== undefined) {