removed the env.js set up and replaced it using angular's environment system.

Also removed a few unused imports and added some padding to the html template for the workspaces component

apps/web/README.md

@@ -26,11 +26,13 @@ Run `ng e2e` to execute the end-to-end tests via [Protractor](http://www.protrac
 
 To get more help on the Angular CLI use `ng help` or go check out the [Angular CLI README](https://github.com/angular/angular-cli/blob/master/README.md).
 
-## Archive Config
+## Environment Config
 
-Configuration variables can be set in the env.js file located next to the index.html file. These variables will be loaded into the angular app through the EnvService. 
+Configuration variables can be set in `src/environments` directory.
 
-The env.js file can be modified without having to rebuild the application.
+To use a configuration in a build, run `ng build --c=production` or `ng build --c=test`.
+
+To use a configuration locally, run `ng serve --c=production` or `ng serve --c=test`.
 
 ## Search Filters
 

apps/web/angular.json

@@ -59,6 +59,30 @@
                   "maximumError": "5mb"
                 }
               ]
+            },
+            "test": {
+              "fileReplacements": [
+                {
+                  "replace": "src/environments/environment.ts",
+                  "with": "src/environments/environment.test.ts"
+                }
+              ],
+              "optimization": true,
+              "outputHashing": "all",
+              "sourceMap": false,
+              "extractCss": true,
+              "namedChunks": false,
+              "aot": true,
+              "extractLicenses": true,
+              "vendorChunk": false,
+              "buildOptimizer": true,
+              "budgets": [
+                {
+                  "type": "initial",
+                  "maximumWarning": "2mb",
+                  "maximumError": "5mb"
+                }
+              ]
             }
           }
         },
@@ -70,6 +94,9 @@
           "configurations": {
             "production": {
               "browserTarget": "archive2:build:production"
+            },
+            "test": {
+              "browserTarget": "archive2:build:test"
             }
           }
         },

apps/web/src/app/app.module.ts

-import { BrowserModule } from '@angular/platform-browser';
-import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
-import { ReactiveFormsModule} from "@angular/forms";
-import { NgModule } from '@angular/core';
+import {BrowserModule} from '@angular/platform-browser';
+import {BrowserAnimationsModule} from '@angular/platform-browser/animations';
+import {ReactiveFormsModule} from "@angular/forms";
+import {NgModule} from '@angular/core';
 import {HttpClientModule} from "@angular/common/http";
 
-import { AppComponent } from './app.component';
-import { NgbModule } from '@ng-bootstrap/ng-bootstrap';
-import { EnvServiceProvider} from "./env/env.service.provider";
-import { WebAnalyticsService } from "./web-analytics/web-analytics.service";
+import {AppComponent} from './app.component';
+import {NgbModule} from '@ng-bootstrap/ng-bootstrap';
+import {WebAnalyticsService} from "./web-analytics/web-analytics.service";
 
-import { HeaderComponent } from './header/header.component';
-import { FooterComponent } from './footer/footer.component';
+import {HeaderComponent} from './header/header.component';
+import {FooterComponent} from './footer/footer.component';
 
-import { AppRoutingModule } from './app-routing.module';
-import { SplashComponent } from './splash/splash.component';
-import { SharedModule } from "./shared/shared.module";
+import {AppRoutingModule} from './app-routing.module';
+import {SplashComponent} from './splash/splash.component';
+import {SharedModule} from "./shared/shared.module";
 
 @NgModule({
   declarations: [
@@ -33,7 +32,7 @@ import { SharedModule } from "./shared/shared.module";
     HttpClientModule,
     SharedModule
   ],
-  providers: [EnvServiceProvider, WebAnalyticsService],
+  providers: [WebAnalyticsService],
   bootstrap: [AppComponent]
 })
 export class AppModule {

apps/web/src/app/archive-search/services/result-type.service.ts

 import {Injectable} from '@angular/core';
 import {ResultType} from "../model/result-type";
 import {BehaviorSubject, Observable} from "rxjs";
-import {HttpClient} from "@angular/common/http";
-import {EnvService} from "../../env/env.service";
 
 @Injectable({
   providedIn: 'root'
@@ -13,11 +11,7 @@ export class ResultTypeService {
   private _resultType: BehaviorSubject<ResultType> = new BehaviorSubject(this.resultType);
   public readonly resultType$: Observable<ResultType> = this._resultType.asObservable();
 
-  private serverAddress: string = '';
-
-  constructor(private http: HttpClient, private env: EnvService) {
-    this.serverAddress = env.apiUrl;
-  }
+  constructor() {}
 
   updateResultType(name: string): void {
     this.resultType = ResultType.getResultType(name);

apps/web/src/app/archive-search/services/search-results.service.ts

-import { Injectable } from '@angular/core';
+import {Injectable} from '@angular/core';
 import {HttpClient, HttpParams} from "@angular/common/http";
 import {Observable, Subscription} from "rxjs";
 import {SelectedFilter} from "../model/selected-filter";
 import {SelectedFilterService} from "./selected-filter.service";
-import {EnvService } from "../../env/env.service";
+import {environment} from "../../../environments/environment";
 import {Field} from "../model/field";
 
 @Injectable({
@@ -11,13 +11,10 @@ import {Field} from "../model/field";
 })
 export class SearchResultsService {
 
-  private serverAddress: string = '';
-
   private selectedFilters: Array<SelectedFilter> = [];
   private selectedFiltersSub: Subscription;
 
-  constructor(private http: HttpClient, private selectedFilterService: SelectedFilterService, private env: EnvService) {
-    this.serverAddress = env.apiUrl;
+  constructor(private http: HttpClient, private selectedFilterService: SelectedFilterService) {
     this.selectedFiltersSub = this.selectedFilterService.selectedFilters$.subscribe(selectedFilters => {
       this.selectedFilters = selectedFilters;
     });
@@ -35,7 +32,7 @@ export class SearchResultsService {
         params = params.append(key.name, JSON.stringify(key.value));
       }
     }
-    return this.http.get(this.serverAddress + endPoint, {observe: 'response', params: params});
+    return this.http.get(environment.apiUrl + endPoint, {observe: 'response', params: params});
   }
 
   getObservationDetails(id: string): Observable<any> {
@@ -43,7 +40,7 @@ export class SearchResultsService {
     params = params.append('solr_id', id);
     console.warn('Obs Details Query');
     console.log(params);
-    return this.http.get(this.serverAddress + 'restapi_get_full_exec_block_details', {observe: "response", params: params});
+    return this.http.get(environment.apiUrl + 'restapi_get_full_exec_block_details', {observe: "response", params: params});
   }
 
   getProjectDetails(id: string): Observable<any> {
@@ -51,7 +48,7 @@ export class SearchResultsService {
     params = params.append('project_code', '"' + id + '"');
     console.warn('Project Details Query');
     console.log(params);
-    return this.http.get(this.serverAddress + 'restapi_get_paged_exec_blocks', {observe: "response", params: params});
+    return this.http.get(environment.apiUrl + 'restapi_get_paged_exec_blocks', {observe: "response", params: params});
   }
 
 }

apps/web/src/app/env/app-config.service.ts

-import { Injectable } from '@angular/core';
-import { EnvService } from "./env.service";
-import { HttpClient } from '@angular/common/http';
+import {Injectable} from '@angular/core';
+import {environment} from "../../environments/environment";
+import {HttpClient} from '@angular/common/http';
 
 @Injectable({
   providedIn: 'root'
@@ -10,14 +10,14 @@ export class AppConfigService {
   configUrl = 'restapi_get_application_parameters';
   facetUrl = 'restapi_get_execution_block_facets';
 
-  constructor(private http: HttpClient, private env: EnvService) { }
+  constructor(private http: HttpClient) { }
 
   getConfig() {
-    return this.http.get(this.env.apiUrl + this.configUrl, {responseType: "json"});
+    return this.http.get(environment.apiUrl + this.configUrl, {responseType: "json"});
   }
 
   // we want to load facets only once per session - so it feels like they are config variables.
   getFacets(){
-    return this.http.get(this.env.apiUrl + this.facetUrl, {responseType: "json"});
+    return this.http.get(environment.apiUrl + this.facetUrl, {responseType: "json"});
   }
 }

apps/web/src/app/env/env.service.provider.ts

-import { EnvService } from './env.service';
-
-export const EnvServiceFactory = () => {
-  // Create env
-  const env = new EnvService();
-
-  // Read environment variables from browser window
-  const browserWindow = window || {};
-  const browserWindowEnv = browserWindow['__env'] || {};
-
-  // Assign environment variables from browser window to env
-  for (const key in browserWindowEnv) {
-    if (browserWindowEnv.hasOwnProperty(key)) {
-      env[key] = window['__env'][key];
-    }
-  }
-
-  return env;
-};
-
-export const EnvServiceProvider = {
-  provide: EnvService,
-  useFactory: EnvServiceFactory,
-  deps: [],
-};

apps/web/src/app/env/env.service.spec.ts

-import { TestBed } from '@angular/core/testing';
-
-import { EnvService } from './env.service';
-
-describe('EnvService', () => {
-  beforeEach(() => TestBed.configureTestingModule({}));
-
-  it('should be created', () => {
-    const service: EnvService = TestBed.get(EnvService);
-    expect(service).toBeTruthy();
-  });
-});

apps/web/src/app/env/env.service.ts

-import { Injectable } from '@angular/core';
-
-@Injectable({
-  providedIn: 'root'
-})
-export class EnvService {
-
-  public apiUrl: string;
-  public workspacesUrl: string;
-
-  constructor() {
-  }
-
-
-}

apps/web/src/app/workspaces/services/capability-launcher.service.ts

-import { Injectable } from "@angular/core";
-import { HttpClient, HttpParams, HttpResponse } from "@angular/common/http";
-import { EnvService } from "../../env/env.service";
-import { Observable } from "rxjs";
-import { CapabilityRequest } from "../model/capability-request";
-import { CapabilityExecution } from "../model/capability-execution";
+import {Injectable} from "@angular/core";
+import {HttpClient} from "@angular/common/http";
+import {environment} from "../../../environments/environment";
+import {Observable} from "rxjs";
+import {CapabilityRequest} from "../model/capability-request";
+import {CapabilityExecution} from "../model/capability-execution";
 
 @Injectable({
   providedIn: "root",
@@ -11,7 +11,7 @@ import { CapabilityExecution } from "../model/capability-execution";
 export class CapabilityLauncherService {
   private endpoint = "capability/request";
 
-  constructor(private httpClient: HttpClient, private env: EnvService) {}
+  constructor(private httpClient: HttpClient) {}
 
   /**
    * Create capability request and send it to capability service
@@ -22,7 +22,7 @@ export class CapabilityLauncherService {
     capabilityName: string,
     args: string
   ): Observable<CapabilityRequest> {
-    const url = this.env.workspacesUrl + this.endpoint;
+    const url = environment.workspacesUrl + this.endpoint;
     const params = JSON.stringify({ capability: capabilityName, args: args });
     return this.httpClient.post<CapabilityRequest>(url, params);
   }
@@ -32,7 +32,7 @@ export class CapabilityLauncherService {
    * @param: requestId  ID of capability request to submit
    */
   submit(requestId: string): Observable<CapabilityExecution> {
-    const url = `${this.env.workspacesUrl}${this.endpoint}/${requestId}/submit`;
+    const url = `${environment.workspacesUrl}${this.endpoint}/${requestId}/submit`;
     return this.httpClient.post<CapabilityExecution>(url, null);
   }
 }

apps/web/src/app/workspaces/workspaces.component.html

 <div class="container-fluid">
-  <div class="row">
+  <div class="row py-2">
     <div class="col">
       <button type="button" class="btn btn-primary" (click)="nullButtonOnClick()">Launch null capability [null -g]</button>
     </div>
   </div>
 </div>
-<div *ngFor="let request of capabilityRequests; index as i">
+<div class="p-2" *ngFor="let request of capabilityRequests; index as i">
   <code>Capability request created: {{request | json}}</code><br>
   <code *ngIf="capabilityExecutions[i]">Capability execution created: {{capabilityExecutions[i] | json}}</code>
 </div>

apps/web/src/app/workspaces/workspaces.component.ts

-import { Component, OnInit } from "@angular/core";
-import { CapabilityLauncherService } from "./services/capability-launcher.service";
-import { Observable } from "rxjs";
-import { CapabilityRequest } from "./model/capability-request";
-import { map } from "rxjs/operators";
-import { CapabilityExecution } from "./model/capability-execution";
+import {Component, OnInit} from "@angular/core";
+import {CapabilityLauncherService} from "./services/capability-launcher.service";
+import {CapabilityRequest} from "./model/capability-request";
+import {CapabilityExecution} from "./model/capability-execution";
 
 @Component({
   selector: "app-workspaces",

apps/web/src/env.js

-(function (window) {
-  window.__env = window.__env || {};
-
-  // API url
-  window.__env.apiUrl = 'https://webtest.aoc.nrao.edu/archiveServices/';
-
-  // Workspaces capability service URL
-  window.__env.workspacesUrl = 'http://localhost:3457/'
-
-}(this));

apps/web/src/environments/environment.prod.ts

 export const environment = {
-  production: true
+  production: true,
+  // archive search services
+  apiUrl: 'https://webtest.aoc.nrao.edu/archiveServices/',
+  // workspace services
+  workspacesUrl: 'http://localhost:3457/'
 };

apps/web/src/environments/environment.test.ts

+export const environment = {
+  production: true,
+  // archive search services
+  apiUrl: 'https://webtest.aoc.nrao.edu/archiveServices/',
+  // workspace services
+  workspacesUrl: 'http://localhost:3457/'
+};

apps/web/src/environments/environment.ts

@@ -3,7 +3,11 @@
 // The list of file replacements can be found in `angular.json`.
 
 export const environment = {
-  production: false
+  production: false,
+  // archive search services
+  apiUrl: 'https://webtest.aoc.nrao.edu/archiveServices/',
+  // workspace services
+  workspacesUrl: 'http://localhost:3457/'
 };
 
 /*

apps/web/src/index.html

@@ -9,7 +9,6 @@
   <link rel="icon" type="image/x-icon" href="favicon.ico">
   <link href='https://fonts.googleapis.com/css?family=Lato:300,400,700' rel='stylesheet' type='text/css'>
   <script src="https://kit.fontawesome.com/bd536dc06d.js"></script>
-  <script src="env.js"></script>
 </head>
 <body>
   <app-root></app-root>