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>
2021-07-15 12:46:54 +05:30 · 2021-07-15 12:46:54 +05:30 · 0406e27af3
parent f286f01516
commit 0406e27af3
45 changed files with 79 additions and 249 deletions
--- a/ui/src/main.js
+++ b/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)
--- a/ui/src/utils/plugins.js
+++ b/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
+    }
+  }
+}
--- a/ui/src/views/compute/CreateKubernetesCluster.vue
+++ b/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.apiConfig.params.forEach(param => {
-      this.apiParams[param.name] = param
-    })
+    this.apiParams = this.$getApiParams('createKubernetesCluster')
  },
  created () {
    this.networks = [
--- a/ui/src/views/compute/CreateSSHKeyPair.vue
+++ b/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.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
-      }
-    })
+    this.apiParams = this.$getApiParams('createSSHKeyPair', 'registerSSHKeyPair')
  },
  created () {
    this.domains = [
--- a/ui/src/views/compute/CreateSnapshotWizard.vue
+++ b/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.apiConfig.params.forEach(param => {
-      this.apiParams[param.name] = param
-    })
+    this.apiParams = this.$getApiParams('createSnapshot')
  },
  created () {
    this.fetchData()
--- a/ui/src/views/compute/DestroyVM.vue
+++ b/ui/src/views/compute/DestroyVM.vue
@ -82,11 +82,7 @@ export default {
  },
  beforeCreate () {
    this.form = this.$form.createForm(this)
-    this.apiParams = {}
-    var apiConfig = this.$store.getters.apis.destroyVirtualMachine || {}
-    apiConfig.params.forEach(param => {
-      this.apiParams[param.name] = param
-    })
+    this.apiParams = this.$getApiParams('destroyVirtualMachine')
  },
  created () {
    this.fetchData()
--- a/ui/src/views/compute/EditVM.vue
+++ b/ui/src/views/compute/EditVM.vue
@ -138,11 +138,7 @@ export default {
  },
  beforeCreate () {
    this.form = this.$form.createForm(this)
-    this.apiParams = {}
-    const apiConfig = this.$store.getters.apis.updateVirtualMachine || {}
-    apiConfig.params.forEach(param => {
-      this.apiParams[param.name] = param
-    })
+    this.apiParams = this.$getApiParams('updateVirtualMachine')
  },
  created () {
    this.fetchData()
--- a/ui/src/views/compute/ScaleKubernetesCluster.vue
+++ b/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.apiConfig.params.forEach(param => {
-      this.apiParams[param.name] = param
-    })
+    this.apiParams = this.$getApiParams('scaleKubernetesCluster')
  },
  created () {
    this.originalSize = !this.isObjectEmpty(this.resource) ? this.resource.size : 1
--- a/ui/src/views/compute/StartVirtualMachine.vue
+++ b/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.apiConfig.params.forEach(param => {
-      this.apiParams[param.name] = param
-    })
+    this.apiParams = this.$getApiParams('startVirtualMachine')
  },
  created () {
    if (this.$store.getters.userInfo.roletype === 'Admin') {
--- a/ui/src/views/compute/UpgradeKubernetesCluster.vue
+++ b/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.apiConfig.params.forEach(param => {
-      this.apiParams[param.name] = param
-    })
+    this.apiParams = this.$getApiParams('upgradeKubernetesCluster')
  },
  created () {
    this.fetchData()
--- a/ui/src/views/iam/AddAccount.vue
+++ b/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 = {}
-    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
-      })
-    }
+    this.apiParams = this.$getApiParams('createAccount', 'authorizeSamlSso')
  },
  created () {
    this.fetchData()
--- a/ui/src/views/iam/AddUser.vue
+++ b/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.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.apiParams = this.$getApiParams('createUser', 'authorizeSamlSso')
    this.fetchData()
  },
  methods: {
--- a/ui/src/views/iam/ChangeUserPassword.vue
+++ b/ui/src/views/iam/ChangeUserPassword.vue
@ -98,11 +98,7 @@ export default {
  },
  beforeCreate () {
    this.form = this.$form.createForm(this)
-    this.apiParams = {}
-    this.apiConfig = this.$store.getters.apis.updateUser || {}
-    this.apiConfig.params.forEach(param => {
-      this.apiParams[param.name] = param
-    })
+    this.apiParams = this.$getApiParams('updateUser')
  },
  methods: {
    isAdminOrDomainAdmin () {
--- a/ui/src/views/iam/CreateRole.vue
+++ b/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.createRoleApiParams = {}
-    this.apiConfig.params.forEach(param => {
-      this.createRoleApiParams[param.name] = param
-    })
+    this.apiParams = this.$getApiParams('createRole')
  },
  watch: {
    '$route' (to, from) {
--- a/ui/src/views/iam/EditUser.vue
+++ b/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.apiConfig.params.forEach(param => {
-      this.apiParams[param.name] = param
-    })
+    this.apiParams = this.$getApiParams('updateUser')
  },
  created () {
    this.fetchData()
--- a/ui/src/views/iam/ImportRole.vue
+++ b/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.importRoleApiParams = {}
-    this.apiConfig.params.forEach(param => {
-      this.importRoleApiParams[param.name] = param
-    })
+    this.apiParams = this.$getApiParams('importRole')
  },
  methods: {
    handleRemove (file) {
--- a/ui/src/views/image/AddKubernetesSupportedVersion.vue
+++ b/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.apiConfig.params.forEach(param => {
-      this.apiParams[param.name] = param
-    })
+    this.apiParams = this.$getApiParams('addKubernetesSupportedVersion')
  },
  created () {
    this.zones = [
--- a/ui/src/views/image/IsoZones.vue
+++ b/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.apiConfigParams.forEach(param => {
-      this.apiParams[param.name] = param
-    })
+    this.apiParams = this.$getApiParams('copyIso')
  },
  created () {
    this.columns = [
--- a/ui/src/views/image/RegisterOrUploadIso.vue
+++ b/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.apiConfig.params.forEach(param => {
-      this.apiParams[param.name] = param
-    })
+    this.apiParams = this.$getApiParams('registerIso')
  },
  created () {
    this.zones = []
--- a/ui/src/views/image/RegisterOrUploadTemplate.vue
+++ b/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.apiConfig.params.forEach(param => {
-      this.apiParams[param.name] = param
-    })
+    this.apiParams = this.$getApiParams('registerTemplate')
  },
  created () {
    this.$set(this.zones, 'loading', false)
--- a/ui/src/views/image/TemplateZones.vue
+++ b/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.apiConfigParams.forEach(param => {
-      this.apiParams[param.name] = param
-    })
+    this.apiParams = this.$getApiParams('copyTemplate')
  },
  created () {
    this.columns = [
--- a/ui/src/views/image/UpdateKubernetesSupportedVersion.vue
+++ b/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.apiConfig.params.forEach(param => {
-      this.apiParams[param.name] = param
-    })
+    this.apiParams = this.$getApiParams('updateKubernetesSupportedVersion')
  },
  created () {
    this.states = [
--- a/ui/src/views/infra/AddPrimaryStorage.vue
+++ b/ui/src/views/infra/AddPrimaryStorage.vue
@ -337,11 +337,7 @@ export default {
  },
  beforeCreate () {
    this.form = this.$form.createForm(this)
-    this.apiParams = {}
-    var apiConfig = this.$store.getters.apis.createStoragePool || {}
-    apiConfig.params.forEach(param => {
-      this.apiParams[param.name] = param
-    })
+    this.apiParams = this.$getApiParams('createStoragePool')
  },
  created () {
    this.fetchData()
--- a/ui/src/views/infra/InfraSummary.vue
+++ b/ui/src/views/infra/InfraSummary.vue
@ -215,11 +215,7 @@ export default {
  },
  beforeCreate () {
    this.form = this.$form.createForm(this)
-    this.apiParams = {}
-    var apiConfig = this.$store.getters.apis.uploadCustomCertificate || {}
-    apiConfig.params.forEach(param => {
-      this.apiParams[param.name] = param
-    })
+    this.apiParams = this.$getApiParams('uploadCustomCertificate')
  },
  created () {
    this.fetchData()
--- a/ui/src/views/infra/network/EditTrafficLabel.vue
+++ b/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 = {}
-    if (this.apiConfig.params) {
-      this.apiConfig.params.forEach(param => {
-        this.apiParams[param.name] = param
-      })
-    }
+    this.apiParams = this.$getApiParams('updateTrafficType')
  },
  inject: ['parentFetchData'],
  created () {
--- a/ui/src/views/infra/routers/RouterHealthCheck.vue
+++ b/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.apiConfigParams.forEach(param => {
-      this.apiParams[param.name] = param
-    })
+    this.apiParams = this.$getApiParams('getRouterHealthCheckResults')
  },
  watch: {
    resource: function (newItem, oldItem) {
--- a/ui/src/views/network/CreateIsolatedNetworkForm.vue
+++ b/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.apiConfig.params.forEach(param => {
-      this.apiParams[param.name] = param
-    })
+    this.apiParams = this.$getApiParams('createNetwork')
  },
  created () {
    this.domains = [
--- a/ui/src/views/network/CreateL2NetworkForm.vue
+++ b/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.apiConfig.params.forEach(param => {
-      this.apiParams[param.name] = param
-    })
+    this.apiParams = this.$getApiParams('createNetwork')
  },
  created () {
    this.domains = [
--- a/ui/src/views/network/CreateSharedNetworkForm.vue
+++ b/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.apiConfig.params.forEach(param => {
-      this.apiParams[param.name] = param
-    })
+    this.apiParams = this.$getApiParams('createNetwork')
  },
  created () {
    this.fetchData()
--- a/ui/src/views/network/CreateVlanIpRange.vue
+++ b/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.apiConfig.params.forEach(param => {
-      this.apiParams[param.name] = param
-    })
+    this.apiParams = this.$getApiParams('createVlanIpRange')
    this.fetchData()
  },
  methods: {
--- a/ui/src/views/network/CreateVpc.vue
+++ b/ui/src/views/network/CreateVpc.vue
@ -141,11 +141,7 @@ export default {
  },
  beforeCreate () {
    this.form = this.$form.createForm(this)
-    this.apiParams = {}
-    var apiConfig = this.$store.getters.apis.createVPC || []
-    apiConfig.params.forEach(param => {
-      this.apiParams[param.name] = param
-    })
+    this.apiParams = this.$getApiParams('createVPC')
  },
  created () {
    this.fetchData()
--- a/ui/src/views/network/CreateVpnCustomerGateway.vue
+++ b/ui/src/views/network/CreateVpnCustomerGateway.vue
@ -326,11 +326,7 @@ export default {
  },
  beforeCreate () {
    this.form = this.$form.createForm(this)
-    this.apiParams = {}
-    var apiConfig = this.$store.getters.apis.createVpnCustomerGateway || {}
-    apiConfig.params.forEach(param => {
-      this.apiParams[param.name] = param
-    })
+    this.apiParams = this.$getApiParams('createVpnCustomerGateway')
  },
  methods: {
    closeModal () {
--- a/ui/src/views/offering/AddComputeOffering.vue
+++ b/ui/src/views/offering/AddComputeOffering.vue
@ -806,11 +806,7 @@ export default {
        this.selectedZoneIndex = values.zoneid
      }
    })
-    this.apiParams = {}
-    var apiConfig = this.$store.getters.apis.createServiceOffering || {}
-    apiConfig.params.forEach(param => {
-      this.apiParams[param.name] = param
-    })
+    this.apiParams = this.$getApiParams('createServiceOffering')
  },
  created () {
    this.zones = [
--- a/ui/src/views/offering/AddDiskOffering.vue
+++ b/ui/src/views/offering/AddDiskOffering.vue
@ -471,11 +471,7 @@ export default {
        this.selectedZoneIndex = values.zoneid
      }
    })
-    this.apiParams = {}
-    var apiConfig = this.$store.getters.apis.createDiskOffering || {}
-    apiConfig.params.forEach(param => {
-      this.apiParams[param.name] = param
-    })
+    this.apiParams = this.$getApiParams('createDiskOffering')
  },
  created () {
    this.zones = [
--- a/ui/src/views/offering/AddNetworkOffering.vue
+++ b/ui/src/views/offering/AddNetworkOffering.vue
@ -512,11 +512,7 @@ export default {
  },
  beforeCreate () {
    this.form = this.$form.createForm(this)
-    this.apiParams = {}
-    var apiConfig = this.$store.getters.apis.createNetworkOffering || {}
-    apiConfig.params.forEach(param => {
-      this.apiParams[param.name] = param
-    })
+    this.apiParams = this.$getApiParams('createNetworkOffering')
  },
  created () {
    this.zones = [
--- a/ui/src/views/offering/AddVpcOffering.vue
+++ b/ui/src/views/offering/AddVpcOffering.vue
@ -192,11 +192,7 @@ export default {
  },
  beforeCreate () {
    this.form = this.$form.createForm(this)
-    this.apiParams = {}
-    var apiConfig = this.$store.getters.apis.createVPCOffering || {}
-    apiConfig.params.forEach(param => {
-      this.apiParams[param.name] = param
-    })
+    this.apiParams = this.$getApiParams('createVPCOffering')
  },
  created () {
    this.zones = [
--- a/ui/src/views/offering/ImportBackupOffering.vue
+++ b/ui/src/views/offering/ImportBackupOffering.vue
@ -123,11 +123,7 @@ export default {
  },
  beforeCreate () {
    this.form = this.$form.createForm(this)
-    this.apiParams = {}
-    var apiConfig = this.$store.getters.apis.importBackupOffering || {}
-    apiConfig.params.forEach(param => {
-      this.apiParams[param.name] = param
-    })
+    this.apiParams = this.$getApiParams('importBackupOffering')
  },
  created () {
    this.fetchData()
--- a/ui/src/views/project/AddAccountOrUserToProject.vue
+++ b/ui/src/views/project/AddAccountOrUserToProject.vue
@ -193,12 +193,7 @@ export default {
    }
    this.apiParams = {}
    for (var api of apis) {
-      const details = {}
-      const apiConfig = this.$store.getters.apis[api]
-      apiConfig.params.forEach(param => {
-        details[param.name] = param
-      })
-      this.apiParams[api] = details
+      this.apiParams[api] = this.$getApiParams(api)
    }
  },
  methods: {
--- a/ui/src/views/project/InvitationTokenTemplate.vue
+++ b/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.apiConfig.params.forEach(param => {
-      this.apiParams[param.name] = param
-    })
+    this.apiParams = this.$getApiParams('updateProjectInvitation')
  },
  data () {
    return {
--- a/ui/src/views/project/InvitationsTemplate.vue
+++ b/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.apiConfig.params.forEach(param => {
-      this.apiParams[param.name] = param
-    })
+    this.apiParams = this.$getApiParams('listProjectInvitations')
    if (this.apiParams.userid) {
      this.columns.splice(2, 0, {
        title: this.$t('label.user'),
--- a/ui/src/views/storage/AttachVolume.vue
+++ b/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.apiConfig.params.forEach(param => {
-      this.apiParams[param.name] = param
-    })
+    this.apiParams = this.$getApiParams('attachVolume')
  },
  created () {
    this.fetchData()
--- a/ui/src/views/storage/CreateVolume.vue
+++ b/ui/src/views/storage/CreateVolume.vue
@ -114,11 +114,7 @@ export default {
  },
  beforeCreate () {
    this.form = this.$form.createForm(this)
-    this.apiParams = {}
-    var apiConfig = this.$store.getters.apis.createVolume || {}
-    apiConfig.params.forEach(param => {
-      this.apiParams[param.name] = param
-    })
+    this.apiParams = this.$getApiParams('createVolume')
  },
  created () {
    this.fetchData()
--- a/ui/src/views/storage/TakeSnapshot.vue
+++ b/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.apiConfig.params.forEach(param => {
-      this.apiParams[param.name] = param
-    })
+    this.apiParams = this.$getApiParams('createSnapshot')
  },
  mounted () {
    this.quiescevm = this.resource.quiescevm
--- a/ui/src/views/storage/UploadLocalVolume.vue
+++ b/ui/src/views/storage/UploadLocalVolume.vue
@ -142,11 +142,7 @@ export default {
  },
  beforeCreate () {
    this.form = this.$form.createForm(this)
-    this.apiParams = {}
-    var apiConfig = this.$store.getters.apis.getUploadParamsForVolume || {}
-    apiConfig.params.forEach(param => {
-      this.apiParams[param.name] = param
-    })
+    this.apiParams = this.$getApiParams('getUploadParamsForVolume')
  },
  created () {
    this.listZones()
--- a/ui/tests/common/index.js
+++ b/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 = []