mirror of
https://github.com/harvester/harvester-ui-extension.git
synced 2026-10-01 03:36:04 +08:00
Add pkg/harvester components + shell portings - 1
Signed-off-by: Francesco Torchia <francesco.torchia@suse.com>
This commit is contained in:
Francesco Torchia
+41
@@ -0,0 +1,41 @@
|
||||
import { mount } from '@vue/test-utils';
|
||||
import HarvesterEditNetwork from '../base.vue';
|
||||
import { _EDIT } from '@shell/config/query-params';
|
||||
|
||||
describe('component: HarvesterEditNetwork', () => {
|
||||
// eslint-disable-next-line jest/no-commented-out-tests
|
||||
// it('should display all the inputs', () => {
|
||||
// const wrapper = mount(HarvesterEditNetwork, { propsData: { mode: _EDIT } });
|
||||
|
||||
// const inputWraps = wrapper.findAll('[data-testid^=input-hen-]');
|
||||
|
||||
// expect(inputWraps).toHaveLength(5);
|
||||
// });
|
||||
|
||||
it.each([
|
||||
'name',
|
||||
])('should emit an update on %p input', (field) => {
|
||||
const wrapper = mount(HarvesterEditNetwork, { propsData: { mode: _EDIT } });
|
||||
const input = wrapper.find(`[data-testid="input-hen-${ field }"]`).find('input');
|
||||
const newValue = 123;
|
||||
|
||||
input.setValue(newValue);
|
||||
|
||||
expect(wrapper.emitted('update')).toHaveLength(1);
|
||||
});
|
||||
|
||||
it.each([
|
||||
'model',
|
||||
'networkName',
|
||||
'type',
|
||||
])('should emit an update on %p selection change', async(field) => {
|
||||
const wrapper = mount(HarvesterEditNetwork, { propsData: { mode: _EDIT } });
|
||||
const select = wrapper.find(`[data-testid="input-hen-${ field }"]`);
|
||||
|
||||
select.find('button').trigger('click');
|
||||
await wrapper.trigger('keydown.down');
|
||||
await wrapper.trigger('keydown.enter');
|
||||
|
||||
expect(wrapper.emitted('update')).toHaveLength(1);
|
||||
});
|
||||
});
|
||||
@@ -0,0 +1,306 @@
|
||||
<script>
|
||||
import InputOrDisplay from '@shell/components/InputOrDisplay';
|
||||
import { LabeledInput } from '@components/Form/LabeledInput';
|
||||
import LabeledSelect from '@shell/components/form/LabeledSelect';
|
||||
|
||||
import { clone } from '@shell/utils/object';
|
||||
import { _CREATE, _VIEW } from '@shell/config/query-params';
|
||||
import { MANAGEMENT_NETWORK } from '../../../mixins/harvester-vm';
|
||||
|
||||
const MODEL = [{
|
||||
label: 'virtio',
|
||||
value: 'virtio'
|
||||
}, {
|
||||
label: 'e1000',
|
||||
value: 'e1000'
|
||||
}, {
|
||||
label: 'e1000e',
|
||||
value: 'e1000e'
|
||||
}, {
|
||||
label: 'ne2k_pci',
|
||||
value: 'ne2k_pci'
|
||||
}, {
|
||||
label: 'pcnet',
|
||||
value: 'pcnet'
|
||||
}, {
|
||||
label: 'rtl8139',
|
||||
value: 'rtl8139'
|
||||
}];
|
||||
|
||||
export default {
|
||||
name: 'HarvesterEditNetwork',
|
||||
components: {
|
||||
LabeledInput, LabeledSelect, InputOrDisplay
|
||||
},
|
||||
|
||||
props: {
|
||||
value: {
|
||||
type: Object,
|
||||
default: () => {
|
||||
return {};
|
||||
}
|
||||
},
|
||||
|
||||
networkOption: {
|
||||
type: Array,
|
||||
default: () => {
|
||||
return [];
|
||||
}
|
||||
},
|
||||
|
||||
rows: {
|
||||
type: Array,
|
||||
default: () => {
|
||||
return [];
|
||||
}
|
||||
},
|
||||
|
||||
mode: {
|
||||
type: String,
|
||||
default: 'create'
|
||||
},
|
||||
|
||||
isSingle: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
}
|
||||
},
|
||||
|
||||
data() {
|
||||
const isMasquerade = this.value.isPod;
|
||||
|
||||
if (isMasquerade) {
|
||||
this.value.networkName = MANAGEMENT_NETWORK;
|
||||
}
|
||||
|
||||
return {
|
||||
isMasquerade,
|
||||
hasManagementNetwork: false,
|
||||
showAdvanced: false,
|
||||
};
|
||||
},
|
||||
|
||||
computed: {
|
||||
isDisabled() {
|
||||
return this.isMasquerade && !this.value.newCreateId && !this.isCreate;
|
||||
},
|
||||
|
||||
isView() {
|
||||
return this.mode === _VIEW;
|
||||
},
|
||||
|
||||
isCreate() {
|
||||
return this.mode === _CREATE;
|
||||
},
|
||||
|
||||
modelOption() {
|
||||
return MODEL;
|
||||
},
|
||||
|
||||
allNetworkOption() {
|
||||
const vlanNetwork = clone(this.networkOption);
|
||||
const managementNetwork = [{
|
||||
label: MANAGEMENT_NETWORK,
|
||||
value: MANAGEMENT_NETWORK
|
||||
}];
|
||||
|
||||
if (this.value.newCreateId && this.hasManagementNetwork) {
|
||||
return vlanNetwork;
|
||||
} else if (this.value.newCreateId && !this.hasManagementNetwork) {
|
||||
return [...managementNetwork, ...vlanNetwork];
|
||||
} else if (this.isMasquerade) {
|
||||
return managementNetwork;
|
||||
} else {
|
||||
return vlanNetwork;
|
||||
}
|
||||
},
|
||||
|
||||
typeOption() {
|
||||
const masquerade = [{
|
||||
label: 'masquerade',
|
||||
value: 'masquerade'
|
||||
}, {
|
||||
label: 'bridge',
|
||||
value: 'bridge'
|
||||
}];
|
||||
|
||||
const other = [{
|
||||
label: 'bridge',
|
||||
value: 'bridge'
|
||||
}];
|
||||
|
||||
return this.isMasquerade ? masquerade : other;
|
||||
}
|
||||
},
|
||||
|
||||
watch: {
|
||||
rows: {
|
||||
handler(neu) {
|
||||
const hasManagementNetwork = !!neu.some(N => N.isPod);
|
||||
|
||||
this.$set(this, 'hasManagementNetwork', hasManagementNetwork);
|
||||
},
|
||||
immediate: true,
|
||||
deep: true
|
||||
},
|
||||
|
||||
isSingle(neu) {
|
||||
if (!neu) {
|
||||
this.$set(this.value, 'macAddress', '');
|
||||
this.update();
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
methods: {
|
||||
/**
|
||||
* Patch k8s value based on type of network
|
||||
*/
|
||||
updateNetworkName(neu) {
|
||||
if (neu === MANAGEMENT_NETWORK) {
|
||||
this.value.isPod = true;
|
||||
this.value.macAddress = '';
|
||||
} else {
|
||||
this.value.isPod = false;
|
||||
}
|
||||
|
||||
this.$set(this, 'isMasquerade', this.value.isPod);
|
||||
|
||||
if (this.value.isPod) {
|
||||
this.value.type = 'masquerade';
|
||||
} else {
|
||||
this.value.type = 'bridge';
|
||||
}
|
||||
this.update();
|
||||
},
|
||||
|
||||
update() {
|
||||
this.$emit('update');
|
||||
},
|
||||
|
||||
toggleAdvanced() {
|
||||
this.showAdvanced = !this.showAdvanced;
|
||||
},
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div>
|
||||
<div class="row mb-20">
|
||||
<div
|
||||
data-testid="input-hen-name"
|
||||
class="col span-6"
|
||||
>
|
||||
<InputOrDisplay
|
||||
:name="t('harvester.fields.name')"
|
||||
:value="value.name"
|
||||
:mode="mode"
|
||||
>
|
||||
<LabeledInput
|
||||
v-model="value.name"
|
||||
:label="t('harvester.fields.name')"
|
||||
required
|
||||
:mode="mode"
|
||||
:disabled="isDisabled"
|
||||
@input="update"
|
||||
/>
|
||||
</InputOrDisplay>
|
||||
</div>
|
||||
|
||||
<div
|
||||
data-testid="input-hen-model"
|
||||
class="col span-6"
|
||||
>
|
||||
<InputOrDisplay
|
||||
:name="t('harvester.fields.model')"
|
||||
:value="value.model"
|
||||
:mode="mode"
|
||||
>
|
||||
<LabeledSelect
|
||||
v-model="value.model"
|
||||
:label="t('harvester.fields.model')"
|
||||
:disabled="isDisabled"
|
||||
:options="modelOption"
|
||||
:mode="mode"
|
||||
required
|
||||
@input="update"
|
||||
/>
|
||||
</InputOrDisplay>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row" :class="{'mb-20': !isMasquerade}">
|
||||
<div
|
||||
data-testid="input-hen-networkName"
|
||||
class="col span-6"
|
||||
>
|
||||
<InputOrDisplay
|
||||
:name="t('harvester.fields.network')"
|
||||
:value="value.networkName"
|
||||
:mode="mode"
|
||||
>
|
||||
<LabeledSelect
|
||||
v-model="value.networkName"
|
||||
:label="t('harvester.fields.network')"
|
||||
:options="allNetworkOption"
|
||||
:mode="mode"
|
||||
required
|
||||
:disabled="isDisabled"
|
||||
@input="updateNetworkName"
|
||||
/>
|
||||
</InputOrDisplay>
|
||||
</div>
|
||||
|
||||
<div
|
||||
data-testid="input-hen-type"
|
||||
class="col span-6"
|
||||
>
|
||||
<InputOrDisplay
|
||||
:name="t('harvester.fields.type')"
|
||||
:value="value.type"
|
||||
:mode="mode"
|
||||
>
|
||||
<LabeledSelect
|
||||
v-model="value.type"
|
||||
:label="t('harvester.fields.type')"
|
||||
:options="typeOption"
|
||||
:mode="mode"
|
||||
required
|
||||
@input="update"
|
||||
/>
|
||||
</InputOrDisplay>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div v-if="!isMasquerade && isSingle">
|
||||
<div class="row mb-20">
|
||||
<a role="button" @click="toggleAdvanced">
|
||||
{{ showAdvanced ? t('harvester.generic.hideMore') : t('harvester.generic.showMore') }}
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<div class="row">
|
||||
<div
|
||||
v-if="showAdvanced"
|
||||
data-testid="input-hen-macAddress"
|
||||
class="col span-6"
|
||||
>
|
||||
<InputOrDisplay
|
||||
:name="t('harvester.fields.macAddress')"
|
||||
:value="value.macAddress"
|
||||
:mode="mode"
|
||||
>
|
||||
<LabeledInput
|
||||
v-model="value.macAddress"
|
||||
label-key="harvester.fields.macAddress"
|
||||
:mode="mode"
|
||||
:tooltip="t('harvester.virtualMachine.volume.macTip')"
|
||||
@input="update"
|
||||
/>
|
||||
</InputOrDisplay>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
@@ -0,0 +1,165 @@
|
||||
<script>
|
||||
import InfoBox from '@shell/components/InfoBox';
|
||||
import Base from './base';
|
||||
|
||||
import { NETWORK_ATTACHMENT } from '@shell/config/types';
|
||||
import { HCI as HCI_ANNOTATIONS } from '../../../config/labels-annotations';
|
||||
import { sortBy } from '@shell/utils/sort';
|
||||
import { clone } from '@shell/utils/object';
|
||||
import { randomStr } from '@shell/utils/string';
|
||||
import { removeObject } from '@shell/utils/array';
|
||||
import { _VIEW } from '@shell/config/query-params';
|
||||
|
||||
export default {
|
||||
components: { InfoBox, Base },
|
||||
|
||||
props: {
|
||||
mode: {
|
||||
type: String,
|
||||
default: 'create'
|
||||
},
|
||||
|
||||
value: {
|
||||
type: Array,
|
||||
default: () => {
|
||||
return [];
|
||||
}
|
||||
},
|
||||
|
||||
isSingle: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
}
|
||||
},
|
||||
|
||||
data() {
|
||||
return {
|
||||
rows: this.addKeyId(clone(this.value)),
|
||||
nameIdx: 1
|
||||
};
|
||||
},
|
||||
|
||||
computed: {
|
||||
isView() {
|
||||
return this.mode === _VIEW;
|
||||
},
|
||||
|
||||
networkOption() {
|
||||
const choices = this.$store.getters['harvester/all'](NETWORK_ATTACHMENT).filter((row) => {
|
||||
return !row.metadata?.annotations?.[HCI_ANNOTATIONS.STORAGE_NETWORK];
|
||||
});
|
||||
|
||||
const out = sortBy(
|
||||
choices.map((N) => {
|
||||
const label = N.isNotReady ? `${ N.id } (${ this.t('generic.notReady') })` : N.id;
|
||||
|
||||
return {
|
||||
label,
|
||||
value: N.id,
|
||||
disabled: N.isNotReady,
|
||||
};
|
||||
}),
|
||||
'label'
|
||||
);
|
||||
|
||||
return out;
|
||||
},
|
||||
},
|
||||
|
||||
watch: {
|
||||
value(neu) {
|
||||
this.rows = neu;
|
||||
},
|
||||
},
|
||||
|
||||
methods: {
|
||||
add(type) {
|
||||
const name = this.generateName();
|
||||
|
||||
const neu = {
|
||||
name,
|
||||
networkName: '',
|
||||
model: 'virtio',
|
||||
type: 'bridge',
|
||||
newCreateId: randomStr(10),
|
||||
rowKeyId: randomStr(10)
|
||||
};
|
||||
|
||||
this.rows.push(neu);
|
||||
this.update();
|
||||
},
|
||||
|
||||
remove(vol) {
|
||||
removeObject(this.rows, vol);
|
||||
this.update();
|
||||
},
|
||||
|
||||
addKeyId(row) {
|
||||
return row.map((R) => {
|
||||
return {
|
||||
...R,
|
||||
rowKeyId: randomStr(10)
|
||||
};
|
||||
});
|
||||
},
|
||||
|
||||
generateName() {
|
||||
let name = '';
|
||||
let hasUsed = true;
|
||||
|
||||
while (hasUsed) {
|
||||
name = `nic-${ this.nameIdx }`;
|
||||
hasUsed = this.rows.find( O => O.name === name);
|
||||
this.nameIdx++;
|
||||
}
|
||||
|
||||
return name;
|
||||
},
|
||||
|
||||
update() {
|
||||
this.$emit('input', this.rows);
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div>
|
||||
<InfoBox v-for="(row, i) in rows" :key="i" class="infoBox">
|
||||
<button v-if="!isView" type="button" class="role-link remove-vol" @click="remove(row)">
|
||||
<i class="icon icon-x" />
|
||||
</button>
|
||||
|
||||
<h3> {{ t('harvester.virtualMachine.network.title') }} </h3>
|
||||
|
||||
<Base
|
||||
:key="rows[i].rowKeyId"
|
||||
v-model="rows[i]"
|
||||
:rows="rows"
|
||||
:mode="mode"
|
||||
:is-single="isSingle"
|
||||
:network-option="networkOption"
|
||||
@update="update"
|
||||
/>
|
||||
</InfoBox>
|
||||
|
||||
<button v-if="!isView" type="button" class="btn btn-sm bg-primary" @click="add">
|
||||
{{ t('harvester.virtualMachine.network.addNetwork') }}
|
||||
</button>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style lang='scss' scoped>
|
||||
.infoBox{
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.remove-vol {
|
||||
position: absolute;
|
||||
top: 10px;
|
||||
right: 16px;
|
||||
padding:0px;
|
||||
max-height: 28px;
|
||||
min-height: 28px;
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user