Commit 52e6bc8a authored by Lance Wilson's avatar Lance Wilson
Browse files

Merge branch 'new_css_dev' into 'master'

New css dev

See merge request !23
parents 8fb5e678 9b40ac54
Pipeline #8898 passed with stage
in 3 minutes and 4 seconds
......@@ -18,7 +18,12 @@
background-color: #fafafa;
}
.row-header {
text-align: left;
border-bottom-color: #a2bae1;
}
.mat-header-cell {
color: #11356e;
font-size: 18px;
}
\ No newline at end of file
}
......@@ -26,10 +26,10 @@
</mat-list-item>
</div>
<div *ngIf="h.type == 'table'">
<div class="table-header"><span>{{ h.title }}</span></div>
<div class="table-header"><span>{{ h.title.toUpperCase() }}</span></div>
<table mat-table [dataSource]="h.data.rows" style="width: 100%">
<ng-container *ngFor="let c of h.data.cols" matColumnDef="{{c.key}}">
<th mat-header-cell *matHeaderCellDef style="text-align: left">{{ c.header }} </th>
<th mat-header-cell *matHeaderCellDef style="text-align: left; border-bottom-color: #a2bae1;">{{ c.header }} </th>
<td mat-cell *matCellDef="let row;" style="text-align: left"> {{row[c.key]}}</td>
</ng-container>
<tr mat-header-row *matHeaderRowDef="calculateCols(h.data.cols); sticky: true" ></tr>
......
.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 ;
}
......
......@@ -10,3 +10,41 @@ html, body {
flex-direction: column; */
height: 100%;
}
.mat-expansion-panel {
border-radius: 0px !important;
background-color: #fafafa;
}
.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,64 @@
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() }}</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="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'">
<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,20 @@ 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) {
// make appName a plural for display purposes
// if character ends with "s" already a plural
appName = this.appSubject.value.name;
if (appName.substr(appName.length - 1) !== 's') {
appName = appName + 's';
}
}
return appName.toUpperCase();
}
}
.mat-expansion-panel {
border-radius: 0px !important;
background-color: #fafafa;
}
.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-list-item button {
width: 200px;
font-family: Raleway;
}
\ No newline at end of file
<div fxLayout="column" fxLayoutAlign="space-between stretch" style="width: 100%">
<!-- <div fxFlex style="background: blue">app config</div> -->
<!--<iframe *ngIf="appconfigurl != null" fxGrow=10 fxFlex [src]="appconfigsafeurl" style="border: none"></iframe>
<iframe *ngIf="appconfigurl != null" [src]="batchcmdsafeurl" style="height: 1px; min-height: 0px; border: none" #batchbuilderiframe></iframe>-->
<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>LAUNCH {{ getAppName() }}</span>
</mat-panel-title>
</mat-expansion-panel-header>
<!-- <div fxFlex style="background: blue">app config</div> -->
<!--<iframe *ngIf="appconfigurl != null" fxGrow=10 fxFlex [src]="appconfigsafeurl" style="border: none"></iframe>
<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 *ngIf="appSubject | async as app" style="width: 100%">
<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>
</div>
</div>
</mat-expansion-panel>
</mat-accordion>
</div>
<div>&nbsp;<div>
......@@ -207,4 +207,14 @@ export class LaunchDialogComponent implements OnInit {
}
this.setReady(false);
}
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