From 8064cf5d288abeb2868b359f02b088d5e53f65a4 Mon Sep 17 00:00:00 2001
From: Michael Lange <dingoeatingfuzz@gmail.com>
Date: Wed, 27 Jun 2018 12:48:26 -0700
Subject: [PATCH] Use the new breadcrumbs pattern for allocations

---
 ui/app/routes/allocations/allocation.js       | 26 +++++++++++++++++
 ui/app/routes/jobs/job.js                     | 29 ++-----------------
 .../allocations/allocation/index.hbs          | 10 +------
 .../templates/components/app-breadcrumbs.hbs  |  2 +-
 ui/app/utils/breadcrumb-utils.js              | 28 ++++++++++++++++++
 5 files changed, 58 insertions(+), 37 deletions(-)
 create mode 100644 ui/app/utils/breadcrumb-utils.js

diff --git a/ui/app/routes/allocations/allocation.js b/ui/app/routes/allocations/allocation.js
index b09dc1cb3..d7c358663 100644
--- a/ui/app/routes/allocations/allocation.js
+++ b/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)
diff --git a/ui/app/routes/jobs/job.js b/ui/app/routes/jobs/job.js
index 95cb0a558..b424fe997 100644
--- a/ui/app/routes/jobs/job.js
+++ b/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') };
diff --git a/ui/app/templates/allocations/allocation/index.hbs b/ui/app/templates/allocations/allocation/index.hbs
index 7abb77bfc..0e59ce277 100644
--- a/ui/app/templates/allocations/allocation/index.hbs
+++ b/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">
diff --git a/ui/app/templates/components/app-breadcrumbs.hbs b/ui/app/templates/components/app-breadcrumbs.hbs
index 2d2442952..5fee625da 100644
--- a/ui/app/templates/components/app-breadcrumbs.hbs
+++ b/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
diff --git a/ui/app/utils/breadcrumb-utils.js b/ui/app/utils/breadcrumb-utils.js
new file mode 100644
index 000000000..699d3f875
--- /dev/null
+++ b/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)];
+  }
+};