[YUNIKORN-1923] update apps columns

json-db.json

@@ -512,6 +512,46 @@
       "hasReserved": false,
       "reservations": [],
       "maxRequestPriority": -2147483648
+    },
+    {
+      "applicationID": "application-sleep-0006",
+      "usedResource": {
+        "memory": 0,
+        "pods": 0,
+        "vcore": 0
+      },
+      "maxUsedResource": {
+        "memory": 150000000,
+        "pods": 3,
+        "vcore": 30
+      },
+      "pendingResource": {
+        "memory": 150000000,
+        "pods": 3,
+        "vcore": 30
+      },
+      "partition": "default",
+      "queueName": "root.default",
+      "submissionTime": 1683692669425545686,
+      "finishedTime": null,
+      "requests": [],
+      "allocations": [],
+      "applicationState": "Accepted",
+      "user": "nobody",
+      "groups": [
+        "nobody"
+      ],
+      "rejectedMessage": "",
+      "stateLog": [
+        {
+          "time": 1683692671425545686,
+          "applicationState": "Accepted"
+        }
+      ],
+      "placeholderData": [],
+      "hasReserved": false,
+      "reservations": [],
+      "maxRequestPriority": -2147483648
     }
   ],
   "appHistory": [

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

@@ -21,10 +21,7 @@
     <div class="dropdown-wrapper">
       <label class="dropdown-label">Partition: </label>
       <mat-form-field>
-        <mat-select
-          [(value)]="partitionSelected"
-          (selectionChange)="onPartitionSelectionChanged($event)"
-        >
+        <mat-select [(value)]="partitionSelected" (selectionChange)="onPartitionSelectionChanged($event)">
           <mat-option *ngFor="let part of partitionList" [value]="part.value">
             {{ part.name }}
           </mat-option>
@@ -44,20 +41,9 @@
   </div>
   <div class="right-side">
     <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"
-      >
+      <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>
@@ -84,7 +70,8 @@
         </ng-container>
 
         <ng-template #renderNext_1>
-          <ng-container *ngIf="columnDef.colId === 'usedResource'; else renderNext_1">
+          <ng-container
+            *ngIf="columnDef.colId === 'usedResource' || columnDef.colId === 'pendingResource'; else renderNext_1">
             <mat-cell *matCellDef="let element">
               <ng-container *ngIf="columnDef.colFormatter; else showAppRawData">
                 <ng-container *ngIf="columnDef.colFormatter(element[columnDef.colId]) as colValue">
@@ -138,25 +125,16 @@
 
       <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-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-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>
+    <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' }">
@@ -172,16 +150,16 @@ <h3>Allocations</h3>
             <mat-cell *matCellDef="let element">
               <ng-container *ngIf="columnDef.colFormatter; else showAllocRowData;">
                 <ng-container *ngIf="columnDef.colFormatter(element[columnDef.colId]) as colValue">
-                    <ul class="mat-res-ul">
-                      <ng-container *ngFor="let resource of formatResources(colValue); let i = index">
-                        <li class="mat-res-li" *ngIf="i<2">
-                          {{resource}}
-                        </li>
-                        <li class="mat-res-li" *ngIf="i>=2 && detailToggle">
-                          {{resource}}
-                        </li>
-                      </ng-container>
-                    </ul>
+                  <ul class="mat-res-ul">
+                    <ng-container *ngFor="let resource of formatResources(colValue); let i = index">
+                      <li class="mat-res-li" *ngIf="i<2">
+                        {{resource}}
+                      </li>
+                      <li class="mat-res-li" *ngIf="i>=2 && detailToggle">
+                        {{resource}}
+                      </li>
+                    </ng-container>
+                  </ul>
                 </ng-container>
               </ng-container>
               <ng-template #showAllocRowData>
@@ -205,18 +183,12 @@ <h3>Allocations</h3>
 
         <mat-row *matRowDef="let row; columns: allocColumnIds"></mat-row>
 
-        <mat-footer-row
-          *matFooterRowDef="['noRecord']"
-          [ngStyle]="{ display: isAllocDataSourceEmpty() ? '' : 'none' }"
-        ></mat-footer-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>
+      <mat-paginator #allocationMatPaginator [pageSizeOptions]="[10, 20, 50, 100]"
+        [ngStyle]="{ display: isAllocDataSourceEmpty() ? 'none' : '' }" showFirstLastButtons></mat-paginator>
     </div>
   </div>
 </div>

src/app/components/apps-view/apps-view.component.spec.ts

@@ -16,12 +16,13 @@
  * limitations under the License.
  */
 
-import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+import { DebugElement } from '@angular/core';
+import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
+import { By } from '@angular/platform-browser';
 import { NoopAnimationsModule } from '@angular/platform-browser/animations';
 import { RouterTestingModule } from '@angular/router/testing';
 import { HAMMER_LOADER } from '@angular/platform-browser';
 import { NgxSpinnerService } from 'ngx-spinner';
-import { configureTestSuite } from 'ng-bullet';
 import { FormsModule } from '@angular/forms';
 import { MatTableModule } from '@angular/material/table';
 import { MatPaginatorModule } from '@angular/material/paginator';
@@ -30,16 +31,19 @@ import { MatSortModule } from '@angular/material/sort';
 import { MatInputModule } from '@angular/material/input';
 import { MatTooltipModule } from '@angular/material/tooltip';
 import { MatSelectModule } from '@angular/material/select';
+import { of } from 'rxjs';
 
 import { AppsViewComponent } from './apps-view.component';
+import { AppInfo } from '@app/models/app-info.model';
+import { AllocationInfo } from '@app/models/alloc-info.model';
 import { SchedulerService } from '@app/services/scheduler/scheduler.service';
 import { MockSchedulerService, MockNgxSpinnerService } from '@app/testing/mocks';
 
 describe('AppsViewComponent', () => {
   let component: AppsViewComponent;
   let fixture: ComponentFixture<AppsViewComponent>;
 
-  configureTestSuite(() => {
+  beforeEach(waitForAsync(() => {
     TestBed.configureTestingModule({
       declarations: [AppsViewComponent],
       imports: [
@@ -59,8 +63,8 @@ describe('AppsViewComponent', () => {
         { provide: NgxSpinnerService, useValue: MockNgxSpinnerService },
         { provide: HAMMER_LOADER, useValue: () => new Promise(() => {}) },
       ],
-    });
-  });
+    }).compileComponents();
+  }));
 
   beforeEach(() => {
     fixture = TestBed.createComponent(AppsViewComponent);
@@ -71,4 +75,28 @@ describe('AppsViewComponent', () => {
   it('should create the component', () => {
     expect(component).toBeTruthy();
   });
+
+  it('should have usedResource and pendingResource column', () => {
+    let service: SchedulerService;
+    service = TestBed.inject(SchedulerService);
+    let appInfo = new AppInfo(
+        'app1',
+        "Memory: 500.0 KB, CPU: 10, pods: 1",
+        "Memory: 0.0 bytes, CPU: 0, pods: n/a",
+        '',
+        1,
+        2,
+        [],
+        2,
+        'RUNNING',
+        []
+    );
+    spyOn(service, 'fetchAppList').and.returnValue(of([appInfo]));
+    component.fetchAppListForPartitionAndQueue("default", "root");
+    component.toggle();
+    fixture.detectChanges();
+    const debugEl: DebugElement = fixture.debugElement;
+    expect(debugEl.query(By.css('mat-cell.mat-column-usedResource')).nativeElement.innerText).toContain('Memory: 500.0 KB\nCPU: 10\npods: 1');
+    expect(debugEl.query(By.css('mat-cell.mat-column-pendingResource')).nativeElement.innerText).toContain('Memory: 0.0 bytes\nCPU: 0\npods: n/a');
+  });
 });

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

@@ -79,7 +79,6 @@ export class AppsViewComponent implements OnInit {
 
     this.appColumnDef = [
       { colId: 'applicationId', colName: 'Application ID' },
-      { colId: 'queueName', colName: 'Queue Name' },
       { colId: 'applicationState', colName: 'Application State' },
       {
         colId: 'lastStateChangeTime',
@@ -91,7 +90,11 @@ export class AppsViewComponent implements OnInit {
         colName: 'Used Resource',
         colFormatter: CommonUtil.resourceColumnFormatter,
       },
-      { colId: 'partition', colName: 'Partition' },
+      {
+        colId: 'pendingResource',
+        colName: 'Pending Resource',
+        colFormatter: CommonUtil.resourceColumnFormatter,
+      },
       {
         colId: 'submissionTime',
         colName: 'Submission Time',

src/app/models/app-info.model.ts

@@ -26,9 +26,8 @@ export class AppInfo {
   constructor(
     public applicationId: string,
     public usedResource: string,
+    public pendingResource: string,
     public maxUsedResource: string,
-    public partition: string,
-    public queueName: string,
     public submissionTime: number,
     public finishedTime: null | number,
     public stateLog: Array<StateLog>,

src/app/services/scheduler/scheduler.service.ts

@@ -91,9 +91,8 @@ export class SchedulerService {
             const appInfo = new AppInfo(
               app['applicationID'],
               this.formatResource(app['usedResource'] as SchedulerResourceInfo),
+              this.formatResource(app['pendingResource'] as SchedulerResourceInfo),
               this.formatResource(app['maxUsedResource'] as SchedulerResourceInfo),
-              app['partition'],
-              app['queueName'],
               app['submissionTime'],
               app['lastStateChangeTime'],
               app['stateLog'],

src/app/testing/mocks.ts

@@ -17,6 +17,8 @@
  */
 
 import { of } from 'rxjs';
+import { AppInfo } from '@app/models/app-info.model';
+import { CommonUtil } from '@app/utils/common.util';
 
 export const noopFn = () => {};