Merge pull request #4387 from hashicorp/b-ui-task-row-link

UI: Make task rows clickable.
hashicorp · Jun 6, 2018 · 4aebd7f · 4aebd7f
2 parents 1b92555 + 89fa0da
commit 4aebd7f
Show file tree

Hide file tree

Showing 3 changed files with 45 additions and 1 deletion.
diff --git a/ui/app/controllers/allocations/allocation/index.js b/ui/app/controllers/allocations/allocation/index.js
@@ -1,6 +1,7 @@
 import { alias } from '@ember/object/computed';
 import Controller, { inject as controller } from '@ember/controller';
 import Sortable from 'nomad-ui/mixins/sortable';
+import { lazyClick } from 'nomad-ui/helpers/lazy-click';
 
 export default Controller.extend(Sortable, {
   allocationController: controller('allocations.allocation'),
@@ -17,4 +18,14 @@ export default Controller.extend(Sortable, {
 
   listToSort: alias('model.states'),
   sortedStates: alias('listSorted'),
+
+  actions: {
+    gotoTask(allocation, task) {
+      this.transitionToRoute('allocations.allocation.task', task);
+    },
+
+    taskClick(allocation, task, event) {
+      lazyClick([() => this.send('gotoTask', allocation, task), event]);
+    },
+  },
 });
diff --git a/ui/app/templates/allocations/allocation/index.hbs b/ui/app/templates/allocations/allocation/index.hbs
@@ -48,7 +48,10 @@
             <th>Addresses</th>
           {{/t.head}}
           {{#t.body as |row|}}
-            <tr data-test-task-row={{row.model.task.name}}>
+            <tr
+              data-test-task-row={{row.model.task.name}}
+              onclick={{action "taskClick" row.model.allocation row.model}}
+              class="is-interactive">
               <td class="is-narrow">
                 {{#if (not row.model.driverStatus.healthy)}}
                   <span data-test-icon="unhealthy-driver" class="tooltip text-center" aria-label="{{row.model.driver}} is unhealthy">

diff --git a/ui/tests/acceptance/allocation-detail-test.js b/ui/tests/acceptance/allocation-detail-test.js
@@ -137,6 +137,36 @@ test('each task row should list high-level information for the task', function(a
   });
 });
 
+test('each task row should link to the task detail page', function(assert) {
+  const task = server.db.taskStates.where({ allocationId: allocation.id }).sortBy('name')[0];
+
+  click('[data-test-task-row] [data-test-name] a');
+
+  andThen(() => {
+    assert.equal(
+      currentURL(),
+      `/allocations/${allocation.id}/${task.name}`,
+      'Task name in task row links to task detail'
+    );
+  });
+
+  andThen(() => {
+    visit(`/allocations/${allocation.id}`);
+  });
+
+  andThen(() => {
+    click('[data-test-task-row]');
+  });
+
+  andThen(() => {
+    assert.equal(
+      currentURL(),
+      `/allocations/${allocation.id}/${task.name}`,
+      'Task row links to task detail'
+    );
+  });
+});
+
 test('tasks with an unhealthy driver have a warning icon', function(assert) {
   assert.ok(find('[data-test-task-row] [data-test-icon="unhealthy-driver"]'), 'Warning is shown');
 });