update for job display to include extra info

src/app/app.module.ts

@@ -67,6 +67,7 @@ import { ModaldialogComponent } from './modaldialog/modaldialog.component'
     Sv2SideNavComponent,
     ShareconnectComponent,
     LaunchDialogComponent,
+    ModaldialogComponent
   ],
   imports: [
   BrowserModule,
@@ -95,7 +96,7 @@ import { ModaldialogComponent } from './modaldialog/modaldialog.component'
 
 
   ],
-  entryComponents: [ LogoutdialogComponent, LaunchDialogComponent ],
+    entryComponents: [ LogoutdialogComponent, LaunchDialogComponent, ModaldialogComponent],
   providers: [ StrudelappsService, ComputesitesService, TesService, SubmitAppService, MatDialog, AuthorisationService],
   bootstrap: [AppComponent]
 })

src/app/job.ts

@@ -7,7 +7,9 @@ export class Job {
   public jobid: string;
   public desc: string;
   public state: string;
-  public time: number;
+  public endtime: string;
+  public mem: string;
+  public cpus: string;
   public batch_host: string;
   public identity: Identity;
   public app: Strudelapp;

src/app/job/job.component.html

 <mat-card>
   <mat-card-title>{{ jobdata.name }}</mat-card-title>
   <div *ngIf="(jobdata.connectionState === undefined || jobdata.connectionState == 0)">
-  <table>
+  <div gdAreas="name name name name|
+                status resources space buttons"
+       gdColumns="20% 60% auto 20%">
+       <div gdArea="name">
+           {{ jobdata.desc }}
+       </div>
+       <div gdArea="status">
+           {{ jobdata.state }}
+       </div>
+       <div gdArea="buttons">
+           <div fxLayout="row">
+           <div fxFlex *ngIf="!nocancel">
+              <button mat-button (click)="onCancel()" >
+                Cancel
+              </button>
+           </div>
+           <div fxFlex *ngIf="available">
+              <button mat-button (click)="onConnect()" [disabled]="busy">
+                Connect
+              </button>
+           </div>
+           </div>
+       </div>
+       <div gdArea="resources">
+           <div fxLayout="column">
+               <div>
+                    {{ resources }}
+               </div>
+               <div>
+                   {{ timeremaining }}
+               </div>
+           </div>
+       </div>
+
+  </div>
+<!--  <table>
     <tr>
-      <td width="1000%">
+      <td width="100%">
         {{ jobdata.desc }}
       </td>
       <td width="20%">
@@ -24,7 +59,7 @@
         </div>
       </td>
   </tr>
-</table>
+</table>  -->
 </div>
 <div *ngIf="jobdata.connectionState == 1">
   Getting app parameters

src/app/job/job.component.ts

@@ -14,6 +14,8 @@ export class JobComponent implements OnInit {
   public available: Boolean;
   private busy: Boolean;
   public nocancel: Boolean;
+  public resources: string;
+  public timeremaining: string;
   constructor(private tesService: TesService, private strudelAppsService: StrudelappsService) {
 
 
@@ -35,7 +37,29 @@ export class JobComponent implements OnInit {
     } else {
       this.nocancel = false;
     }
+    this.resources="";
+      if (this.jobdata.cpus != undefined) {
+          this.resources = this.resources+"CPUs: "+this.jobdata.cpus;
+      }
+      if (this.jobdata.mem != undefined) {
+          this.resources = this.resources+" Mem: "+this.jobdata.mem;
+      }
+      if (this.jobdata.endtime != undefined) {
+          let end = Date.parse(this.jobdata.endtime);
+          let remaining = end.valueOf() - Date.now().valueOf();
+          this.timeremaining = "Time remaining: "+this.secondsToHms(remaining/1000);
+      }
+
+  }
+
+  secondsToHms(d: number) {
+    var h: number = Math.floor(d / 3600);
+    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 ") : "";
+    return hDisplay + mDisplay ; 
   }
 
   onCancel() {