ui: refactor get api params in forms (#5064)

* ui: refactor get api params in forms

Refactor code getting api params for APIs in UI forms.
Added a new util plugin in plugins.js

Signed-off-by: Abhishek Kumar <abhishek.mrt22@gmail.com>

* fix

Signed-off-by: Abhishek Kumar <abhishek.mrt22@gmail.com>

* fix

Signed-off-by: Abhishek Kumar <abhishek.mrt22@gmail.com>

ui/src/main.js

@@ -26,7 +26,7 @@ import './core/lazy_use'
 import './core/ext'
 import './permission' // permission control
 import './utils/filter' // global filter
-import { pollJobPlugin, notifierPlugin, toLocaleDatePlugin, configUtilPlugin } from './utils/plugins'
+import { pollJobPlugin, notifierPlugin, toLocaleDatePlugin, configUtilPlugin, apiMetaUtilPlugin } from './utils/plugins'
 import { VueAxios } from './utils/request'
 
 Vue.config.productionTip = false
@@ -51,3 +51,4 @@ fetch('config.json').then(response => response.json()).then(config => {
 })
 
 Vue.use(configUtilPlugin)
+Vue.use(apiMetaUtilPlugin)

ui/src/utils/plugins.js

@@ -185,3 +185,20 @@ export const configUtilPlugin = {
     }
   }
 }
+
+export const apiMetaUtilPlugin = {
+  install (Vue) {
+    Vue.prototype.$getApiParams = function () {
+      var apiParams = {}
+      for (var argument of arguments) {
+        var apiConfig = this.$store.getters.apis[argument] || {}
+        if (apiConfig && apiConfig.params) {
+          apiConfig.params.forEach(param => {
+            apiParams[param.name] = param
+          })
+        }
+      }
+      return apiParams
+    }
+  }
+}

ui/src/views/compute/CreateKubernetesCluster.vue

@@ -342,11 +342,7 @@ export default {
   },
   beforeCreate () {
     this.form = this.$form.createForm(this)
-    this.apiConfig = this.$store.getters.apis.createKubernetesCluster || {}
+    this.apiParams = this.$getApiParams('createKubernetesCluster')
-    this.apiParams = {}
-    this.apiConfig.params.forEach(param => {
-      this.apiParams[param.name] = param
-    })
   },
   created () {
     this.networks = [

ui/src/views/compute/CreateSSHKeyPair.vue

@@ -94,17 +94,7 @@ export default {
   },
   beforeCreate () {
     this.form = this.$form.createForm(this)
-    this.apiConfig = this.$store.getters.apis.createSSHKeyPair || {}
+    this.apiParams = this.$getApiParams('createSSHKeyPair', 'registerSSHKeyPair')
-    this.apiParams = {}
-    this.apiConfig.params.forEach(param => {
-      this.apiParams[param.name] = param
-    })
-    this.apiConfig = this.$store.getters.apis.registerSSHKeyPair || {}
-    this.apiConfig.params.forEach(param => {
-      if (!(param.name in this.apiParams)) {
-        this.apiParams[param.name] = param
-      }
-    })
   },
   created () {
     this.domains = [

ui/src/views/compute/CreateSnapshotWizard.vue

@@ -103,11 +103,7 @@ export default {
   },
   beforeCreate () {
     this.form = this.$form.createForm(this)
-    this.apiConfig = this.$store.getters.apis.createSnapshot || {}
+    this.apiParams = this.$getApiParams('createSnapshot')
-    this.apiParams = {}
-    this.apiConfig.params.forEach(param => {
-      this.apiParams[param.name] = param
-    })
   },
   created () {
     this.fetchData()

ui/src/views/compute/DestroyVM.vue

@@ -82,11 +82,7 @@ export default {
   },
   beforeCreate () {
     this.form = this.$form.createForm(this)
-    this.apiParams = {}
+    this.apiParams = this.$getApiParams('destroyVirtualMachine')
-    var apiConfig = this.$store.getters.apis.destroyVirtualMachine || {}
-    apiConfig.params.forEach(param => {
-      this.apiParams[param.name] = param
-    })
   },
   created () {
     this.fetchData()

ui/src/views/compute/EditVM.vue

@@ -138,11 +138,7 @@ export default {
   },
   beforeCreate () {
     this.form = this.$form.createForm(this)
-    this.apiParams = {}
+    this.apiParams = this.$getApiParams('updateVirtualMachine')
-    const apiConfig = this.$store.getters.apis.updateVirtualMachine || {}
-    apiConfig.params.forEach(param => {
-      this.apiParams[param.name] = param
-    })
   },
   created () {
     this.fetchData()

ui/src/views/compute/ScaleKubernetesCluster.vue

@@ -102,11 +102,7 @@ export default {
   },
   beforeCreate () {
     this.form = this.$form.createForm(this)
-    this.apiConfig = this.$store.getters.apis.scaleKubernetesCluster || {}
+    this.apiParams = this.$getApiParams('scaleKubernetesCluster')
-    this.apiParams = {}
-    this.apiConfig.params.forEach(param => {
-      this.apiParams[param.name] = param
-    })
   },
   created () {
     this.originalSize = !this.isObjectEmpty(this.resource) ? this.resource.size : 1

ui/src/views/compute/StartVirtualMachine.vue

@@ -143,11 +143,7 @@ export default {
   inject: ['parentFetchData'],
   beforeCreate () {
     this.form = this.$form.createForm(this)
-    this.apiConfig = this.$store.getters.apis.startVirtualMachine || {}
+    this.apiParams = this.$getApiParams('startVirtualMachine')
-    this.apiParams = {}
-    this.apiConfig.params.forEach(param => {
-      this.apiParams[param.name] = param
-    })
   },
   created () {
     if (this.$store.getters.userInfo.roletype === 'Admin') {

ui/src/views/compute/UpgradeKubernetesCluster.vue

@@ -83,11 +83,7 @@ export default {
   },
   beforeCreate () {
     this.form = this.$form.createForm(this)
-    this.apiConfig = this.$store.getters.apis.upgradeKubernetesCluster || {}
+    this.apiParams = this.$getApiParams('upgradeKubernetesCluster')
-    this.apiParams = {}
-    this.apiConfig.params.forEach(param => {
-      this.apiParams[param.name] = param
-    })
   },
   created () {
     this.fetchData()

ui/src/views/iam/AddAccount.vue

@@ -243,19 +243,7 @@ export default {
   },
   beforeCreate () {
     this.form = this.$form.createForm(this)
-    this.apiConfig = this.$store.getters.apis.createAccount || {}
+    this.apiParams = this.$getApiParams('createAccount', 'authorizeSamlSso')
-    this.apiParams = {}
-    if (this.apiConfig.params) {
-      this.apiConfig.params.forEach(param => {
-        this.apiParams[param.name] = param
-      })
-    }
-    this.apiConfig = this.$store.getters.apis.authorizeSamlSso || {}
-    if (this.apiConfig.params) {
-      this.apiConfig.params.forEach(param => {
-        this.apiParams[param.name] = param
-      })
-    }
   },
   created () {
     this.fetchData()

ui/src/views/iam/AddUser.vue

@@ -222,15 +222,7 @@ export default {
   },
   created () {
     this.form = this.$form.createForm(this)
-    this.apiConfig = this.$store.getters.apis.createUser || {}
+    this.apiParams = this.$getApiParams('createUser', 'authorizeSamlSso')
-    this.apiParams = {}
-    this.apiConfig.params.forEach(param => {
-      this.apiParams[param.name] = param
-    })
-    this.apiConfig = this.$store.getters.apis.authorizeSamlSso || { params: [] }
-    this.apiConfig.params.forEach(param => {
-      this.apiParams[param.name] = param
-    })
     this.fetchData()
   },
   methods: {

ui/src/views/iam/ChangeUserPassword.vue

@@ -98,11 +98,7 @@ export default {
   },
   beforeCreate () {
     this.form = this.$form.createForm(this)
-    this.apiParams = {}
+    this.apiParams = this.$getApiParams('updateUser')
-    this.apiConfig = this.$store.getters.apis.updateUser || {}
-    this.apiConfig.params.forEach(param => {
-      this.apiParams[param.name] = param
-    })
   },
   methods: {
     isAdminOrDomainAdmin () {

ui/src/views/iam/CreateRole.vue

@@ -25,7 +25,7 @@
         <a-form-item>
           <span slot="label">
             {{ $t('label.name') }}
-            <a-tooltip :title="createRoleApiParams.name.description">
+            <a-tooltip :title="apiParams.name.description">
               <a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
             </a-tooltip>
           </span>
@@ -33,23 +33,23 @@
             v-decorator="['name', {
               rules: [{ required: true, message: $t('message.error.required.input') }]
             }]"
-            :placeholder="createRoleApiParams.name.description"
+            :placeholder="apiParams.name.description"
             autoFocus />
         </a-form-item>
 
         <a-form-item>
           <span slot="label">
             {{ $t('label.description') }}
-            <a-tooltip :title="createRoleApiParams.description.description">
+            <a-tooltip :title="apiParams.description.description">
               <a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
             </a-tooltip>
           </span>
           <a-input
             v-decorator="['description']"
-            :placeholder="createRoleApiParams.description.description" />
+            :placeholder="apiParams.description.description" />
         </a-form-item>
 
-        <a-form-item v-if="'roleid' in createRoleApiParams">
+        <a-form-item v-if="'roleid' in apiParams">
           <span slot="label">
             {{ $t('label.based.on') }}
             <a-tooltip :title="$t('label.based.on.role.id.or.type')">
@@ -74,7 +74,7 @@
         <a-form-item v-if="this.createRoleUsing === 'type'">
           <span slot="label">
             {{ $t('label.type') }}
-            <a-tooltip :title="createRoleApiParams.type.description">
+            <a-tooltip :title="apiParams.type.description">
               <a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
             </a-tooltip>
           </span>
@@ -82,7 +82,7 @@
             v-decorator="['type', {
               rules: [{ required: true, message: $t('message.error.select') }]
             }]"
-            :placeholder="createRoleApiParams.type.description">
+            :placeholder="apiParams.type.description">
             <a-select-option v-for="role in defaultRoles" :key="role">
               {{ role }}
             </a-select-option>
@@ -92,7 +92,7 @@
         <a-form-item v-if="this.createRoleUsing === 'role'">
           <span slot="label">
             {{ $t('label.role') }}
-            <a-tooltip :title="createRoleApiParams.roleid.description">
+            <a-tooltip :title="apiParams.roleid.description">
               <a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
             </a-tooltip>
           </span>
@@ -100,7 +100,7 @@
             v-decorator="['roleid', {
               rules: [{ required: true, message: $t('message.error.select') }]
             }]"
-            :placeholder="createRoleApiParams.roleid.description">
+            :placeholder="apiParams.roleid.description">
             <a-select-option
               v-for="role in roles"
               :value="role.id"
@@ -137,11 +137,7 @@ export default {
   },
   beforeCreate () {
     this.form = this.$form.createForm(this)
-    this.apiConfig = this.$store.getters.apis.createRole || {}
+    this.apiParams = this.$getApiParams('createRole')
-    this.createRoleApiParams = {}
-    this.apiConfig.params.forEach(param => {
-      this.createRoleApiParams[param.name] = param
-    })
   },
   watch: {
     '$route' (to, from) {

ui/src/views/iam/EditUser.vue

@@ -131,11 +131,7 @@ export default {
   },
   beforeCreate () {
     this.form = this.$form.createForm(this)
-    this.apiConfig = this.$store.getters.apis.updateUser || {}
+    this.apiParams = this.$getApiParams('updateUser')
-    this.apiParams = {}
-    this.apiConfig.params.forEach(param => {
-      this.apiParams[param.name] = param
-    })
   },
   created () {
     this.fetchData()

ui/src/views/iam/ImportRole.vue

@@ -54,7 +54,7 @@
         <a-form-item>
           <span slot="label">
             {{ $t('label.name') }}
-            <a-tooltip :title="importRoleApiParams.name.description">
+            <a-tooltip :title="apiParams.name.description">
               <a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
             </a-tooltip>
           </span>
@@ -62,26 +62,26 @@
             v-decorator="['name', {
               rules: [{ required: true, message: $t('message.error.required.input') }]
             }]"
-            :placeholder="importRoleApiParams.name.description"
+            :placeholder="apiParams.name.description"
             autoFocus />
         </a-form-item>
 
         <a-form-item>
           <span slot="label">
             {{ $t('label.description') }}
-            <a-tooltip :title="importRoleApiParams.description.description">
+            <a-tooltip :title="apiParams.description.description">
               <a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
             </a-tooltip>
           </span>
           <a-input
             v-decorator="['description']"
-            :placeholder="importRoleApiParams.description.description" />
+            :placeholder="apiParams.description.description" />
         </a-form-item>
 
         <a-form-item>
           <span slot="label">
             {{ $t('label.type') }}
-            <a-tooltip :title="importRoleApiParams.type.description">
+            <a-tooltip :title="apiParams.type.description">
               <a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
             </a-tooltip>
           </span>
@@ -89,7 +89,7 @@
             v-decorator="['type', {
               rules: [{ required: true, message: $t('message.error.select') }]
             }]"
-            :placeholder="importRoleApiParams.type.description">
+            :placeholder="apiParams.type.description">
             <a-select-option v-for="role in defaultRoles" :key="role">
               {{ role }}
             </a-select-option>
@@ -99,7 +99,7 @@
         <a-form-item>
           <span slot="label">
             {{ $t('label.forced') }}
-            <a-tooltip :title="importRoleApiParams.forced.description">
+            <a-tooltip :title="apiParams.forced.description">
               <a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
             </a-tooltip>
           </span>
@@ -133,11 +133,7 @@ export default {
   },
   beforeCreate () {
     this.form = this.$form.createForm(this)
-    this.apiConfig = this.$store.getters.apis.importRole || {}
+    this.apiParams = this.$getApiParams('importRole')
-    this.importRoleApiParams = {}
-    this.apiConfig.params.forEach(param => {
-      this.importRoleApiParams[param.name] = param
-    })
   },
   methods: {
     handleRemove (file) {

ui/src/views/image/AddKubernetesSupportedVersion.vue

@@ -177,11 +177,7 @@ export default {
   },
   beforeCreate () {
     this.form = this.$form.createForm(this)
-    this.apiConfig = this.$store.getters.apis.addKubernetesSupportedVersion || {}
+    this.apiParams = this.$getApiParams('addKubernetesSupportedVersion')
-    this.apiParams = {}
-    this.apiConfig.params.forEach(param => {
-      this.apiParams[param.name] = param
-    })
   },
   created () {
     this.zones = [

ui/src/views/image/IsoZones.vue

@@ -158,11 +158,7 @@ export default {
   },
   beforeCreate () {
     this.form = this.$form.createForm(this)
-    this.apiConfigParams = (this.$store.getters.apis.copyIso && this.$store.getters.apis.copyIso.params) || []
+    this.apiParams = this.$getApiParams('copyIso')
-    this.apiParams = {}
-    this.apiConfigParams.forEach(param => {
-      this.apiParams[param.name] = param
-    })
   },
   created () {
     this.columns = [

ui/src/views/image/RegisterOrUploadIso.vue

@@ -193,11 +193,7 @@ export default {
   },
   beforeCreate () {
     this.form = this.$form.createForm(this)
-    this.apiConfig = this.$store.getters.apis.registerIso || {}
+    this.apiParams = this.$getApiParams('registerIso')
-    this.apiParams = {}
-    this.apiConfig.params.forEach(param => {
-      this.apiParams[param.name] = param
-    })
   },
   created () {
     this.zones = []

ui/src/views/image/RegisterOrUploadTemplate.vue

@@ -403,11 +403,7 @@ export default {
   },
   beforeCreate () {
     this.form = this.$form.createForm(this)
-    this.apiConfig = this.$store.getters.apis.registerTemplate || {}
+    this.apiParams = this.$getApiParams('registerTemplate')
-    this.apiParams = {}
-    this.apiConfig.params.forEach(param => {
-      this.apiParams[param.name] = param
-    })
   },
   created () {
     this.$set(this.zones, 'loading', false)

ui/src/views/image/TemplateZones.vue

@@ -169,11 +169,7 @@ export default {
   },
   beforeCreate () {
     this.form = this.$form.createForm(this)
-    this.apiConfigParams = (this.$store.getters.apis.copyTemplate && this.$store.getters.apis.copyTemplate.params) || []
+    this.apiParams = this.$getApiParams('copyTemplate')
-    this.apiParams = {}
-    this.apiConfigParams.forEach(param => {
-      this.apiParams[param.name] = param
-    })
   },
   created () {
     this.columns = [

ui/src/views/image/UpdateKubernetesSupportedVersion.vue

@@ -71,11 +71,7 @@ export default {
   },
   beforeCreate () {
     this.form = this.$form.createForm(this)
-    this.apiConfig = this.$store.getters.apis.updateKubernetesSupportedVersion || {}
+    this.apiParams = this.$getApiParams('updateKubernetesSupportedVersion')
-    this.apiParams = {}
-    this.apiConfig.params.forEach(param => {
-      this.apiParams[param.name] = param
-    })
   },
   created () {
     this.states = [

ui/src/views/infra/AddPrimaryStorage.vue

@@ -337,11 +337,7 @@ export default {
   },
   beforeCreate () {
     this.form = this.$form.createForm(this)
-    this.apiParams = {}
+    this.apiParams = this.$getApiParams('createStoragePool')
-    var apiConfig = this.$store.getters.apis.createStoragePool || {}
-    apiConfig.params.forEach(param => {
-      this.apiParams[param.name] = param
-    })
   },
   created () {
     this.fetchData()

ui/src/views/infra/InfraSummary.vue

@@ -215,11 +215,7 @@ export default {
   },
   beforeCreate () {
     this.form = this.$form.createForm(this)
-    this.apiParams = {}
+    this.apiParams = this.$getApiParams('uploadCustomCertificate')
-    var apiConfig = this.$store.getters.apis.uploadCustomCertificate || {}
-    apiConfig.params.forEach(param => {
-      this.apiParams[param.name] = param
-    })
   },
   created () {
     this.fetchData()

ui/src/views/infra/network/EditTrafficLabel.vue

@@ -136,13 +136,7 @@ export default {
   },
   beforeCreate () {
     this.form = this.$form.createForm(this)
-    this.apiConfig = this.$store.getters.apis.updateTrafficType || {}
+    this.apiParams = this.$getApiParams('updateTrafficType')
-    this.apiParams = {}
-    if (this.apiConfig.params) {
-      this.apiConfig.params.forEach(param => {
-        this.apiParams[param.name] = param
-      })
-    }
   },
   inject: ['parentFetchData'],
   created () {

ui/src/views/infra/routers/RouterHealthCheck.vue

@@ -120,11 +120,7 @@ export default {
   },
   beforeCreate () {
     this.form = this.$form.createForm(this)
-    this.apiConfigParams = (this.$store.getters.apis.getRouterHealthCheckResults && this.$store.getters.apis.getRouterHealthCheckResults.params) || []
+    this.apiParams = this.$getApiParams('getRouterHealthCheckResults')
-    this.apiParams = {}
-    this.apiConfigParams.forEach(param => {
-      this.apiParams[param.name] = param
-    })
   },
   watch: {
     resource: function (newItem, oldItem) {

ui/src/views/network/CreateIsolatedNetworkForm.vue

@@ -290,11 +290,7 @@ export default {
   },
   beforeCreate () {
     this.form = this.$form.createForm(this)
-    this.apiConfig = this.$store.getters.apis.createNetwork || {}
+    this.apiParams = this.$getApiParams('createNetwork')
-    this.apiParams = {}
-    this.apiConfig.params.forEach(param => {
-      this.apiParams[param.name] = param
-    })
   },
   created () {
     this.domains = [

ui/src/views/network/CreateL2NetworkForm.vue

@@ -262,11 +262,7 @@ export default {
   },
   beforeCreate () {
     this.form = this.$form.createForm(this)
-    this.apiConfig = this.$store.getters.apis.createNetwork || {}
+    this.apiParams = this.$getApiParams('createNetwork')
-    this.apiParams = {}
-    this.apiConfig.params.forEach(param => {
-      this.apiParams[param.name] = param
-    })
   },
   created () {
     this.domains = [

ui/src/views/network/CreateSharedNetworkForm.vue

@@ -468,11 +468,7 @@ export default {
   },
   beforeCreate () {
     this.form = this.$form.createForm(this)
-    this.apiConfig = this.$store.getters.apis.createNetwork || {}
+    this.apiParams = this.$getApiParams('createNetwork')
-    this.apiParams = {}
-    this.apiConfig.params.forEach(param => {
-      this.apiParams[param.name] = param
-    })
   },
   created () {
     this.fetchData()

ui/src/views/network/CreateVlanIpRange.vue

@@ -214,11 +214,7 @@ export default {
   },
   created () {
     this.form = this.$form.createForm(this)
-    this.apiConfig = this.$store.getters.apis.createVlanIpRange || {}
+    this.apiParams = this.$getApiParams('createVlanIpRange')
-    this.apiParams = {}
-    this.apiConfig.params.forEach(param => {
-      this.apiParams[param.name] = param
-    })
     this.fetchData()
   },
   methods: {

ui/src/views/network/CreateVpc.vue

@@ -141,11 +141,7 @@ export default {
   },
   beforeCreate () {
     this.form = this.$form.createForm(this)
-    this.apiParams = {}
+    this.apiParams = this.$getApiParams('createVPC')
-    var apiConfig = this.$store.getters.apis.createVPC || []
-    apiConfig.params.forEach(param => {
-      this.apiParams[param.name] = param
-    })
   },
   created () {
     this.fetchData()

ui/src/views/network/CreateVpnCustomerGateway.vue

@@ -326,11 +326,7 @@ export default {
   },
   beforeCreate () {
     this.form = this.$form.createForm(this)
-    this.apiParams = {}
+    this.apiParams = this.$getApiParams('createVpnCustomerGateway')
-    var apiConfig = this.$store.getters.apis.createVpnCustomerGateway || {}
-    apiConfig.params.forEach(param => {
-      this.apiParams[param.name] = param
-    })
   },
   methods: {
     closeModal () {

ui/src/views/offering/AddComputeOffering.vue

@@ -806,11 +806,7 @@ export default {
         this.selectedZoneIndex = values.zoneid
       }
     })
-    this.apiParams = {}
+    this.apiParams = this.$getApiParams('createServiceOffering')
-    var apiConfig = this.$store.getters.apis.createServiceOffering || {}
-    apiConfig.params.forEach(param => {
-      this.apiParams[param.name] = param
-    })
   },
   created () {
     this.zones = [

ui/src/views/offering/AddDiskOffering.vue

@@ -471,11 +471,7 @@ export default {
         this.selectedZoneIndex = values.zoneid
       }
     })
-    this.apiParams = {}
+    this.apiParams = this.$getApiParams('createDiskOffering')
-    var apiConfig = this.$store.getters.apis.createDiskOffering || {}
-    apiConfig.params.forEach(param => {
-      this.apiParams[param.name] = param
-    })
   },
   created () {
     this.zones = [

ui/src/views/offering/AddNetworkOffering.vue

@@ -512,11 +512,7 @@ export default {
   },
   beforeCreate () {
     this.form = this.$form.createForm(this)
-    this.apiParams = {}
+    this.apiParams = this.$getApiParams('createNetworkOffering')
-    var apiConfig = this.$store.getters.apis.createNetworkOffering || {}
-    apiConfig.params.forEach(param => {
-      this.apiParams[param.name] = param
-    })
   },
   created () {
     this.zones = [

ui/src/views/offering/AddVpcOffering.vue

@@ -192,11 +192,7 @@ export default {
   },
   beforeCreate () {
     this.form = this.$form.createForm(this)
-    this.apiParams = {}
+    this.apiParams = this.$getApiParams('createVPCOffering')
-    var apiConfig = this.$store.getters.apis.createVPCOffering || {}
-    apiConfig.params.forEach(param => {
-      this.apiParams[param.name] = param
-    })
   },
   created () {
     this.zones = [

ui/src/views/offering/ImportBackupOffering.vue

@@ -123,11 +123,7 @@ export default {
   },
   beforeCreate () {
     this.form = this.$form.createForm(this)
-    this.apiParams = {}
+    this.apiParams = this.$getApiParams('importBackupOffering')
-    var apiConfig = this.$store.getters.apis.importBackupOffering || {}
-    apiConfig.params.forEach(param => {
-      this.apiParams[param.name] = param
-    })
   },
   created () {
     this.fetchData()

ui/src/views/project/AddAccountOrUserToProject.vue

@@ -193,12 +193,7 @@ export default {
     }
     this.apiParams = {}
     for (var api of apis) {
-      const details = {}
+      this.apiParams[api] = this.$getApiParams(api)
-      const apiConfig = this.$store.getters.apis[api]
-      apiConfig.params.forEach(param => {
-        details[param.name] = param
-      })
-      this.apiParams[api] = details
     }
   },
   methods: {

ui/src/views/project/InvitationTokenTemplate.vue

@@ -56,11 +56,7 @@ export default {
   name: 'InvitationTokenTemplate',
   beforeCreate () {
     this.form = this.$form.createForm(this)
-    this.apiConfig = this.$store.getters.apis.updateProjectInvitation || {}
+    this.apiParams = this.$getApiParams('updateProjectInvitation')
-    this.apiParams = {}
-    this.apiConfig.params.forEach(param => {
-      this.apiParams[param.name] = param
-    })
   },
   data () {
     return {

ui/src/views/project/InvitationsTemplate.vue

@@ -156,11 +156,7 @@ export default {
     this.page = 1
     this.pageSize = 10
     this.itemCount = 0
-    this.apiConfig = this.$store.getters.apis.listProjectInvitations || {}
+    this.apiParams = this.$getApiParams('listProjectInvitations')
-    this.apiParams = {}
-    this.apiConfig.params.forEach(param => {
-      this.apiParams[param.name] = param
-    })
     if (this.apiParams.userid) {
       this.columns.splice(2, 0, {
         title: this.$t('label.user'),

ui/src/views/storage/AttachVolume.vue

@@ -62,11 +62,7 @@ export default {
   },
   beforeCreate () {
     this.form = this.$form.createForm(this)
-    this.apiConfig = this.$store.getters.apis.attachVolume || {}
+    this.apiParams = this.$getApiParams('attachVolume')
-    this.apiParams = {}
-    this.apiConfig.params.forEach(param => {
-      this.apiParams[param.name] = param
-    })
   },
   created () {
     this.fetchData()

ui/src/views/storage/CreateVolume.vue

@@ -114,11 +114,7 @@ export default {
   },
   beforeCreate () {
     this.form = this.$form.createForm(this)
-    this.apiParams = {}
+    this.apiParams = this.$getApiParams('createVolume')
-    var apiConfig = this.$store.getters.apis.createVolume || {}
-    apiConfig.params.forEach(param => {
-      this.apiParams[param.name] = param
-    })
   },
   created () {
     this.fetchData()

ui/src/views/storage/TakeSnapshot.vue

@@ -123,11 +123,7 @@ export default {
   },
   beforeCreate () {
     this.form = this.$form.createForm(this)
-    this.apiConfig = this.$store.getters.apis.createSnapshot || {}
+    this.apiParams = this.$getApiParams('createSnapshot')
-    this.apiParams = {}
-    this.apiConfig.params.forEach(param => {
-      this.apiParams[param.name] = param
-    })
   },
   mounted () {
     this.quiescevm = this.resource.quiescevm

ui/src/views/storage/UploadLocalVolume.vue

@@ -142,11 +142,7 @@ export default {
   },
   beforeCreate () {
     this.form = this.$form.createForm(this)
-    this.apiParams = {}
+    this.apiParams = this.$getApiParams('getUploadParamsForVolume')
-    var apiConfig = this.$store.getters.apis.getUploadParamsForVolume || {}
-    apiConfig.params.forEach(param => {
-      this.apiParams[param.name] = param
-    })
   },
   created () {
     this.listZones()

ui/tests/common/index.js

@@ -21,11 +21,12 @@ import mockRouter from '../mock/mockRouter'
 
 import localVue from '../setup'
 import { mount } from '@vue/test-utils'
-import { pollJobPlugin, notifierPlugin, configUtilPlugin } from '@/utils/plugins'
+import { pollJobPlugin, notifierPlugin, configUtilPlugin, apiMetaUtilPlugin } from '@/utils/plugins'
 
 localVue.use(pollJobPlugin)
 localVue.use(notifierPlugin)
 localVue.use(configUtilPlugin)
+localVue.use(apiMetaUtilPlugin)
 
 function createMockRouter (newRoutes = []) {
   let routes = []