diff --git a/src/app/executions/execution/execution-detail/execution-detail.component.ts b/src/app/executions/execution/execution-detail/execution-detail.component.ts index 1b1641760bbf81118b22d5f0fc5347d0d1805797..aa03d66917a654898c461455a33c018fd571b114 100644 --- a/src/app/executions/execution/execution-detail/execution-detail.component.ts +++ b/src/app/executions/execution/execution-detail/execution-detail.component.ts @@ -72,7 +72,9 @@ export class ExecutionDetailComponent implements OnInit, OnDestroy, OnChanges { } if (this.canSelectPlanes()) { this.jobService.getPlanes(job.job_id).subscribe((response: object) => { - this.planeKeys = Object.keys(response); + // Sort the returned planes before making form controls from them + this.planeKeys = Object.keys(response) + .sort((a, b) => a.localeCompare(b, undefined, { numeric: true })); for (const controlName in this.planesFormGroup.controls) { this.planesFormGroup.removeControl(controlName); } @@ -87,11 +89,16 @@ export class ExecutionDetailComponent implements OnInit, OnDestroy, OnChanges { } refreshTiles(newTiles: Tile[]) { - this.tiles = new Map<string, Tile>(newTiles.map(tile => {return [tile.name, tile]})); - for (const controlName in this.tilesFormGroup.controls) { - this.tilesFormGroup.removeControl(controlName); - } - Array.from(this.tiles.keys()).forEach(tile => this.tilesFormGroup.addControl(tile, new FormControl(true))); + // Sort newTiles by name before they're stored on this component + this.tiles = new Map<string, Tile>( + newTiles + .sort((a, b) => a.name.localeCompare(b.name, undefined, { numeric: true })) + .map(tile => [tile.name, tile]) + ); + for (const controlName in this.tilesFormGroup.controls) { + this.tilesFormGroup.removeControl(controlName); + } + Array.from(this.tiles.keys()).forEach(tile => this.tilesFormGroup.addControl(tile, new FormControl(true))); } copyToClipboard(text: string): void {