gns3-web-ui/src/app/components/image-manager/image-manager.component.html

<div class="content">
  <div class="default-header">
    <div class="row">
      <h1 class="col">Image Manager</h1>
      <button mat-raised-button color="primary" (click)="installAllImages()" class="install-all-button">
        <mat-icon>done_all</mat-icon> Install all images
      </button>
      <button mat-raised-button color="primary" (click)="pruneImages()" class="prune-button">
        <mat-icon>delete</mat-icon> Prune Images
      </button>
      <button mat-raised-button color="primary" (click)="addImageDialog()" class="add-button">
        <mat-icon>add</mat-icon> Add Image
      </button>
    </div>
  </div>

  <div class="default-content">
    <app-controller-discovery></app-controller-discovery>

    <div class="mat-elevation-z8">
      <mat-table #table [dataSource]="dataSource">
        <ng-container matColumnDef="select">
          <mat-header-cell *matHeaderCellDef>
            <mat-checkbox (change)="$event ? selectAllImages() : null" [checked]="selection.hasValue() && isAllSelected()"
              [indeterminate]="selection.hasValue() && !isAllSelected()">
            </mat-checkbox>
          </mat-header-cell>
          <mat-cell *matCellDef="let row">
            <mat-checkbox (click)="$event.stopPropagation()" (change)="$event ? selection.toggle(row) : null"
              [checked]="selection.isSelected(row)">
            </mat-checkbox>
          </mat-cell>

        </ng-container>

        <ng-container matColumnDef="filename">
          <mat-header-cell *matHeaderCellDef> File Name </mat-header-cell>
          <mat-cell *matCellDef="let row">
            <mat-list-item role="listitem">{{ row.filename }}</mat-list-item>
          </mat-cell>
        </ng-container>

        <ng-container matColumnDef="image_type">
          <mat-header-cell *matHeaderCellDef> Image Type </mat-header-cell>
          <mat-cell *matCellDef="let row"> {{ row.image_type }} </mat-cell>
        </ng-container>

        <ng-container matColumnDef="image_size">
          <mat-header-cell *matHeaderCellDef> Image Size </mat-header-cell>
          <mat-cell *matCellDef="let row"> {{ (row.image_size/1000000).toFixed()}} MB </mat-cell>
        </ng-container>

        <ng-container matColumnDef="delete" >
          <mat-header-cell *matHeaderCellDef>
            <button mat-button *ngIf="(selection.hasValue() && isAllSelected())  || selection.selected.length > 1" (click)="deleteAllFiles()" aria-label="Example icon button with a delete icon">
              <mat-icon>delete</mat-icon>
            </button>
          </mat-header-cell>
          <mat-cell *matCellDef="let row" >
            <button mat-button  *ngIf="selection.isSelected(row)" (click)="deleteFile(row.path)" aria-label="Example icon button with a delete icon">
              <mat-icon>delete</mat-icon>
            </button>
          </mat-cell>
        </ng-container>
        <mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
        <mat-row *matRowDef="let row; columns: displayedColumns"></mat-row>
      </mat-table>
    </div>
  </div>
</div>