mirror of
https://github.com/harvester/harvester-ui-extension.git
synced 2026-08-16 04:39:15 +00:00
feat(forklift): small changes before rebase
Signed-off-by: Marcelo Fukumoto <marcelo.fukumoto@suse.com>
This commit is contained in:
Marcelo Fukumoto
parent
fbcc235fa7
commit
77d80051c9
@ -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 = {};
|
||||
|
||||
|
||||
@ -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);
|
||||
|
||||
@ -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);
|
||||
|
||||
@ -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"
|
||||
|
||||
@ -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>
|
||||
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user