more source code

src/app/app-routing.module.ts

+import { NgModule } from '@angular/core';
+import { RouterModule, Routes } from '@angular/router';
+import { LauncherComponent } from './launcher/launcher.component';
+import { TokenextractorComponent } from './tokenextractor/tokenextractor.component';
+
+
+const routes: Routes = [
+  { path: '', redirectTo: 'launch', pathMatch: 'full'},
+  { path: 'launch', component: LauncherComponent},
+  { path: 'sshauthz_callback', component: TokenextractorComponent}
+
+];
+
+@NgModule({
+  imports: [
+    RouterModule.forRoot(routes)
+  ],
+  exports: [ RouterModule ],
+})
+export class AppRoutingModule { }

src/app/computesite.ts

+export class Computesite {
+  url: string;
+  name: string;
+}

src/app/computesites.service.spec.ts

+import { TestBed, inject } from '@angular/core/testing';
+
+import { ComputesitesService } from './computesites.service';
+
+describe('ComputesitesService', () => {
+  beforeEach(() => {
+    TestBed.configureTestingModule({
+      providers: [ComputesitesService]
+    });
+  });
+
+  it('should be created', inject([ComputesitesService], (service: ComputesitesService) => {
+    expect(service).toBeTruthy();
+  }));
+});

src/app/computesites.service.ts

+import { Injectable } from '@angular/core';
+import { Computesite } from './computesite';
+import { COMPUTESITES } from './mock-compute-site';
+
+@Injectable()
+export class ComputesitesService {
+
+  constructor() { }
+
+  getComputeSites(): Computesite[] {
+    return COMPUTESITES;
+  }
+
+
+}

src/app/job.ts

+export class Job {
+  public name: string;
+  public jobid: string;
+  public desc: string;
+  public state: string;
+  public time: number;
+  public batch_host: string;
+}

src/app/job/job.component.html

+<mat-card>
+  <mat-card-title>{{ jobdata.name }}</mat-card-title>
+  <table>
+    <tr>
+      <td width="1000%">
+        {{ jobdata.desc }}
+      </td>
+      <td width="20%">
+        {{ jobdata.state }}
+      </td>
+      <td withdt="10%">
+        <button mat-button (click)="onCancel()">
+          Cancel
+        </button>
+      </td>
+      <td width="10%">
+        <div *ngIf="available">
+          <button mat-button (click)="onConnect()" [disabled]="busy">
+            Connect
+          </button>
+        </div>
+      </td>
+  </tr>
+</table>
+</mat-card>

src/app/job/job.component.spec.ts

+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { JobComponent } from './job.component';
+
+describe('JobComponent', () => {
+  let component: JobComponent;
+  let fixture: ComponentFixture<JobComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ JobComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(JobComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/job/job.component.ts

+import { Component, OnInit, Input } from '@angular/core';
+import { Job } from '../job';
+import {TesService} from '../tes.service';
+import { StrudelappsService } from '../strudelapps.service';
+
+@Component({
+  selector: 'app-job',
+  templateUrl: './job.component.html',
+  styleUrls: ['./job.component.css']
+})
+export class JobComponent implements OnInit {
+
+  @Input() jobdata: Job;
+  private available: Boolean;
+  private busy: Boolean;
+  constructor(private tesService: TesService, private strudelAppsService: StrudelappsService) {
+
+
+}
+
+  ngOnInit() {
+    if (this.jobdata.state == "RUNNING") {
+      this.available = true;
+    } else {
+      this.available = false;
+    }
+    this.tesService.busy.subscribe(busy => this.busy = busy);
+  }
+
+  onCancel() {
+    this.tesService.cancel(this.jobdata.jobid);
+  }
+
+  onConnect() {
+    console.log('attempting connect');
+    // Before connecting we must resolve what type of app we are connecting to
+    let app = this.strudelAppsService.getApp(this.jobdata.name);
+    console.log('app definition is ',app);
+    this.tesService.connect(this.jobdata.jobid,this.jobdata.batch_host,app);
+  }
+
+}

src/app/joblist/joblist.component.html

+<div *ngIf="jobs.lenght == 0">
+  You don't appear to have any jobs
+</div>
+<div *ngFor="let job of jobs">
+  <app-job [jobdata]=job></app-job>
+</div>

src/app/joblist/joblist.component.spec.ts

+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { JoblistComponent } from './joblist.component';
+
+describe('JoblistComponent', () => {
+  let component: JoblistComponent;
+  let fixture: ComponentFixture<JoblistComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ JoblistComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(JoblistComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/joblist/joblist.component.ts

+import { Component, OnInit } from '@angular/core';
+import {TesService} from '../tes.service';
+import { Job } from '../job';
+import { Observable } from 'rxjs/Observable';
+
+
+
+@Component({
+  selector: 'app-joblist',
+  templateUrl: './joblist.component.html',
+  styleUrls: ['./joblist.component.css']
+})
+export class JoblistComponent implements OnInit {
+  private jobs: any[] = [];
+  private displayedColumns = ['id'];
+  private jobsSubscription: any;
+
+  constructor(private tesService: TesService,) { }
+
+  ngOnInit() {
+
+    this.jobsSubscription = this.tesService.joblist.subscribe(jobs => this.jobs = jobs);
+    console.log("jobs subscribed by joblist component");
+  }
+
+  public ngOnDestroy(): void {
+      if (this.jobsSubscription) {
+          this.jobsSubscription.unsubscribe();
+      }
+
+  }
+
+  updateJobs(jobs) {
+    this.jobs = jobs;
+    console.log("job data received by the joblist component");
+    console.log(this.jobs);
+  }
+
+  login(){
+    //Wire this up to the tes login component to get an ssh cert on the tes backend
+    //This will also tell the TES which site we are using
+    return;
+  }
+
+  logout() {
+    return;
+  }
+
+}

src/app/launcher/dialog-placeholder.html

+<p>
+  {{ data.msg }}
+</p>

src/app/launcher/launcher.component.html

+
+<div *ngIf="authorised">
+<mat-form-field>
+	<mat-select placeholder="Application" [(value)]=app>
+		<mat-option *ngFor="let a of strudelapps" [value]=a>
+			{{a.name}}
+		</mat-option>
+	</mat-select>
+</mat-form-field>
+<button mat-button (click)=configureResources()>Configure Resources</button>
+<button mat-button (click)=configureApp() [disabled]="!app">Configure App</button>
+<button mat-button (click)=submitApp() [disabled]="!app">Start</button>
+
+<app-joblist></app-joblist>
+
+
+
+</div>

src/app/launcher/launcher.component.spec.ts

+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { LauncherComponent } from './launcher.component';
+
+describe('LauncherComponent', () => {
+  let component: LauncherComponent;
+  let fixture: ComponentFixture<LauncherComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ LauncherComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(LauncherComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/launcher/launcher.component.ts

+import { Component, OnInit, NgModule, Inject } from '@angular/core';
+import {Strudelapp} from '../strudelapp';
+import { StrudelappsService } from '../strudelapps.service';
+import { MatDialog, MatDialogRef, MAT_DIALOG_DATA, MatDialogModule } from '@angular/material';
+import { TesService } from '../tes.service';
+
+
+
+@Component({
+  selector: 'app-launcher',
+  templateUrl: './launcher.component.html',
+  styleUrls: ['./launcher.component.css']
+})
+export class LauncherComponent implements OnInit {
+  private strudelapps: Strudelapp[];
+
+  private app: Strudelapp;
+  private authorised: boolean;
+
+  constructor(private strudelappsService: StrudelappsService, public dialog: MatDialog, private tesService: TesService) { }
+
+  ngOnInit() {
+    this.loadStrudelapps();
+    setTimeout( () => { this.tesService.authorised.subscribe(auth => this.authorised = auth); });
+  }
+
+
+  configureApp() {
+    console.log('configuring app for',this.app.name);
+    this.openDialog('If the application takes any parameters, this will open a new window where you can configure them')
+  }
+
+  configureResources() {
+    this.openDialog('This will open a new window to configure resource reqests')
+  }
+
+  submitApp() {
+    console.log('submitting app for',this.app.name);
+    this.tesService.submit(this.app);
+    // this.openDialog('This is where we should start the app');
+  }
+
+  appselect(a: any) {
+    console.log('appselect')
+    this.app = a;
+  }
+
+  loadStrudelapps() {
+    this.strudelapps = this.strudelappsService.getStrudelapps()
+  }
+
+
+  openDialog(msg: string ): void {
+      let dialogRef = this.dialog.open(DialogPlaceholder, {
+        width: '250px',
+        height: '400px',
+        data: { 'msg': msg }
+      });
+
+      dialogRef.afterClosed().subscribe(result => {
+        console.log('The dialog was closed');
+      });
+    }
+
+
+}
+
+@Component({
+  selector: 'dialog-placeholder',
+  templateUrl: 'dialog-placeholder.html',
+})
+export class DialogPlaceholder {
+
+  constructor(
+    public dialogRef: MatDialogRef<DialogPlaceholder>,
+    @Inject(MAT_DIALOG_DATA) public data: any) { }
+
+  onNoClick(): void {
+    this.dialogRef.close();
+  }
+
+}

src/app/mock-compute-site.ts

+import { Computesite } from './computesite';
+
+export const COMPUTESITES: Computesite[] = [
+  { url: 'http://localhost:8080/config', name: 'M3' },
+  {url: '', name: 'Other' },
+];