feat(forklift): Added icons, critical state, fix grids, action button

Signed-off-by: Marcelo Fukumoto <marcelo.fukumoto@suse.com>

pkg/harvester/pages/c/_cluster/forklift/configure-mappings.vue

@@ -448,7 +448,7 @@ init();
                   <span class="source-detail text-muted">VLAN {{ entry.vlanId || '0' }}</span>
                 </div>
                 <div :class="['mapping-arrow', entry.target ? 'text-success' : 'text-muted']">
-                  <i class="icon icon-upgrade-alt" />
+                  <i class="icon icon-right-arrow-alt" />
                 </div>
                 <div class="mapping-target">
                   <LabeledSelect
@@ -498,7 +498,7 @@ init();
                   >{{ formatStorageDetail(entry) }}</span>
                 </div>
                 <div :class="['mapping-arrow', entry.target ? 'text-success' : 'text-muted']">
-                  <i class="icon icon-upgrade-alt" />
+                  <i class="icon icon-right-arrow-alt" />
                 </div>
                 <div class="mapping-target">
                   <LabeledSelect
@@ -546,7 +546,7 @@ init();
 
   .mappings-columns {
     display: grid;
-    grid-template-columns: 1fr 1fr;
+    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
     gap: 64px;
   }
 
@@ -602,7 +602,6 @@ init();
   .mapping-arrow {
     font-size: 22px;
     flex-shrink: 0;
-    transform: rotate(90deg);
   }
 
   .mapping-target {

pkg/harvester/pages/c/_cluster/forklift/index.vue

@@ -110,6 +110,18 @@ const rows = computed(() => {
       };
     });
 
+    // If no migration progress but we have VMs in the spec, show them at 0%
+    if (plan.vmProgress.length === 0 && plan.spec?.vms?.length > 0) {
+      plan.vmProgress = plan.spec.vms.map((vm) => ({
+        vmName:      vm.name || vm.id || 'Unknown',
+        vmId:        vm.id || '',
+        progress:    0,
+        currentStep: 'Initializing migration',
+        errorMsg:    '',
+        canceled:    false,
+      }));
+    }
+
     plan.progress = plan.vmProgress.length > 0 ? Math.round(plan.vmProgress.reduce((sum, vm) => sum + vm.progress, 0) / plan.vmProgress.length * 10) / 10 : 0;
 
     return plan;
@@ -129,7 +141,6 @@ const headers = [
   {
     ...NAME_COL,
     labelKey: 'harvester.addons.forklift.dashboard.columns.plan',
-    subLabel: 'VM IDs',
   },
   { ...FORKLIFT_PLAN_VM_COUNT, width: 105 },
   {
@@ -203,9 +214,6 @@ init();
           <div class="plan-name">
             {{ row.metadata.name }}
           </div>
-          <div class="plan-vms text-muted">
-            {{ row.vmIdsDisplay }}
-          </div>
         </div>
       </template>
       <template #cell:vmCount="{ row }">
@@ -309,6 +317,7 @@ init();
     display: flex;
     flex-direction: row;
     gap: 8px;
+    align-items: center;
   }
 
   .vm-id {

pkg/harvester/pages/c/_cluster/forklift/review-migration.vue

@@ -113,7 +113,7 @@ const startMigration = async(buttonCb) => {
   const inStore = store.getters['currentProduct'].inStore;
 
   try {
-    const planName = `${ providerName.value }-plan-${ Math.random().toString(36).substring(2, 7) }`;
+    const planName = `${ providerName.value }`;
 
     const planSpec = {
       provider: {
@@ -363,7 +363,7 @@ init();
               <div class="vm-card-specs">
                 <span class="vm-os text-muted">{{ vm.os }}</span>
                 <span class="vm-resources">
-                  <i class="icon icon-dock" />
+                  <i class="icon icon-disk" />
                   {{ vm.cpus }} vCPU &bull; {{ vm.memGB }} &bull; {{ vm.diskDisplay }}
                 </span>
               </div>
@@ -433,7 +433,7 @@ init();
   .details-grid {
     display: grid;
     grid-template-columns: minmax(230px, 1fr) 1fr 1fr;
-    grid-template-rows: 1fr 1fr;
+    grid-template-rows: minmax(0, 1fr) minmax(0, 1fr);
     gap: 12px 128px;
     width: 747px;
     line-height: 20px;