99 lines
2.7 KiB
JavaScript
99 lines
2.7 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;
|
|
|
|
// =attributes
|
|
@tracked centerDimensions;
|
|
@tracked downView;
|
|
@tracked downLines = [];
|
|
@tracked upView;
|
|
@tracked upLines = [];
|
|
@tracked hasMetricsProvider = false;
|
|
|
|
constructor(owner, args) {
|
|
super(owner, args);
|
|
this.hasMetricsProvider = !!this.cfg.get().metrics_provider
|
|
}
|
|
|
|
// =methods
|
|
drawDownLines(items) {
|
|
const order = ['allow', 'deny'];
|
|
const dest = {
|
|
x: this.centerDimensions.x,
|
|
y: this.centerDimensions.y + this.centerDimensions.height / 4,
|
|
};
|
|
|
|
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 / 4,
|
|
};
|
|
|
|
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-container');
|
|
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);
|
|
}
|
|
}
|