kemko/nomad
1
0
Fork 0
mirror of https://github.com/kemko/nomad.git synced 2026-01-04 09:25:46 +03:00
Code Issues Packages Projects Releases Wiki Activity

Touch up topo viz interactions

Browse Source
This commit is contained in:
Michael Lange
2020-09-10 21:17:09 -07:00
parent 36df145da5
commit 0b3a78b9ef
2 changed files with 71 additions and 65 deletions
Download Patch File Download Diff File Expand all files Collapse all files

12
ui/app/styles/charts/topo-viz-node.scss
View File

@@ -27,10 +27,14 @@
}
}
.bar.is-selected {
stroke-width: 1px;
stroke: $blue;
fill: $blue-light;
.bar {
cursor: pointer;
&.is-selected {
stroke-width: 1px;
stroke: $blue;
fill: $blue-light;
}
}
.label {

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

@@ -7,80 +7,82 @@
</clipPath>
</defs>
<rect class="node-background" width="100%" height="{{this.totalHeight}}px" rx="2px" ry="2px" />
<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">
<text class="label" aria-label="Memory" transform="translate({{this.data.memoryLabel.x}},{{this.data.memoryLabel.y}})">M</text>
{{#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}})"
{{on "mouseenter" (fn this.highlightAllocation memory.allocation)}}
{{on "click" (fn this.selectAllocation memory.allocation)}}>
{{#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">
<text class="label" aria-label="Memory" transform="translate({{this.data.memoryLabel.x}},{{this.data.memoryLabel.y}})">M</text>
{{#if this.data.memoryRemainder}}
<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"))}}
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}})"
{{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-1" />
{{/if}}
</g>
{{/each}}
</g>
<g class="cpu">
<text class="label" aria-label="CPU" transform="translate({{this.data.cpuLabel.x}},{{this.data.cpuLabel.y}})">C</text>
{{#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}})"
{{on "mouseenter" (fn this.highlightAllocation cpu.allocation)}}
{{on "click" (fn this.selectAllocation cpu.allocation)}}>
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">
<text class="label" aria-label="CPU" transform="translate({{this.data.cpuLabel.x}},{{this.data.cpuLabel.y}})">C</text>
{{#if this.data.cpuRemainder}}
<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"))}}
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}})"
{{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-1" />
{{/if}}
</g>
{{/each}}
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>
</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>