From 1b5087f6e5b58e8272851504e7eeb3f69dffd587 Mon Sep 17 00:00:00 2001
From: Kenia <19161242+kaxcode@users.noreply.github.com>
Date: Wed, 17 Feb 2021 13:51:48 -0500
Subject: [PATCH] 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
---
 .../topology-metrics/down-lines/index.hbs       |  2 --
 .../app/components/topology-metrics/index.hbs   | 17 +++++++++++------
 .../app/components/topology-metrics/index.js    | 14 ++++++++++++--
 .../app/components/topology-metrics/layout.scss |  1 -
 .../topology-metrics/up-lines/index.hbs         |  2 --
 5 files changed, 23 insertions(+), 13 deletions(-)

diff --git a/ui/packages/consul-ui/app/components/topology-metrics/down-lines/index.hbs b/ui/packages/consul-ui/app/components/topology-metrics/down-lines/index.hbs
index 0fe3158ed9..681e799a85 100644
--- a/ui/packages/consul-ui/app/components/topology-metrics/down-lines/index.hbs
+++ b/ui/packages/consul-ui/app/components/topology-metrics/down-lines/index.hbs
@@ -1,5 +1,3 @@
-{{on-window 'resize' (action this.getIconPositions)}}
-
 {{#if (gt @lines.length 0)}}
   <svg
     {{did-insert this.getIconPositions}}
diff --git a/ui/packages/consul-ui/app/components/topology-metrics/index.hbs b/ui/packages/consul-ui/app/components/topology-metrics/index.hbs
index ba4ee349cc..43bbeac1ed 100644
--- a/ui/packages/consul-ui/app/components/topology-metrics/index.hbs
+++ b/ui/packages/consul-ui/app/components/topology-metrics/index.hbs
@@ -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
diff --git a/ui/packages/consul-ui/app/components/topology-metrics/index.js b/ui/packages/consul-ui/app/components/topology-metrics/index.js
index 67868a1645..3704342e57 100644
--- a/ui/packages/consul-ui/app/components/topology-metrics/index.js
+++ b/ui/packages/consul-ui/app/components/topology-metrics/index.js
@@ -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')];
diff --git a/ui/packages/consul-ui/app/components/topology-metrics/layout.scss b/ui/packages/consul-ui/app/components/topology-metrics/layout.scss
index 97992e4e43..1bd386dac6 100644
--- a/ui/packages/consul-ui/app/components/topology-metrics/layout.scss
+++ b/ui/packages/consul-ui/app/components/topology-metrics/layout.scss
@@ -28,7 +28,6 @@
 #downstream-lines,
 #upstream-lines {
   position: relative;
-  height: 100%;
 }
 #downstream-lines {
   margin-left: -20px;
diff --git a/ui/packages/consul-ui/app/components/topology-metrics/up-lines/index.hbs b/ui/packages/consul-ui/app/components/topology-metrics/up-lines/index.hbs
index cb2bfefb2f..7f73d5c565 100644
--- a/ui/packages/consul-ui/app/components/topology-metrics/up-lines/index.hbs
+++ b/ui/packages/consul-ui/app/components/topology-metrics/up-lines/index.hbs
@@ -1,5 +1,3 @@
-{{on-window 'resize' (action this.getIconPositions)}}
-
 {{#if (gt @lines.length 0)}}
   <svg
     {{did-insert this.getIconPositions}}