From 22d775e7938166065e723dc17088e4c18e1388eb Mon Sep 17 00:00:00 2001
From: Lucas Lara <llara@localhost>
Date: Tue, 25 Mar 2025 15:02:23 +0100
Subject: [PATCH] Refactor Global Status component to handle multiple error
 states for OgBoot, Dhcp, and Repositories

---
 .../global-status.component.html              | 12 ++---
 .../global-status/global-status.component.ts  | 50 +++++++++----------
 2 files changed, 31 insertions(+), 31 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 367fe31..6add399 100644
--- a/ogWebconsole/src/app/components/global-status/global-status.component.html
+++ b/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 && !error" class="content-container">
+      <div *ngIf="!loading && !errorOgBoot" class="content-container">
         <app-status-tab 
           [loading]="loading"
           [diskUsage]="ogBootDiskUsage"
@@ -22,7 +22,7 @@
           [isRepository]="false">
         </app-status-tab>
       </div>
-      <mat-card *ngIf="!loading && error" class="error-card">
+      <mat-card *ngIf="!loading && errorOgBoot" class="error-card">
         <mat-card-content>
           <p>{{ 'errorLoadingData' | translate }}</p>
         </mat-card-content>
@@ -30,7 +30,7 @@
     </mat-tab>
 
     <mat-tab label="Dhcp">
-      <div *ngIf="!loading && !error" class="content-container">
+      <div *ngIf="!loading && !errorDhcp" class="content-container">
         <app-status-tab
           [loading]="loading"
           [diskUsage]="dhcpDiskUsage"
@@ -45,7 +45,7 @@
           [isRepository]="false">
         </app-status-tab>
       </div>
-      <mat-card *ngIf="!loading && error" class="error-card">
+      <mat-card *ngIf="!loading && errorDhcp" class="error-card">
         <mat-card-content>
           <p>{{ 'errorLoadingData' | translate }}</p>
         </mat-card-content>
@@ -55,7 +55,7 @@
     <mat-tab label="Repositorios">
       <mat-tab-group>
         <mat-tab *ngFor="let repository of repositories" [label]="repository.name">
-          <div *ngIf="!loading && !error && repositoryStatuses[repository.uuid]">
+          <div *ngIf="!loading && !errorRepositories && repositoryStatuses[repository.uuid]">
             <app-status-tab
               [loading]="loading"
               [diskUsage]="repositoryStatuses[repository.uuid].disk"
@@ -79,7 +79,7 @@
               [isRepository]="true">
             </app-status-tab>
           </div>
-          <mat-card *ngIf="!loading && error" class="error-card">
+          <mat-card *ngIf="!loading && errorRepositories" class="error-card">
             <mat-card-content>
               <p>{{ 'errorLoadingData' | translate }}</p>
             </mat-card-content>
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 1246996..4eb996a 100644
--- a/ogWebconsole/src/app/components/global-status/global-status.component.ts
+++ b/ogWebconsole/src/app/components/global-status/global-status.component.ts
@@ -12,7 +12,9 @@ import { MatTabChangeEvent } from '@angular/material/tabs';
 export class GlobalStatusComponent implements OnInit {
   baseUrl: string;
   loading: boolean = false;
-  error: boolean = false;
+  errorOgBoot: boolean = false;
+  errorDhcp: boolean = false;
+  errorRepositories: boolean = false;
   installedOgLives: any[] = [];
   subnets: any[] = [];
   showLabels: boolean = true;
@@ -52,13 +54,14 @@ export class GlobalStatusComponent implements OnInit {
     this.loadOgBootStatus();
   }
 
-  loadStatus(apiUrl: string, diskUsage: any, servicesStatus: any, diskUsageChartData: any[], installedOgLives: any[], isDhcp: boolean): void {
+  [key: string]: any;
+
+  loadStatus(apiUrl: string, diskUsage: any, servicesStatus: any, diskUsageChartData: any[], installedOgLives: any[], isDhcp: boolean, errorState: string): void {
     this.loading = true;
-    this.error = false;
+    this[errorState] = false;
     const timeoutId = setTimeout(() => {
       this.loading = false;
-      this.error = true;
-      this.toastService.error('Error al sincronizar: Tiempo de espera excedido');
+      this[errorState] = true;
     }, 3500);
     this.http.get<any>(apiUrl).subscribe({
       next: data => {
@@ -66,9 +69,9 @@ export class GlobalStatusComponent implements OnInit {
         diskUsage.available = data.message.disk_usage.available;
         diskUsage.total = data.message.disk_usage.total;
         diskUsage.percentage = data.message.disk_usage.percentage;
-
+  
         Object.assign(servicesStatus, data.message.services_status);
-
+  
         if (isDhcp) {
           this.subnets.length = 0;
           if (data.message.subnets) {
@@ -80,21 +83,20 @@ export class GlobalStatusComponent implements OnInit {
             installedOgLives.push(...data.message.installed_oglives);
           }
         }
-
+  
         diskUsageChartData.length = 0;
         diskUsageChartData.push(
           { name: 'Usado', value: parseFloat(diskUsage.used) },
           { name: 'Disponible', value: parseFloat(diskUsage.available) }
         );
-
+  
         this.loading = false;
         clearTimeout(timeoutId);
       },
       error: error => {
-        this.toastService.error('Error al sincronizar');
         console.log(error);
         this.loading = false;
-        this.error = true;
+        this[errorState] = true;
         clearTimeout(timeoutId);
       }
     });
@@ -102,18 +104,17 @@ export class GlobalStatusComponent implements OnInit {
 
   loadRepositories(): void {
     this.loading = true;
-    this.error = false;
+    this.errorRepositories = false;
     const timeoutId = setTimeout(() => {
       this.loading = false;
-      this.error = true;
-      this.toastService.error('Error al sincronizar: Tiempo de espera excedido');
-    }, 3500);
+      this.errorRepositories = true;
+    }, 5000);
     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, (errorOccurred: boolean) => {
             remainingRepositories--;
             if (remainingRepositories === 0) {
               this.loading = false;
@@ -125,17 +126,16 @@ export class GlobalStatusComponent implements OnInit {
       error => {
         console.error('Error fetching repositories', error);
         this.loading = false;
-        this.error = true;
+        this.errorRepositories = true;
         clearTimeout(timeoutId);
       }
     );
   }
   
-  loadRepositoryStatus(repositoryUuid: string, callback: () => void): void {
+  loadRepositoryStatus(repositoryUuid: string, callback: (errorOccurred: boolean) => void): void {
     const timeoutId = setTimeout(() => {
-      this.toastService.error(`Error al sincronizar repositorio. Tiempo de espera excedido`);
-      callback();
-    }, 3500);
+      callback(true);
+    }, 5000);
     this.http.get<any>(`${this.baseUrl}/image-repositories/server/${repositoryUuid}/status`).subscribe(
       data => {
         const output = data.output;
@@ -153,24 +153,24 @@ export class GlobalStatusComponent implements OnInit {
           }
         };
         clearTimeout(timeoutId);
-        callback();
+        callback(false);
       },
       error => {
         console.error(`Error fetching status for repository ${repositoryUuid}`, error);
         clearTimeout(timeoutId);
-        callback();
+        callback(true);
       }
     );
   }
 
   loadOgBootStatus(): void {
     this.isDhcp = false;
-    this.loadStatus(this.ogBootApiUrl, this.ogBootDiskUsage, this.ogBootServicesStatus, this.ogBootDiskUsageChartData, this.installedOgLives, this.isDhcp);
+    this.loadStatus(this.ogBootApiUrl, this.ogBootDiskUsage, this.ogBootServicesStatus, this.ogBootDiskUsageChartData, this.installedOgLives, this.isDhcp, 'errorOgBoot');
   }
 
   loadDhcpStatus(): void {
     this.isDhcp = true;
-    this.loadStatus(this.dhcpApiUrl, this.dhcpDiskUsage, this.dhcpServicesStatus, this.dhcpDiskUsageChartData, this.installedOgLives, this.isDhcp);
+    this.loadStatus(this.dhcpApiUrl, this.dhcpDiskUsage, this.dhcpServicesStatus, this.dhcpDiskUsageChartData, this.installedOgLives, this.isDhcp, 'errorDhcp');
   }
 
   onTabChange(event: MatTabChangeEvent): void {