John Cowen 5996e8fdcd ui: Dev/Test environment configurable metrics (#9345)
In order to test certain setups for our metrics visualizations we need to be able to setup several different `ui_config` settings during development/testing. Generally in the UI, we use the Web Inspector to set various cookie values to configure the UI how we need to see it whilst developing, so this PR:

1. Routes `ui_config` through a dev time only `CONSUL_UI_CONFIG` env variable so we can change it via cookies vars.
2. Adds `CONSUL_METRICS_PROXY_ENABLE`, `CONSUL_METRICS_PROVIDER` and `CONSUL_SERVICE_DASHBOARD_URL` so it's easy to set/unset these only values during development.
3. Adds an acceptance testing step so we can setup `ui_config` to whatever we want during testing.
4. Adds an async 'repository-like' method to the `UiConfig` Service so it feels like a repository - incase we ever need to get this via an HTTP API+blocking query.
5. Vaguely unrelated: we allow cookie values to be set via the location.hash whilst in development only e.g. `/ui/services#CONSUL_METRICS_PROXY_ENABLE=1` so we can link to different setups if we ever need to.

All values added here are empty/falsey by default, so in order to see how it was previously you'll need to set the appropriate cookies values, but you can now also easily preview/test the the metrics viz in different/disabled states (with differing `ui_config`)
2020-12-15 15:36:32 +00:00

80 lines
2.6 KiB
JavaScript

import { inject as service } from '@ember/service';
import RepositoryService from 'consul-ui/services/repository';
// 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('env') env;
@service('client/http') client;
error = null;
init() {
super.init(...arguments);
const uiCfg = this.cfg.get();
// Inject whether or not the proxy is enabled as an option into the opaque
// JSON options the user provided.
const opts = uiCfg.metrics_provider_options || {};
opts.metrics_proxy_enabled = uiCfg.metrics_proxy_enabled;
// Inject a convenience function for dialing through the metrics proxy.
opts.fetch = (path, params) =>
this.client.fetchWithToken(`/v1/internal/ui/metrics-proxy${path}`, params);
// Inject the base app URL
const provider = uiCfg.metrics_provider || 'prometheus';
try {
this.provider = window.consul.getMetricsProvider(provider, opts);
} catch (e) {
this.error = new Error(`metrics provider not initialized: ${e}`);
// Show the user the error once for debugging their provider outside UI
// Dev.
console.error(this.error); // eslint-disable-line no-console
}
}
findServiceSummary(protocol, slug, dc, nspace, configuration = {}) {
if (this.error) {
return Promise.reject(this.error);
}
const promises = [
this.provider.serviceRecentSummarySeries(slug, dc, nspace, protocol, {}),
this.provider.serviceRecentSummaryStats(slug, dc, nspace, protocol, {}),
];
return Promise.all(promises).then(results => {
return {
meta: {
interval: this.env.var('CONSUL_METRICS_POLL_INTERVAL') || 10000,
},
series: results[0],
stats: results[1].stats,
};
});
}
findUpstreamSummary(slug, dc, nspace, configuration = {}) {
if (this.error) {
return Promise.reject(this.error);
}
return this.provider.upstreamRecentSummaryStats(slug, dc, nspace, {}).then(result => {
result.meta = {
interval: this.env.var('CONSUL_METRICS_POLL_INTERVAL') || 10000,
};
return result;
});
}
findDownstreamSummary(slug, dc, nspace, configuration = {}) {
if (this.error) {
return Promise.reject(this.error);
}
return this.provider.downstreamRecentSummaryStats(slug, dc, nspace, {}).then(result => {
result.meta = {
interval: this.env.var('CONSUL_METRICS_POLL_INTERVAL') || 10000,
};
return result;
});
}
}