From 3599a40edeb8cad09b60c92508724fd51e841ec9 Mon Sep 17 00:00:00 2001
From: Lucas Lara <llara@localhost>
Date: Mon, 24 Mar 2025 12:37:44 +0100
Subject: [PATCH] Enhance Global Status component to display detailed
 repository status including RAM and CPU usage

---
 .../global-status.component.html              | 35 ++++++++++++++-----
 .../global-status/global-status.component.ts  | 35 +++++++++++++++++--
 .../status-tab/status-tab.component.html      | 24 +++++++++++++
 .../status-tab/status-tab.component.ts        |  4 +++
 4 files changed, 88 insertions(+), 10 deletions(-)

diff --git a/ogWebconsole/src/app/components/global-status/global-status.component.html b/ogWebconsole/src/app/components/global-status/global-status.component.html
index d185adb..7ffc407 100644
--- a/ogWebconsole/src/app/components/global-status/global-status.component.html
+++ b/ogWebconsole/src/app/components/global-status/global-status.component.html
@@ -40,14 +40,33 @@
       </div>
     </mat-tab>
 
-    <mat-tab label="{{'repositories' | translate}}"> 
-      <div *ngIf="!loading" class="content-container">
-        <ul>
-          <li *ngFor="let repository of repositories">
-            {{ repository.name }}
-          </li>
-        </ul>
-      </div>
+    <mat-tab label="Repositorios">
+      <mat-tab-group>
+        <mat-tab *ngFor="let repository of repositories" [label]="repository.name">
+          <div *ngIf="repositoryStatuses[repository.id]">
+            <app-status-tab
+              [loading]="loading"
+              [diskUsage]="repositoryStatuses[repository.id].disk"
+              [servicesStatus]="repositoryStatuses[repository.id].services"
+              [processesStatus]="repositoryStatuses[repository.id].processes"
+              [ramUsage]="repositoryStatuses[repository.id].ram"
+              [cpuUsage]="repositoryStatuses[repository.id].cpu"
+              [diskUsageChartData]="[
+                { name: 'Usado', value: repositoryStatuses[repository.id].disk.used },
+                { name: 'Disponible', value: repositoryStatuses[repository.id].disk.available }
+              ]"
+              [ramUsageChartData]="[
+                { name: 'Usado', value: repositoryStatuses[repository.id].ram.used },
+                { name: 'Disponible', value: repositoryStatuses[repository.id].ram.available }
+              ]"
+              [view]="view"
+              [colorScheme]="colorScheme"
+              [isDoughnut]="isDoughnut"
+              [showLabels]="showLabels">
+            </app-status-tab>
+          </div>
+        </mat-tab>
+      </mat-tab-group>
     </mat-tab>
     
   </mat-tab-group>
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 7b8b6eb..78d6545 100644
--- a/ogWebconsole/src/app/components/global-status/global-status.component.ts
+++ b/ogWebconsole/src/app/components/global-status/global-status.component.ts
@@ -22,6 +22,7 @@ export class GlobalStatusComponent implements OnInit {
   view: [number, number] = [400, 220];
   repositoriesUrl: string;
   repositories: any[] = [];
+  repositoryStatuses: { [key: string]: any } = {};
 
   ogBootApiUrl: string;
   ogBootDiskUsage: any = {};
@@ -99,6 +100,9 @@ export class GlobalStatusComponent implements OnInit {
     this.http.get<any>(`${this.repositoriesUrl}?page=1&itemsPerPage=10`).subscribe(
       data => {
         this.repositories = data['hydra:member'];
+        this.repositories.forEach(repository => {
+          this.loadRepositoryStatus(repository.id);
+        });
         this.loading = false;
       },
       error => {
@@ -108,6 +112,30 @@ export class GlobalStatusComponent implements OnInit {
     );
   }
 
+  loadRepositoryStatus(repositoryId: string): void {
+    this.http.get<any>(`${this.baseUrl}/image-repositories/server/${repositoryId}/status`).subscribe(
+      data => {
+        const output = data.output;
+        this.repositoryStatuses[repositoryId] = {
+          ...output,
+          disk: {
+            ...output.disk,
+            used: parseFloat(output.disk.used),
+            available: parseFloat(output.disk.available)
+          },
+          ram: {
+            ...output.ram,
+            used: parseFloat(output.ram.used),
+            available: parseFloat(output.ram.available)
+          }
+        };
+      },
+      error => {
+        console.error(`Error fetching status for repository ${repositoryId}`, error);
+      }
+    );
+  }
+
   loadOgBootStatus(): void {
     this.isDhcp = false;
     this.loadStatus(this.ogBootApiUrl, this.ogBootDiskUsage, this.ogBootServicesStatus, this.ogBootDiskUsageChartData, this.installedOgLives, this.isDhcp);
@@ -121,9 +149,12 @@ export class GlobalStatusComponent implements OnInit {
   onTabChange(event: MatTabChangeEvent): void {
     if (event.tab.textLabel === 'OgBoot') {
       this.loadOgBootStatus();
-    }
-    else if (event.tab.textLabel === 'Dhcp') {
+    } else if (event.tab.textLabel === 'Dhcp') {
       this.loadDhcpStatus();
+    } else if (event.tab.textLabel === 'Repositorios') {
+      if (this.repositories.length === 0) {
+        this.loadRepositories();
+      }
     }
   }
 }
\ No newline at end of file
diff --git a/ogWebconsole/src/app/components/global-status/status-tab/status-tab.component.html b/ogWebconsole/src/app/components/global-status/status-tab/status-tab.component.html
index c0cb099..34bece3 100644
--- a/ogWebconsole/src/app/components/global-status/status-tab/status-tab.component.html
+++ b/ogWebconsole/src/app/components/global-status/status-tab/status-tab.component.html
@@ -19,6 +19,30 @@
     </div>
   </div>
 
+  <!-- RAM Usage Section -->
+  <div class="ram-usage-container">
+    <h3 class="ram-title">Uso de RAM</h3>
+    <div class="ram-usage">
+      <ngx-charts-pie-chart [view]="view" [scheme]="colorScheme" [results]="ramUsageChartData" [doughnut]="isDoughnut"
+        [labels]="showLabels">
+      </ngx-charts-pie-chart>
+      <div class="ram-usage-info">
+        <p>Total: <strong>{{ ramUsage.total }}</strong></p>
+        <p>Usado: <strong>{{ ramUsage.used }}</strong></p>
+        <p>Disponible: <strong>{{ ramUsage.available }}</strong></p>
+        <p>Usado (%): <strong>{{ ramUsage.used_percentage }}</strong></p>
+      </div>
+    </div>
+  </div>
+
+  <!-- CPU Usage Section -->
+  <div class="cpu-usage-container">
+    <h3 class="cpu-title">Uso de CPU</h3>
+    <div class="cpu-usage">
+      <p>Usado: <strong>{{ cpuUsage.used_percentage }}</strong></p>
+    </div>
+  </div>
+
   <!-- Services Status Section -->
   <div class="services-status" joyrideStep="servicesStatusStep" text="{{ 'servicesStatusDescription' | translate }}">
     <h3 class="service-title">{{ 'servicesTitle' | translate }}</h3>
diff --git a/ogWebconsole/src/app/components/global-status/status-tab/status-tab.component.ts b/ogWebconsole/src/app/components/global-status/status-tab/status-tab.component.ts
index e92d6ab..d1d5406 100644
--- a/ogWebconsole/src/app/components/global-status/status-tab/status-tab.component.ts
+++ b/ogWebconsole/src/app/components/global-status/status-tab/status-tab.component.ts
@@ -19,6 +19,10 @@ export class StatusTabComponent {
   };
   @Input() view: [number, number] = [400, 220];
   @Input() isDhcp: boolean = false;
+  @Input() processesStatus: any = {};
+  @Input() ramUsage: any = {};
+  @Input() cpuUsage: any = {};
+  @Input() ramUsageChartData: any[] = [];
 
   getServices(): { name: string, status: string }[] {
     if (!this.servicesStatus) {