public/harvester-ui-extension
1
0
Fork 0
mirror of https://github.com/harvester/harvester-ui-extension.git synced 2026-08-16 12:49:14 +00:00
Code Issues Packages Projects Releases Wiki Activity

feat(forklift): small changes before rebase

Browse Source 
Signed-off-by: Marcelo Fukumoto <marcelo.fukumoto@suse.com>
This commit is contained in:
Marcelo Fukumoto 2026-06-22 11:14:46 +02:00
parent fbcc235fa7
commit 77d80051c9
No known key found for this signature in database
GPG Key ID: 1CA12189625C2543
5 changed files with 67 additions and 154 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

19
pkg/harvester/components/vm-migration/ConfigureMappingsStep.vue
View File

@ -1,5 +1,5 @@
<script setup>
import { ref, computed, watch } from 'vue';
import { ref, computed, watch, toRefs } from 'vue';
import { useStore } from 'vuex';
import Loading from '@shell/components/Loading';
import { Banner } from '@components/Banner';
@ -28,20 +28,12 @@ const { t } = useI18n(store);
const vms = ref([]);
const harvesterNetworks = ref([]);
const storageClasses = ref([]);
const networkEntries = ref([]);
const storageEntries = ref([]);
const allNetworkMaps = ref([]);
const allStorageMaps = ref([]);
const errors = ref([]);
const loading = ref(true);
// Restore from stepData
if (props.stepData.networkEntries.length > 0) {
networkEntries.value = props.stepData.networkEntries;
}
if (props.stepData.storageEntries.length > 0) {
storageEntries.value = props.stepData.storageEntries;
}
const { networkEntries, storageEntries } = toRefs(props.stepData);
const NAMESPACE = FORKLIFT_NAMESPACE;
@ -152,13 +144,6 @@ if (canSave.value) {
emit('ready', true);
}
// Sync state back to stepData
watch(networkEntries, (val) => {
props.stepData.networkEntries = val;
}, { deep: true });
watch(storageEntries, (val) => {
props.stepData.storageEntries = val;
}, { deep: true });
const buildNetworkEntries = () => {
const networkMap = {};

73
pkg/harvester/components/vm-migration/ConfigureProviderStep.vue
View File

@ -1,5 +1,5 @@
<script setup>
import { ref, computed, watch } from 'vue';
import { ref, computed, watch, toRefs } from 'vue';
import { useStore } from 'vuex';
import { LabeledInput } from '@components/Form/LabeledInput';
@ -28,69 +28,24 @@ const { t } = useI18n(store);
const allProviders = ref([]);
const allSecrets = ref([]);
const selectedProvider = ref(CREATE_NEW);
const providerName = ref('');
const url = ref('');
const username = ref('');
const password = ref('');
const skipTlsVerify = ref(false);
const testResult = ref(null);
const testError = ref(null);
const errors = ref([]);
const testBtnRef = ref(null);
const createdProvider = ref(null);
const createdSecret = ref(null);
const loading = ref(true);
const testPassed = ref(false);
const testing = ref(false);
// Restore state from stepData on mount
selectedProvider.value = props.stepData.selectedProvider;
providerName.value = props.stepData.providerName;
url.value = props.stepData.url;
username.value = props.stepData.username;
password.value = props.stepData.password;
skipTlsVerify.value = props.stepData.skipTlsVerify;
testPassed.value = props.stepData.testPassed;
testResult.value = props.stepData.testResult;
testError.value = props.stepData.testError;
createdProvider.value = props.stepData.createdProvider;
createdSecret.value = props.stepData.createdSecret;
// Sync state back to stepData
watch(selectedProvider, (val) => {
props.stepData.selectedProvider = val;
});
watch(providerName, (val) => {
props.stepData.providerName = val;
});
watch(url, (val) => {
props.stepData.url = val;
});
watch(username, (val) => {
props.stepData.username = val;
});
watch(password, (val) => {
props.stepData.password = val;
});
watch(skipTlsVerify, (val) => {
props.stepData.skipTlsVerify = val;
});
watch(testPassed, (val) => {
props.stepData.testPassed = val;
});
watch(testResult, (val) => {
props.stepData.testResult = val;
});
watch(testError, (val) => {
props.stepData.testError = val;
});
watch(createdProvider, (val) => {
props.stepData.createdProvider = val;
});
watch(createdSecret, (val) => {
props.stepData.createdSecret = val;
});
const {
selectedProvider,
providerName,
url,
username,
password,
skipTlsVerify,
testPassed,
testResult,
testError,
createdProvider,
createdSecret,
} = toRefs(props.stepData);
const isExistingProvider = computed(() => selectedProvider.value !== CREATE_NEW);
const isFormValid = computed(() => !!providerName.value && !!url.value && !!username.value && !!password.value);

29
pkg/harvester/components/vm-migration/SelectVmsStep.vue
View File

@ -1,6 +1,6 @@
<script setup>
import {
ref, computed, watch, nextTick, onBeforeUnmount
ref, computed, watch, nextTick, onBeforeUnmount, toRefs
} from 'vue';
import { useStore } from 'vuex';
import Loading from '@shell/components/Loading';
@ -20,15 +20,14 @@ const emit = defineEmits(['complete', 'loading']);
const store = useStore();
const { t } = useI18n(store);
const discoveredVMs = ref([]);
const { discoveredVMs, selectedVMIds, tableRows } = toRefs(props.stepData);
const selectedVMs = ref([]);
const tableRows = ref([]);
const loading = ref(true);
const networkMap = ref({});
const datastoreMap = ref({});
const sortableTableRef = ref(null);
const allVMsSelected = ref(false);
const selectedVMIds = ref(new Set());
const errors = ref([]);
let skipNextSelectionEvent = false;
@ -67,29 +66,11 @@ onBeforeUnmount(() => {
clearInterval(nowTimer);
});
// Restore from stepData
if (props.stepData.discoveredVMs.length > 0) {
discoveredVMs.value = props.stepData.discoveredVMs;
}
if (props.stepData.selectedVMIds.size > 0) {
selectedVMIds.value = props.stepData.selectedVMIds;
// Restore selection state from stepData
if (selectedVMIds.value.size > 0) {
selectedVMs.value = discoveredVMs.value.filter((vm) => selectedVMIds.value.has(vm.id));
allVMsSelected.value = selectedVMIds.value.size === discoveredVMs.value.length;
}
if (props.stepData.tableRows.length > 0) {
tableRows.value = props.stepData.tableRows;
}
// Sync back to stepData
watch(discoveredVMs, (val) => {
props.stepData.discoveredVMs = val;
});
watch(selectedVMIds, (val) => {
props.stepData.selectedVMIds = val;
});
watch(tableRows, (val) => {
props.stepData.tableRows = val;
});
const vmCount = computed(() => discoveredVMs.value.length);
const selectedCount = computed(() => selectedVMs.value.length);

26
pkg/harvester/pages/c/_cluster/vm-migration/provider-wizard.vue
View File

@ -2,13 +2,14 @@
import { reactive, ref, computed, watch } from 'vue';
import { useStore } from 'vuex';
import CruResource from '@shell/components/CruResource';
import Loading from '@shell/components/Loading';
import { SECRET } from '@shell/config/types';
import { useI18n } from '@shell/composables/useI18n';
import ConfigureProviderStep from '../../../../components/vm-migration/ConfigureProviderStep';
import ConfigureMappingsStep from '../../../../components/vm-migration/ConfigureMappingsStep';
import { PRODUCT_NAME } from '../../../../config/harvester';
import { currentRouter, currentRoute } from '../../../../utils/router';
import { HCI } from '../../../../types';
import ConfigureProviderStep from '@pkg/harvester/components/vm-migration/ConfigureProviderStep.vue';
import ConfigureMappingsStep from '@pkg/harvester/components/vm-migration/ConfigureMappingsStep.vue';
import { PRODUCT_NAME } from '@pkg/harvester/config/harvester';
import { currentRouter, currentRoute } from '@pkg/harvester/utils/router';
import { HCI } from '@pkg/harvester/types';
const store = useStore();
const route = currentRoute();
@ -59,23 +60,18 @@ const stepData = reactive({
const steps = reactive([
{
name: 'configure-provider',
label: '',
subtext: '',
label: t('harvester.addons.vmMigration.wizard.steps.configureProvider.label'),
subtext: t('harvester.addons.vmMigration.wizard.steps.configureProvider.description'),
ready: false,
},
{
name: 'configure-mappings',
label: '',
subtext: '',
label: t('harvester.addons.vmMigration.wizard.steps.configureMappings.label'),
subtext: t('harvester.addons.vmMigration.wizard.steps.configureMappings.description'),
ready: false,
},
]);
steps[0].label = t('harvester.addons.vmMigration.wizard.steps.configureProvider.label');
steps[0].subtext = t('harvester.addons.vmMigration.wizard.steps.configureProvider.description');
steps[1].label = t('harvester.addons.vmMigration.wizard.steps.configureMappings.label');
steps[1].subtext = t('harvester.addons.vmMigration.wizard.steps.configureMappings.description');
watch([providerFormValid, providerTesting], () => {
steps[0].ready = providerFormValid.value && !providerTesting.value;
}, { immediate: true });
@ -243,7 +239,7 @@ init();
</script>
<template>
<div v-if="initialLoading" />
<Loading v-if="initialLoading" />
<CruResource
v-else
ref="cruRef"

74
pkg/harvester/pages/c/_cluster/vm-migration/vm-migration-wizard.vue
View File

@ -3,12 +3,12 @@ import { reactive, ref, computed, watch } from 'vue';
import { useStore } from 'vuex';
import CruResource from '@shell/components/CruResource';
import { useI18n } from '@shell/composables/useI18n';
import ConfigureProviderStep from '../../../../components/vm-migration/ConfigureProviderStep';
import SelectVmsStep from '../../../../components/vm-migration/SelectVmsStep';
import ConfigureMappingsStep from '../../../../components/vm-migration/ConfigureMappingsStep';
import ReviewMigrationStep from '../../../../components/vm-migration/ReviewMigrationStep';
import { PRODUCT_NAME } from '../../../../config/harvester';
import { currentRouter } from '../../../../utils/router';
import ConfigureProviderStep from '@pkg/harvester/components/vm-migration/ConfigureProviderStep.vue';
import SelectVmsStep from '@pkg/harvester/components/vm-migration/SelectVmsStep.vue';
import ConfigureMappingsStep from '@pkg/harvester/components/vm-migration/ConfigureMappingsStep.vue';
import ReviewMigrationStep from '@pkg/harvester/components/vm-migration/ReviewMigrationStep.vue';
import { PRODUCT_NAME } from '@pkg/harvester/config/harvester';
import { currentRouter } from '@pkg/harvester/utils/router';
const store = useStore();
const { t } = useI18n(store);
@ -61,39 +61,30 @@ const stepData = reactive({
const steps = reactive([
{
name: 'configure-provider',
label: '',
subtext: '',
label: t('harvester.addons.vmMigration.wizard.steps.configureProvider.label'),
subtext: t('harvester.addons.vmMigration.wizard.steps.configureProvider.description'),
ready: false,
},
{
name: 'select-vms',
label: '',
subtext: '',
label: t('harvester.addons.vmMigration.wizard.steps.selectVms.label'),
subtext: t('harvester.addons.vmMigration.wizard.steps.selectVms.description'),
ready: false,
},
{
name: 'configure-mappings',
label: '',
subtext: '',
label: t('harvester.addons.vmMigration.wizard.steps.configureMappings.label'),
subtext: t('harvester.addons.vmMigration.wizard.steps.configureMappings.description'),
ready: false,
},
{
name: 'review-migration',
label: '',
subtext: '',
label: t('harvester.addons.vmMigration.wizard.steps.reviewMigration.label'),
subtext: t('harvester.addons.vmMigration.wizard.steps.reviewMigration.description'),
ready: false,
},
]);
steps[0].label = t('harvester.addons.vmMigration.wizard.steps.configureProvider.label');
steps[0].subtext = t('harvester.addons.vmMigration.wizard.steps.configureProvider.description');
steps[1].label = t('harvester.addons.vmMigration.wizard.steps.selectVms.label');
steps[1].subtext = t('harvester.addons.vmMigration.wizard.steps.selectVms.description');
steps[2].label = t('harvester.addons.vmMigration.wizard.steps.configureMappings.label');
steps[2].subtext = t('harvester.addons.vmMigration.wizard.steps.configureMappings.description');
steps[3].label = t('harvester.addons.vmMigration.wizard.steps.reviewMigration.label');
steps[3].subtext = t('harvester.addons.vmMigration.wizard.steps.reviewMigration.description');
watch([providerFormValid, providerTesting], () => {
steps[0].ready = providerFormValid.value && !providerTesting.value;
}, { immediate: true });
@ -130,6 +121,12 @@ watch(providerReady, (val) => {
}
});
watch(providerTesting, (testing) => {
if (!testing && pendingProceed.value && !providerReady.value) {
pendingProceed.value = false;
}
});
const onProviderComplete = (data) => {
providerName.value = data.providerName;
provider.value = data.provider;
@ -185,7 +182,11 @@ watch(() => stepData.provider.providerName, (newVal, oldVal) => {
// Clear mappings and review when VM selection changes
watch(selectedVMs, (newVal, oldVal) => {
if (oldVal.length > 0 && JSON.stringify(newVal.map((v) => v.id).sort()) !== JSON.stringify(oldVal.map((v) => v.id).sort())) {
const newIds = new Set(newVal.map((v) => v.id));
const oldIds = new Set(oldVal.map((v) => v.id));
const changed = newIds.size !== oldIds.size || [...newIds].some((id) => !oldIds.has(id));
if (oldVal.length > 0 && changed) {
stepData.mappings.networkEntries = [];
stepData.mappings.storageEntries = [];
mappingsReady.value = false;
@ -195,18 +196,19 @@ watch(selectedVMs, (newVal, oldVal) => {
}
});
const migrationListLocation = {
name: `${ PRODUCT_NAME }-c-cluster-vm-migration`,
params: {
product: store.getters['productId'],
cluster: store.getters['clusterId'],
}
};
const onFinish = async(buttonCb) => {
try {
await reviewStepRef.value.startMigration();
buttonCb(true);
currentRouter().push({
name: `${ PRODUCT_NAME }-c-cluster-vm-migration`,
params: {
product: store.getters['productId'],
cluster: store.getters['clusterId'],
}
});
currentRouter().push(migrationListLocation);
} catch (err) {
errors.value = [err instanceof Error ? err.message : String(err)];
buttonCb(false);
@ -214,13 +216,7 @@ const onFinish = async(buttonCb) => {
};
const onCancel = () => {
currentRouter().push({
name: `${ PRODUCT_NAME }-c-cluster-vm-migration`,
params: {
product: store.getters['productId'],
cluster: store.getters['clusterId'],
}
});
currentRouter().push(migrationListLocation);
};
</script>