zitadel/console/src/app/modules/machine-keys/machine-keys.component.html

<app-refresh-table [loading]="loading$ | async" (refreshed)="refreshPage()" [dataSize]="dataSource.data.length"
    [timestamp]="keyResult?.details?.viewTimestamp" [selection]="selection">
    <div actions>
        <a [disabled]="([('user.write:' + userId), 'user.write'] | hasRole | async) == false" color="primary"
            mat-raised-button (click)="openAddKey()">
            <mat-icon class="icon">add</mat-icon>{{ 'ACTIONS.NEW' | translate }}
        </a>
    </div>

    <div class="table-wrapper">
        <table class="table" mat-table [dataSource]="dataSource">
            <ng-container matColumnDef="select">
                <th mat-header-cell *matHeaderCellDef>
                    <mat-checkbox color="primary" (change)="$event ? masterToggle() : null"
                        [checked]="selection.hasValue() && isAllSelected()"
                        [indeterminate]="selection.hasValue() && !isAllSelected()">
                    </mat-checkbox>
                </th>
                <td mat-cell *matCellDef="let key">
                    <mat-checkbox color="primary" (click)="$event.stopPropagation()"
                        (change)="$event ? selection.toggle(key) : null" [checked]="selection.isSelected(key)">
                    </mat-checkbox>
                </td>
            </ng-container>

            <ng-container matColumnDef="id">
                <th mat-header-cell *matHeaderCellDef> {{ 'USER.MACHINE.ID' | translate }} </th>
                <td mat-cell *matCellDef="let key"> {{key?.id}} </td>
            </ng-container>

            <ng-container matColumnDef="type">
                <th mat-header-cell *matHeaderCellDef> {{ 'USER.MACHINE.TYPE' | translate }} </th>
                <td mat-cell *matCellDef="let key"> {{'USER.MACHINE.KEYTYPES.'+key?.type | translate}} </td>
            </ng-container>

            <ng-container matColumnDef="creationDate">
                <th mat-header-cell *matHeaderCellDef> {{ 'USER.MACHINE.CREATIONDATE' | translate }} </th>
                <td mat-cell *matCellDef="let key">
                    {{key.details?.creationDate | timestampToDate | localizedDate: 'EEE dd. MMM YYYY, HH:mm'}}
                </td>
            </ng-container>

            <ng-container matColumnDef="expirationDate">
                <th mat-header-cell *matHeaderCellDef> {{ 'USER.MACHINE.EXPIRATIONDATE' | translate }} </th>
                <td mat-cell *matCellDef="let key">
                    {{key.expirationDate | timestampToDate | localizedDate: 'EEE dd. MMM YYYY, HH:mm'}}
                </td>
            </ng-container>

            <ng-container matColumnDef="actions" stickyEnd>
                <th mat-header-cell *matHeaderCellDef></th>
                <td mat-cell *matCellDef="let key">
                    <button [disabled]="([('user.write:' + userId), 'user.write'] | hasRole | async) == false"
                        mat-icon-button color="warn" matTooltip="{{'ACTIONS.DELETE' | translate}}"
                        (click)="deleteKey(key)">
                        <i class="las la-trash"></i>
                    </button>
                </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" [timestamp]="keyResult?.details?.viewTimestamp" [length]="keyResult?.details?.totalResult || 0" [pageSize]="10"
            [pageSizeOptions]="[5, 10, 20]" (page)="changePage($event)"></cnsl-paginator>
    </div>
</app-refresh-table>