+ {{app-breadcrumbs}}
{{/global-header}}
{{#gutter-menu class="page-body"}}
diff --git a/ui/app/templates/settings.hbs b/ui/app/templates/settings.hbs
index e781df8a2f1c..2e4ddc936321 100644
--- a/ui/app/templates/settings.hbs
+++ b/ui/app/templates/settings.hbs
@@ -1,5 +1,6 @@
{{#global-header class="page-header"}}
+ {{app-breadcrumbs}}
{{/global-header}}
{{#gutter-menu class="page-body"}}
{{outlet}}
diff --git a/ui/app/utils/breadcrumb-utils.js b/ui/app/utils/breadcrumb-utils.js
new file mode 100644
index 000000000000..699d3f87522c
--- /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)];
+ }
+};
diff --git a/ui/tests/acceptance/client-detail-test.js b/ui/tests/acceptance/client-detail-test.js
index 72204b92b2d1..3d72e868deba 100644
--- a/ui/tests/acceptance/client-detail-test.js
+++ b/ui/tests/acceptance/client-detail-test.js
@@ -26,19 +26,19 @@ test('/clients/:id should have a breadcrumb trail linking back to clients', func
andThen(() => {
assert.equal(
- find('[data-test-breadcrumb="clients"]').textContent.trim(),
+ find('[data-test-breadcrumb="clients.index"]').textContent.trim(),
'Clients',
'First breadcrumb says clients'
);
assert.equal(
- find('[data-test-breadcrumb="client"]').textContent.trim(),
+ find('[data-test-breadcrumb="clients.client"]').textContent.trim(),
node.id.split('-')[0],
'Second breadcrumb says the node short id'
);
});
andThen(() => {
- click(find('[data-test-breadcrumb="clients"]'));
+ click(find('[data-test-breadcrumb="clients.index"]'));
});
andThen(() => {
diff --git a/ui/tests/acceptance/task-detail-test.js b/ui/tests/acceptance/task-detail-test.js
index ee9e83821f5d..712913f1002f 100644
--- a/ui/tests/acceptance/task-detail-test.js
+++ b/ui/tests/acceptance/task-detail-test.js
@@ -37,32 +37,32 @@ test('breadcrumbs match jobs / job / task group / allocation / task', function(a
const shortId = allocation.id.split('-')[0];
assert.equal(
- find('[data-test-breadcrumb="Jobs"]').textContent.trim(),
+ find('[data-test-breadcrumb="jobs.index"]').textContent.trim(),
'Jobs',
'Jobs is the first breadcrumb'
);
assert.equal(
- find(`[data-test-breadcrumb="${job.name}"]`).textContent.trim(),
+ find('[data-test-breadcrumb="jobs.job.index"]').textContent.trim(),
job.name,
'Job is the second breadcrumb'
);
assert.equal(
- find(`[data-test-breadcrumb="${taskGroup}`).textContent.trim(),
+ find('[data-test-breadcrumb="jobs.job.task-group"]').textContent.trim(),
taskGroup,
'Task Group is the third breadcrumb'
);
assert.equal(
- find(`[data-test-breadcrumb="${shortId}"]`).textContent.trim(),
+ find('[data-test-breadcrumb="allocations.allocation"]').textContent.trim(),
shortId,
'Allocation short id is the fourth breadcrumb'
);
assert.equal(
- find(`[data-test-breadcrumb="${task.name}"]`).textContent.trim(),
+ find('[data-test-breadcrumb="allocations.allocation.task"]').textContent.trim(),
task.name,
'Task name is the fifth breadcrumb'
);
- click('[data-test-breadcrumb="Jobs"]');
+ click('[data-test-breadcrumb="jobs.index"]');
andThen(() => {
assert.equal(currentURL(), '/jobs', 'Jobs breadcrumb links correctly');
});
@@ -70,7 +70,7 @@ test('breadcrumbs match jobs / job / task group / allocation / task', function(a
visit(`/allocations/${allocation.id}/${task.name}`);
});
andThen(() => {
- click(`[data-test-breadcrumb="${job.name}"]`);
+ click('[data-test-breadcrumb="jobs.job.index"]');
});
andThen(() => {
assert.equal(currentURL(), `/jobs/${job.id}`, 'Job breadcrumb links correctly');
@@ -79,7 +79,7 @@ test('breadcrumbs match jobs / job / task group / allocation / task', function(a
visit(`/allocations/${allocation.id}/${task.name}`);
});
andThen(() => {
- click(`[data-test-breadcrumb="${taskGroup}"]`);
+ click('[data-test-breadcrumb="jobs.job.task-group"]');
});
andThen(() => {
assert.equal(
@@ -92,7 +92,7 @@ test('breadcrumbs match jobs / job / task group / allocation / task', function(a
visit(`/allocations/${allocation.id}/${task.name}`);
});
andThen(() => {
- click(`[data-test-breadcrumb="${shortId}"]`);
+ click('[data-test-breadcrumb="allocations.allocation"]');
});
andThen(() => {
assert.equal(
diff --git a/ui/tests/acceptance/task-group-detail-test.js b/ui/tests/acceptance/task-group-detail-test.js
index 7db6f6f27452..7c99f4a18c40 100644
--- a/ui/tests/acceptance/task-group-detail-test.js
+++ b/ui/tests/acceptance/task-group-detail-test.js
@@ -86,31 +86,31 @@ test('/jobs/:id/:task-group should list high-level metrics for the allocation',
test('/jobs/:id/:task-group should have breadcrumbs for job and jobs', function(assert) {
assert.equal(
- find('[data-test-breadcrumb="Jobs"]').textContent.trim(),
+ find('[data-test-breadcrumb="jobs.index"]').textContent.trim(),
'Jobs',
'First breadcrumb says jobs'
);
assert.equal(
- find(`[data-test-breadcrumb="${job.name}"]`).textContent.trim(),
+ find('[data-test-breadcrumb="jobs.job.index"]').textContent.trim(),
job.name,
'Second breadcrumb says the job name'
);
assert.equal(
- find(`[data-test-breadcrumb="${taskGroup.name}"]`).textContent.trim(),
+ find('[data-test-breadcrumb="jobs.job.task-group"]').textContent.trim(),
taskGroup.name,
'Third breadcrumb says the job name'
);
});
test('/jobs/:id/:task-group first breadcrumb should link to jobs', function(assert) {
- click('[data-test-breadcrumb="Jobs"]');
+ click('[data-test-breadcrumb="jobs.index"]');
andThen(() => {
assert.equal(currentURL(), '/jobs', 'First breadcrumb links back to jobs');
});
});
test('/jobs/:id/:task-group second breadcrumb should link to the job for the task group', function(assert) {
- click(`[data-test-breadcrumb="${job.name}"]`);
+ click('[data-test-breadcrumb="jobs.job.index"]');
andThen(() => {
assert.equal(
currentURL(),
diff --git a/ui/tests/integration/app-breadcrumbs-test.js b/ui/tests/integration/app-breadcrumbs-test.js
new file mode 100644
index 000000000000..c046791613e2
--- /dev/null
+++ b/ui/tests/integration/app-breadcrumbs-test.js
@@ -0,0 +1,85 @@
+import Service from '@ember/service';
+import { getOwner } from '@ember/application';
+import RSVP from 'rsvp';
+import { test, moduleForComponent } from 'ember-qunit';
+import { findAll } from 'ember-native-dom-helpers';
+import wait from 'ember-test-helpers/wait';
+import hbs from 'htmlbars-inline-precompile';
+import PromiseObject from 'nomad-ui/utils/classes/promise-object';
+
+moduleForComponent('app-breadcrumbs', 'Integration | Component | app breadcrumbs', {
+ integration: true,
+ beforeEach() {
+ const mockBreadcrumbs = Service.extend({
+ breadcrumbs: [],
+ });
+
+ this.register('service:breadcrumbs', mockBreadcrumbs);
+ this.breadcrumbs = getOwner(this).lookup('service:breadcrumbs');
+ },
+});
+
+const commonCrumbs = [{ label: 'One', args: ['one'] }, { label: 'Two', args: ['two'] }];
+
+const template = hbs`
+ {{app-breadcrumbs}}
+`;
+
+test('breadcrumbs comes from the breadcrumbs service', function(assert) {
+ this.breadcrumbs.set('breadcrumbs', commonCrumbs);
+
+ this.render(template);
+
+ assert.equal(
+ findAll('[data-test-breadcrumb]').length,
+ commonCrumbs.length,
+ 'The number of crumbs matches the crumbs from the service'
+ );
+});
+
+test('every breadcrumb is rendered correctly', function(assert) {
+ this.breadcrumbs.set('breadcrumbs', commonCrumbs);
+
+ this.render(template);
+
+ const renderedCrumbs = findAll('[data-test-breadcrumb]');
+
+ renderedCrumbs.forEach((crumb, index) => {
+ assert.equal(
+ crumb.textContent.trim(),
+ commonCrumbs[index].label,
+ `Crumb ${index} is ${commonCrumbs[index].label}`
+ );
+ });
+});
+
+test('when breadcrumbs are pending promises, an ellipsis is rendered', function(assert) {
+ let resolvePromise;
+ const promise = new RSVP.Promise(resolve => {
+ resolvePromise = resolve;
+ });
+
+ this.breadcrumbs.set('breadcrumbs', [
+ { label: 'One', args: ['one'] },
+ PromiseObject.create({ promise }),
+ { label: 'Three', args: ['three'] },
+ ]);
+
+ this.render(template);
+
+ assert.equal(
+ findAll('[data-test-breadcrumb]')[1].textContent.trim(),
+ '…',
+ 'Promise breadcrumb is in a loading state'
+ );
+
+ resolvePromise({ label: 'Two', args: ['two'] });
+
+ return wait().then(() => {
+ assert.equal(
+ findAll('[data-test-breadcrumb]')[1].textContent.trim(),
+ 'Two',
+ 'Promise breadcrumb has resolved and now renders Two'
+ );
+ });
+});
diff --git a/ui/tests/unit/services/breadcrumbs-test.js b/ui/tests/unit/services/breadcrumbs-test.js
new file mode 100644
index 000000000000..6ec833556c12
--- /dev/null
+++ b/ui/tests/unit/services/breadcrumbs-test.js
@@ -0,0 +1,149 @@
+import Service from '@ember/service';
+import Route from '@ember/routing/route';
+import Controller from '@ember/controller';
+import { get } from '@ember/object';
+import { alias } from '@ember/object/computed';
+import { getOwner } from '@ember/application';
+import RSVP from 'rsvp';
+import { moduleFor, test } from 'ember-qunit';
+import PromiseObject from 'nomad-ui/utils/classes/promise-object';
+
+const makeRoute = (crumbs, controller = {}) =>
+ Route.extend({
+ breadcrumbs: crumbs,
+ controller: Controller.extend(controller).create(),
+ });
+
+moduleFor('service:breadcrumbs', 'Unit | Service | Breadcrumbs', {
+ beforeEach() {
+ const mockRouter = Service.extend({
+ currentRouteName: 'application',
+ currentURL: '/',
+ });
+
+ this.register('service:router', mockRouter);
+ this.router = getOwner(this).lookup('service:router');
+
+ const none = makeRoute();
+ const fixed = makeRoute([{ label: 'Static', args: ['static.index'] }]);
+ const manyFixed = makeRoute([
+ { label: 'Static 1', args: ['static.index', 1] },
+ { label: 'Static 2', args: ['static.index', 2] },
+ ]);
+ const dynamic = makeRoute(model => [{ label: model, args: ['dynamic.index', model] }], {
+ model: 'Label of the Crumb',
+ });
+ const manyDynamic = makeRoute(
+ model => [
+ { label: get(model, 'fishOne'), args: ['dynamic.index', get(model, 'fishOne')] },
+ { label: get(model, 'fishTwo'), args: ['dynamic.index', get(model, 'fishTwo')] },
+ ],
+ {
+ model: {
+ fishOne: 'red',
+ fishTwo: 'blue',
+ },
+ }
+ );
+ const promise = makeRoute([
+ PromiseObject.create({
+ promise: RSVP.Promise.resolve({
+ label: 'delayed',
+ args: ['wait.for.it'],
+ }),
+ }),
+ ]);
+ const fromURL = makeRoute(model => [{ label: model, args: ['url'] }], {
+ router: getOwner(this).lookup('service:router'),
+ model: alias('router.currentURL'),
+ });
+
+ this.register('route:none', none);
+ this.register('route:none.more-none', none);
+ this.register('route:static', fixed);
+ this.register('route:static.many', manyFixed);
+ this.register('route:dynamic', dynamic);
+ this.register('route:dynamic.many', manyDynamic);
+ this.register('route:promise', promise);
+ this.register('route:url', fromURL);
+ },
+
+ subject() {
+ return getOwner(this)
+ .factoryFor('service:breadcrumbs')
+ .create();
+ },
+});
+
+test('when the route hierarchy has no breadcrumbs', function(assert) {
+ this.router.set('currentRouteName', 'none');
+
+ const service = this.subject();
+ assert.deepEqual(service.get('breadcrumbs'), []);
+});
+
+test('when the route hierarchy has one segment with static crumbs', function(assert) {
+ this.router.set('currentRouteName', 'static');
+
+ const service = this.subject();
+ assert.deepEqual(service.get('breadcrumbs'), [{ label: 'Static', args: ['static.index'] }]);
+});
+
+test('when the route hierarchy has multiple segments with static crumbs', function(assert) {
+ this.router.set('currentRouteName', 'static.many');
+
+ const service = this.subject();
+ assert.deepEqual(service.get('breadcrumbs'), [
+ { label: 'Static', args: ['static.index'] },
+ { label: 'Static 1', args: ['static.index', 1] },
+ { label: 'Static 2', args: ['static.index', 2] },
+ ]);
+});
+
+test('when the route hierarchy has a function as its breadcrumbs property', function(assert) {
+ this.router.set('currentRouteName', 'dynamic');
+
+ const service = this.subject();
+ assert.deepEqual(service.get('breadcrumbs'), [
+ { label: 'Label of the Crumb', args: ['dynamic.index', 'Label of the Crumb'] },
+ ]);
+});
+
+test('when the route hierarchy has multiple segments with dynamic crumbs', function(assert) {
+ this.router.set('currentRouteName', 'dynamic.many');
+
+ const service = this.subject();
+ assert.deepEqual(service.get('breadcrumbs'), [
+ { label: 'Label of the Crumb', args: ['dynamic.index', 'Label of the Crumb'] },
+ { label: 'red', args: ['dynamic.index', 'red'] },
+ { label: 'blue', args: ['dynamic.index', 'blue'] },
+ ]);
+});
+
+test('when a route provides a breadcrumb that is a promise, it gets passed through to the template', function(assert) {
+ this.router.set('currentRouteName', 'promise');
+
+ const service = this.subject();
+ assert.ok(service.get('breadcrumbs.firstObject') instanceof PromiseObject);
+});
+
+// This happens when transitioning to the current route but with a different model
+// jobs.job.index --> jobs.job.index
+// /jobs/one --> /jobs/two
+test('when the route stays the same but the url changes, breadcrumbs get recomputed', function(assert) {
+ this.router.set('currentRouteName', 'url');
+
+ const service = this.subject();
+ assert.deepEqual(
+ service.get('breadcrumbs'),
+ [{ label: '/', args: ['url'] }],
+ 'The label is initially / as is the router currentURL'
+ );
+
+ this.router.set('currentURL', '/somewhere/else');
+ assert.deepEqual(
+ service.get('breadcrumbs'),
+ [{ label: '/somewhere/else', args: ['url'] }],
+ 'The label changes with currentURL since it is an alias and a change to currentURL recomputes breadcrumbs'
+ );
+});