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 10a46eb [YUNIKORN-2828] Restore lower table view (#236)
10a46eb is described below
commit 10a46ebca03c91f0155099ee30a0f766e2bb5523
Author: Barry Wu <[email protected]>
AuthorDate: Thu Sep 18 12:08:27 2025 +1000
[YUNIKORN-2828] Restore lower table view (#236)
The allocations on the application page are listed in a table below the
applications again to align withthe nodes page.
Closes: #236
Signed-off-by: Wilfred Spiegelenburg <[email protected]>
---
.../components/apps-view/apps-view.component.html | 169 ++++++++-------------
.../components/apps-view/apps-view.component.scss | 95 +-----------
.../components/apps-view/apps-view.component.ts | 8 -
3 files changed, 65 insertions(+), 207 deletions(-)
diff --git a/src/app/components/apps-view/apps-view.component.html
b/src/app/components/apps-view/apps-view.component.html
index b6eaede..76d1136 100644
--- a/src/app/components/apps-view/apps-view.component.html
+++ b/src/app/components/apps-view/apps-view.component.html
@@ -176,119 +176,78 @@
></mat-paginator>
</div>
- <mat-drawer-container class="flex-primary" [hasBackdrop]="false">
- <mat-drawer #matDrawer mode="over" position="end">
- <mat-drawer-content>
- <div class="header">
- <span
- >{{ selectedRow?.applicationId }} ({{
- selectedRow?.allocations?.length
- }}
- allocations)</span
- >
- <span
- class="far fa-clipboard copy-btn"
- (click)="copyLinkToClipboard()"
- matTooltip="Click to copy the URL to this view"
- matTooltipShowDelay="500"
- ></span>
- <span class="far fa-solid fa-xmark close-btn"
(click)="closeDrawer()"></span>
- </div>
- <div class="content">
- <mat-table [dataSource]="allocDataSource" matSort
#allocSort="matSort">
- <ng-container [matColumnDef]="columnDef.colId" *ngFor="let
columnDef of allocColumnDef">
- <mat-header-cell
- *matHeaderCellDef
- mat-sort-header
- [style.flex]="columnDef?.colWidth || 1"
- >{{ columnDef.colName }}</mat-header-cell
- >
+ <div class="app-allocations" [ngStyle]="{ display: selectedRow ? '' : 'none'
}">
+ <div>
+ <span>{{ selectedRow?.applicationId }} ({{
selectedRow?.allocations?.length }} allocations)</span>
+ <span class="far fa-clipboard copy-btn" (click)="copyLinkToClipboard()"
matTooltip="Click to copy the URL to this view"
matTooltipShowDelay="500"></span>
+ </div>
- <ng-container *ngIf="columnDef.colId === 'priority'; else
renderNext_3">
- <mat-cell
- class="small"
- *matCellDef="let element"
- [style.flex]="columnDef?.colWidth || 1"
- [style.min-height]="allocationsToggle ? '96px' : 'unset'"
- [title]="element[columnDef.colId]"
- >{{ element['priority'] }}
- </mat-cell>
- </ng-container>
+ <mat-divider></mat-divider>
+
+ <div class="mat-elevation-z8">
+ <mat-table [dataSource]="allocDataSource" matSort #allocSort="matSort">
+ <ng-container [matColumnDef]="columnDef.colId" *ngFor="let columnDef
of allocColumnDef">
+ <mat-header-cell *matHeaderCellDef mat-sort-header
[style.flex]="columnDef?.colWidth || 1">{{ columnDef.colName
}}</mat-header-cell>
- <ng-container *ngIf="columnDef.colId === 'resource'; else
renderNext_3">
- <mat-cell
- *matCellDef="let element"
- class="allocations-data"
- [style.flex]="columnDef?.colWidth || 1"
- matTooltip="
- {{ element[columnDef.colId] }}"
- matTooltipShowDelay="500"
- >
- <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 < 1">
- {{ resource }}
- </li>
- <li class="mat-res-li" *ngIf="i >= 1 &&
allocationsToggle">
- {{ resource }}
- </li>
- </ng-container>
- </ul>
+ <ng-container *ngIf="columnDef.colId === 'priority'; else
renderNext_3" >
+ <mat-cell class="small" *matCellDef="let element"
+ [style.flex]="columnDef?.colWidth || 1"
+ [style.min-height]="allocationsToggle ? '96px' : 'unset'"
+ [title]="element[columnDef.colId]"
+ >{{ element['priority'] }} </mat-cell>
+ </ng-container>
+
+ <ng-container *ngIf="columnDef.colId === 'resource'; else
renderNext_3">
+ <mat-cell *matCellDef="let element" class="allocations-data"
[style.flex]="columnDef?.colWidth || 1" matTooltip="
+ {{element[columnDef.colId]}}" matTooltipShowDelay="500" >
+ <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<1">
+ {{ resource }}
+ </li>
+ <li class="mat-res-li" *ngIf="i>=1 && allocationsToggle">
+ {{ resource }}
+ </li>
</ng-container>
- </ng-container>
- <ng-template #showAllocRowData>
- <span>{{ element[columnDef.colId] }}</span>
- </ng-template>
- </mat-cell>
+ </ul>
+ </ng-container>
</ng-container>
-
- <ng-template #renderNext_3>
- <mat-cell
- *matCellDef="let element"
- [class]="allocationsToggle ? '' : 'ellipsis'"
- [style.flex]="columnDef?.colWidth || 1"
- [style.min-height]="allocationsToggle ? '96px' : 'unset'"
- matTooltip="{{ element[columnDef.colId] }}"
- matTooltipShowDelay="500"
- >{{ element[columnDef.colId] || 'n/a' }}</mat-cell
- >
+ <ng-template #showAllocRowData>
+ <span>{{ element[columnDef.colId] }}</span>
</ng-template>
- </ng-container>
+ </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>
+ <ng-template #renderNext_3>
+ <mat-cell *matCellDef="let element"
+ [style.flex]="columnDef?.colWidth || 1"
+ [style.min-height]="allocationsToggle ? '96px' : 'unset'"
+ matTooltip="{{element[columnDef.colId]}}"
matTooltipShowDelay="500"
+ >{{ 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-header-row *matHeaderRowDef="allocColumnIds"></mat-header-row>
- <mat-row
- *matRowDef="let row; columns: allocColumnIds; let i = index"
- (click)="allocationsDetailToggle()"
- [ngClass]="{ 'even-row': i % 2 === 0, row: true }"
- ></mat-row>
+ <mat-row *matRowDef="let row; columns: allocColumnIds"
(click)="allocationsDetailToggle()"
+ ></mat-row>
- <mat-footer-row
- *matFooterRowDef="['noRecord']"
- [ngStyle]="{ display: isAllocDataSourceEmpty() ? '' : 'none' }"
- ></mat-footer-row>
- </mat-table>
+ <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>
- </mat-drawer-content>
- </mat-drawer>
- </mat-drawer-container>
+ <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.scss
b/src/app/components/apps-view/apps-view.component.scss
index e832b99..f9b2981 100644
--- a/src/app/components/apps-view/apps-view.component.scss
+++ b/src/app/components/apps-view/apps-view.component.scss
@@ -202,97 +202,4 @@
.mat-column-pendingResource {
max-width: 180px;
}
-}
-
-.mat-drawer-container {
- min-width: 430px;
- width: 55%;
- height: calc(100vh - 60px);
- background: transparent;
- pointer-events: none;
- position: absolute;
- right: 0;
- bottom: 0;
-
- .mat-drawer {
- pointer-events: auto;
- width: 100%;
-
- .content {
- padding: 0 10px;
- }
- }
-
- .close-btn {
- float: right;
- font-size: 1.2em;
- cursor: pointer;
- padding-right: 5px;
-
- &:hover {
- color: #f44336;
- }
- }
-
- .copy-btn {
- font-size: 1em;
- cursor: pointer;
- padding-left: 5px;
- }
-
- .header {
- margin: 20px;
- font-weight: 100;
- font-size: 1em;
- }
-
- .content {
- border-top: 1px solid #e1e1e1;
- }
-
- .item-wrapper {
- .left-item {
- text-align: right;
- }
-
- .left-item,
- .right-item {
- width: 50%;
- padding: 6px;
- padding-right: 0;
- color: #666;
- }
-
- .right-item {
- font-weight: 600;
- }
- }
-
- .app-link {
- text-decoration: none;
- color: #666;
-
- &:hover {
- text-decoration: underline;
- }
- }
-
- .row {
- font-size: 0.9em;
- }
-
- .even-row {
- background: #eee;
- }
-
- .ellipsis {
- white-space: nowrap;
- overflow: hidden;
- text-overflow: ellipsis;
- display: inline-block;
- }
-
- .row {
- min-height: unset;
- }
-}
+}
\ No newline at end of file
diff --git a/src/app/components/apps-view/apps-view.component.ts
b/src/app/components/apps-view/apps-view.component.ts
index bf744c0..13f6c1e 100644
--- a/src/app/components/apps-view/apps-view.component.ts
+++ b/src/app/components/apps-view/apps-view.component.ts
@@ -34,7 +34,6 @@ import { CommonUtil } from '@app/utils/common.util';
import { PartitionInfo } from '@app/models/partition-info.model';
import { DropdownItem } from '@app/models/dropdown-item.model';
import { QueueInfo } from '@app/models/queue-info.model';
-import { MatDrawer } from '@angular/material/sidenav';
@Component({
selector: 'app-applications-view',
@@ -49,7 +48,6 @@ export class AppsViewComponent implements OnInit {
@ViewChild('allocSort', { static: true }) allocSort!: MatSort;
@ViewChild('searchInput', { static: true }) searchInput!: ElementRef;
@ViewChild('queueSelect', { static: false }) queueSelect!: MatSelect;
- @ViewChild('matDrawer', { static: false }) matDrawer!: MatDrawer;
appDataSource = new MatTableDataSource<AppInfo>([]);
appColumnDef: ColumnDef[] = [];
@@ -278,7 +276,6 @@ export class AppsViewComponent implements OnInit {
} else {
this.selectedRow = row;
row.isSelected = true;
- this.matDrawer.open();
if (row.allocations) {
this.allocDataSource.data = row.allocations;
}
@@ -401,11 +398,6 @@ export class AppsViewComponent implements OnInit {
this.allocationsToggle = !this.allocationsToggle;
}
- closeDrawer() {
- this.matDrawer.close();
- this.removeRowSelection();
- }
-
copyLinkToClipboard() {
const url = window.location.href.split('?')[0];
const copyString =
`${url}?partition=${this.partitionSelected}&queue=${this.leafQueueSelected}&applicationId=${this?.selectedRow?.applicationId}`;
---------------------------------------------------------------------
To unsubscribe, e-mail: [email protected]
For additional commands, e-mail: [email protected]
