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

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

  <cnsl-refresh-table
    [hideRefresh]="true"
    (refreshed)="refresh()"
    [dataSize]="dataSource.data.length"
    [loading]="_loading | async"
  >
    <div actions>
      <cnsl-filter-events (requestChanged)="filterChanged($event)"></cnsl-filter-events>
    </div>

    <table
      [dataSource]="dataSource"
      mat-table
      class="table views-table"
      aria-label="Views"
      matSort
      (matSortChange)="sortChange($event)"
    >
      <ng-container matColumnDef="editor">
        <th mat-header-cell *matHeaderCellDef>{{ 'IAM.EVENTS.EDITOR' | translate }}</th>
        <td mat-cell *matCellDef="let event">
          <ng-container *ngIf="event | toobject as event">
            <div class="editor-row" *ngIf="event.editor as editor">
              <!-- <cnsl-avatar
              *ngIf="editor && editor.displayName; else cog"
              class="avatar"
              [name]="editor.displayName"
              [avatarUrl]="editor.avatarUrl || ''"
              [forColor]="editor.preferredLoginName ?? editor.displayName"
              [size]="32"
            >
            </cnsl-avatar>
            <ng-template #cog>
              <cnsl-avatar [forColor]="editor?.preferredLoginName ?? 'franz'" [isMachine]="true">
                <i class="las la-robot"></i>
              </cnsl-avatar> </ng-template
            > -->
              <span class="name" *ngIf="editor.displayName">{{ editor.displayName }}</span>
              <span class="state" *ngIf="editor.service">{{ editor.service }}</span>
            </div>
          </ng-container>
        </td>
      </ng-container>

      <ng-container matColumnDef="aggregate">
        <th mat-header-cell *matHeaderCellDef>{{ 'IAM.EVENTS.AGGREGATE' | translate }}</th>
        <td mat-cell *matCellDef="let event">
          <ng-container *ngIf="event | toobject as event">
            <div class="aggregate-row">
              <span class="id">{{ event.aggregate.id }}</span
              ><span class="state" *ngIf="event.aggregate?.type?.localized?.localizedMessage">{{
                event.aggregate.type.localized.localizedMessage
              }}</span>
            </div>
          </ng-container>
        </td>
      </ng-container>

      <ng-container matColumnDef="resourceOwner">
        <th mat-header-cell *matHeaderCellDef>{{ 'IAM.EVENTS.RESOURCEOWNER' | translate }}</th>
        <td mat-cell *matCellDef="let event">
          <ng-container *ngIf="event | toobject as event">
            <span *ngIf="event.aggregate.resourceOwner">{{ event.aggregate.resourceOwner }}</span>
          </ng-container>
        </td>
      </ng-container>

      <ng-container matColumnDef="sequence">
        <th mat-header-cell *matHeaderCellDef>
          {{ 'IAM.EVENTS.SEQUENCE' | translate }}
        </th>
        <td mat-cell *matCellDef="let event">
          <ng-container *ngIf="event | toobject as event">
            {{ event.sequence }}
          </ng-container>
        </td>
      </ng-container>

      <ng-container matColumnDef="creationDate">
        <th mat-header-cell *matHeaderCellDef mat-sort-header [start]="'desc'" [disableClear]="true">
          {{ 'IAM.EVENTS.CREATIONDATE' | translate }}
        </th>
        <td mat-cell *matCellDef="let event">
          <ng-container *ngIf="event | toobject as event">
            <span>{{ event?.creationDate | timestampToDate | localizedDate: 'EEE dd. MMM, HH:mm:ss' }}</span>
          </ng-container>
        </td>
      </ng-container>

      <ng-container matColumnDef="type">
        <th mat-header-cell *matHeaderCellDef>{{ 'IAM.EVENTS.TYPE' | translate }}</th>
        <td mat-cell *matCellDef="let event" data-e2e="event-type-cell">
          <ng-container *ngIf="event | toobject as event">
            <span *ngIf="event.type?.localized?.localizedMessage">{{ event.type.localized.localizedMessage }}</span>
          </ng-container>
        </td>
      </ng-container>

      <ng-container matColumnDef="payload">
        <th mat-header-cell *matHeaderCellDef>{{ 'IAM.EVENTS.PAYLOAD' | translate }}</th>
        <td mat-cell *matCellDef="let event">
          <ng-container *ngIf="event | topayload as payload">
            <span>{{ payload | json }}</span>
            <div class="btn-wrapper">
              <button class="open-in-dialog-btn" mat-icon-button (click)="openDialog(event)">
                <mat-icon svgIcon="mdi_arrow_expand"></mat-icon>
              </button>
            </div>
          </ng-container>
        </td>
      </ng-container>

      <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
      <tr class="highlight" mat-row *matRowDef="let row; columns: displayedColumns"></tr>
    </table>
    <cnsl-paginator
      #paginator
      class="paginator"
      [hidePagination]="true"
      [showMoreButton]="true"
      [disableShowMore]="_done | async"
      (moreRequested)="more()"
      [length]="dataSource.data.length"
    >
    </cnsl-paginator>
  </cnsl-refresh-table>
</div>