From c06f1b6200cb31f81668bfc7e1c01d6eebc69503 Mon Sep 17 00:00:00 2001
From: Joe Farro <tiffon@users.noreply.github.com>
Date: Wed, 21 Mar 2018 16:01:07 -0400
Subject: [PATCH] Use <base> and config webpack at runtime to allow path prefix
 (#198)

* Fix #42 use <base> and config webpack at runtime

Signed-off-by: Joe Farro <joef@uber.com>

* Discourage manually editing the base URL

Signed-off-by: Joe Farro <joef@uber.com>

Signed-off-by: vvvprabhakar <vvvprabhakar@gmail.com>
---
 ...es.less => config-overrides-antd-vars.less |  0
 config-overrides.js                           |  2 +-
 package.json                                  |  2 +-
 public/index.html                             |  3 ++
 src/api/jaeger.js                             | 18 --------
 src/index.js                                  |  5 +++
 src/site-prefix.js                            | 29 +++++++++++++
 src/utils/prefix-url.js                       | 41 ++++++-------------
 src/utils/prefix-url.test.js                  | 39 ++++++------------
 9 files changed, 64 insertions(+), 75 deletions(-)
 rename config-overrides-ant-variables.less => config-overrides-antd-vars.less (100%)
 create mode 100644 src/site-prefix.js

diff --git a/config-overrides-ant-variables.less b/config-overrides-antd-vars.less
similarity index 100%
rename from config-overrides-ant-variables.less
rename to config-overrides-antd-vars.less
diff --git a/config-overrides.js b/config-overrides.js
index 0fb6e9a6af..972a70845b 100644
--- a/config-overrides.js
+++ b/config-overrides.js
@@ -20,7 +20,7 @@ const rewireLess = require('react-app-rewire-less');
 const lessToJs = require('less-vars-to-js');
 
 // Read the less file in as string
-const loadedVarOverrides = fs.readFileSync('config-overrides-ant-variables.less', 'utf8');
+const loadedVarOverrides = fs.readFileSync('config-overrides-antd-vars.less', 'utf8');
 
 // Pass in file contents
 const modifyVars = lessToJs(loadedVarOverrides);
diff --git a/package.json b/package.json
index b3fa8cfcc4..80c41931ad 100644
--- a/package.json
+++ b/package.json
@@ -13,7 +13,7 @@
       "xfwd": true
     }
   },
-  "homepage": null,
+  "homepage": ".",
   "devDependencies": {
     "babel-eslint": "^7.2.3",
     "babel-plugin-import": "^1.6.3",
diff --git a/public/index.html b/public/index.html
index c55b9c64bf..3ab242facd 100644
--- a/public/index.html
+++ b/public/index.html
@@ -9,6 +9,9 @@
     <meta http-equiv="expires" content="0" />
     <meta http-equiv="expires" content="Tue, 01 Jan 1980 1:00:00 GMT" />
     <meta http-equiv="pragma" content="no-cache" />
+
+    <!-- NOTE: The document MUST have a <base> element. package.json#homepage is set to "." as part of resolving https://github.com/jaegertracing/jaeger-ui/issues/42 and therefore static assets are linked via relative URLs. This will break on many document URLs, e.g. /trace/abc, unless a valid base URL is provided. The base href defaults to "/" but the query-service can inject an override. -->
+    <base href="/" data-inject-target="BASE_URL" />
     <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">
     <title>Jaeger UI</title>
     <script>
diff --git a/src/api/jaeger.js b/src/api/jaeger.js
index abff80afac..dfb73e5c65 100644
--- a/src/api/jaeger.js
+++ b/src/api/jaeger.js
@@ -92,22 +92,4 @@ const JaegerAPI = {
   },
 };
 
-/* istanbul ignore next */
-function getMock(fnName, ...rest) {
-  return new Promise(resolve => {
-    require.ensure(['../demo/jaeger-mock'], require => {
-      resolve(require('../demo/jaeger-mock').default[fnName](...rest));
-    });
-  });
-}
-
-/* istanbul ignore if */
-if (process.env.REACT_APP_DEMO === 'true') {
-  Object.keys(JaegerAPI).forEach(key => {
-    if (typeof JaegerAPI[key] === 'function') {
-      JaegerAPI[key] = (...args) => getMock(key, ...args);
-    }
-  });
-}
-
 export default JaegerAPI;
diff --git a/src/index.js b/src/index.js
index c0d45b58a4..6b91e0109f 100644
--- a/src/index.js
+++ b/src/index.js
@@ -12,6 +12,11 @@
 // See the License for the specific language governing permissions and
 // limitations under the License.
 
+// site-prefix.js must be the first import of the main webpack entrypoint
+// becaue it configures the webpack publicPath.
+/* eslint-disable import/first */
+import './site-prefix';
+
 import React from 'react';
 import ReactDOM from 'react-dom';
 import { document } from 'global';
diff --git a/src/site-prefix.js b/src/site-prefix.js
new file mode 100644
index 0000000000..924369e90d
--- /dev/null
+++ b/src/site-prefix.js
@@ -0,0 +1,29 @@
+// Copyright (c) 2018 Uber Technologies, Inc.
+//
+// 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.
+
+// Per the resolution of https://github.com/jaegertracing/jaeger-ui/issues/42,
+// package.json#homepage is set to "." and the document MUST have a <base>
+// element to define a usable base URL.
+const baseNode = document.querySelector('base');
+if (!baseNode && process.env.NODE_ENV !== 'test') {
+  throw new Error('<base> element not found');
+}
+const sitePrefix = baseNode ? baseNode.href : `${global.location.origin}/`;
+
+// Configure the webpack publicPath to match the <base>:
+// https://webpack.js.org/guides/public-path/#on-the-fly
+// eslint-disable-next-line camelcase
+window.__webpack_public_path__ = sitePrefix;
+
+export default sitePrefix;
diff --git a/src/utils/prefix-url.js b/src/utils/prefix-url.js
index 7882e12592..3c6414ff7e 100644
--- a/src/utils/prefix-url.js
+++ b/src/utils/prefix-url.js
@@ -12,44 +12,29 @@
 // See the License for the specific language governing permissions and
 // limitations under the License.
 
-import { homepage } from '../../package.json';
-
-// strip the domain, first slash and trailing slash (if present)
-const rx = new RegExp('^(?:https?://[^/]+)?/?(.*?)/?$', 'i');
-let prefix = '';
+import sitePrefix from '../site-prefix';
 
+const origin = process.env.NODE_ENV === 'test' ? global.location.origin : window.location.origin;
 /**
- * Generate the URL prefix from `value` and use it for all subsequent calls to
- * `prefixUrl()`. All of the following `value` parameters result in the prefix
- * `"/some/prefix"` (although, the first is the preferred form).
- *
- * - `"/some/prefix"`
- * - `"some/prefix"`
- * - `"/some/prefix/"`
- * - `"http://my.example.com/some/prefix"`
- * - `"https://my.example.com/some/prefix/"`
- *
- * Note: This function has a side effect of setting the default URL prefix
- * applied via the file's default explort.
+ * Generate the URL prefix from `sitePrefix` and use it for all subsequent calls
+ * to `prefixUrl()`. `sitePrefix` should be an absolute URL, e.g. with an origin.
+ * `pathPrefix` is just the path portion and should not have a trailing slash:
  *
- * @param {?string} value The value to derive the URL prefix from.
- * @return {string} The resultant prefix.
+ * - `"http://localhost:3000/"` to `""`
+ * - `"http://localhost:3000/abc/"` to `"/abc"`
+ * - `"http://localhost:3000/abc/def/"` to `"/abc/def"`
  */
-export function deriveAndSetPrefix(value) {
-  prefix = value ? value.replace(rx, '/$1') : '';
-  return prefix;
-}
-
-deriveAndSetPrefix(homepage);
+const rx = new RegExp(`^${origin}|/$`, 'ig');
+const pathPrefix = sitePrefix.replace(rx, '');
 
 /**
- * Add the URL prefix, derived from `homepage` in `package.json`, to the URL
- * argument. The domain is stripped from `homepage` before being added.
+ * Add the path prefix to the  URL. See [site-prefix.js](../site-prefix.js) and
+ * the `<base>` tag in [index.html](../../public/index.html) for details.
  *
  * @param {string} value The URL to have the prefix added to.
  * @return {string} The resultant URL.
  */
 export default function prefixUrl(value) {
   const s = value == null ? '' : String(value);
-  return prefix + s;
+  return `${pathPrefix}${s}`;
 }
diff --git a/src/utils/prefix-url.test.js b/src/utils/prefix-url.test.js
index 58fe04db0f..f111d90ae2 100644
--- a/src/utils/prefix-url.test.js
+++ b/src/utils/prefix-url.test.js
@@ -12,38 +12,23 @@
 // See the License for the specific language governing permissions and
 // limitations under the License.
 
-import prefixUrl, { deriveAndSetPrefix } from './prefix-url';
+/* eslint-disable import/first */
 
-describe('deriveAndSetPrefix()', () => {
-  const targetPrefix = '/some/prefix';
-  const homepages = [
-    '/some/prefix',
-    'some/prefix',
-    '/some/prefix/',
-    'http://my.example.com/some/prefix',
-    'https://my.example.com/some/prefix/',
-  ];
+jest.mock('../site-prefix', () => `${global.location.origin}/a/site/prefix/`);
 
-  homepages.forEach(s => {
-    it(`parses "${s}" correctly`, () => {
-      expect(deriveAndSetPrefix(s)).toBe(targetPrefix);
-    });
-  });
-});
+import prefixUrl from './prefix-url';
 
-describe('prefixUrl()', () => {
-  beforeAll(() => {
-    deriveAndSetPrefix('/some/prefix');
-  });
+const PATH_PREFIX = '/a/site/prefix';
 
+describe('prefixUrl()', () => {
   const tests = [
-    { source: undefined, target: '/some/prefix' },
-    { source: null, target: '/some/prefix' },
-    { source: '', target: '/some/prefix' },
-    { source: '/', target: '/some/prefix/' },
-    { source: '/a', target: '/some/prefix/a' },
-    { source: '/a/', target: '/some/prefix/a/' },
-    { source: '/a/b', target: '/some/prefix/a/b' },
+    { source: undefined, target: PATH_PREFIX },
+    { source: null, target: PATH_PREFIX },
+    { source: '', target: PATH_PREFIX },
+    { source: '/', target: `${PATH_PREFIX}/` },
+    { source: '/a', target: `${PATH_PREFIX}/a` },
+    { source: '/a/', target: `${PATH_PREFIX}/a/` },
+    { source: '/a/b', target: `${PATH_PREFIX}/a/b` },
   ];
 
   tests.forEach(({ source, target }) => {