refs #1645. Cancel deploy image button

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

@@ -91,4 +91,28 @@ table {
 .chip-in-progress {
   background-color: #f5a623 !important;
   color: white;
-}
+}
+
+.status-progress-flex {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+button.cancel-button {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 5px;
+}
+
+.cancel-button {
+  color: red;
+  background-color: transparent;
+  border: none;
+  padding: 0;
+}
+
+.cancel-button mat-icon {
+  color: red;
+}

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

@@ -49,6 +49,7 @@
       <mat-option [value]="'pending'">Pendiente de ejecutar</mat-option>
       <mat-option [value]="'in-progress'">Ejecutando</mat-option>
       <mat-option [value]="'success'">Completado con éxito</mat-option>
+      <mat-option [value]="'cancelled'">Cancelado</mat-option>
     </mat-select>
   </mat-form-field>
 </div>
@@ -63,7 +64,6 @@
       <td mat-cell *matCellDef="let trace">
 
         <ng-container [ngSwitch]="column.columnDef">
-          <!-- Caso para "status" -->
           <ng-container *ngSwitchCase="'status'">
             <ng-container *ngIf="trace.status === 'in-progress' && trace.progress; else statusChip">
               <div class="progress-container">
@@ -73,31 +73,40 @@
               </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 === 'in-progress' ? 'En ejecución' :
-                trace.status === 'success' ? 'Finalizado con éxito' :
-                trace.status === 'pending' ? 'Pendiente de ejecutar' :
-                trace.status
-                }}
-              </mat-chip>
+              <div class="status-progress-flex">
+                <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',
+                    'chip-cancelled': trace.status === 'cancelled'
+                  }">
+                  {{
+                    trace.status === 'failed' ? 'Fallido' :
+                      trace.status === 'in-progress' ? 'En ejecución' :
+                        trace.status === 'success' ? 'Finalizado con éxito' :
+                          trace.status === 'pending' ? 'Pendiente de ejecutar' :
+                            trace.status === 'cancelled' ? 'Cancelado' :
+                            trace.status
+                  }}
+                </mat-chip>
+                <button *ngIf="trace.status === 'in-progress' && trace.command === 'deploy-image'"
+                        mat-icon-button
+                        (click)="cancelTrace(trace)"
+                        class="cancel-button"
+                        matTooltip="Cancelar transmisión de imagen">
+                  <mat-icon>cancel</mat-icon>
+                </button>
+              </div>
             </ng-template>
           </ng-container>
 
-          <!-- Caso para "input" con modal -->
           <ng-container *ngSwitchCase="'input'">
             <button mat-icon-button (click)="openInputModal(trace.input)">
               <mat-icon>info</mat-icon>
             </button>
           </ng-container>
 
-          <!-- Para cualquier otro caso (default) -->
           <ng-container *ngSwitchDefault>
             {{ column.cell(trace) }}
           </ng-container>

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

@@ -8,6 +8,8 @@ import { JoyrideService } from 'ngx-joyride';
 import { MatDialog } from "@angular/material/dialog";
 import { InputDialogComponent } from "./input-dialog/input-dialog.component";
 import { ProgressBarMode, MatProgressBarModule } from '@angular/material/progress-bar';
+import {DeleteModalComponent} from "../../../../shared/delete_modal/delete-modal/delete-modal.component";
+import {ToastrService} from "ngx-toastr";
 
 @Component({
   selector: 'app-task-logs',
@@ -88,7 +90,8 @@ export class TaskLogsComponent implements OnInit {
   constructor(private http: HttpClient,
               private joyrideService: JoyrideService,
               private dialog: MatDialog,
-              private cdr: ChangeDetectorRef
+              private cdr: ChangeDetectorRef,
+              private toastService: ToastrService
   ) { }
 
   ngOnInit(): void {
@@ -173,6 +176,26 @@ 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}`;