Use the new breadcrumbs pattern for allocations

ui/app/routes/allocations/allocation.js

@@ -3,12 +3,38 @@ import { collect } from '@ember/object/computed';
 import { watchRecord } from 'nomad-ui/utils/properties/watch';
 import WithWatchers from 'nomad-ui/mixins/with-watchers';
 import notifyError from 'nomad-ui/utils/notify-error';
+import { qpBuilder } from 'nomad-ui/utils/classes/query-params';
+import { jobCrumbs } from 'nomad-ui/utils/breadcrumb-utils';
 
 export default Route.extend(WithWatchers, {
   startWatchers(controller, model) {
     controller.set('watcher', this.get('watch').perform(model));
   },
 
+  // Allocation breadcrumbs extend from job / task group breadcrumbs
+  // even though the route structure does not.
+  breadcrumbs(model) {
+    return [
+      { label: 'Jobs', args: ['jobs'] },
+      ...jobCrumbs(model.get('job')),
+      {
+        label: model.get('taskGroupName'),
+        args: [
+          'jobs.job.task-group',
+          model.get('job'),
+          model.get('taskGroupName'),
+          qpBuilder({
+            jobNamespace: model.get('namespace.name') || 'default',
+          }),
+        ],
+      },
+      {
+        label: model.get('shortId'),
+        args: ['allocations.allocation', model],
+      },
+    ];
+  },
+
   model() {
     // Preload the job for the allocation since it's required for the breadcrumb trail
     return this._super(...arguments)

ui/app/routes/jobs/job.js

@@ -2,38 +2,13 @@ import { inject as service } from '@ember/service';
 import Route from '@ember/routing/route';
 import RSVP from 'rsvp';
 import notifyError from 'nomad-ui/utils/notify-error';
-import PromiseObject from 'nomad-ui/utils/classes/promise-object';
-import { qpBuilder } from 'nomad-ui/utils/classes/query-params';
-
-const jobCrumb = job => ({
-  label: job.get('trimmedName'),
-  args: [
-    'jobs.job.index',
-    job.get('plainId'),
-    qpBuilder({
-      jobNamespace: job.get('namespace.name') || 'default',
-    }),
-  ],
-});
+import { jobCrumbs } from 'nomad-ui/utils/breadcrumb-utils';
 
 export default Route.extend({
   store: service(),
   token: service(),
 
-  breadcrumbs(model) {
-    if (!model) return [];
-
-    if (model.get('parent.content')) {
-      return [
-        PromiseObject.create({
-          promise: model.get('parent').then(parent => jobCrumb(parent)),
-        }),
-        jobCrumb(model),
-      ];
-    } else {
-      return [jobCrumb(model)];
-    }
-  },
+  breadcrumbs: jobCrumbs,
 
   serialize(model) {
     return { job_name: model.get('plainId') };

ui/app/templates/allocations/allocation/index.hbs

@@ -1,13 +1,5 @@
 {{#global-header class="page-header"}}
-  {{#each breadcrumbs as |breadcrumb index|}}
-    <li class="{{if (eq (inc index) breadcrumbs.length) "is-active"}}">
-      {{#link-to
-        data-test-breadcrumb=breadcrumb.label
-        params=breadcrumb.args}}
-        {{breadcrumb.label}}
-      {{/link-to}}
-    </li>
-  {{/each}}
+  {{app-breadcrumbs}}
 {{/global-header}}
 {{#gutter-menu class="page-body"}}
   <section class="section">

ui/app/templates/components/app-breadcrumbs.hbs

@@ -1,7 +1,7 @@
 {{#each breadcrumbs as |breadcrumb index|}}
   <li class="{{if (eq (inc index) breadcrumbs.length) "is-active"}}">
     {{#if breadcrumb.isPending}}
-      &hellip;
+      <a href="#" aria-label="loading">&hellip;</a>
     {{else}}
       {{#link-to
         params=breadcrumb.args

ui/app/utils/breadcrumb-utils.js

@@ -0,0 +1,28 @@
+import PromiseObject from 'nomad-ui/utils/classes/promise-object';
+import { qpBuilder } from 'nomad-ui/utils/classes/query-params';
+
+export const jobCrumb = job => ({
+  label: job.get('trimmedName'),
+  args: [
+    'jobs.job.index',
+    job.get('plainId'),
+    qpBuilder({
+      jobNamespace: job.get('namespace.name') || 'default',
+    }),
+  ],
+});
+
+export const jobCrumbs = job => {
+  if (!job) return [];
+
+  if (job.get('parent.content')) {
+    return [
+      PromiseObject.create({
+        promise: job.get('parent').then(parent => jobCrumb(parent)),
+      }),
+      jobCrumb(job),
+    ];
+  } else {
+    return [jobCrumb(job)];
+  }
+};