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">
<h2>Crear Grupo de Comandos</h2>
<h2>Grupo de Comandos</h2>
<form class="command-group-form" (ngSubmit)="onSubmit()">
<mat-form-field>
@ -54,7 +54,7 @@
<div class="command-group-actions">
<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>
</form>
</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">
<h2 class="title">Trazas de ejecuciones</h2>
<h2 class="title">Trazas de ejecuciones</h2>
<mat-form-field appearance="fill">
<mat-label>Buscar por comando</mat-label>
<input matInput [(ngModel)]="searchCommand" (ngModelChange)="filterTraces()" placeholder="Escribe el nombre del comando">
</mat-form-field>
<mat-form-field appearance="fill">
<mat-label>Buscar por cliente</mat-label>
<input matInput [(ngModel)]="searchClient" (ngModelChange)="filterTraces()" placeholder="Escribe el nombre del cliente">
</mat-form-field>
<mat-form-field appearance="fill">
<mat-label>Buscar por estado</mat-label>
<input matInput [(ngModel)]="searchStatus" (ngModelChange)="filterTraces()" placeholder="Escribe el estado">
</mat-form-field>
<mat-form-field appearance="fill">
<mat-label>Buscar por usuario</mat-label>
<input matInput [(ngModel)]="searchCreatedBy" (ngModelChange)="filterTraces()" placeholder="Escribe quien creó">
</mat-form-field>
<mat-form-field appearance="fill">
<mat-label>Buscar por fecha </mat-label>
<input matInput [(ngModel)]="searchExecutedAt" (ngModelChange)="filterTraces()" placeholder="Escribe la fecha ejecutada">
</mat-form-field>
</div>
<table mat-table [dataSource]="filteredTraces" class="mat-elevation-z8">
<ng-container matColumnDef="commandName">
<th mat-header-cell *matHeaderCellDef> Comando </th>
<td mat-cell *matCellDef="let trace"> {{ trace.command.name }} </td>
</ng-container>
<ng-container matColumnDef="clientName">
<th mat-header-cell *matHeaderCellDef> Cliente </th>
<td mat-cell *matCellDef="let trace"> {{ trace.client.name }} </td>
</ng-container>
<ng-container matColumnDef="status">
<th mat-header-cell *matHeaderCellDef> Estado </th>
<td mat-cell *matCellDef="let trace"> {{ trace.status }} </td>
</ng-container>
<ng-container matColumnDef="executedAt">
<th mat-header-cell *matHeaderCellDef> Ejecutado En </th>
<td mat-cell *matCellDef="let trace"> {{ trace.executedAt | date:'short' }} </td>
</ng-container>
<ng-container matColumnDef="createdBy">
<th mat-header-cell *matHeaderCellDef> Creado Por </th>
<td mat-cell *matCellDef="let trace"> {{ trace.createdBy }} </td>
</ng-container>
<tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
<tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
</table>
<mat-paginator [length]="length"
[pageSize]="itemsPerPage"
[pageSizeOptions]="pageSizeOptions"
(page)="onPageChange($event)">
</mat-paginator>
<mat-form-field appearance="fill">
<mat-label>Buscar por comando</mat-label>
<input matInput [(ngModel)]="searchCommand" (ngModelChange)="filterTraces()" placeholder="Escribe el nombre del comando">
</mat-form-field>
<mat-form-field appearance="fill">
<mat-label>Buscar por cliente</mat-label>
<input matInput [(ngModel)]="searchClient" (ngModelChange)="filterTraces()" placeholder="Escribe el nombre del cliente">
</mat-form-field>
<mat-form-field appearance="fill">
<mat-label>Buscar por estado</mat-label>
<input matInput [(ngModel)]="searchStatus" (ngModelChange)="filterTraces()" placeholder="Escribe el estado">
</mat-form-field>
<mat-form-field appearance="fill">
<mat-label>Buscar por usuario</mat-label>
<input matInput [(ngModel)]="searchCreatedBy" (ngModelChange)="filterTraces()" placeholder="Escribe quien creó">
</mat-form-field>
<mat-form-field appearance="fill">
<mat-label>Buscar por fecha </mat-label>
<input matInput [(ngModel)]="searchExecutedAt" (ngModelChange)="filterTraces()" placeholder="Escribe la fecha ejecutada">
</mat-form-field>
</div>
<table mat-table [dataSource]="groupedTraces" class="mat-elevation-z8">
<ng-container matColumnDef="group">
<th mat-header-cell *matHeaderCellDef> Ejecución</th>
<td mat-cell *matCellDef="let group"> {{ group.commandId }} </td>
</ng-container>
<ng-container matColumnDef="commandName">
<th mat-header-cell *matHeaderCellDef> Comando </th>
<td mat-cell *matCellDef="let group; let i = index">
<ng-container *ngFor="let trace of group.traces">
<div *ngIf="i === 0">{{ trace.command.name }}</div>
</ng-container>
</td>
</ng-container>
<ng-container matColumnDef="clientName">
<th mat-header-cell *matHeaderCellDef> Cliente </th>
<td mat-cell *matCellDef="let group; let i = index">
<ng-container *ngFor="let trace of group.traces">
<div>{{ trace.client.name }}</div>
</ng-container>
</td>
</ng-container>
<ng-container matColumnDef="status">
<th mat-header-cell *matHeaderCellDef> Estado </th>
<td mat-cell *matCellDef="let group; let i = index">
<ng-container *ngFor="let trace of group.traces">
<div>{{ trace.status }}</div>
</ng-container>
</td>
</ng-container>
<ng-container matColumnDef="executedAt">
<th mat-header-cell *matHeaderCellDef> Ejecutado En </th>
<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 {
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[] = [];
filteredTraces: any[] = []; // Nueva variable para las trazas filtradas
groupedTraces: any[] = [];
length: number = 0;
itemsPerPage: number = 20;
page: number = 1;
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 = '';
searchClient: string = '';
searchStatus: string = '';
@ -30,7 +29,6 @@ export class TaskLogsComponent implements OnInit {
this.loadTraces();
}
// Método para cargar las trazas con paginación
loadTraces(): void {
const url = `${this.baseUrl}/traces?page=${this.page}&itemsPerPage=${this.itemsPerPage}`;
@ -38,8 +36,7 @@ export class TaskLogsComponent implements OnInit {
(data) => {
this.traces = data['hydra:member'];
this.length = data['hydra:totalItems'];
this.filteredTraces = this.traces; // Inicializa con todas las trazas
console.log('Traces:', this.traces);
this.groupedTraces = this.groupByCommandId(this.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
onPageChange(event: any): void {
this.page = event.pageIndex + 1; // Actualiza el número de página
this.itemsPerPage = event.pageSize; // Actualiza los ítems por página
this.loadTraces(); // Recarga las trazas con los nuevos parámetros de paginación
groupByCommandId(traces: any[]): any[] {
const grouped: { [key: string]: any[] } = {};
traces.forEach(trace => {
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 {
this.filteredTraces = this.traces.filter(trace => {
const filtered = this.traces.filter(trace => {
const commandMatch = trace.command.name.toLowerCase().includes(this.searchCommand.toLowerCase());
const clientMatch = trace.client.name.toLowerCase().includes(this.searchClient.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;
});
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 { MatDialogRef, MAT_DIALOG_DATA } from '@angular/material/dialog';
import { HttpClient } from '@angular/common/http';
import { ToastrService } from 'ngx-toastr';
@Component({
selector: 'app-create-command',
@ -18,9 +19,10 @@ export class CreateCommandComponent {
private fb: FormBuilder,
private http: HttpClient,
public dialogRef: MatDialogRef<CreateCommandComponent>,
private toastService: ToastrService,
@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 {
@ -44,6 +46,7 @@ export class CreateCommandComponent {
if (this.isEditMode) {
this.http.patch(`${this.apiUrl}/${this.data.command.uuid}`, commandData).subscribe(
response => {
this.toastService.success('Comando creado con éxito');
this.dialogRef.close(commandData);
},
error => {