fix(webui): fix the problem with status and memoryChart not updating …

…correctly (#78) * fix: fix the problem with status and memoryChart not updating correctly * fix: remove unnecessary action after selecting a host and optimize comments
Seagate · Dec 20, 2024 · 154c362 · 154c362
1 parent 8fceb5e
commit 154c362
Show file tree

Hide file tree

Showing 4 changed files with 53 additions and 7 deletions.
diff --git a/webui/src/components/Appliance/Appliances.vue b/webui/src/components/Appliance/Appliances.vue
@@ -1978,7 +1978,28 @@ export default {
       async (newBladeId, oldBladeId) => {
         if (newBladeId !== null && newBladeId !== oldBladeId) {
           loading.value = true;
-          // Fetch resources and ports for the newly selected blade
+
+          await bladeStore.fetchBladeById(
+            applianceStore.selectedApplianceId,
+            newBladeId
+          );
+
+          const selectedBlade = bladeStore.blades.find(
+            (blade) => blade.id === newBladeId
+          );
+
+          if (selectedBlade) {
+            bladeStore.selectBlade(
+              selectedBlade.id,
+              selectedBlade.ipAddress,
+              selectedBlade.port,
+              Number(selectedBlade.totalMemoryAvailableMiB),
+              Number(selectedBlade.totalMemoryAllocatedMiB),
+              selectedBlade.status
+            );
+          }
+
+          // Fetch resources, ports and memory for the newly selected blade
           await Promise.all([
             bladeResourceStore.fetchMemoryResources(
               applianceStore.selectedApplianceId,
@@ -1992,10 +2013,6 @@ export default {
               applianceStore.selectedApplianceId,
               newBladeId
             ),
-            bladeStore.fetchBladeById(
-              applianceStore.selectedApplianceId,
-              newBladeId
-            ),
           ]);
           // Update the URL with the new blade ID
           updateUrlWithBladeId(applianceStore.selectedApplianceId, newBladeId);

diff --git a/webui/src/components/CXL-Hosts/CXL-Hosts.vue b/webui/src/components/CXL-Hosts/CXL-Hosts.vue
@@ -1127,12 +1127,28 @@ export default {
       async (newHostId, oldHostId) => {
         if (newHostId !== null && newHostId !== oldHostId) {
           loading.value = true;
-          // Fetch resources and ports for the newly selected host
+
+          await hostStore.fetchHostById(newHostId);
+
+          const selectedHost = hostStore.hosts.find(
+            (host) => host.id === newHostId
+          );
+
+          if (selectedHost) {
+            hostStore.selectHost(
+              selectedHost.id,
+              selectedHost.ipAddress,
+              selectedHost.port,
+              selectedHost.localMemoryMiB,
+              selectedHost.status
+            );
+          }
+
+          // Fetch ports and memory for the newly selected host
           await Promise.all([
             hostPortStore.hostPortStore(newHostId),
             hostMemoryStore.hostMemoryStore(newHostId),
             hostMemoryDeviceStore.hostMemoryDeviceStore(newHostId),
-            hostStore.fetchHostById(newHostId),
           ]);
 
           // Update the URL with the new host ID

diff --git a/webui/src/components/Stores/BladeStore.ts b/webui/src/components/Stores/BladeStore.ts
@@ -65,6 +65,12 @@ export const useBladeStore = defineStore('blade', {
 
                 this.updateSelectedBladeStatus(blade.status)
 
+                // Update blades in case this blade changes
+                if (blade) {
+                    this.blades = this.blades.map((b) =>
+                        b.id === bladeId ? detailsResponseOfBlade.data : b
+                    );
+                }
                 return blade;
             } catch (error) {
                 console.error("Error fetching blade by id:", error);

diff --git a/webui/src/components/Stores/HostStore.ts b/webui/src/components/Stores/HostStore.ts
@@ -95,6 +95,13 @@ export const useHostStore = defineStore("host", {
         const host = detailsResponseOfHost.data;
         this.updateSelectHostStatus(host.status);
 
+        // Update hosts in case this host changes
+        if (host) {
+          this.hosts = this.hosts.map((h) =>
+            h.id === hostId ? detailsResponseOfHost.data : h
+          );
+        }
+
         return host;
       } catch (error) {
         console.error("Error fetching host by id:", error);