opengnsys
/
oggui
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

refs #798 Update command group labels and toast message

oggui/calendar
Alvaro Puente Mella 2024-10-03 10:00:38 +02:00
parent 3089ca92fc
commit eaad62fb2e
4 changed files with 123 additions and 81 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
ogWebconsole/src/app/components/commands/commands-groups/create-command-group/create-command-group.component.html
View File

@ -1,5 +1,5 @@
<div class="create-command-group-container"> <div class="create-command-group-container">
<h2>Crear Grupo de Comandos</h2> <h2>Grupo de Comandos</h2>
<form class="command-group-form" (ngSubmit)="onSubmit()"> <form class="command-group-form" (ngSubmit)="onSubmit()">
<mat-form-field> <mat-form-field>
@ -54,7 +54,7 @@
<div class="command-group-actions"> <div class="command-group-actions">
<button mat-flat-button color="warn" (click)="close()">Cancelar</button> <button mat-flat-button color="warn" (click)="close()">Cancelar</button>
<button mat-flat-button color="primary" type="submit">Crear Grupo</button> <button mat-flat-button color="primary" type="submit">Guardar</button>
</div> </div>
</form> </form>
</div> </div>

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

@ -1,65 +1,91 @@
<div class="header-container"> <div class="header-container">
<h2 class="title">Trazas de ejecuciones</h2> <h2 class="title">Trazas de ejecuciones</h2>
<mat-form-field appearance="fill"> <mat-form-field appearance="fill">
<mat-label>Buscar por comando</mat-label> <mat-label>Buscar por comando</mat-label>
<input matInput [(ngModel)]="searchCommand" (ngModelChange)="filterTraces()" placeholder="Escribe el nombre del comando"> <input matInput [(ngModel)]="searchCommand" (ngModelChange)="filterTraces()" placeholder="Escribe el nombre del comando">
</mat-form-field> </mat-form-field>
<mat-form-field appearance="fill"> <mat-form-field appearance="fill">
<mat-label>Buscar por cliente</mat-label> <mat-label>Buscar por cliente</mat-label>
<input matInput [(ngModel)]="searchClient" (ngModelChange)="filterTraces()" placeholder="Escribe el nombre del cliente"> <input matInput [(ngModel)]="searchClient" (ngModelChange)="filterTraces()" placeholder="Escribe el nombre del cliente">
</mat-form-field> </mat-form-field>
<mat-form-field appearance="fill"> <mat-form-field appearance="fill">
<mat-label>Buscar por estado</mat-label> <mat-label>Buscar por estado</mat-label>
<input matInput [(ngModel)]="searchStatus" (ngModelChange)="filterTraces()" placeholder="Escribe el estado"> <input matInput [(ngModel)]="searchStatus" (ngModelChange)="filterTraces()" placeholder="Escribe el estado">
</mat-form-field> </mat-form-field>
<mat-form-field appearance="fill"> <mat-form-field appearance="fill">
<mat-label>Buscar por usuario</mat-label> <mat-label>Buscar por usuario</mat-label>
<input matInput [(ngModel)]="searchCreatedBy" (ngModelChange)="filterTraces()" placeholder="Escribe quien creó"> <input matInput [(ngModel)]="searchCreatedBy" (ngModelChange)="filterTraces()" placeholder="Escribe quien creó">
</mat-form-field> </mat-form-field>
<mat-form-field appearance="fill"> <mat-form-field appearance="fill">
<mat-label>Buscar por fecha </mat-label> <mat-label>Buscar por fecha </mat-label>
<input matInput [(ngModel)]="searchExecutedAt" (ngModelChange)="filterTraces()" placeholder="Escribe la fecha ejecutada"> <input matInput [(ngModel)]="searchExecutedAt" (ngModelChange)="filterTraces()" placeholder="Escribe la fecha ejecutada">
</mat-form-field> </mat-form-field>
</div> </div>
<table mat-table [dataSource]="groupedTraces" class="mat-elevation-z8">
<table mat-table [dataSource]="filteredTraces" class="mat-elevation-z8"> <ng-container matColumnDef="group">
<ng-container matColumnDef="commandName"> <th mat-header-cell *matHeaderCellDef> Ejecución</th>
<th mat-header-cell *matHeaderCellDef> Comando </th> <td mat-cell *matCellDef="let group"> {{ group.commandId }} </td>
<td mat-cell *matCellDef="let trace"> {{ trace.command.name }} </td> </ng-container>
</ng-container>
<ng-container matColumnDef="commandName">
<ng-container matColumnDef="clientName"> <th mat-header-cell *matHeaderCellDef> Comando </th>
<th mat-header-cell *matHeaderCellDef> Cliente </th> <td mat-cell *matCellDef="let group; let i = index">
<td mat-cell *matCellDef="let trace"> {{ trace.client.name }} </td> <ng-container *ngFor="let trace of group.traces">
</ng-container> <div *ngIf="i === 0">{{ trace.command.name }}</div>
</ng-container>
<ng-container matColumnDef="status"> </td>
<th mat-header-cell *matHeaderCellDef> Estado </th> </ng-container>
<td mat-cell *matCellDef="let trace"> {{ trace.status }} </td>
</ng-container> <ng-container matColumnDef="clientName">
<th mat-header-cell *matHeaderCellDef> Cliente </th>
<ng-container matColumnDef="executedAt"> <td mat-cell *matCellDef="let group; let i = index">
<th mat-header-cell *matHeaderCellDef> Ejecutado En </th> <ng-container *ngFor="let trace of group.traces">
<td mat-cell *matCellDef="let trace"> {{ trace.executedAt | date:'short' }} </td> <div>{{ trace.client.name }}</div>
</ng-container> </ng-container>
</td>
<ng-container matColumnDef="createdBy"> </ng-container>
<th mat-header-cell *matHeaderCellDef> Creado Por </th>
<td mat-cell *matCellDef="let trace"> {{ trace.createdBy }} </td> <ng-container matColumnDef="status">
</ng-container> <th mat-header-cell *matHeaderCellDef> Estado </th>
<td mat-cell *matCellDef="let group; let i = index">
<tr mat-header-row *matHeaderRowDef="displayedColumns"></tr> <ng-container *ngFor="let trace of group.traces">
<tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr> <div>{{ trace.status }}</div>
</table> </ng-container>
</td>
<mat-paginator [length]="length" </ng-container>
[pageSize]="itemsPerPage"
[pageSizeOptions]="pageSizeOptions" <ng-container matColumnDef="executedAt">
(page)="onPageChange($event)"> <th mat-header-cell *matHeaderCellDef> Ejecutado En </th>
</mat-paginator> <td mat-cell *matCellDef="let group; let i = index">
<ng-container *ngFor="let trace of group.traces">
<div>{{ trace.executedAt | date:'short' }}</div>
</ng-container>
</td>
</ng-container>
<ng-container matColumnDef="createdBy">
<th mat-header-cell *matHeaderCellDef> Creado Por </th>
<td mat-cell *matCellDef="let group; let i = index">
<ng-container *ngFor="let trace of group.traces">
<div>{{ trace.createdBy }}</div>
</ng-container>
</td>
</ng-container>
<tr mat-header-row *matHeaderRowDef="['group', 'commandName', 'clientName', 'status', 'executedAt', 'createdBy']"></tr>
<tr mat-row *matRowDef="let row; columns: ['group', 'commandName', 'clientName', 'status', 'executedAt', 'createdBy'];"></tr>
</table>
<mat-paginator [length]="length"
[pageSize]="itemsPerPage"
[pageSizeOptions]="pageSizeOptions"
(page)="onPageChange($event)">
</mat-paginator>

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

@ -8,16 +8,15 @@ import { HttpClient } from '@angular/common/http';
}) })
export class TaskLogsComponent implements OnInit { export class TaskLogsComponent implements OnInit {
baseUrl: string = import.meta.env.NG_APP_BASE_API_URL; // Utilizando baseUrl desde el env baseUrl: string = import.meta.env.NG_APP_BASE_API_URL;
traces: any[] = []; traces: any[] = [];
filteredTraces: any[] = []; // Nueva variable para las trazas filtradas groupedTraces: any[] = [];
length: number = 0; length: number = 0;
itemsPerPage: number = 20; itemsPerPage: number = 20;
page: number = 1; page: number = 1;
pageSizeOptions: number[] = [10, 20, 30, 50]; pageSizeOptions: number[] = [10, 20, 30, 50];
displayedColumns: string[] = ['commandName', 'clientName', 'status', 'executedAt', 'createdBy']; displayedColumns: string[] = ['commandId','commandName', 'clientName', 'status', 'executedAt', 'createdBy'];
// Variables para los términos de búsqueda
searchCommand: string = ''; searchCommand: string = '';
searchClient: string = ''; searchClient: string = '';
searchStatus: string = ''; searchStatus: string = '';
@ -30,7 +29,6 @@ export class TaskLogsComponent implements OnInit {
this.loadTraces(); this.loadTraces();
} }
// Método para cargar las trazas con paginación
loadTraces(): void { loadTraces(): void {
const url = `${this.baseUrl}/traces?page=${this.page}&itemsPerPage=${this.itemsPerPage}`; const url = `${this.baseUrl}/traces?page=${this.page}&itemsPerPage=${this.itemsPerPage}`;
@ -38,8 +36,7 @@ export class TaskLogsComponent implements OnInit {
(data) => { (data) => {
this.traces = data['hydra:member']; this.traces = data['hydra:member'];
this.length = data['hydra:totalItems']; this.length = data['hydra:totalItems'];
this.filteredTraces = this.traces; // Inicializa con todas las trazas this.groupedTraces = this.groupByCommandId(this.traces);
console.log('Traces:', this.traces);
}, },
(error) => { (error) => {
console.error('Error fetching traces', error); console.error('Error fetching traces', error);
@ -47,16 +44,31 @@ export class TaskLogsComponent implements OnInit {
); );
} }
// Método que se llama cuando cambia la paginación groupByCommandId(traces: any[]): any[] {
onPageChange(event: any): void { const grouped: { [key: string]: any[] } = {};
this.page = event.pageIndex + 1; // Actualiza el número de página
this.itemsPerPage = event.pageSize; // Actualiza los ítems por página traces.forEach(trace => {
this.loadTraces(); // Recarga las trazas con los nuevos parámetros de paginación const commandId = trace.command.id;
if (!grouped[commandId]) {
grouped[commandId] = [];
}
grouped[commandId].push(trace);
});
return Object.keys(grouped).map(key => ({
commandId: key,
traces: grouped[key]
}));
}
onPageChange(event: any): void {
this.page = event.pageIndex + 1;
this.itemsPerPage = event.pageSize;
this.loadTraces();
} }
// Método para filtrar las trazas
filterTraces(): void { filterTraces(): void {
this.filteredTraces = this.traces.filter(trace => { const filtered = this.traces.filter(trace => {
const commandMatch = trace.command.name.toLowerCase().includes(this.searchCommand.toLowerCase()); const commandMatch = trace.command.name.toLowerCase().includes(this.searchCommand.toLowerCase());
const clientMatch = trace.client.name.toLowerCase().includes(this.searchClient.toLowerCase()); const clientMatch = trace.client.name.toLowerCase().includes(this.searchClient.toLowerCase());
const statusMatch = trace.status.toLowerCase().includes(this.searchStatus.toLowerCase()); const statusMatch = trace.status.toLowerCase().includes(this.searchStatus.toLowerCase());
@ -66,6 +78,7 @@ export class TaskLogsComponent implements OnInit {
return commandMatch && clientMatch && statusMatch && createdByMatch && executedAtMatch; return commandMatch && clientMatch && statusMatch && createdByMatch && executedAtMatch;
}); });
this.length = this.filteredTraces.length; // Actualiza la longitud para el paginador this.length = filtered.length;
this.groupedTraces = this.groupByCommandId(filtered);
} }
} }

5
ogWebconsole/src/app/components/commands/main-commands/create-command/create-command.component.ts
View File

@ -2,6 +2,7 @@ import { Component, Inject } from '@angular/core';
import { FormBuilder, FormGroup, Validators } from '@angular/forms'; import { FormBuilder, FormGroup, Validators } from '@angular/forms';
import { MatDialogRef, MAT_DIALOG_DATA } from '@angular/material/dialog'; import { MatDialogRef, MAT_DIALOG_DATA } from '@angular/material/dialog';
import { HttpClient } from '@angular/common/http'; import { HttpClient } from '@angular/common/http';
import { ToastrService } from 'ngx-toastr';
@Component({ @Component({
selector: 'app-create-command', selector: 'app-create-command',
@ -18,9 +19,10 @@ export class CreateCommandComponent {
private fb: FormBuilder, private fb: FormBuilder,
private http: HttpClient, private http: HttpClient,
public dialogRef: MatDialogRef<CreateCommandComponent>, public dialogRef: MatDialogRef<CreateCommandComponent>,
private toastService: ToastrService,
@Inject(MAT_DIALOG_DATA) public data: any @Inject(MAT_DIALOG_DATA) public data: any
) { ) {
this.isEditMode = data && data.command; // Verifica si `data` y `data.command` existen this.isEditMode = data && data.command;
} }
ngOnInit(): void { ngOnInit(): void {
@ -44,6 +46,7 @@ export class CreateCommandComponent {
if (this.isEditMode) { if (this.isEditMode) {
this.http.patch(`${this.apiUrl}/${this.data.command.uuid}`, commandData).subscribe( this.http.patch(`${this.apiUrl}/${this.data.command.uuid}`, commandData).subscribe(
response => { response => {
this.toastService.success('Comando creado con éxito');
this.dialogRef.close(commandData); this.dialogRef.close(commandData);
}, },
error => { error => {