diff --git a/ui/app/components/job-page/parts/summary.js b/ui/app/components/job-page/parts/summary.js
index 0cb821cc8..51aace4a4 100644
--- a/ui/app/components/job-page/parts/summary.js
+++ b/ui/app/components/job-page/parts/summary.js
@@ -1,14 +1,32 @@
 import Component from '@ember/component';
-import { computed } from '@ember/object';
+import { action, computed } from '@ember/object';
+import { inject as service } from '@ember/service';
 import { classNames } from '@ember-decorators/component';
 import classic from 'ember-classic-decorator';
 
 @classic
 @classNames('boxed-section')
 export default class Summary extends Component {
+  @service router;
+
   job = null;
   forceCollapsed = false;
 
+  @action
+  gotoAllocations(status) {
+    this.router.transitionTo('jobs.job.allocations', this.job, {
+      queryParams: {
+        status: JSON.stringify(status),
+        namespace: this.job.get('namespace.name'),
+      },
+    });
+  }
+
+  @action
+  onSliceClick(ev, slice) {
+    this.gotoAllocations([slice.label.camelize()]);
+  }
+
   @computed('forceCollapsed')
   get isExpanded() {
     if (this.forceCollapsed) return false;
diff --git a/ui/app/templates/components/job-page/parts/summary.hbs b/ui/app/templates/components/job-page/parts/summary.hbs
index ebd75dc56..9b4ed8509 100644
--- a/ui/app/templates/components/job-page/parts/summary.hbs
+++ b/ui/app/templates/components/job-page/parts/summary.hbs
@@ -44,6 +44,7 @@
       (if a.item.hasChildren "children-status-bar" "allocation-status-bar")
       allocationContainer=a.item.summary
       job=a.item.summary
+      onSliceClick=this.onSliceClick
       class="split-view" as |chart|
     }}
       <ol data-test-legend class="legend">