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

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

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 3d761e712b
commit 9f5c02d947
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
4 changed files with 22 additions and 12 deletions
Show Stats 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-label class="boxed-section-head is-hollow">
<strong>{{@datacenter.name}}</strong>
<span class="bumper-left">{{this.scheduledAllocations.length}} Allocs</span>
<span class="bumper-left">{{@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"}},
{{format-hertz this.aggregatedAllocationResources.cpu}}/{{format-hertz this.aggregatedNodeResources.cpu}}</span>
<span class="tooltip" aria-label="Datacenter"><strong>{{@datacenter.name}}</strong></span>
<span class="bumper-left tooltip" aria-label="Number of Allocations">{{this.scheduledAllocations.length}} Allocs</span>
<span class="bumper-left tooltip" aria-label="Number of Nodes">{{@datacenter.nodes.length}} Nodes</span>
<span class="bumper-left is-faded">
<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 class="boxed-section-body">
<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)}}
<span data-test-status-icon class="tooltip" aria-label="Client is ineligible">{{x-icon "lock-closed" class="is-warning"}}</span>
{{/if}}
<strong><LinkTo @route="clients.client" @model={{@node.node.id}}>{{@node.node.name}}</LinkTo></strong>
<span class="bumper-left">{{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">{{@node.node.status}}</span>
<span class="bumper-left is-faded">{{@node.node.version}}</span>
<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 tooltip" aria-label="Number of Allocations">{{this.count}} Allocs</span>
<span class="bumper-left is-faded">
<span class="tooltip" aria-label="Node Memory">{{format-scheduled-bytes @node.memory start="MiB"}}</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>
{{/unless}}
<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(
`${formatBytes(memoryReserved, 'MiB')}/${formatBytes(
`${formatBytes(memoryReserved, 'MiB')} / ${formatBytes(
memoryTotal,
'MiB'
)}`
@ -127,7 +127,7 @@ module('Integration | Component | TopoViz::Datacenter', function (hooks) {
);
assert.ok(
TopoVizDatacenter.label.includes(
`${formatHertz(cpuReserved, 'MHz')}/${formatHertz(cpuTotal, 'MHz')}`
`${formatHertz(cpuReserved, 'MHz')} / ${formatHertz(cpuTotal, 'MHz')}`
)
);
});