From 494b90c995d3cfb4edec302360f0521fe311b23b Mon Sep 17 00:00:00 2001
From: Michael Lange <dingoeatingfuzz@gmail.com>
Date: Wed, 27 Jan 2021 10:13:05 -0800
Subject: [PATCH] Don't render association lines on resize when lines aren't
 supposed to be shown at all

---
 ui/app/components/topo-viz.js                    | 7 +++++++
 ui/app/templates/components/topo-viz.hbs         | 2 +-
 ui/tests/integration/components/topo-viz-test.js | 9 +++++++++
 3 files changed, 17 insertions(+), 1 deletion(-)

diff --git a/ui/app/components/topo-viz.js b/ui/app/components/topo-viz.js
index d1254a0dc..e46f6b10e 100644
--- a/ui/app/components/topo-viz.js
+++ b/ui/app/components/topo-viz.js
@@ -237,6 +237,13 @@ export default class TopoViz extends Component {
     this.viewportColumns = this.element.clientWidth < 900 ? 1 : 2;
   }
 
+  @action
+  resizeEdges() {
+    if (this.activeEdges.length > 0) {
+      this.computedActiveEdges();
+    }
+  }
+
   @action
   computedActiveEdges() {
     // Wait a render cycle
diff --git a/ui/app/templates/components/topo-viz.hbs b/ui/app/templates/components/topo-viz.hbs
index 8953406f3..697c49747 100644
--- a/ui/app/templates/components/topo-viz.hbs
+++ b/ui/app/templates/components/topo-viz.hbs
@@ -45,7 +45,7 @@
   </div>
 
   {{#if this.activeAllocation}}
-    <svg data-test-allocation-associations class="chart topo-viz-edges" {{window-resize this.computedActiveEdges}}>
+    <svg data-test-allocation-associations class="chart topo-viz-edges" {{window-resize this.resizeEdges}}>
       <g transform="translate({{this.edgeOffset.x}},{{this.edgeOffset.y}})">
         {{#each this.activeEdges as |edge|}}
           <path data-test-allocation-association class="edge" d={{edge}} />
diff --git a/ui/tests/integration/components/topo-viz-test.js b/ui/tests/integration/components/topo-viz-test.js
index 76869b98e..1ec288f35 100644
--- a/ui/tests/integration/components/topo-viz-test.js
+++ b/ui/tests/integration/components/topo-viz-test.js
@@ -1,4 +1,5 @@
 import { module, test } from 'qunit';
+import { triggerEvent } from '@ember/test-helpers';
 import { setupRenderingTest } from 'ember-qunit';
 import hbs from 'htmlbars-inline-precompile';
 import { componentA11yAudit } from 'nomad-ui/tests/helpers/a11y-audit';
@@ -144,6 +145,10 @@ module('Integration | Component | TopoViz', function(hooks) {
     assert.ok(TopoViz.allocationAssociationsArePresent);
     assert.equal(TopoViz.allocationAssociations.length, selectedAllocations.length * 2);
 
+    // Lines get redrawn when the window resizes; make sure the lines persist.
+    await triggerEvent(window, 'resize');
+    assert.equal(TopoViz.allocationAssociations.length, selectedAllocations.length * 2);
+
     await TopoViz.datacenters[0].nodes[0].memoryRects[0].select();
     assert.notOk(TopoViz.allocationAssociationsArePresent);
   });
@@ -167,6 +172,10 @@ module('Integration | Component | TopoViz', function(hooks) {
 
     await TopoViz.datacenters[0].nodes[0].memoryRects[0].select();
     assert.equal(TopoViz.allocationAssociations.length, 0);
+
+    // Lines get redrawn when the window resizes; make sure that doesn't make the lines show up again
+    await triggerEvent(window, 'resize');
+    assert.equal(TopoViz.allocationAssociations.length, 0);
   });
 
   test('when one or more nodes are missing the resources property, those nodes are filtered out of the topology view and onDataError is called', async function(assert) {