open-consul/ui/packages/consul-ui/app/components/topology-metrics/index.js

198 lines
5.4 KiB
JavaScript
Raw Normal View History

import Component from '@glimmer/component';
import { tracked } from '@glimmer/tracking';
import { action, get } from '@ember/object';
import { inject as service } from '@ember/service';
export default class TopologyMetrics extends Component {
@service('env') env;
// =attributes
@tracked centerDimensions;
@tracked downView;
@tracked downLines = [];
@tracked upView;
@tracked upLines = [];
@tracked noMetricsReason;
// =methods
drawDownLines(items) {
const order = ['allow', 'deny'];
const dest = {
x: this.centerDimensions.x - 7,
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 + 5.5,
y: this.centerDimensions.y + this.centerDimensions.height / 2,
};
return items
.map(item => {
const dimensions = item.getBoundingClientRect();
const dest = {
x: dimensions.x - dimensions.width - 25,
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);
});
}
emptyColumn() {
const noDependencies = get(this.args.topology, 'noDependencies');
return !this.env.var('CONSUL_ACLS_ENABLED') || noDependencies;
}
get downstreams() {
const downstreams = get(this.args.topology, 'Downstreams') || [];
const items = [...downstreams];
const noDependencies = get(this.args.topology, 'noDependencies');
if (!this.env.var('CONSUL_ACLS_ENABLED') && noDependencies) {
items.push({
Name: 'Downstreams unknown.',
Empty: true,
Datacenter: '',
Namespace: '',
});
} else if (downstreams.length === 0) {
items.push({
Name: 'No downstreams.',
Datacenter: '',
Namespace: '',
});
}
return items;
}
get upstreams() {
const upstreams = get(this.args.topology, 'Upstreams') || [];
const items = [...upstreams];
const defaultACLPolicy = get(this.args.dc, 'DefaultACLPolicy');
const wildcardIntention = get(this.args.topology, 'wildcardIntention');
const noDependencies = get(this.args.topology, 'noDependencies');
if (!this.env.var('CONSUL_ACLS_ENABLED') && noDependencies) {
items.push({
Name: 'Upstreams unknown.',
Datacenter: '',
Namespace: '',
});
} else if (defaultACLPolicy === 'allow' || wildcardIntention) {
items.push({
2021-04-14 22:52:41 +00:00
Name: '* (All Services)',
Datacenter: '',
Namespace: '',
});
} else if (upstreams.length === 0) {
items.push({
Name: 'No upstreams.',
Datacenter: '',
Namespace: '',
});
}
return items;
}
get mainNotIngressService() {
const kind = get(this.args.service.Service, 'Kind') || '';
return kind !== 'ingress-gateway';
}
// =actions
@action
setHeight(el, item) {
if (el) {
const container = el.getBoundingClientRect();
document.getElementById(`${item[0]}`).setAttribute('style', `height:${container.height}px`);
}
this.calculate();
}
@action
calculate() {
if (this.args.isRemoteDC) {
this.noMetricsReason = 'remote-dc';
} else if (this.args.service.Service.Kind === 'ingress-gateway') {
this.noMetricsReason = 'ingress-gateway';
} else {
this.noMetricsReason = null;
}
// Calculate viewBox dimensions
const downstreamLines = document.getElementById('downstream-lines').getBoundingClientRect();
const upstreamLines = document.getElementById('upstream-lines').getBoundingClientRect();
const upstreamColumn = document.getElementById('upstream-column');
if (this.emptyColumn) {
this.downView = {
x: downstreamLines.x,
y: downstreamLines.y,
width: downstreamLines.width,
height: downstreamLines.height + 10,
};
} else {
this.downView = downstreamLines;
}
if (upstreamColumn) {
this.upView = {
x: upstreamLines.x,
y: upstreamLines.y,
width: upstreamLines.width,
height: upstreamColumn.getBoundingClientRect().height + 10,
};
}
// Get Card elements positions
const downCards = [
...document.querySelectorAll('#downstream-container .topology-metrics-card'),
];
const grafanaCard = document.querySelector('.metrics-header');
const upCards = [...document.querySelectorAll('#upstream-column .topology-metrics-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);
}
}