From dceeccfc5d23bf65a4f3e976f4cbc02d9ba50279 Mon Sep 17 00:00:00 2001
From: Luiz Aoqui <luiz@hashicorp.com>
Date: Thu, 21 Oct 2021 10:23:06 -0400
Subject: [PATCH] ui: add client name tooltip when displaying client ID in
 tables (#11358)

---
 .changelog/11358.txt                             |  3 +++
 ui/app/templates/components/allocation-row.hbs   | 16 ++++++++++++++--
 .../components/plugin-allocation-row.hbs         |  8 +++++++-
 3 files changed, 24 insertions(+), 3 deletions(-)
 create mode 100644 .changelog/11358.txt

diff --git a/.changelog/11358.txt b/.changelog/11358.txt
new file mode 100644
index 000000000..9d77e0667
--- /dev/null
+++ b/.changelog/11358.txt
@@ -0,0 +1,3 @@
+```release-note:improvement
+ui: Display client name as a tooltip where the client ID is used
+```
diff --git a/ui/app/templates/components/allocation-row.hbs b/ui/app/templates/components/allocation-row.hbs
index 0fdc3174e..5c2a317b5 100644
--- a/ui/app/templates/components/allocation-row.hbs
+++ b/ui/app/templates/components/allocation-row.hbs
@@ -37,11 +37,23 @@
   <span class="color-swatch {{this.allocation.clientStatus}}" /> {{this.allocation.clientStatus}}
 </td>
 {{#if (eq this.context "volume")}}
-  <td data-test-client><LinkTo @route="clients.client" @model={{this.allocation.node}}>{{this.allocation.node.shortId}}</LinkTo></td>
+  <td data-test-client>
+    <span class="tooltip multiline" aria-label="{{this.allocation.node.name}}">
+      <LinkTo @route="clients.client" @model={{this.allocation.node}}>
+        {{this.allocation.node.shortId}}
+      </LinkTo>
+    </span>
+  </td>
 {{/if}}
 {{#if (or (eq this.context "taskGroup") (eq this.context "job"))}}
   <td data-test-job-version>{{this.allocation.jobVersion}}</td>
-  <td data-test-client><LinkTo @route="clients.client" @model={{this.allocation.node}}>{{this.allocation.node.shortId}}</LinkTo></td>
+  <td data-test-client>
+    <span class="tooltip multiline" aria-label="{{this.allocation.node.name}}">
+      <LinkTo @route="clients.client" @model={{this.allocation.node}}>
+        {{this.allocation.node.shortId}}
+      </LinkTo>
+    </span>
+  </td>
 {{else if (or (eq this.context "node") (eq this.context "volume"))}}
   <td>
     {{#if (or this.allocation.job.isPending this.allocation.job.isReloading)}}
diff --git a/ui/app/templates/components/plugin-allocation-row.hbs b/ui/app/templates/components/plugin-allocation-row.hbs
index b1a10734a..e0c5352a1 100644
--- a/ui/app/templates/components/plugin-allocation-row.hbs
+++ b/ui/app/templates/components/plugin-allocation-row.hbs
@@ -44,7 +44,13 @@
     </span>
   </td>
 
-  <td data-test-client><LinkTo @route="clients.client" @model={{this.allocation.node}}>{{this.allocation.node.shortId}}</LinkTo></td>
+  <td data-test-client>
+    <span class="tooltip multiline" aria-label="{{this.allocation.node.name}}">
+      <LinkTo @route="clients.client" @model={{this.allocation.node}}>
+        {{this.allocation.node.shortId}}
+      </LinkTo>
+    </span>
+  </td>
   <td>
     {{#if (or this.allocation.job.isPending this.allocation.job.isReloading)}}
       ...