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

Remove temp reloading of nodes in the TopoViz component

This commit is contained in:
Michael Lange 2020-10-13 17:27:11 -07:00
parent 4f537c8511
commit 8b96667a61
2 changed files with 26 additions and 40 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
ui/app/components/topo-viz.js
View File

@ -71,14 +71,11 @@ export default class TopoViz extends Component {
};
}
@task(function*() {
@action
buildTopology() {
const nodes = this.args.nodes;
const allocations = this.args.allocations;
// Nodes are probably partials and we'll need the resources on them
// TODO: this is an API update waiting to happen.
yield RSVP.all(nodes.map(node => (node.isPartial ? node.reload() : RSVP.resolve(node))));
// Wrap nodes in a topo viz specific data structure and build an index to speed up allocation assignment
const nodeContainers = [];
const nodeIndex = {};
@ -95,7 +92,7 @@ export default class TopoViz extends Component {
const nodeId = allocation.belongsTo('node').id();
const nodeContainer = nodeIndex[nodeId];
if (!nodeContainer)
throw new Error(`Node ${nodeId} for alloc ${allocation.id} not in index???`);
throw new Error(`Node ${nodeId} for alloc ${allocation.id} not in index.`);
const allocationContainer = this.dataForAllocation(allocation, nodeContainer);
nodeContainer.allocations.push(allocationContainer);
@ -126,14 +123,12 @@ export default class TopoViz extends Component {
.domain(extent(nodeContainers.mapBy('memory'))),
};
this.topology = topology;
})
buildTopology;
}
@action
async loadNodes() {
await RSVP.all(this.args.nodes.map(node => node.reload()));
// TODO: Make the range dynamic based on the extent of the domain
this.heightScale = scaleLinear()
.range([15, 40])
.domain(extent(this.args.nodes.map(node => node.resources.memory)));
@ -207,7 +202,6 @@ export default class TopoViz extends Component {
computedActiveEdges() {
// Wait a render cycle
run.next(() => {
// const path = line().curve(curveCardinal.tension(0.5));
const path = line().curve(curveBasis);
// 1. Get the active element
const allocation = this.activeAllocation.allocation;

52
ui/app/templates/components/topo-viz.hbs
View File

@ -1,33 +1,25 @@
<div class="topo-viz {{if (or this.buildTopology.isRunning this.isSingleColumn) "is-single-column"}}" {{did-insert (perform this.buildTopology)}} {{did-insert this.captureElement}}>
{{#if this.buildTopology.isRunning}}
<div class="has-text-centered">
<h2 class="title">Loading. If you have a lot of clients this may take awhile</h2>
<p>Every client needs to be loaded individually. This is a shortcoming of the prototype and will be fixed before this is graduated to the actual Nomad project.</p>
<LoadingSpinner />
</div>
{{else}}
<FlexMasonry
@columns={{if this.isSingleColumn 1 2}}
@items={{this.topology.datacenters}}
@withSpacing={{true}} as |dc reflow|>
<TopoViz::Datacenter
@datacenter={{dc}}
@isSingleColumn={{this.datacenterIsSingleColumn}}
@isDense={{this.isDense}}
@heightScale={{this.topology.heightScale}}
@onAllocationSelect={{this.associateAllocations}}
@onNodeSelect={{this.showNodeDetails}}
@onLoad={{action reflow}}/>
</FlexMasonry>
<div class="topo-viz {{if this.isSingleColumn "is-single-column"}}" {{did-insert this.buildTopology}} {{did-insert this.captureElement}}>
<FlexMasonry
@columns={{if this.isSingleColumn 1 2}}
@items={{this.topology.datacenters}}
@withSpacing={{true}} as |dc reflow|>
<TopoViz::Datacenter
@datacenter={{dc}}
@isSingleColumn={{this.datacenterIsSingleColumn}}
@isDense={{this.isDense}}
@heightScale={{this.topology.heightScale}}
@onAllocationSelect={{this.associateAllocations}}
@onNodeSelect={{this.showNodeDetails}}
@onLoad={{action reflow}}/>
</FlexMasonry>
{{#if this.activeAllocation}}
<svg class="chart topo-viz-edges" {{window-resize this.computedActiveEdges}}>
<g transform="translate({{this.edgeOffset.x}},{{this.edgeOffset.y}})">
{{#each this.activeEdges as |edge|}}
<path class="edge" d={{edge}} />
{{/each}}
</g>
</svg>
{{/if}}
{{#if this.activeAllocation}}
<svg class="chart topo-viz-edges" {{window-resize this.computedActiveEdges}}>
<g transform="translate({{this.edgeOffset.x}},{{this.edgeOffset.y}})">
{{#each this.activeEdges as |edge|}}
<path class="edge" d={{edge}} />
{{/each}}
</g>
</svg>
{{/if}}
</div>