apache/cloudstack
1
0
Fork 0
mirror of https://github.com/apache/cloudstack.git synced 2025-11-02 11:52:28 +01:00
Code Issues Packages Projects Releases Wiki Activity

Fixed and enhanced vlan field validation in the UI (#10983)

Browse Source
This commit is contained in:
Erik Böck 2025-10-03 07:42:36 -03:00 committed by GitHub
parent b09f3e8ff7
commit 5a8a1e27e1
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
1 changed files with 46 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

57
ui/src/views/infra/zone/AdvancedGuestTrafficForm.vue
View File

@ -39,6 +39,7 @@
<a-form-item <a-form-item
name="vlanRangeStart" name="vlanRangeStart"
ref="vlanRangeStart" ref="vlanRangeStart"
:validate-status="validStatus"
has-feedback has-feedback
:style="{ display: 'inline-block', width: 'calc(50% - 12px)' }"> :style="{ display: 'inline-block', width: 'calc(50% - 12px)' }">
<a-input-number <a-input-number
@ -53,7 +54,6 @@
<a-form-item <a-form-item
name="vlanRangeEnd" name="vlanRangeEnd"
ref="vlanRangeEnd" ref="vlanRangeEnd"
has-feedback
:style="{ display: 'inline-block', width: 'calc(50% - 12px)' }"> :style="{ display: 'inline-block', width: 'calc(50% - 12px)' }">
<a-input-number <a-input-number
v-model:value="form.vlanRangeEnd" v-model:value="form.vlanRangeEnd"
@ -102,9 +102,24 @@ export default {
labelCol: { span: 8 }, labelCol: { span: 8 },
wrapperCol: { span: 12 } wrapperCol: { span: 12 }
}, },
validStatus: '', validStatus: 'error',
validMessage: '', validMessage: this.$t('message.error.vlan.range'),
formModel: {} formModel: {},
rangeLimits: {
VLAN: {
min: 1,
max: 4094
},
VXLAN: {
min: 4096,
max: 16777214
},
GRE: {
min: 0,
max: 4294967295
}
},
isolationMethod: ''
} }
}, },
watch: { watch: {
@ -120,6 +135,7 @@ export default {
this.initForm() this.initForm()
}, },
mounted () { mounted () {
this.getIsolationMethod()
this.fillValue() this.fillValue()
}, },
methods: { methods: {
@ -143,9 +159,15 @@ export default {
}) })
}, },
fillValue () { fillValue () {
this.form.vlanRangeStart = this.getPrefilled('vlanRangeStart') const vlanStart = this.getPrefilled('vlanRangeStart')
this.form.vlanRangeEnd = this.getPrefilled('vlanRangeEnd') const vlanEnd = this.getPrefilled('vlanRangeEnd')
this.form.vlanRangeStart = vlanStart
this.form.vlanRangeEnd = vlanEnd
this.formModel = toRaw(this.form) this.formModel = toRaw(this.form)
if (this.checkFromTo(vlanStart, vlanEnd)) {
this.validStatus = 'success'
this.validMessage = ''
}
}, },
getPrefilled (key) { getPrefilled (key) {
return this.prefillContent?.[key] || null return this.prefillContent?.[key] || null
@ -156,7 +178,7 @@ export default {
this.formRef.value.validate().then(() => { this.formRef.value.validate().then(() => {
const values = toRaw(this.form) const values = toRaw(this.form)
if (!values.vlanRangeStart || (values.vlanRangeEnd && !this.checkFromTo(values.vlanRangeStart, values.vlanRangeEnd))) { if (!this.checkFromTo(values.vlanRangeStart, values.vlanRangeEnd)) {
this.validStatus = 'error' this.validStatus = 'error'
this.validMessage = this.$t('message.error.vlan.range') this.validMessage = this.$t('message.error.vlan.range')
return return
@ -185,20 +207,31 @@ export default {
toVal = value toVal = value
fromVal = this.form[rule.compare] fromVal = this.form[rule.compare]
} }
if (fromVal && toVal && !this.checkFromTo(fromVal, toVal)) { if (!this.checkFromTo(fromVal, toVal)) {
this.validStatus = 'error' this.validStatus = 'error'
this.validMessage = this.$t('message.error.vlan.range') this.validMessage = this.$t('message.error.vlan.range')
} }
return Promise.resolve() return Promise.resolve()
}, },
checkFromTo (fromVal, toVal) { checkFromTo (fromVal, toVal) {
if (!fromVal) fromVal = 0 const vlanRange = this.rangeLimits[this.isolationMethod] ? this.rangeLimits[this.isolationMethod] : this.rangeLimits.VLAN
if (!toVal) toVal = 0 switch (true) {
if (fromVal > toVal) { case ((fromVal === null) || (toVal === null)):
case fromVal === toVal:
case fromVal > toVal:
case toVal > vlanRange.max:
case fromVal < vlanRange.min:
return false return false
} default:
this.validStatus = 'success'
this.validMessage = ''
return true return true
} }
},
getIsolationMethod () {
const phyNetworks = this.getPrefilled('physicalNetworks')
this.isolationMethod = phyNetworks[phyNetworks.length - 1].isolationMethod
}
} }
} }
</script> </script>