diff --git a/ui/app/components/job-page/parts/children.js b/ui/app/components/job-page/parts/children.js
index 20f72910d..37aed7bae 100644
--- a/ui/app/components/job-page/parts/children.js
+++ b/ui/app/components/job-page/parts/children.js
@@ -19,9 +19,6 @@ export default class Children extends Component.extend(Sortable) {
   sortDescending = null;
   currentPage = null;
 
-  // Provide an action with access to the router
-  gotoJob() {}
-
   @readOnly('userSettings.pageSize') pageSize;
 
   @computed('job.taskGroups.[]')
diff --git a/ui/app/components/job-row.js b/ui/app/components/job-row.js
index 7413827b0..5d5dbd056 100644
--- a/ui/app/components/job-row.js
+++ b/ui/app/components/job-row.js
@@ -1,5 +1,6 @@
-import { inject as service } from '@ember/service';
 import Component from '@ember/component';
+import { action } from '@ember/object';
+import { inject as service } from '@ember/service';
 import { lazyClick } from '../helpers/lazy-click';
 import { classNames, tagName } from '@ember-decorators/component';
 import classic from 'ember-classic-decorator';
@@ -8,8 +9,9 @@ import classic from 'ember-classic-decorator';
 @tagName('tr')
 @classNames('job-row', 'is-interactive')
 export default class JobRow extends Component {
-  @service system;
+  @service router;
   @service store;
+  @service system;
 
   job = null;
 
@@ -17,9 +19,15 @@ export default class JobRow extends Component {
   // based on the relationship of this job to others.
   context = 'independent';
 
-  onClick() {}
-
   click(event) {
-    lazyClick([this.onClick, event]);
+    lazyClick([this.gotoJob, event]);
+  }
+
+  @action
+  gotoJob() {
+    const { job } = this;
+    this.router.transitionTo('jobs.job', job, {
+      queryParams: { namespace: job.get('namespace.name') },
+    });
   }
 }
diff --git a/ui/app/controllers/jobs/index.js b/ui/app/controllers/jobs/index.js
index ff38e023b..f47792c03 100644
--- a/ui/app/controllers/jobs/index.js
+++ b/ui/app/controllers/jobs/index.js
@@ -260,11 +260,4 @@ export default class IndexController extends Controller.extend(
   setFacetQueryParam(queryParam, selection) {
     this.set(queryParam, serialize(selection));
   }
-
-  @action
-  gotoJob(job) {
-    this.transitionToRoute('jobs.job', job.get('plainId'), {
-      queryParams: { namespace: job.get('namespace.name') },
-    });
-  }
 }
diff --git a/ui/app/templates/components/job-page/parameterized.hbs b/ui/app/templates/components/job-page/parameterized.hbs
index 30368532a..0277a089e 100644
--- a/ui/app/templates/components/job-page/parameterized.hbs
+++ b/ui/app/templates/components/job-page/parameterized.hbs
@@ -12,7 +12,6 @@
       @sortProperty={{@sortProperty}}
       @sortDescending={{@sortDescending}}
       @currentPage={{@currentPage}}
-      @gotoJob={{@gotoJob}}
     />
     <jobPage.ui.Meta />
   </jobPage.ui.Body>
diff --git a/ui/app/templates/components/job-page/parts/children.hbs b/ui/app/templates/components/job-page/parts/children.hbs
index dc6c27517..89da35b6a 100644
--- a/ui/app/templates/components/job-page/parts/children.hbs
+++ b/ui/app/templates/components/job-page/parts/children.hbs
@@ -64,12 +64,7 @@
           </th>
         </t.head>
         <t.body @key="model.id" as |row|>
-          <JobRow
-            data-test-job-row
-            @job={{row.model}}
-            @context="child"
-            @onClick={{action this.gotoJob row.model}}
-          />
+          <JobRow data-test-job-row @job={{row.model}} @context="child" />
         </t.body>
       </ListTable>
       <div class="table-foot">
diff --git a/ui/app/templates/components/job-page/periodic.hbs b/ui/app/templates/components/job-page/periodic.hbs
index a94ded039..dfef27fc3 100644
--- a/ui/app/templates/components/job-page/periodic.hbs
+++ b/ui/app/templates/components/job-page/periodic.hbs
@@ -29,7 +29,6 @@
       @sortProperty={{@sortProperty}}
       @sortDescending={{@sortDescending}}
       @currentPage={{@currentPage}}
-      @gotoJob={{@gotoJob}}
     />
     <jobPage.ui.Meta />
   </jobPage.ui.Body>
diff --git a/ui/app/templates/jobs/index.hbs b/ui/app/templates/jobs/index.hbs
index 3962ac332..903453591 100644
--- a/ui/app/templates/jobs/index.hbs
+++ b/ui/app/templates/jobs/index.hbs
@@ -7,13 +7,21 @@
           data-test-jobs-search
           @searchTerm={{mut this.searchTerm}}
           @onChange={{action this.resetPagination}}
-          @placeholder="Search jobs..." />
+          @placeholder="Search jobs..."
+        />
       {{/if}}
     </div>
     {{#if (media "isMobile")}}
       <div class="toolbar-item is-right-aligned">
         {{#if (can "run job" namespace=this.qpNamespace)}}
-          <LinkTo @route="jobs.run" @query={{hash namespace=this.qpNamespace}} data-test-run-job class="button is-primary">Run Job</LinkTo>
+          <LinkTo
+            @route="jobs.run"
+            @query={{hash namespace=this.qpNamespace}}
+            data-test-run-job
+            class="button is-primary"
+          >
+            Run Job
+          </LinkTo>
         {{else}}
           <button
             data-test-run-job
@@ -21,7 +29,9 @@
             aria-label="You don’t have permission to run jobs"
             disabled
             type="button"
-          >Run Job</button>
+          >
+            Run Job
+          </button>
         {{/if}}
       </div>
     {{/if}}
@@ -33,41 +43,52 @@
             @label="Namespace"
             @options={{this.optionsNamespaces}}
             @selection={{this.qpNamespace}}
-            @onSelect={{action (queue
-              (action this.cacheNamespace)
-              (action this.setFacetQueryParam "qpNamespace")
-            )}} />
+            @onSelect={{action
+              (queue (action this.cacheNamespace) (action this.setFacetQueryParam "qpNamespace"))
+            }}
+          />
         {{/if}}
         <MultiSelectDropdown
           data-test-type-facet
           @label="Type"
           @options={{this.optionsType}}
           @selection={{this.selectionType}}
-          @onSelect={{action this.setFacetQueryParam "qpType"}} />
+          @onSelect={{action this.setFacetQueryParam "qpType"}}
+        />
         <MultiSelectDropdown
           data-test-status-facet
           @label="Status"
           @options={{this.optionsStatus}}
           @selection={{this.selectionStatus}}
-          @onSelect={{action this.setFacetQueryParam "qpStatus"}} />
+          @onSelect={{action this.setFacetQueryParam "qpStatus"}}
+        />
         <MultiSelectDropdown
           data-test-datacenter-facet
           @label="Datacenter"
           @options={{this.optionsDatacenter}}
           @selection={{this.selectionDatacenter}}
-          @onSelect={{action this.setFacetQueryParam "qpDatacenter"}} />
+          @onSelect={{action this.setFacetQueryParam "qpDatacenter"}}
+        />
         <MultiSelectDropdown
           data-test-prefix-facet
           @label="Prefix"
           @options={{this.optionsPrefix}}
           @selection={{this.selectionPrefix}}
-          @onSelect={{action this.setFacetQueryParam "qpPrefix"}} />
+          @onSelect={{action this.setFacetQueryParam "qpPrefix"}}
+        />
       </div>
     </div>
     {{#if (not (media "isMobile"))}}
       <div class="toolbar-item is-right-aligned">
         {{#if (can "run job" namespace=this.qpNamespace)}}
-          <LinkTo @route="jobs.run" @query={{hash namespace=this.qpNamespace}} data-test-run-job class="button is-primary">Run Job</LinkTo>
+          <LinkTo
+            @route="jobs.run"
+            @query={{hash namespace=this.qpNamespace}}
+            data-test-run-job
+            class="button is-primary"
+          >
+            Run Job
+          </LinkTo>
         {{else}}
           <button
             data-test-run-job
@@ -75,71 +96,110 @@
             aria-label="You don’t have permission to run jobs"
             disabled
             type="button"
-          >Run Job</button>
+          >
+            Run Job
+          </button>
         {{/if}}
       </div>
     {{/if}}
   </div>
   {{#if this.isForbidden}}
     <ForbiddenMessage />
-  {{else}}
-    {{#if this.sortedJobs}}
-      <ListPagination
-        @source={{this.sortedJobs}}
-        @size={{this.pageSize}}
-        @page={{this.currentPage}} as |p|>
-        <ListTable
-          @source={{p.list}}
-          @sortProperty={{this.sortProperty}}
-          @sortDescending={{this.sortDescending}}
-          @class="with-foot" as |t|>
-          <t.head>
-            <t.sort-by @prop="name">Name</t.sort-by>
-            {{#if this.system.shouldShowNamespaces}}
-              <t.sort-by @prop="namespace.name">Namespace</t.sort-by>
+  {{else if this.sortedJobs}}
+    <ListPagination
+      @source={{this.sortedJobs}}
+      @size={{this.pageSize}}
+      @page={{this.currentPage}} as |p|
+    >
+      <ListTable
+        @source={{p.list}}
+        @sortProperty={{this.sortProperty}}
+        @sortDescending={{this.sortDescending}}
+        @class="with-foot" as |t|
+      >
+        <t.head>
+          <t.sort-by @prop="name">
+            Name
+          </t.sort-by>
+          {{#if this.system.shouldShowNamespaces}}
+            <t.sort-by @prop="namespace.name">
+              Namespace
+            </t.sort-by>
+          {{/if}}
+          <t.sort-by @prop="status">
+            Status
+          </t.sort-by>
+          <t.sort-by @prop="type">
+            Type
+          </t.sort-by>
+          <t.sort-by @prop="priority">
+            Priority
+          </t.sort-by>
+          <th>
+            Groups
+          </th>
+          <th class="is-3">
+            Summary
+          </th>
+        </t.head>
+        <t.body @key="model.id" as |row|>
+          <JobRow @data-test-job-row={{row.model.plainId}} @job={{row.model}} />
+        </t.body>
+      </ListTable>
+      <div class="table-foot">
+        <PageSizeSelect @onChange={{action this.resetPagination}} />
+        <nav class="pagination">
+          <div class="pagination-numbers">
+            {{p.startsAt}}
+            –
+            {{p.endsAt}}
+            of
+            {{this.sortedJobs.length}}
+            {{#if this.searchTerm}}
+              <em>
+                (
+                {{dec this.sortedJobs.length this.filteredJobs.length}}
+                hidden by search term)
+              </em>
             {{/if}}
-            <t.sort-by @prop="status">Status</t.sort-by>
-            <t.sort-by @prop="type">Type</t.sort-by>
-            <t.sort-by @prop="priority">Priority</t.sort-by>
-            <th>Groups</th>
-            <th class="is-3">Summary</th>
-          </t.head>
-          <t.body @key="model.id" as |row|>
-            <JobRow @data-test-job-row={{row.model.plainId}} @job={{row.model}} @onClick={{action "gotoJob" row.model}} />
-          </t.body>
-        </ListTable>
-        <div class="table-foot">
-          <PageSizeSelect @onChange={{action this.resetPagination}} />
-          <nav class="pagination">
-            <div class="pagination-numbers">
-              {{p.startsAt}}&ndash;{{p.endsAt}} of {{this.sortedJobs.length}}
-              {{#if this.searchTerm}}
-                <em>({{dec this.sortedJobs.length this.filteredJobs.length}} hidden by search term)</em>
-              {{/if}}
-            </div>
-            <p.prev @class="pagination-previous">{{x-icon "chevron-left"}}</p.prev>
-            <p.next @class="pagination-next">{{x-icon "chevron-right"}}</p.next>
-            <ul class="pagination-list"></ul>
-          </nav>
-        </div>
-      </ListPagination>
-    {{else}}
-      <div data-test-empty-jobs-list class="empty-message">
-        {{#if (eq this.visibleJobs.length 0)}}
-          <h3 data-test-empty-jobs-list-headline class="empty-message-headline">No Jobs</h3>
-          <p class="empty-message-body">
-            The cluster is currently empty.
-          </p>
-        {{else if (eq this.filteredJobs.length 0)}}
-          <h3 data-test-empty-jobs-list-headline class="empty-message-headline">No Matches</h3>
-          <p class="empty-message-body">
-            No jobs match your current filter selection.
-          </p>
-        {{else if this.searchTerm}}
-          <h3 data-test-empty-jobs-list-headline class="empty-message-headline">No Matches</h3>
-          <p class="empty-message-body">No jobs match the term <strong>{{this.searchTerm}}</strong></p>
-        {{/if}}
+          </div>
+          <p.prev @class="pagination-previous">
+            {{x-icon "chevron-left"}}
+          </p.prev>
+          <p.next @class="pagination-next">
+            {{x-icon "chevron-right"}}
+          </p.next>
+          <ul class="pagination-list"></ul>
+        </nav>
       </div>
-    {{/if}}
+    </ListPagination>
+  {{else}}
+    <div data-test-empty-jobs-list class="empty-message">
+      {{#if (eq this.visibleJobs.length 0)}}
+        <h3 data-test-empty-jobs-list-headline class="empty-message-headline">
+          No Jobs
+        </h3>
+        <p class="empty-message-body">
+          The cluster is currently empty.
+        </p>
+      {{else if (eq this.filteredJobs.length 0)}}
+        <h3 data-test-empty-jobs-list-headline class="empty-message-headline">
+          No Matches
+        </h3>
+        <p class="empty-message-body">
+          No jobs match your current filter selection.
+        </p>
+      {{else if this.searchTerm}}
+        <h3 data-test-empty-jobs-list-headline class="empty-message-headline">
+          No Matches
+        </h3>
+        <p class="empty-message-body">
+          No jobs match the term
+          <strong>
+            {{this.searchTerm}}
+          </strong>
+        </p>
+      {{/if}}
+    </div>
   {{/if}}
-</section>
+</section>
\ No newline at end of file