From 89fa0da5da610f3b55a56f89ab458306378a4b17 Mon Sep 17 00:00:00 2001
From: Michael Lange <dingoeatingfuzz@gmail.com>
Date: Wed, 6 Jun 2018 14:25:48 -0700
Subject: [PATCH] Make task rows clickable.

Right now they are the only tables where the entire row isn't a
click-target to drill into the detail page.
---
 .../allocations/allocation/index.js           | 11 +++++++
 .../allocations/allocation/index.hbs          |  5 +++-
 ui/tests/acceptance/allocation-detail-test.js | 30 +++++++++++++++++++
 3 files changed, 45 insertions(+), 1 deletion(-)

diff --git a/ui/app/controllers/allocations/allocation/index.js b/ui/app/controllers/allocations/allocation/index.js
index 4e156c69f5cf..1131d6b7fab4 100644
--- 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
index d1c0375ed2ba..9de41da3a057 100644
--- 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
index d612eb68838c..0720fffa9f27 100644
--- 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');
 });