open-nomad/ui/app/templates/components/topo-viz.hbs
2020-11-02 13:25:33 -08:00

57 lines
2 KiB
Handlebars

<div
data-test-topo-viz
class="topo-viz {{if this.isSingleColumn "is-single-column"}}"
{{did-insert this.buildTopology}}
{{did-insert this.captureElement}}
{{window-resize this.determineViewportColumns}}>
<FlexMasonry
@columns={{if this.isSingleColumn 1 2}}
@items={{this.topology.datacenters}}
@withSpacing={{true}} as |dc|>
<TopoViz::Datacenter
@datacenter={{dc}}
@isSingleColumn={{this.datacenterIsSingleColumn}}
@isDense={{this.isDense}}
@heightScale={{this.topology.heightScale}}
@onAllocationSelect={{this.associateAllocations}}
@onAllocationFocus={{this.showTooltip}}
@onAllocationBlur={{this.hideTooltip}}
@onNodeSelect={{this.showNodeDetails}} />
</FlexMasonry>
<div class="chart-tooltip is-absolute {{if this.highlightAllocation "active" "inactive"}}" style={{this.tooltipStyle}}>
{{#let this.highlightAllocation as |allocation|}}
<ol class="is-static">
<li>
<span class="label">Job</span>
<span class="value">{{allocation.allocation.job.name}}/{{allocation.allocation.taskGroupName}}</span>
</li>
{{#if this.system.shouldShowNamespaces}}
<li>
<span class="label">Namespace</span>
<span class="value">{{allocation.allocation.job.namespace.name}}</span>
</li>
{{/if}}
<li>
<span class="label">Memory</span>
<span class="value">{{allocation.memory}} MiB</span>
</li>
<li>
<span class="label">CPU</span>
<span class="value">{{allocation.cpu}} MHz</span>
</li>
</ol>
{{/let}}
</div>
{{#if this.activeAllocation}}
<svg data-test-allocation-associations class="chart topo-viz-edges" {{window-resize this.computedActiveEdges}}>
<g transform="translate({{this.edgeOffset.x}},{{this.edgeOffset.y}})">
{{#each this.activeEdges as |edge|}}
<path data-test-allocation-association class="edge" d={{edge}} />
{{/each}}
</g>
</svg>
{{/if}}
</div>