139 lines
3.9 KiB
JavaScript
139 lines
3.9 KiB
JavaScript
import Component from '@glimmer/component';
|
|
import { tracked } from '@glimmer/tracking';
|
|
import { action, get } from '@ember/object';
|
|
|
|
export default class TopologyMetrics extends Component {
|
|
// =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);
|
|
});
|
|
}
|
|
|
|
get upstreams() {
|
|
const upstreams = get(this.args.topology, 'Upstreams') || [];
|
|
const items = [...upstreams];
|
|
const defaultAllow = get(this.args.topology, 'DefaultAllow');
|
|
const wildcardIntention = get(this.args.topology, 'WildcardIntention');
|
|
if (defaultAllow || wildcardIntention) {
|
|
items.push({
|
|
Name: '* (All Services)',
|
|
Datacenter: '',
|
|
Namespace: '',
|
|
Intention: {
|
|
Allowed: true,
|
|
},
|
|
});
|
|
}
|
|
return items;
|
|
}
|
|
|
|
// =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 = 'Unable to fetch metrics for a remote datacenter';
|
|
} else if (this.args.service.Service.Kind === 'ingress-gateway') {
|
|
this.noMetricsReason = 'Unable to fetch metrics for a ingress gateway';
|
|
} else {
|
|
this.noMetricsReason = null;
|
|
}
|
|
|
|
// Calculate viewBox dimensions
|
|
this.downView = document.getElementById('downstream-lines').getBoundingClientRect();
|
|
const upstreamLines = document.getElementById('upstream-lines').getBoundingClientRect();
|
|
const upstreamColumn = document.getElementById('upstream-column');
|
|
|
|
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);
|
|
}
|
|
}
|