ghostfolio/apps/client/src/app/components/admin-jobs/admin-jobs.html

<div class="container">
  <div class="row">
    <div class="col">
      <form class="align-items-center d-flex" [formGroup]="filterForm">
        <mat-form-field appearance="outline" class="w-100 without-hint">
          <mat-select formControlName="status">
            <mat-option />
            <mat-option
              *ngFor="let statusFilterOption of statusFilterOptions"
              [value]="statusFilterOption"
              >{{ statusFilterOption }}</mat-option
            >
          </mat-select>
        </mat-form-field>
      </form>
      <table class="gf-table w-100" mat-table [dataSource]="dataSource">
        <ng-container matColumnDef="index">
          <th *matHeaderCellDef class="px-1 py-2 text-right" mat-header-cell>
            #
          </th>
          <td *matCellDef="let element" class="px-1 py-2 text-right" mat-cell>
            {{ element.id }}
          </td>
        </ng-container>

        <ng-container matColumnDef="type">
          <th *matHeaderCellDef class="px-1 py-2" mat-header-cell>
            <ng-container i18n>Type</ng-container>
          </th>
          <td *matCellDef="let element" class="px-1 py-2" mat-cell>
            <ng-container *ngIf="element.name === 'GATHER_ASSET_PROFILE'" i18n>
              Asset Profile
            </ng-container>
            <ng-container
              *ngIf="element.name === 'GATHER_HISTORICAL_MARKET_DATA'"
              i18n
            >
              Historical Market Data
            </ng-container>
          </td>
        </ng-container>

        <ng-container matColumnDef="symbol">
          <th *matHeaderCellDef class="px-1 py-2" mat-header-cell>
            <ng-container i18n>Symbol</ng-container>
          </th>
          <td *matCellDef="let element" class="px-1 py-2" mat-cell>
            {{ element.data?.symbol }}
          </td>
        </ng-container>

        <ng-container matColumnDef="dataSource">
          <th *matHeaderCellDef class="px-1 py-2" mat-header-cell>
            <ng-container i18n>Data Source</ng-container>
          </th>
          <td *matCellDef="let element" class="px-1 py-2" mat-cell>
            {{ element.data?.dataSource }}
          </td>
        </ng-container>

        <ng-container matColumnDef="attempts">
          <th *matHeaderCellDef class="px-1 py-2 text-right" mat-header-cell>
            <ng-container i18n>Attempts</ng-container>
          </th>
          <td *matCellDef="let element" class="px-1 py-2 text-right" mat-cell>
            {{ element.attemptsMade }}
          </td>
        </ng-container>

        <ng-container matColumnDef="created">
          <th *matHeaderCellDef class="px-1 py-2" mat-header-cell>
            <ng-container i18n>Created</ng-container>
          </th>
          <td *matCellDef="let element" class="px-1 py-2" mat-cell>
            {{ element.timestamp | date: defaultDateTimeFormat }}
          </td>
        </ng-container>

        <ng-container matColumnDef="finished">
          <th *matHeaderCellDef class="px-1 py-2" mat-header-cell>
            <ng-container i18n>Finished</ng-container>
          </th>
          <td *matCellDef="let element" class="px-1 py-2" mat-cell>
            {{ element.finishedOn | date: defaultDateTimeFormat }}
          </td>
        </ng-container>

        <ng-container matColumnDef="status">
          <th *matHeaderCellDef class="px-1 py-2" mat-header-cell>
            <ng-container i18n>Status</ng-container>
          </th>
          <td *matCellDef="let element" class="px-1 py-2" mat-cell>
            <ion-icon *ngIf="element.state === 'active'" name="play-outline" />
            <ion-icon
              *ngIf="element.state === 'completed'"
              class="text-success"
              name="checkmark-circle-outline"
            />
            <ion-icon
              *ngIf="element.state === 'delayed'"
              name="time-outline"
              [ngClass]="{ 'text-danger': element.stacktrace?.length > 0 }"
            />
            <ion-icon
              *ngIf="element.state === 'failed'"
              class="text-danger"
              name="alert-circle-outline"
            />
            <ion-icon *ngIf="element.state === 'paused'" name="pause-outline" />
            <ion-icon *ngIf="element.state === 'waiting'" name="cafe-outline" />
          </td>
        </ng-container>

        <ng-container matColumnDef="actions" stickyEnd>
          <th *matHeaderCellDef class="px-1 py-2" mat-header-cell>
            <button
              class="mx-1 no-min-width px-2"
              mat-button
              [matMenuTriggerFor]="jobsActionsMenu"
              (click)="$event.stopPropagation()"
            >
              <ion-icon name="ellipsis-vertical" />
            </button>
            <mat-menu #jobsActionsMenu="matMenu" xPosition="before">
              <button mat-menu-item (click)="onDeleteJobs()">
                <ng-container i18n>Delete Jobs</ng-container>
              </button>
            </mat-menu>
          </th>
          <td *matCellDef="let element" class="px-1 py-2" mat-cell>
            <button
              class="mx-1 no-min-width px-2"
              mat-button
              [matMenuTriggerFor]="jobActionsMenu"
              (click)="$event.stopPropagation()"
            >
              <ion-icon name="ellipsis-horizontal" />
            </button>
            <mat-menu #jobActionsMenu="matMenu" xPosition="before">
              <button mat-menu-item (click)="onViewData(element.data)">
                <ng-container i18n>View Data</ng-container>
              </button>
              <button
                mat-menu-item
                [disabled]="element.stacktrace?.length <= 0"
                (click)="onViewStacktrace(element.stacktrace)"
              >
                <ng-container i18n>View Stacktrace</ng-container>
              </button>
              <button mat-menu-item (click)="onDeleteJob(element.id)">
                <ng-container i18n>Delete Job</ng-container>
              </button>
            </mat-menu>
          </td>
        </ng-container>

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