Fix dynamic base path resolving

- Essentially calculates needed asset and api paths
  from a window and uses those dynamically.
- Fixes #747

Generic polish for a PR:
- Removed change to compodoc dep as dep updates should not get done with generic PR's
- Don't update lock file
- Removed use of APP_BASE_HREF which then made LeadingBaseHrefLocationStrategy defunct
- Restored path redirect from '' to 'apps'
- Fixed most of linting errors and left indentation errors in place as there's
  a know default conflict with prettier/eslint which needs to be fixed later
- We now get links like http://localhost:9393/scdf/dashboard/index.html#/apps
- Hard reload now works
- Generic polish

Author: klopfdreh

ui/package.json

@@ -16,8 +16,8 @@
     "e2e-browserstack-local": "node --max_old_space_size=4096 ./node_modules/@angular/cli/bin/ng e2e --host dataflow.local --protractor-config ./e2e/protractor-browserstack.conf.js --configuration production",
     "doc": "./node_modules/.bin/compodoc -p tsconfig.json -n \"Spring Cloud Data Flow Dashboard Documentation\"",
     "mavenbuild-tests": "node --max_old_space_size=4096 ./node_modules/@angular/cli/bin/ng test --code-coverage true --watch false --browsers ChromeCustom",
-    "mavenbuild-without-tests": "node --max_old_space_size=4096 ./node_modules/@angular/cli/bin/ng build --configuration production --output-path ./../target/classes/public/dashboard --base-href /dashboard/",
-    "mavenbuild": "node --max_old_space_size=4096 ./node_modules/@angular/cli/bin/ng test --code-coverage true --watch false --browsers ChromeHeadless && --max_old_space_size=4096 node ./node_modules/@angular/cli/bin/ng build --configuration production --output-path ./../target/classes/public/dashboard --base-href /dashboard/",
+    "mavenbuild-without-tests": "node --max_old_space_size=4096 ./node_modules/@angular/cli/bin/ng build --configuration production --output-path ./../target/classes/public/dashboard",
+    "mavenbuild": "node --max_old_space_size=4096 ./node_modules/@angular/cli/bin/ng test --code-coverage true --watch false --browsers ChromeHeadless && --max_old_space_size=4096 node ./node_modules/@angular/cli/bin/ng build --configuration production --output-path ./../target/classes/public/dashboard",
     "bundle-report": "ng build --stats-json && webpack-bundle-analyzer dist/stats.json"
   },
   "private": true,

ui/src/app/app-routing.module.ts

@@ -1,6 +1,5 @@
 import {NgModule} from '@angular/core';
 import {Routes, RouterModule} from '@angular/router';
-import {DevGuard} from './shared/support/dev.guard';
 
 const routes: Routes = [
   {

ui/src/app/flo/shared/support/shared-shapes.ts

@@ -1,5 +1,6 @@
 import {dia} from 'jointjs';
 import * as _joint from 'jointjs';
+import {UrlUtilities} from '../../../url-utilities.service';
 
 import {loadShapes} from 'spring-flo';
 
@@ -159,16 +160,30 @@ export function createPaletteGroupHeader(title: string, isOpen: boolean): any {
     '.group-label-bg/class',
     `${group.attr('.group-label-bg/class') || 'group-label-bg'} ${title.replace(' ', '-')}`
   );
-  group.attr('.collapse-handle/xlink:href', isOpen ? 'assets/img/chevron-down.svg' : 'assets/img/chevron-left.svg');
+  group.attr(
+    '.collapse-handle/xlink:href',
+    isOpen
+      ? UrlUtilities.calculateAssetUrl() + 'img/chevron-down.svg'
+      : UrlUtilities.calculateAssetUrl() + 'img/chevron-left.svg'
+  );
   group.attr(
     '.collapse-handle2/xlink:href',
-    isOpen ? 'assets/img/chevron-down-white.svg' : 'assets/img/chevron-left-white.svg'
+    isOpen
+      ? UrlUtilities.calculateAssetUrl() + 'img/chevron-down-white.svg'
+      : UrlUtilities.calculateAssetUrl() + 'img/chevron-left-white.svg'
   );
   group.on('change:isOpen', (cell, newValue) => {
-    group.attr('.collapse-handle/xlink:href', newValue ? 'assets/img/chevron-down.svg' : 'assets/img/chevron-left.svg');
+    group.attr(
+      '.collapse-handle/xlink:href',
+      newValue
+        ? UrlUtilities.calculateAssetUrl() + 'img/chevron-down.svg'
+        : UrlUtilities.calculateAssetUrl() + 'img/chevron-left.svg'
+    );
     group.attr(
       '.collapse-handle2/xlink:href',
-      newValue ? 'assets/img/chevron-down-white.svg' : 'assets/img/chevron-left-white.svg'
+      newValue
+        ? UrlUtilities.calculateAssetUrl() + 'img/chevron-down-white.svg'
+        : UrlUtilities.calculateAssetUrl() + 'img/chevron-left-white.svg'
     );
   });
   return group;

ui/src/app/flo/stream/content-assist.service.ts

@@ -3,6 +3,7 @@ import {HttpClient, HttpParams} from '@angular/common/http';
 import {Observable} from 'rxjs';
 import {map} from 'rxjs/operators';
 import {HttpUtils} from '../../shared/support/http.utils';
+import {UrlUtilities} from '../../url-utilities.service';
 
 @Injectable()
 export class ContentAssistService {
@@ -12,7 +13,7 @@ export class ContentAssistService {
     const headers = HttpUtils.getDefaultHttpHeaders();
     const params = new HttpParams().append('start', prefix).append('defaultLevel', '1');
     return this.httpClient
-      .get<any>('/completions/stream', {headers, params})
+      .get<any>(UrlUtilities.calculateBaseApiUrl() + 'completions/stream', {headers, params})
       .pipe(map(jsonResponse => jsonResponse.proposals));
   }
 }

ui/src/app/flo/stream/node-helper.service.ts

@@ -19,6 +19,7 @@ import {dia} from 'jointjs';
 import {Flo} from 'spring-flo';
 import {Utils as SharedUtils} from '../shared/support/utils';
 import {ApplicationType} from '../../shared/model/app.model';
+import {UrlUtilities} from '../../url-utilities.service';
 
 import * as _joint from 'jointjs';
 const joint: any = _joint;
@@ -30,13 +31,13 @@ const BETWEEN_HANDLE_SPACING = 5;
 
 // Default icons (unicode chars) for each group member, unless they override
 const GROUP_ICONS = new Map<string, string>()
-  .set('app', 'assets/img/app.svg') // U+2338 (Quad equal symbol)
-  .set('source', 'assets/img/source.svg') // 21D2
-  .set('processor', 'assets/img/processor.svg') // 3bb  //flux capacitor? 1D21B
-  .set('sink', 'assets/img/sink.svg') // 21D2
-  .set('task', 'assets/img/unknown.svg') // 2609   ⚙=2699 gear (rubbish)
-  .set('other', 'assets/img/tap.svg') // 2982
-  .set('unresolved', 'assets/img/unknown.svg'); // 2982
+  .set('app', UrlUtilities.calculateAssetUrl() + 'img/app.svg') // U+2338 (Quad equal symbol)
+  .set('source', UrlUtilities.calculateAssetUrl() + 'img/source.svg') // 21D2
+  .set('processor', UrlUtilities.calculateAssetUrl() + 'img/processor.svg') // 3bb  //flux capacitor? 1D21B
+  .set('sink', UrlUtilities.calculateAssetUrl() + 'img/sink.svg') // 21D2
+  .set('task', UrlUtilities.calculateAssetUrl() + 'img/unknown.svg') // 2609   ⚙=2699 gear (rubbish)
+  .set('other', UrlUtilities.calculateAssetUrl() + 'img/tap.svg') // 2982
+  .set('unresolved', UrlUtilities.calculateAssetUrl() + 'img/unknown.svg'); // 2982
 /**
  * Node Helper for Flo based Stream Definition graph editor.
  * Static utility method for creating joint model objects.

ui/src/app/flo/stream/node/stream-node.component.html

@@ -38,7 +38,8 @@
     </svg:g>
     <svg:image
       class="error-marker"
-      xlink:href="assets/img/error.svg"
+      xlink:href=""
+      ng-href="{{ assetUrl }}img/error.svg"
       tippy
       [content]="markerTooltipElement ? markerTooltipElement.nativeElement : ''"
       [tippyOptions]="{appendTo: docBody(), placement: 'top', theme: 'error'}"

ui/src/app/flo/stream/node/stream-node.component.ts

@@ -3,6 +3,7 @@ import {dia} from 'jointjs';
 import {NodeComponent} from '../../shared/support/node-component';
 import {DocService} from '../../shared/service/doc.service';
 import {PropertiesEditor} from '../properties-editor.service';
+import {UrlUtilities} from '../../../url-utilities.service';
 
 /**
  * Component for displaying application properties and capturing their values.
@@ -26,6 +27,8 @@ export class StreamNodeComponent extends NodeComponent {
   @ViewChild('paletteNodeTooltip')
   paletteTooltipElement: ElementRef;
 
+  assetUrl = UrlUtilities.calculateAssetUrl();
+
   constructor(docService: DocService, private propertiesEditor: PropertiesEditor) {
     super(docService);
   }

ui/src/app/flo/stream/support/shapes.ts

@@ -1,4 +1,5 @@
 import * as _joint from 'jointjs';
+import {UrlUtilities} from '../../../url-utilities.service';
 
 const joint: any = _joint;
 
@@ -98,7 +99,7 @@ export function loadStreamShapes(): void {
             refX: 10,
             refY: 0.5,
             refY2: -TYPE_ICON_SIZE.height / 2,
-            'xlink:href': 'assets/img/unknown.svg'
+            'xlink:href': UrlUtilities.calculateAssetUrl() + 'img/unknown.svg'
           },
           '.error-marker': {
             width: ERROR_MARKER_SIZE.width,

ui/src/app/flo/task/content-assist.service.ts

@@ -3,6 +3,7 @@ import {HttpClient, HttpParams} from '@angular/common/http';
 import {Observable} from 'rxjs';
 import {map} from 'rxjs/operators';
 import {HttpUtils} from '../../shared/support/http.utils';
+import {UrlUtilities} from '../../url-utilities.service';
 
 @Injectable()
 export class ContentAssistService {
@@ -12,7 +13,7 @@ export class ContentAssistService {
     const headers = HttpUtils.getDefaultHttpHeaders();
     const params = new HttpParams().append('start', prefix).append('defaultLevel', '1');
     return this.httpClient
-      .get<any>('/completions/task', {headers, params})
+      .get<any>(UrlUtilities.calculateBaseApiUrl() + 'completions/task', {headers, params})
       .pipe(map(jsonResponse => jsonResponse.proposals));
   }
 }

ui/src/app/flo/task/node/task-node.component.html

@@ -14,7 +14,8 @@
     <svg:text class="name-label" />
     <svg:image
       class="error-marker"
-      xlink:href="assets/img/error.svg"
+      xlink:href=""
+      ng-href="{{ assetUrl }}img/error.svg"
       tippy
       [content]="markerTooltipElement ? markerTooltipElement.nativeElement : ''"
       [tippyOptions]="{appendTo: docBody(), placement: 'top', theme: 'error'}"
@@ -40,7 +41,8 @@
     <svg:text class="name-label" />
     <svg:image
       class="error-marker"
-      xlink:href="assets/img/error.svg"
+      xlink:href=""
+      ng-href="{{ assetUrl }}img/error.svg"
       tippy
       [content]="markerTooltipElement ? markerTooltipElement.nativeElement : ''"
       [tippyOptions]="{appendTo: docBody(), placement: 'top', theme: 'error'}"
@@ -103,7 +105,8 @@
   </svg:g>
   <svg:image
     class="error-marker"
-    xlink:href="assets/img/error.svg"
+    xlink:href=""
+    ng-href="{{ assetUrl }}img/error.svg"
     tippy
     [content]="markerTooltipElement ? markerTooltipElement.nativeElement : ''"
     [tippyOptions]="{appendTo: docBody(), placement: 'top', theme: 'error'}"
@@ -154,7 +157,8 @@
   </svg:g>
   <svg:image
     class="error-marker"
-    xlink:href="assets/img/error.svg"
+    xlink:href=""
+    ng-href="{{ assetUrl }}img/error.svg"
     tippy
     [content]="markerTooltipElement ? markerTooltipElement.nativeElement : ''"
     [tippyOptions]="{appendTo: docBody(), placement: 'top', theme: 'error'}"