From 8f599ce136712c911ab443c67e57880ed2dfb873 Mon Sep 17 00:00:00 2001
From: Luiz Aoqui <luiz@hashicorp.com>
Date: Wed, 20 Oct 2021 20:24:20 -0400
Subject: [PATCH] ui: add client name tooltip when displaying client ID in
 tables

---
 ui/app/templates/components/allocation-row.hbs   | 16 ++++++++++++++--
 .../components/plugin-allocation-row.hbs         |  8 +++++++-
 2 files changed, 21 insertions(+), 3 deletions(-)

diff --git a/ui/app/templates/components/allocation-row.hbs b/ui/app/templates/components/allocation-row.hbs
index 0fdc3174ecbb..5c2a317b5d4e 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 b1a10734a32e..e0c5352a10c9 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)}}
       ...