feat: forklift UI (#891)

* feat: forklift poc first commit Signed-off-by: Marcelo Fukumoto <marcelo.fukumoto@suse.com> * feat: add migration and plan detail pages with progress tracking Signed-off-by: Marcelo Fukumoto <marcelo.fukumoto@suse.com> * feat(forklift): UI based on the FIGMA Signed-off-by: Marcelo Fukumoto <marcelo.fukumoto@suse.com> * feat(forklift): Fixed config based on new figma changes Signed-off-by: Marcelo Fukumoto <marcelo.fukumoto@suse.com> * feat(forklift): New changes added based on new figma Signed-off-by: Marcelo Fukumoto <marcelo.fukumoto@suse.com> * feat(forklift): Add the succeded state Signed-off-by: Marcelo Fukumoto <marcelo.fukumoto@suse.com> * Merge the new APIs Signed-off-by: Marcelo Fukumoto <marcelo.fukumoto@suse.com> * feat(forklift): Applied fix to select the proper data on network. Added condition to show critical Signed-off-by: Marcelo Fukumoto <marcelo.fukumoto@suse.com> * feat(forklift): Added icons, critical state, fix grids, action button Signed-off-by: Marcelo Fukumoto <marcelo.fukumoto@suse.com> * feat(forklift): Change to use the proper provider instead of a hardcoded Signed-off-by: Marcelo Fukumoto <marcelo.fukumoto@suse.com> * feat(forklift): Added pagination UI Signed-off-by: Marcelo Fukumoto <marcelo.fukumoto@suse.com> * feat(forklift): FIxed the routing for the extension Signed-off-by: Marcelo Fukumoto <marcelo.fukumoto@suse.com> * feat(forklift): route and router doesnt work properly on extensions Signed-off-by: Marcelo Fukumoto <marcelo.fukumoto@suse.com> * feat(forklift): fixed to fix the icon on extension Signed-off-by: Marcelo Fukumoto <marcelo.fukumoto@suse.com> * feat(forklift): Added overflow hidden to mapping target list Signed-off-by: Marcelo Fukumoto <marcelo.fukumoto@suse.com> * feat(forklift): Added better handling on the saving and testing Signed-off-by: Marcelo Fukumoto <marcelo.fukumoto@suse.com> * feat(forklift): Remove test flags Signed-off-by: Marcelo Fukumoto <marcelo.fukumoto@suse.com> * feat(forklift): Changed based on review Signed-off-by: Marcelo Fukumoto <marcelo.fukumoto@suse.com> * feat(forklift): fixed title and button Signed-off-by: Marcelo Fukumoto <marcelo.fukumoto@suse.com> * feat(forklift): Design changes Signed-off-by: Marcelo Fukumoto <marcelo.fukumoto@suse.com> * feat(forklift): Changed to Wizard Signed-off-by: Marcelo Fukumoto <marcelo.fukumoto@suse.com> * feat(forklift): added the provider wizard Signed-off-by: Marcelo Fukumoto <marcelo.fukumoto@suse.com> * feat(forklift): Fixed some UI changes Signed-off-by: Marcelo Fukumoto <marcelo.fukumoto@suse.com> * feat(forklift): Removed wrong configs used for testing Signed-off-by: Marcelo Fukumoto <marcelo.fukumoto@suse.com> * feat(forklift): update size Signed-off-by: Marcelo Fukumoto <marcelo.fukumoto@suse.com> * feat(forklift): small fixes Signed-off-by: Marcelo Fukumoto <marcelo.fukumoto@suse.com> * feat(forklift): small fixes after Copilot Signed-off-by: Marcelo Fukumoto <marcelo.fukumoto@suse.com> * feat(forklift): small fixes after Copilot Signed-off-by: Marcelo Fukumoto <marcelo.fukumoto@suse.com> * feat(forklift): reverted settings.json changes Signed-off-by: Marcelo Fukumoto <marcelo.fukumoto@suse.com> * feat(forklift): small fixes after Copilot Signed-off-by: Marcelo Fukumoto <marcelo.fukumoto@suse.com> * feat(forklift): Fix the way it is registered Signed-off-by: Marcelo Fukumoto <marcelo.fukumoto@suse.com> * feat(forklift): Fixed the type for VMware Signed-off-by: Marcelo Fukumoto <marcelo.fukumoto@suse.com> * feat(forklift): small changes before rebase Signed-off-by: Marcelo Fukumoto <marcelo.fukumoto@suse.com> * feat: Added new API for the vms Signed-off-by: Marcelo Fukumoto <marcelo.fukumoto@suse.com> * feat: Fix some labels Signed-off-by: Marcelo Fukumoto <marcelo.fukumoto@suse.com> * feat: Added some final fixes to structure Signed-off-by: Marcelo Fukumoto <marcelo.fukumoto@suse.com> * feat: added loading to provider steps Signed-off-by: Marcelo Fukumoto <marcelo.fukumoto@suse.com> * feat: added comments from copilot review Signed-off-by: Marcelo Fukumoto <marcelo.fukumoto@suse.com> --------- Signed-off-by: Marcelo Fukumoto <marcelo.fukumoto@suse.com>
2026-10-01 03:36:04 +08:00 · 2026-07-13 16:58:35 +08:00
parent c3bb0ea4be
commit 560643d299
20 changed files with 4255 additions and 71 deletions
@@ -0,0 +1,59 @@
+<script setup>
+defineProps({
+  networkEntries: {
+    type:    Array,
+    default: () => [],
+  },
+  storageEntries: {
+    type:    Array,
+    default: () => [],
+  },
+});
+</script>
+
+<template>
+  <div class="mappings-cell">
+    <div
+      v-for="(entry, idx) in networkEntries"
+      :key="'net-' + idx"
+      class="mapping-entry"
+    >
+      <i
+        class="icon icon-network"
+        aria-hidden="true"
+      />
+      <span>{{ entry }}</span>
+    </div>
+    <div
+      v-for="(entry, idx) in storageEntries"
+      :key="'stor-' + idx"
+      class="mapping-entry"
+    >
+      <i
+        class="icon icon-datastore"
+        aria-hidden="true"
+      />
+      <span>{{ entry }}</span>
+    </div>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+  .mappings-cell {
+    display: flex;
+    flex-direction: column;
+    gap: 8px;
+  }
+
+  .mapping-entry {
+    display: flex;
+    align-items: center;
+    gap: 6px;
+    font-size: 13px;
+    color: var(--muted);
+
+    .icon {
+      font-size: 16px;
+    }
+  }
+</style>
@@ -0,0 +1,548 @@
+<script setup>
+import { ref, computed, watch, toRefs } from 'vue';
+import { useStore } from 'vuex';
+import Loading from '@shell/components/Loading';
+import { Banner } from '@components/Banner';
+import { STORAGE_CLASS, NETWORK_ATTACHMENT } from '@shell/config/types';
+import { useI18n } from '@shell/composables/useI18n';
+import { randomStr } from '@shell/utils/string';
+import { HCI } from '../../types';
+import { FORKLIFT_NAMESPACE } from '../../config/harvester-map';
+import { buildNetworkMapEntries, buildStorageMapEntries } from '../../utils/forklift';
+import MappingColumn from './MappingColumn.vue';
+
+const props = defineProps({
+  providerName:       { type: String, default: '' },
+  provider:           { type: Object, default: null },
+  selectedVms:        { type: Array, default: () => [] },
+  stepData:           { type: Object, required: true },
+  useAllProviderData: { type: Boolean, default: false },
+  existingNetworkMap: { type: Object, default: null },
+  existingStorageMap: { type: Object, default: null },
+});
+
+const emit = defineEmits(['ready']);
+
+const store = useStore();
+const { t } = useI18n(store);
+
+const vms = ref([]);
+const harvesterNetworks = ref([]);
+const storageClasses = ref([]);
+const allNetworkMaps = ref([]);
+const allStorageMaps = ref([]);
+const errors = ref([]);
+const loading = ref(true);
+
+const { networkEntries, storageEntries } = toRefs(props.stepData);
+
+const NAMESPACE = FORKLIFT_NAMESPACE;
+
+const harvesterNetworkOptions = computed(() => {
+  const options = [
+    { label: t('harvester.addons.vmMigration.configureMappings.networkMapping.options.podNetworking'), value: 'pod' },
+    { label: t('harvester.addons.vmMigration.configureMappings.networkMapping.options.ignored'), value: 'ignored' },
+  ];
+
+  harvesterNetworks.value.forEach((net) => {
+    const ns = net.metadata?.namespace || '';
+    const name = net.metadata?.name || net.id;
+    const fullName = ns ? `${ ns }/${ name }` : name;
+
+    options.push({ label: fullName, value: fullName });
+  });
+
+  return options;
+});
+
+const storageClassOptions = computed(() => {
+  const options = storageClasses.value.map((sc) => ({
+    label: sc.metadata?.name || sc.id,
+    value: sc.metadata?.name || sc.id,
+  }));
+
+  if (!options.find((o) => o.value === 'harvester-longhorn')) {
+    options.unshift({ label: 'harvester-longhorn', value: 'harvester-longhorn' });
+  }
+
+  return options;
+});
+
+const applyNetworkMapTargets = (mapSpec) => {
+  if (!mapSpec) {
+    return;
+  }
+
+  networkEntries.value.forEach((entry) => {
+    const match = mapSpec.find(
+      (m) => m.source?.id === entry.id || m.source?.name === entry.name
+    );
+
+    if (match?.destination) {
+      const dest = match.destination;
+
+      if (dest.type === 'pod') {
+        entry.target = 'pod';
+      } else if (dest.type === 'ignored') {
+        entry.target = 'ignored';
+      } else if (dest.type === 'multus' && dest.name) {
+        entry.target = dest.namespace ? `${ dest.namespace }/${ dest.name }` : dest.name;
+      }
+    }
+  });
+};
+
+const applyStorageMapTargets = (mapSpec) => {
+  if (!mapSpec) {
+    return;
+  }
+
+  storageEntries.value.forEach((entry) => {
+    const match = mapSpec.find(
+      (m) => m.source?.id === entry.id || m.source?.name === entry.name
+    );
+
+    if (match?.destination?.storageClass) {
+      entry.target = match.destination.storageClass;
+    }
+  });
+};
+
+const applyDefaultNetworkMap = () => {
+  const defaultMap = allNetworkMaps.value.find(
+    (nm) => nm.metadata.name === `${ props.providerName }-network-map-default`
+  );
+
+  applyNetworkMapTargets(defaultMap?.spec?.map);
+};
+
+const applyDefaultStorageMap = () => {
+  const defaultMap = allStorageMaps.value.find(
+    (sm) => sm.metadata.name === `${ props.providerName }-storage-map-default`
+  );
+
+  applyStorageMapTargets(defaultMap?.spec?.map);
+};
+
+const allNetworksMapped = computed(() => networkEntries.value.length > 0 && networkEntries.value.every((e) => !!e.target));
+const allStorageMapped = computed(() => storageEntries.value.length > 0 && storageEntries.value.every((e) => !!e.target));
+
+const canSave = computed(() => {
+  if (props.useAllProviderData) {
+    return true;
+  }
+
+  return networkEntries.value.length > 0 && storageEntries.value.length > 0 &&
+    allNetworksMapped.value && allStorageMapped.value;
+});
+
+watch(canSave, (val) => {
+  emit('ready', val);
+});
+
+// After restore, check if ready
+if (canSave.value) {
+  emit('ready', true);
+}
+
+const buildNetworkEntries = () => {
+  const networkMap = {};
+
+  vms.value.forEach((vm) => {
+    const vmName = vm.name || vm.id;
+
+    if (vm.networks && vm.networks.length > 0) {
+      vm.networks.forEach((net) => {
+        const netKey = net.id || net.name || 'default';
+
+        if (!networkMap[netKey]) {
+          networkMap[netKey] = {
+            name:   net.name || t('harvester.addons.vmMigration.generic.unknown'),
+            id:     net.id || '',
+            vlanId: net.vlanId || '',
+            target: '',
+            usedBy: [],
+            _key:   `net-${ netKey }`,
+          };
+        }
+
+        if (!networkMap[netKey].usedBy.includes(vmName)) {
+          networkMap[netKey].usedBy.push(vmName);
+        }
+      });
+    }
+  });
+
+  networkEntries.value = Object.values(networkMap);
+};
+
+const buildStorageEntries = () => {
+  const datastoreMap = {};
+
+  vms.value.forEach((vm) => {
+    const vmName = vm.name || vm.id;
+
+    if (vm.disks && vm.disks.length > 0) {
+      vm.disks.forEach((disk) => {
+        const ds = disk.datastore;
+
+        if (ds && ds.id) {
+          if (!datastoreMap[ds.id]) {
+            datastoreMap[ds.id] = {
+              name:     ds.name || t('harvester.addons.vmMigration.generic.unknown'),
+              id:       ds.id,
+              type:     ds.type || '',
+              capacity: 0,
+              target:   '',
+              usedBy:   [],
+              _key:     `stor-${ ds.id }`,
+            };
+          }
+
+          datastoreMap[ds.id].capacity += disk.capacity || 0;
+
+          if (!datastoreMap[ds.id].usedBy.includes(vmName)) {
+            datastoreMap[ds.id].usedBy.push(vmName);
+          }
+        }
+      });
+    }
+  });
+
+  storageEntries.value = Object.values(datastoreMap);
+};
+
+const buildNetworkEntriesFromProvider = (networksData) => {
+  networkEntries.value = (Array.isArray(networksData) ? networksData : []).map((net) => ({
+    name:   net.name || net.id,
+    id:     net.id || '',
+    vlanId: net.vlanId || '',
+    target: '',
+    usedBy: [],
+    _key:   `net-${ net.id || net.name }`,
+  }));
+};
+
+const buildStorageEntriesFromProvider = (datastoresData) => {
+  storageEntries.value = (Array.isArray(datastoresData) ? datastoresData : []).map((ds) => ({
+    name:     ds.name || ds.id,
+    id:       ds.id || '',
+    type:     ds.type || '',
+    capacity: ds.capacity || 0,
+    target:   '',
+    usedBy:   [],
+    _key:     `stor-${ ds.id || ds.name }`,
+  }));
+};
+
+const formatStorageDetail = (entry) => {
+  const parts = [];
+
+  if (entry.type) {
+    parts.push(entry.type);
+  }
+
+  if (entry.capacity) {
+    const gb = entry.capacity / (1024 * 1024 * 1024);
+
+    if (gb >= 1024) {
+      parts.push(t('harvester.addons.vmMigration.generic.memoryTb', { value: (gb / 1024).toFixed(1) }));
+    } else {
+      parts.push(t('harvester.addons.vmMigration.generic.memoryGb', { value: Math.round(gb) }));
+    }
+  }
+
+  return parts.join(' • ');
+};
+
+const buildNetworkMapSpec = (providerRef) => ({
+  map:      buildNetworkMapEntries(networkEntries.value, NAMESPACE),
+  provider: providerRef,
+});
+
+const buildStorageMapSpec = (providerRef) => ({
+  map:      buildStorageMapEntries(storageEntries.value),
+  provider: providerRef,
+});
+
+const saveAndReturn = async() => {
+  const inStore = store.getters['currentProduct'].inStore;
+
+  const providerRef = {
+    source: {
+      apiVersion: 'forklift.konveyor.io/v1beta1',
+      kind:       'Provider',
+      name:       props.providerName,
+      namespace:  NAMESPACE,
+    },
+    destination: {
+      apiVersion: 'forklift.konveyor.io/v1beta1',
+      kind:       'Provider',
+      name:       'host',
+      namespace:  NAMESPACE,
+    },
+  };
+
+  // Update existing maps in place (edit mode)
+  if (props.existingNetworkMap && props.existingStorageMap) {
+    props.existingNetworkMap.spec = buildNetworkMapSpec(providerRef);
+    await props.existingNetworkMap.save();
+
+    props.existingStorageMap.spec = buildStorageMapSpec(providerRef);
+    await props.existingStorageMap.save();
+
+    return {
+      networkMapName: props.existingNetworkMap.metadata.name,
+      storageMapName: props.existingStorageMap.metadata.name,
+    };
+  }
+
+  const providerOwnerRef = props.provider ? [{
+    apiVersion:         'forklift.konveyor.io/v1beta1',
+    kind:               'Provider',
+    name:               props.provider.metadata.name,
+    uid:                props.provider.metadata.uid,
+    blockOwnerDeletion: true,
+  }] : [];
+
+  const networkMap = await store.dispatch(`${ inStore }/create`, {
+    type:     HCI.FORKLIFT_NETWORK_MAP,
+    metadata: {
+      name:            `${ props.providerName }-network-map-${ props.useAllProviderData ? 'default' : randomStr(5).toLowerCase() }`,
+      namespace:       NAMESPACE,
+      ownerReferences: providerOwnerRef,
+    },
+    spec: buildNetworkMapSpec(providerRef),
+  });
+
+  await networkMap.save();
+
+  const storageMap = await store.dispatch(`${ inStore }/create`, {
+    type:     HCI.FORKLIFT_STORAGE_MAP,
+    metadata: {
+      name:            `${ props.providerName }-storage-map-${ props.useAllProviderData ? 'default' : randomStr(5).toLowerCase() }`,
+      namespace:       NAMESPACE,
+      ownerReferences: providerOwnerRef,
+    },
+    spec: buildStorageMapSpec(providerRef),
+  });
+
+  await storageMap.save();
+
+  return { networkMapName: networkMap.metadata.name, storageMapName: storageMap.metadata.name };
+};
+
+defineExpose({ saveMappings: saveAndReturn });
+
+const init = async() => {
+  const inStore = store.getters['currentProduct'].inStore;
+
+  try {
+    harvesterNetworks.value = await store.dispatch(`${ inStore }/findAll`, { type: NETWORK_ATTACHMENT });
+  } catch (e) {
+    harvesterNetworks.value = [];
+  }
+
+  try {
+    storageClasses.value = await store.dispatch(`${ inStore }/findAll`, { type: STORAGE_CLASS });
+  } catch (e) {
+    storageClasses.value = [];
+  }
+
+  try {
+    allNetworkMaps.value = await store.dispatch(`${ inStore }/findAll`, { type: HCI.FORKLIFT_NETWORK_MAP });
+  } catch (e) {
+    allNetworkMaps.value = [];
+  }
+
+  try {
+    allStorageMaps.value = await store.dispatch(`${ inStore }/findAll`, { type: HCI.FORKLIFT_STORAGE_MAP });
+  } catch (e) {
+    allStorageMaps.value = [];
+  }
+
+  if (networkEntries.value.length === 0 || storageEntries.value.length === 0) {
+    try {
+      const providerUid = props.provider?.metadata?.uid;
+      const providerType = props.provider?.spec?.type || 'vsphere';
+      const baseUrl = store.getters['harvester-common/getHarvesterClusterUrl'](
+        `v1/harvester/providers/${ providerType }/${ providerUid }`
+      );
+
+      const [networksData, datastoresData] = await Promise.all([
+        store.dispatch(`${ inStore }/request`, { url: `${ baseUrl }/networks` }).catch(() => []),
+        store.dispatch(`${ inStore }/request`, { url: `${ baseUrl }/datastores?detail=1` }).catch(() => []),
+      ]);
+
+      if (props.useAllProviderData) {
+        if (networkEntries.value.length === 0) {
+          buildNetworkEntriesFromProvider(networksData);
+        }
+        if (storageEntries.value.length === 0) {
+          buildStorageEntriesFromProvider(datastoresData);
+        }
+      } else {
+        vms.value = props.selectedVms;
+
+        const networkNameMap = (Array.isArray(networksData) ? networksData : []).reduce((map, n) => {
+          map[n.id] = n.name;
+
+          return map;
+        }, {});
+        const datastoreInfoMap = (Array.isArray(datastoresData) ? datastoresData : []).reduce((map, d) => {
+          map[d.id] = { name: d.name, type: d.type || '' };
+
+          return map;
+        }, {});
+
+        vms.value = vms.value.map((vm) => {
+          const resolved = { ...vm };
+
+          if (resolved.networks) {
+            resolved.networks = resolved.networks.map((n) => ({
+              ...n,
+              name: n.name || networkNameMap[n.id] || n.id,
+            }));
+          }
+
+          if (resolved.disks) {
+            resolved.disks = resolved.disks.map((d) => {
+              const dsInfo = d.datastore ? datastoreInfoMap[d.datastore.id] : null;
+
+              return {
+                ...d,
+                datastore: d.datastore ? {
+                  ...d.datastore,
+                  name: d.datastore.name || dsInfo?.name || d.datastore.id,
+                  type: dsInfo?.type || '',
+                } : d.datastore,
+              };
+            });
+          }
+
+          return resolved;
+        });
+
+        if (networkEntries.value.length === 0) {
+          buildNetworkEntries();
+        }
+        if (storageEntries.value.length === 0) {
+          buildStorageEntries();
+        }
+      }
+    } catch (e) {
+      errors.value = [e?.message || t('harvester.addons.vmMigration.errors.failedResolveDetails')];
+    }
+  }
+
+  const hasExistingNetworkTargets = networkEntries.value.some((e) => !!e.target);
+  const hasExistingStorageTargets = storageEntries.value.some((e) => !!e.target);
+
+  if (!hasExistingNetworkTargets) {
+    if (props.existingNetworkMap?.spec?.map) {
+      applyNetworkMapTargets(props.existingNetworkMap.spec.map);
+    } else {
+      applyDefaultNetworkMap();
+    }
+  }
+
+  if (!hasExistingStorageTargets) {
+    if (props.existingStorageMap?.spec?.map) {
+      applyStorageMapTargets(props.existingStorageMap.spec.map);
+    } else {
+      applyDefaultStorageMap();
+    }
+  }
+
+  loading.value = false;
+};
+
+init();
+</script>
+
+<template>
+  <Loading v-if="loading" />
+  <div
+    v-else
+    class="configure-mappings"
+  >
+    <Banner
+      v-for="(err, i) in errors"
+      :key="i"
+      color="error"
+      :label="err"
+    />
+    <p class="text-deemphasized line-height-20">
+      {{ t('harvester.addons.vmMigration.configureMappings.description') }}
+    </p>
+    <div class="mappings-columns">
+      <MappingColumn
+        :title="t('harvester.addons.vmMigration.configureMappings.networkMapping.title')"
+        :description="t('harvester.addons.vmMigration.configureMappings.networkMapping.description')"
+        :entries="networkEntries"
+        :options="harvesterNetworkOptions"
+        :placeholder="t('harvester.addons.vmMigration.configureMappings.networkMapping.placeholder')"
+        :show-used-by="!useAllProviderData"
+        :clearable="useAllProviderData"
+      >
+        <template #source-detail="{ entry }">
+          <span class="source-detail text-deemphasized">{{ t('harvester.addons.vmMigration.generic.vlan', { id: entry.vlanId || '0' }) }}</span>
+        </template>
+      </MappingColumn>
+
+      <MappingColumn
+        :title="t('harvester.addons.vmMigration.configureMappings.storageMapping.title')"
+        :description="t('harvester.addons.vmMigration.configureMappings.storageMapping.description')"
+        :entries="storageEntries"
+        :options="storageClassOptions"
+        :placeholder="t('harvester.addons.vmMigration.configureMappings.storageMapping.placeholder')"
+        :show-used-by="!useAllProviderData"
+        :clearable="useAllProviderData"
+      >
+        <template #source-detail="{ entry }">
+          <span
+            v-if="entry.type || entry.capacity"
+            class="source-detail text-deemphasized"
+          >{{ formatStorageDetail(entry) }}</span>
+        </template>
+      </MappingColumn>
+    </div>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+  .mappings-columns {
+    display: flex;
+    flex-direction: column;
+    gap: 32px;
+
+    @media only screen and (min-width: map-get($breakpoints, '--viewport-7')) {
+      display: grid;
+      grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
+    }
+
+    @media only screen and (min-width: map-get($breakpoints, '--viewport-9')) {
+      gap: 48px;
+    }
+
+    @media only screen and (min-width: map-get($breakpoints, '--viewport-12')) {
+      gap: 64px;
+    }
+  }
+
+  .configure-mappings {
+    display: flex;
+    flex-direction: column;
+    gap: 24px;
+
+    .line-height-20 {
+      line-height: 20px;
+    }
+  }
+
+  .source-detail {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+</style>
@@ -0,0 +1,538 @@
+<script setup>
+import { ref, computed, watch, toRefs } from 'vue';
+import { useStore } from 'vuex';
+
+import { LabeledInput } from '@components/Form/LabeledInput';
+import { Checkbox } from '@components/Form/Checkbox';
+import { Banner } from '@components/Banner';
+import Loading from '@shell/components/Loading';
+import AsyncButton from '@shell/components/AsyncButton';
+import LabeledSelect from '@shell/components/form/LabeledSelect';
+import { SECRET } from '@shell/config/types';
+import { randomStr } from '@shell/utils/string';
+import { useI18n } from '@shell/composables/useI18n';
+import { HCI } from '../../types';
+import { FORKLIFT_NAMESPACE } from '../../config/harvester-map';
+import { decodeSecretValue } from '../../utils/forklift';
+
+const CREATE_NEW = '__create_new__';
+
+const props = defineProps({
+  stepData:   { type: Object, required: true },
+  createOnly: { type: Boolean, default: false },
+  editMode:   { type: Boolean, default: false },
+});
+
+const emit = defineEmits(['complete', 'ready', 'form-valid', 'testing']);
+
+const store = useStore();
+const { t } = useI18n(store);
+
+const allProviders = ref([]);
+const allSecrets = ref([]);
+const errors = ref([]);
+const testBtnRef = ref(null);
+const loading = ref(true);
+const testing = ref(false);
+
+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);
+
+const providerOptions = computed(() => {
+  const options = [
+    { label: t('harvester.addons.vmMigration.configureProvider.createNew'), value: CREATE_NEW }
+  ];
+
+  allProviders.value.forEach((p) => {
+    if (!p.spec?.url) {
+      return;
+    }
+
+    const secretRef = p.spec?.secret;
+
+    if (secretRef) {
+      const secret = allSecrets.value.find(
+        (s) => s.metadata.name === secretRef.name && s.metadata.namespace === secretRef.namespace
+      );
+
+      if (!secret?.data?.user || !secret?.data?.password) {
+        return;
+      }
+    } else {
+      return;
+    }
+
+    options.push({
+      label: p.metadata.name,
+      value: p.metadata.name,
+    });
+  });
+
+  return options;
+});
+
+// When the provider selection changes, populate or clear the fields
+watch(selectedProvider, (val) => {
+  testPassed.value = false;
+  testResult.value = null;
+  testError.value = null;
+
+  if (val === CREATE_NEW) {
+    providerName.value = '';
+    url.value = '';
+    username.value = '';
+    password.value = '';
+    skipTlsVerify.value = false;
+    createdProvider.value = null;
+    createdSecret.value = null;
+  } else {
+    const provider = allProviders.value.find(
+      (p) => p.metadata.name === val && p.metadata.namespace === FORKLIFT_NAMESPACE
+    );
+
+    if (provider) {
+      providerName.value = provider.metadata.name;
+      url.value = provider.spec?.url || '';
+
+      const secretRef = provider.spec?.secret;
+
+      if (secretRef) {
+        const secret = allSecrets.value.find(
+          (s) => s.metadata.name === secretRef.name && s.metadata.namespace === secretRef.namespace
+        );
+
+        if (secret?.data) {
+          username.value = decodeSecretValue(secret.data.user);
+          password.value = decodeSecretValue(secret.data.password);
+          skipTlsVerify.value = decodeSecretValue(secret.data.insecureSkipVerify) === 'true';
+        }
+      }
+
+      createdProvider.value = provider;
+    }
+  }
+});
+
+// Reset test state when any field changes (only for create new)
+watch([providerName, url, username, password], () => {
+  if (!isExistingProvider.value) {
+    testPassed.value = false;
+    testResult.value = null;
+  }
+});
+
+// Emit ready/complete when testPassed changes
+watch(testPassed, (val) => {
+  emit('ready', val);
+  if (val) {
+    emit('complete', { providerName: providerName.value, provider: createdProvider.value });
+  }
+}, { immediate: true });
+
+// Emit form-valid when form validity changes
+watch(isFormValid, (val) => {
+  emit('form-valid', val);
+}, { immediate: true });
+
+watch(testing, (val) => {
+  emit('testing', val);
+}, { immediate: true });
+
+const pollProviderReady = async(name) => {
+  const inStore = store.getters['currentProduct'].inStore;
+  const namespace = FORKLIFT_NAMESPACE;
+  const maxAttempts = 15;
+  let attempts = 0;
+
+  while (attempts < maxAttempts) {
+    await new Promise((resolve) => setTimeout(resolve, 2000));
+    attempts++;
+
+    const refreshed = await store.dispatch(`${ inStore }/find`, {
+      type: HCI.FORKLIFT_PROVIDER,
+      id:   `${ namespace }/${ name }`,
+      opt:  { force: true }
+    });
+
+    const conditions = refreshed?.status?.conditions || [];
+    const connectionCondition = conditions.find((c) => c.type === 'ConnectionTestSucceeded');
+    const readyCondition = conditions.find((c) => c.type === 'Ready');
+
+    if (connectionCondition) {
+      if (connectionCondition.status === 'True') {
+        return { connected: true };
+      }
+
+      return { connected: false, errorMsg: connectionCondition.message || t('harvester.addons.vmMigration.errors.connectionFailed') };
+    }
+
+    if (readyCondition) {
+      if (readyCondition.status === 'True') {
+        return { connected: true };
+      } else if (readyCondition.status === 'False') {
+        return { connected: false, errorMsg: readyCondition.message || t('harvester.addons.vmMigration.errors.providerNotReady') };
+      }
+    }
+  }
+
+  return { connected: false, errorMsg: '' };
+};
+
+const handlePollResult = ({ connected, errorMsg }, buttonCb) => {
+  if (connected) {
+    testPassed.value = true;
+    testResult.value = t('harvester.addons.vmMigration.configureProvider.testSuccess');
+    testing.value = false;
+    buttonCb(true);
+  } else {
+    testError.value = errorMsg || t('harvester.addons.vmMigration.configureProvider.testTimeout');
+    testing.value = false;
+    buttonCb(false);
+  }
+};
+
+const cleanupCreatedResources = async() => {
+  if (createdProvider.value) {
+    try {
+      await createdProvider.value.remove();
+    } catch (e) {}
+    createdProvider.value = null;
+    createdSecret.value = null;
+  } else if (createdSecret.value) {
+    try {
+      await createdSecret.value.remove();
+    } catch (e) {}
+    createdSecret.value = null;
+  }
+};
+
+const testConnection = async(buttonCb) => {
+  testResult.value = null;
+  testError.value = null;
+  testing.value = true;
+
+  if (!providerName.value || !url.value || !username.value || !password.value) {
+    testError.value = t('harvester.addons.vmMigration.configureProvider.testMissingFields');
+    testing.value = false;
+    buttonCb(false);
+
+    return;
+  }
+
+  const inStore = store.getters['currentProduct'].inStore;
+
+  // Edit mode: update existing provider URL + secret, then poll
+  if (props.editMode && createdProvider.value) {
+    try {
+      createdProvider.value.spec.url = url.value;
+      await createdProvider.value.save();
+
+      const secretRef = createdProvider.value.spec?.secret;
+
+      if (secretRef && createdSecret.value) {
+        createdSecret.value.data = {
+          user:               btoa(username.value),
+          password:           btoa(password.value),
+          insecureSkipVerify: btoa(String(skipTlsVerify.value)),
+          url:                btoa(url.value),
+        };
+        await createdSecret.value.save();
+      }
+
+      handlePollResult(await pollProviderReady(providerName.value), buttonCb);
+    } catch (err) {
+      testError.value = err.message || t('harvester.addons.vmMigration.configureProvider.testFailed');
+      testing.value = false;
+      buttonCb(false);
+    }
+
+    return;
+  }
+
+  // For existing providers, just poll for Ready/ConnectionTestSucceeded status
+  if (isExistingProvider.value) {
+    try {
+      handlePollResult(await pollProviderReady(providerName.value), buttonCb);
+    } catch (err) {
+      testError.value = err.message || t('harvester.addons.vmMigration.configureProvider.testFailed');
+      testing.value = false;
+      buttonCb(false);
+    }
+
+    return;
+  }
+
+  // For new providers, create provider + secret then poll
+  try {
+    await cleanupCreatedResources();
+
+    const namespace = FORKLIFT_NAMESPACE;
+    const secretName = `${ providerName.value }-creds-${ randomStr(4).toLowerCase() }`;
+
+    const provider = await store.dispatch(`${ inStore }/create`, {
+      type:     HCI.FORKLIFT_PROVIDER,
+      metadata: {
+        name: providerName.value,
+        namespace,
+      },
+      spec: {
+        type:   'vsphere',
+        url:    url.value,
+        secret: {
+          name: secretName,
+          namespace,
+        },
+      }
+    });
+
+    await provider.save();
+    createdProvider.value = provider;
+
+    const newSecret = await store.dispatch(`${ inStore }/create`, {
+      type:     SECRET,
+      metadata: {
+        name:            secretName,
+        namespace,
+        labels:          { 'ui.forklift/created-for-resource-type': 'forklift.konveyor.io.provider' },
+        ownerReferences: [
+          {
+            apiVersion:         'forklift.konveyor.io/v1beta1',
+            kind:               'Provider',
+            name:               provider.metadata.name,
+            uid:                provider.metadata.uid,
+            blockOwnerDeletion: true,
+          },
+        ],
+      }
+    });
+
+    newSecret['_type'] = 'Opaque';
+    newSecret['data'] = {
+      user:               btoa(username.value),
+      password:           btoa(password.value),
+      insecureSkipVerify: btoa(String(skipTlsVerify.value)),
+      url:                btoa(url.value),
+    };
+
+    await newSecret.save();
+    createdSecret.value = newSecret;
+
+    const result = await pollProviderReady(providerName.value);
+
+    if (!result.connected) {
+      await cleanupCreatedResources();
+    }
+
+    handlePollResult(result, buttonCb);
+  } catch (err) {
+    await cleanupCreatedResources();
+    testError.value = err.message || t('harvester.addons.vmMigration.configureProvider.testFailed');
+    testing.value = false;
+    buttonCb(false);
+  }
+};
+
+const init = async() => {
+  const inStore = store.getters['currentProduct'].inStore;
+
+  try {
+    allProviders.value = await store.dispatch(`${ inStore }/findAll`, { type: HCI.FORKLIFT_PROVIDER });
+
+    allSecrets.value = await store.dispatch(`${ inStore }/findAll`, {
+      type: SECRET,
+      opt:  { labelSelector: `ui.forklift/created-for-resource-type=${ HCI.FORKLIFT_PROVIDER }` }
+    });
+  } catch (e) {
+    errors.value = [e?.message || t('harvester.addons.vmMigration.errors.failedLoadProviders')];
+  }
+
+  loading.value = false;
+};
+
+init();
+
+const clickTestButton = () => {
+  testBtnRef.value?.$el?.click();
+};
+
+defineExpose({ testConnection, clickTestButton });
+</script>
+
+<template>
+  <Loading v-if="loading" />
+  <div
+    v-else
+    class="configure-provider-step"
+  >
+    <p class="text-deemphasized line-height-20">
+      {{ t('harvester.addons.vmMigration.configureProvider.description') }}
+    </p>
+
+    <div class="configure-provider-step-content">
+      <h3 class="table-title m-0">
+        <b>{{ t('harvester.addons.vmMigration.configureProvider.connectionDetails') }}</b>
+      </h3>
+
+      <Banner
+        class="requirements-banner m-0"
+        color="info"
+      >
+        <div class="requirements-banner-content">
+          <span class="requirements-banner-title">{{ t('harvester.addons.vmMigration.configureProvider.requirementsTitle') }}</span>
+          <br>
+          <span>{{ t('harvester.addons.vmMigration.configureProvider.requirementsText') }}</span>
+        </div>
+      </Banner>
+
+      <div class="configure-provider-step-form">
+        <div v-if="!createOnly && !editMode">
+          <LabeledSelect
+            v-model:value="selectedProvider"
+            :label="t('harvester.addons.vmMigration.configureProvider.providerSelect')"
+            :options="providerOptions"
+            :reduce="(opt) => opt.value"
+          />
+        </div>
+
+        <div
+          v-if="!isExistingProvider || editMode"
+        >
+          <LabeledInput
+            v-model:value="providerName"
+            :label="t('harvester.addons.vmMigration.configureProvider.name')"
+            :disabled="editMode"
+            required
+          />
+        </div>
+
+        <div>
+          <LabeledInput
+            v-model:value="url"
+            :label="t('harvester.addons.vmMigration.configureProvider.urlLabel')"
+            :placeholder="t('harvester.addons.vmMigration.configureProvider.urlPlaceholder')"
+            :disabled="isExistingProvider && !editMode"
+            required
+          />
+          <p class="text-deemphasized mt-5">
+            {{ t('harvester.addons.vmMigration.configureProvider.urlHint') }}
+          </p>
+        </div>
+
+        <div class="row">
+          <div class="col span-6">
+            <LabeledInput
+              v-model:value="username"
+              :label="t('harvester.addons.vmMigration.fields.username')"
+              :disabled="isExistingProvider && !editMode"
+              required
+            />
+          </div>
+          <div class="col span-6">
+            <LabeledInput
+              v-model:value="password"
+              type="password"
+              :label="t('harvester.addons.vmMigration.fields.password')"
+              :disabled="isExistingProvider && !editMode"
+              required
+            />
+          </div>
+        </div>
+
+        <div>
+          <Checkbox
+            v-model:value="skipTlsVerify"
+            :label="t('harvester.addons.vmMigration.configureProvider.skipSsl')"
+            :disabled="isExistingProvider && !editMode"
+          />
+          <p class="text-deemphasized ml-20">
+            {{ t('harvester.addons.vmMigration.configureProvider.skipSslHint') }}
+          </p>
+        </div>
+        <div>
+          <AsyncButton
+            ref="testBtnRef"
+            mode="test"
+            :disabled="!isFormValid"
+            :action-label="t('harvester.addons.vmMigration.configureProvider.testConnection.action')"
+            :waiting-label="t('harvester.addons.vmMigration.configureProvider.testConnection.waiting')"
+            :success-label="t('harvester.addons.vmMigration.configureProvider.testConnection.success')"
+            :error-label="t('harvester.addons.vmMigration.configureProvider.testConnection.error')"
+            :action-color="'role-secondary'"
+            :waiting-color="'role-disabled'"
+            @click="testConnection"
+          />
+        </div>
+
+        <Banner
+          v-if="testResult"
+          color="success"
+        >
+          {{ testResult }}
+        </Banner>
+        <Banner
+          v-if="testError"
+          color="error"
+        >
+          {{ testError }}
+        </Banner>
+        <Banner
+          v-for="(err, i) in errors"
+          :key="i"
+          color="error"
+        >
+          {{ err }}
+        </Banner>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+  .requirements-banner {
+    font-weight: 400;
+
+    .requirements-banner-title {
+      font-weight: 600;
+    }
+  }
+
+  .configure-provider-step {
+    display: flex;
+    flex-direction: column;
+    gap: 24px;
+
+    .line-height-20 {
+      line-height: 20px;
+    }
+
+    .configure-provider-step-content {
+      display: flex;
+      flex-direction: column;
+      gap: 12px;
+
+      .configure-provider-step-form {
+        display: flex;
+        flex-direction: column;
+        gap: 20px;
+      }
+    }
+
+    :deep(.checkbox-label) {
+      color: var(--body-text);
+    }
+  }
+</style>
@@ -0,0 +1,184 @@
+<script setup>
+import { computed } from 'vue';
+import { useStore } from 'vuex';
+import LabeledSelect from '@shell/components/form/LabeledSelect';
+import { RcItemCard } from '@components/RcItemCard';
+import { useI18n } from '@shell/composables/useI18n';
+
+const store = useStore();
+const { t } = useI18n(store);
+
+const props = defineProps({
+  title:       { type: String, required: true },
+  description: { type: String, default: '' },
+  entries:     { type: Array, default: () => [] },
+  options:     { type: Array, default: () => [] },
+  placeholder: { type: String, default: '' },
+  showUsedBy:  { type: Boolean, default: false },
+  clearable:   { type: Boolean, default: false },
+});
+
+const selectOptions = computed(() => {
+  if (!props.clearable) {
+    return props.options;
+  }
+
+  return [
+    {
+      label: t('harvester.addons.vmMigration.configureMappings.removeMap'),
+      value: null,
+      kind:  'highlighted',
+    },
+    {
+      label:    'divider',
+      disabled: true,
+      kind:     'divider',
+    },
+    {
+      label:    `${ props.placeholder }:`,
+      disabled: true,
+      kind:     'title',
+    },
+    ...props.options,
+  ];
+});
+</script>
+
+<template>
+  <div class="mapping-column">
+    <div>
+      <h3 class="mapping-section-title">
+        {{ title }}
+      </h3>
+      <p
+        v-if="description"
+        class="text-deemphasized line-height-20"
+      >
+        {{ description }}
+      </p>
+    </div>
+
+    <RcItemCard
+      v-for="entry in entries"
+      :id="entry._key"
+      :key="entry._key"
+      :variant="'small'"
+      :header="{}"
+      class="bg-light-gray"
+    >
+      <template #item-card-content>
+        <div class="card-content-column">
+          <div class="card-content-row">
+            <div class="mapping-source">
+              <span class="source-name">{{ entry.name }}</span>
+              <slot
+                name="source-detail"
+                :entry="entry"
+              />
+            </div>
+            <div :class="['mapping-arrow', entry.target ? 'text-success' : 'text-deemphasized']">
+              <i
+                class="icon icon-right-arrow-alt"
+                aria-hidden="true"
+              />
+            </div>
+            <div class="mapping-target">
+              <LabeledSelect
+                v-model:value="entry.target"
+                :options="selectOptions"
+                :placeholder="placeholder+'...'"
+                :searchable="true"
+              />
+            </div>
+          </div>
+          <div v-if="showUsedBy && entry.usedBy && entry.usedBy.length">
+            <span class="used-by">
+              {{ t('harvester.addons.vmMigration.generic.usedBy') }} <b>{{ entry.usedBy.join(', ') }}</b>
+            </span>
+          </div>
+        </div>
+      </template>
+    </RcItemCard>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+  .mapping-column {
+    display: flex;
+    gap: 12px;
+    flex-direction: column;
+
+    :deep(.item-card-header) {
+      display: none;
+    }
+  }
+
+  .mapping-section-title {
+    font-weight: 600;
+    margin: 0 0 5px 0;
+    line-height: 28px;
+  }
+
+  .card-content-row {
+    display: flex;
+    align-items: center;
+    gap: 16px;
+    width: 100%;
+  }
+
+  .card-content-column {
+    display: flex;
+    flex-direction: column;
+    gap: 8px;
+    width: 100%;
+  }
+
+  .mapping-source {
+    display: flex;
+    flex-direction: column;
+    flex: 2;
+    min-width: 100px;
+    font-size: 14px;
+    line-height: 20px;
+
+    .source-name {
+      font-weight: 600;
+      font-size: 14px;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+    }
+
+    .source-detail {
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+    }
+
+    .used-by {
+      margin-top: 4px;
+      font-size: 14px;
+      line-height: 24px;
+    }
+  }
+
+  .mapping-arrow {
+    font-size: 22px;
+    flex-shrink: 0;
+  }
+
+  .mapping-target {
+    flex: 3;
+    min-width: 0;
+    overflow: hidden;
+  }
+
+  .line-height-20 {
+    line-height: 20px;
+  }
+
+  .bg-light-gray {
+    background-color: var(--category-active) !important;
+    border: 0;
+  }
+</style>
@@ -0,0 +1,439 @@
+<script setup>
+import { ref, computed, watch } from 'vue';
+import { useStore } from 'vuex';
+import Loading from '@shell/components/Loading';
+import { Banner } from '@components/Banner';
+import { RcItemCard } from '@components/RcItemCard';
+import { LabeledInput } from '@components/Form/LabeledInput';
+import MappingsCell from '../MappingsCell';
+import { useI18n } from '@shell/composables/useI18n';
+import { HCI } from '../../types';
+import { FORKLIFT_NAMESPACE } from '../../config/harvester-map';
+import {
+  FORKLIFT_API_VERSION, buildNetworkMapEntries, buildStorageMapEntries, bytesToGB, mbToGB
+} from '../../utils/forklift';
+
+const props = defineProps({
+  providerName:   { type: String, default: '' },
+  provider:       { type: Object, default: null },
+  selectedVms:    { type: Array, default: () => [] },
+  mappingEntries:  { type: Object, default: null },
+  stepData:        { type: Object, required: true },
+});
+
+const emit = defineEmits(['ready']);
+
+const store = useStore();
+const { t } = useI18n(store);
+
+const vms = ref([]);
+const networkMappings = ref([]);
+const storageMappings = ref([]);
+const planName = ref('');
+const errors = ref([]);
+const loading = ref(true);
+
+// Restore persisted state
+planName.value = props.stepData.planName;
+
+const NAMESPACE = FORKLIFT_NAMESPACE;
+const TARGET_NAMESPACE = 'default';
+
+watch(planName, (val) => {
+  props.stepData.planName = val;
+  emit('ready', !!val);
+}, { immediate: true });
+
+const totalVCpu = computed(() => vms.value.reduce((sum, vm) => sum + (vm.cpuCount || vm.numCPU || 0), 0));
+
+const totalMemoryGB = computed(() => {
+  const totalMB = vms.value.reduce((sum, vm) => sum + (vm.memoryMB || vm.memory || 0), 0);
+
+  return mbToGB(totalMB);
+});
+
+const totalStorageGB = computed(() => {
+  let totalBytes = 0;
+
+  vms.value.forEach((vm) => {
+    if (vm.disks && vm.disks.length > 0) {
+      totalBytes += vm.disks.reduce((sum, d) => sum + (d.capacity || 0), 0);
+    }
+  });
+
+  return bytesToGB(totalBytes);
+});
+
+const vmCards = computed(() => {
+  return vms.value.map((vm) => {
+    const cpus = vm.cpuCount || vm.numCPU || 0;
+    const memMB = vm.memoryMB || vm.memory || 0;
+    const memGB = memMB ? t('harvester.addons.vmMigration.generic.memoryGb', { value: mbToGB(memMB) }) : '-';
+
+    let totalDiskBytes = 0;
+
+    if (vm.disks && vm.disks.length > 0) {
+      totalDiskBytes = vm.disks.reduce((sum, d) => sum + (d.capacity || 0), 0);
+    }
+
+    const diskDisplay = totalDiskBytes ? t('harvester.addons.vmMigration.generic.memoryGb', { value: bytesToGB(totalDiskBytes) }) : '-';
+    const os = vm.guestName || vm.guestOS || vm.os || '-';
+
+    const vmNetworkMappings = networkMappings.value.filter((m) => m.usedBy && m.usedBy.includes(vm.name || vm.id));
+    const vmStorageMappings = storageMappings.value.filter((m) => m.usedBy && m.usedBy.includes(vm.name || vm.id));
+
+    return {
+      id:              vm.id,
+      name:            vm.name || vm.id,
+      os,
+      cpus,
+      memGB,
+      diskDisplay,
+      networkMappings: vmNetworkMappings,
+      storageMappings: vmStorageMappings,
+    };
+  });
+});
+
+const startMigrationAction = async() => {
+  const inStore = store.getters['currentProduct'].inStore;
+
+  const providerRef = {
+    source: {
+      apiVersion: FORKLIFT_API_VERSION,
+      kind:       'Provider',
+      name:       props.providerName,
+      namespace:  NAMESPACE,
+    },
+    destination: {
+      apiVersion: FORKLIFT_API_VERSION,
+      kind:       'Provider',
+      name:       'host',
+      namespace:  NAMESPACE,
+    },
+  };
+
+  const networkMapName = `${ planName.value }-network-map`;
+  const storageMapName = `${ planName.value }-storage-map`;
+
+  const networkMap = await store.dispatch(`${ inStore }/create`, {
+    type:     HCI.FORKLIFT_NETWORK_MAP,
+    metadata: { name: networkMapName, namespace: NAMESPACE },
+    spec:     { map: buildNetworkMapEntries(props.mappingEntries?.networkEntries || [], NAMESPACE), provider: providerRef },
+  });
+
+  await networkMap.save();
+
+  const storageMap = await store.dispatch(`${ inStore }/create`, {
+    type:     HCI.FORKLIFT_STORAGE_MAP,
+    metadata: { name: storageMapName, namespace: NAMESPACE },
+    spec:     { map: buildStorageMapEntries(props.mappingEntries?.storageEntries || []), provider: providerRef },
+  });
+
+  await storageMap.save();
+
+  const plan = await store.dispatch(`${ inStore }/create`, {
+    type:     HCI.FORKLIFT_PLAN,
+    metadata: { name: planName.value, namespace: NAMESPACE },
+    spec:     {
+      provider: providerRef,
+      map:      {
+        network: {
+          apiVersion: FORKLIFT_API_VERSION,
+          kind:       'NetworkMap',
+          name:       networkMapName,
+          namespace:  NAMESPACE,
+        },
+        storage: {
+          apiVersion: FORKLIFT_API_VERSION,
+          kind:       'StorageMap',
+          name:       storageMapName,
+          namespace:  NAMESPACE,
+        },
+      },
+      targetNamespace: TARGET_NAMESPACE,
+      vms:             vms.value.map((vm) => ({ id: vm.id, name: vm.name || vm.id })),
+      warm:            false,
+    },
+  });
+
+  await plan.save();
+
+  const planOwnerRef = {
+    apiVersion:         FORKLIFT_API_VERSION,
+    kind:               'Plan',
+    name:               plan.metadata.name,
+    uid:                plan.metadata.uid,
+    blockOwnerDeletion: true,
+  };
+
+  networkMap.metadata.ownerReferences = [planOwnerRef];
+  await networkMap.save();
+  storageMap.metadata.ownerReferences = [planOwnerRef];
+  await storageMap.save();
+
+  // Kick off the first migration through the model so the Migration payload
+  // lives in a single place (also reused by the dashboard start/restart action).
+  await plan.startMigration();
+};
+
+const init = () => {
+  vms.value = props.selectedVms;
+
+  if (props.mappingEntries) {
+    networkMappings.value = (props.mappingEntries.networkEntries || []).map((entry) => ({
+      source: entry.name || entry.id,
+      target: entry.target || '',
+      usedBy: entry.usedBy || [],
+    }));
+
+    storageMappings.value = (props.mappingEntries.storageEntries || []).map((entry) => ({
+      source: entry.name || entry.id,
+      target: entry.target || '',
+      usedBy: entry.usedBy || [],
+    }));
+  }
+
+  loading.value = false;
+};
+
+init();
+
+defineExpose({ startMigration: startMigrationAction });
+</script>
+
+<template>
+  <Loading v-if="loading" />
+  <div
+    v-else
+    class="review-migration"
+  >
+    <div
+      class="review-migration-content"
+    >
+      <!-- Migration Details Summary -->
+      <div class="migration-details">
+        <h3 class="section-title m-0">
+          {{ t('harvester.addons.vmMigration.reviewMigration.migrationDetails') }}
+        </h3>
+        <div class="span-9">
+          <LabeledInput
+            v-model:value="planName"
+            :label="t('harvester.addons.vmMigration.reviewMigration.planName')"
+            :placeholder="t('harvester.addons.vmMigration.reviewMigration.planNamePlaceholder')"
+            required
+          />
+        </div>
+        <div class="details-grid span-9">
+          <div class="detail-column">
+            <div class="detail-item">
+              <span class="detail-label">{{ t('harvester.addons.vmMigration.reviewMigration.totalVms') }}</span>
+              <span class="detail-value detail-value-large">{{ vms.length }}</span>
+            </div>
+          </div>
+          <div class="detail-column">
+            <div class="detail-item">
+              <span class="detail-label">{{ t('harvester.addons.vmMigration.reviewMigration.source') }}</span>
+            </div>
+            <div class="detail-item">
+              <span class="detail-value">{{ providerName }}</span>
+            </div>
+          </div>
+          <div class="detail-column">
+            <div class="detail-item">
+              <span class="detail-label">{{ t('harvester.addons.vmMigration.reviewMigration.targetNamespace') }}</span>
+            </div>
+            <div class="detail-item">
+              <span class="detail-value">{{ TARGET_NAMESPACE }}</span>
+            </div>
+          </div>
+          <div class="detail-column">
+            <div class="detail-item">
+              <span class="detail-label">{{ t('harvester.addons.vmMigration.reviewMigration.vcpu') }}</span>
+              <span class="detail-value">{{ totalVCpu }}</span>
+            </div>
+            <div class="detail-item">
+              <span class="detail-label">{{ t('harvester.addons.vmMigration.reviewMigration.memory') }}</span>
+              <span class="detail-value">{{ t('harvester.addons.vmMigration.generic.memoryGb', { value: totalMemoryGB }) }}</span>
+            </div>
+            <div class="detail-item">
+              <span class="detail-label">{{ t('harvester.addons.vmMigration.reviewMigration.storage') }}</span>
+              <span class="detail-value">{{ t('harvester.addons.vmMigration.generic.memoryGb', { value: totalStorageGB }) }}</span>
+            </div>
+          </div>
+          <div class="detail-column grid-column-2">
+            <div class="detail-item">
+              <span class="detail-label">{{ t('harvester.addons.vmMigration.reviewMigration.migrationMode') }}</span>
+            </div>
+            <div class="detail-item">
+              <span class="detail-value">
+                {{ t('harvester.addons.vmMigration.reviewMigration.coldMigration') }}
+              </span>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <!-- Virtual Machines -->
+      <div class="vm-section">
+        <h3 class="section-title m-0">
+          {{ t('harvester.addons.vmMigration.reviewMigration.virtualMachines') }} ({{ vms.length }})
+        </h3>
+
+        <div class="vm-cards-grid">
+          <RcItemCard
+            v-for="vm in vmCards"
+            :id="vm.id"
+            :key="vm.id"
+            :variant="'small'"
+            :header="{ title: { text: vm.name } }"
+          >
+            <template #item-card-content>
+              <div class="vm-card-content">
+                <div class="vm-card-specs">
+                  <span class="vm-os text-deemphasized">{{ vm.os }}</span>
+                  <span class="vm-resources">
+                    <i
+                      class="icon icon-disk"
+                      aria-hidden="true"
+                    />
+                    {{ t('harvester.addons.vmMigration.generic.vCpu', { count: vm.cpus }) }} &bull; {{ vm.memGB }} &bull; {{ vm.diskDisplay }}
+                  </span>
+                </div>
+                <MappingsCell
+                  :network-entries="vm.networkMappings.map(m => `${m.source} → ${m.target}`)"
+                  :storage-entries="vm.storageMappings.map(m => `${m.source} → ${m.target}`)"
+                />
+              </div>
+            </template>
+          </RcItemCard>
+        </div>
+      </div>
+
+      <!-- Cold Migration Warning -->
+      <Banner
+        color="warning"
+        class="m-0"
+      >
+        <div>
+          <span class="banner-title">{{ t('harvester.addons.vmMigration.reviewMigration.warningTitle') }}</span><br>
+          {{ t('harvester.addons.vmMigration.reviewMigration.warningMessage') }}
+        </div>
+      </Banner>
+
+      <!-- Error banner -->
+      <Banner
+        v-for="(err, i) in errors"
+        :key="i"
+        color="error"
+        :label="err"
+      />
+    </div>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+  .review-migration {
+    gap: 36px;
+  }
+
+  .review-migration-content {
+    display: flex;
+    flex-direction: column;
+    gap: 20px;
+  }
+
+  .section-title {
+    font-weight: 600;
+  }
+
+  .details-grid {
+    display: grid;
+    grid-template-columns: minmax(230px, 1fr) 1fr 1fr;
+    grid-template-rows: minmax(0, 1fr) minmax(0, 1fr);
+    gap: 12px clamp(64px, 8vw, 128px);
+    line-height: 20px;
+  }
+
+  .detail-column {
+    display: flex;
+    flex-direction: column;
+    gap: 4px;
+
+    &.grid-column-2 {
+        grid-column: span 2;
+    }
+  }
+
+  .detail-item {
+    display: flex;
+    flex-direction: row;
+    justify-content: space-between;
+
+    .detail-label {
+      font-size: 14px;
+      color: var(--muted);
+    }
+
+    .detail-value {
+      font-weight: 600;
+      font-size: 14px;
+
+      &.detail-value-large {
+        font-size: 24px;
+      }
+    }
+  }
+
+  .vm-cards-grid {
+    display: grid;
+    grid-template-columns: repeat(auto-fill, minmax(380px, 1fr));
+    gap: 16px;
+  }
+
+  .vm-card-content {
+    display: flex;
+    flex-direction: column;
+    gap: 16px;
+    line-height: 20px;
+  }
+
+  .vm-card-specs {
+    display: flex;
+    flex-direction: row;
+    gap: 16px;
+    align-items: center;
+
+    .vm-os {
+      font-size: 14px;
+    }
+
+    .vm-resources {
+      font-size: 14px;
+      color: var(--muted);
+      display: inline-flex;
+      align-items: center;
+      gap: 8px;
+    }
+  }
+
+  .banner-title {
+    font-weight: 600;
+  }
+
+  .migration-details {
+    display: flex;
+    flex-direction: column;
+    gap: 12px;
+  }
+
+  header {
+    margin: 0;
+  }
+
+  .vm-section {
+    display: flex;
+    flex-direction: column;
+    gap: 16px;
+  }
+</style>
@@ -0,0 +1,578 @@
+<script setup>
+import {
+  ref, computed, watch, nextTick, onBeforeUnmount, toRefs
+} from 'vue';
+import { useStore } from 'vuex';
+import Loading from '@shell/components/Loading';
+import SortableTable from '@shell/components/SortableTable';
+import { Banner } from '@components/Banner';
+import { BadgeState } from '@components/BadgeState';
+import { useI18n } from '@shell/composables/useI18n';
+import { bytesToGB, mbToGB } from '../../utils/forklift';
+
+const props = defineProps({
+  providerName: { type: String, default: '' },
+  provider:     { type: Object, default: null },
+  stepData:     { type: Object, required: true },
+});
+
+const emit = defineEmits(['complete', 'loading']);
+
+const store = useStore();
+const { t } = useI18n(store);
+
+const { discoveredVMs, selectedVMIds, tableRows } = toRefs(props.stepData);
+
+const selectedVMs = ref([]);
+const loading = ref(true);
+const networkMap = ref({});
+const datastoreMap = ref({});
+const sortableTableRef = ref(null);
+const allVMsSelected = ref(false);
+const errors = ref([]);
+let skipNextSelectionEvent = false;
+
+const lastFetchedAt = ref(null);
+const now = ref(Date.now());
+
+const formatElapsed = (ms) => {
+  const totalMinutes = Math.floor(ms / 60000);
+  const hours = Math.floor(totalMinutes / 60);
+  const minutes = totalMinutes % 60;
+
+  if (hours > 0 && minutes > 0) {
+    return t('harvester.addons.vmMigration.generic.elapsed.hoursAndMinutes', { hours, minutes });
+  }
+
+  if (hours > 0) {
+    return t('harvester.addons.vmMigration.generic.elapsed.hours', { hours });
+  }
+
+  return t('harvester.addons.vmMigration.generic.elapsed.minutes', { minutes: Math.max(1, minutes) });
+};
+
+const lastSyncedTime = computed(() => {
+  if (!lastFetchedAt.value) {
+    return '';
+  }
+
+  return formatElapsed(now.value - lastFetchedAt.value);
+});
+
+const nowTimer = setInterval(() => {
+  now.value = Date.now();
+}, 30000);
+
+onBeforeUnmount(() => {
+  clearInterval(nowTimer);
+});
+
+// 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;
+}
+
+const vmCount = computed(() => discoveredVMs.value.length);
+const selectedCount = computed(() => selectedVMs.value.length);
+
+const showSelectAllBanner = computed(() => {
+  if (allVMsSelected.value) {
+    return true;
+  }
+
+  const pagedRows = sortableTableRef.value?.pagedRows || [];
+
+  if (pagedRows.length === 0) {
+    return false;
+  }
+
+  const allPageSelected = pagedRows.every((row) => selectedVMIds.value.has(row._original?.id));
+
+  return allPageSelected && tableRows.value.length > pagedRows.length;
+});
+
+const theadElement = computed(() => sortableTableRef.value?.$el?.querySelector('thead'));
+
+const headers = [
+  {
+    name:     'vmName',
+    labelKey: 'harvester.addons.vmMigration.selectVms.columns.vmName',
+    value:    'vmName',
+    sort:     ['vmName'],
+    subLabel: t('harvester.addons.vmMigration.generic.identifier'),
+  },
+  {
+    name:     'os',
+    labelKey: 'harvester.addons.vmMigration.selectVms.columns.os',
+    value:    'os',
+    sort:     ['os'],
+  },
+  {
+    name:     'resources',
+    labelKey: 'harvester.addons.vmMigration.selectVms.columns.resources',
+    value:    'resources',
+    sort:     false,
+  },
+  {
+    name:     'powerState',
+    labelKey: 'harvester.addons.vmMigration.selectVms.columns.powerState',
+    value:    'powerState',
+    sort:     ['powerState'],
+  },
+  {
+    name:     'network',
+    labelKey: 'harvester.addons.vmMigration.selectVms.columns.network',
+    value:    'network',
+    sort:     ['network'],
+    subLabel: t('harvester.addons.vmMigration.generic.identifier'),
+  },
+  {
+    name:     'datastore',
+    labelKey: 'harvester.addons.vmMigration.selectVms.columns.datastore',
+    value:    'datastore',
+    sort:     ['datastore'],
+    subLabel: t('harvester.addons.vmMigration.generic.identifier'),
+  },
+];
+
+const buildTableRows = () => {
+  return discoveredVMs.value.map((vm) => {
+    const cpus = vm.cpuCount || vm.numCPU || '-';
+    const memMB = vm.memoryMB || vm.memory || 0;
+    const memGB = memMB ? t('harvester.addons.vmMigration.generic.memoryGb', { value: mbToGB(memMB) }) : '-';
+
+    let totalDiskBytes = 0;
+
+    if (vm.disks && vm.disks.length > 0) {
+      totalDiskBytes = vm.disks.reduce((sum, d) => sum + (d.capacity || 0), 0);
+    }
+
+    const diskDisplay = totalDiskBytes ? t('harvester.addons.vmMigration.generic.memoryGb', { value: bytesToGB(totalDiskBytes) }) : '-';
+    const rawPowerState = vm.powerState || vm.status?.phase || '-';
+    const powerState = rawPowerState.replace(/([a-z])([A-Z])/g, '$1 $2').replace(/^./, (c) => c.toUpperCase());
+
+    let networks = [];
+
+    if (vm.networks && vm.networks.length > 0) {
+      networks = vm.networks.map((n) => ({
+        name:   n.name || networkMap.value[n.id] || n.id || n,
+        id:     n.id || '',
+        vlanId: n.vlanId || '',
+      }));
+    }
+
+    const datastores = [];
+
+    if (vm.disks && vm.disks.length > 0) {
+      const seen = new Set();
+
+      vm.disks.forEach((d) => {
+        const dsId = d.datastore?.id || d.datastore?.name;
+
+        if (dsId && !seen.has(dsId)) {
+          seen.add(dsId);
+          datastores.push({
+            name:     d.datastore?.name || datastoreMap.value[dsId] || dsId,
+            id:       d.datastore?.id || '',
+            type:     d.datastore?.type || '',
+            capacity: d.capacity || 0,
+          });
+        }
+      });
+    }
+
+    return {
+      _original:        vm,
+      _key:             vm.id || vm.vmId || vm.metadata?.name,
+      vmName:           vm.name || vm.metadata?.name || '-',
+      vmId:             vm.id || vm.vmId || vm.metadata?.name || '-',
+      os:               vm.guestName || vm.guestOS || vm.os || '-',
+      resourcesDisplay: t('harvester.addons.vmMigration.generic.vCpu', { count: cpus }),
+      resourcesSub:     `${ memGB } • ${ diskDisplay }`,
+      powerState,
+      powerStateClass:  powerState.toLowerCase().includes('on') || powerState.toLowerCase().includes('running') ? 'power-on' : 'power-off',
+      networks,
+      network:          networks.map((n) => n.name).join(', ') || '-',
+      datastores,
+      datastore:        datastores.map((d) => d.name).join(', ') || '-',
+    };
+  });
+};
+
+const onSelect = (rows) => {
+  if (skipNextSelectionEvent) {
+    return;
+  }
+
+  const currentPageRows = sortableTableRef.value?.pagedRows || [];
+  const selectedKeys = new Set(rows.map((r) => r._key));
+
+  currentPageRows.forEach((row) => {
+    const vmId = row._original?.id;
+
+    if (selectedKeys.has(row._key)) {
+      selectedVMIds.value.add(vmId);
+    } else {
+      selectedVMIds.value.delete(vmId);
+    }
+  });
+
+  allVMsSelected.value = selectedVMIds.value.size === discoveredVMs.value.length;
+  selectedVMs.value = discoveredVMs.value.filter((vm) => selectedVMIds.value.has(vm.id));
+
+  emit('complete', { selectedVMs: selectedVMs.value });
+};
+
+const clearSelection = () => {
+  allVMsSelected.value = false;
+  selectedVMIds.value = new Set();
+  selectedVMs.value = [];
+
+  nextTick(() => {
+    const table = sortableTableRef.value;
+
+    if (table) {
+      table.clearSelection();
+    }
+  });
+};
+
+const selectAllVMs = () => {
+  allVMsSelected.value = true;
+  selectedVMIds.value = new Set(discoveredVMs.value.map((vm) => vm.id));
+  selectedVMs.value = discoveredVMs.value.slice();
+};
+
+watch(
+  () => sortableTableRef.value?.page,
+  () => {
+    skipNextSelectionEvent = true;
+
+    nextTick(() => {
+      const table = sortableTableRef.value;
+
+      if (!table) {
+        return;
+      }
+
+      const rowsToReselect = (table.pagedRows || []).filter((row) => selectedVMIds.value.has(row._original?.id));
+
+      if (rowsToReselect.length > 0) {
+        table.update(rowsToReselect, []);
+      }
+
+      skipNextSelectionEvent = false;
+    });
+  }
+);
+
+const refreshing = ref(false);
+
+const isLoading = computed(() => loading.value || refreshing.value);
+
+watch(isLoading, (val) => {
+  emit('loading', val);
+}, { immediate: true });
+
+const fetchVMs = async() => {
+  if (!props.provider) {
+    return;
+  }
+
+  const inStore = store.getters['currentProduct'].inStore;
+  const providerUid = props.provider.metadata.uid;
+  const providerType = props.provider.spec?.type || 'vsphere';
+  const baseUrl = store.getters['harvester-common/getHarvesterClusterUrl'](
+    `v1/harvester/providers/${ providerType }/${ providerUid }`
+  );
+
+  const [vmsResp, networksResp, datastoresResp] = await Promise.all([
+    store.dispatch(`${ inStore }/request`, { url: `${ baseUrl }/vms` }),
+    store.dispatch(`${ inStore }/request`, { url: `${ baseUrl }/networks` }).catch(() => []),
+    store.dispatch(`${ inStore }/request`, { url: `${ baseUrl }/datastores` }).catch(() => []),
+  ]);
+
+  if (Array.isArray(vmsResp)) {
+    discoveredVMs.value = vmsResp;
+  } else if (vmsResp?.data && Array.isArray(vmsResp.data)) {
+    discoveredVMs.value = vmsResp.data;
+  }
+
+  const networks = Array.isArray(networksResp) ? networksResp : (networksResp?.data || []);
+  const datastores = Array.isArray(datastoresResp) ? datastoresResp : (datastoresResp?.data || []);
+
+  networkMap.value = networks.reduce((map, n) => {
+    map[n.id] = n.name;
+
+    return map;
+  }, {});
+  datastoreMap.value = datastores.reduce((map, d) => {
+    map[d.id] = d.name;
+
+    return map;
+  }, {});
+
+  lastFetchedAt.value = Date.now();
+  tableRows.value = buildTableRows();
+};
+
+const refreshVMs = async() => {
+  refreshing.value = true;
+  skipNextSelectionEvent = true;
+
+  const previousSelectedIds = new Set(selectedVMIds.value);
+
+  try {
+    errors.value = [];
+    await fetchVMs();
+  } catch (e) {
+    discoveredVMs.value = [];
+    tableRows.value = [];
+    errors.value = [e?.message || t('harvester.addons.vmMigration.errors.failedRefreshVms')];
+  }
+
+  selectedVMIds.value = new Set(
+    discoveredVMs.value
+      .filter((vm) => previousSelectedIds.has(vm.id))
+      .map((vm) => vm.id)
+  );
+  selectedVMs.value = discoveredVMs.value.filter((vm) => selectedVMIds.value.has(vm.id));
+  allVMsSelected.value = selectedVMIds.value.size > 0 && selectedVMIds.value.size === discoveredVMs.value.length;
+
+  props.stepData.discoveredVMs = discoveredVMs.value;
+  props.stepData.selectedVMIds = selectedVMIds.value;
+  props.stepData.tableRows = tableRows.value;
+  emit('complete', { selectedVMs: selectedVMs.value });
+  refreshing.value = false;
+
+  await nextTick();
+
+  const table = sortableTableRef.value;
+
+  if (table) {
+    const rowsToReselect = (table.pagedRows || []).filter((row) => selectedVMIds.value.has(row._original?.id));
+
+    if (rowsToReselect.length > 0) {
+      table.update(rowsToReselect, []);
+    }
+  }
+
+  skipNextSelectionEvent = false;
+};
+
+const init = async() => {
+  if (discoveredVMs.value.length > 0) {
+    if (!lastFetchedAt.value) {
+      lastFetchedAt.value = Date.now();
+    }
+    tableRows.value = buildTableRows();
+    loading.value = false;
+
+    return;
+  }
+
+  try {
+    await fetchVMs();
+  } catch (e) {
+    discoveredVMs.value = [];
+    errors.value = [e?.message || t('harvester.addons.vmMigration.errors.failedLoadVms')];
+  }
+
+  loading.value = false;
+};
+
+// Emit initial complete if VMs are already selected (restored from stepData)
+if (selectedVMs.value.length > 0) {
+  emit('complete', { selectedVMs: selectedVMs.value });
+}
+
+init();
+</script>
+
+<template>
+  <Loading v-if="loading || refreshing" />
+  <div
+    v-else
+    class="select-vms-step"
+  >
+    <Banner
+      v-for="(err, i) in errors"
+      :key="i"
+      color="error"
+      :label="err"
+    />
+    <p class="text-deemphasized line-height-20">
+      {{ t('harvester.addons.vmMigration.selectVms.discovered', { count: vmCount }) }}
+      <router-link
+        v-if="provider"
+        class="provider-link"
+        :to="provider._detailLocation"
+      >
+        {{ providerName }}
+      </router-link>
+      <br>
+      <span
+        v-if="lastSyncedTime"
+      >
+        {{ t('harvester.addons.vmMigration.selectVms.lastSynced', { time: lastSyncedTime }) }}
+        <a
+          role="button"
+          class="text-bold"
+          :class="{ disabled: refreshing }"
+          @click.prevent="refreshVMs"
+        >
+          {{ t('harvester.addons.vmMigration.selectVms.refreshNow') }}
+        </a>
+      </span>
+    </p>
+    <!-- Discovered VMs table -->
+    <SortableTable
+      ref="sortableTableRef"
+      :rows="tableRows"
+      :headers="headers"
+      :search="true"
+      :table-actions="true"
+      :row-actions="false"
+      :groupable="false"
+      :paging="true"
+      :rows-per-page="20"
+      key-field="_key"
+      @selection="onSelect"
+    >
+      <template #header-left>
+        <div class="vm-table-title">
+          <h3 class="m-0">
+            {{ t('harvester.addons.vmMigration.selectVms.availableVms') }}
+          </h3>
+          <span class="text-deemphasized">{{ selectedCount }} {{ t('harvester.addons.vmMigration.selectVms.selected') }}</span>
+        </div>
+      </template>
+      <template #cell:vmName="{ row }">
+        <div class="vm-name-cell">
+          <span class="vm-name">{{ row.vmName }}</span>
+          <span class="vm-id text-deemphasized">{{ row.vmId }}</span>
+        </div>
+      </template>
+      <template #cell:resources="{ row }">
+        <span>{{ row.resourcesDisplay }}</span><br>
+        <span class="text-deemphasized">{{ row.resourcesSub }}</span>
+      </template>
+      <template #cell:powerState="{ row }">
+        <BadgeState
+          :label="row.powerState"
+          :color="row.powerStateClass === 'power-on' ? 'bg-warning' : 'bg-darker'"
+        />
+      </template>
+      <template #cell:network="{ row }">
+        <div>
+          <div
+            v-for="(net, i) in row.networks"
+            :key="i"
+            :class="{ 'mt-4': i > 0 }"
+          >
+            <span>{{ net.name }}</span><br>
+            <span class="text-deemphasized">{{ net.id }}</span>
+          </div>
+        </div>
+      </template>
+      <template #cell:datastore="{ row }">
+        <div>
+          <div
+            v-for="(ds, i) in row.datastores"
+            :key="i"
+            :class="{ 'mt-4': i > 0 }"
+          >
+            <span>{{ ds.name }}</span><br>
+            <span class="text-deemphasized">{{ ds.id }}</span>
+          </div>
+        </div>
+      </template>
+    </SortableTable>
+
+    <Teleport
+      v-if="showSelectAllBanner && theadElement"
+      :to="theadElement"
+    >
+      <tr class="select-all-banner-row">
+        <td
+          :colspan="headers.length + 1"
+          class="select-all-banner-cell"
+        >
+          <template v-if="allVMsSelected">
+            <span>{{ t('harvester.addons.vmMigration.selectVms.selectAllBanner.allSelected') }}</span>
+            <a
+              role="button"
+              @click.prevent="clearSelection"
+            >
+              {{ t('harvester.addons.vmMigration.selectVms.selectAllBanner.clearSelection') }}
+            </a>
+          </template>
+          <template v-else>
+            <span>{{ t('harvester.addons.vmMigration.selectVms.selectAllBanner.pageOnly') }}</span>
+            <a
+              role="button"
+              @click.prevent="selectAllVMs"
+            >
+              {{ t('harvester.addons.vmMigration.selectVms.selectAllBanner.selectAll', { count: vmCount }) }}
+            </a>
+          </template>
+        </td>
+      </tr>
+    </Teleport>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+  .vm-table-title {
+    .text-deemphasized {
+      font-size: 13px;
+    }
+  }
+
+  .vm-name-cell {
+    display: flex;
+    flex-direction: column;
+    font-size: 14px;
+
+    .vm-name {
+      line-height: 20px;
+    }
+
+    .vm-id {
+      line-height: 20px;
+    }
+  }
+
+  .select-vms-step {
+    position: relative;
+    display: flex;
+    flex-direction: column;
+    gap: 20px;
+
+    .line-height-20 {
+      line-height: 20px;
+    }
+  }
+
+  :deep(.select-all-banner-row) {
+    .select-all-banner-cell {
+      text-align: center;
+      padding: 8px 16px;
+      background-color: var(--sortable-table-header-bg);
+      border-bottom: 1px solid var(--border);
+      font-size: 13px;
+
+      a {
+        color: var(--primary);
+        cursor: pointer;
+        font-weight: 600;
+        margin-left: 5px;
+
+        &:hover {
+          text-decoration: underline;
+        }
+      }
+    }
+  }
+</style>