mirror of
https://github.com/harvester/harvester-ui-extension.git
synced 2026-10-01 03:36:04 +08:00
feat: add access / trunk mode in create VM network page (#510)
* feat: add l2VlanTrunkMode feature Signed-off-by: Andy Lee <andy.lee@suse.com> * refactor: remove unneeded code Signed-off-by: Andy Lee <andy.lee@suse.com> * refactor: fix edit l2vlan trunk mode edit page Signed-off-by: Andy Lee <andy.lee@suse.com> * fix: hide Route tab when trunk mode Signed-off-by: Andy Lee <andy.lee@suse.com> --------- Signed-off-by: Andy Lee <andy.lee@suse.com>
This commit is contained in:
Andy Lee
@@ -10,9 +10,13 @@ import { HCI as HCI_LABELS_ANNOTATIONS } from '@pkg/harvester/config/labels-anno
|
||||
import CreateEditView from '@shell/mixins/create-edit-view';
|
||||
import { allHash } from '@shell/utils/promise';
|
||||
import { HCI } from '../types';
|
||||
import { NETWORK_TYPE } from '../config/types';
|
||||
import { NETWORK_TYPE, L2VLAN_MODE } from '../config/types';
|
||||
import { removeObject } from '@shell/utils/array';
|
||||
|
||||
const { L2VLAN, UNTAGGED, OVERLAY } = NETWORK_TYPE;
|
||||
const {
|
||||
L2VLAN, UNTAGGED, OVERLAY, L2TRUNK_VLAN
|
||||
} = NETWORK_TYPE;
|
||||
const { ACCESS, TRUNK } = L2VLAN_MODE;
|
||||
|
||||
const AUTO = 'auto';
|
||||
const MANUAL = 'manual';
|
||||
@@ -52,6 +56,8 @@ export default {
|
||||
return {
|
||||
config,
|
||||
type,
|
||||
l2VlanMode: this.value.vlanType === L2TRUNK_VLAN ? TRUNK : ACCESS,
|
||||
vlanTrunk: this.parseVlanTrunk(config),
|
||||
layer3Network: {
|
||||
mode: layer3Network.mode || AUTO,
|
||||
serverIPAddr: layer3Network.serverIPAddr || '',
|
||||
@@ -108,6 +114,10 @@ export default {
|
||||
}];
|
||||
},
|
||||
|
||||
l2VlanTrunkModeFeatureEnabled() {
|
||||
return this.$store.getters['harvester-common/getFeatureEnabled']('l2VlanTrunkMode');
|
||||
},
|
||||
|
||||
kubeovnVpcSubnetSupport() {
|
||||
return this.$store.getters['harvester-common/getFeatureEnabled']('kubeovnVpcSubnet');
|
||||
},
|
||||
@@ -131,6 +141,16 @@ export default {
|
||||
});
|
||||
},
|
||||
|
||||
l2VlanModeOptions() {
|
||||
return [{
|
||||
label: this.t('harvester.vlanStatus.vlanConfig.l2VlanMode.access'),
|
||||
value: ACCESS,
|
||||
}, {
|
||||
label: this.t('harvester.vlanStatus.vlanConfig.l2VlanMode.trunk'),
|
||||
value: TRUNK,
|
||||
}];
|
||||
},
|
||||
|
||||
networkTypes() {
|
||||
const types = [L2VLAN, UNTAGGED];
|
||||
|
||||
@@ -149,6 +169,22 @@ export default {
|
||||
return this.type === L2VLAN;
|
||||
},
|
||||
|
||||
isL2VlanTrunkMode() {
|
||||
if (this.isView) {
|
||||
return this.value.vlanType === L2VLAN && this.l2VlanMode === TRUNK;
|
||||
}
|
||||
|
||||
return this.type === L2VLAN && this.l2VlanMode === TRUNK;
|
||||
},
|
||||
|
||||
isL2VlanAccessMode() {
|
||||
if (this.isView) {
|
||||
return this.value.vlanType === L2VLAN && this.l2VlanMode === ACCESS;
|
||||
}
|
||||
|
||||
return this.type === L2VLAN && this.l2VlanMode === ACCESS;
|
||||
},
|
||||
|
||||
isOverlayNetwork() {
|
||||
if (this.isView) {
|
||||
return this.value.vlanType === OVERLAY;
|
||||
@@ -168,11 +204,11 @@ export default {
|
||||
|
||||
watch: {
|
||||
type(newType) {
|
||||
if (newType === OVERLAY) {
|
||||
if (newType === OVERLAY) { // overlay network configuration
|
||||
this.config.type = 'kube-ovn';
|
||||
this.config.provider = `${ this.value.metadata.name }.${ this.value.metadata.namespace }.ovn`;
|
||||
this.config.server_socket = '/run/openvswitch/kube-ovn-daemon.sock';
|
||||
} else {
|
||||
} else { // l2vlan or untagged network configuration
|
||||
this.config.type = 'bridge';
|
||||
this.config.promiscMode = true;
|
||||
this.config.ipam = {};
|
||||
@@ -180,7 +216,20 @@ export default {
|
||||
delete this.config.provider;
|
||||
delete this.config.server_socket;
|
||||
}
|
||||
}
|
||||
},
|
||||
l2VlanMode(newAccessMode) {
|
||||
if (this.type !== L2VLAN) {
|
||||
return;
|
||||
}
|
||||
|
||||
if (newAccessMode === TRUNK) { // trunk mode
|
||||
this.config.vlan = 0;
|
||||
this.config.vlanTrunk = this.vlanTrunk;
|
||||
} else { // access mode
|
||||
delete this.config.vlanTrunk;
|
||||
this.config.vlan = '';
|
||||
}
|
||||
},
|
||||
},
|
||||
|
||||
methods: {
|
||||
@@ -188,7 +237,15 @@ export default {
|
||||
const errors = [];
|
||||
|
||||
if (this.isL2VlanNetwork || this.isUntaggedNetwork) {
|
||||
if (!this.config.vlan && !this.isUntaggedNetwork) {
|
||||
if (this.isL2VlanTrunkMode && this.vlanTrunk.some((trunk) => trunk.minID === '')) {
|
||||
errors.push(this.$store.getters['i18n/t']('validation.required', { key: this.t('harvester.vlanStatus.vlanConfig.vlanTrunk.minId') }));
|
||||
}
|
||||
|
||||
if (this.isL2VlanTrunkMode && this.vlanTrunk.some((trunk) => trunk.maxID === '')) {
|
||||
errors.push(this.$store.getters['i18n/t']('validation.required', { key: this.t('harvester.vlanStatus.vlanConfig.vlanTrunk.maxId') }));
|
||||
}
|
||||
|
||||
if (this.isL2VlanAccessMode && !this.config.vlan && !this.isUntaggedNetwork) {
|
||||
errors.push(this.$store.getters['i18n/t']('validation.required', { key: this.t('tableHeaders.networkVlan') }));
|
||||
}
|
||||
|
||||
@@ -217,6 +274,30 @@ export default {
|
||||
await this.save(buttonCb);
|
||||
},
|
||||
|
||||
parseVlanTrunk(config) {
|
||||
if (config?.vlanTrunk && config?.vlanTrunk?.length > 0) {
|
||||
return config.vlanTrunk;
|
||||
}
|
||||
|
||||
return [{ minID: '', maxID: '' }];
|
||||
},
|
||||
|
||||
removeVlanTrunk(trunk) {
|
||||
removeObject(this.vlanTrunk, trunk);
|
||||
},
|
||||
|
||||
addVlanTrunk() {
|
||||
if (!this.config.vlanTrunk) {
|
||||
this.config.vlanTrunk = [];
|
||||
}
|
||||
this.vlanTrunk.push({ minID: this.minId, maxID: this.maxId });
|
||||
this.config.vlanTrunk = this.vlanTrunk;
|
||||
},
|
||||
|
||||
vlanTrunkChange() {
|
||||
this.config.vlanTrunk = this.vlanTrunk;
|
||||
},
|
||||
|
||||
input(neu) {
|
||||
if (neu === '') {
|
||||
this.config.vlan = '';
|
||||
@@ -292,8 +373,76 @@ export default {
|
||||
required
|
||||
/>
|
||||
|
||||
<LabeledSelect
|
||||
v-if="isL2VlanNetwork && l2VlanTrunkModeFeatureEnabled"
|
||||
v-model:value="l2VlanMode"
|
||||
class="mb-20"
|
||||
:options="l2VlanModeOptions"
|
||||
:mode="mode"
|
||||
:disabled="isEdit"
|
||||
:label="t('harvester.vlanStatus.vlanConfig.l2VlanMode.label')"
|
||||
required
|
||||
/>
|
||||
<div v-if="isL2VlanTrunkMode && l2VlanTrunkModeFeatureEnabled">
|
||||
<div
|
||||
v-for="(trunk, i) in vlanTrunk"
|
||||
:key="i"
|
||||
>
|
||||
<div class="row mt-10">
|
||||
<div class="col trunk-span">
|
||||
<LabeledInput
|
||||
v-model:value.number="trunk.minID"
|
||||
class="mb-20"
|
||||
required
|
||||
placeholder="e.g. 1-4094"
|
||||
:min="1"
|
||||
:max="4094"
|
||||
type="number"
|
||||
:label="t('harvester.vlanStatus.vlanConfig.vlanTrunk.minId')"
|
||||
:mode="mode"
|
||||
@update:value="vlanTrunkChange"
|
||||
/>
|
||||
</div>
|
||||
<div class="col trunk-span">
|
||||
<LabeledInput
|
||||
v-model:value.number="trunk.maxID"
|
||||
class="mb-20"
|
||||
:max="4094"
|
||||
:min="1"
|
||||
placeholder="e.g. 1-4094"
|
||||
required
|
||||
type="number"
|
||||
:label="t('harvester.vlanStatus.vlanConfig.vlanTrunk.maxId')"
|
||||
:mode="mode"
|
||||
@update:value="vlanTrunkChange"
|
||||
/>
|
||||
</div>
|
||||
<div class="col remove-btn mb-20">
|
||||
<button
|
||||
type="button"
|
||||
:disabled="isView || vlanTrunk.length <= 1"
|
||||
:aria-label="t('generic.ariaLabel.remove', {index: i+1})"
|
||||
role="button"
|
||||
class="btn role-link"
|
||||
@click="removeVlanTrunk(trunk)"
|
||||
>
|
||||
{{ t('harvester.fields.remove') }}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<button
|
||||
v-if="isL2VlanTrunkMode"
|
||||
type="button"
|
||||
class="btn btn-sm bg-primary mb-20"
|
||||
:disabled="isView"
|
||||
@click="addVlanTrunk"
|
||||
>
|
||||
{{ t('harvester.vlanStatus.vlanConfig.vlanTrunk.add') }}
|
||||
</button>
|
||||
</div>
|
||||
<LabeledInput
|
||||
v-if="isL2VlanNetwork"
|
||||
v-if="isL2VlanAccessMode"
|
||||
v-model:value.number="config.vlan"
|
||||
class="mb-20"
|
||||
required
|
||||
@@ -316,7 +465,7 @@ export default {
|
||||
/>
|
||||
</Tab>
|
||||
<Tab
|
||||
v-if="isL2VlanNetwork"
|
||||
v-if="isL2VlanAccessMode"
|
||||
name="layer3Network"
|
||||
:label="t('harvester.network.tabs.layer3Network')"
|
||||
:weight="98"
|
||||
@@ -375,3 +524,12 @@ export default {
|
||||
</Tabbed>
|
||||
</CruResource>
|
||||
</template>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.remove-btn {
|
||||
align-self: center;
|
||||
}
|
||||
.trunk-span{
|
||||
flex: 5;
|
||||
}
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user