refactor: update task logs table to improve trace information display and localization

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

@@ -52,8 +52,7 @@
   <app-loading [isLoading]="loading"></app-loading>
 
   <div *ngIf="!loading">
-    <table mat-table [dataSource]="traces" class="mat-elevation-z8" joyrideStep="tracesTableStep"
+    <table mat-table [dataSource]="traces" class="mat-elevation-z8">
-      text="{{ 'tracesTableStepText' | translate }}">
       <ng-container *ngFor="let column of columns" [matColumnDef]="column.columnDef">
         <th mat-header-cell *matHeaderCellDef> {{ column.header }} </th>
         <td mat-cell *matCellDef="let trace">
@@ -61,7 +60,8 @@
           <ng-container [ngSwitch]="column.columnDef">
             <ng-container *ngSwitchCase="'status'">
               <ng-container *ngIf="trace.status === 'in-progress' && trace.progress; else statusChip">
-                <div class="progress-container">
+                <div class="progress-container" joyrideStep="tracesProgressStep"
+                  text="{{ 'tracesProgressStepText' | translate }}">
                   <mat-progress-bar class="example-margin" [mode]="mode" [value]="trace.progress"
                     [bufferValue]="bufferValue">
                   </mat-progress-bar>
@@ -128,9 +128,10 @@
         </td>
       </ng-container>
 
-      <ng-container matColumnDef="actions">
+      <ng-container matColumnDef="information">
         <th mat-header-cell *matHeaderCellDef style="text-align: center;">{{ 'informationLabel' | translate }}</th>
-        <td mat-cell *matCellDef="let trace" style="text-align: center;">
+        <td mat-cell *matCellDef="let trace" style="text-align: center;" joyrideStep="tracesInfoStep"
+          text="{{ 'tracesInfoStepText' | translate }}">
           <button mat-icon-button color="primary" [disabled]="!trace.input" (click)="openInputModal(trace.input)">
             <mat-icon>
               <span class="material-symbols-outlined">

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

@@ -69,7 +69,7 @@ export class ClientTaskLogsComponent implements OnInit {
       cell: (trace: any) => this.datePipe.transform(trace.finishedAt, 'dd/MM/yyyy hh:mm:ss'),
     },
   ];
-  displayedColumns = [...this.columns.map(column => column.columnDef), 'actions'];
+  displayedColumns = [...this.columns.map(column => column.columnDef), 'information'];
 
   filters: { [key: string]: string } = {};
   filteredCommands!: Observable<any[]>;
@@ -134,9 +134,7 @@ export class ClientTaskLogsComponent implements OnInit {
   }
 
   onOptionCommandSelected(selectedCommand: any): void {
-    this.filters['command'] = selectedCommand.id || selectedCommand.uuid;
+    this.filters['command'] = selectedCommand.name;
-    console.log('Comando seleccionado:', selectedCommand);
-    console.log('Valor que se usará para el filtro:', selectedCommand.name);
     this.loadTraces();
   }
 
@@ -191,27 +189,9 @@ export class ClientTaskLogsComponent implements OnInit {
       .set('page', (this.page + 1).toString())
       .set('itemsPerPage', this.itemsPerPage.toString());
 
-    if (this.filters['command']) {
-      params = params.set('command.uuid', this.filters['command']);
-    }
-
     if (this.filters['status']) {
       params = params.set('status', this.filters['status']);
     }
-
-    const url = `${this.baseUrl}/traces`;
-
-    this.http.get<any>(url, { params }).subscribe(
-      (data) => {
-        this.traces = data['hydra:member'];
-        this.length = data['hydra:totalItems'];
-        this.loading = false;
-      },
-      (error) => {
-        console.error('Error fetching client traces', error);
-        this.loading = false;
-      }
-    );
   }
 
   loadCommands() {
@@ -284,7 +264,8 @@ export class ClientTaskLogsComponent implements OnInit {
         'tracesTitleStep',
         'resetFiltersStep',
         'filtersStep',
-        'tracesTableStep',
+        'tracesProgressStep',
+        'tracesInfoStep',
         'paginationStep'
       ],
       showPrevButton: true,

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

@@ -73,8 +73,7 @@
 <app-loading [isLoading]="loading"></app-loading>
 
 <div *ngIf="!loading">
-  <table mat-table [dataSource]="traces" class="mat-elevation-z8" joyrideStep="tracesTableStep"
+  <table mat-table [dataSource]="traces" class="mat-elevation-z8">
-    text="{{ 'tracesTableStepText' | translate }}">
     <ng-container *ngFor="let column of columns" [matColumnDef]="column.columnDef">
       <th mat-header-cell *matHeaderCellDef> {{ column.header }} </th>
       <td mat-cell *matCellDef="let trace">
@@ -82,7 +81,8 @@
         <ng-container [ngSwitch]="column.columnDef">
           <ng-container *ngSwitchCase="'status'">
             <ng-container *ngIf="trace.status === 'in-progress' && trace.progress; else statusChip">
-              <div class="progress-container">
+              <div class="progress-container" joyrideStep="tracesProgressStep"
+                text="{{ 'tracesProgressStepText' | translate }}">
                 <mat-progress-bar class="example-margin" [mode]="mode" [value]="trace.progress"
                   [bufferValue]="bufferValue">
                 </mat-progress-bar>
@@ -149,9 +149,10 @@
       </td>
     </ng-container>
 
-    <ng-container matColumnDef="actions">
+    <ng-container matColumnDef="information">
       <th mat-header-cell *matHeaderCellDef style="text-align: center;">{{ 'informationLabel' | translate }}</th>
-      <td mat-cell *matCellDef="let trace" style="text-align: center;">
+      <td mat-cell *matCellDef="let trace" style="text-align: center;" joyrideStep="tracesInfoStep"
+        text="{{ 'tracesInfoStepText' | translate }}">
         <button mat-icon-button color="primary" [disabled]="!trace.input || trace.input.length === 0"
           (click)="openInputModal(trace.input)">
           <mat-icon>

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

@@ -75,7 +75,7 @@ export class TaskLogsComponent implements OnInit {
       cell: (trace: any) => this.datePipe.transform(trace.finishedAt, 'dd/MM/yyyy hh:mm:ss'),
     },
   ];
-  displayedColumns = [...this.columns.map(column => column.columnDef), 'actions'];
+  displayedColumns = [...this.columns.map(column => column.columnDef), 'information'];
 
   filters: { [key: string]: string } = {};
   filteredClients!: Observable<any[]>;
@@ -326,7 +326,8 @@ export class TaskLogsComponent implements OnInit {
         'tracesTitleStep',
         'resetFiltersStep',
         'filtersStep',
-        'tracesTableStep',
+        'tracesProgressStep',
+        'tracesInfoStep',
         'paginationStep'
       ],
       showPrevButton: true,

ogWebconsole/src/locale/en.json

@@ -530,5 +530,6 @@
   "isDefaultLabel": "Default",
   "tracesTitleStepText": "In this screen, you can see the execution traces of each client, with its id, command, real-time status, date and actions to be performed.",
   "filtersStepText": "Here you can see the different filters to apply to the table information.",
-  "tracesTableStepText": "This is the table with the execution traces updated in real time."
+  "tracesProgressStepText": "Here you can see the execution status updated in real time.",
+  "tracesInfoStepText": "Here you can consult detailed information about the specific trace."
 }

ogWebconsole/src/locale/es.json

@@ -533,5 +533,6 @@
   "isDefaultLabel": "Por defecto",
   "tracesTitleStepText": "En esta pantalla, puedes ver las trazas de ejecución de cada cliente, con su id, comando, estado en tiempo real, fecha y acciones a realizar.",
   "filtersStepText": "Aquí puedes ver los diferentes filtros que aplicar a la información de la tabla.",
-  "tracesTableStepText": "Esta es la tabla con las trazas de ejecución actualizadas en tiempo real."
+  "tracesProgressStepText": "Aquí puedes ver el estado de ejecución actualizado en tiempo real.",
+  "tracesInfoStepText": "Aquí puedes consultar información detallada de la traza en concreto."
 }