+
+
+
- | {{ column.header }} |
+
+
+ {{ column.header }}
+
+
+ |
@@ -102,7 +192,11 @@
- {{trace.progress}}%
+ {{trace.progress}}%
+
@@ -116,16 +210,16 @@
'chip-cancelled': trace.status === 'cancelled'
}">
{{
- trace.status === 'failed' ? 'Error' :
- trace.status === 'in-progress' ? 'En ejecución' :
- trace.status === 'success' ? 'Completado' :
- trace.status === 'pending' ? 'Pendiente' :
- trace.status === 'cancelled' ? 'Cancelado' :
+ trace.status === 'failed' ? ('failed' | translate) :
+ trace.status === 'in-progress' ? ('inProgress' | translate) :
+ trace.status === 'success' ? ('successful' | translate) :
+ trace.status === 'pending' ? ('pending' | translate) :
+ trace.status === 'cancelled' ? ('cancelled' | translate) :
trace.status
}}
- |
diff --git a/ogWebconsole/src/app/components/task-logs/task-logs.component.ts b/ogWebconsole/src/app/components/task-logs/task-logs.component.ts
index 18e441b..5386f4d 100644
--- a/ogWebconsole/src/app/components/task-logs/task-logs.component.ts
+++ b/ogWebconsole/src/app/components/task-logs/task-logs.component.ts
@@ -1,4 +1,4 @@
-import { ChangeDetectorRef, Component, OnInit } from '@angular/core';
+import { ChangeDetectorRef, Component, OnInit, OnDestroy } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { Observable, forkJoin } from 'rxjs';
import { FormControl } from '@angular/forms';
@@ -20,7 +20,7 @@ import { COMMAND_TYPES } from '../../shared/constants/command-types';
templateUrl: './task-logs.component.html',
styleUrls: ['./task-logs.component.css']
})
-export class TaskLogsComponent implements OnInit {
+export class TaskLogsComponent implements OnInit, OnDestroy {
baseUrl: string;
mercureUrl: string;
traces: any[] = [];
@@ -38,6 +38,30 @@ export class TaskLogsComponent implements OnInit {
bufferValue = 0;
today = new Date();
+ showAdvancedFilters: boolean = false;
+ selectedTrace: any = null;
+ sortBy: string = 'executedAt';
+ sortDirection: 'asc' | 'desc' = 'desc';
+ currentSortColumn: string = 'executedAt';
+
+ totalStats: {
+ total: number;
+ success: number;
+ failed: number;
+ pending: number;
+ inProgress: number;
+ cancelled: number;
+ today: number;
+ } = {
+ total: 0,
+ success: 0,
+ failed: 0,
+ pending: 0,
+ inProgress: 0,
+ cancelled: 0,
+ today: 0
+ };
+
filteredCommands2 = Object.keys(COMMAND_TYPES).map(key => ({
name: key,
value: key,
@@ -49,31 +73,37 @@ export class TaskLogsComponent implements OnInit {
columnDef: 'id',
header: 'ID',
cell: (trace: any) => `${trace.id}`,
+ sortable: true
},
{
columnDef: 'command',
header: 'Comando',
- cell: (trace: any) => trace.command
+ cell: (trace: any) => trace.command,
+ sortable: true
},
{
columnDef: 'client',
header: 'Cliente',
- cell: (trace: any) => trace.client?.name
+ cell: (trace: any) => trace.client?.name,
+ sortable: true
},
{
columnDef: 'status',
header: 'Estado',
- cell: (trace: any) => trace.status
+ cell: (trace: any) => trace.status,
+ sortable: true
},
{
columnDef: 'executedAt',
header: 'Ejecución',
cell: (trace: any) => this.datePipe.transform(trace.executedAt, 'dd/MM/yyyy hh:mm:ss'),
+ sortable: true
},
{
columnDef: 'finishedAt',
header: 'Finalización',
cell: (trace: any) => this.datePipe.transform(trace.finishedAt, 'dd/MM/yyyy hh:mm:ss'),
+ sortable: true
},
];
displayedColumns = [...this.columns.map(column => column.columnDef), 'information'];
@@ -100,6 +130,7 @@ export class TaskLogsComponent implements OnInit {
this.loadTraces();
this.loadCommands();
this.loadClients();
+ this.loadTotalStats();
this.filteredCommands = this.commandControl.valueChanges.pipe(
startWith(''),
map(value => (typeof value === 'string' ? value : value?.name)),
@@ -122,6 +153,169 @@ export class TaskLogsComponent implements OnInit {
}
}
+ ngOnDestroy(): void {
+ }
+
+ toggleFilters(): void {
+ this.showAdvancedFilters = !this.showAdvancedFilters;
+ }
+
+ refreshData(): void {
+ this.loadTraces();
+ this.toastService.success('Datos actualizados', 'Éxito');
+ }
+
+ selectTrace(trace: any): void {
+ this.selectedTrace = trace;
+ }
+
+ sortColumn(columnDef: string): void {
+ if (this.currentSortColumn === columnDef) {
+ this.sortDirection = this.sortDirection === 'asc' ? 'desc' : 'asc';
+ } else {
+ this.currentSortColumn = columnDef;
+ this.sortDirection = 'desc';
+ }
+ this.sortBy = columnDef;
+ this.onSortChange();
+ }
+
+ getSortIcon(columnDef: string): string {
+ if (this.currentSortColumn !== columnDef) {
+ return 'unfold_more';
+ }
+ return this.sortDirection === 'asc' ? 'expand_less' : 'expand_more';
+ }
+
+ onSortChange(): void {
+ this.loadTraces();
+ }
+
+ getStatusCount(status: string): number {
+ switch(status) {
+ case 'success':
+ return this.totalStats.success;
+ case 'failed':
+ return this.totalStats.failed;
+ case 'pending':
+ return this.totalStats.pending;
+ case 'in-progress':
+ return this.totalStats.inProgress;
+ case 'cancelled':
+ return this.totalStats.cancelled;
+ case 'today':
+ return this.totalStats.today;
+ default:
+ return 0;
+ }
+ }
+
+ getTodayTracesCount(): number {
+ const today = new Date();
+ const todayString = this.datePipe.transform(today, 'yyyy-MM-dd');
+ return this.traces.filter(trace =>
+ trace.executedAt && trace.executedAt.startsWith(todayString)
+ ).length;
+ }
+
+ getRelativeTime(date: string): string {
+ if (!date) return '';
+
+ const now = new Date();
+ const traceDate = new Date(date);
+ const diffInSeconds = Math.floor((now.getTime() - traceDate.getTime()) / 1000);
+
+ if (diffInSeconds < 60) {
+ return 'hace un momento';
+ } else if (diffInSeconds < 3600) {
+ const minutes = Math.floor(diffInSeconds / 60);
+ return `hace ${minutes} minuto${minutes > 1 ? 's' : ''}`;
+ } else if (diffInSeconds < 86400) {
+ const hours = Math.floor(diffInSeconds / 3600);
+ return `hace ${hours} hora${hours > 1 ? 's' : ''}`;
+ } else {
+ const days = Math.floor(diffInSeconds / 86400);
+ return `hace ${days} día${days > 1 ? 's' : ''}`;
+ }
+ }
+
+ exportToCSV(): void {
+ const headers = ['ID', 'Comando', 'Cliente', 'Estado', 'Fecha Ejecución', 'Fecha Finalización', 'Job ID'];
+ const csvData = this.traces.map(trace => [
+ trace.id,
+ this.translateCommand(trace.command),
+ trace.client?.name || '',
+ trace.status,
+ this.datePipe.transform(trace.executedAt, 'dd/MM/yyyy hh:mm:ss'),
+ this.datePipe.transform(trace.finishedAt, 'dd/MM/yyyy hh:mm:ss'),
+ trace.jobId || ''
+ ]);
+
+ const csvContent = [headers, ...csvData]
+ .map(row => row.map(cell => `"${cell}"`).join(','))
+ .join('\n');
+
+ const blob = new Blob([csvContent], { type: 'text/csv;charset=utf-8;' });
+ const link = document.createElement('a');
+ const url = URL.createObjectURL(blob);
+ link.setAttribute('href', url);
+ link.setAttribute('download', `traces_${new Date().toISOString().split('T')[0]}.csv`);
+ link.style.visibility = 'hidden';
+ document.body.appendChild(link);
+ link.click();
+ document.body.removeChild(link);
+
+ this.toastService.success('Archivo CSV exportado correctamente', 'Éxito');
+ }
+
+ cancelTrace(trace: any): void {
+ if (trace.status !== 'pending' && trace.status !== 'in-progress') {
+ this.toastService.warning('Solo se pueden cancelar trazas pendientes o en ejecución', 'Advertencia');
+ return;
+ }
+
+ const dialogRef = this.dialog.open(DeleteModalComponent, {
+ width: '400px',
+ data: {
+ title: 'Cancelar Traza',
+ message: `¿Estás seguro de que quieres cancelar la traza #${trace.id}?`,
+ confirmText: 'Cancelar',
+ cancelText: 'No cancelar'
+ }
+ });
+
+ dialogRef.afterClosed().subscribe(result => {
+ if (result) {
+ if (trace.status === 'in-progress') {
+ this.http.post(`${this.baseUrl}${trace['@id']}/kill-job`, {
+ jobId: trace.jobId
+ }).subscribe(
+ () => {
+ this.toastService.success('Traza cancelada correctamente', 'Éxito');
+ this.loadTraces();
+ this.loadTotalStats();
+ },
+ (error) => {
+ this.toastService.error('Error al cancelar la traza', 'Error');
+ }
+ );
+ } else {
+ this.http.post(`${this.baseUrl}/traces/cancel-multiple`, {traces: [trace['@id']]}).subscribe(
+ () => {
+ this.toastService.success('Traza cancelada correctamente', 'Éxito');
+ this.loadTraces();
+ this.loadTotalStats();
+ },
+ (error) => {
+ console.error('Error cancelling pending trace:', error);
+ this.toastService.error('Error al cancelar la traza', 'Error');
+ }
+ );
+ }
+ }
+ });
+ }
+
private updateTracesStatus(clientUuid: string, newStatus: string, progress: Number): void {
const traceIndex = this.traces.findIndex(trace => trace['@id'] === clientUuid);
if (traceIndex !== -1) {
@@ -135,14 +329,9 @@ export class TaskLogsComponent implements OnInit {
this.traces = updatedTraces;
this.cdr.detectChanges();
-
- console.log(`Estado actualizado para la traza ${clientUuid}: ${newStatus}`);
- } else {
- console.warn(`Traza con UUID ${clientUuid} no encontrado en la lista.`);
}
}
-
private _filterClients(value: string): any[] {
const filterValue = value.toLowerCase();
@@ -153,7 +342,6 @@ export class TaskLogsComponent implements OnInit {
);
}
-
private _filterCommands(name: string): any[] {
const filterValue = name.toLowerCase();
return this.commands.filter(command => command.name.toLowerCase().includes(filterValue));
@@ -193,30 +381,11 @@ export class TaskLogsComponent implements OnInit {
});
}
- cancelTrace(trace: any): void {
- this.dialog.open(DeleteModalComponent, {
- width: '300px',
- data: { name: trace.jobId },
- }).afterClosed().subscribe((result) => {
- if (result) {
- this.http.post(`${this.baseUrl}/traces/server/${trace.uuid}/cancel`, {}).subscribe({
- next: () => {
- this.toastService.success('Transmision de imagen cancelada');
- this.loadTraces();
- },
- error: (error) => {
- this.toastService.error(error.error['hydra:description']);
- console.error(error.error['hydra:description']);
- }
- });
- }
- });
- }
-
loadTraces(): void {
this.loading = true;
const url = `${this.baseUrl}/traces?page=${this.page + 1}&itemsPerPage=${this.itemsPerPage}`;
const params: any = { ...this.filters };
+
if (params['status'] === undefined) {
delete params['status'];
}
@@ -230,12 +399,19 @@ export class TaskLogsComponent implements OnInit {
delete params['endDate'];
}
+ if (this.sortBy) {
+ params['order[' + this.sortBy + ']'] = this.sortDirection;
+ }
+
this.http.get
(url, { params }).subscribe(
(data) => {
this.traces = data['hydra:member'];
this.length = data['hydra:totalItems'];
this.groupedTraces = this.groupByCommandId(this.traces);
this.loading = false;
+ if (Object.keys(this.filters).length === 0) {
+ this.loadTotalStats();
+ }
},
(error) => {
console.error('Error fetching traces', error);
@@ -272,6 +448,52 @@ export class TaskLogsComponent implements OnInit {
);
}
+ loadTotalStats(): void {
+ this.calculateLocalStats();
+ }
+
+ private calculateLocalStats(): void {
+ const statuses = ['success', 'failed', 'pending', 'in-progress', 'cancelled'];
+ const requests = statuses.map(status =>
+ this.http.get(`${this.baseUrl}/traces?status=${status}&page=1&itemsPerPage=1`)
+ );
+
+ const totalRequest = this.http.get(`${this.baseUrl}/traces?page=1&itemsPerPage=1`);
+
+ const todayString = this.datePipe.transform(new Date(), 'yyyy-MM-dd');
+ const todayRequest = this.http.get(`${this.baseUrl}/traces?executedAt[after]=${todayString}&page=1&itemsPerPage=1`);
+
+ forkJoin([totalRequest, ...requests, todayRequest]).subscribe(
+ (responses) => {
+ const totalData = responses[0];
+ const statusData = responses.slice(1, 6);
+ const todayData = responses[6];
+
+ this.totalStats = {
+ total: totalData['hydra:totalItems'],
+ success: statusData[0]['hydra:totalItems'],
+ failed: statusData[1]['hydra:totalItems'],
+ pending: statusData[2]['hydra:totalItems'],
+ inProgress: statusData[3]['hydra:totalItems'],
+ cancelled: statusData[4]['hydra:totalItems'],
+ today: todayData['hydra:totalItems']
+ };
+ },
+ error => {
+ console.error('Error fetching stats by status:', error);
+ const todayString = this.datePipe.transform(new Date(), 'yyyy-MM-dd');
+ this.totalStats = {
+ total: this.length,
+ success: this.traces.filter(trace => trace.status === 'success').length,
+ failed: this.traces.filter(trace => trace.status === 'failed').length,
+ pending: this.traces.filter(trace => trace.status === 'pending').length,
+ inProgress: this.traces.filter(trace => trace.status === 'in-progress').length,
+ cancelled: this.traces.filter(trace => trace.status === 'cancelled').length,
+ today: this.traces.filter(trace => trace.executedAt && trace.executedAt.startsWith(todayString)).length
+ };
+ }
+ );
+ }
resetFilters(clientSearchCommandInput: any, clientSearchStatusInput: any, clientSearchClientInput: any) {
this.loading = true;
@@ -361,4 +583,16 @@ export class TaskLogsComponent implements OnInit {
});
}
+ // Métodos para paginación
+ getPaginationFrom(): number {
+ return (this.page * this.itemsPerPage) + 1;
+ }
+
+ getPaginationTo(): number {
+ return Math.min((this.page + 1) * this.itemsPerPage, this.length);
+ }
+
+ getPaginationTotal(): number {
+ return this.length;
+ }
}
diff --git a/ogWebconsole/src/app/shared/modal-overlay/modal-overlay.component.css b/ogWebconsole/src/app/shared/modal-overlay/modal-overlay.component.css
new file mode 100644
index 0000000..d666f43
--- /dev/null
+++ b/ogWebconsole/src/app/shared/modal-overlay/modal-overlay.component.css
@@ -0,0 +1,35 @@
+.custom-icon {
+ font-size: 48px;
+ width: 48px;
+ height: 48px;
+ color: white;
+}
+
+/* Animaciones adicionales */
+.modal-overlay-blur {
+ animation: fadeIn 0.3s ease-in-out;
+}
+
+@keyframes fadeIn {
+ from {
+ opacity: 0;
+ }
+ to {
+ opacity: 1;
+ }
+}
+
+.spinner-container {
+ animation: slideIn 0.3s ease-out;
+}
+
+@keyframes slideIn {
+ from {
+ transform: translateY(-20px);
+ opacity: 0;
+ }
+ to {
+ transform: translateY(0);
+ opacity: 1;
+ }
+}
\ No newline at end of file
diff --git a/ogWebconsole/src/app/shared/modal-overlay/modal-overlay.component.html b/ogWebconsole/src/app/shared/modal-overlay/modal-overlay.component.html
new file mode 100644
index 0000000..4c5975b
--- /dev/null
+++ b/ogWebconsole/src/app/shared/modal-overlay/modal-overlay.component.html
@@ -0,0 +1,7 @@
+
+
+
+
{{ customIcon }}
+
{{ message }}
+
+