Consolidate navigation functions

We had getBaseHref and getBaseHrefFromPath in two places, but also it
looked like they needed to do exactly the same thing.

We need getApiBaseHref to be a function so we can all it in the app.module
provider. We also want it to return a path, not a URL. (Ignore the
'href' in the name)

We need to be able to get the base URL to use for API calls - and we
need, for now, while we have links being made outside of angular, to be
able to get something similar to getApiBaseHref but that returns a url
and not a path.

Change-Id: I7457a7b160a312ea3eec74b8a4f3380a1f95d8e1

web/app.module.ts

@@ -24,7 +24,7 @@ import { FormsModule } from '@angular/forms'
 
 import { AppRoutingModule } from './app-routing.module'
 import { AppComponent } from './app.component'
-import { getBaseHref } from './util'
+import { getAppBaseHref } from './zuul/zuul.service'
 
 import BuildsComponent from './builds/builds.component'
 import NavigationComponent from './navigation/navigation.component'
@@ -61,7 +61,7 @@ import ZuulService from './zuul/zuul.service'
   ],
   providers: [
     ZuulService,
-    {provide: APP_BASE_HREF, useValue: getBaseHref()}
+    {provide: APP_BASE_HREF, useValue: getAppBaseHref()}
   ],
   bootstrap: [
     AppComponent

web/navigation/navigation.component.html

@@ -16,7 +16,7 @@ under the License.
 <nav class="navbar navbar-default">
   <div class="container-fluid">
     <div class="navbar-header">
-      <a class="navbar-brand" [routerLink]="zuul.getBaseHref()" target="_self">Zuul Dashboard</a>
+      <a class="navbar-brand" [routerLink]="zuul.appBaseHref" target="_self">Zuul Dashboard</a>
     </div>
     <ul class="nav navbar-nav" *ngIf="showNavbar">
       <li routerLinkActive="active" *ngFor="let route of navbarRoutes">

web/status/jquery.zuul.js

@@ -46,7 +46,7 @@ import LineTImage from '../images/line-t.png';
     return defaultValue
   }
 
-  $.zuul = function (options) {
+  $.zuul = function (options, zuulService) {
     options = $.extend({
       'enabled': true,
       'graphite_url': '',
@@ -414,7 +414,7 @@ import LineTImage from '../images/line-t.png';
         }
 
         let $icon = $('<img />')
-          .attr('src', iconFile)
+          .attr('src', zuulService.appBaseHref + iconFile)
           .attr('title', iconTitle)
           .css('display', 'block')
 

web/status/zuulStart.js

@@ -53,7 +53,7 @@ function zuulStart ($, tenant, zuulService) {
     params['source'] = zuulService.getSourceUrl('status', tenant)
   }
 
-  let zuul = $.zuul(params)
+  let zuul = $.zuul(params, zuulService)
 
   zuul.jq.on('update-start', function () {
     $container.addClass('zuul-container-loading')

web/util.ts

@@ -1,31 +0,0 @@
-// Copyright 2017 Red Hat
-//
-// Licensed under the Apache License, Version 2.0 (the "License"); you may
-// not use this file except in compliance with the License. You may obtain
-// a copy of the License at
-//
-//      http://www.apache.org/licenses/LICENSE-2.0
-//
-// Unless required by applicable law or agreed to in writing, software
-// distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
-// WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
-// License for the specific language governing permissions and limitations
-// under the License.
-
-declare var ZUUL_BASE_HREF: string
-
-export function getBaseHrefFromPath (path: string) {
-  if (path.includes('/t/')) {
-    return path.slice(0, path.lastIndexOf('/t/') + 1)
-  } else {
-    return path.split('/').slice(0, -1).join('/') + '/'
-  }
-}
-
-export function getBaseHref (): string {
-  if (typeof ZUUL_BASE_HREF !== 'undefined') {
-    return ZUUL_BASE_HREF
-  } else {
-    return getBaseHrefFromPath(window.location.pathname)
-  }
-}

web/zuul/zuul.service.ts

@@ -15,66 +15,79 @@
 import { Injectable } from '@angular/core'
 import { ActivatedRoute } from '@angular/router'
 
-import { getBaseHrefFromPath } from '../util'
 import * as url from 'url'
 
 declare var ZUUL_API_URL: string
 declare var ZUUL_BASE_HREF: string
 
+function getAppBaseHrefFromPath () {
+  const path = window.location.pathname
+  if (path.includes('/t/')) {
+    return path.slice(0, path.lastIndexOf('/t/') + 1)
+  } else {
+    return path.split('/').slice(0, -1).join('/') || '/'
+  }
+}
+
+export function getAppBaseHref (): string {
+  /*
+   * Return a value suitable for use in
+   * https://angular.io/api/common/APP_BASE_HREF
+   */
+  let path
+  if (typeof ZUUL_BASE_HREF !== 'undefined') {
+    path = ZUUL_BASE_HREF
+  } else {
+    // Use window.location.pathname because we're looking for a path
+    // prefix, not a URL.
+    path = getAppBaseHrefFromPath()
+  }
+  if (! path.endsWith('/')) {
+    path = path + '/'
+  }
+  return path
+}
+
+
 @Injectable()
 class ZuulService {
-  private baseHref: string
+  public baseApiUrl: string
+  public appBaseHref: string
 
   constructor() {
+    this.baseApiUrl = this.getBaseApiUrl()
+    this.appBaseHref = getAppBaseHref()
+  }
+
+  getBaseApiUrl (): string {
+    let path
     if (typeof ZUUL_API_URL !== 'undefined') {
-      this.baseHref = ZUUL_API_URL
+      path = ZUUL_API_URL
     } else {
-      this.baseHref = getBaseHrefFromPath(window.location.href)
+      path = url.resolve(window.location.href, getAppBaseHrefFromPath())
     }
-    if (this.baseHref.endsWith('/')) {
-      this.baseHref = this.baseHref.slice(0, 1)
+    if (! path.endsWith('/')) {
+      path = path + '/'
     }
+    return path
   }
 
   getSourceUrl (filename: string, tenant?: string): string {
     if (tenant) {
       // Multi-tenant deploy. This is at t/a-tenant/x.html
-      return `${this.baseHref}/api/tenant/${tenant}/${filename}`
+      return url.resolve(this.baseApiUrl, `api/tenant/${tenant}/${filename}`)
     } else {
       // Whitelabel deploy or tenants list, such as /status.html,
       // /tenants.html or /zuul/status.html or /zuul/tenants.html
-      return `${this.baseHref}/api/${filename}`
+      return url.resolve(this.baseApiUrl, `api/${filename}`)
     }
   }
 
   getWebsocketUrl (filename: string, tenant?: string): string {
-    let apiBase: string
-    if (typeof ZUUL_API_URL !== 'undefined') {
-      apiBase = ZUUL_API_URL
-    } else {
-      apiBase = window.location.href
-    }
-
-    return url
-      .resolve(apiBase, this.getSourceUrl(filename, tenant))
+    return this.getSourceUrl(filename, tenant)
       .replace(/(http)(s)?\:\/\//, 'ws$2://')
   }
 
-  getBaseHrefFromPath (path: string) {
-    if (path.includes('/t/')) {
-      return path.slice(0, path.lastIndexOf('/t/') + 1)
-    } else {
-      return path.split('/').slice(0, -1).join('/') + '/'
-    }
-  }
-
-  getBaseHref (): string {
-    if (typeof ZUUL_BASE_HREF !== 'undefined') {
-      return ZUUL_BASE_HREF
-    } else {
-      return this.getBaseHrefFromPath(window.location.pathname)
-    }
-  }
 }
 
 export default ZuulService