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

@@ -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,

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>

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}
+    })
+  }
 }

ogWebconsole/src/app/components/task-logs/client-task-logs/client-task-logs.component.html

@@ -0,0 +1 @@
+<p>client-task-logs works!</p>

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();
+  });
+});

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;
+      }
+    );
+  }
+
+}

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",

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",