This is an automated email from the ASF dual-hosted git repository.
wilfreds pushed a commit to branch master
in repository https://gitbox.apache.org/repos/asf/yunikorn-web.git
The following commit(s) were added to refs/heads/master by this push:
new 32ad02b [YUNIKORN-1923] update apps columns (#131)
32ad02b is described below
commit 32ad02b0fbd7623c538a61384739b3d03aa208c3
Author: PoAn Yang <[email protected]>
AuthorDate: Tue Oct 17 11:09:27 2023 +1100
[YUNIKORN-1923] update apps columns (#131)
* remove partition and queue columns
* add pending resource column
Signed-off-by: PoAn Yang <[email protected]>
Closes: #131
Signed-off-by: Wilfred Spiegelenburg <[email protected]>
---
json-db.json | 40 +++++++++++
.../components/apps-view/apps-view.component.html | 82 +++++++---------------
.../apps-view/apps-view.component.spec.ts | 38 ++++++++--
.../components/apps-view/apps-view.component.ts | 7 +-
src/app/models/app-info.model.ts | 3 +-
src/app/services/scheduler/scheduler.service.ts | 3 +-
src/app/testing/mocks.ts | 2 +
7 files changed, 109 insertions(+), 66 deletions(-)
diff --git a/json-db.json b/json-db.json
index 8f3ed37..a9463fd 100644
--- a/json-db.json
+++ b/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": [
diff --git a/src/app/components/apps-view/apps-view.component.html
b/src/app/components/apps-view/apps-view.component.html
index 6635cd9..3b66dfb 100644
--- a/src/app/components/apps-view/apps-view.component.html
+++ b/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 @@
<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 @@
<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>
diff --git a/src/app/components/apps-view/apps-view.component.spec.ts
b/src/app/components/apps-view/apps-view.component.spec.ts
index 582b6c2..3bc1d22 100644
--- a/src/app/components/apps-view/apps-view.component.spec.ts
+++ b/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,8 +31,11 @@ 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';
@@ -39,7 +43,7 @@ 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');
+ });
});
diff --git a/src/app/components/apps-view/apps-view.component.ts
b/src/app/components/apps-view/apps-view.component.ts
index fa94c35..78d7d14 100644
--- a/src/app/components/apps-view/apps-view.component.ts
+++ b/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',
diff --git a/src/app/models/app-info.model.ts b/src/app/models/app-info.model.ts
index 9f47e9b..3e3c1a0 100644
--- a/src/app/models/app-info.model.ts
+++ b/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>,
diff --git a/src/app/services/scheduler/scheduler.service.ts
b/src/app/services/scheduler/scheduler.service.ts
index 22174e0..251b5e2 100644
--- a/src/app/services/scheduler/scheduler.service.ts
+++ b/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'],
diff --git a/src/app/testing/mocks.ts b/src/app/testing/mocks.ts
index 880a1be..45efbd4 100644
--- a/src/app/testing/mocks.ts
+++ b/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 = () => {};
---------------------------------------------------------------------
To unsubscribe, e-mail: [email protected]
For additional commands, e-mail: [email protected]
