From 72b841567effae00fb5a4717f37477201b1dc3b0 Mon Sep 17 00:00:00 2001
From: Rohit Yadav <rohit.yadav@shapeblue.com>
Date: Fri, 3 May 2024 18:23:12 +0530
Subject: [PATCH] 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                    |  2 +-
 ui/src/config/section/infra/hosts.js         |  2 +-
 ui/src/views/AutogenView.vue                 |  2 +-
 ui/src/views/dashboard/CapacityDashboard.vue | 22 ++++++++++----------
 4 files changed, 14 insertions(+), 14 deletions(-)

diff --git a/ui/public/locales/en.json b/ui/public/locales/en.json
index a5cc98a0565..1d2be76694c 100644
--- a/ui/public/locales/en.json
+++ b/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",
diff --git a/ui/src/config/section/infra/hosts.js b/ui/src/config/section/infra/hosts.js
index 376bd973a84..290f7b592d6 100644
--- a/ui/src/config/section/infra/hosts.js
+++ b/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' },
diff --git a/ui/src/views/AutogenView.vue b/ui/src/views/AutogenView.vue
index acb6fd6e89c..5162086aa75 100644
--- a/ui/src/views/AutogenView.vue
+++ b/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 {
diff --git a/ui/src/views/dashboard/CapacityDashboard.vue b/ui/src/views/dashboard/CapacityDashboard.vue
index a174e60b709..f39e14fc634 100644
--- a/ui/src/views/dashboard/CapacityDashboard.vue
+++ b/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 = {