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

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}}

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)}}
+  {{on-resize this.calculate}}
-  {{did-update (action this.calculate) @topology.Upstreams @topology.Downstreams}}
   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

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.downView = document.getElementById('downstream-lines').getBoundingClientRect();
-    this.upView = document.querySelector('#upstream-lines').getBoundingClientRect();
+    this.upView = document.getElementById('upstream-lines').getBoundingClientRect();
 
     // Get Card elements positions
     const downCards = [...document.querySelectorAll('#downstream-container .card')];

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;

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}}