mirror of
https://github.com/harvester/harvester-ui-extension.git
synced 2025-12-13 13:11:43 +00:00
532b6c4d50
* 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>
536 lines
15 KiB
Vue
536 lines
15 KiB
Vue
<script>
|
|
import Tabbed from '@shell/components/Tabbed';
|
|
import Tab from '@shell/components/Tabbed/Tab';
|
|
import CruResource from '@shell/components/CruResource';
|
|
import { LabeledInput } from '@components/Form/LabeledInput';
|
|
import { RadioGroup } from '@components/Form/Radio';
|
|
import NameNsDescription from '@shell/components/form/NameNsDescription';
|
|
import LabeledSelect from '@shell/components/form/LabeledSelect';
|
|
import { HCI as HCI_LABELS_ANNOTATIONS } from '@pkg/harvester/config/labels-annotations';
|
|
import CreateEditView from '@shell/mixins/create-edit-view';
|
|
import { allHash } from '@shell/utils/promise';
|
|
import { HCI } from '../types';
|
|
import { NETWORK_TYPE, L2VLAN_MODE } from '../config/types';
|
|
import { removeObject } from '@shell/utils/array';
|
|
|
|
const {
|
|
L2VLAN, UNTAGGED, OVERLAY, L2TRUNK_VLAN
|
|
} = NETWORK_TYPE;
|
|
const { ACCESS, TRUNK } = L2VLAN_MODE;
|
|
|
|
const AUTO = 'auto';
|
|
const MANUAL = 'manual';
|
|
|
|
export default {
|
|
emits: ['update:value'],
|
|
|
|
components: {
|
|
Tab,
|
|
Tabbed,
|
|
CruResource,
|
|
LabeledInput,
|
|
NameNsDescription,
|
|
RadioGroup,
|
|
LabeledSelect,
|
|
},
|
|
|
|
mixins: [CreateEditView],
|
|
|
|
inheritAttrs: false,
|
|
|
|
props: {
|
|
value: {
|
|
type: Object,
|
|
required: true,
|
|
}
|
|
},
|
|
|
|
data() {
|
|
const config = JSON.parse(this.value.spec.config);
|
|
|
|
const annotations = this.value?.metadata?.annotations || {};
|
|
const layer3Network = JSON.parse(annotations[HCI_LABELS_ANNOTATIONS.NETWORK_ROUTE] || '{}');
|
|
|
|
const type = this.value.vlanType || L2VLAN ;
|
|
|
|
return {
|
|
config,
|
|
type,
|
|
l2VlanMode: this.value.vlanType === L2TRUNK_VLAN ? TRUNK : ACCESS,
|
|
vlanTrunk: this.parseVlanTrunk(config),
|
|
layer3Network: {
|
|
mode: layer3Network.mode || AUTO,
|
|
serverIPAddr: layer3Network.serverIPAddr || '',
|
|
cidr: layer3Network.cidr || '',
|
|
gateway: layer3Network.gateway || '',
|
|
},
|
|
};
|
|
},
|
|
|
|
async fetch() {
|
|
const inStore = this.$store.getters['currentProduct'].inStore;
|
|
|
|
await allHash({ clusterNetworks: this.$store.dispatch(`${ inStore }/findAll`, { type: HCI.CLUSTER_NETWORK }) });
|
|
},
|
|
|
|
created() {
|
|
if (this.registerBeforeHook) {
|
|
this.registerBeforeHook(this.updateBeforeSave);
|
|
}
|
|
},
|
|
|
|
computed: {
|
|
clusterBridge: {
|
|
get() {
|
|
if (!this.config.bridge) {
|
|
return '';
|
|
}
|
|
|
|
// remove -br suffix if exists
|
|
return this.config?.bridge?.endsWith('-br') ? this.config.bridge.slice(0, -3) : '';
|
|
},
|
|
|
|
set(neu) {
|
|
if (neu === '') {
|
|
this.config.bridge = '';
|
|
|
|
return;
|
|
}
|
|
|
|
if (!neu.endsWith('-br')) {
|
|
this.config.bridge = `${ neu }-br`;
|
|
} else {
|
|
this.config.bridge = neu;
|
|
}
|
|
}
|
|
},
|
|
modeOptions() {
|
|
return [{
|
|
label: this.t('harvester.network.layer3Network.mode.auto'),
|
|
value: AUTO,
|
|
}, {
|
|
label: this.t('harvester.network.layer3Network.mode.manual'),
|
|
value: MANUAL,
|
|
}];
|
|
},
|
|
|
|
l2VlanTrunkModeFeatureEnabled() {
|
|
return this.$store.getters['harvester-common/getFeatureEnabled']('l2VlanTrunkMode');
|
|
},
|
|
|
|
kubeovnVpcSubnetSupport() {
|
|
return this.$store.getters['harvester-common/getFeatureEnabled']('kubeovnVpcSubnet');
|
|
},
|
|
|
|
longhornV2LVMSupport() {
|
|
return this.$store.getters['harvester-common/getFeatureEnabled']('longhornV2LVMSupport');
|
|
},
|
|
|
|
clusterNetworkOptions() {
|
|
const inStore = this.$store.getters['currentProduct'].inStore;
|
|
const clusterNetworks = this.$store.getters[`${ inStore }/all`](HCI.CLUSTER_NETWORK) || [];
|
|
|
|
return clusterNetworks.map((n) => {
|
|
const disabled = !n.isReady;
|
|
|
|
return {
|
|
label: disabled ? `${ n.id } (${ this.t('generic.notReady') })` : n.id,
|
|
value: n.id,
|
|
disabled,
|
|
};
|
|
});
|
|
},
|
|
|
|
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];
|
|
|
|
if (this.kubeovnVpcSubnetSupport) {
|
|
types.push(OVERLAY);
|
|
}
|
|
|
|
return types;
|
|
},
|
|
|
|
isL2VlanNetwork() {
|
|
if (this.isView) {
|
|
return this.value.vlanType === L2VLAN;
|
|
}
|
|
|
|
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;
|
|
}
|
|
|
|
return this.type === OVERLAY;
|
|
},
|
|
|
|
isUntaggedNetwork() {
|
|
if (this.isView) {
|
|
return this.value.vlanType === UNTAGGED;
|
|
}
|
|
|
|
return this.type === UNTAGGED;
|
|
}
|
|
},
|
|
|
|
watch: {
|
|
type(newType) {
|
|
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 { // l2vlan or untagged network configuration
|
|
this.config.type = 'bridge';
|
|
this.config.promiscMode = true;
|
|
this.config.ipam = {};
|
|
this.config.bridge = '';
|
|
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: {
|
|
async saveNetwork(buttonCb) {
|
|
const errors = [];
|
|
|
|
if (this.isL2VlanNetwork || 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') }));
|
|
}
|
|
|
|
if (!this.config.bridge) {
|
|
errors.push(this.$store.getters['i18n/t']('validation.required', { key: this.t('harvester.network.clusterNetwork.label') }));
|
|
}
|
|
|
|
if (this.layer3Network.mode === MANUAL) {
|
|
if (!this.layer3Network.gateway) {
|
|
errors.push(this.$store.getters['i18n/t']('validation.required', { key: this.t('harvester.network.layer3Network.gateway.label') }));
|
|
}
|
|
if (!this.layer3Network.cidr) {
|
|
errors.push(this.$store.getters['i18n/t']('validation.required', { key: this.t('harvester.network.layer3Network.cidr.label') }));
|
|
}
|
|
}
|
|
|
|
if (errors.length > 0) {
|
|
buttonCb(false);
|
|
this.errors = errors;
|
|
|
|
return false;
|
|
}
|
|
this.value.setAnnotation(HCI_LABELS_ANNOTATIONS.NETWORK_ROUTE, JSON.stringify(this.layer3Network));
|
|
}
|
|
|
|
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 = '';
|
|
|
|
return;
|
|
}
|
|
const newValue = Number(neu);
|
|
|
|
if (newValue > 4094) {
|
|
this.config.vlan = 4094;
|
|
} else if (newValue < 1) {
|
|
this.config.vlan = 1;
|
|
} else {
|
|
this.config.vlan = newValue;
|
|
}
|
|
},
|
|
|
|
updateBeforeSave() {
|
|
this.config.name = this.value.metadata.name;
|
|
|
|
if (this.isOverlayNetwork) {
|
|
this.config.provider = `${ this.value.metadata.name }.${ this.value.metadata.namespace }.ovn`;
|
|
delete this.config.bridge;
|
|
delete this.config.promiscMode;
|
|
delete this.config.vlan;
|
|
delete this.config.ipam;
|
|
}
|
|
|
|
if (this.isUntaggedNetwork) {
|
|
delete this.config.vlan;
|
|
}
|
|
|
|
this.value.spec.config = JSON.stringify({ ...this.config });
|
|
},
|
|
}
|
|
};
|
|
</script>
|
|
|
|
<template>
|
|
<CruResource
|
|
:done-route="doneRoute"
|
|
:resource="value"
|
|
:mode="mode"
|
|
:errors="errors"
|
|
:apply-hooks="applyHooks"
|
|
@finish="saveNetwork"
|
|
@error="e=>errors=e"
|
|
>
|
|
<NameNsDescription
|
|
ref="nd"
|
|
:value="value"
|
|
:mode="mode"
|
|
@update:value="$emit('update:value', $event)"
|
|
/>
|
|
<Tabbed
|
|
v-bind="$attrs"
|
|
class="mt-15"
|
|
:side-tabs="true"
|
|
>
|
|
<Tab
|
|
name="basics"
|
|
:label="t('harvester.network.tabs.basics')"
|
|
:weight="99"
|
|
class="bordered-table"
|
|
>
|
|
<LabeledSelect
|
|
v-model:value="type"
|
|
class="mb-20"
|
|
:options="networkTypes"
|
|
:mode="mode"
|
|
:disabled="isEdit"
|
|
:label="t('harvester.fields.type')"
|
|
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="isL2VlanAccessMode"
|
|
v-model:value.number="config.vlan"
|
|
class="mb-20"
|
|
required
|
|
type="number"
|
|
placeholder="e.g. 1-4094"
|
|
:label="t('tableHeaders.networkVlan')"
|
|
:mode="mode"
|
|
@update:value="input"
|
|
/>
|
|
<LabeledSelect
|
|
v-if="!isOverlayNetwork"
|
|
v-model:value="clusterBridge"
|
|
class="mb-20"
|
|
:label="t('harvester.network.clusterNetwork.label')"
|
|
required
|
|
:disabled="isEdit"
|
|
:options="clusterNetworkOptions"
|
|
:mode="mode"
|
|
:placeholder="t('harvester.network.clusterNetwork.selectPlaceholder')"
|
|
/>
|
|
</Tab>
|
|
<Tab
|
|
v-if="isL2VlanAccessMode"
|
|
name="layer3Network"
|
|
:label="t('harvester.network.tabs.layer3Network')"
|
|
:weight="98"
|
|
class="bordered-table"
|
|
>
|
|
<div class="row mt-10">
|
|
<div class="col span-6">
|
|
<RadioGroup
|
|
v-model:value="layer3Network.mode"
|
|
name="layer3NetworkMode"
|
|
:label="t('harvester.network.layer3Network.mode.label')"
|
|
:mode="mode"
|
|
:options="modeOptions"
|
|
/>
|
|
</div>
|
|
</div>
|
|
<div
|
|
v-if="layer3Network.mode === 'auto'"
|
|
class="row mt-10"
|
|
>
|
|
<div class="col span-6">
|
|
<LabeledInput
|
|
v-model:value="layer3Network.serverIPAddr"
|
|
class="mb-20"
|
|
:label="t('harvester.network.layer3Network.serverIPAddr.label')"
|
|
:mode="mode"
|
|
/>
|
|
</div>
|
|
</div>
|
|
<div
|
|
v-else
|
|
class="row mt-10"
|
|
>
|
|
<div class="col span-6">
|
|
<LabeledInput
|
|
v-model:value="layer3Network.cidr"
|
|
class="mb-20"
|
|
:label="t('harvester.network.layer3Network.cidr.label')"
|
|
:placeholder="t('harvester.network.layer3Network.cidr.placeholder')"
|
|
:mode="mode"
|
|
required
|
|
/>
|
|
</div>
|
|
<div class="col span-6">
|
|
<LabeledInput
|
|
v-model:value="layer3Network.gateway"
|
|
class="mb-20"
|
|
:label="t('harvester.network.layer3Network.gateway.label')"
|
|
:placeholder="t('harvester.network.layer3Network.gateway.placeholder')"
|
|
:mode="mode"
|
|
required
|
|
/>
|
|
</div>
|
|
</div>
|
|
</Tab>
|
|
</Tabbed>
|
|
</CruResource>
|
|
</template>
|
|
|
|
<style lang="scss" scoped>
|
|
.remove-btn {
|
|
align-self: center;
|
|
}
|
|
.trunk-span{
|
|
flex: 5;
|
|
}
|
|
</style>
|