ui: add disconnected hosts filter and improve admin dashboard

Adds disconnected as a host filter in the UI
Improve capacity dashboard for admins for large env.

Signed-off-by: Rohit Yadav <rohit.yadav@shapeblue.com>

ui/public/locales/en.json

@@ -678,7 +678,7 @@
 "label.disable.vpc.offering": "Disable VPC offering",
 "label.disable.vpn": "Disable remote access VPN",
 "label.disabled": "Disabled",
-"label.disconnected": "Last disconnected",
+"label.disconnected": "Disconnected",
 "label.disk": "Disk",
 "label.disk.offerings": "Disk offerings",
 "label.disk.selection": "Disk selection",

ui/src/config/section/infra/hosts.js

@@ -25,7 +25,7 @@ export default {
   permission: ['listHostsMetrics'],
   resourceType: 'Host',
   filters: () => {
-    const filters = ['enabled', 'disabled', 'maintenance', 'up', 'down', 'alert']
+    const filters = ['enabled', 'disabled', 'maintenance', 'up', 'down', 'disconnected', 'alert']
     return filters
   },
   params: { type: 'routing' },

ui/src/views/AutogenView.vue

@@ -1638,7 +1638,7 @@ export default {
         if (filter === 'all') {
           delete query.resourcestate
           delete query.state
-        } else if (['up', 'down', 'alert'].includes(filter)) {
+        } else if (['up', 'down', 'disconnected', 'alert'].includes(filter)) {
           delete query.resourcestate
           query.state = filter
         } else {

ui/src/views/dashboard/CapacityDashboard.vue

@@ -41,7 +41,7 @@
         <div class="capacity-dashboard-button">
           <a-button
             shape="round"
-            @click="() => { updateData(zoneSelected); listAlerts(); listEvents(); }">
+            @click="() => { updateData(zoneSelected, true); listAlerts(); listEvents(); }">
             <reload-outlined/>
             {{ $t('label.fetch.latest') }}
           </a-button>
@@ -170,7 +170,7 @@
       </chart-card>
     </a-col>
     <a-col :xs="{ span: 24 }" :lg="{ span: 12 }" :xl="{ span: 8 }" :xxl="{ span: 8 }">
-      <chart-card :loading="loading" class="dashboard-card">
+      <chart-card :loading="capacityLoading" class="dashboard-card">
         <template #title>
           <div class="center">
             <h3><cloud-outlined /> {{ $t('label.compute') }}</h3>
@@ -200,7 +200,7 @@
       </chart-card>
     </a-col>
     <a-col :xs="{ span: 24 }" :lg="{ span: 12 }" :xl="{ span: 8 }" :xxl="{ span: 8 }">
-      <chart-card :loading="loading" class="dashboard-card">
+      <chart-card :loading="capacityLoading" class="dashboard-card">
         <template #title>
           <div class="center">
             <h3><hdd-outlined /> {{ $t('label.storage') }}</h3>
@@ -230,7 +230,7 @@
       </chart-card>
     </a-col>
     <a-col :xs="{ span: 24 }" :lg="{ span: 12 }" :xl="{ span: 8 }" :xxl="{ span: 8 }">
-      <chart-card :loading="loading" class="dashboard-card">
+      <chart-card :loading="capacityLoading" class="dashboard-card">
         <template #title>
           <div class="center">
             <h3><apartment-outlined /> {{ $t('label.network') }}</h3>
@@ -340,6 +340,7 @@ export default {
   data () {
     return {
       loading: true,
+      capacityLoading: true,
       tabKey: 'alerts',
       alerts: [],
       events: [],
@@ -431,9 +432,9 @@ export default {
       this.listEvents()
     },
     listCapacity (zone, latest = false, additive = false) {
-      this.loading = true
+      this.capacityLoading = true
       api('listCapacity', { zoneid: zone.id, fetchlatest: latest }).then(json => {
-        this.loading = false
+        this.capacityLoading = false
         let stats = []
         if (json && json.listcapacityresponse && json.listcapacityresponse.capacity) {
           stats = json.listcapacityresponse.capacity
@@ -457,15 +458,14 @@ export default {
         }
       })
     },
-    updateData (zone) {
+    updateData (zone, latest = false) {
+      this.statsMap = {}
       if (!zone.id) {
-        this.statsMap = {}
         for (const zone of this.zones.slice(1)) {
-          this.listCapacity(zone, true, true)
+          this.listCapacity(zone, latest, true)
         }
       } else {
-        this.statsMap = {}
-        this.listCapacity(this.zoneSelected, true)
+        this.listCapacity(this.zoneSelected, latest)
       }
 
       this.data = {