UI: Fixes removing undesired API parameters on form submit (#6196)

* fixes removing undesired api parameters

* remove comment

ui/public/locales/en.json

@@ -948,6 +948,7 @@
 "label.expunge": "Expunge",
 "label.expunged": "Expunged",
 "label.expunging": "Expunging",
+"label.export.rules": "Export Rules",
 "label.external.link": "External link",
 "label.externalid": "External Id",
 "label.externalloadbalanceripaddress": "External load balancer IP address",

ui/src/utils/mixin.js

@@ -90,4 +90,20 @@ const AppDeviceEnquire = {
   }
 }
 
-export { mixin, AppDeviceEnquire, mixinDevice }
+const mixinForm = {
+  methods: {
+    handleRemoveFields (form) {
+      const formResult = {}
+      Object.keys(form).forEach(field => {
+        if (field in this.$refs && this.$refs[field] === null || this.$refs[field] === undefined) {
+          return true
+        }
+        formResult[field] = form[field]
+      })
+
+      return formResult
+    }
+  }
+}
+
+export { mixin, AppDeviceEnquire, mixinDevice, mixinForm }

ui/src/views/compute/CreateKubernetesCluster.vue

@@ -226,11 +226,13 @@
 <script>
 import { ref, reactive, toRaw } from 'vue'
 import { api } from '@/api'
+import { mixinForm } from '@/utils/mixin'
 import ResourceIcon from '@/components/view/ResourceIcon'
 import TooltipLabel from '@/components/widgets/TooltipLabel'
 
 export default {
   name: 'CreateKubernetesCluster',
+  mixins: [mixinForm],
   components: {
     TooltipLabel,
     ResourceIcon
@@ -446,7 +448,8 @@ export default {
       e.preventDefault()
       if (this.loading) return
       this.formRef.value.validate().then(() => {
-        const values = toRaw(this.form)
+        const formRaw = toRaw(this.form)
+        const values = this.handleRemoveFields(formRaw)
         this.loading = true
         const params = {
           name: values.name,

ui/src/views/compute/CreateSSHKeyPair.vue

@@ -104,9 +104,11 @@
 <script>
 import { ref, reactive, toRaw } from 'vue'
 import { api } from '@/api'
+import { mixinForm } from '@/utils/mixin'
 
 export default {
   name: 'CreateSSHKeyPair',
+  mixins: [mixinForm],
   props: {},
   data () {
     return {
@@ -177,7 +179,8 @@ export default {
       e.preventDefault()
       if (this.loading) return
       this.formRef.value.validate().then(() => {
-        const values = toRaw(this.form)
+        const formRaw = toRaw(this.form)
+        const values = this.handleRemoveFields(formRaw)
         this.loading = true
         const params = {
           name: values.name

ui/src/views/compute/CreateSnapshotWizard.vue

@@ -78,10 +78,12 @@
 <script>
 import { ref, reactive, toRaw } from 'vue'
 import { api } from '@/api'
+import { mixinForm } from '@/utils/mixin'
 import TooltipLabel from '@/components/widgets/TooltipLabel'
 
 export default {
   name: 'CreateSnapshotWizard',
+  mixins: [mixinForm],
   components: {
     TooltipLabel
   },
@@ -129,7 +131,8 @@ export default {
 
       if (this.loading) return
       this.formRef.value.validate().then(() => {
-        const values = toRaw(this.form)
+        const formRaw = toRaw(this.form)
+        const values = this.handleRemoveFields(formRaw)
         const params = {}
         params.volumeid = values.volumeid
         params.name = values.name

ui/src/views/compute/ScaleKubernetesCluster.vue

@@ -93,10 +93,12 @@
 <script>
 import { ref, reactive, toRaw } from 'vue'
 import { api } from '@/api'
+import { mixinForm } from '@/utils/mixin'
 import TooltipLabel from '@/components/widgets/TooltipLabel'
 
 export default {
   name: 'ScaleKubernetesCluster',
+  mixins: [mixinForm],
   components: {
     TooltipLabel
   },
@@ -206,7 +208,8 @@ export default {
       e.preventDefault()
       if (this.loading) return
       this.formRef.value.validate().then(() => {
-        const values = toRaw(this.form)
+        const formRaw = toRaw(this.form)
+        const values = this.handleRemoveFields(formRaw)
         this.loading = true
         const params = {
           id: this.resource.id

ui/src/views/compute/backup/FormSchedule.vue

@@ -144,10 +144,12 @@
 import { ref, reactive, toRaw } from 'vue'
 import { api } from '@/api'
 import { timeZone } from '@/utils/timezone'
+import { mixinForm } from '@/utils/mixin'
 import debounce from 'lodash/debounce'
 
 export default {
   name: 'FormSchedule',
+  mixins: [mixinForm],
   props: {
     loading: {
       type: Boolean,
@@ -242,7 +244,8 @@ export default {
     handleSubmit (e) {
       if (this.actionLoading) return
       this.formRef.value.validate().then(() => {
-        const values = toRaw(this.form)
+        const formRaw = toRaw(this.form)
+        const values = this.handleRemoveFields(formRaw)
         const params = {}
         params.virtualmachineid = this.resource.id
         params.intervaltype = values.intervaltype

ui/src/views/iam/CreateRole.vue

@@ -110,10 +110,12 @@
 <script>
 import { ref, reactive, toRaw } from 'vue'
 import { api } from '@/api'
+import { mixinForm } from '@/utils/mixin'
 import TooltipLabel from '@/components/widgets/TooltipLabel'
 
 export default {
   name: 'CreateRole',
+  mixins: [mixinForm],
   components: {
     TooltipLabel
   },
@@ -159,7 +161,8 @@ export default {
       e.preventDefault()
       if (this.loading) return
       this.formRef.value.validate().then(() => {
-        const values = toRaw(this.form)
+        const formRaw = toRaw(this.form)
+        const values = this.handleRemoveFields(formRaw)
         const params = {}
         for (const key in values) {
           if (key === 'using') {

ui/src/views/iam/RolePermissionTab.vue

@@ -21,7 +21,7 @@
     <div style="width: 100%; display: flex; margin-bottom: 10px">
       <a-button type="dashed" @click="exportRolePermissions" style="width: 100%">
         <template #icon><download-outlined /></template>
-        Export Rules
+        {{ $t('label.export.rules') }}
       </a-button>
     </div>
     <div v-if="updateTable" class="loading-overlay">

ui/src/views/image/RegisterOrUploadIso.vue

@@ -151,10 +151,12 @@ import { ref, reactive, toRaw } from 'vue'
 import { api } from '@/api'
 import store from '@/store'
 import { axios } from '../../utils/request'
+import { mixinForm } from '@/utils/mixin'
 import ResourceIcon from '@/components/view/ResourceIcon'
 
 export default {
   name: 'RegisterIso',
+  mixins: [mixinForm],
   props: {
     resource: {
       type: Object,
@@ -308,7 +310,8 @@ export default {
       e.preventDefault()
       if (this.loading) return
       this.formRef.value.validate().then(() => {
-        const values = toRaw(this.form)
+        const formRaw = toRaw(this.form)
+        const values = this.handleRemoveFields(formRaw)
         const params = {}
         for (const key in values) {
           const input = values[key]

ui/src/views/image/RegisterOrUploadTemplate.vue

@@ -316,10 +316,12 @@ import { ref, reactive, toRaw } from 'vue'
 import { api } from '@/api'
 import store from '@/store'
 import { axios } from '../../utils/request'
+import { mixinForm } from '@/utils/mixin'
 import ResourceIcon from '@/components/view/ResourceIcon'
 
 export default {
   name: 'RegisterOrUploadTemplate',
+  mixins: [mixinForm],
   props: {
     resource: {
       type: Object,
@@ -755,6 +757,10 @@ export default {
       this.hyperKVMShow = false
       this.deployasis = false
       this.allowDirectDownload = false
+      this.selectedFormat = null
+      this.form.deployasis = false
+      this.form.directdownload = false
+      this.form.xenserverToolsVersion61plus = false
 
       this.resetSelect(arrSelectReset)
       this.fetchFormat(hyperVisor)
@@ -773,7 +779,8 @@ export default {
         } else {
           delete this.form.zoneids
         }
-        const values = toRaw(this.form)
+        const formRaw = toRaw(this.form)
+        const values = this.handleRemoveFields(formRaw)
         let params = {}
         for (const key in values) {
           const input = values[key]

ui/src/views/infra/AddPrimaryStorage.vue

@@ -343,11 +343,13 @@
 import { ref, reactive, toRaw } from 'vue'
 import { api } from '@/api'
 import _ from 'lodash'
+import { mixinForm } from '@/utils/mixin'
 import ResourceIcon from '@/components/view/ResourceIcon'
 import TooltipLabel from '@/components/widgets/TooltipLabel'
 
 export default {
   name: 'AddPrimaryStorage',
+  mixins: [mixinForm],
   components: {
     TooltipLabel,
     ResourceIcon
@@ -660,7 +662,8 @@ export default {
       e.preventDefault()
       if (this.loading) return
       this.formRef.value.validate().then(() => {
-        const values = toRaw(this.form)
+        const formRaw = toRaw(this.form)
+        const values = this.handleRemoveFields(formRaw)
         var params = {
           scope: values.scope,
           zoneid: values.zone,

ui/src/views/infra/AddSecondaryStorage.vue

@@ -170,10 +170,12 @@
 <script>
 import { ref, reactive, toRaw } from 'vue'
 import { api } from '@/api'
+import { mixinForm } from '@/utils/mixin'
 import ResourceIcon from '@/components/view/ResourceIcon'
 
 export default {
   name: 'AddSecondryStorage',
+  mixins: [mixinForm],
   props: {
     resource: {
       type: Object,
@@ -264,7 +266,8 @@ export default {
       e.preventDefault()
       if (this.loading) return
       this.formRef.value.validate().then(async () => {
-        const values = toRaw(this.form)
+        const formRaw = toRaw(this.form)
+        const values = this.handleRemoveFields(formRaw)
 
         var data = {
           name: values.name

ui/src/views/infra/HostAdd.vue

@@ -244,12 +244,14 @@
 <script>
 import { ref, reactive, toRaw } from 'vue'
 import { api } from '@/api'
+import { mixinForm } from '@/utils/mixin'
 import DedicateDomain from '../../components/view/DedicateDomain'
 import ResourceIcon from '@/components/view/ResourceIcon'
 import TooltipLabel from '@/components/widgets/TooltipLabel'
 
 export default {
   name: 'HostAdd',
+  mixins: [mixinForm],
   components: {
     DedicateDomain,
     ResourceIcon,
@@ -416,7 +418,8 @@ export default {
     handleSubmitForm () {
       if (this.loading) return
       this.formRef.value.validate().then(() => {
-        const values = toRaw(this.form)
+        const formRaw = toRaw(this.form)
+        const values = this.handleRemoveFields(formRaw)
 
         if (values.hostname.indexOf('http://') === -1) {
           this.url = `http://${values.hostname}`

ui/src/views/network/AclListRulesTab.vue

@@ -262,10 +262,12 @@
 import { ref, reactive, toRaw } from 'vue'
 import { api } from '@/api'
 import draggable from 'vuedraggable'
+import { mixinForm } from '@/utils/mixin'
 import TooltipButton from '@/components/widgets/TooltipButton'
 
 export default {
   name: 'AclListRulesTab',
+  mixins: [mixinForm],
   components: {
     draggable,
     TooltipButton
@@ -499,7 +501,8 @@ export default {
     },
     handleEditRule () {
       this.formRef.value.validate().then(() => {
-        const values = toRaw(this.form)
+        const formRaw = toRaw(this.form)
+        const values = this.handleRemoveFields(formRaw)
         this.fetchLoading = true
         this.ruleModalVisible = false
 
@@ -588,7 +591,8 @@ export default {
     },
     handleAddRule (e) {
       this.formRef.value.validate().then(() => {
-        const values = toRaw(this.form)
+        const formRaw = toRaw(this.form)
+        const values = this.handleRemoveFields(formRaw)
         this.fetchLoading = true
         this.ruleModalVisible = false
 

ui/src/views/network/CreateIsolatedNetworkForm.vue

@@ -214,11 +214,13 @@
 import { ref, reactive, toRaw } from 'vue'
 import { api } from '@/api'
 import { isAdmin, isAdminOrDomainAdmin } from '@/role'
+import { mixinForm } from '@/utils/mixin'
 import ResourceIcon from '@/components/view/ResourceIcon'
 import TooltipLabel from '@/components/widgets/TooltipLabel'
 
 export default {
   name: 'CreateIsolatedNetworkForm',
+  mixins: [mixinForm],
   components: {
     TooltipLabel,
     ResourceIcon
@@ -427,7 +429,8 @@ export default {
     handleSubmit () {
       if (this.actionLoading) return
       this.formRef.value.validate().then(() => {
-        const values = toRaw(this.form)
+        const formRaw = toRaw(this.form)
+        const values = this.handleRemoveFields(formRaw)
         this.actionLoading = true
         var params = {
           zoneId: this.selectedZone.id,

ui/src/views/network/CreateL2NetworkForm.vue

@@ -196,11 +196,13 @@
 import { ref, reactive, toRaw } from 'vue'
 import { api } from '@/api'
 import { isAdmin, isAdminOrDomainAdmin } from '@/role'
+import { mixinForm } from '@/utils/mixin'
 import ResourceIcon from '@/components/view/ResourceIcon'
 import TooltipLabel from '@/components/widgets/TooltipLabel'
 
 export default {
   name: 'CreateL2NetworkForm',
+  mixins: [mixinForm],
   components: {
     TooltipLabel,
     ResourceIcon
@@ -389,7 +391,8 @@ export default {
     handleSubmit (e) {
       if (this.actionLoading) return
       this.formRef.value.validate().then(() => {
-        const values = toRaw(this.form)
+        const formRaw = toRaw(this.form)
+        const values = this.handleRemoveFields(formRaw)
         this.actionLoading = true
         var params = {
           zoneId: this.selectedZone.id,

ui/src/views/network/CreateSharedNetworkForm.vue

@@ -338,11 +338,13 @@
 <script>
 import { ref, reactive, toRaw } from 'vue'
 import { api } from '@/api'
+import { mixinForm } from '@/utils/mixin'
 import ResourceIcon from '@/components/view/ResourceIcon'
 import TooltipLabel from '@/components/widgets/TooltipLabel'
 
 export default {
   name: 'CreateGuestNetworkForm',
+  mixins: [mixinForm],
   components: {
     TooltipLabel,
     ResourceIcon
@@ -676,7 +678,8 @@ export default {
     handleSubmit (e) {
       if (this.actionLoading) return
       this.formRef.value.validate().then(() => {
-        const values = toRaw(this.form)
+        const formRaw = toRaw(this.form)
+        const values = this.handleRemoveFields(formRaw)
         if (
           (!this.isValidTextValueForKey(values, 'ip4gateway') && !this.isValidTextValueForKey(values, 'netmask') &&
             !this.isValidTextValueForKey(values, 'startipv4') && !this.isValidTextValueForKey(values, 'endipv4') &&

ui/src/views/network/CreateVpnCustomerGateway.vue

@@ -207,10 +207,12 @@
 <script>
 import { ref, reactive, toRaw } from 'vue'
 import { api } from '@/api'
+import { mixinForm } from '@/utils/mixin'
 import TooltipLabel from '@/components/widgets/TooltipLabel'
 
 export default {
   name: 'CreateVpnCustomerGateway',
+  mixins: [mixinForm],
   components: {
     TooltipLabel
   },
@@ -292,7 +294,8 @@ export default {
       e.preventDefault()
       if (this.isSubmitted) return
       this.formRef.value.validate().then(() => {
-        const values = toRaw(this.form)
+        const formRaw = toRaw(this.form)
+        const values = this.handleRemoveFields(formRaw)
         let ikepolicy = values.ikeEncryption + '-' + values.ikeHash + ';'
         ikepolicy += (values.ikeDh !== this.ikeDhGroupInitialValue) ? values.ikeDh : (values.ikeDh.split('(')[1]).split(')')[0]
         let esppolicy = values.espEncryption + '-' + values.espHash

ui/src/views/network/LoadBalancing.vue

@@ -495,6 +495,7 @@
 <script>
 import { ref, reactive, toRaw, nextTick } from 'vue'
 import { api } from '@/api'
+import { mixinForm } from '@/utils/mixin'
 import Status from '@/components/widgets/Status'
 import TooltipButton from '@/components/widgets/TooltipButton'
 import BulkActionView from '@/components/view/BulkActionView'
@@ -502,6 +503,7 @@ import eventBus from '@/config/eventBus'
 
 export default {
   name: 'LoadBalancing',
+  mixins: [mixinForm],
   components: {
     Status,
     TooltipButton,
@@ -798,7 +800,8 @@ export default {
 
       e.preventDefault()
       this.formRef.value.validate().then(() => {
-        const values = toRaw(this.form)
+        const formRaw = toRaw(this.form)
+        const values = this.handleRemoveFields(formRaw)
 
         api('createTags', {
           'tags[0].key': values.key,
@@ -962,7 +965,8 @@ export default {
       this.stickinessModalLoading = true
       e.preventDefault()
       this.formRef.value.validate().then(() => {
-        const values = toRaw(this.form)
+        const formRaw = toRaw(this.form)
+        const values = this.handleRemoveFields(formRaw)
         if (values.methodname === 'none') {
           this.handleDeleteStickinessPolicy()
           return

ui/src/views/network/UpdateNetwork.vue

@@ -127,10 +127,12 @@
 import { ref, reactive, toRaw } from 'vue'
 import { api } from '@/api'
 import { isAdmin } from '@/role'
+import { mixinForm } from '@/utils/mixin'
 import TooltipLabel from '@/components/widgets/TooltipLabel'
 
 export default {
   name: 'UpdateNetwork',
+  mixins: [mixinForm],
   components: {
     TooltipLabel
   },
@@ -225,7 +227,8 @@ export default {
       e.preventDefault()
       if (this.loading) return
       this.formRef.value.validate().then(() => {
-        const values = toRaw(this.form)
+        const formRaw = toRaw(this.form)
+        const values = this.handleRemoveFields(formRaw)
         this.loading = true
         var manualFields = ['name', 'networkofferingid']
         const params = {

ui/src/views/network/VpcTiersTab.vue

@@ -323,11 +323,13 @@
 <script>
 import { ref, reactive, toRaw } from 'vue'
 import { api } from '@/api'
+import { mixinForm } from '@/utils/mixin'
 import Status from '@/components/widgets/Status'
 import TooltipLabel from '@/components/widgets/TooltipLabel'
 
 export default {
   name: 'VpcTiersTab',
+  mixins: [mixinForm],
   components: {
     Status,
     TooltipLabel
@@ -635,7 +637,8 @@ export default {
       this.modalLoading = true
 
       this.formRef.value.validate().then(() => {
-        const values = toRaw(this.form)
+        const formRaw = toRaw(this.form)
+        const values = this.handleRemoveFields(formRaw)
 
         this.showCreateNetworkModal = false
         var params = {
@@ -679,7 +682,8 @@ export default {
       this.fetchLoading = true
       this.modalLoading = true
       this.formRef.value.validate().then(() => {
-        const values = toRaw(this.form)
+        const formRaw = toRaw(this.form)
+        const values = this.handleRemoveFields(formRaw)
 
         api('createLoadBalancer', {
           name: values.name,

ui/src/views/offering/AddComputeOffering.vue

@@ -601,11 +601,13 @@ import { ref, reactive, toRaw } from 'vue'
 import { api } from '@/api'
 import AddDiskOffering from '@/views/offering/AddDiskOffering'
 import { isAdmin } from '@/role'
+import { mixinForm } from '@/utils/mixin'
 import ResourceIcon from '@/components/view/ResourceIcon'
 import TooltipLabel from '@/components/widgets/TooltipLabel'
 
 export default {
   name: 'AddServiceOffering',
+  mixins: [mixinForm],
   components: {
     AddDiskOffering,
     ResourceIcon,
@@ -916,7 +918,8 @@ export default {
       e.preventDefault()
       if (this.loading) return
       this.formRef.value.validate().then(() => {
-        const values = toRaw(this.form)
+        const formRaw = toRaw(this.form)
+        const values = this.handleRemoveFields(formRaw)
         var params = {
           issystem: this.isSystem,
           name: values.name,

ui/src/views/offering/AddDiskOffering.vue

@@ -295,11 +295,13 @@
 import { api } from '@/api'
 import { reactive, ref, toRaw } from 'vue'
 import { isAdmin } from '@/role'
+import { mixinForm } from '@/utils/mixin'
 import ResourceIcon from '@/components/view/ResourceIcon'
 import TooltipLabel from '@/components/widgets/TooltipLabel'
 
 export default {
   name: 'AddDiskOffering',
+  mixins: [mixinForm],
   components: {
     ResourceIcon,
     TooltipLabel
@@ -446,7 +448,8 @@ export default {
       e.preventDefault()
       if (this.loading) return
       this.formRef.value.validate().then(() => {
-        const values = toRaw(this.form)
+        const formRaw = toRaw(this.form)
+        const values = this.handleRemoveFields(formRaw)
         var params = {
           isMirrored: false,
           name: values.name,

ui/src/views/offering/AddNetworkOffering.vue

@@ -452,12 +452,14 @@
 import { ref, reactive, toRaw } from 'vue'
 import { api } from '@/api'
 import { isAdmin } from '@/role'
+import { mixinForm } from '@/utils/mixin'
 import CheckBoxSelectPair from '@/components/CheckBoxSelectPair'
 import ResourceIcon from '@/components/view/ResourceIcon'
 import TooltipLabel from '@/components/widgets/TooltipLabel'
 
 export default {
   name: 'AddNetworkOffering',
+  mixins: [mixinForm],
   components: {
     CheckBoxSelectPair,
     ResourceIcon,
@@ -800,7 +802,8 @@ export default {
       e.preventDefault()
       if (this.loading) return
       this.formRef.value.validate().then(() => {
-        const values = toRaw(this.form)
+        const formRaw = toRaw(this.form)
+        const values = this.handleRemoveFields(formRaw)
         var params = {}
 
         var keys = Object.keys(values)

ui/src/views/offering/AddVpcOffering.vue

@@ -138,12 +138,14 @@
 import { ref, reactive, toRaw } from 'vue'
 import { api } from '@/api'
 import { isAdmin } from '@/role'
+import { mixinForm } from '@/utils/mixin'
 import CheckBoxSelectPair from '@/components/CheckBoxSelectPair'
 import ResourceIcon from '@/components/view/ResourceIcon'
 import TooltipLabel from '@/components/widgets/TooltipLabel'
 
 export default {
   name: 'AddVpcOffering',
+  mixins: [mixinForm],
   components: {
     CheckBoxSelectPair,
     ResourceIcon,
@@ -333,7 +335,8 @@ export default {
       e.preventDefault()
       if (this.loading) return
       this.formRef.value.validate().then(() => {
-        const values = toRaw(this.form)
+        const formRaw = toRaw(this.form)
+        const values = this.handleRemoveFields(formRaw)
         var params = {}
         params.name = values.name
         params.displaytext = values.displaytext

ui/src/views/offering/UpdateOfferingAccess.vue

@@ -89,10 +89,12 @@
 import { ref, reactive, toRaw } from 'vue'
 import { api } from '@/api'
 import { isAdmin } from '@/role'
+import { mixinForm } from '@/utils/mixin'
 import ResourceIcon from '@/components/view/ResourceIcon'
 
 export default {
   name: 'UpdateOfferingAccess',
+  mixins: [mixinForm],
   props: {
     resource: {
       type: Object,
@@ -257,7 +259,8 @@ export default {
       e.preventDefault()
       if (this.loading) return
       this.formRef.value.validate().then(() => {
-        const values = toRaw(this.form)
+        const formRaw = toRaw(this.form)
+        const values = this.handleRemoveFields(formRaw)
 
         const params = {}
         params.id = this.resource.id

ui/src/views/project/AddAccountOrUserToProject.vue

@@ -27,7 +27,7 @@
           :rules="rules"
           layout="vertical"
          >
-          <a-form-item name="" ref="">
+          <a-form-item name="account" ref="account">
             <template #label>
               <tooltip-label :title="$t('label.account')" :tooltip="apiParams.addAccountToProject.account.description"/>
             </template>
@@ -36,7 +36,7 @@
               :placeholder="apiParams.addAccountToProject.account.description"
               v-focus="true" />
           </a-form-item>
-          <a-form-item name="" ref="">
+          <a-form-item name="email" ref="email">
             <template #label>
               <tooltip-label :title="$t('label.email')" :tooltip="apiParams.addAccountToProject.email.description"/>
             </template>
@@ -44,7 +44,7 @@
               v-model:value="form.email"
               :placeholder="apiParams.addAccountToProject.email.description"></a-input>
           </a-form-item>
-          <a-form-item v-if="apiParams.addAccountToProject.projectroleid">
+          <a-form-item name="projectroleid" ref="projectroleid" v-if="apiParams.addAccountToProject.projectroleid">
             <template #label>
               <tooltip-label :title="$t('label.project.role')" :tooltip="apiParams.addAccountToProject.projectroleid.description"/>
             </template>
@@ -62,9 +62,9 @@
               </a-select-option>
             </a-select>
           </a-form-item>
-          <a-form-item v-if="apiParams.addAccountToProject.roletype">
+          <a-form-item name="roletype" ref="roletype" v-if="apiParams.addAccountToProject.roletype">
             <template #label>
-              <tooltip-label :title="$t('label.name')" :tooltip="apiParams.addAccountToProject.roletype.description"/>
+              <tooltip-label :title="$t('label.roletype')" :tooltip="apiParams.addAccountToProject.roletype.description"/>
             </template>
             <a-select
               v-model:value="form.roletype"

ui/src/views/storage/ChangeOfferingForVolume.vue

@@ -110,10 +110,12 @@
 <script>
 import { ref, reactive, toRaw } from 'vue'
 import { api } from '@/api'
+import { mixinForm } from '@/utils/mixin'
 import TooltipLabel from '@/components/widgets/TooltipLabel'
 
 export default {
   name: 'ChangeOfferingForVolume',
+  mixins: [mixinForm],
   props: {
     resource: {
       type: Object,
@@ -194,7 +196,8 @@ export default {
     submitChangeOfferingForVolume () {
       if (this.loading) return
       this.formRef.value.validate().then(() => {
-        const values = toRaw(this.form)
+        const formRaw = toRaw(this.form)
+        const values = this.handleRemoveFields(formRaw)
         this.loading = true
         const params = {}
         params.diskofferingid = values.diskofferingid

ui/src/views/storage/CreateVolume.vue

@@ -123,11 +123,13 @@
 <script>
 import { ref, reactive, toRaw } from 'vue'
 import { api } from '@/api'
+import { mixinForm } from '@/utils/mixin'
 import ResourceIcon from '@/components/view/ResourceIcon'
 import TooltipLabel from '@/components/widgets/TooltipLabel'
 
 export default {
   name: 'CreateVolume',
+  mixins: [mixinForm],
   components: {
     ResourceIcon,
     TooltipLabel
@@ -202,7 +204,8 @@ export default {
     handleSubmit (e) {
       if (this.loading) return
       this.formRef.value.validate().then(() => {
-        const values = toRaw(this.form)
+        const formRaw = toRaw(this.form)
+        const values = this.handleRemoveFields(formRaw)
         this.loading = true
         api('createVolume', values).then(response => {
           this.$pollJob({

ui/src/views/storage/FormSchedule.vue

@@ -195,10 +195,12 @@ import { ref, reactive, toRaw } from 'vue'
 import { api } from '@/api'
 import TooltipButton from '@/components/widgets/TooltipButton'
 import { timeZone } from '@/utils/timezone'
+import { mixinForm } from '@/utils/mixin'
 import debounce from 'lodash/debounce'
 
 export default {
   name: 'FormSchedule',
+  mixins: [mixinForm],
   components: {
     TooltipButton
   },
@@ -349,7 +351,8 @@ export default {
     handleSubmit (e) {
       if (this.actionLoading) return
       this.formRef.value.validate().then(() => {
-        const values = toRaw(this.form)
+        const formRaw = toRaw(this.form)
+        const values = this.handleRemoveFields(formRaw)
 
         let params = {}
         params.volumeid = this.volumeId

ui/src/views/storage/ResizeVolume.vue

@@ -57,9 +57,11 @@
 <script>
 import { ref, reactive, toRaw } from 'vue'
 import { api } from '@/api'
+import { mixinForm } from '@/utils/mixin'
 
 export default {
   name: 'ResizeVolume',
+  mixins: [mixinForm],
   props: {
     resource: {
       type: Object,
@@ -103,7 +105,8 @@ export default {
     handleSubmit (e) {
       if (this.loading) return
       this.formRef.value.validate().then(() => {
-        const values = toRaw(this.form)
+        const formRaw = toRaw(this.form)
+        const values = this.handleRemoveFields(formRaw)
         this.loading = true
         values.id = this.resource.id
         api('resizeVolume', values).then(response => {

ui/src/views/storage/TakeSnapshot.vue

@@ -104,10 +104,12 @@
 <script>
 import { ref, reactive, toRaw } from 'vue'
 import { api } from '@/api'
+import { mixinForm } from '@/utils/mixin'
 import TooltipButton from '@/components/widgets/TooltipButton'
 
 export default {
   name: 'TakeSnapshot',
+  mixins: [mixinForm],
   components: {
     TooltipButton
   },
@@ -155,7 +157,8 @@ export default {
       e.preventDefault()
       if (this.actionLoading) return
       this.formRef.value.validate().then(() => {
-        const values = toRaw(this.form)
+        const formRaw = toRaw(this.form)
+        const values = this.handleRemoveFields(formRaw)
 
         let params = {}
         params.volumeId = this.resource.id

ui/src/views/storage/UploadLocalVolume.vue

@@ -166,11 +166,13 @@
 import { ref, reactive, toRaw } from 'vue'
 import { api } from '@/api'
 import { axios } from '../../utils/request'
+import { mixinForm } from '@/utils/mixin'
 import ResourceIcon from '@/components/view/ResourceIcon'
 import TooltipLabel from '@/components/widgets/TooltipLabel'
 
 export default {
   name: 'UploadLocalVolume',
+  mixins: [mixinForm],
   components: {
     ResourceIcon,
     TooltipLabel
@@ -311,7 +313,8 @@ export default {
       e.preventDefault()
       if (this.loading) return
       this.formRef.value.validate().then(() => {
-        const values = toRaw(this.form)
+        const formRaw = toRaw(this.form)
+        const values = this.handleRemoveFields(formRaw)
         const params = {}
         for (const key in values) {
           const input = values[key]

ui/src/views/storage/UploadVolume.vue

@@ -158,11 +158,13 @@
 <script>
 import { ref, reactive, toRaw } from 'vue'
 import { api } from '@/api'
+import { mixinForm } from '@/utils/mixin'
 import ResourceIcon from '@/components/view/ResourceIcon'
 import TooltipLabel from '@/components/widgets/TooltipLabel'
 
 export default {
   name: 'UploadVolume',
+  mixins: [mixinForm],
   components: {
     ResourceIcon,
     TooltipLabel
@@ -279,7 +281,8 @@ export default {
       e.preventDefault()
       if (this.loading) return
       this.formRef.value.validate().then(() => {
-        const values = toRaw(this.form)
+        const formRaw = toRaw(this.form)
+        const values = this.handleRemoveFields(formRaw)
         const params = {}
         for (const key in values) {
           const input = values[key]