refactor: update task logs table to improve trace information display and localization
testing/ogGui-multibranch/pipeline/head There was a failure building this commit
Details
testing/ogGui-multibranch/pipeline/head There was a failure building this commit
Details
parent
3d2f9dfa5e
commit
4c8b6c7dbd
|
|
@ -52,8 +52,7 @@
|
|||
<app-loading [isLoading]="loading"></app-loading>
|
||||
|
||||
<div *ngIf="!loading">
|
||||
<table mat-table [dataSource]="traces" class="mat-elevation-z8" joyrideStep="tracesTableStep"
|
||||
text="{{ 'tracesTableStepText' | translate }}">
|
||||
<table mat-table [dataSource]="traces" class="mat-elevation-z8">
|
||||
<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">
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
console.log('Comando seleccionado:', selectedCommand);
|
||||
console.log('Valor que se usará para el filtro:', selectedCommand.name);
|
||||
this.filters['command'] = 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,
|
||||
|
|
|
|||
|
|
@ -73,8 +73,7 @@
|
|||
<app-loading [isLoading]="loading"></app-loading>
|
||||
|
||||
<div *ngIf="!loading">
|
||||
<table mat-table [dataSource]="traces" class="mat-elevation-z8" joyrideStep="tracesTableStep"
|
||||
text="{{ 'tracesTableStepText' | translate }}">
|
||||
<table mat-table [dataSource]="traces" class="mat-elevation-z8">
|
||||
<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>
|
||||
|
|
|
|||
|
|
@ -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,
|
||||
|
|
|
|||
|
|
@ -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."
|
||||
}
|
||||
|
|
@ -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."
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in New Issue