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

Refactor trace

oggui/calendar
Manuel Aranda Rosales 2024-10-03 19:04:16 +02:00
parent a6f0d30c21
commit 0bbe428739
4 changed files with 283 additions and 158 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

74
ogWebconsole/src/app/app.module.ts
View File

@ -42,7 +42,7 @@ import { EditClientComponent } from './components/groups/shared/clients/edit-cli
import { ClassroomViewComponent } from './components/groups/shared/classroom-view/classroom-view.component';
import { MatProgressSpinner } from "@angular/material/progress-spinner";
import { MatMenu, MatMenuItem, MatMenuTrigger } from "@angular/material/menu";
import { MatAutocomplete } from "@angular/material/autocomplete";
import {MatAutocomplete, MatAutocompleteTrigger} from "@angular/material/autocomplete";
import { MatChip, MatChipListbox, MatChipOption, MatChipSet, MatChipsModule } from "@angular/material/chips";
import { ClientViewComponent } from './components/groups/shared/client-view/client-view.component';
import { MatTab, MatTabGroup } from "@angular/material/tabs";
@ -159,42 +159,42 @@ import { OrganizationalUnitTabViewComponent } from './components/groups/componen
OrganizationalUnitTabViewComponent
],
bootstrap: [AppComponent],
imports: [BrowserModule,
AppRoutingModule,
FormsModule,
ReactiveFormsModule,
MatToolbarModule,
MatIconModule,
MatButtonModule,
MatSidenavModule,
NoopAnimationsModule,
MatCardModule,
MatCheckboxModule,
MatFormFieldModule,
MatInputModule,
MatListModule,
MatTableModule,
MatDialogModule,
MatSelectModule,
MatDividerModule,
MatStepperModule,
DragDropModule,
MatSlideToggleModule, MatMenu, MatMenuTrigger, MatMenuItem, MatAutocomplete, MatChipListbox, MatChipOption, MatChipSet, MatChipsModule, MatChip, MatProgressSpinner, MatTabGroup, MatTab, MatTooltip,
MatExpansionModule,
NgxChartsModule,
MatDatepickerModule,
MatNativeDateModule,
ToastrModule.forRoot(
{
timeOut: 5000,
positionClass: 'toast-bottom-right',
preventDuplicates: true,
progressBar: true,
progressAnimation: 'increasing',
closeButton: true
}
), MatGridList, MatTree, MatTreeNode, MatNestedTreeNode, MatTreeNodeToggle, MatTreeNodeDef, MatTreeNodePadding, MatTreeNodeOutlet, MatPaginator, MatGridTile, MatExpansionPanel, MatExpansionPanelTitle, MatExpansionPanelDescription, MatRadioGroup, MatRadioButton
],
imports: [BrowserModule,
AppRoutingModule,
FormsModule,
ReactiveFormsModule,
MatToolbarModule,
MatIconModule,
MatButtonModule,
MatSidenavModule,
NoopAnimationsModule,
MatCardModule,
MatCheckboxModule,
MatFormFieldModule,
MatInputModule,
MatListModule,
MatTableModule,
MatDialogModule,
MatSelectModule,
MatDividerModule,
MatStepperModule,
DragDropModule,
MatSlideToggleModule, MatMenu, MatMenuTrigger, MatMenuItem, MatAutocomplete, MatChipListbox, MatChipOption, MatChipSet, MatChipsModule, MatChip, MatProgressSpinner, MatTabGroup, MatTab, MatTooltip,
MatExpansionModule,
NgxChartsModule,
MatDatepickerModule,
MatNativeDateModule,
ToastrModule.forRoot(
{
timeOut: 5000,
positionClass: 'toast-bottom-right',
preventDuplicates: true,
progressBar: true,
progressAnimation: 'increasing',
closeButton: true
}
), MatGridList, MatTree, MatTreeNode, MatNestedTreeNode, MatTreeNodeToggle, MatTreeNodeDef, MatTreeNodePadding, MatTreeNodeOutlet, MatPaginator, MatGridTile, MatExpansionPanel, MatExpansionPanelTitle, MatExpansionPanelDescription, MatRadioGroup, MatRadioButton, MatAutocompleteTrigger
],
schemas: [
CUSTOM_ELEMENTS_SCHEMA,
],

85
ogWebconsole/src/app/components/commands/commands-task/task-logs/task-logs.component.css
View File

@ -1,3 +1,82 @@
mat-form-field{
margin: 10px;
}
.title {
font-size: 24px;
}
.calendar-button-row {
display: flex;
justify-content: flex-start;
margin-top: 16px;
}
.divider {
margin: 20px 0;
}
.lists-container {
padding: 16px;
}
.imagesLists-container {
flex: 1;
}
.card.unidad-card {
height: 100%;
box-sizing: border-box;
}
table {
width: 100%;
margin-top: 50px;
}
.search-container {
display: flex;
justify-content: space-between;
align-items: center;
padding: 0 5px;
box-sizing: border-box;
}
.search-string {
flex: 1;
padding: 5px;
}
.search-boolean {
flex: 1;
padding: 5px;
}
.search-select {
flex: 2;
padding: 5px;
}
.header-container {
display: flex;
justify-content: space-between;
align-items: center;
padding: 10px;
}
.mat-elevation-z8 {
box-shadow: 0px 0px 0px rgba(0,0,0,0.2);
}
.paginator-container {
display: flex;
justify-content: end;
margin-bottom: 30px;
}
.mat-chip-readonly-true {
background-color: #4CAF50 !important;
color: white !important;
}
.mat-chip-readonly-false {
background-color: #F44336 !important;
color: white !important;
}

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

@ -1,91 +1,47 @@
<div class="header-container">
<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]="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>
<h2 class="title" i18n="@@adminCommandsTitle">Trazas de comandos y procedimientos</h2>
</div>
<mat-divider class="divider"></mat-divider>
<div class="search-container">
<mat-form-field appearance="fill" class="search-select">
<input type="text" matInput [formControl]="clientControl" [matAutocomplete]="clientAuto" placeholder="Seleccione un cliente">
<mat-autocomplete #clientAuto="matAutocomplete" [displayWith]="displayFnClient" (optionSelected)="onOptionClientSelected($event.option.value)">
<mat-option *ngFor="let client of filteredClients | async" [value]="client">
{{ client.name }}
</mat-option>
</mat-autocomplete>
</mat-form-field>
<!-- Autocomplete para seleccionar un comando -->
<mat-form-field appearance="fill" class="search-select">
<input type="text" matInput [formControl]="commandControl" [matAutocomplete]="commandAuto" placeholder="Seleccione un comando">
<mat-autocomplete #commandAuto="matAutocomplete" [displayWith]="displayFnCommand" (optionSelected)="onOptionCommandSelected($event.option.value)">
<mat-option *ngFor="let command of filteredCommands | async" [value]="command">
{{ command.name }}
</mat-option>
</mat-autocomplete>
</mat-form-field>
</div>
<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" >
<ng-container >
{{ column.cell(trace) }}
</ng-container>
</td>
</ng-container>
<tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
<tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
</table>
<div class="paginator-container">
<mat-paginator [length]="length"
[pageSize]="itemsPerPage"
[pageSizeOptions]="pageSizeOptions"
(page)="onPageChange($event)">
[pageSize]="itemsPerPage"
[pageIndex]="page"
[pageSizeOptions]="pageSizeOptions"
(page)="onPageChange($event)">
</mat-paginator>
</div>

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

@ -1,5 +1,9 @@
import { Component, OnInit } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import {Observable, startWith} from 'rxjs';
import {FormControl} from "@angular/forms";
import {map} from "rxjs/operators";
import {DatePipe} from "@angular/common";
@Component({
selector: 'app-task-logs',
@ -7,36 +11,111 @@ import { HttpClient } from '@angular/common/http';
styleUrls: ['./task-logs.component.css']
})
export class TaskLogsComponent implements OnInit {
baseUrl: string = import.meta.env.NG_APP_BASE_API_URL;
traces: any[] = [];
groupedTraces: any[] = [];
commands: any[] = [];
clients: any[] = [];
length: number = 0;
itemsPerPage: number = 20;
page: number = 1;
page: number = 0;
loading: boolean = true;
pageSizeOptions: number[] = [10, 20, 30, 50];
displayedColumns: string[] = ['commandId','commandName', 'clientName', 'status', 'executedAt', 'createdBy'];
datePipe: DatePipe = new DatePipe('es-ES');
searchCommand: string = '';
searchClient: string = '';
searchStatus: string = '';
searchCreatedBy: string = '';
searchExecutedAt: string = '';
columns = [
{
columnDef: 'id',
header: 'ID',
cell: (trace: any) => `${trace.id}`,
},
{
columnDef: 'command',
header: 'Comando',
cell: (trace: any) => `${trace.command?.name}`
},
{
columnDef: 'client',
header: 'Client',
cell: (trace: any) => `${trace.client?.name}`
},
{
columnDef: 'status',
header: 'Estado',
cell: (trace: any) => `${trace.status}`
},
{
columnDef: 'executedAt',
header: 'Programacion de ejecución',
cell: (trace: any) => `${this.datePipe.transform(trace.executedAt, 'dd/MM/yyyy hh:mm:ss')}`,
},
{
columnDef: 'createdAt',
header: 'Fecha de creación',
cell: (trace: any) => `${this.datePipe.transform(trace.createdAt, 'dd/MM/yyyy hh:mm:ss')}`,
}
];
displayedColumns = [...this.columns.map(column => column.columnDef)];
filters: { [key: string]: string } = {};
filteredClients!: Observable<any[]>;
clientControl = new FormControl();
filteredCommands!: Observable<any[]>;
commandControl = new FormControl();
constructor(private http: HttpClient) {}
ngOnInit(): void {
this.loadTraces();
this.loadCommands();
this.loadClients();
this.filteredCommands = this.commandControl.valueChanges.pipe(
startWith(''),
map(value => (typeof value === 'string' ? value : value?.name)),
map(name => (name ? this._filterCommands(name) : this.commands.slice()))
);
this.filteredClients = this.clientControl.valueChanges.pipe(
startWith(''),
map(value => (typeof value === 'string' ? value : value?.name)),
map(name => (name ? this._filterClients(name) : this.clients.slice()))
);
}
private _filterClients(name: string): any[] {
const filterValue = name.toLowerCase();
return this.clients.filter(client => client.name.toLowerCase().includes(filterValue));
}
private _filterCommands(name: string): any[] {
const filterValue = name.toLowerCase();
return this.commands.filter(command => command.name.toLowerCase().includes(filterValue));
}
displayFnClient(client: any): string {
return client && client.name ? client.name : '';
}
displayFnCommand(command: any): string {
return command && command.name ? command.name : '';
}
onOptionCommandSelected(selectedCommand: any): void {
this.filters['command.id'] = selectedCommand.id;
this.loadTraces();
}
onOptionClientSelected(selectedClient: any): void {
this.filters['client.id'] = selectedClient.id;
this.loadTraces();
}
loadTraces(): void {
const url = `${this.baseUrl}/traces?page=${this.page}&itemsPerPage=${this.itemsPerPage}`;
this.http.get<any>(url).subscribe(
const url = `${this.baseUrl}/traces?page=${this.page + 1}&itemsPerPage=${this.itemsPerPage}`;
this.http.get<any>(url, { params: this.filters }).subscribe(
(data) => {
this.traces = data['hydra:member'];
this.length = data['hydra:totalItems'];
this.groupedTraces = this.groupByCommandId(this.traces);
this.groupedTraces = this.groupByCommandId(this.traces);
},
(error) => {
console.error('Error fetching traces', error);
@ -44,6 +123,32 @@ export class TaskLogsComponent implements OnInit {
);
}
loadCommands() {
this.http.get<any>( `${this.baseUrl}/commands?&page=1&itemsPerPage=10000`).subscribe(
response => {
this.commands = response['hydra:member'];
this.loading = false;
},
error => {
console.error('Error fetching parent units:', error);
this.loading = false;
}
);
}
loadClients() {
this.http.get<any>( `${this.baseUrl}/clients?&page=1&itemsPerPage=10000`).subscribe(
response => {
this.clients = response['hydra:member'];
this.loading = false;
},
error => {
console.error('Error fetching parent units:', error);
this.loading = false;
}
);
}
groupByCommandId(traces: any[]): any[] {
const grouped: { [key: string]: any[] } = {};
@ -62,23 +167,8 @@ export class TaskLogsComponent implements OnInit {
}
onPageChange(event: any): void {
this.page = event.pageIndex + 1;
this.itemsPerPage = event.pageSize;
this.loadTraces();
}
filterTraces(): void {
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());
const createdByMatch = trace.createdBy.toLowerCase().includes(this.searchCreatedBy.toLowerCase());
const executedAtMatch = trace.executedAt.toLowerCase().includes(this.searchExecutedAt.toLowerCase());
return commandMatch && clientMatch && statusMatch && createdByMatch && executedAtMatch;
});
this.length = filtered.length;
this.groupedTraces = this.groupByCommandId(filtered);
this.page = event.pageIndex + 1;
this.itemsPerPage = event.pageSize;
this.loadTraces();
}
}