add compute offering details in UI (#8563)

* add compute offering details in UI

* Pearl's sugestions

Author: DaanHoogland

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) && dataResource.serviceofferingdetails)">
         <div>
           <strong>{{ item === 'service' ? $t('label.supportedservices') : $t('label.' + String(item).toLowerCase()) }}</strong>
           <br/>
@@ -91,6 +91,9 @@
               </span>
             </div>
           </div>
+          <div v-else-if="$route.meta.name === 'computeoffering' && offeringDetails.includes(item)">
+            {{ dataResource.serviceofferingdetails[item] }}
+          </div>
           <div v-else>{{ dataResource[item] }}</div>
         </div>
       </a-list-item>
@@ -255,6 +258,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(', ')

ui/src/config/section/offering.js

@@ -47,6 +47,13 @@ export default {
           store.getters.apis.createServiceOffering.params.filter(x => x.name === 'rootdisksize').length > 0) {
           fields.splice(12, 0, 'rootdisksize')
         }
+        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
       },
       resourceType: 'ServiceOffering',