Fix some leftovers from dynamic base paths

- Relates #747
- Some polish for linting, left html linting errors in place
  as that part needs some changes in eslint config.

Author: klopfdreh

ui/src/app/about/user/user.component.html

@@ -12,6 +12,6 @@
 
 <ng-template #logIn>
   <div>
-    <a href="/login" class="nav-link nav-icon-text"> Log In </a>
+    <a href="{{ baseApiUrl }}login" class="nav-link nav-icon-text"> Log In </a>
   </div>
 </ng-template>

ui/src/app/about/user/user.component.ts

@@ -1,13 +1,15 @@
 import {Component, OnInit} from '@angular/core';
 import {Router} from '@angular/router';
 import {SecurityService} from '../../security/service/security.service';
+import {UrlUtilities} from '../../url-utilities.service';
 
 @Component({
   selector: 'app-user',
   templateUrl: './user.component.html'
 })
 export class UserComponent {
   loggedinUser$ = this.securityService.loggedinUser();
+  baseApiUrl = UrlUtilities.calculateBaseApiUrl();
 
   constructor(private securityService: SecurityService, private router: Router) {}
 

ui/src/app/app.component.html

@@ -6,7 +6,7 @@ <h3 class="welcome">Welcome to</h3>
       <h5 class="hint">You have to log in to access the application.</h5>
     </section>
     <div style="padding-bottom: 50px">
-      <a href="/login" class="btn btn-primary"> Log In </a>
+      <a href="{{ baseApiUrl }}login" class="btn btn-primary"> Log In </a>
     </div>
   </form>
 </div>

ui/src/app/app.component.ts

@@ -2,6 +2,7 @@ import {Component} from '@angular/core';
 import {SecurityService} from './security/service/security.service';
 import {ModalService} from './shared/service/modal.service';
 import {SettingsComponent} from './settings/settings/settings.component';
+import {UrlUtilities} from './url-utilities.service';
 
 @Component({
   selector: 'app-root',
@@ -10,6 +11,7 @@ import {SettingsComponent} from './settings/settings/settings.component';
 export class AppComponent {
   shouldProtect = this.securityService.shouldProtect();
   securityEnabled = this.securityService.securityEnabled();
+  baseApiUrl = UrlUtilities.calculateBaseApiUrl();
 
   constructor(private securityService: SecurityService, private modalService: ModalService) {}
 

ui/src/app/manage/tools/tools.component.html

@@ -6,11 +6,11 @@ <h1>Tools</h1>
       <ng-template>
         <div>
           <clr-icon shape="angle" style="transform: rotate(90deg)"></clr-icon>
-          <a href="/#" (click)="run('export-stream')">Export stream(s): Create a JSON file with the selected streams</a>
+          <a href="{{ baseApiUrl }}#" (click)="run('export-stream')">Export stream(s): Create a JSON file with the selected streams</a>
         </div>
         <div [appRole]="['ROLE_CREATE']">
           <clr-icon shape="angle" style="transform: rotate(90deg)"></clr-icon>
-          <a href="/#" (click)="run('import-stream')">Import stream(s): Import streams from a JSON file</a>
+          <a href="{{ baseApiUrl }}#" (click)="run('import-stream')">Import stream(s): Import streams from a JSON file</a>
         </div>
       </ng-template>
     </app-view-card>
@@ -19,11 +19,11 @@ <h1>Tools</h1>
       <ng-template>
         <div>
           <clr-icon shape="angle" style="transform: rotate(90deg)"></clr-icon>
-          <a href="/#" (click)="run('cleanup-all')">Clean up all task/job executions</a>
+          <a href="{{ baseApiUrl }}#" (click)="run('cleanup-all')">Clean up all task/job executions</a>
         </div>
         <div>
           <clr-icon shape="angle" style="transform: rotate(90deg)"></clr-icon>
-          <a href="/#" (click)="run('cleanup-completed')">Clean up all completed task/job executions</a>
+          <a href="{{ baseApiUrl }}#" (click)="run('cleanup-completed')">Clean up all completed task/job executions</a>
         </div>
       </ng-template>
     </app-view-card>
@@ -33,11 +33,11 @@ <h1>Tools</h1>
       <ng-template>
         <div>
           <clr-icon shape="angle" style="transform: rotate(90deg)"></clr-icon>
-          <a href="/#" (click)="run('export-task')">Export task(s): Create a JSON file with the selected tasks</a>
+          <a href="{{ baseApiUrl }}#" (click)="run('export-task')">Export task(s): Create a JSON file with the selected tasks</a>
         </div>
         <div [appRole]="['ROLE_CREATE']">
           <clr-icon shape="angle" style="transform: rotate(90deg)"></clr-icon>
-          <a href="/#" (click)="run('import-task')">Import task(s): Import tasks from a JSON file</a>
+          <a href="{{ baseApiUrl }}#" (click)="run('import-task')">Import task(s): Import tasks from a JSON file</a>
         </div>
       </ng-template>
     </app-view-card>

ui/src/app/manage/tools/tools.component.ts

@@ -5,6 +5,7 @@ import {StreamExportComponent} from './stream/export.component';
 import {StreamImportComponent} from './stream/import.component';
 import {TaskExportComponent} from './task/export.component';
 import {TaskImportComponent} from './task/import.component';
+import {UrlUtilities} from '../../url-utilities.service';
 
 @Component({
   selector: 'app-tools',
@@ -21,6 +22,7 @@ export class ToolsComponent {
   taskImportModal: TaskImportComponent;
   @ViewChild('cleanupModal', {static: true})
   cleanupModal: CleanupComponent;
+  baseApiUrl = UrlUtilities.calculateBaseApiUrl();
 
   constructor(private notificationService: NotificationService) {}
 

ui/src/app/shared/component/card/card.component.html

@@ -1,6 +1,6 @@
 <div class="card dataflow-card" [class.active]="active">
   <div class="card-header">
-    <a href="/#" (click)="toggle()">
+    <a href="{{ baseApiUrl }}#" (click)="toggle()">
       <clr-icon class="icon" shape="angle"></clr-icon>
       {{ titleModal }}
     </a>

ui/src/app/shared/component/card/card.component.ts

@@ -1,9 +1,9 @@
 import {AfterContentInit, Component, ContentChild, EventEmitter, Input, Output, TemplateRef} from '@angular/core';
 import get from 'lodash.get';
 import {map, mergeMap} from 'rxjs/operators';
-import {SettingModel} from '../../model/setting.model';
 import {ContextService} from '../../service/context.service';
 import {ContextModel} from '../../model/context.model';
+import {UrlUtilities} from '../../../url-utilities.service';
 
 @Component({
   selector: 'app-view-card',
@@ -20,6 +20,7 @@ export class CardComponent implements AfterContentInit {
   @Output() onChange = new EventEmitter();
 
   context: ContextModel[];
+  baseApiUrl = UrlUtilities.calculateBaseApiUrl();
 
   constructor(private contextService: ContextService) {}
 

ui/src/logout-success-oauth.html

@@ -3,7 +3,6 @@
 <head>
   <meta charset="utf-8">
   <title>Spring Cloud Data Flow</title>
-  <base href="/">
   <meta name="viewport" content="width=device-width, initial-scale=1">
   <link rel="icon" type="image/x-icon" href="favicon.ico">
   <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
@@ -36,6 +35,7 @@ <h4>
               provider. Therefore, going to the main Dashboard URL will log you back in,
               unless you also log out from your oauth provider.
             </p>
+          </div>
         </div>
     </div>
 </body>