From 30d7f904250fdb46037afb62f0be1013d7d59f02 Mon Sep 17 00:00:00 2001 From: John Cowen Date: Wed, 29 Apr 2020 09:25:20 +0100 Subject: [PATCH] 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 /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 | 17 +++++-- .../tests/unit/utils/get-environment-test.js | 44 ++++++++++++++----- 2 files changed, 46 insertions(+), 15 deletions(-) diff --git a/ui-v2/app/utils/get-environment.js b/ui-v2/app/utils/get-environment.js index 794c949ca..22bf93c08 100644 --- a/ui-v2/app/utils/get-environment.js +++ b/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 diff --git a/ui-v2/tests/unit/utils/get-environment-test.js b/ui-v2/tests/unit/utils/get-environment-test.js index 738d68af1..94667ded0 100644 --- a/ui-v2/tests/unit/utils/get-environment-test.js +++ b/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'));