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

ui: add tooltips to the Topology labels (#17647)

Browse Source 
Add tooltips to labels in nodes and datacenters for the Topology view
page to clarify what each value represents.
This commit is contained in:
Luiz Aoqui
2023-06-22 10:33:42 -04:00
committed by GitHub
parent a29048b3e7
commit df37f2d022
4 changed files with 22 additions and 12 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
.changelog/17647.txt Normal file
View File

@@ -0,0 +1,3 @@
```release-note:improvement
ui: add tooltips to the node and datacenter labels in the Topology page
```

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

@@ -5,11 +5,15 @@
<div data-test-topo-viz-datacenter class="boxed-section topo-viz-datacenter"> <div data-test-topo-viz-datacenter class="boxed-section topo-viz-datacenter">
<div data-test-topo-viz-datacenter-label class="boxed-section-head is-hollow"> <div data-test-topo-viz-datacenter-label class="boxed-section-head is-hollow">
<strong>{{@datacenter.name}}</strong> <span class="tooltip" aria-label="Datacenter"><strong>{{@datacenter.name}}</strong></span>
<span class="bumper-left">{{this.scheduledAllocations.length}} Allocs</span> <span class="bumper-left tooltip" aria-label="Number of Allocations">{{this.scheduledAllocations.length}} Allocs</span>
<span class="bumper-left">{{@datacenter.nodes.length}} Nodes</span> <span class="bumper-left tooltip" aria-label="Number of Nodes">{{@datacenter.nodes.length}} Nodes</span>
<span class="bumper-left is-faded">{{format-bytes this.aggregatedAllocationResources.memory start="MiB"}}/{{format-bytes this.aggregatedNodeResources.memory start="MiB"}}, <span class="bumper-left is-faded">
{{format-hertz this.aggregatedAllocationResources.cpu}}/{{format-hertz this.aggregatedNodeResources.cpu}}</span> <span class="tooltip" aria-label="Memory Allocated">{{format-bytes this.aggregatedAllocationResources.memory start="MiB"}}</span> /
<span class="tooltip" aria-label="Total Memory">{{format-bytes this.aggregatedNodeResources.memory start="MiB"}},</span>
<span class="tooltip" aria-label="CPU Allocated">{{format-hertz this.aggregatedAllocationResources.cpu}}</span> /
<span class="tooltip" aria-label="Total CPU">{{format-hertz this.aggregatedNodeResources.cpu}}</span>
</span>
</div> </div>
<div class="boxed-section-body"> <div class="boxed-section-body">
<FlexMasonry @columns={{if @isSingleColumn 1 2}} @items={{@datacenter.nodes}} as |node|> <FlexMasonry @columns={{if @isSingleColumn 1 2}} @items={{@datacenter.nodes}} as |node|>

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

@@ -11,11 +11,14 @@
{{else if (not @node.node.isEligible)}} {{else if (not @node.node.isEligible)}}
<span data-test-status-icon class="tooltip" aria-label="Client is ineligible">{{x-icon "lock-closed" class="is-warning"}}</span> <span data-test-status-icon class="tooltip" aria-label="Client is ineligible">{{x-icon "lock-closed" class="is-warning"}}</span>
{{/if}} {{/if}}
<strong><LinkTo @route="clients.client" @model={{@node.node.id}}>{{@node.node.name}}</LinkTo></strong> <span class="tooltip" aria-label="Node Name"><strong><LinkTo @route="clients.client" @model={{@node.node.id}}>{{@node.node.name}}</LinkTo></strong></span>
<span class="bumper-left">{{this.count}} Allocs</span> <span class="bumper-left tooltip" aria-label="Number of Allocations">{{this.count}} Allocs</span>
<span class="bumper-left is-faded">{{format-scheduled-bytes @node.memory start="MiB"}}, {{format-scheduled-hertz @node.cpu}}</span> <span class="bumper-left is-faded">
<span class="bumper-left is-faded">{{@node.node.status}}</span> <span class="tooltip" aria-label="Node Memory">{{format-scheduled-bytes @node.memory start="MiB"}}</span>,
<span class="bumper-left is-faded">{{@node.node.version}}</span> <span class="tooltip" aria-label="Node CPU">{{format-scheduled-hertz @node.cpu}}</span>
</span>
<span class="bumper-left is-faded tooltip" aria-label="Node Status">{{@node.node.status}}</span>
<span class="bumper-left is-faded tooltip" aria-label="Nomad Version">{{@node.node.version}}</span>
</p> </p>
{{/unless}} {{/unless}}
<svg <svg

4
ui/tests/integration/components/topo-viz/datacenter-test.js
View File

@@ -119,7 +119,7 @@ module('Integration | Component | TopoViz::Datacenter', function (hooks) {
assert.ok(TopoVizDatacenter.label.includes(`${allocs.length} Allocs`)); assert.ok(TopoVizDatacenter.label.includes(`${allocs.length} Allocs`));
assert.ok( assert.ok(
TopoVizDatacenter.label.includes( TopoVizDatacenter.label.includes(
`${formatBytes(memoryReserved, 'MiB')}/${formatBytes( `${formatBytes(memoryReserved, 'MiB')} / ${formatBytes(
memoryTotal, memoryTotal,
'MiB' 'MiB'
)}` )}`
@@ -127,7 +127,7 @@ module('Integration | Component | TopoViz::Datacenter', function (hooks) {
); );
assert.ok( assert.ok(
TopoVizDatacenter.label.includes( TopoVizDatacenter.label.includes(
`${formatHertz(cpuReserved, 'MHz')}/${formatHertz(cpuTotal, 'MHz')}` `${formatHertz(cpuReserved, 'MHz')} / ${formatHertz(cpuTotal, 'MHz')}`
) )
); );
}); });