feat(console): events (#5092)

Shows the list of events on instance level
2026-11-09 07:35:13 +00:00 · 2023-02-01 08:54:00 +00:00
parent 5ca7e83f0a
commit e9d5d1dcaf
35 changed files with 1790 additions and 13 deletions
@@ -0,0 +1,129 @@
+<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 mat-sort-header [start]="'desc'" [disableClear]="true">
+          {{ '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>{{ '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' }}</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">
+          <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>