luxolus
/
open-consul
2
0
Fork 0
Code Issues 1 Pull Requests Packages Releases Wiki Activity

ui: Use ember-on-resize-modifier to fix bug with sidebar (#9761) 

* Use ember-on-resize-modifier to fix bug with sidebar

* Fix recursive height by dynamically setting fixed height

* Refactor
This commit is contained in:
Kenia 2021-02-17 13:51:48 -05:00 committed by GitHub
parent 1cf6a435dc
commit 836527646e
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
5 changed files with 23 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
ui/packages/consul-ui/app/components/topology-metrics/down-lines/index.hbs
View File

@ -1,5 +1,3 @@
{{on-window 'resize' (action this.getIconPositions)}}
{{#if (gt @lines.length 0)}}
<svg
{{did-insert this.getIconPositions}}

17
ui/packages/consul-ui/app/components/topology-metrics/index.hbs
View File

@ -1,12 +1,13 @@
{{on-window 'resize' (action this.calculate)}}
<div
{{did-insert (action this.calculate)}}
{{did-update (action this.calculate) @topology.Upstreams @topology.Downstreams}}
{{on-resize this.calculate}}
class="topology-container consul-topology-metrics"
>
{{#if (gt @topology.Downstreams.length 0)}}
<div id="downstream-container">
<div
id="downstream-container"
{{did-insert this.setHeight 'downstream-lines'}}
{{did-update this.setHeight 'downstream-lines' @topology.Downstreams}}
>
<div>
<p>{{@dc}}</p>
<span>
@ -83,7 +84,11 @@
{{#if (gt @topology.Upstreams.length 0)}}
<div id="upstream-column">
{{#each-in (group-by "Datacenter" @topology.Upstreams) as |dc upstreams|}}
<div id="upstream-container">
<div
id="upstream-container"
{{did-insert this.setHeight 'upstream-lines'}}
{{did-update this.setHeight 'upstream-lines' @topology.Upstreams}}
>
<p>{{dc}}</p>
{{#each upstreams as |item|}}
<TopologyMetrics::Card

14
ui/packages/consul-ui/app/components/topology-metrics/index.js
View File

@ -67,6 +67,16 @@ export default class TopologyMetrics extends Component {
}
// =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) {
@ -78,8 +88,8 @@ export default class TopologyMetrics extends Component {
}
// Calculate viewBox dimensions
this.downView = document.querySelector('#downstream-lines').getBoundingClientRect();
this.upView = document.querySelector('#upstream-lines').getBoundingClientRect();
this.downView = document.getElementById('downstream-lines').getBoundingClientRect();
this.upView = document.getElementById('upstream-lines').getBoundingClientRect();
// Get Card elements positions
const downCards = [...document.querySelectorAll('#downstream-container .card')];

1
ui/packages/consul-ui/app/components/topology-metrics/layout.scss
View File

@ -28,7 +28,6 @@
#downstream-lines,
#upstream-lines {
position: relative;
height: 100%;
}
#downstream-lines {
margin-left: -20px;

2
ui/packages/consul-ui/app/components/topology-metrics/up-lines/index.hbs
View File

@ -1,5 +1,3 @@
{{on-window 'resize' (action this.getIconPositions)}}
{{#if (gt @lines.length 0)}}
<svg
{{did-insert this.getIconPositions}}