refs #1518. Add progress bar to task logs component and update styles for better UX

ogWebconsole/src/app/app.module.ts

@@ -41,6 +41,7 @@ import { EditOrganizationalUnitComponent } from './components/groups/shared/orga
 import { EditClientComponent } from './components/groups/shared/clients/edit-client/edit-client.component';
 import { ClassroomViewComponent } from './components/groups/shared/classroom-view/classroom-view.component';
 import { MatProgressSpinner } from "@angular/material/progress-spinner";
+import { MatProgressBarModule } from '@angular/material/progress-bar';
 import { MatMenu, MatMenuItem, MatMenuTrigger } from "@angular/material/menu";
 import {MatAutocomplete, MatAutocompleteTrigger} from "@angular/material/autocomplete";
 import { MatChip, MatChipListbox, MatChipOption, MatChipSet, MatChipsModule } from "@angular/material/chips";
@@ -236,6 +237,7 @@ export function HttpLoaderFactory(http: HttpClient) {
         MatDialogModule,
         MatSelectModule,
         MatDividerModule,
+        MatProgressBarModule,
         MatStepperModule,
         DragDropModule,
         MatSlideToggleModule, MatMenu, MatMenuTrigger, MatMenuItem, MatAutocomplete, MatChipListbox, MatChipOption, MatChipSet, MatChipsModule, MatChip, MatProgressSpinner, MatTabGroup, MatTab, MatTooltip,

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

@@ -61,6 +61,12 @@ table {
   box-shadow: 0px 0px 0px rgba(0, 0, 0, 0.2);
 }
 
+.progress-container {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+}
+
 .paginator-container {
   display: flex;
   justify-content: end;

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

@@ -4,7 +4,7 @@
   </button>
 
   <div class="header-container-title">
-    <h2 class="title" joyrideStep="titleStep" text="{{ 'titleStepText' | translate }}">{{ 'adminCommandsTitle' |
+    <h2 joyrideStep="titleStep" text="{{ 'titleStepText' | translate }}">{{ 'adminCommandsTitle' |
       translate }}</h2>
   </div>
 
@@ -64,20 +64,28 @@
         <ng-container [ngSwitch]="column.columnDef">
           <!-- Caso para "status" -->
           <ng-container *ngSwitchCase="'status'">
-            <mat-chip [ngClass]="{
-            'chip-failed': trace.status === 'failed',
-            'chip-success': trace.status === 'success',
-            'chip-pending': trace.status === 'pending',
-            'chip-in-progress': trace.status === 'in-progress'
-          }">
-              {{
+            <ng-container *ngIf="trace.status === 'in-progress'; else statusChip">
+              <div class="progress-container">
+                <mat-progress-bar class="example-margin" [mode]="mode" [value]="progress" [bufferValue]="bufferValue">
+                </mat-progress-bar>
+                <span>{{progress}}%</span>
+              </div>
+            </ng-container>
+            <ng-template #statusChip>
+              <mat-chip [ngClass]="{
+                'chip-failed': trace.status === 'failed',
+                'chip-success': trace.status === 'success',
+                'chip-pending': trace.status === 'pending',
+                'chip-in-progress': trace.status === 'in-progress'
+              }">
+                {{
                 trace.status === 'failed' ? 'Fallido' :
-                  trace.status === 'success' ? 'Finalizado con éxito' :
-                    trace.status === 'pending' ? 'Pendiente de ejecutar' :
-                      trace.status === 'in-progress' ? 'Ejecutando' :
-                        trace.status
-              }}
-            </mat-chip>
+                trace.status === 'success' ? 'Finalizado con éxito' :
+                trace.status === 'pending' ? 'Pendiente de ejecutar' :
+                trace.status
+                }}
+              </mat-chip>
+            </ng-template>
           </ng-container>
 
           <!-- Caso para "input" con modal -->
@@ -106,4 +114,4 @@
   <mat-paginator [length]="length" [pageSize]="itemsPerPage" [pageIndex]="page" [pageSizeOptions]="pageSizeOptions"
     (page)="onPageChange($event)">
   </mat-paginator>
-</div>
+</div>

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

@@ -5,8 +5,9 @@ import { FormControl } from '@angular/forms';
 import { map, startWith } from 'rxjs/operators';
 import { DatePipe } from '@angular/common';
 import { JoyrideService } from 'ngx-joyride';
-import {MatDialog} from "@angular/material/dialog";
-import {InputDialogComponent} from "./input-dialog/input-dialog.component";
+import { MatDialog } from "@angular/material/dialog";
+import { InputDialogComponent } from "./input-dialog/input-dialog.component";
+import { ProgressBarMode, MatProgressBarModule } from '@angular/material/progress-bar';
 
 @Component({
   selector: 'app-task-logs',
@@ -25,6 +26,9 @@ export class TaskLogsComponent implements OnInit {
   loading: boolean = true;
   pageSizeOptions: number[] = [10, 20, 30, 50];
   datePipe: DatePipe = new DatePipe('es-ES');
+  mode: ProgressBarMode = 'buffer';
+  progress = 65;
+  bufferValue = 0;
 
   columns = [
     {
@@ -84,7 +88,7 @@ export class TaskLogsComponent implements OnInit {
   constructor(private http: HttpClient,
     private joyrideService: JoyrideService,
     private dialog: MatDialog
-  ) {}
+  ) { }
 
   ngOnInit(): void {
     this.loadTraces();
@@ -215,12 +219,12 @@ export class TaskLogsComponent implements OnInit {
   iniciarTour(): void {
     this.joyrideService.startTour({
       steps: [
-      'titleStep',
-      'resetFiltersStep',
-      'clientSelectStep',
-      'commandSelectStep',
-      'tableStep',
-      'paginationStep'
+        'titleStep',
+        'resetFiltersStep',
+        'clientSelectStep',
+        'commandSelectStep',
+        'tableStep',
+        'paginationStep'
       ],
       showPrevButton: true,
       themeColor: '#3f51b5'