From 9f5c02d947a27f446775db73a1873a1be5c8eaf7 Mon Sep 17 00:00:00 2001
From: Luiz Aoqui <luiz@hashicorp.com>
Date: Thu, 22 Jun 2023 10:33:42 -0400
Subject: [PATCH] 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.
---
 .changelog/17647.txt                               |  3 +++
 .../templates/components/topo-viz/datacenter.hbs   | 14 +++++++++-----
 ui/app/templates/components/topo-viz/node.hbs      | 13 ++++++++-----
 .../components/topo-viz/datacenter-test.js         |  4 ++--
 4 files changed, 22 insertions(+), 12 deletions(-)
 create mode 100644 .changelog/17647.txt

diff --git a/.changelog/17647.txt b/.changelog/17647.txt
new file mode 100644
index 000000000..a56bfe1c9
--- /dev/null
+++ b/.changelog/17647.txt
@@ -0,0 +1,3 @@
+```release-note:improvement
+ui: add tooltips to the node and datacenter labels in the Topology page
+```
diff --git a/ui/app/templates/components/topo-viz/datacenter.hbs b/ui/app/templates/components/topo-viz/datacenter.hbs
index 3eb91fea6..61385cb07 100644
--- a/ui/app/templates/components/topo-viz/datacenter.hbs
+++ b/ui/app/templates/components/topo-viz/datacenter.hbs
@@ -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|>
diff --git a/ui/app/templates/components/topo-viz/node.hbs b/ui/app/templates/components/topo-viz/node.hbs
index 2e272a021..bc3e215b9 100644
--- a/ui/app/templates/components/topo-viz/node.hbs
+++ b/ui/app/templates/components/topo-viz/node.hbs
@@ -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
diff --git a/ui/tests/integration/components/topo-viz/datacenter-test.js b/ui/tests/integration/components/topo-viz/datacenter-test.js
index 6b4732154..11ca92cf9 100644
--- a/ui/tests/integration/components/topo-viz/datacenter-test.js
+++ b/ui/tests/integration/components/topo-viz/datacenter-test.js
@@ -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')}`
       )
     );
   });