Commit bc32d38e authored by Melvin Luong's avatar Melvin Luong
Browse files

Updated job list table format.

parent be0a63ba
......@@ -10,3 +10,40 @@ html, body {
flex-direction: column; */
height: 100%;
}
.mat-expansion-panel {
border-radius: 0px !important;
}
.mat-expansion-panel:not([class*='mat-elevation-z']) {
box-shadow: none;
}
.mat-expansion-panel-header {
height: 100% !important;
padding: 10px 10px;
border: 1px solid #a2bae1;
background-color: #f0f0f0 !important;
}
.mat-expansion-panel-header.mat-expanded:hover {
background-color: #a2bae1 !important;
}
.mat-expansion-panel-header span {
/* margin-left: 10px; */
color: #1a50a5;
font-family: Raleway;
font-size: 22px;
}
.mat-expansion-indicator {
position: absolute;
}
.mat-list-item div{
font-family: Raleway;
color: #11356e;
font-size: 18px;
}
......@@ -2,32 +2,39 @@
Click login and select a provider or select one you've already logged in to.
</div>-->
<div *ngIf="(identitySubject | async) !== null" style="width: 100%" >
<mat-list>
<mat-list-item>
<div fxLayout="row" fxLayoutAlign="space-between" style="width: 100%">
<div fxFlex="10%"> State </div>
<div fxFlex="10%"> JobID</div>
<div fxFlex="10%"> Host </div>
<div fxFlex="20%" fxLayout="column"> Resources </div>
<div fxFlex></div>
<div fxFlex="15%" fxLayout="row"></div>
</div>
<mat-divider></mat-divider>
</mat-list-item>
<div *ngFor="let job of ((identitySubject | async).joblist | async) ; let lastItem = last">
<div *ngIf="(appSubject | async).name == job.appname && job.state != 'Finished'">
<app-job [jobdata]=job></app-job>
<mat-divider></mat-divider>
</div>
</div>
<mat-divider></mat-divider>
<div *ngFor="let job of ((identitySubject | async).joblist | async) ; let lastItem = last">
<div *ngIf="job.app !== null && (appSubject | async).name == job.app.name && job.state == 'Finished'">
<app-job [jobdata]=job></app-job>
<mat-divider></mat-divider>
</div>
</div>
</mat-list>
<button mat-button (click)="refreshJobs()" style="width: 100%; text-align: right">Refresh Job list</button>
<mat-accordion style="width: 100%" [displayMode]="flat" [togglePosition]="'after'">
<mat-expansion-panel style="width: 100%" [expanded]="true">
<mat-expansion-panel-header>
<mat-panel-title>
<span>RUNNING {{ getAppName() }}S</span>
</mat-panel-title>
</mat-expansion-panel-header>
<mat-list>
<mat-list-item>
<div fxLayout="row" fxLayoutAlign="space-between" style="width: 100%">
<div fxFlex="10%"> State </div>
<div fxFlex="10%"> JobID</div>
<div fxFlex="10%"> Host </div>
<div fxFlex="20%" fxLayout="column"> Resources </div>
<div fxFlex></div>
<div fxFlex="15%" fxLayout="row"></div>
</div>
</mat-list-item>
<div *ngFor="let job of ((identitySubject | async).joblist | async) ; let lastItem = last">
<div *ngIf="(appSubject | async).name == job.appname && job.state != 'Finished'">
<app-job [jobdata]=job></app-job>
<mat-divider></mat-divider>
</div>
</div>
<mat-divider style="background-color: #a2bae1"></mat-divider>
<div *ngFor="let job of ((identitySubject | async).joblist | async) ; let lastItem = last">
<div *ngIf="job.app !== null && (appSubject | async).name == job.app.name && job.state == 'Finished'">
<app-job [jobdata]=job></app-job>
<mat-divider></mat-divider>
</div>
</div>
</mat-list>
<!--<button mat-button (click)="refreshJobs()" style="width: 100%; text-align: right">Refresh Job list</button>-->
</mat-expansion-panel>
</mat-accordion>
</div>
......@@ -47,4 +47,14 @@ export class JoblistComponent implements OnInit {
this.tesService.getJobs(this.identitySubject.value);
}
public getAppName(): string {
// default name if this function fails to get the app name
let appName = "job";
if (this.appSubject.value.name !== undefined) {
appName = this.appSubject.value.name;
}
return appName.toUpperCase();
}
}
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment