refs #1529. Refactor task logs component: enhance client fetching logic with forkJoin for better performance

ogWebconsole/src/app/components/commands/commands-task/task-logs/task-logs.component.html

@@ -20,7 +20,7 @@
   <mat-form-field appearance="fill" class="search-select" joyrideStep="clientSelectStep"
     text="{{ 'clientSelectStepText' | translate }}">
     <input type="text" matInput [formControl]="clientControl" [matAutocomplete]="clientAuto"
-      placeholder="{{ 'selectClientPlaceholder' | translate }}">
+      placeholder="{{ 'filterClientPlaceholder' | translate }}">
     <mat-autocomplete #clientAuto="matAutocomplete" [displayWith]="displayFnClient"
       (optionSelected)="onOptionClientSelected($event.option.value)">
       <mat-option *ngFor="let client of filteredClients | async" [value]="client">
@@ -32,7 +32,7 @@
   <mat-form-field appearance="fill" class="search-select" joyrideStep="commandSelectStep"
     text="{{ 'commandSelectStepText' | translate }}">
     <input type="text" matInput [formControl]="commandControl" [matAutocomplete]="commandAuto"
-      placeholder="{{ 'selectCommandPlaceholder' | translate }}">
+      placeholder="{{ 'filterCommandPlaceholder' | translate }}">
     <mat-autocomplete #commandAuto="matAutocomplete" [displayWith]="displayFnCommand"
       (optionSelected)="onOptionCommandSelected($event.option.value)">
       <mat-option *ngFor="let command of filteredCommands | async" [value]="command">
@@ -44,6 +44,7 @@
   <mat-form-field appearance="fill" class="search-boolean">
     <mat-label i18n="@@searchLabel">Estado</mat-label>
     <mat-select [(ngModel)]="filters['status']" (selectionChange)="loadTraces()" placeholder="Seleccionar opción">
+      <mat-option [value]="undefined">Todos</mat-option>
       <mat-option [value]="'failed'">Fallido</mat-option>
       <mat-option [value]="'pending'">Pendiente de ejecutar</mat-option>
       <mat-option [value]="'in-progress'">Ejecutando</mat-option>
@@ -115,4 +116,4 @@
   <mat-paginator [length]="length" [pageSize]="itemsPerPage" [pageIndex]="page" [pageSizeOptions]="pageSizeOptions"
     (page)="onPageChange($event)">
   </mat-paginator>
-</div>
+</div>

ogWebconsole/src/app/components/commands/commands-task/task-logs/task-logs.component.ts

@@ -1,6 +1,6 @@
 import { Component, OnInit } from '@angular/core';
 import { HttpClient } from '@angular/common/http';
-import { Observable } from 'rxjs';
+import { Observable, forkJoin } from 'rxjs';
 import { FormControl } from '@angular/forms';
 import { map, startWith } from 'rxjs/operators';
 import { DatePipe } from '@angular/common';
@@ -144,7 +144,11 @@ export class TaskLogsComponent implements OnInit {
   loadTraces(): void {
     this.loading = true;
     const url = `${this.baseUrl}/traces?page=${this.page + 1}&itemsPerPage=${this.itemsPerPage}`;
-    this.http.get<any>(url, { params: this.filters }).subscribe(
+    const params = { ...this.filters };
+    if (params['status'] === undefined) {
+      delete params['status'];
+    }
+    this.http.get<any>(url, { params }).subscribe(
       (data) => {
         this.traces = data['hydra:member'];
         this.length = data['hydra:totalItems'];
@@ -163,6 +167,7 @@ export class TaskLogsComponent implements OnInit {
     this.http.get<any>(`${this.baseUrl}/commands?&page=1&itemsPerPage=10000`).subscribe(
       response => {
         this.commands = response['hydra:member'];
+        console.log(this.commands);
         this.loading = false;
       },
       error => {
@@ -176,10 +181,20 @@ export class TaskLogsComponent implements OnInit {
     this.loading = true;
     this.http.get<any>(`${this.baseUrl}/clients?&page=1&itemsPerPage=10000`).subscribe(
       response => {
-        this.clients = response['hydra:member'];
-        this.loading = false;
+        const clientIds = response['hydra:member'].map((client: any) => client['@id']);
+        const clientDetailsRequests: Observable<any>[] = clientIds.map((id: string) => this.http.get<any>(`${this.baseUrl}${id}`));
+        forkJoin(clientDetailsRequests).subscribe(
+          (clients: any[]) => {
+            this.clients = clients;
+            this.loading = false;
+          },
+          (error: any) => {
+            console.error('Error fetching client details:', error);
+            this.loading = false;
+          }
+        );
       },
-      error => {
+      (error: any) => {
         console.error('Error fetching clients:', error);
         this.loading = false;
       }

ogWebconsole/src/locale/en.json

@@ -99,9 +99,9 @@
   "resetFiltersStepText": "Click to reset the applied filters and see all traces.",
   "resetFilters": "Reset filters",
   "clientSelectStepText": "Select a client to see the associated traces.",
-  "selectClientPlaceholder": "Select a client",
+  "filterClientPlaceholder": "Filter by client",
   "commandSelectStepText": "Select a command to see the specific traces of that command.",
-  "selectCommandPlaceholder": "Select a command",
+  "filterCommandPlaceholder": "Filter by command",
   "taskDetailsTitle": "Task Details",
   "taskId": "Task ID",
   "status": "Status",

ogWebconsole/src/locale/es.json

@@ -100,9 +100,9 @@
   "resetFiltersStepText": "Haz clic para reiniciar los filtros aplicados y ver todas las trazas.",
   "resetFilters": "Reiniciar filtros",
   "clientSelectStepText": "Selecciona un cliente para ver las trazas asociadas.",
-  "selectClientPlaceholder": "Seleccione un cliente",
+  "filterClientPlaceholder": "Filtrar por cliente",
   "commandSelectStepText": "Selecciona un comando para ver las trazas específicas de ese comando.",
-  "selectCommandPlaceholder": "Seleccione un comando",
+  "filterCommandPlaceholder": "Filtrar por comando",
   "taskDetailsTitle": "Detalles de la Tarea",
   "taskId": "ID de la Tarea",
   "status": "Estado",