[WIP] Add App deployment configuration

README.md

@@ -29,7 +29,7 @@ currently `cobbler-frontend` though. Serving will only work if you have built ou
 
 ## Code scaffolding
 
-Run `ng generate component component-name` to generate a new component. You can also use
+Run `ng generate component component-name --project projectName` to generate a new component. You can also use
 `ng generate directive|pipe|service|class|guard|interface|enum|module`.
 
 ## Build

projects/cobbler-frontend/src/app/app.module.ts

@@ -14,7 +14,7 @@ import {MatToolbarModule} from '@angular/material/toolbar';
 import {MatTooltipModule} from '@angular/material/tooltip';
 import {MatTreeModule} from '@angular/material/tree';
 import {BrowserModule} from '@angular/platform-browser';
-import {NgModule} from '@angular/core';
+import {APP_INITIALIZER, NgModule} from '@angular/core';
 import {FormsModule, ReactiveFormsModule} from '@angular/forms';
 import {COBBLER_URL, cobblerUrlFactory} from 'cobbler-api';
 import {AppRoutingModule} from './app-routing.module';
@@ -25,6 +25,7 @@ import {LogInFormComponent} from './login/login.component';
 import {DistrosComponent} from './items/distros/distros.component';
 import {ProfilesComponent} from './items/profiles/profiles.component';
 import {UserService} from './services/user.service';
+import {AppConfigService} from './services/app-config.service';
 import {SystemsComponent} from './items/systems/systems.component';
 import {ReposComponent} from './items/repos/repos.component';
 import {ImagesComponent} from './items/images/images.component';
@@ -52,6 +53,15 @@ import { EditableTreeComponent } from './common/editable-tree/editable-tree.comp
 import { ViewableTreeComponent } from './common/viewable-tree/viewable-tree.component';
 import { SettingsEditComponent } from './settings/edit/settings-edit.component';
 
+export function initializeAppFactory(
+  configurationService: AppConfigService
+) {
+  // Load App Deployment Config
+  // Note: App_Initiliaze waits for Observables to complete and
+  // Promises to resolve before finishing initialization phase.
+  return (): Promise<any> => configurationService.loadConfig();
+}
+
 @NgModule({
   declarations: [
     AppComponent,
@@ -118,6 +128,12 @@ import { SettingsEditComponent } from './settings/edit/settings-edit.component';
       provide: COBBLER_URL,
       useFactory: cobblerUrlFactory
     },
+    {
+      provide: APP_INITIALIZER,
+      useFactory: initializeAppFactory,
+      deps: [AppConfigService],
+      multi: true
+    },
     UserService,
     AuthGuardService,
   ],

projects/cobbler-frontend/src/app/login/login.component.html

@@ -9,7 +9,10 @@ <h1>Cobbler</h1>
     <div class="form-group">
       <mat-form-field class="example-full-width" appearance="fill">
         <mat-label>Server</mat-label>
-        <input formControlName="server" matInput placeholder="Enter server URL">
+        <input list="urlList" formControlName="server" matInput placeholder="Enter server URL">
+        <datalist id="urlList" *ngIf="config">
+          <option *ngFor="let item of config.cobblerUrls" [value]="item">{{ item }}</option>
+        </datalist>
       </mat-form-field>
       <div *ngIf="server.touched && server.invalid"
            class="alert alert-danger">

projects/cobbler-frontend/src/app/login/login.component.ts

@@ -2,6 +2,7 @@ import {Component, Inject} from '@angular/core';
 import {FormGroup, FormControl, Validators, AbstractControl, ValidationErrors} from '@angular/forms';
 import {Router} from '@angular/router';
 import {CobblerApiService, COBBLER_URL} from 'cobbler-api';
+import { AppConfigService, AppConfig } from '../services/app-config.service';
 
 import {AuthGuardService} from '../services/auth-guard.service';
 import {UserService} from '../services/user.service';
@@ -14,6 +15,7 @@ import {UserService} from '../services/user.service';
 export class LogInFormComponent {
   server_prefilled: string;
   message = null;
+  config: AppConfig = undefined;
   login_form = new FormGroup({
     server: new FormControl('', [
       Validators.required,
@@ -41,10 +43,24 @@ export class LogInFormComponent {
     private guard: AuthGuardService,
     @Inject(COBBLER_URL) url: URL,
     private cobblerApiService: CobblerApiService,
+    private configService: AppConfigService
   ) {
-    this.server_prefilled = url.toString()
-    this.login_form.get('server').setValue(this.server_prefilled)
-    console.log("server_prefiled: " + this.server_prefilled)
+    this.config = configService.getAppConfig();
+    this.message = configService.getAppConfigError();
+    if (this.config){
+      // Auto fill if only 1 url is set
+      if (this.config.cobblerUrls.length == 1) {
+        this.server_prefilled = this.config.cobblerUrls[0];
+      }
+    } else {
+      // default to cobblerUrlFactory only when no
+      // deployment config is found
+      this.server_prefilled = url.toString()
+    }
+    if (this.server_prefilled) {
+      this.login_form.get('server').setValue(this.server_prefilled)
+      console.log("server_prefiled: " + this.server_prefilled)
+    }
   }
 
   get server(): AbstractControl {

projects/cobbler-frontend/src/app/navbar/navbar.component.html

@@ -12,7 +12,12 @@
   </div>
   <span class="navbar-spacer"></span>
   <div>
-    <span class="align-center pad">Version: {{cobbler_version}}</span>
+    <div style="display:inline-block;line-height:normal;" class="pad">
+      <span style="text-align:left; font-size: 0.75em;" class="align-center">
+        Server: {{cobbler_server}}<br/>
+        Version: {{cobbler_version}}
+      </span>
+    </div>
     <span class="user_logged align-center pad"
           *ngIf="!islogged">
       <mat-icon class="align-center" aria-hidden="false" aria-label="Login">login</mat-icon>

projects/cobbler-frontend/src/app/navbar/navbar.component.ts

@@ -17,6 +17,7 @@ import {UserService} from '../services/user.service';
 export class NavbarComponent {
   @Output() toggleSidenav = new EventEmitter<void>();
   cobbler_version: String = 'Unknown';
+  cobbler_server: String = 'localhost';
   islogged: boolean = false;
   subscription: Subscription;
 
@@ -34,20 +35,31 @@ export class NavbarComponent {
       sanitizer.bypassSecurityTrustResourceUrl('https://cobbler.github.io/images/logo-cobbler-new.svg')
     );
 
+    if (authO.server){
+      this.cobbler_server = authO.server
+          .match("http[s]*://([^/]*)")
+          .pop();
+    }
+
     this.subscription = this.authO.authorized.subscribe((value) => {
       if (value) {
         this.islogged = value;
       } else {
         this.islogged = false;
       }
     });
-    cobblerApiService.extended_version().subscribe((value) => {
-        this.cobbler_version = value.version
-      },
-      (error) => {
-        this.cobbler_version = 'Error'
-        this._snackBar.open(error.message, 'Close')
-      })
+
+    // should not call version unless user has authenticated
+    // as it could try to hit an invalid / incorrect URL
+    if (this.islogged) {
+      cobblerApiService.extended_version().subscribe((value) => {
+          this.cobbler_version = value.version
+        },
+        (error) => {
+          this.cobbler_version = 'Error'
+          this._snackBar.open(error.message, 'Close')
+        });
+    }
   }
 
   logout(): void {

projects/cobbler-frontend/src/app/services/app-config.service.spec.ts

@@ -0,0 +1,16 @@
+import { TestBed } from '@angular/core/testing';
+
+import { AppConfigService } from './app-config.service';
+
+describe('AppConfigService', () => {
+  let service: AppConfigService;
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({});
+    service = TestBed.inject(AppConfigService);
+  });
+
+  it('should be created', () => {
+    expect(service).toBeTruthy();
+  });
+});

projects/cobbler-frontend/src/app/services/app-config.service.ts

@@ -0,0 +1,49 @@
+import { Injectable } from '@angular/core';
+import { HttpClient } from '@angular/common/http';
+import { retry } from 'rxjs/operators';
+
+export interface AppConfig {
+  cobblerUrls: string[];
+}
+
+@Injectable({
+  providedIn: 'root'
+})
+export class AppConfigService {
+  private configUrl = 'assets/configs/app-config.json';
+  private config: AppConfig = undefined;
+  private errorMsg: String = undefined;
+
+  constructor(private http: HttpClient) { }
+
+  loadConfig(): Promise<any> {
+    // Need to subscribe but APP_INITIALIZE does not take type: subscription;
+    // use Promise instead
+    return this.makeConfigCall().toPromise().then(
+      res => {
+        this.config = res;
+      },
+      err => {
+        this.errorMsg = "Something bad happened loading App Configuration; please try again later.";
+      });
+  }
+
+  makeConfigCall() {
+    return this.http.get<AppConfig>(this.configUrl)
+              .pipe(
+                retry(2) // retry a failed request up to 3 times
+              );
+  }
+
+  async reloadAppConfig() {
+    return await this.loadConfig();
+  }
+
+  getAppConfig(): AppConfig {
+    return this.config;
+  }
+
+  getAppConfigError(): String {
+    return this.errorMsg;
+  }
+}

projects/cobbler-frontend/src/assets/configs/app-config.json

@@ -0,0 +1,3 @@
+{
+    "cobblerUrls": ["http://localhost/cobbler_api"]
+}