From 1ba62b92831e77af42901148e5425d192f934f8c Mon Sep 17 00:00:00 2001
From: Lucas Lara <llara@localhost>
Date: Thu, 8 May 2025 12:59:32 +0200
Subject: [PATCH] Add ClientTaskLogs component and integrate with Groups
 component

- Introduced ClientTaskLogsComponent to display client task logs.
- Updated GroupsComponent to include a button for opening client task logs.
- Added translations for 'procedimientosCliente' in both English and Spanish locales.
- Created associated HTML, CSS, and spec files for ClientTaskLogsComponent.
---
 ogWebconsole/src/app/app.module.ts            |  4 +-
 .../components/groups/groups.component.html   | 10 +++-
 .../app/components/groups/groups.component.ts | 10 ++++
 .../client-task-logs.component.css            |  0
 .../client-task-logs.component.html           |  1 +
 .../client-task-logs.component.spec.ts        | 23 ++++++++
 .../client-task-logs.component.ts             | 58 +++++++++++++++++++
 ogWebconsole/src/locale/en.json               |  1 +
 ogWebconsole/src/locale/es.json               |  1 +
 9 files changed, 106 insertions(+), 2 deletions(-)
 create mode 100644 ogWebconsole/src/app/components/task-logs/client-task-logs/client-task-logs.component.css
 create mode 100644 ogWebconsole/src/app/components/task-logs/client-task-logs/client-task-logs.component.html
 create mode 100644 ogWebconsole/src/app/components/task-logs/client-task-logs/client-task-logs.component.spec.ts
 create mode 100644 ogWebconsole/src/app/components/task-logs/client-task-logs/client-task-logs.component.ts

diff --git a/ogWebconsole/src/app/app.module.ts b/ogWebconsole/src/app/app.module.ts
index 07f2dcb..bd95fa4 100644
--- a/ogWebconsole/src/app/app.module.ts
+++ b/ogWebconsole/src/app/app.module.ts
@@ -150,6 +150,7 @@ import { ShowTaskScriptComponent } from './components/commands/commands-task/sho
 import { CreateTaskScriptComponent } from './components/commands/commands-task/create-task-script/create-task-script.component';
 import { ViewParametersModalComponent } from './components/commands/commands-task/show-task-script/view-parameters-modal/view-parameters-modal.component';
 import { OutputDialogComponent } from './components/task-logs/output-dialog/output-dialog.component';
+import { ClientTaskLogsComponent } from './components/task-logs/client-task-logs/client-task-logs.component';
 
 export function HttpLoaderFactory(http: HttpClient) {
   return new TranslateHttpLoader(http, './locale/', '.json');
@@ -257,7 +258,8 @@ registerLocaleData(localeEs, 'es-ES');
     ShowTaskScriptComponent,
     CreateTaskScriptComponent,
     ViewParametersModalComponent,
-    OutputDialogComponent
+    OutputDialogComponent,
+    ClientTaskLogsComponent
   ],
   bootstrap: [AppComponent],
   imports: [BrowserModule,
diff --git a/ogWebconsole/src/app/components/groups/groups.component.html b/ogWebconsole/src/app/components/groups/groups.component.html
index 4fc74d1..1d7f19f 100644
--- a/ogWebconsole/src/app/components/groups/groups.component.html
+++ b/ogWebconsole/src/app/components/groups/groups.component.html
@@ -300,6 +300,10 @@
                               <mat-icon>sync</mat-icon>
                               <span>{{ 'sync' | translate }}</span>
                             </button>
+                            <button mat-menu-item (click)="openClientTaskLogs($event, client)">
+                              <mat-icon>list_alt</mat-icon>
+                              <span>{{ 'procedimientosCliente' | translate }}</span>
+                            </button>
                             <button mat-menu-item (click)="onDeleteClick($event, client)">
                               <mat-icon>delete</mat-icon>
                               <span>{{ 'delete' | translate }}</span>
@@ -430,6 +434,10 @@
                           <mat-icon>sync</mat-icon>
                           <span>{{ 'sync' | translate }}</span>
                         </button>
+                        <button mat-menu-item (click)="openClientTaskLogs($event, client)">
+                          <mat-icon>list_alt</mat-icon>
+                          <span>{{ 'procedimientosCliente' | translate }}</span>
+                        </button>
                         <button mat-menu-item (click)="onDeleteClick($event, client)">
                           <mat-icon>delete</mat-icon>
                           <span>{{ 'delete' | translate }}</span>
@@ -461,4 +469,4 @@
 
     </div>
   </ng-template>
-</div>
+</div>
\ No newline at end of file
diff --git a/ogWebconsole/src/app/components/groups/groups.component.ts b/ogWebconsole/src/app/components/groups/groups.component.ts
index 7a699b6..dbd45c6 100644
--- a/ogWebconsole/src/app/components/groups/groups.component.ts
+++ b/ogWebconsole/src/app/components/groups/groups.component.ts
@@ -28,6 +28,7 @@ import { BreakpointObserver } from '@angular/cdk/layout';
 import { MatMenuTrigger } from '@angular/material/menu';
 import { ClientDetailsComponent } from './shared/client-details/client-details.component';
 import { PartitionTypeOrganizatorComponent } from './shared/partition-type-organizator/partition-type-organizator.component';
+import { ClientTaskLogsComponent } from '../task-logs/client-task-logs/client-task-logs.component';
 
 enum NodeType {
   OrganizationalUnit = 'organizational-unit',
@@ -861,4 +862,13 @@ export class GroupsComponent implements OnInit, OnDestroy {
       data: simplifiedClientsData
     });
   }
+
+  openClientTaskLogs(event: MouseEvent, client: Client): void {
+    event.stopPropagation();
+
+    this.dialog.open(ClientTaskLogsComponent, {
+      width: '1200px',
+      data: {client}
+    })
+  }
 }
diff --git a/ogWebconsole/src/app/components/task-logs/client-task-logs/client-task-logs.component.css b/ogWebconsole/src/app/components/task-logs/client-task-logs/client-task-logs.component.css
new file mode 100644
index 0000000..e69de29
diff --git a/ogWebconsole/src/app/components/task-logs/client-task-logs/client-task-logs.component.html b/ogWebconsole/src/app/components/task-logs/client-task-logs/client-task-logs.component.html
new file mode 100644
index 0000000..651b9f4
--- /dev/null
+++ b/ogWebconsole/src/app/components/task-logs/client-task-logs/client-task-logs.component.html
@@ -0,0 +1 @@
+<p>client-task-logs works!</p>
diff --git a/ogWebconsole/src/app/components/task-logs/client-task-logs/client-task-logs.component.spec.ts b/ogWebconsole/src/app/components/task-logs/client-task-logs/client-task-logs.component.spec.ts
new file mode 100644
index 0000000..ee38857
--- /dev/null
+++ b/ogWebconsole/src/app/components/task-logs/client-task-logs/client-task-logs.component.spec.ts
@@ -0,0 +1,23 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { ClientTaskLogsComponent } from './client-task-logs.component';
+
+describe('ClientTaskLogsComponent', () => {
+  let component: ClientTaskLogsComponent;
+  let fixture: ComponentFixture<ClientTaskLogsComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ClientTaskLogsComponent]
+    })
+    .compileComponents();
+
+    fixture = TestBed.createComponent(ClientTaskLogsComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/ogWebconsole/src/app/components/task-logs/client-task-logs/client-task-logs.component.ts b/ogWebconsole/src/app/components/task-logs/client-task-logs/client-task-logs.component.ts
new file mode 100644
index 0000000..3502328
--- /dev/null
+++ b/ogWebconsole/src/app/components/task-logs/client-task-logs/client-task-logs.component.ts
@@ -0,0 +1,58 @@
+import { Component, Inject, OnInit } from '@angular/core';
+import { MAT_DIALOG_DATA } from '@angular/material/dialog';
+import { HttpClient, HttpParams } from '@angular/common/http';
+import { ConfigService } from '@services/config.service';
+
+@Component({
+  selector: 'app-client-task-logs',
+  templateUrl: './client-task-logs.component.html',
+  styleUrls: ['./client-task-logs.component.css']
+})
+export class ClientTaskLogsComponent implements OnInit {
+
+  traces: any[] = [];
+  loading = false;
+  itemsPerPage: number = 20;
+  page: number = 0;
+  length: number = 0; 
+  baseUrl: string;
+
+  constructor(
+    @Inject(MAT_DIALOG_DATA) public data: { client: any },
+    private http: HttpClient,
+    private configService: ConfigService,
+  ) {
+    this.baseUrl = this.configService.apiUrl;
+  }
+
+  ngOnInit(): void {
+    this.loadTraces();
+  }
+
+  loadTraces(): void {
+    const clientId = this.data.client?.id;
+    if (!clientId) return;
+
+    this.loading = true;
+
+    const params = new HttpParams()
+      .set('client.id', clientId)
+      .set('page', (this.page + 1).toString())
+      .set('itemsPerPage', this.itemsPerPage.toString());
+
+    const url = `${this.baseUrl}/traces`;
+
+    this.http.get<any>(url, { params }).subscribe(
+      (data) => {
+        this.traces = data['hydra:member'];
+        this.length = data['hydra:totalItems'];
+        this.loading = false;
+      },
+      (error) => {
+        console.error('Error fetching client traces', error);
+        this.loading = false;
+      }
+    );
+  }
+
+}
diff --git a/ogWebconsole/src/locale/en.json b/ogWebconsole/src/locale/en.json
index b1de3d8..e968708 100644
--- a/ogWebconsole/src/locale/en.json
+++ b/ogWebconsole/src/locale/en.json
@@ -520,6 +520,7 @@
   "remoteAccess": "Remote access available",
   "noRemoteAccess": "Remote access not available",
   "capacityWarning": "The capacity cannot be negative",
+  "procedimientosCliente": "Procedures",
   "monolithicImageStep": "Monolithic image",
   "monolithicImageStepText": "On this screen you can manage monolithic images.",
   "monolithicImage": "Monolithic image",
diff --git a/ogWebconsole/src/locale/es.json b/ogWebconsole/src/locale/es.json
index 0ebb6e3..ec3f35b 100644
--- a/ogWebconsole/src/locale/es.json
+++ b/ogWebconsole/src/locale/es.json
@@ -521,6 +521,7 @@
   "remoteAccess": "Disponible acceso remoto",
   "noRemoteAccess": "No disponible acceso remoto",
   "capacityWarning": "El aforo no puede ser",
+  "procedimientosCliente": "Procedimientos",
   "tableDateRepositoryText": "Esta tabla muestra los datos asociados a los repositorios existentes.",
   "repositoryTitleStepText": "En esta pantalla se pueden gestionar los repositorios de imágenes.",
   "monolithicImageStep": "Imagen monolítica",