gns3-web-ui/src/app/components/acl-management/acl-management.component.html

<div class="content" *ngIf="isReady; else loading">
  <div class="default-header">
    <div class="row">
      <h1 class="col">Access Control List (ACL)</h1>
      <button class="col" mat-raised-button color="primary" (click)="deleteMultiple()" class="add-ace-button" [disabled]="selection.selected.length == 0">
        Delete selected ACEs
      </button>
      <button class="col" mat-raised-button color="primary" (click)="addACE()" class="add-ace-button">
        Add ACE
      </button>
    </div>
  </div>

  <form>
    <mat-form-field class="full-width">
      <input matInput placeholder="Search by path, user/group or role" [(ngModel)]="searchText"
             [ngModelOptions]="{ standalone: true }"/>
    </mat-form-field>
  </form>

  <div class="default-content">
    <table mat-table [dataSource]="dataSource | aceFilter: searchText:endpoints " class="mat-elevation-z8" matSort #acesSort="matSort">

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

      <ng-container matColumnDef="path">
        <th mat-header-cell *matHeaderCellDef mat-sort-header>Path</th>
        <td mat-cell *matCellDef="let element"> {{getNameByUuidFromEndpoint(element.path)}} </td>
      </ng-container>

      <ng-container matColumnDef="user/group">
        <th mat-header-cell *matHeaderCellDef mat-sort-header>User/Group</th>
        <td mat-cell *matCellDef="let element">
          <div *ngIf="element.ace_type === 'user' else groupId">{{getNameByUuidFromEndpoint(element.user_id)}}</div>
          <ng-template #groupId>{{getNameByUuidFromEndpoint(element.group_id)}}</ng-template>
        </td>
      </ng-container>

      <ng-container matColumnDef="role">
        <th mat-header-cell *matHeaderCellDef mat-sort-header>Role</th>
        <td mat-cell *matCellDef="let element"> {{getNameByUuidFromEndpoint(element.role_id)}} </td>
      </ng-container>

      <ng-container matColumnDef="propagate">
        <th mat-header-cell *matHeaderCellDef mat-sort-header>Propagate</th>
        <td mat-cell *matCellDef="let element"> {{element.propagate}} </td>
      </ng-container>

      <ng-container matColumnDef="allowed">
        <th mat-header-cell *matHeaderCellDef mat-sort-header>Allowed</th>
        <td mat-cell *matCellDef="let element"> {{element.allowed}} </td>
      </ng-container>

      <ng-container matColumnDef="created_at">
        <th mat-header-cell *matHeaderCellDef mat-sort-header>Created</th>
        <td mat-cell *matCellDef="let element"> {{element.created_at}} </td>
      </ng-container>

      <ng-container matColumnDef="updated_at">
        <th mat-header-cell *matHeaderCellDef mat-sort-header>Last update</th>
        <td mat-cell *matCellDef="let element"> {{element.updated_at}} </td>
      </ng-container>

      <ng-container matColumnDef="delete">
        <th mat-header-cell *matHeaderCellDef> </th>
        <td mat-cell *matCellDef="let element"><button mat-button (click)="onDelete(element)"><mat-icon>delete</mat-icon></button></td>
      </ng-container>

      <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
      <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>


    </table>
    <mat-paginator #acesPaginator="matPaginator"
                   [pageSizeOptions]="[5, 10, 20]"
                   showFirstLastButtons
                   aria-label="Select page">
    </mat-paginator>
  </div>
</div>
<ng-template #loading>
  <div>
    <mat-spinner class="loader"></mat-spinner>
  </div>
</ng-template>