Erefs #1963 nhance ClientTaskLogs component to include date range filtering in trace loading and reset functionality
testing/ogGui-multibranch/pipeline/head There was a failure building this commit Details

pull/22/head
Lucas Lara García 2025-05-09 13:52:28 +02:00
parent 600d5f9b37
commit 53d1191ddf
2 changed files with 23 additions and 3 deletions

View File

@ -10,8 +10,8 @@
</div>
<div class="images-button-row">
<button class="action-button" (click)="resetFilters(commandSearchInput, commandStatusInput)" joyrideStep="resetFiltersStep"
text="{{ 'resetFiltersStepText' | translate }}">
<button class="action-button" (click)="resetFilters(commandSearchInput, commandStatusInput)"
joyrideStep="resetFiltersStep" text="{{ 'resetFiltersStepText' | translate }}">
{{ 'resetFilters' | translate }}
</button>
</div>
@ -47,6 +47,16 @@
<mat-icon>close</mat-icon>
</button>
</mat-form-field>
<mat-form-field appearance="fill" class="date-range-picker">
<mat-label>{{ 'Filtrar por fecha' | translate }}</mat-label>
<mat-date-range-input [formControl]="dateRange" [rangePicker]="picker">
<input matStartDate placeholder="{{ 'Desde' | translate }}">
<input matEndDate placeholder="{{ 'Hasta' | translate }}">
</mat-date-range-input>
<mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
<mat-date-range-picker #picker></mat-date-range-picker>
</mat-form-field>
</div>
<app-loading [isLoading]="loading"></app-loading>

View File

@ -35,6 +35,7 @@ export class ClientTaskLogsComponent implements OnInit {
mode: ProgressBarMode = 'buffer';
progress = 0;
bufferValue = 0;
dateRange = new FormControl();
filteredCommands2 = Object.keys(COMMAND_TYPES).map(key => ({
name: key,
@ -197,6 +198,15 @@ export class ClientTaskLogsComponent implements OnInit {
params = params.set('status', this.filters['status']);
}
const range = this.dateRange?.value;
if (range?.start && range?.end) {
const fromDate = this.datePipe.transform(range.start, 'yyyy-MM-dd');
const toDate = this.datePipe.transform(range.end, 'yyyy-MM-dd');
params = params.set('executedAt[after]', fromDate!);
params = params.set('executedAt[before]', toDate!);
}
const url = `${this.baseUrl}/traces`;
this.http.get<any>(url, { params }).subscribe(
@ -212,7 +222,6 @@ export class ClientTaskLogsComponent implements OnInit {
);
}
loadCommands() {
this.loading = true;
this.http.get<any>(`${this.baseUrl}/commands?&page=1&itemsPerPage=10000`).subscribe(
@ -231,6 +240,7 @@ export class ClientTaskLogsComponent implements OnInit {
this.loading = true;
clientSearchCommandInput.value = null;
clientSearchStatusInput.value = null;
this.dateRange.reset();
this.filters = {};
this.loadTraces();
}