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

56 lines
1.9 KiB
JavaScript

import RepositoryService from 'consul-ui/services/repository';
import { inject as service } from '@ember/service';
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,
};
export default RepositoryService.extend({
cfg: service('ui-config'),
init: function() {
this._super(...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 the base app URL
const provider = uiCfg.metrics_provider || 'prometheus';
this.provider = window.consul.getMetricsProvider(provider, opts);
},
findServiceSummary: function(protocol, slug, dc, nspace, configuration = {}) {
const promises = [
// TODO: support namespaces in providers
this.provider.serviceRecentSummarySeries(slug, protocol, {}),
this.provider.serviceRecentSummaryStats(slug, protocol, {}),
];
return Promise.all(promises).then(function(results) {
return {
meta: meta,
series: results[0].series,
stats: results[1].stats,
};
});
},
findUpstreamSummary: function(slug, dc, nspace, configuration = {}) {
return this.provider.upstreamRecentSummaryStats(slug, {}).then(function(result) {
result.meta = meta;
return result;
});
},
findDownstreamSummary: function(slug, dc, nspace, configuration = {}) {
return this.provider.downstreamRecentSummaryStats(slug, {}).then(function(result) {
result.meta = meta;
return result;
});
},
});