Paul Banks 27048a0612
Add metrics rendering to the new topology view. (#8858)
* Remove unused StatsCard component

* Create Card and Stats contextual components with styling

* Send endpoint, item, and protocol to Stats as props

* WIP basic plumbing for metrics in Ember

* WIP metrics data source now works for different protocols and produces reasonable mock responses

* WIP sparkline component

* Mostly working metrics and graphs in topology

* Fix date in tooltip to actually be correct

* Clean up console.log

* Add loading frame and create a style sheet for Stats

* Various polish fixes:

 - Loading state for graph
 - Added fake latency cookie value to test loading
 - If metrics provider has no series/stats for the service show something that doesn't look broken
 - Graph hover works right to the edge now
 - Stats boxes now wrap so they are either shown or not as will fit not cut off
 - Graph resizes when browser window size changes
 - Some tweaks to number formats and stat metrics to make them more compact/useful

* Thread Protocol through topology model correctly

* Rebuild assetfs

* Fix failing tests and remove stats-card now it's changed and become different

* Fix merge conflict

* Update api doublt

* more merge fixes

* Add data-permission and id attr to Card

* Run JS linter

* Move things around so the tests run with everything available

* Get tests passing:

1. Remove fakeLatency setTimeout (will be replaced with CONSUL_LATENCY
in mocks)
2. Make sure any event handlers are removed

* Make sure the Consul/scripts are available before the app

* Make sure interval gets set if there is no cookie value

* Upgrade mocks so we can use CONSUL_LATENCY

* Fix handling of no series values from Prometheus

* Update assetfs and fix a comment

* Rebase and rebuild assetfs; fix tcp metric series units to be bits not bytes

* Rebuild assetfs

* Hide stats when provider is not configured

Co-authored-by: kenia <keniavalladarez@gmail.com>
Co-authored-by: John Cowen <jcowen@hashicorp.com>
2020-10-09 21:31:15 +01:00

52 lines
1.4 KiB
JavaScript

(
function(global) {
// Current interface is these three methods.
const requiredMethods = [
'init',
'serviceRecentSummarySeries',
'serviceRecentSummaryStats',
'upstreamRecentSummaryStats',
'downstreamRecentSummaryStats',
];
// This is a bit gross but we want to support simple extensibility by
// including JS in the browser without forcing operators to setup a whole
// transpiling stack. So for now we use a window global as a thin registry for
// these providers.
class Consul {
constructor() {
this.registry = {};
this.providers = {};
}
registerMetricsProvider(name, provider) {
// Basic check that it matches the type we expect
for (var m of requiredMethods) {
if (typeof provider[m] !== 'function') {
throw new Error(`Can't register metrics provider '${name}': missing ${m} method.`);
}
}
this.registry[name] = provider;
}
getMetricsProvider(name, options) {
if (!(name in this.registry)) {
throw new Error(`Metrics Provider '${name}' is not registered.`);
}
if (name in this.providers) {
return this.providers[name];
}
this.providers[name] = Object.create(this.registry[name]);
this.providers[name].init(options);
return this.providers[name];
}
}
global.consul = new Consul();
}
)(window);