Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[YUNIKORN-2829] Improve table layout for Applications #214

Draft
wants to merge 3 commits into
base: master
Choose a base branch
from
+0 −0
Draft

[YUNIKORN-2829] Improve table layout for Applications #214

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
3dbc0fc
[YUNIKORN-2829] Improve table layout for Applications
blueBlue0102 Oct 21, 2024
c9a161a
Merge branch 'master' into YUNIKORN-2829
blueBlue0102 Nov 15, 2024
19e36ef
revert changes
blueBlue0102 Nov 15, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
26 changes: 15 additions & 11 deletions src/app/components/apps-view/apps-view.component.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -62,15 +62,19 @@
<mat-header-cell *matHeaderCellDef mat-sort-header [style.flex]="columnDef.colWidth || 1">{{ columnDef.colName
}}</mat-header-cell>

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

<ng-container *ngIf="columnDef.colId === 'lastStateChangeTime'; else renderNext_1">
<mat-cell *matCellDef="let element" [style.flex]="columnDef.colWidth || 1">{{
element['formattedlastStateChangeTime'] }}</mat-cell>
</ng-container>
<ng-container *ngIf="columnDef.colId === 'submissionTime'; else renderNext_1">
<mat-cell *matCellDef="let element" [style.flex]="columnDef.colWidth || 1">
<div>{{ element['formattedSubmissionDate'] }}</div>
<div>{{ element['formattedSubmissionTime'] }}</div>
</mat-cell>
</ng-container>

<ng-container *ngIf="columnDef.colId === 'lastStateChangeTime'; else renderNext_1">
<mat-cell *matCellDef="let element" [style.flex]="columnDef.colWidth || 1">
<div>{{ element['formattedLastStateChangeDate'] }}</div>
<div>{{ element['formattedLastStateChangeTime'] }}</div>
</mat-cell>
</ng-container>

<ng-template #renderNext_1>
<ng-container
Expand Down Expand Up @@ -98,15 +102,15 @@

<ng-template #renderNext_1>
<ng-container *ngIf="columnDef.colFormatter; else renderNext_2">
<mat-cell *matCellDef="let element">
<mat-cell *matCellDef="let element" [style.flex]="columnDef.colWidth || 1">
<span [innerText]="columnDef.colFormatter(element[columnDef.colId])"></span>
</mat-cell>
</ng-container>
</ng-template>
</ng-template>

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

Expand Down
10 changes: 4 additions & 6 deletions src/app/components/apps-view/apps-view.component.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -101,30 +101,28 @@ export class AppsViewComponent implements OnInit {
this.appSort.sort({ id: 'submissionTime', start: 'desc', disableClear: false });

this.appColumnDef = [
{ colId: 'applicationId', colName: 'Application ID', colWidth: 1 },
{ colId: 'applicationState', colName: 'Application State', colWidth: 1 },
{ colId: 'applicationId', colName: 'Application ID', colWidth: 2 },
{ colId: 'applicationState', colName: 'Application State', colWidth: 0.5 },
{
colId: 'lastStateChangeTime',
colName: 'Last State Change Time',
colFormatter: CommonUtil.timeColumnFormatter,
colWidth: 1,
},
{
colId: 'usedResource',
colName: 'Used Resource',
colFormatter: CommonUtil.resourceColumnFormatter,
colWidth: 2,
colWidth: 1.5,
},
{
colId: 'pendingResource',
colName: 'Pending Resource',
colFormatter: CommonUtil.resourceColumnFormatter,
colWidth: 2,
colWidth: 1.5,
},
{
colId: 'submissionTime',
colName: 'Submission Time',
colFormatter: CommonUtil.timeColumnFormatter,
colWidth: 1,
},
];
Expand Down
21 changes: 17 additions & 4 deletions src/app/models/app-info.model.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -36,17 +36,30 @@ export class AppInfo {
public allocations: AllocationInfo[] | null
) {}

get formattedSubmissionDate() {
const millisecs = Math.round(this.submissionTime / (1000 * 1000));
return moment(millisecs).format('YYYY/MM/DD');
}

get formattedSubmissionTime() {
const millisecs = Math.round(this.submissionTime / (1000 * 1000));
return moment(millisecs).format('YYYY/MM/DD HH:mm:ss');
return moment(millisecs).format('HH:mm:ss');
}

get formattedlastStateChangeTime() {

get formattedLastStateChangeDate() {
if(this.lastStateChangeTime==null){
return 'n/a'
}
const millisecs = Math.round(this.lastStateChangeTime! / (1000 * 1000));
return moment(millisecs).format('YYYY/MM/DD');
}

get formattedLastStateChangeTime() {
if(this.lastStateChangeTime==null){
return 'n/a'
}
const millisecs = Math.round(this.lastStateChangeTime! / (1000 * 1000));
return moment(millisecs).format('YYYY/MM/DD HH:mm:ss');
return moment(millisecs).format('HH:mm:ss');
}

get formattedFinishedTime() {
Expand Down