zitadel/console/src/app/pages/failed-events/failed-events.component.html

<div class="max-width-container">
  <h1 class="failed-events-title">{{ 'IAM.FAILEDEVENTS.TITLE' | translate }}</h1>
  <p class="failed-events-desc cnsl-secondary-text">{{ 'IAM.FAILEDEVENTS.DESCRIPTION' | translate }}</p>

  <div class="table-wrapper">
    <cnsl-refresh-table (refreshed)="loadEvents()" [dataSize]="eventDataSource.data.length" [loading]="loading$ | async">
      <table [dataSource]="eventDataSource" mat-table class="table" aria-label="Elements">
        <ng-container matColumnDef="viewName">
          <th mat-header-cell *matHeaderCellDef>{{ 'IAM.FAILEDEVENTS.VIEWNAME' | translate }}</th>
          <td mat-cell *matCellDef="let event">{{ event.viewName }}</td>
        </ng-container>

        <ng-container matColumnDef="database">
          <th mat-header-cell *matHeaderCellDef>{{ 'IAM.FAILEDEVENTS.DATABASE' | translate }}</th>
          <td mat-cell *matCellDef="let event">{{ event.database }}</td>
        </ng-container>

        <ng-container matColumnDef="failedSequence">
          <th mat-header-cell *matHeaderCellDef>{{ 'IAM.FAILEDEVENTS.FAILEDSEQUENCE' | translate }}</th>
          <td mat-cell *matCellDef="let event">
            <span>{{ event?.failedSequence }}</span>
          </td>
        </ng-container>

        <ng-container matColumnDef="failureCount">
          <th mat-header-cell *matHeaderCellDef>{{ 'IAM.FAILEDEVENTS.FAILURECOUNT' | translate }}</th>
          <td mat-cell *matCellDef="let event">
            <span>{{ event?.failureCount }}</span>
          </td>
        </ng-container>

        <ng-container matColumnDef="lastFailed">
          <th mat-header-cell *matHeaderCellDef>{{ 'IAM.FAILEDEVENTS.LASTFAILED' | translate }}</th>
          <td mat-cell *matCellDef="let event">
            <span>{{ event?.lastFailed | timestampToDate | localizedDate: 'EEE dd. MMM, HH:mm' }}</span>
          </td>
        </ng-container>

        <ng-container matColumnDef="errorMessage">
          <th mat-header-cell *matHeaderCellDef>{{ 'IAM.FAILEDEVENTS.ERRORMESSAGE' | translate }}</th>
          <td mat-cell *matCellDef="let event">
            <span class="failed-event-error-message">{{ event?.errorMessage }}</span>
          </td>
        </ng-container>

        <ng-container matColumnDef="actions" stickyEnd>
          <th mat-header-cell *matHeaderCellDef></th>
          <td class="back" mat-cell *matCellDef="let event">
            <cnsl-table-actions>
              <button
                actions
                color="warn"
                mat-icon-button
                matTooltip="{{ 'IAM.FAILEDEVENTS.DELETE' | translate }}"
                (click)="cancelEvent(event.viewName, event.database, event.failedSequence)"
              >
                <i class="las la-minus-circle"></i>
              </button>
            </cnsl-table-actions>
          </td>
        </ng-container>

        <tr mat-header-row *matHeaderRowDef="eventDisplayedColumns"></tr>
        <tr class="highlight" mat-row *matRowDef="let row; columns: eventDisplayedColumns"></tr>
      </table>
      <cnsl-paginator #paginator class="paginator" [hidePagination]="true" [length]="eventDataSource.data.length || 0">
      </cnsl-paginator>
    </cnsl-refresh-table>
  </div>
</div>