refs #1726 Add error handling and display for data loading in Global Status component

ogWebconsole/src/app/components/global-status/global-status.component.css

@@ -29,4 +29,16 @@ mat-dialog-content {
 .loading-spinner {
     width: 100px;
     height: 100px;
+}
+
+.error-card {
+    margin: 20px auto;
+    max-width: 600px;
+    text-align: center;
+    background-color: rgb(243, 243, 243);
+    color: rgb(48, 48, 48);
+}
+
+.error-card p {
+    margin-top: 0;
 }

ogWebconsole/src/app/components/global-status/global-status.component.html

@@ -7,7 +7,7 @@
   </div>
   <mat-tab-group (selectedTabChange)="onTabChange($event)">
     <mat-tab label="OgBoot">
-      <div *ngIf="!loading" class="content-container">
+      <div *ngIf="!loading && !error" class="content-container">
         <app-status-tab 
           [loading]="loading"
           [diskUsage]="ogBootDiskUsage"
@@ -22,10 +22,15 @@
           [isRepository]="false">
         </app-status-tab>
       </div>
+      <mat-card *ngIf="!loading && error" class="error-card">
+        <mat-card-content>
+          <p>{{ 'errorLoadingData' | translate }}</p>
+        </mat-card-content>
+      </mat-card>
     </mat-tab>
 
     <mat-tab label="Dhcp">
-      <div *ngIf="!loading" class="content-container">
+      <div *ngIf="!loading && !error" class="content-container">
         <app-status-tab
           [loading]="loading"
           [diskUsage]="dhcpDiskUsage"
@@ -40,12 +45,17 @@
           [isRepository]="false">
         </app-status-tab>
       </div>
+      <mat-card *ngIf="!loading && error" class="error-card">
+        <mat-card-content>
+          <p>{{ 'errorLoadingData' | translate }}</p>
+        </mat-card-content>
+      </mat-card>
     </mat-tab>
 
     <mat-tab label="Repositorios">
       <mat-tab-group>
         <mat-tab *ngFor="let repository of repositories" [label]="repository.name">
-          <div *ngIf="repositoryStatuses[repository.uuid]">
+          <div *ngIf="!loading && !error && repositoryStatuses[repository.uuid]">
             <app-status-tab
               [loading]="loading"
               [diskUsage]="repositoryStatuses[repository.uuid].disk"
@@ -69,10 +79,14 @@
               [isRepository]="true">
             </app-status-tab>
           </div>
+          <mat-card *ngIf="!loading && error" class="error-card">
+            <mat-card-content>
+              <p>{{ 'errorLoadingData' | translate }}</p>
+            </mat-card-content>
+          </mat-card>
         </mat-tab>
       </mat-tab-group>
     </mat-tab>
-    
   </mat-tab-group>
 </mat-dialog-content>
 <mat-dialog-actions class="action-container">

ogWebconsole/src/app/components/global-status/global-status.component.ts

@@ -12,6 +12,7 @@ import { MatTabChangeEvent } from '@angular/material/tabs';
 export class GlobalStatusComponent implements OnInit {
   baseUrl: string;
   loading: boolean = false;
+  error: boolean = false;
   installedOgLives: any[] = [];
   subnets: any[] = [];
   showLabels: boolean = true;
@@ -53,10 +54,12 @@ export class GlobalStatusComponent implements OnInit {
 
   loadStatus(apiUrl: string, diskUsage: any, servicesStatus: any, diskUsageChartData: any[], installedOgLives: any[], isDhcp: boolean): void {
     this.loading = true;
+    this.error = false;
     const timeoutId = setTimeout(() => {
       this.loading = false;
+      this.error = true;
       this.toastService.error('Error al sincronizar: Tiempo de espera excedido');
-    }, 5000);
+    }, 3500);
     this.http.get<any>(apiUrl).subscribe({
       next: data => {
         diskUsage.used = data.message.disk_usage.used;
@@ -91,6 +94,7 @@ export class GlobalStatusComponent implements OnInit {
         this.toastService.error('Error al sincronizar');
         console.log(error);
         this.loading = false;
+        this.error = true;
         clearTimeout(timeoutId);
       }
     });
@@ -98,6 +102,12 @@ export class GlobalStatusComponent implements OnInit {
 
   loadRepositories(): void {
     this.loading = true;
+    this.error = false;
+    const timeoutId = setTimeout(() => {
+      this.loading = false;
+      this.error = true;
+      this.toastService.error('Error al sincronizar: Tiempo de espera excedido');
+    }, 3500);
     this.http.get<any>(`${this.repositoriesUrl}?page=1&itemsPerPage=10`).subscribe(
       data => {
         this.repositories = data['hydra:member'];
@@ -107,6 +117,7 @@ export class GlobalStatusComponent implements OnInit {
             remainingRepositories--;
             if (remainingRepositories === 0) {
               this.loading = false;
+              clearTimeout(timeoutId);
             }
           });
         });
@@ -114,11 +125,17 @@ export class GlobalStatusComponent implements OnInit {
       error => {
         console.error('Error fetching repositories', error);
         this.loading = false;
+        this.error = true;
+        clearTimeout(timeoutId);
       }
     );
   }
   
   loadRepositoryStatus(repositoryUuid: string, callback: () => void): void {
+    const timeoutId = setTimeout(() => {
+      this.toastService.error(`Error al sincronizar repositorio. Tiempo de espera excedido`);
+      callback();
+    }, 3500);
     this.http.get<any>(`${this.baseUrl}/image-repositories/server/${repositoryUuid}/status`).subscribe(
       data => {
         const output = data.output;
@@ -135,10 +152,12 @@ export class GlobalStatusComponent implements OnInit {
             available: parseFloat(output.ram.available)
           }
         };
+        clearTimeout(timeoutId);
         callback();
       },
       error => {
         console.error(`Error fetching status for repository ${repositoryUuid}`, error);
+        clearTimeout(timeoutId);
         callback();
       }
     );

ogWebconsole/src/locale/en.json

@@ -473,5 +473,6 @@
   "RamUsage": "RAM Usage",
   "CpuUsage": "CPU Usage",
   "processes": "Processes",
-  "usedPercentageLabel": "Used"
+  "usedPercentageLabel": "Used",
+  "errorLoadingData": "Error fetching data. Service not available"
 }

ogWebconsole/src/locale/es.json

@@ -474,5 +474,7 @@
   "RamUsage": "Uso de RAM",
   "CpuUsage": "Uso de CPU",
   "processes": "Procesos",
-  "usedPercentageLabel": "Usado"
+  "usedPercentageLabel": "Usado",
+  "errorLoadingData": "Error al cargar los datos. Servicio inactivo"
+
 }