Updated job, joblist and launch-dialog formatting.

src/app/job/job.component.css

+.mat-button,
+.mat-list-item {
+  font-family: Raleway;
+  font-size: 14px;
+}
\ No newline at end of file

src/app/job/job.component.html

@@ -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>

src/app/job/job.component.ts

@@ -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 ; 
   }
 

src/app/joblist/joblist.component.html

@@ -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'">

src/app/launch-dialog/launch-dialog.component.css

@@ -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

src/app/launch-dialog/launch-dialog.component.html

@@ -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>