feat: add detail page

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

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

@@ -0,0 +1,87 @@
+<script>
+import LabelValue from '@shell/components/LabelValue';
+import CreateEditView from '@shell/mixins/create-edit-view';
+import ResourceTabs from '@shell/components/form/ResourceTabs';
+import DetailText from '@shell/components/DetailText';
+import Tab from '@shell/components/Tabbed/Tab';
+
+export default {
+
+  components: {
+    ResourceTabs,
+    DetailText,
+    Tab,
+    LabelValue
+  },
+
+  mixins: [CreateEditView],
+
+  props: {
+    value: {
+      type:    Object,
+      default: () => {
+        return {};
+      }
+    }
+  },
+
+  data() {
+    console.log('this.value.status', this.value.status);
+    const { profileStatus } = this.value.status;
+    console.log("🚀 ~ profileStatus:", profileStatus)
+    return {
+      profileStatus : profileStatus || []
+    };
+  },
+
+  methods:{
+    vGPUIDList(profile) {
+      return profile.vGPUID?.join(', ') || '';
+    }
+  }
+};
+</script>
+
+<template>
+  <ResourceTabs
+    :value="value"
+    :need-events="false"
+    :need-related="false"
+    :mode="mode"
+  >
+    <Tab
+      name="Profile Status"
+      :label="t('harvester.migconfiguration.profileStatus')"
+    >
+      <div
+        v-for="(profile, index) in profileStatus"
+        :key="index"
+      >
+        <h4>{{ profile.name }}</h4>
+        <div class="row">
+          <div class="col span-3">
+            <LabelValue
+              :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

@@ -67,10 +67,11 @@ export default {
       if (neu === null || neu === '') return;
       const newValue = Number(neu);
 
+      const maxValue = Math.max(this.available(profile), profile.requested)
       if (newValue < 0) {
         profile.requested = 0;
-      } else if (newValue > this.available(profile)) {
-        profile.requested = this.available(profile);
+      } else if (newValue > maxValue) {
+        profile.requested = maxValue;
       } else {
         profile.requested = newValue;
       }

pkg/harvester/l10n/en-us.yaml

@@ -1669,7 +1669,11 @@ harvester:
     label: vGPU MIG Configurations
     infoBanner: To configure the MIG configuration, please disable it first and re-enable after editing the configuration.
     profileSpec: Profile Specs
+    profileStatus: Profile Status
     requested: Requested
+    available: Available
+    total: Total
+    vGPUID: vGPU ID
 
   vgpu:
     label: vGPU Devices

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

@@ -1,5 +1,5 @@
 <script>
-import { STATE, SIMPLE_NAME } from '@shell/config/table-headers';
+import { STATE,  NAME} from '@shell/config/table-headers';
 import { allHash } from '@shell/utils/promise';
 import Banner from '@components/Banner/Banner.vue';
 import Loading from '@shell/components/Loading';
@@ -55,7 +55,7 @@ export default {
     headers() {
       const cols = [
         STATE,
-        SIMPLE_NAME,
+        NAME,
         {
           name:  'address',
           label: 'Address',