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

<div class="header-container">
  <button mat-icon-button color="primary" (click)="iniciarTour()">
    <mat-icon>help</mat-icon>
  </button>

  <div class="header-container-title">
    <h2 joyrideStep="tracesTitleStep" text="{{ 'tracesTitleStepText' | translate }}">{{ 'adminCommandsTitle' |
      translate }}</h2>
  </div>

  <div class="images-button-row">
    <button class="action-button" (click)="resetFilters(commandSearchInput, commandStatusInput, commandClientInput)"
      joyrideStep="resetFiltersStep" text="{{ 'resetFiltersStepText' | translate }}">
      {{ 'resetFilters' | translate }}
    </button>
  </div>
</div>

<div class="search-container" joyrideStep="filtersStep" text="{{ 'filtersStepText' | translate }}">
  <mat-form-field appearance="fill" class="search-select">
    <input type="text" matInput [formControl]="clientControl" [matAutocomplete]="clientAuto" #commandClientInput
      placeholder="{{ 'filterClientPlaceholder' | translate }}">
    <mat-autocomplete #clientAuto="matAutocomplete" [displayWith]="displayFnClient"
      (optionSelected)="onOptionClientSelected($event.option.value)">
      <mat-option *ngFor="let client of filteredClients | async" [value]="client">
        <div style="display: flex; flex-direction: column;">
          <span>{{ client.name }}</span>
          <span style="font-size: 0.8rem; color: gray;">
            {{ client.ip }} — {{ client.mac }}
          </span>
        </div>
      </mat-option>

    </mat-autocomplete>
    <button *ngIf="commandClientInput.value" mat-icon-button matSuffix aria-label="Clear input search"
      (click)="clearClientFilter($event, commandClientInput)">
      <mat-icon>close</mat-icon>
    </button>
    <mat-hint>Por favor, ingrese el nombre del cliente</mat-hint>
  </mat-form-field>

  <mat-form-field appearance="fill" class="search-select">
    <mat-label>{{ 'commandSelectStepText' | translate }}</mat-label>
    <mat-select (selectionChange)="onOptionCommandSelected($event.value)" #commandSearchInput>
      <mat-option *ngFor="let command of filteredCommands2" [value]="command">
        {{ translateCommand(command.name) }}
      </mat-option>
    </mat-select>
    <button *ngIf="commandSearchInput.value" mat-icon-button matSuffix aria-label="Clear input search"
      (click)="clearCommandFilter($event, commandSearchInput)">
      <mat-icon>close</mat-icon>
    </button>
  </mat-form-field>


  <mat-form-field appearance="fill" class="search-boolean">
    <mat-label i18n="@@searchLabel">Estado</mat-label>
    <mat-select (selectionChange)="onOptionStatusSelected($event.value)" placeholder="Seleccionar opción"
      #commandStatusInput>
      <mat-option [value]="'failed'">Fallido</mat-option>
      <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>
    <button *ngIf="commandStatusInput.value" mat-icon-button matSuffix aria-label="Clear input search"
      (click)="clearStatusFilter($event, commandStatusInput)">
      <mat-icon>close</mat-icon>
    </button>
  </mat-form-field>
</div>

<app-loading [isLoading]="loading"></app-loading>

<div *ngIf="!loading">
  <table mat-table [dataSource]="traces" class="mat-elevation-z8" joyrideStep="tracesTableStep"
    text="{{ 'tracesTableStepText' | translate }}">
    <ng-container *ngFor="let column of columns" [matColumnDef]="column.columnDef">
      <th mat-header-cell *matHeaderCellDef> {{ column.header }} </th>
      <td mat-cell *matCellDef="let trace">

        <ng-container [ngSwitch]="column.columnDef">
          <ng-container *ngSwitchCase="'status'">
            <ng-container *ngIf="trace.status === 'in-progress' && trace.progress; else statusChip">
              <div class="progress-container">
                <mat-progress-bar class="example-margin" [mode]="mode" [value]="trace.progress"
                  [bufferValue]="bufferValue">
                </mat-progress-bar>
                <span>{{trace.progress}}%</span>
              </div>
            </ng-container>
            <ng-template #statusChip>
              <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' ? 'Error' :
                  trace.status === 'in-progress' ? 'En ejecución' :
                  trace.status === 'success' ? 'Completado' :
                  trace.status === 'pending' ? 'Pendiente' :
                  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>

          <ng-container *ngSwitchCase="'command'">
            <div style="display: flex; flex-direction: column;">
              <span>{{ translateCommand(trace.command) }}</span>
              <span style="font-size: 0.75rem; color: gray;">{{ trace.jobId }}</span>
            </div>
          </ng-container>

          <ng-container *ngSwitchCase="'client'">
            <div style="display: flex; flex-direction: column;">
              <span>{{ trace.client?.name }}</span>
              <span style="font-size: 0.75rem; color: gray;">{{ trace.client?.ip }}</span>
            </div>
          </ng-container>


          <ng-container *ngSwitchCase="'executedAt'">
            <div style="display: flex; flex-direction: column;">
              <span style="font-size: 0.8rem;"> {{ trace.executedAt |date: 'dd/MM/yyyy hh:mm:ss'}}</span>
            </div>
          </ng-container>

          <ng-container *ngSwitchCase="'finishedAt'">
            <div style="display: flex; flex-direction: column;">
              <span style="font-size: 0.8rem;"> {{ trace.finishedAt |date: 'dd/MM/yyyy hh:mm:ss'}}</span>
            </div>
          </ng-container>
          <ng-container *ngSwitchDefault>
            {{ column.cell(trace) }}
          </ng-container>

        </ng-container>
      </td>
    </ng-container>

    <ng-container matColumnDef="actions">
      <th mat-header-cell *matHeaderCellDef style="text-align: center;">{{ 'informationLabel' | translate }}</th>
      <td mat-cell *matCellDef="let trace" style="text-align: center;">
        <button mat-icon-button color="primary" [disabled]="!trace.input || trace.input.length === 0"
          (click)="openInputModal(trace.input)">
          <mat-icon>
            <span class="material-symbols-outlined">
              mode_comment
            </span>
          </mat-icon>
        </button>
        <button mat-icon-button color="primary" [disabled]="!trace.output" (click)="openOutputModal(trace.output)">
          <mat-icon>
            <span class="material-symbols-outlined">
              info
            </span>
          </mat-icon>
        </button>
      </td>
    </ng-container>

    <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
    <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
  </table>
</div>

<div class="paginator-container" joyrideStep="paginationStep" text="{{ 'paginationStepText' | translate }}">
  <mat-paginator [length]="length" [pageSize]="itemsPerPage" [pageIndex]="page" [pageSizeOptions]="pageSizeOptions"
    (page)="onPageChange($event)">
  </mat-paginator>
</div>