From a84372214b7b09e2cb8664bcf28e6ba8d70f7b83 Mon Sep 17 00:00:00 2001
From: Lucas Lara <llara@localhost>
Date: Tue, 20 May 2025 13:26:35 +0200
Subject: [PATCH] refactor: simplify progress container structure and enhance
 trace status display

---
 .../client-task-logs.component.html                |  6 +++---
 .../client-task-logs/client-task-logs.component.ts | 14 ++++++++++++++
 .../components/task-logs/task-logs.component.html  |  6 +++---
 3 files changed, 20 insertions(+), 6 deletions(-)

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
index 4de6b61..3f70436 100644
--- 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
@@ -60,8 +60,7 @@
           <ng-container [ngSwitch]="column.columnDef">
             <ng-container *ngSwitchCase="'status'">
               <ng-container *ngIf="trace.status === 'in-progress' && trace.progress; else statusChip">
-                <div class="progress-container" joyrideStep="tracesProgressStep"
-                  text="{{ 'tracesProgressStepText' | translate }}">
+                <div class="progress-container">
                   <mat-progress-bar class="example-margin" [mode]="mode" [value]="trace.progress"
                     [bufferValue]="bufferValue">
                   </mat-progress-bar>
@@ -69,7 +68,8 @@
                 </div>
               </ng-container>
               <ng-template #statusChip>
-                <div class="status-progress-flex">
+                <div class="status-progress-flex" joyrideStep="tracesProgressStep"
+                  text="{{ 'tracesProgressStepText' | translate }}">
                   <mat-chip [ngClass]="{
                       'chip-failed': trace.status === 'failed',
                       'chip-success': trace.status === 'success',
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
index 77d739c..7c429a3 100644
--- 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
@@ -192,6 +192,20 @@ export class ClientTaskLogsComponent implements OnInit {
     if (this.filters['status']) {
       params = params.set('status', this.filters['status']);
     }
+
+    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;
+      }
+    );
   }
 
   loadCommands() {
diff --git a/ogWebconsole/src/app/components/task-logs/task-logs.component.html b/ogWebconsole/src/app/components/task-logs/task-logs.component.html
index 295a9e1..b010f4a 100644
--- a/ogWebconsole/src/app/components/task-logs/task-logs.component.html
+++ b/ogWebconsole/src/app/components/task-logs/task-logs.component.html
@@ -81,8 +81,7 @@
         <ng-container [ngSwitch]="column.columnDef">
           <ng-container *ngSwitchCase="'status'">
             <ng-container *ngIf="trace.status === 'in-progress' && trace.progress; else statusChip">
-              <div class="progress-container" joyrideStep="tracesProgressStep"
-                text="{{ 'tracesProgressStepText' | translate }}">
+              <div class="progress-container">
                 <mat-progress-bar class="example-margin" [mode]="mode" [value]="trace.progress"
                   [bufferValue]="bufferValue">
                 </mat-progress-bar>
@@ -90,7 +89,8 @@
               </div>
             </ng-container>
             <ng-template #statusChip>
-              <div class="status-progress-flex">
+              <div class="status-progress-flex" joyrideStep="tracesProgressStep"
+                text="{{ 'tracesProgressStepText' | translate }}">
                 <mat-chip [ngClass]="{
                     'chip-failed': trace.status === 'failed',
                     'chip-success': trace.status === 'success',