src/app/components/apps-view/apps-view.component.html

<!--
 * Licensed to the Apache Software Foundation (ASF) under one
 * or more contributor license agreements.  See the NOTICE file
 * distributed with this work for additional information
 * regarding copyright ownership.  The ASF licenses this file
 * to you under the Apache License, Version 2.0 (the
 * "License"); you may not use this file except in compliance
 * with the License.  You may obtain a copy of the License at
 *
 *     http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS,
 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 * See the License for the specific language governing permissions and
 * limitations under the License.
 -->

<div class="top-section">
  <div class="dropdown-wrapper">
    <label class="dropdown-label">Partition: </label>
    <mat-form-field>
      <mat-select
        [(value)]="partitionSelected"
        (selectionChange)="onPartitionSelectionChanged($event)"
      >
        <mat-option *ngFor="let part of partitionList" [value]="part.value">
          {{ part.name }}
        </mat-option>
      </mat-select>
    </mat-form-field>
  </div>
  <div class="dropdown-wrapper">
    <label class="dropdown-label">Queue: </label>
    <mat-form-field>
      <mat-select [(value)]="leafQueueSelected" (selectionChange)="onQueueSelectionChanged($event)">
        <mat-option *ngFor="let queue of leafQueueList" [value]="queue.value">
          {{ queue.name }}
        </mat-option>
      </mat-select>
    </mat-form-field>
  </div>
  <mat-form-field class="search-wrapper white-mat-form-field">
    <input
      matInput
      type="text"
      [(ngModel)]="searchText"
      placeholder="Search By Application ID"
      #searchInput
    />
    <button
      class="clear-btn"
      *ngIf="searchText"
      (click)="onClearSearch()"
      matTooltip="Clear Search"
      matTooltipShowDelay="500"
    >
      <i class="far fa-times-circle"></i>
    </button>
    <i *ngIf="!searchText" class="fas fa-search search-icon"></i>
  </mat-form-field>
</div>
<div class="apps-view">
  <!-- <mat-form-field class="search-wrapper white-mat-form-field">
    <input
      matInput
      type="text"
      [(ngModel)]="searchText"
      placeholder="Search By Application ID"
      #searchInput
    />
    <button
      class="clear-btn"
      *ngIf="searchText"
      (click)="onClearSearch()"
      matTooltip="Clear Search"
      matTooltipShowDelay="500"
    >
      <i class="far fa-times-circle"></i>
    </button>
    <i *ngIf="!searchText" class="fas fa-search search-icon"></i>
  </mat-form-field> -->
  <div class="mat-elevation-z8">
    <mat-table [dataSource]="appDataSource" matSort>
      <ng-container [matColumnDef]="columnDef.colId" *ngFor="let columnDef of appColumnDef">
        <mat-header-cell *matHeaderCellDef mat-sort-header>{{ columnDef.colName }}</mat-header-cell>

        <ng-container *ngIf="columnDef.colId === 'submissionTime'; else renderNext_1">
          <mat-cell *matCellDef="let element">{{ element['formattedSubmissionTime'] }}</mat-cell>
        </ng-container>

        <ng-template #renderNext_1>
          <ng-container *ngIf="columnDef.colId === 'usedResource'; else renderNext_2">
            <mat-cell *matCellDef="let element">
              <ng-container *ngIf="columnDef.colFormatter; else showAppRawData">
                <span [innerHTML]="columnDef.colFormatter(element[columnDef.colId])"></span>
              </ng-container>
              <ng-template #showAppRawData>
                <span>{{ element[columnDef.colId] }}</span>
              </ng-template>
            </mat-cell>
          </ng-container>
        </ng-template>

        <ng-template #renderNext_2>
          <mat-cell *matCellDef="let element">{{ element[columnDef.colId] || 'n/a' }}</mat-cell>
        </ng-template>
      </ng-container>

      <ng-container matColumnDef="indicatorIcon">
        <mat-header-cell *matHeaderCellDef class="indicator-icon"></mat-header-cell>
        <mat-cell *matCellDef="let element" class="indicator-icon">
          <span>
            <i class="fas fa-plus-circle" *ngIf="!element.isSelected"></i>
            <i class="fas fa-minus-circle" *ngIf="element.isSelected"></i>
          </span>
        </mat-cell>
      </ng-container>

      <ng-container matColumnDef="noRecord">
        <mat-footer-cell *matFooterCellDef>
          <div class="no-record">No records found</div>
        </mat-footer-cell>
      </ng-container>

      <mat-header-row *matHeaderRowDef="appColumnIds"></mat-header-row>

      <mat-row
        *matRowDef="let row; columns: appColumnIds"
        [class.selected-row]="selectedRow === row"
        (click)="toggleRowSelection(row)"
      ></mat-row>

      <mat-footer-row
        *matFooterRowDef="['noRecord']"
        [ngStyle]="{ display: isAppDataSourceEmpty() ? '' : 'none' }"
      ></mat-footer-row>
    </mat-table>

    <mat-paginator
      #appsViewMatPaginator
      [pageSizeOptions]="[10, 20, 50, 100]"
      [ngStyle]="{ display: isAppDataSourceEmpty() ? 'none' : '' }"
      (page)="onPaginatorChanged()"
      showFirstLastButtons
    ></mat-paginator>
  </div>

  <div class="app-allocations" [ngStyle]="{ display: selectedRow ? '' : 'none' }">
    <h3>Allocations</h3>
    <mat-divider></mat-divider>

    <div class="mat-elevation-z8">
      <mat-table [dataSource]="allocDataSource">
        <ng-container [matColumnDef]="columnDef.colId" *ngFor="let columnDef of allocColumnDef">
          <mat-header-cell *matHeaderCellDef>{{ columnDef.colName }}</mat-header-cell>

          <ng-container *ngIf="columnDef.colId === 'resource'; else renderNext_3">
            <mat-cell *matCellDef="let element">
              <ng-container *ngIf="columnDef.colFormatter; else showAllocRowData">
                <span [innerHTML]="columnDef.colFormatter(element[columnDef.colId])"></span>
              </ng-container>
              <ng-template #showAllocRowData>
                <span>{{ element[columnDef.colId] }}</span>
              </ng-template>
            </mat-cell>
          </ng-container>

          <ng-template #renderNext_3>
            <mat-cell *matCellDef="let element">{{ element[columnDef.colId] || 'n/a' }}</mat-cell>
          </ng-template>
        </ng-container>

        <ng-container matColumnDef="noRecord">
          <mat-footer-cell *matFooterCellDef>
            <div class="no-record">No records found</div>
          </mat-footer-cell>
        </ng-container>

        <mat-header-row *matHeaderRowDef="allocColumnIds"></mat-header-row>

        <mat-row *matRowDef="let row; columns: allocColumnIds"></mat-row>

        <mat-footer-row
          *matFooterRowDef="['noRecord']"
          [ngStyle]="{ display: isAllocDataSourceEmpty() ? '' : 'none' }"
        ></mat-footer-row>
      </mat-table>

      <mat-paginator
        #allocationMatPaginator
        [pageSizeOptions]="[10, 20, 50, 100]"
        [ngStyle]="{ display: isAllocDataSourceEmpty() ? 'none' : '' }"
        showFirstLastButtons
      ></mat-paginator>
    </div>
  </div>
</div>