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>
            <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>
            <span class="align-items-center d-flex">
              <ion-icon
                class="mr-1"
                name="arrow-down-circle-outline"
              ></ion-icon>
              <ng-container *ngIf="element.name === 'GATHER_ASSET_PROFILE'">
                <span i18n>Asset Profile</span>
              </ng-container>
              <ng-container
                *ngIf="element.name === 'GATHER_HISTORICAL_MARKET_DATA'"
              >
                <span i18n>Historical Market Data</span>
              </ng-container>
            </span>
          </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>
            <ion-icon
              *ngIf="element.state === 'completed'"
              class="text-success"
              name="checkmark-circle-outline"
            ></ion-icon>
            <ion-icon
              *ngIf="element.state === 'delayed'"
              name="time-outline"
              [ngClass]="{ 'text-danger': element.stacktrace?.length > 0 }"
            ></ion-icon>
            <ion-icon
              *ngIf="element.state === 'failed'"
              class="text-danger"
              name="alert-circle-outline"
            ></ion-icon>
            <ion-icon
              *ngIf="element.state === 'paused'"
              name="pause-outline"
            ></ion-icon>
            <ion-icon
              *ngIf="element.state === 'waiting'"
              name="cafe-outline"
            ></ion-icon>
          </td>
        </ng-container>

        <ng-container matColumnDef="actions">
          <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"></ion-icon>
            </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"></ion-icon>
            </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>