ui: Add a way to reliably figure out where the UI is running (#7722)

* ui: Add a way to reliably figure out where the UI is running

The main javascript that we use is at </where/the/ui/is>/ui/assets/consul-ui.js

This uses this fact to provide and base path 'environment' variable to
be used within the app. This is also overwritable via various methods
(testing/development) if we ever need to do that.

* Remove BASE_API_URL, the logic here isn't exactly correct

Right now the API always _has_ to be at http://domain/v1/ i.e. the root
of your domain /v1. If the URL of the ui is set differently to
http://root.com/somewhere/else/ui/ then the API is still at http://root.com/v1

There is definitely a plan to add this env var back in at some stage so
we can potentially allow this to be configured in other ways, but there
isn't a need to do it just yet so we don't need to worry about _how_ to do
this right now.

ui-v2/app/utils/get-environment.js

@@ -21,15 +21,23 @@ export default function(config = {}, win = window, doc = document) {
     }
   };
   const scripts = doc.getElementsByTagName('script');
+  // we use the currently executing script as a reference
+  // to figure out where we are for other things such as
+  // base url, api url etc
   const currentSrc = scripts[scripts.length - 1].src;
   let resource;
-
-  // TODO: Look to see if we can pull in HTTP headers here
-  // so we can let things be controlled via HTTP proxies, for example
-  // turning off blocking queries if its a busy cluster etc
+  // TODO: Potentially use ui_config {}, for example
+  // turning off blocking queries if its a busy cluster
+  // forcing/providing amount of possible HTTP connections
+  // re-setting the base url for the API etc
   const operator = function(str, env) {
     let protocol;
     switch (str) {
+      case 'CONSUL_BASE_UI_URL':
+        return currentSrc
+          .split('/')
+          .slice(0, -2)
+          .join('/');
       case 'CONSUL_HTTP_PROTOCOL':
         if (typeof resource === 'undefined') {
           // resource needs to be retrieved lazily as entries aren't guaranteed
@@ -99,6 +107,7 @@ export default function(config = {}, win = window, doc = document) {
         // these are strings
         return user(str) || ui(str);
 
+      case 'CONSUL_BASE_UI_URL':
       case 'CONSUL_HTTP_PROTOCOL':
       case 'CONSUL_HTTP_MAX_CONNECTIONS':
         // We allow the operator to set these ones via various methods

ui-v2/tests/unit/utils/get-environment-test.js

@@ -9,12 +9,14 @@ const getEntriesByType = function(type) {
     },
   ];
 };
-const getElementsByTagName = function(name) {
-  return [
-    {
-      src: '',
-    },
-  ];
+const makeGetElementsByTagName = function(src) {
+  return function(name) {
+    return [
+      {
+        src: src,
+      },
+    ];
+  };
 };
 const win = {
   performance: {
@@ -26,7 +28,7 @@ const win = {
 };
 const doc = {
   cookie: '',
-  getElementsByTagName: getElementsByTagName,
+  getElementsByTagName: makeGetElementsByTagName(''),
 };
 module('Unit | Utility | getEnvironment', function() {
   test('it returns a function', function(assert) {
@@ -46,6 +48,26 @@ module('Unit | Utility | getEnvironment', function() {
     const env = getEnvironment(config, win, doc);
     assert.equal(env('CONSUL_HTTP_PROTOCOL'), 'hq');
   });
+  test('it returns the correct URL for the root of the UI', function(assert) {
+    let config = {
+      environment: 'production',
+    };
+    let expected = 'http://localhost/ui';
+    let doc = {
+      cookie: '',
+      getElementsByTagName: makeGetElementsByTagName(`${expected}/assets/consul-ui.js`),
+    };
+    let env = getEnvironment(config, win, doc);
+    assert.equal(env('CONSUL_BASE_UI_URL'), expected);
+    expected = 'http://localhost/somewhere/else';
+    doc = {
+      cookie: '',
+      getElementsByTagName: makeGetElementsByTagName(`${expected}/assets/consul-ui.js`),
+    };
+    env = getEnvironment(config, win, doc);
+    assert.equal(env('CONSUL_BASE_UI_URL'), expected);
+  });
+
   test('it returns the correct max connections depending on protocol', function(assert) {
     let config = {
       CONSUL_HTTP_PROTOCOL: 'hq',
@@ -113,7 +135,7 @@ module('Unit | Utility | getEnvironment', function() {
     };
     let doc = {
       cookie: 'CONSUL_NSPACES_ENABLE=1',
-      getElementsByTagName: getElementsByTagName,
+      getElementsByTagName: makeGetElementsByTagName(''),
     };
     let env = getEnvironment(config, win, doc);
     assert.ok(env('CONSUL_NSPACES_ENABLED'));
@@ -123,7 +145,7 @@ module('Unit | Utility | getEnvironment', function() {
     };
     doc = {
       cookie: 'CONSUL_NSPACES_ENABLE=0',
-      getElementsByTagName: getElementsByTagName,
+      getElementsByTagName: makeGetElementsByTagName(''),
     };
     env = getEnvironment(config, win, doc);
     assert.notOk(env('CONSUL_NSPACES_ENABLED'));
@@ -147,7 +169,7 @@ module('Unit | Utility | getEnvironment', function() {
     };
     let doc = {
       cookie: 'CONSUL_NSPACES_ENABLE=1',
-      getElementsByTagName: getElementsByTagName,
+      getElementsByTagName: makeGetElementsByTagName(''),
     };
     let env = getEnvironment(config, win, doc);
     assert.notOk(env('CONSUL_NSPACES_ENABLED'));
@@ -157,7 +179,7 @@ module('Unit | Utility | getEnvironment', function() {
     };
     doc = {
       cookie: 'CONSUL_NSPACES_ENABLE=0',
-      getElementsByTagName: getElementsByTagName,
+      getElementsByTagName: makeGetElementsByTagName(''),
     };
     env = getEnvironment(config, win, doc);
     assert.ok(env('CONSUL_NSPACES_ENABLED'));