Merge pull request #9906 from hashicorp/b-ui/topo-lines-not-shown

UI: Show allocation associations in the topo viz more often (and fix a bug)

ui/app/components/topo-viz.js

@@ -220,8 +220,8 @@ export default class TopoViz extends Component {
         });
       }
 
-      // Only show the lines if the selected allocations are sparse (low count relative to the client count).
-      if (newAllocations.length < this.args.nodes.length * 0.75) {
+      // Only show the lines if the selected allocations are sparse (low count relative to the client count or low count generally).
+      if (newAllocations.length < 10 || newAllocations.length < this.args.nodes.length * 0.75) {
         this.computedActiveEdges();
       } else {
         this.activeEdges = [];
@@ -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

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

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);
   });
@@ -152,10 +157,19 @@ module('Integration | Component | TopoViz', function(hooks) {
     this.setProperties({
       nodes: [node('dc1', 'node0', 1000, 500), node('dc1', 'node1', 1000, 500)],
       allocations: [
+        // There need to be at least 10 sibling allocations to trigger this behavior
+        alloc('node0', 'job1', 'group', 100, 100),
+        alloc('node0', 'job1', 'group', 100, 100),
+        alloc('node0', 'job1', 'group', 100, 100),
+        alloc('node0', 'job1', 'group', 100, 100),
         alloc('node0', 'job1', 'group', 100, 100),
         alloc('node0', 'job1', 'group', 100, 100),
         alloc('node1', 'job1', 'group', 100, 100),
         alloc('node1', 'job1', 'group', 100, 100),
+        alloc('node1', 'job1', 'group', 100, 100),
+        alloc('node1', 'job1', 'group', 100, 100),
+        alloc('node1', 'job1', 'group', 100, 100),
+        alloc('node1', 'job1', 'group', 100, 100),
         alloc('node0', 'job1', 'groupTwo', 100, 100),
       ],
       onNodeSelect: sinon.spy(),
@@ -167,6 +181,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) {