open-consul/ui/packages/consul-ui/app/components/topology-metrics/index.js
Paul Banks df1eec292f
UI metrics provider dc (#9001)
* Plumb Datacenter and Namespace to metrics provider in preparation for them being usable.

* Move metrics loader/status to a new component and show reason for being disabled.

* Remove stray console.log

* Rebuild AssetFS to resolve conflicts

* Yarn upgrade

* mend
2020-10-26 19:48:23 +00:00

111 lines
3.3 KiB
JavaScript

import Component from '@glimmer/component';
import { tracked } from '@glimmer/tracking';
import { action } from '@ember/object';
import { inject as service } from '@ember/service';
export default class TopologyMetrics extends Component {
@service('ui-config') cfg;
@service('env') env;
// =attributes
@tracked centerDimensions;
@tracked downView;
@tracked downLines = [];
@tracked upView;
@tracked upLines = [];
@tracked hasMetricsProvider = false;
@tracked noMetricsReason = null;
constructor(owner, args) {
super(owner, args);
this.hasMetricsProvider = !!this.cfg.get().metrics_provider;
// Disable metrics fetching if we are not in the local DC since we don't
// currently support that for all providers.
//
// TODO we can make the configurable even before we have a full solution for
// multi-DC forwarding for Prometheus so providers that are global for all
// DCs like an external managed APM can still load in all DCs.
if (this.env.var('CONSUL_DATACENTER_LOCAL') != this.args.dc) {
this.noMetricsReason = 'Unable to fetch metrics for a remote datacenter';
}
}
// =methods
drawDownLines(items) {
const order = ['allow', 'deny'];
const dest = {
x: this.centerDimensions.x,
y: this.centerDimensions.y + this.centerDimensions.height / 2,
};
return items
.map(item => {
const dimensions = item.getBoundingClientRect();
const src = {
x: dimensions.x + dimensions.width,
y: dimensions.y + dimensions.height / 2,
};
return {
id: item.id,
permission: item.getAttribute('data-permission'),
dest: dest,
src: src,
};
})
.sort((a, b) => {
return order.indexOf(a.permission) - order.indexOf(b.permission);
});
}
drawUpLines(items) {
const order = ['allow', 'deny'];
const src = {
x: this.centerDimensions.x + 20,
y: this.centerDimensions.y + this.centerDimensions.height / 2,
};
return items
.map(item => {
const dimensions = item.getBoundingClientRect();
const dest = {
x: dimensions.x - dimensions.width - 26,
y: dimensions.y + dimensions.height / 2,
};
return {
id: item.id,
permission: item.getAttribute('data-permission'),
dest: dest,
src: src,
};
})
.sort((a, b) => {
return order.indexOf(a.permission) - order.indexOf(b.permission);
});
}
// =actions
@action
calculate() {
// Calculate viewBox dimensions
this.downView = document.querySelector('#downstream-lines').getBoundingClientRect();
this.upView = document.querySelector('#upstream-lines').getBoundingClientRect();
// Get Card elements positions
const downCards = [...document.querySelectorAll('#downstream-container .card')];
const grafanaCard = document.querySelector('.metrics-header');
const upCards = [...document.querySelectorAll('#upstream-column .card')];
// Set center positioning points
this.centerDimensions = grafanaCard.getBoundingClientRect();
// Set Downstream Cards Positioning points
this.downLines = this.drawDownLines(downCards);
// Set Upstream Cards Positioning points
this.upLines = this.drawUpLines(upCards);
}
}