luxolus/open-nomad
2
0
Fork 0
Code Issues 1 Pull requests Packages Releases Wiki Activity

Don't render association lines on resize when lines aren't supposed to be shown at all

Browse source
This commit is contained in:
Michael Lange 2021-01-27 10:13:05 -08:00
parent cf052cfee5
commit 82d06f658b
3 changed files with 17 additions and 1 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

7
ui/app/components/topo-viz.js
View file

@ -237,6 +237,13 @@ export default class TopoViz extends Component {
this.viewportColumns = this.element.clientWidth < 900 ? 1 : 2; this.viewportColumns = this.element.clientWidth < 900 ? 1 : 2;
} }
@action
resizeEdges() {
if (this.activeEdges.length > 0) {
this.computedActiveEdges();
}
}
@action @action
computedActiveEdges() { computedActiveEdges() {
// Wait a render cycle // Wait a render cycle

2
ui/app/templates/components/topo-viz.hbs
View file

@ -45,7 +45,7 @@
</div> </div>
{{#if this.activeAllocation}} {{#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}})"> <g transform="translate({{this.edgeOffset.x}},{{this.edgeOffset.y}})">
{{#each this.activeEdges as |edge|}} {{#each this.activeEdges as |edge|}}
<path data-test-allocation-association class="edge" d={{edge}} /> <path data-test-allocation-association class="edge" d={{edge}} />

9
ui/tests/integration/components/topo-viz-test.js
View file

@ -1,4 +1,5 @@
import { module, test } from 'qunit'; import { module, test } from 'qunit';
import { triggerEvent } from '@ember/test-helpers';
import { setupRenderingTest } from 'ember-qunit'; import { setupRenderingTest } from 'ember-qunit';
import hbs from 'htmlbars-inline-precompile'; import hbs from 'htmlbars-inline-precompile';
import { componentA11yAudit } from 'nomad-ui/tests/helpers/a11y-audit'; import { componentA11yAudit } from 'nomad-ui/tests/helpers/a11y-audit';
@ -144,6 +145,10 @@ module('Integration | Component | TopoViz', function(hooks) {
assert.ok(TopoViz.allocationAssociationsArePresent); assert.ok(TopoViz.allocationAssociationsArePresent);
assert.equal(TopoViz.allocationAssociations.length, selectedAllocations.length * 2); 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(); await TopoViz.datacenters[0].nodes[0].memoryRects[0].select();
assert.notOk(TopoViz.allocationAssociationsArePresent); assert.notOk(TopoViz.allocationAssociationsArePresent);
}); });
@ -167,6 +172,10 @@ module('Integration | Component | TopoViz', function(hooks) {
await TopoViz.datacenters[0].nodes[0].memoryRects[0].select(); await TopoViz.datacenters[0].nodes[0].memoryRects[0].select();
assert.equal(TopoViz.allocationAssociations.length, 0); 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) { 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) {