refactor: some UI flow changes

Signed-off-by: Andy Lee <andy.lee@suse.com>

pkg/harvester/detail/devices.harvesterhci.io.migconfiguration.vue

@@ -1,15 +1,15 @@
 <script>
-import LabelValue from '@shell/components/LabelValue';
 import CreateEditView from '@shell/mixins/create-edit-view';
 import ResourceTabs from '@shell/components/form/ResourceTabs';
 import Tab from '@shell/components/Tabbed/Tab';
+import SortableTable from '@shell/components/SortableTable';
 
 export default {
 
   components: {
     ResourceTabs,
     Tab,
-    LabelValue
+    SortableTable,
   },
 
   mixins: [CreateEditView],
@@ -23,17 +23,79 @@ export default {
     }
   },
 
-  data() {
+  computed: {
-    const { profileStatus } = this.value.status;
+    headers() {
-
+      return [
-    return { profileStatus: profileStatus || [] };
+        {
+          name:        'profileName',
+          labelKey:    'harvester.migconfiguration.tableHeaders.profileName',
+          value:       'name',
+          width:       75,
+          sort:        'name',
+          dashIfEmpty: true,
+        },
+        {
+          name:        'vGPUID',
+          labelKey:    'harvester.migconfiguration.tableHeaders.vGPUID',
+          value:       'vGPUID',
+          width:       75,
+          sort:        'vGPUID',
+          dashIfEmpty: true,
+        },
+        {
+          name:        'available',
+          labelKey:    'harvester.migconfiguration.tableHeaders.available',
+          value:       'available',
+          width:       75,
+          sort:        'available',
+          align:       'center',
+          dashIfEmpty: true,
+        },
+        {
+          name:        'requested',
+          labelKey:    'harvester.migconfiguration.tableHeaders.requested',
+          value:       'requested',
+          width:       75,
+          sort:        'requested',
+          align:       'center',
+          dashIfEmpty: true,
+        },
+        {
+          name:        'total',
+          labelKey:    'harvester.migconfiguration.tableHeaders.total',
+          value:       'total',
+          width:       75,
+          sort:        'total',
+          align:       'center',
+          dashIfEmpty: true,
+        },
+      ];
     },
 
-  methods: {
+    rows() {
-    vGPUIDList(profile) {
+      let out = (this.value?.status?.profileStatus || []).map((profile) => {
-      return profile.vGPUID?.join(', ') || '';
+        const {
-    }
+          id, name, total, available
-  }
+        } = profile;
+
+        return {
+          id,
+          name,
+          total,
+          available,
+          vGPUID: profile.vGPUID?.join(', ') || '',
+        };
+      });
+
+      out = out.map((row) => {
+        const requested = this.value?.spec?.profileSpec.find((p) => p.id === row.id)?.requested || 0;
+
+        return { ...row, requested };
+      });
+
+      return out;
+    },
+  },
 };
 </script>
 
@@ -48,35 +110,15 @@ export default {
       name="Profile Status"
       :label="t('harvester.migconfiguration.profileStatus')"
     >
-      <div
+      <SortableTable
-        v-for="(profile, index) in profileStatus"
+        :headers="headers"
-        :key="index"
+        :rows="rows"
-      >
+        key-field="condition"
-        <h4>{{ profile.name }}</h4>
+        default-sort-by="condition"
-        <div class="row">
+        :table-actions="false"
-          <div class="col span-3">
+        :row-actions="false"
-            <LabelValue
+        :search="false"
-              :name="t('harvester.migconfiguration.total')"
-              :value="profile.total"
-              class="mb-20"
       />
-          </div>
-          <div class="col span-3">
-            <LabelValue
-              :name="t('harvester.migconfiguration.available')"
-              :value="profile.available"
-              class="mb-20"
-            />
-          </div>
-          <div class="col span-3">
-            <LabelValue
-              :name="t('harvester.migconfiguration.vGPUID')"
-              :value="vGPUIDList(profile)"
-              class="mb-20"
-            />
-          </div>
-        </div>
-      </div>
     </Tab>
   </ResourceTabs>
 </template>

pkg/harvester/edit/devices.harvesterhci.io.migconfiguration.vue

@@ -42,6 +42,11 @@ export default {
     }
   },
 
+  computed: {
+    isView() {
+      return this.mode === 'view';
+    },
+  },
   methods: {
     updateBeforeSave() {
       // MIGConfiguration CRD don't have any namespace field,
@@ -52,7 +57,7 @@ export default {
     },
 
     labelTitle(profile) {
-      return `${ profile.name }`;
+      return `${ profile.name } (available : ${ this.available(profile) })`;
     },
 
     available(profile) {
@@ -115,9 +120,10 @@ export default {
           <LabeledInput
             v-model:value="profile.requested"
             :min="0"
+            :disabled="isView"
             type="number"
             class="mb-20"
-            :label="`${t('harvester.migconfiguration.requested')} (available : ${available(profile)})`"
+            :label="`${t('harvester.migconfiguration.requested')}`"
             @update:value="updateRequested($event, profile)"
           />
         </div>

pkg/harvester/l10n/en-us.yaml

@@ -1670,6 +1670,12 @@ harvester:
     infoBanner: To configure the MIG configuration, please disable it first and re-enable after editing the configuration.
     profileSpec: Profile Specs
     profileStatus: Profile Status
+    tableHeaders:
+      profileName: Profile Name
+      total: Total
+      vGPUID: vGPU ID
+      available: Available
+      requested: Requested
     requested: Requested
     available: Available
     total: Total

pkg/harvester/models/devices.harvesterhci.io.migconfiguration.js

@@ -11,9 +11,9 @@ export default class MIGCONFIGURATION extends SteveModel {
     let out = super._availableActions;
 
     out = out.map((action) => {
-      if(action.action === "showConfiguration"){
+      if (action.action === 'showConfiguration') {
         return { ...action, enabled: !this.spec.enabled };
-      }else if (action.action === 'goToEditYaml') {
+      } else if (action.action === 'goToEditYaml') {
         return { ...action, enabled: !this.spec.enabled };
       } else if (action.action === 'goToEdit') {
         // need to wait for status to be disabled or empty value, then allow user to editConfig
@@ -45,6 +45,10 @@ export default class MIGCONFIGURATION extends SteveModel {
     return false;
   }
 
+  get disableResourceDetailDrawer() {
+    return true;
+  }
+
   get canDelete() {
     return false;
   }