Merge branch 'develop' of ssh://ognproject.evlt.uma.es:21987/opengnsys/oggui into develop

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

@@ -30,3 +30,15 @@ mat-dialog-content {
     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/app/components/global-status/status-tab/status-tab.component.html

@@ -8,13 +8,10 @@
         [labels]="showLabels">
       </ngx-charts-pie-chart>
       <div class="disk-usage-info">
-        <p>{{ 'totalLabel' | translate }}: <strong>{{ formatBytes(diskUsage.total) }}</strong>
-        </p>
-        <p>{{ 'usedLabel' | translate }}: <strong>{{ formatBytes(diskUsage.used) }}</strong>
-        </p>
-        <p>{{ 'availableLabel' | translate }}: <strong>{{ formatBytes(diskUsage.available)
-            }}</strong></p>
-        <p>{{ 'freeLabel' | translate }}: <strong>{{ diskUsage.percentage }}</strong></p>
+        <p>{{ 'totalLabel' | translate }}: <strong>{{ isRepository ? diskUsage.total : formatBytes(diskUsage.total) }}</strong></p>
+        <p>{{ 'usedLabel' | translate }}: <strong>{{ isRepository ? diskUsage.used : formatBytes(diskUsage.used) }}</strong></p>
+        <p>{{ 'availableLabel' | translate }}: <strong>{{ isRepository ? diskUsage.available : formatBytes(diskUsage.available) }}</strong></p>
+        <p>{{ 'usedPercentageLabel' | translate }}: <strong>{{ isRepository ? diskUsage.used_percentage : diskUsage.percentage }}</strong></p>
       </div>
     </div>
   </div>
@@ -27,10 +24,10 @@
         [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>
+        <p>{{ 'totalLabel' | translate }}: <strong>{{ ramUsage.total }}</strong></p>
+        <p>{{ 'usedLabel' | translate }}: <strong>{{ ramUsage.used }}</strong></p>
+        <p>{{ 'availableLabel' | translate }}: <strong>{{ ramUsage.available }}</strong></p>
+        <p>{{ 'usedPercentageLabel' | translate }}: <strong>{{ ramUsage.used_percentage }}</strong></p>
       </div>
     </div>
   </div>
@@ -39,7 +36,7 @@
   <div class="cpu-usage-container" *ngIf="isRepository">
     <h3 class="cpu-title">{{ 'CpuUsage' | translate }}</h3>
     <div class="cpu-usage">
-      <p>Usado: <strong>{{ cpuUsage.used_percentage }}</strong></p>
+      <p>{{ 'usedLabel' | translate }}: <strong>{{ cpuUsage.used_percentage }}</strong></p>
     </div>
   </div>
 

ogWebconsole/src/locale/en.json

@@ -472,5 +472,7 @@
   "GlobalStatus": "Global Status",
   "RamUsage": "RAM Usage",
   "CpuUsage": "CPU Usage",
-  "processes": "Processes"
+  "processes": "Processes",
+  "usedPercentageLabel": "Used",
+  "errorLoadingData": "Error fetching data. Service not available"
 }

ogWebconsole/src/locale/es.json

@@ -473,5 +473,8 @@
   "GlobalStatus": "Estado Global",
   "RamUsage": "Uso de RAM",
   "CpuUsage": "Uso de CPU",
-  "processes": "Procesos"
+  "processes": "Procesos",
+  "usedPercentageLabel": "Usado",
+  "errorLoadingData": "Error al cargar los datos. Servicio inactivo"
+
 }