UI: Fixes in the Usage UI (#10000)

* fixes on usage ui

* dont call API when caller does not have access to it

* handle when lastheartbeat is undefined

* hide last collection datetime when lastheartbeat is undefined

* apply Pearl's suggestions

Co-authored-by: Pearl Dsilva <[email protected]>

* apply Pearl's suggestions

Co-authored-by: Pearl Dsilva <[email protected]>

* apply Pearl's suggestions

Co-authored-by: Pearl Dsilva <[email protected]>

* apply Pearl's suggestions

Co-authored-by: Pearl Dsilva <[email protected]>

* apply Pearl's suggestions

Co-authored-by: Pearl Dsilva <[email protected]>

---------

Co-authored-by: Pearl Dsilva <[email protected]>

Author: bernardodemarco

ui/public/locales/en.json

@@ -1528,6 +1528,7 @@
 "label.networkspeed": "Network speed",
 "label.networktype": "Network type",
 "label.networkwrite": "Network write",
+"label.never": "Never",
 "label.new": "New",
 "label.new.autoscale.vmgroup": "New AutoScaling Group",
 "label.new.instance.group": "New Instance group",

ui/src/components/view/ListView.vue

@@ -26,7 +26,7 @@
     :rowSelection="explicitlyAllowRowSelection || enableGroupAction() || $route.name === 'event' ? {selectedRowKeys: selectedRowKeys, onChange: onSelectChange, columnWidth: 30} : null"
     :rowClassName="getRowClassName"
     @resizeColumn="handleResizeColumn"
-    style="overflow-y: auto"
+    :style="{ 'overflow-y': this.$route.name === 'usage' ? 'hidden' : 'auto' }"
   >
     <template #customFilterDropdown>
       <div style="padding: 8px" class="filter-dropdown">

ui/src/views/infra/UsageRecords.vue

@@ -50,6 +50,7 @@
           <a-row justify="end">
             <a-col>
               <tooltip-button
+                v-if="'generateUsageRecords' in $store.getters.apis"
                 type="primary"
                 icon="hdd-outlined"
                 :tooltip="$t('label.usage.records.generate')"
@@ -58,6 +59,7 @@
             </a-col>&nbsp;&nbsp;
             <a-col>
               <tooltip-button
+                v-if="'removeRawUsageRecords' in $store.getters.apis"
                 type="danger"
                 icon="delete-outlined"
                 :tooltip="$t('label.usage.records.purge')"
@@ -70,7 +72,7 @@
     </a-card>
   </a-affix>
   <a-col>
-    <a-card size="small" :loading="serverMetricsLoading">
+    <a-card size="small" :loading="serverMetricsLoading" v-if="'listUsageServerMetrics' in $store.getters.apis">
       <a-row justify="space-around">
         <a-card-grid style="width: 30%; text-align: center; font-size: small;">
           <a-statistic
@@ -86,10 +88,10 @@
         <a-card-grid style="width: 35%; text-align: center; font-size: small;">
           <a-statistic
             :title="$t('label.lastheartbeat')"
-            :value="$toLocaleDate(serverStats.lastheartbeat)"
+            :value="serverStats.lastheartbeat ? $toLocaleDate(serverStats.lastheartbeat) : $t('label.never')"
             valueStyle="font-size: medium"
           />
-          <a-card-meta :description="getTimeSince(serverStats.collectiontime)" />
+          <a-card-meta v-if="!!serverStats.lastheartbeat" :description="getTimeSince(serverStats.collectiontime)" />
         </a-card-grid>
         <a-card-grid style="width: 35%; text-align: center; font-size: small;">
           <a-statistic
@@ -159,7 +161,7 @@
               />
             </a-form-item>
           </a-col>
-          <a-col :span="3">
+          <a-col :span="3" v-if="'listUsageTypes' in $store.getters.apis">
             <a-form-item
               ref="type"
               name="type"
@@ -173,7 +175,7 @@
               />
             </a-form-item>
           </a-col>
-          <a-col :span="3">
+          <a-col :span="3" v-if="'listUsageTypes' in $store.getters.apis">
             <a-form-item
               ref="id"
               name="id"
@@ -501,6 +503,11 @@ export default {
       }
     },
     listUsageServerMetrics () {
+      if (!('listUsageServerMetrics' in this.$store.getters.apis)) {
+        this.serverMetricsLoading = false
+        return
+      }
+
       this.serverMetricsLoading = true
       api('listUsageServerMetrics').then(json => {
         this.stats = []
@@ -637,6 +644,10 @@ export default {
       })
     },
     getUsageTypes () {
+      if (!('listUsageTypes' in this.$store.getters.apis)) {
+        return
+      }
+
       api('listUsageTypes').then(json => {
         if (json && json.listusagetypesresponse && json.listusagetypesresponse.usagetype) {
           this.usageTypes = [{ id: null, value: '' }, ...json.listusagetypesresponse.usagetype.map(x => {