ui: add client name tooltip when displaying client ID in tables (#11358)

hashicorp · Oct 21, 2021 · 6412e77 · 6412e77
1 parent dc49869
commit 6412e77
Show file tree

Hide file tree

Showing 3 changed files with 24 additions and 3 deletions.
diff --git a/.changelog/11358.txt 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
@@ -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
@@ -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)}}
       ...