Commit 9b40ac54 authored by Melvin Luong's avatar Melvin Luong
Browse files

Updated job, joblist and launch-dialog formatting.

parent 2eb172fd
Pipeline #8468 passed with stage
in 3 minutes and 33 seconds
.mat-button,
.mat-list-item {
font-family: Raleway;
font-size: 14px;
}
\ No newline at end of file
......@@ -5,8 +5,13 @@
<div fxFlex="10%"> {{ jobdata.state }}</div>
<div fxFlex="10%"> {{ jobdata.jobid }}</div>
<div *ngIf="jobdata.batch_host != 'localhost'" fxFlex="10%"> {{ jobdata.batch_host }}</div>
<div fxFlex="20%" fxLayout="column" fxLayoutAlign="start start">
<div>
{{ cpu_resources }}</div>
<div>{{ mem_resources }}
</div>
</div>
<div fxFlex="20%" fxLayout="column">
<div> {{ resources }} </div>
<div> {{ timeremaining }} </div>
</div>
<div fxFlex></div>
......
......@@ -17,6 +17,8 @@ export class JobComponent implements OnInit, OnDestroy {
public available: Boolean;
public nocancel: Boolean;
public resources: string;
public cpu_resources: string;
public mem_resources: string;
public timeremaining: string;
private updatesub: Subscription;
constructor(private tesService: TesService, private strudelAppsService: StrudelappsService) {
......@@ -61,16 +63,18 @@ export class JobComponent implements OnInit, OnDestroy {
this.nocancel = true;
}
this.resources="";
this.cpu_resources = "";
this.mem_resources = "";
if (this.jobdata.cpus != undefined) {
this.resources = this.resources+"CPUs: "+this.jobdata.cpus;
this.cpu_resources = this.cpu_resources+"CPUs: "+this.jobdata.cpus;
}
if (this.jobdata.mem != undefined) {
this.resources = this.resources+" Mem: "+this.jobdata.mem;
this.mem_resources = this.mem_resources+"Mem: "+this.jobdata.mem;
}
if (this.jobdata.endtime != undefined) {
let end = this.parseDate(this.jobdata.endtime);
let remaining = end.valueOf() - Date.now().valueOf();
this.timeremaining = "Time remaining: "+this.secondsToHms(remaining/1000);
this.timeremaining = this.secondsToHms(remaining/1000);
}
}
......@@ -79,8 +83,8 @@ export class JobComponent implements OnInit, OnDestroy {
var m: number = Math.floor(d % 3600 / 60);
var s: number = Math.floor(d % 3600 % 60);
var hDisplay = h > 0 ? h + (h == 1 ? " hour, " : " hours, ") : "";
var mDisplay = m > 0 ? m + (m == 1 ? " minute, " : " minutes ") : "";
var hDisplay = h > 0 ? h + (h == 1 ? " hour " : " hours ") : "";
var mDisplay = m > 0 ? m + (m == 1 ? " minute " : " minutes ") : "";
return hDisplay + mDisplay ;
}
......
......@@ -16,16 +16,41 @@
<div fxFlex="10%"> JobID</div>
<div fxFlex="10%"> Host </div>
<div fxFlex="20%" fxLayout="column"> Resources </div>
<div fxFlex="20%" fxLayout="column"> Time </div>
<div fxFlex></div>
<div fxFlex="15%" fxLayout="row"></div>
</div>
</mat-list-item>
<mat-divider style="background-color: #a2bae1"></mat-divider>
<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-list>
<!--<button mat-button (click)="refreshJobs()" style="width: 100%; text-align: right">Refresh Job list</button>-->
</mat-expansion-panel>
</mat-accordion>
<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>COMPLETED {{ getAppName() }}</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>
<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'">
......
......@@ -23,4 +23,9 @@
color: #1a50a5;
font-family: Raleway;
font-size: 22px;
}
.mat-list-item button {
width: 200px;
font-family: Raleway;
}
\ No newline at end of file
......@@ -13,16 +13,18 @@
<iframe *ngIf="appconfigurl != null" [src]="batchcmdsafeurl" style="height: 1px; min-height: 0px; border: none" #batchbuilderiframe></iframe>-->
<div *ngIf="appSubject | async as app" style="width: 100%">
<iframe *ngIf="app.startscript !== null" [src]="batchcmdsafeurl" style="border: none; border-style: none; border-width: 0px; width: 100%; overflow: auto" [style.height]="height+'px'" #batchbuilderiframe></iframe>
<!--<div *ngIf="appconfigsafeurl !== null && configtoggle">
<iframe [src]="appconfigsafeurl" style="border: none; border-style: none; border-width: 0px; width: 100%" [style.height]="appconfigheight+'px'" #batchbuilderiframe></iframe>
</div>-->
<div fxLayout="row" fxLayoutAlign="start center" >
<iframe *ngIf="app.startscript !== null" [src]="batchcmdsafeurl" style="border: none; border-style: none; border-width: 0px; overflow: auto" [style.height]="height+'px'" #batchbuilderiframe></iframe>
<!--<div *ngIf="appconfigsafeurl !== null && configtoggle">
<iframe [src]="appconfigsafeurl" style="border: none; border-style: none; border-width: 0px; width: 100%" [style.height]="appconfigheight+'px'" #batchbuilderiframe></iframe>
</div>-->
<div *ngIf="appSubject | async as app">
<div fxLayout="row" fxLayoutAlign="space-around">
<button *ngIf="appconfigsafeurl !== null" mat-flat-button (click)="configdialog()" color="primary">Configure</button>
<button *ngIf="app.startscript !== null" mat-flat-button (click)="launch()" color="primary" #launchbtn [disabled]="!readyToLaunch">Launch</button>
<button *ngFor="let action of app.appactions" mat-flat-button (click)="runaction(action)" color="primary" >{{ action.name }}</button>
<div *ngIf="appSubject | async as app" style="padding-left: 60px">
<mat-list>
<mat-list-item *ngIf="appconfigsafeurl !== null"><button mat-flat-button (click)="configdialog()" color="primary">Configure</button></mat-list-item>
<mat-list-item *ngIf="app.startscript !== null"><button mat-flat-button (click)="launch()" color="primary" #launchbtn [disabled]="!readyToLaunch">Launch</button></mat-list-item>
<mat-list-item *ngFor="let action of app.appactions"><button mat-flat-button (click)="runaction(action)" color="primary" >{{ action.name }}</button></mat-list-item>
</mat-list>
</div>
</div>
</div>
......
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