From e85dcaa67a3dd23fb98fb4fdb0a5f469538eb4fc Mon Sep 17 00:00:00 2001
From: Daan Hoogland <daan@onecht.net>
Date: Wed, 24 Jan 2024 15:10:07 +0100
Subject: [PATCH 1/2] add compute offering details in UI

---
 ui/src/components/view/DetailsTab.vue | 17 ++++++++++++++++-
 ui/src/config/section/offering.js     | 16 ++++++++++++++++
 2 files changed, 32 insertions(+), 1 deletion(-)

diff --git a/ui/src/components/view/DetailsTab.vue b/ui/src/components/view/DetailsTab.vue
index b04830b3c3c9..caa6c55054cb 100644
--- a/ui/src/components/view/DetailsTab.vue
+++ b/ui/src/components/view/DetailsTab.vue
@@ -37,7 +37,7 @@
     size="small"
     :dataSource="fetchDetails()">
     <template #renderItem="{item}">
-      <a-list-item v-if="item in dataResource && !customDisplayItems.includes(item)">
+      <a-list-item v-if="item in dataResource && !customDisplayItems.includes(item) || offeringDetails.includes(item)">
         <div>
           <strong>{{ item === 'service' ? $t('label.supportedservices') : $t('label.' + String(item).toLowerCase()) }}</strong>
           <br/>
@@ -91,6 +91,18 @@
               </span>
             </div>
           </div>
+          <div v-else-if="$route.meta.name === 'computeoffering' && item === 'mincpunumber' && dataResource.serviceofferingdetails">
+            {{ dataResource.serviceofferingdetails.mincpunumber }}
+          </div>
+          <div v-else-if="$route.meta.name === 'computeoffering' && item === 'maxcpunumber' && dataResource.serviceofferingdetails">
+            {{ dataResource.serviceofferingdetails.maxcpunumber }}
+          </div>
+          <div v-else-if="$route.meta.name === 'computeoffering' && item === 'minmemory' && dataResource.serviceofferingdetails">
+            {{ dataResource.serviceofferingdetails.minmemory }}
+          </div>
+          <div v-else-if="$route.meta.name === 'computeoffering' && item === 'maxmemory' && dataResource.serviceofferingdetails">
+            {{ dataResource.serviceofferingdetails.maxmemory }}
+          </div>
           <div v-else>{{ dataResource[item] }}</div>
         </div>
       </a-list-item>
@@ -255,6 +267,9 @@ export default {
       }
       return null
     },
+    offeringDetails () {
+      return ['maxcpunumber', 'mincpunumber', 'minmemory', 'maxmemory']
+    },
     ipV6Address () {
       if (this.dataResource.nic && this.dataResource.nic.length > 0) {
         return this.dataResource.nic.filter(e => { return e.ip6address }).map(e => { return e.ip6address }).join(', ')
diff --git a/ui/src/config/section/offering.js b/ui/src/config/section/offering.js
index c44de61fb795..d0a2dec2d684 100644
--- a/ui/src/config/section/offering.js
+++ b/ui/src/config/section/offering.js
@@ -47,6 +47,22 @@ export default {
           store.getters.apis.createServiceOffering.params.filter(x => x.name === 'rootdisksize').length > 0) {
           fields.splice(12, 0, 'rootdisksize')
         }
+        if (store.getters.apis.createServiceOffering &&
+          store.getters.apis.createServiceOffering.params.filter(x => x.name === 'mincpunumber').length > 0) {
+          fields.push('mincpunumber')
+        }
+        if (store.getters.apis.createServiceOffering &&
+          store.getters.apis.createServiceOffering.params.filter(x => x.name === 'maxcpunumber').length > 0) {
+          fields.push('maxcpunumber')
+        }
+        if (store.getters.apis.createServiceOffering &&
+          store.getters.apis.createServiceOffering.params.filter(x => x.name === 'minmemory').length > 0) {
+          fields.push('minmemory')
+        }
+        if (store.getters.apis.createServiceOffering &&
+          store.getters.apis.createServiceOffering.params.filter(x => x.name === 'maxmemory').length > 0) {
+          fields.push('maxmemory')
+        }
         return fields
       },
       resourceType: 'ServiceOffering',

From a4c761422df64f6bff4763a89ad7dec643747577 Mon Sep 17 00:00:00 2001
From: Daan Hoogland <daan@onecht.net>
Date: Wed, 24 Jan 2024 16:10:29 +0100
Subject: [PATCH 2/2] Pearl's sugestions

---
 ui/src/components/view/DetailsTab.vue | 15 +++------------
 ui/src/config/section/offering.js     | 21 ++++++---------------
 2 files changed, 9 insertions(+), 27 deletions(-)

diff --git a/ui/src/components/view/DetailsTab.vue b/ui/src/components/view/DetailsTab.vue
index caa6c55054cb..5f2709642975 100644
--- a/ui/src/components/view/DetailsTab.vue
+++ b/ui/src/components/view/DetailsTab.vue
@@ -37,7 +37,7 @@
     size="small"
     :dataSource="fetchDetails()">
     <template #renderItem="{item}">
-      <a-list-item v-if="item in dataResource && !customDisplayItems.includes(item) || offeringDetails.includes(item)">
+      <a-list-item v-if="(item in dataResource && !customDisplayItems.includes(item)) || (offeringDetails.includes(item) && dataResource.serviceofferingdetails)">
         <div>
           <strong>{{ item === 'service' ? $t('label.supportedservices') : $t('label.' + String(item).toLowerCase()) }}</strong>
           <br/>
@@ -91,17 +91,8 @@
               </span>
             </div>
           </div>
-          <div v-else-if="$route.meta.name === 'computeoffering' && item === 'mincpunumber' && dataResource.serviceofferingdetails">
-            {{ dataResource.serviceofferingdetails.mincpunumber }}
-          </div>
-          <div v-else-if="$route.meta.name === 'computeoffering' && item === 'maxcpunumber' && dataResource.serviceofferingdetails">
-            {{ dataResource.serviceofferingdetails.maxcpunumber }}
-          </div>
-          <div v-else-if="$route.meta.name === 'computeoffering' && item === 'minmemory' && dataResource.serviceofferingdetails">
-            {{ dataResource.serviceofferingdetails.minmemory }}
-          </div>
-          <div v-else-if="$route.meta.name === 'computeoffering' && item === 'maxmemory' && dataResource.serviceofferingdetails">
-            {{ dataResource.serviceofferingdetails.maxmemory }}
+          <div v-else-if="$route.meta.name === 'computeoffering' && offeringDetails.includes(item)">
+            {{ dataResource.serviceofferingdetails[item] }}
           </div>
           <div v-else>{{ dataResource[item] }}</div>
         </div>
diff --git a/ui/src/config/section/offering.js b/ui/src/config/section/offering.js
index d0a2dec2d684..2d0bf837f380 100644
--- a/ui/src/config/section/offering.js
+++ b/ui/src/config/section/offering.js
@@ -47,21 +47,12 @@ export default {
           store.getters.apis.createServiceOffering.params.filter(x => x.name === 'rootdisksize').length > 0) {
           fields.splice(12, 0, 'rootdisksize')
         }
-        if (store.getters.apis.createServiceOffering &&
-          store.getters.apis.createServiceOffering.params.filter(x => x.name === 'mincpunumber').length > 0) {
-          fields.push('mincpunumber')
-        }
-        if (store.getters.apis.createServiceOffering &&
-          store.getters.apis.createServiceOffering.params.filter(x => x.name === 'maxcpunumber').length > 0) {
-          fields.push('maxcpunumber')
-        }
-        if (store.getters.apis.createServiceOffering &&
-          store.getters.apis.createServiceOffering.params.filter(x => x.name === 'minmemory').length > 0) {
-          fields.push('minmemory')
-        }
-        if (store.getters.apis.createServiceOffering &&
-          store.getters.apis.createServiceOffering.params.filter(x => x.name === 'maxmemory').length > 0) {
-          fields.push('maxmemory')
+        const detailFields = ['minmemory', 'maxmemory', 'mincpunumber', 'maxcpunumber']
+        for (const field of detailFields) {
+          if (store.getters.apis.createServiceOffering &&
+              store.getters.apis.createServiceOffering.params.filter(x => field === x.name).length > 0) {
+            fields.push(field)
+          }
         }
         return fields
       },