Unmocked getTiles svc, refactored checklists to work with it

src/app/executions/execution/execution-detail/execution-detail.component.html

@@ -35,22 +35,22 @@
     </div>
   </form>
 
-  <div *ngIf="canSelectPlanes()">
+  <div *ngIf="canSelectPlanes()" [formGroup]="planesFormGroup">
     <h4 class="pt-2 border-top">
       Planes
     </h4>
 
-    <div class="w-100" *ngFor="let plane of getPlaneKeys()" formGroup="planesFormGroup">
-      <label><input type="checkbox" formControlName="plane" value="{{plane}}" checked/>{{plane}}</label>
+    <div class="w-100" *ngFor="let plane of getPlaneKeys()">
+      <label><input type="checkbox" value="{{plane}}" checked/>{{plane}}</label>
     </div>
   </div>
-  <div *ngIf="canSelectTiles()">
+  <div *ngIf="canSelectTiles()" [formGroup]="tilesFormGroup">
     <h4 class="pt-2 border-top">
       Tiles
     </h4>
 
-    <div class="w-100" *ngFor="let tile of getTiles()" formGroup="tilesFormGroup">
-      <label><input type="checkbox" formControlName="tile" value="{{tile}}" checked/>{{tile}}</label>
+    <div class="w-100" *ngFor="let tile of getTiles()">
+      <label><input type="checkbox" value="{{tile}}" checked/>{{tile}}</label>
     </div>
   </div>
 

src/app/executions/execution/execution-detail/execution-detail.component.ts

@@ -2,7 +2,7 @@ import {Component, EventEmitter, Input, OnDestroy, OnInit, Output} from '@angula
 import {Job, JobExecution} from "../../../model/job";
 import {Subject, Observable, of} from "rxjs";
 import {JobsService} from "../../../services/jobs.service";
-import {FormControl, FormGroup} from "@angular/forms";
+import {FormControl, FormGroup, FormArray} from "@angular/forms";
 import {ConfigurationService} from "../../../env/configuration.service";
 import {faCheckCircle, faCopy, faList, faSave, faStickyNote} from "@fortawesome/free-solid-svg-icons";
 import {AlertService} from "../../../services/alert.service";
@@ -18,7 +18,12 @@ export class ExecutionDetailComponent implements OnInit, OnDestroy {
     notes: new FormControl(),
     id: new FormControl()
   });
-  planesFormGroup = new FormGroup({});
+  planesFormGroup = new FormGroup({
+    planes: new FormArray([])
+  });
+  tilesFormGroup = new FormGroup({
+    tiles: new FormArray([])
+  });
 
   private ngUnsubscribe = new Subject<void>();
   @Input() job: Job;
@@ -34,6 +39,8 @@ export class ExecutionDetailComponent implements OnInit, OnDestroy {
   public weblogUrl: string;
   planeKeys: string[] = [];
   tiles: string[] = [];
+  haveRequestedTiles = false;  // Avoid requesting them repeatedly
+  haveRequestedPlanes = false;  // Avoid requesting them repeatedly
 
   constructor(
     private configService: ConfigurationService,
@@ -177,14 +184,16 @@ export class ExecutionDetailComponent implements OnInit, OnDestroy {
   // Reads plane names from a JSON file and returns them in a list
   getPlaneKeys(): string[] {
     // Return the plane names if we already fetched them
-    if (this.planeKeys.length > 0) {
+    if (this.haveRequestedPlanes) {
       return this.planeKeys;
     }
 
-    this.planeKeys = [];
     // Get the plane names from the spectral window numbers in the planes.json file
+    this.haveRequestedPlanes = true;
     this.jobService.getPlanes(this.job.job_id).subscribe((response: string[]) => {
       this.planeKeys = response;
+      this.planesFormArray.clear();
+      this.planeKeys.forEach(planeKey => this.planesFormArray.push(new FormControl(planeKey)));
     },
       error => {
       this.alertService.error('Could not retrieve planes from planes.json. ' + error);
@@ -196,22 +205,33 @@ export class ExecutionDetailComponent implements OnInit, OnDestroy {
   // Reads tile names from a JSON file and returns them in a list
   getTiles(): string[] {
     // Return the plane names if we already fetched them
-    if (this.tiles.length > 0) {
+    if (this.haveRequestedTiles) {
       return this.tiles;
     }
 
-    this.tiles = [];
     // Get the plane names from the spectral window numbers in the planes.json file
+    this.haveRequestedTiles = true;
     this.jobService.getTiles(this.job.job_id).subscribe((response: string[]) => {
       this.tiles = response;
+      this.tilesFormArray.clear();
+      this.tiles.forEach(tile => this.tilesFormArray.push(new FormControl(tile)));
     },
       error => {
-      this.alertService.error('Could not retrieve tiles: ' + error);
+      this.alertService.error(`Could not retrieve tiles: ${error}`);
+      this.tiles = ["blorp"];
     });
 
     return this.tiles;
   }
 
+  get tilesFormArray(): FormArray {
+    return this.tilesFormGroup.controls["tiles"] as FormArray;
+  }
+
+  get planesFormArray(): FormArray {
+    return this.planesFormGroup.controls["planes"] as FormArray;
+  }
+
   // Writes to a file in lustre to flag planes to be accepted
   acceptPlanes(): void {
     this.alertService.info('Flagging accepted planes to be cached');

src/app/services/jobs.service.ts

@@ -175,11 +175,11 @@ export class JobsService {
 
   // Returns a JSON encoded string of plane information
   public getTiles(id: number): Observable<string[]> {
-    // return this.http.get<string[]>(this.configService.config.url + this.endPoint + 'jobs/' + id + '/tiles', {observe: 'response'}).pipe(
-    //   map(response => {
-    //     return response.body;
-    //   }));
-    return of(["tile1", "tile2"]);
+    return this.http.get<string[]>(this.configService.config.url + this.endPoint + 'jobs/' + id + '/calibrationTiles', {observe: 'response'}).pipe(
+      map(response => {
+        return response.body;
+      })
+    );
   }
   // Writes a string of plane names
   public writePlanes(id: number, planes: string): Observable<any> {