103 lines
4.8 KiB
Handlebars
103 lines
4.8 KiB
Handlebars
<div class="chart topo-viz-node {{unless this.allocations.length "is-empty"}}" {{did-insert this.reloadNode}}>
|
|
<p>
|
|
<strong>{{@node.name}}</strong>
|
|
<span class="bumper-left">{{this.count}} Allocs</span>
|
|
<span class="bumper-left is-faded">{{@node.resources.memory}} MiB, {{@node.resources.cpu}} Mhz</span>
|
|
</p>
|
|
<svg class="chart" height="{{this.totalHeight}}px" {{did-insert this.render}} {{did-update this.render @activeTaskGroup @activeJobId}} {{window-resize this.render}}>
|
|
<defs>
|
|
<clipPath id="{{this.maskId}}">
|
|
<rect class="mask" x="0" y="0" width="{{this.dimensionsWidth}}px" height="{{this.maskHeight}}px" rx="2px" ry="2px" />
|
|
</clipPath>
|
|
</defs>
|
|
<rect class="node-background" width="100%" height="{{this.totalHeight}}px" rx="2px" ry="2px" />
|
|
{{#if this.allocations.length}}
|
|
<g
|
|
class="dimensions {{if this.activeAllocation "is-active"}}"
|
|
transform="translate({{this.paddingLeft}},{{this.padding}})"
|
|
width="{{this.dimensionsWidth}}px"
|
|
height="{{this.maskHeight}}px"
|
|
pointer-events="all"
|
|
{{on "mouseout" this.clearHighlight}}
|
|
>
|
|
<g class="memory">
|
|
{{#if this.data.memoryLabel}}
|
|
<text class="label" aria-label="Memory" transform="translate({{this.data.memoryLabel.x}},{{this.data.memoryLabel.y}})">M</text>
|
|
{{/if}}
|
|
{{#if this.data.memoryRemainder}}
|
|
<rect
|
|
class="dimension-background"
|
|
x="{{this.data.memoryRemainder.x}}px"
|
|
width="{{this.data.memoryRemainder.width}}px"
|
|
height="{{this.height}}px" />
|
|
{{/if}}
|
|
{{#each this.data.memory as |memory|}}
|
|
<g
|
|
class="bar {{memory.className}} {{if (eq this.activeAllocation memory.allocation) "is-active"}} {{if memory.isSelected "is-selected"}}"
|
|
clip-path="url(#{{this.maskId}})"
|
|
data-allocation-id="{{memory.allocation.id}}"
|
|
{{on "mouseenter" (fn this.highlightAllocation memory.allocation)}}
|
|
{{on "click" (fn this.selectAllocation memory.allocation)}}>
|
|
<rect
|
|
width="{{memory.width}}px"
|
|
height="{{if memory.isSelected this.selectedHeight this.height}}px"
|
|
x="{{memory.x}}px"
|
|
y="{{if memory.isSelected 0.5 0}}px"
|
|
class="layer-0" />
|
|
{{#if (or (eq memory.className "starting") (eq memory.className "pending"))}}
|
|
<rect
|
|
width="{{memory.width}}px"
|
|
height="{{if memory.isSelected this.selectedHeight this.height}}px"
|
|
x="{{memory.x}}px"
|
|
y="{{if memory.isSelected 0.5 0}}px"
|
|
class="layer-1" />
|
|
{{/if}}
|
|
</g>
|
|
{{/each}}
|
|
</g>
|
|
<g class="cpu">
|
|
{{#if this.data.cpuLabel}}
|
|
<text class="label" aria-label="CPU" transform="translate({{this.data.cpuLabel.x}},{{this.data.cpuLabel.y}})">C</text>
|
|
{{/if}}
|
|
{{#if this.data.cpuRemainder}}
|
|
<rect
|
|
class="dimension-background"
|
|
x="{{this.data.cpuRemainder.x}}px"
|
|
y="{{this.yOffset}}px"
|
|
width="{{this.data.cpuRemainder.width}}px"
|
|
height="{{this.height}}px" />
|
|
{{/if}}
|
|
{{#each this.data.cpu as |cpu|}}
|
|
<g
|
|
class="bar {{cpu.className}} {{if (eq this.activeAllocation cpu.allocation) "is-active"}} {{if cpu.isSelected "is-selected"}}"
|
|
clip-path="url(#{{this.maskId}})"
|
|
data-allocation-id="{{cpu.allocation.id}}"
|
|
{{on "mouseenter" (fn this.highlightAllocation cpu.allocation)}}
|
|
{{on "click" (fn this.selectAllocation cpu.allocation)}}>
|
|
<rect
|
|
width="{{cpu.width}}px"
|
|
height="{{if cpu.isSelected this.selectedHeight this.height}}px"
|
|
x="{{cpu.x}}px"
|
|
y="{{if cpu.isSelected this.selectedYOffset this.yOffset}}px"
|
|
class="layer-0" />
|
|
{{#if (or (eq cpu.className "starting") (eq cpu.className "pending"))}}
|
|
<rect
|
|
width="{{cpu.width}}px"
|
|
height="{{if cpu.isSelected this.selectedHeight this.height}}px"
|
|
x="{{cpu.x}}px"
|
|
y="{{if cpu.isSelected this.selectedYOffset this.yOffset}}px"
|
|
class="layer-1" />
|
|
{{/if}}
|
|
</g>
|
|
{{/each}}
|
|
</g>
|
|
</g>
|
|
{{/if}}
|
|
</svg>
|
|
<div class="chart-tooltip {{if this.isActive "active" "inactive"}}" style={{this.tooltipStyle}}>
|
|
<LinkTo @route="allocations.allocation" @model={{this.activeAllocation}}>{{this.activeAllocation.name}} {{this.activeAllocation.shortId}}</LinkTo>
|
|
({{this.activeAllocation.resources.memory}} MiB, {{this.activeAllocation.resources.cpu}} Mhz)
|
|
</div>
|
|
</div>
|
|
|