From 4998463ba13eb2dd8bf763a1f2a2ae255934de18 Mon Sep 17 00:00:00 2001 From: Lucas Lara Date: Tue, 25 Mar 2025 12:42:37 +0100 Subject: [PATCH 1/2] refs #1726 Add translation support for disk and RAM usage labels in Global Status component --- .../status-tab/status-tab.component.html | 21 ++++++++----------- ogWebconsole/src/locale/en.json | 3 ++- ogWebconsole/src/locale/es.json | 3 ++- 3 files changed, 13 insertions(+), 14 deletions(-) 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 e776e1f..bfbd735 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 @@ -8,13 +8,10 @@ [labels]="showLabels">
-

{{ 'totalLabel' | translate }}: {{ formatBytes(diskUsage.total) }} -

-

{{ 'usedLabel' | translate }}: {{ formatBytes(diskUsage.used) }} -

-

{{ 'availableLabel' | translate }}: {{ formatBytes(diskUsage.available) - }}

-

{{ 'freeLabel' | translate }}: {{ diskUsage.percentage }}

+

{{ 'totalLabel' | translate }}: {{ isRepository ? diskUsage.total : formatBytes(diskUsage.total) }}

+

{{ 'usedLabel' | translate }}: {{ isRepository ? diskUsage.used : formatBytes(diskUsage.used) }}

+

{{ 'availableLabel' | translate }}: {{ isRepository ? diskUsage.available : formatBytes(diskUsage.available) }}

+

{{ 'usedPercentageLabel' | translate }}: {{ isRepository ? diskUsage.used_percentage : diskUsage.percentage }}

@@ -27,10 +24,10 @@ [labels]="showLabels">
-

Total: {{ ramUsage.total }}

-

Usado: {{ ramUsage.used }}

-

Disponible: {{ ramUsage.available }}

-

Usado (%): {{ ramUsage.used_percentage }}

+

{{ 'totalLabel' | translate }}: {{ ramUsage.total }}

+

{{ 'usedLabel' | translate }}: {{ ramUsage.used }}

+

{{ 'availableLabel' | translate }}: {{ ramUsage.available }}

+

{{ 'usedPercentageLabel' | translate }}: {{ ramUsage.used_percentage }}

@@ -39,7 +36,7 @@

{{ 'CpuUsage' | translate }}

-

Usado: {{ cpuUsage.used_percentage }}

+

{{ 'usedLabel' | translate }}: {{ cpuUsage.used_percentage }}

diff --git a/ogWebconsole/src/locale/en.json b/ogWebconsole/src/locale/en.json index 7283f36..3084fd9 100644 --- a/ogWebconsole/src/locale/en.json +++ b/ogWebconsole/src/locale/en.json @@ -472,5 +472,6 @@ "GlobalStatus": "Global Status", "RamUsage": "RAM Usage", "CpuUsage": "CPU Usage", - "processes": "Processes" + "processes": "Processes", + "usedPercentageLabel": "Used" } diff --git a/ogWebconsole/src/locale/es.json b/ogWebconsole/src/locale/es.json index 8bd214f..6a308e5 100644 --- a/ogWebconsole/src/locale/es.json +++ b/ogWebconsole/src/locale/es.json @@ -473,5 +473,6 @@ "GlobalStatus": "Estado Global", "RamUsage": "Uso de RAM", "CpuUsage": "Uso de CPU", - "processes": "Procesos" + "processes": "Procesos", + "usedPercentageLabel": "Usado" } From 1fbf49406189b25a0dae02783716b3a401f528f4 Mon Sep 17 00:00:00 2001 From: Lucas Lara Date: Tue, 25 Mar 2025 13:49:52 +0100 Subject: [PATCH 2/2] refs #1726 Add error handling and display for data loading in Global Status component --- .../global-status/global-status.component.css | 12 ++++++++++ .../global-status.component.html | 22 +++++++++++++++---- .../global-status/global-status.component.ts | 21 +++++++++++++++++- ogWebconsole/src/locale/en.json | 3 ++- ogWebconsole/src/locale/es.json | 4 +++- 5 files changed, 55 insertions(+), 7 deletions(-) diff --git a/ogWebconsole/src/app/components/global-status/global-status.component.css b/ogWebconsole/src/app/components/global-status/global-status.component.css index 12445da..49db94b 100644 --- a/ogWebconsole/src/app/components/global-status/global-status.component.css +++ b/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; } \ No newline at end of file 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 3931e17..367fe31 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 @@ -
+
+ + +

{{ 'errorLoadingData' | translate }}

+ + -
+
+ + +

{{ 'errorLoadingData' | translate }}

+ + -
+
+ + +

{{ 'errorLoadingData' | translate }}

+ + - 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 a9ba295..1246996 100644 --- a/ogWebconsole/src/app/components/global-status/global-status.component.ts +++ b/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(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(`${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(`${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(); } ); diff --git a/ogWebconsole/src/locale/en.json b/ogWebconsole/src/locale/en.json index 3084fd9..7399a21 100644 --- a/ogWebconsole/src/locale/en.json +++ b/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" } diff --git a/ogWebconsole/src/locale/es.json b/ogWebconsole/src/locale/es.json index 6a308e5..e06377f 100644 --- a/ogWebconsole/src/locale/es.json +++ b/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" + }