diff --git a/ui/packages/consul-ui/app/services/repository/metrics.js b/ui/packages/consul-ui/app/services/repository/metrics.js
index 9f29137d3d..e0138241d8 100644
--- a/ui/packages/consul-ui/app/services/repository/metrics.js
+++ b/ui/packages/consul-ui/app/services/repository/metrics.js
@@ -1,20 +1,13 @@
import { inject as service } from '@ember/service';
import RepositoryService from 'consul-ui/services/repository';
-import { env } from 'consul-ui/env';
-// meta is used by DataSource to configure polling. The interval controls how
-// long between each poll to the metrics provider. TODO - make this configurable
-// in the UI settings.
-const meta = {
- interval: env('CONSUL_METRICS_POLL_INTERVAL') || 10000,
-};
+// CONSUL_METRICS_POLL_INTERVAL controls how long between each poll to the
+// metrics provider
export default class MetricsService extends RepositoryService {
- @service('ui-config')
- cfg;
-
- @service('client/http')
- client;
+ @service('ui-config') cfg;
+ @service('env') env;
+ @service('client/http') client;
error = null;
@@ -49,9 +42,11 @@ export default class MetricsService extends RepositoryService {
this.provider.serviceRecentSummarySeries(slug, dc, nspace, protocol, {}),
this.provider.serviceRecentSummaryStats(slug, dc, nspace, protocol, {}),
];
- return Promise.all(promises).then(function (results) {
+ return Promise.all(promises).then(results => {
return {
- meta: meta,
+ meta: {
+ interval: this.env.var('CONSUL_METRICS_POLL_INTERVAL') || 10000,
+ },
series: results[0],
stats: results[1].stats,
};
@@ -62,8 +57,10 @@ export default class MetricsService extends RepositoryService {
if (this.error) {
return Promise.reject(this.error);
}
- return this.provider.upstreamRecentSummaryStats(slug, dc, nspace, {}).then(function (result) {
- result.meta = meta;
+ return this.provider.upstreamRecentSummaryStats(slug, dc, nspace, {}).then(result => {
+ result.meta = {
+ interval: this.env.var('CONSUL_METRICS_POLL_INTERVAL') || 10000,
+ };
return result;
});
}
@@ -72,8 +69,10 @@ export default class MetricsService extends RepositoryService {
if (this.error) {
return Promise.reject(this.error);
}
- return this.provider.downstreamRecentSummaryStats(slug, dc, nspace, {}).then(function (result) {
- result.meta = meta;
+ return this.provider.downstreamRecentSummaryStats(slug, dc, nspace, {}).then(result => {
+ result.meta = {
+ interval: this.env.var('CONSUL_METRICS_POLL_INTERVAL') || 10000,
+ };
return result;
});
}
diff --git a/ui/packages/consul-ui/app/services/ui-config.js b/ui/packages/consul-ui/app/services/ui-config.js
index cdd6b85937..afef0cfd92 100644
--- a/ui/packages/consul-ui/app/services/ui-config.js
+++ b/ui/packages/consul-ui/app/services/ui-config.js
@@ -1,15 +1,14 @@
-import Service from '@ember/service';
+import Service, { inject as service } from '@ember/service';
+import { get } from '@ember/object';
export default class UiConfigService extends Service {
- config = undefined;
+ @service('env') env;
+
+ async findByPath(path, configuration = {}) {
+ return get(this.get(), path);
+ }
get() {
- if (this.config === undefined) {
- // Load config from our special meta tag for now. Later it might come from
- // an API instead/as well.
- var meta = unescape(document.getElementsByName('consul-ui/ui_config')[0].content);
- this.config = JSON.parse(meta);
- }
- return this.config;
+ return this.env.var('CONSUL_UI_CONFIG');
}
}
diff --git a/ui/packages/consul-ui/app/utils/get-environment.js b/ui/packages/consul-ui/app/utils/get-environment.js
index bfe93a2ea1..0405ecf484 100644
--- a/ui/packages/consul-ui/app/utils/get-environment.js
+++ b/ui/packages/consul-ui/app/utils/get-environment.js
@@ -1,6 +1,26 @@
+import { runInDebug } from '@ember/debug';
+// 'environment' getter
+// there are currently 3 levels of environment variables:
+// 1. Those that can be set by the user by setting localStorage values
+// 2. Those that can be set by the operator either via ui_config, or inferring
+// from other server type properties (protocol)
+// 3. Those that can be set only during development by adding cookie values
+// via the browsers Web Inspector, or via the browsers hash (#COOKIE_NAME=1),
+// which is useful for showing the UI with various settings enabled/disabled
export default function(config = {}, win = window, doc = document) {
- const dev = function() {
- return doc.cookie
+ // look at the hash in the URL and transfer anything after the hash into
+ // cookies to enable linking of the UI with various settings enabled
+ runInDebug(() => {
+ if (
+ typeof win.location !== 'undefined' &&
+ typeof win.location.hash === 'string' &&
+ win.location.hash.length > 0
+ ) {
+ doc.cookie = win.location.hash.substr(1);
+ }
+ });
+ const dev = function(str = doc.cookie) {
+ return str
.split(';')
.filter(item => item !== '')
.map(item => item.trim().split('='));
@@ -20,6 +40,7 @@ export default function(config = {}, win = window, doc = document) {
return {};
}
};
+ const ui_config = JSON.parse(unescape(doc.getElementsByName('consul-ui/ui_config')[0].content));
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
@@ -33,6 +54,21 @@ export default function(config = {}, win = window, doc = document) {
const operator = function(str, env) {
let protocol;
switch (str) {
+ case 'CONSUL_UI_CONFIG':
+ const dashboards = {};
+ const provider = env('CONSUL_METRICS_PROVIDER');
+ const proxy = env('CONSUL_METRICS_PROXY_ENABLED');
+ dashboards.service = env('CONSUL_SERVICE_DASHBOARD_URL');
+ if (provider) {
+ ui_config.metrics_provider = provider;
+ }
+ if (proxy) {
+ ui_config.metrics_proxy_enabled = proxy;
+ }
+ if (dashboards.service) {
+ ui_config.dashboard_url_templates = dashboards;
+ }
+ return ui_config;
case 'CONSUL_BASE_UI_URL':
return currentSrc
.split('/')
@@ -85,6 +121,12 @@ export default function(config = {}, win = window, doc = document) {
case 'CONSUL_SSO_ENABLE':
prev['CONSUL_SSO_ENABLED'] = !!JSON.parse(String(value).toLowerCase());
break;
+ case 'CONSUL_METRICS_PROXY_ENABLE':
+ prev['CONSUL_METRICS_PROXY_ENABLED'] = !!JSON.parse(String(value).toLowerCase());
+ break;
+ case 'CONSUL_UI_CONFIG':
+ prev['CONSUL_UI_CONFIG'] = JSON.parse(value);
+ break;
default:
prev[key] = value;
}
@@ -109,7 +151,10 @@ export default function(config = {}, win = window, doc = document) {
case 'CONSUL_UI_REALTIME_RUNNER':
// these are strings
return user(str) || ui(str);
-
+ case 'CONSUL_UI_CONFIG':
+ case 'CONSUL_METRICS_PROVIDER':
+ case 'CONSUL_METRICS_PROXY_ENABLE':
+ case 'CONSUL_SERVICE_DASHBOARD_URL':
case 'CONSUL_BASE_UI_URL':
case 'CONSUL_HTTP_PROTOCOL':
case 'CONSUL_HTTP_MAX_CONNECTIONS':
diff --git a/ui/packages/consul-ui/lib/startup/templates/head.html.js b/ui/packages/consul-ui/lib/startup/templates/head.html.js
index 35c217e1f1..702b6871b9 100644
--- a/ui/packages/consul-ui/lib/startup/templates/head.html.js
+++ b/ui/packages/consul-ui/lib/startup/templates/head.html.js
@@ -3,15 +3,7 @@ module.exports = ({ appName, environment, rootURL, config }) => `
diff --git a/ui/packages/consul-ui/tests/acceptance/dc/services/show.feature b/ui/packages/consul-ui/tests/acceptance/dc/services/show.feature
index 2b5b0399ee..599475ed7d 100644
--- a/ui/packages/consul-ui/tests/acceptance/dc/services/show.feature
+++ b/ui/packages/consul-ui/tests/acceptance/dc/services/show.feature
@@ -107,10 +107,15 @@ Feature: dc / services / show: Show Service
---
Scenario: Given a dashboard template has been set
Given 1 datacenter model with the value "dc1"
+ And ui_config from yaml
+ ---
+ dashboard_url_templates:
+ service: https://something.com?{{Service.Name}}&{{Datacenter}}
+ ---
When I visit the service page for yaml
---
dc: dc1
service: service-0
---
# The Metrics dashboard should use the Service.Name not the ID
- And I see href on the metricsAnchor like "https://example.com?service-0&dc1"
+ And I see href on the metricsAnchor like "https://something.com?service-0&dc1"
diff --git a/ui/packages/consul-ui/tests/helpers/yadda-annotations.js b/ui/packages/consul-ui/tests/helpers/yadda-annotations.js
index 40056ca05c..e629f8653c 100644
--- a/ui/packages/consul-ui/tests/helpers/yadda-annotations.js
+++ b/ui/packages/consul-ui/tests/helpers/yadda-annotations.js
@@ -9,7 +9,23 @@ import dictionary from '../dictionary';
const getDictionary = dictionary(utils);
const staticClassList = [...document.documentElement.classList];
+const getCookies = () => {
+ return Object.fromEntries(document.cookie.split(';').map(item => item.split('=')));
+};
+const getResetCookies = function() {
+ const start = getCookies();
+ return () => {
+ const startKeys = Object.keys(start);
+ const endKeys = Object.keys(getCookies());
+ const diff = endKeys.filter(key => !startKeys.includes(key));
+ diff.forEach(item => {
+ document.cookie = `${item}= ; expires=${new Date(0)}`;
+ });
+ };
+};
+let resetCookies;
const reset = function() {
+ resetCookies();
window.localStorage.clear();
api.server.reset();
const list = document.documentElement.classList;
@@ -21,6 +37,7 @@ const reset = function() {
});
};
const startup = function() {
+ resetCookies = getResetCookies();
api.server.setCookie('CONSUL_LATENCY', 0);
};
diff --git a/ui/packages/consul-ui/tests/steps/doubles/model.js b/ui/packages/consul-ui/tests/steps/doubles/model.js
index 75a0cb981e..ca9e035c89 100644
--- a/ui/packages/consul-ui/tests/steps/doubles/model.js
+++ b/ui/packages/consul-ui/tests/steps/doubles/model.js
@@ -1,4 +1,4 @@
-export default function(scenario, create) {
+export default function(scenario, create, win = window, doc = document) {
scenario
.given(['an external edit results in $number $model model[s]?'], function(number, model) {
return create(number, model);
@@ -17,7 +17,10 @@ export default function(scenario, create) {
)
.given(['settings from yaml\n$yaml'], function(data) {
return Object.keys(data).forEach(function(key) {
- window.localStorage[key] = JSON.stringify(data[key]);
+ win.localStorage[key] = JSON.stringify(data[key]);
});
+ })
+ .given(['ui_config from yaml\n$yaml'], function(data) {
+ doc.cookie = `CONSUL_UI_CONFIG=${JSON.stringify(data)}`;
});
}
diff --git a/ui/packages/consul-ui/tests/unit/utils/get-environment-test.js b/ui/packages/consul-ui/tests/unit/utils/get-environment-test.js
index 94667ded09..bb91aa38e0 100644
--- a/ui/packages/consul-ui/tests/unit/utils/get-environment-test.js
+++ b/ui/packages/consul-ui/tests/unit/utils/get-environment-test.js
@@ -9,11 +9,12 @@ const getEntriesByType = function(type) {
},
];
};
-const makeGetElementsByTagName = function(src) {
+const makeGetElementsBy = function(str) {
return function(name) {
return [
{
- src: src,
+ src: str,
+ content: str,
},
];
};
@@ -22,13 +23,17 @@ const win = {
performance: {
getEntriesByType: getEntriesByType,
},
+ location: {
+ hash: '',
+ },
localStorage: {
getItem: function(key) {},
},
};
const doc = {
cookie: '',
- getElementsByTagName: makeGetElementsByTagName(''),
+ getElementsByTagName: makeGetElementsBy(''),
+ getElementsByName: makeGetElementsBy('{}'),
};
module('Unit | Utility | getEnvironment', function() {
test('it returns a function', function(assert) {
@@ -55,14 +60,16 @@ module('Unit | Utility | getEnvironment', function() {
let expected = 'http://localhost/ui';
let doc = {
cookie: '',
- getElementsByTagName: makeGetElementsByTagName(`${expected}/assets/consul-ui.js`),
+ getElementsByTagName: makeGetElementsBy(`${expected}/assets/consul-ui.js`),
+ getElementsByName: makeGetElementsBy('{}'),
};
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`),
+ getElementsByTagName: makeGetElementsBy(`${expected}/assets/consul-ui.js`),
+ getElementsByName: makeGetElementsBy('{}'),
};
env = getEnvironment(config, win, doc);
assert.equal(env('CONSUL_BASE_UI_URL'), expected);
@@ -135,7 +142,8 @@ module('Unit | Utility | getEnvironment', function() {
};
let doc = {
cookie: 'CONSUL_NSPACES_ENABLE=1',
- getElementsByTagName: makeGetElementsByTagName(''),
+ getElementsByTagName: makeGetElementsBy(''),
+ getElementsByName: makeGetElementsBy('{}'),
};
let env = getEnvironment(config, win, doc);
assert.ok(env('CONSUL_NSPACES_ENABLED'));
@@ -145,7 +153,8 @@ module('Unit | Utility | getEnvironment', function() {
};
doc = {
cookie: 'CONSUL_NSPACES_ENABLE=0',
- getElementsByTagName: makeGetElementsByTagName(''),
+ getElementsByTagName: makeGetElementsBy(''),
+ getElementsByName: makeGetElementsBy('{}'),
};
env = getEnvironment(config, win, doc);
assert.notOk(env('CONSUL_NSPACES_ENABLED'));
@@ -169,7 +178,8 @@ module('Unit | Utility | getEnvironment', function() {
};
let doc = {
cookie: 'CONSUL_NSPACES_ENABLE=1',
- getElementsByTagName: makeGetElementsByTagName(''),
+ getElementsByTagName: makeGetElementsBy(''),
+ getElementsByName: makeGetElementsBy('{}'),
};
let env = getEnvironment(config, win, doc);
assert.notOk(env('CONSUL_NSPACES_ENABLED'));
@@ -179,7 +189,8 @@ module('Unit | Utility | getEnvironment', function() {
};
doc = {
cookie: 'CONSUL_NSPACES_ENABLE=0',
- getElementsByTagName: makeGetElementsByTagName(''),
+ getElementsByTagName: makeGetElementsBy(''),
+ getElementsByName: makeGetElementsBy('{}'),
};
env = getEnvironment(config, win, doc);
assert.ok(env('CONSUL_NSPACES_ENABLED'));