From 2f47b2ec66e76f113748767e30bffd0b0a6bb07a Mon Sep 17 00:00:00 2001
From: Lucas Lara <llara@localhost>
Date: Tue, 25 Mar 2025 12:13:46 +0100
Subject: [PATCH] Refactor Global Status component to handle repository loading
 asynchronously and enhance CSS for RAM and process status display

---
 .../global-status/global-status.component.ts  | 18 +++++++++-------
 .../status-tab/status-tab.component.css       | 21 ++++++++++++++-----
 2 files changed, 27 insertions(+), 12 deletions(-)

diff --git a/ogWebconsole/src/app/components/global-status/global-status.component.ts b/ogWebconsole/src/app/components/global-status/global-status.component.ts
index e2deeb5..a9ba295 100644
--- a/ogWebconsole/src/app/components/global-status/global-status.component.ts
+++ b/ogWebconsole/src/app/components/global-status/global-status.component.ts
@@ -101,10 +101,15 @@ export class GlobalStatusComponent implements OnInit {
     this.http.get<any>(`${this.repositoriesUrl}?page=1&itemsPerPage=10`).subscribe(
       data => {
         this.repositories = data['hydra:member'];
+        let remainingRepositories = this.repositories.length;
         this.repositories.forEach(repository => {
-          this.loadRepositoryStatus(repository.uuid);
+          this.loadRepositoryStatus(repository.uuid, () => {
+            remainingRepositories--;
+            if (remainingRepositories === 0) {
+              this.loading = false;
+            }
+          });
         });
-        this.loading = false;
       },
       error => {
         console.error('Error fetching repositories', error);
@@ -112,12 +117,10 @@ export class GlobalStatusComponent implements OnInit {
       }
     );
   }
-
-  loadRepositoryStatus(repositoryUuid: string): void {
-    console.log(`Fetching status for repository UUID: ${repositoryUuid}`);
+  
+  loadRepositoryStatus(repositoryUuid: string, callback: () => void): void {
     this.http.get<any>(`${this.baseUrl}/image-repositories/server/${repositoryUuid}/status`).subscribe(
       data => {
-        console.log(`Data received for repository UUID: ${repositoryUuid}`, data);
         const output = data.output;
         this.repositoryStatuses[repositoryUuid] = {
           ...output,
@@ -132,10 +135,11 @@ export class GlobalStatusComponent implements OnInit {
             available: parseFloat(output.ram.available)
           }
         };
-        console.log(`Repository status updated for UUID: ${repositoryUuid}`, this.repositoryStatuses[repositoryUuid]);
+        callback();
       },
       error => {
         console.error(`Error fetching status for repository ${repositoryUuid}`, error);
+        callback();
       }
     );
   }
diff --git a/ogWebconsole/src/app/components/global-status/status-tab/status-tab.component.css b/ogWebconsole/src/app/components/global-status/status-tab/status-tab.component.css
index f6b674f..46027d1 100644
--- a/ogWebconsole/src/app/components/global-status/status-tab/status-tab.component.css
+++ b/ogWebconsole/src/app/components/global-status/status-tab/status-tab.component.css
@@ -9,7 +9,8 @@
   flex-direction: column;
 }
 
-.disk-usage {
+.disk-usage,
+.ram-usage {
   flex: 1;
   display: flex;
   flex-direction: row;
@@ -17,12 +18,14 @@
   justify-content: center;
 }
 
-.service-list {
+.service-list,
+.process-list {
   margin-top: 0em;
   margin-bottom: 0.5em;
 }
 
-.services-status {
+.services-status,
+.processes-status {
   display: flex;
   flex-direction: column;
 }
@@ -33,6 +36,12 @@
   align-items: center;
 }
 
+.processes-status li {
+  margin: 5px 0;
+  display: flex;
+  align-items: center;
+}
+
 .status-led {
   width: 10px;
   height: 10px;
@@ -49,11 +58,13 @@
   background-color: red;
 }
 
-.disk-title {
+.disk-title,
+.ram-title {
   margin-bottom: 0px;
 }
 
-.service-title {
+.service-title,
+.process-title {
   margin-top: 0px;
 }