ui: create tooltip component (#11363)

ui/app/components/tooltip.js

@@ -0,0 +1,14 @@
+import Component from '@glimmer/component';
+
+export default class Tooltip extends Component {
+  get text() {
+    const inputText = this.args.text;
+    if (!inputText || inputText.length < 30) {
+      return inputText;
+    }
+
+    const prefix = inputText.substr(0, 15).trim();
+    const suffix = inputText.substr(inputText.length - 10, inputText.length).trim();
+    return `${prefix}...${suffix}`;
+  }
+}

ui/app/templates/components/allocation-row.hbs

@@ -38,21 +38,21 @@
 </td>
 {{#if (eq this.context "volume")}}
   <td data-test-client>
-    <span class="tooltip multiline" aria-label="{{this.allocation.node.name}}">
+    <Tooltip @text={{this.allocation.node.name}}>
       <LinkTo @route="clients.client" @model={{this.allocation.node}}>
         {{this.allocation.node.shortId}}
       </LinkTo>
-    </span>
+    </Tooltip>
   </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>
-    <span class="tooltip multiline" aria-label="{{this.allocation.node.name}}">
+    <Tooltip @text={{this.allocation.node.name}}>
       <LinkTo @route="clients.client" @model={{this.allocation.node}}>
         {{this.allocation.node.shortId}}
       </LinkTo>
-    </span>
+    </Tooltip>
   </td>
 {{else if (or (eq this.context "node") (eq this.context "volume"))}}
   <td>

ui/app/templates/components/plugin-allocation-row.hbs

@@ -45,11 +45,11 @@
   </td>
 
   <td data-test-client>
-    <span class="tooltip multiline" aria-label="{{this.allocation.node.name}}">
+    <Tooltip @text={{this.allocation.node.name}}>
       <LinkTo @route="clients.client" @model={{this.allocation.node}}>
         {{this.allocation.node.shortId}}
       </LinkTo>
-    </span>
+    </Tooltip>
   </td>
   <td>
     {{#if (or this.allocation.job.isPending this.allocation.job.isReloading)}}

ui/app/templates/components/tooltip.hbs

@@ -0,0 +1,3 @@
+<span class="tooltip" aria-label="{{this.text}}">
+  {{yield}}
+</span>

ui/tests/acceptance/plugin-detail-test.js

@@ -117,6 +117,11 @@ module('Acceptance | plugin detail', function(hooks) {
         server.db.nodes.find(allocation.nodeId).id.split('-')[0],
         'Node ID'
       );
+      assert.equal(
+        allocationRow.clientTooltip.substr(0, 15),
+        server.db.nodes.find(allocation.nodeId).name.substr(0, 15),
+        'Node Name'
+      );
       assert.equal(allocationRow.job, server.db.jobs.find(allocation.jobId).name, 'Job name');
       assert.ok(allocationRow.taskGroup, 'Task group name');
       assert.ok(allocationRow.jobVersion, 'Job Version');

ui/tests/acceptance/volume-detail-test.js

@@ -135,6 +135,11 @@ module('Acceptance | volume detail', function(hooks) {
         server.db.nodes.find(allocation.nodeId).id.split('-')[0],
         'Node ID'
       );
+      assert.equal(
+        allocationRow.clientTooltip.substr(0, 15),
+        server.db.nodes.find(allocation.nodeId).name.substr(0, 15),
+        'Node Name'
+      );
       assert.equal(
         allocationRow.cpu,
         Math.floor(allocStats.resourceUsage.CpuStats.TotalTicks) / cpuUsed,

ui/tests/pages/components/allocations.js

@@ -18,6 +18,7 @@ export default function(selector = '[data-test-allocation]', propKey = 'allocati
       job: text('[data-test-job]'),
       taskGroup: text('[data-test-task-group]'),
       client: text('[data-test-client]'),
+      clientTooltip: attribute('aria-label', '[data-test-client] .tooltip'),
       jobVersion: text('[data-test-job-version]'),
       volume: text('[data-test-volume]'),
       cpu: text('[data-test-cpu]'),

ui/tests/unit/components/tooltip-test.js

@@ -0,0 +1,13 @@
+import { module, test } from 'qunit';
+import { setupTest } from 'ember-qunit';
+import setupGlimmerComponentFactory from 'nomad-ui/tests/helpers/glimmer-factory';
+
+module('Unit | Component | tooltip', function(hooks) {
+  setupTest(hooks);
+  setupGlimmerComponentFactory(hooks, 'tooltip');
+
+  test('long texts are ellipsised in the middle', function(assert) {
+    const tooltip = this.createComponent({ text: 'reeeeeeeeeeeeeeeeeally long text' });
+    assert.equal(tooltip.text, 'reeeeeeeeeeeeee...long text');
+  });
+});