Merge pull request #4458 from hashicorp/f-ui-refactor-breadcrumbs

UI: Refactor breadcrumbs

ui/app/components/app-breadcrumbs.js

@@ -0,0 +1,11 @@
+import Component from '@ember/component';
+import { inject as service } from '@ember/service';
+import { reads } from '@ember/object/computed';
+
+export default Component.extend({
+  breadcrumbsService: service('breadcrumbs'),
+
+  tagName: '',
+
+  breadcrumbs: reads('breadcrumbsService.breadcrumbs'),
+});

ui/app/components/job-page/abstract.js

@@ -1,7 +1,5 @@
 import Component from '@ember/component';
-import { computed } from '@ember/object';
 import { inject as service } from '@ember/service';
-import { qpBuilder } from 'nomad-ui/utils/classes/query-params';
 
 export default Component.extend({
   system: service(),
@@ -20,23 +18,6 @@ export default Component.extend({
   // Set to a { title, description } to surface an error
   errorMessage: null,
 
-  breadcrumbs: computed('job.{name,id}', function() {
-    const job = this.get('job');
-    return [
-      { label: 'Jobs', args: ['jobs'] },
-      {
-        label: job.get('name'),
-        args: [
-          'jobs.job',
-          job,
-          qpBuilder({
-            jobNamespace: job.get('namespace.name') || 'default',
-          }),
-        ],
-      },
-    ];
-  }),
-
   actions: {
     clearErrorMessage() {
       this.set('errorMessage', null);

ui/app/controllers/allocations/allocation/index.js

@@ -1,11 +1,9 @@
 import { alias } from '@ember/object/computed';
-import Controller, { inject as controller } from '@ember/controller';
+import Controller from '@ember/controller';
 import Sortable from 'nomad-ui/mixins/sortable';
 import { lazyClick } from 'nomad-ui/helpers/lazy-click';
 
 export default Controller.extend(Sortable, {
-  allocationController: controller('allocations.allocation'),
-
   queryParams: {
     sortProperty: 'sort',
     sortDescending: 'desc',
@@ -14,8 +12,6 @@ export default Controller.extend(Sortable, {
   sortProperty: 'name',
   sortDescending: false,
 
-  breadcrumbs: alias('allocationController.breadcrumbs'),
-
   listToSort: alias('model.states'),
   sortedStates: alias('listSorted'),
 

ui/app/controllers/allocations/allocation/task/index.js

@@ -1,12 +1,8 @@
-import Controller, { inject as controller } from '@ember/controller';
+import Controller from '@ember/controller';
 import { computed } from '@ember/object';
 import { alias } from '@ember/object/computed';
 
 export default Controller.extend({
-  taskController: controller('allocations.allocation.task'),
-
-  breadcrumbs: alias('taskController.breadcrumbs'),
-
   network: alias('model.resources.networks.firstObject'),
   ports: computed('network.reservedPorts.[]', 'network.dynamicPorts.[]', function() {
     return (this.get('network.reservedPorts') || [])

ui/app/controllers/jobs/job/definition.js

@@ -1,11 +1,4 @@
-import { alias } from '@ember/object/computed';
-import Controller, { inject as controller } from '@ember/controller';
+import Controller from '@ember/controller';
 import WithNamespaceResetting from 'nomad-ui/mixins/with-namespace-resetting';
 
-export default Controller.extend(WithNamespaceResetting, {
-  jobController: controller('jobs.job'),
-
-  job: alias('model.job'),
-
-  breadcrumbs: alias('jobController.breadcrumbs'),
-});
+export default Controller.extend(WithNamespaceResetting);

ui/app/controllers/jobs/job/deployments.js

@@ -1,12 +1,4 @@
-import { alias } from '@ember/object/computed';
-import Controller, { inject as controller } from '@ember/controller';
+import Controller from '@ember/controller';
 import WithNamespaceResetting from 'nomad-ui/mixins/with-namespace-resetting';
 
-export default Controller.extend(WithNamespaceResetting, {
-  jobController: controller('jobs.job'),
-
-  job: alias('model'),
-  deployments: alias('model.deployments'),
-
-  breadcrumbs: alias('jobController.breadcrumbs'),
-});
+export default Controller.extend(WithNamespaceResetting);

ui/app/controllers/jobs/job/index.js

@@ -1,13 +1,10 @@
 import { inject as service } from '@ember/service';
-import { alias } from '@ember/object/computed';
-import Controller, { inject as controller } from '@ember/controller';
+import Controller from '@ember/controller';
 import WithNamespaceResetting from 'nomad-ui/mixins/with-namespace-resetting';
 
 export default Controller.extend(WithNamespaceResetting, {
   system: service(),
 
-  jobController: controller('jobs.job'),
-
   queryParams: {
     currentPage: 'page',
     sortProperty: 'sort',
@@ -19,9 +16,6 @@ export default Controller.extend(WithNamespaceResetting, {
   sortProperty: 'name',
   sortDescending: false,
 
-  breadcrumbs: alias('jobController.breadcrumbs'),
-  job: alias('model'),
-
   actions: {
     gotoTaskGroup(taskGroup) {
       this.transitionToRoute('jobs.job.task-group', taskGroup.get('job'), taskGroup);

ui/app/controllers/jobs/job/task-group.js

@@ -1,14 +1,11 @@
 import { alias } from '@ember/object/computed';
-import Controller, { inject as controller } from '@ember/controller';
+import Controller from '@ember/controller';
 import { computed } from '@ember/object';
 import Sortable from 'nomad-ui/mixins/sortable';
 import Searchable from 'nomad-ui/mixins/searchable';
 import WithNamespaceResetting from 'nomad-ui/mixins/with-namespace-resetting';
-import { qpBuilder } from 'nomad-ui/utils/classes/query-params';
 
 export default Controller.extend(Sortable, Searchable, WithNamespaceResetting, {
-  jobController: controller('jobs.job'),
-
   queryParams: {
     currentPage: 'page',
     searchTerm: 'search',
@@ -32,19 +29,6 @@ export default Controller.extend(Sortable, Searchable, WithNamespaceResetting, {
   listToSearch: alias('listSorted'),
   sortedAllocations: alias('listSearched'),
 
-  breadcrumbs: computed('jobController.breadcrumbs.[]', 'model.{name}', function() {
-    return this.get('jobController.breadcrumbs').concat([
-      {
-        label: this.get('model.name'),
-        args: [
-          'jobs.job.task-group',
-          this.get('model.name'),
-          qpBuilder({ jobNamespace: this.get('model.job.namespace.name') || 'default' }),
-        ],
-      },
-    ]);
-  }),
-
   actions: {
     gotoAllocation(allocation) {
       this.transitionToRoute('allocations.allocation', allocation);

ui/app/controllers/jobs/job/versions.js

@@ -1,12 +1,4 @@
-import { alias } from '@ember/object/computed';
-import Controller, { inject as controller } from '@ember/controller';
+import Controller from '@ember/controller';
 import WithNamespaceResetting from 'nomad-ui/mixins/with-namespace-resetting';
 
-export default Controller.extend(WithNamespaceResetting, {
-  jobController: controller('jobs.job'),
-
-  job: alias('model'),
-  versions: alias('model.versions'),
-
-  breadcrumbs: alias('jobController.breadcrumbs'),
-});
+export default Controller.extend(WithNamespaceResetting);

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.index'] },
+      ...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/allocations/allocation/task.js

@@ -5,6 +5,16 @@ import EmberError from '@ember/error';
 export default Route.extend({
   store: service(),
 
+  breadcrumbs(model) {
+    if (!model) return [];
+    return [
+      {
+        label: model.get('name'),
+        args: ['allocations.allocation.task', model.get('allocation'), model],
+      },
+    ];
+  },
+
   model({ name }) {
     const allocation = this.modelFor('allocations.allocation');
     if (allocation) {

ui/app/routes/clients.js

@@ -8,6 +8,13 @@ export default Route.extend(WithForbiddenState, {
   store: service(),
   system: service(),
 
+  breadcrumbs: [
+    {
+      label: 'Clients',
+      args: ['clients.index'],
+    },
+  ],
+
   beforeModel() {
     return this.get('system.leader');
   },

ui/app/routes/clients/client.js

@@ -12,6 +12,16 @@ export default Route.extend(WithWatchers, {
     return this._super(...arguments).catch(notifyError(this));
   },
 
+  breadcrumbs(model) {
+    if (!model) return [];
+    return [
+      {
+        label: model.get('shortId'),
+        args: ['clients.client', model.get('id')],
+      },
+    ];
+  },
+
   afterModel(model) {
     if (model && model.get('isPartial')) {
       return model.reload().then(node => node.get('allocations'));

ui/app/routes/jobs.js

@@ -8,6 +8,13 @@ export default Route.extend(WithForbiddenState, {
   system: service(),
   store: service(),
 
+  breadcrumbs: [
+    {
+      label: 'Jobs',
+      args: ['jobs.index'],
+    },
+  ],
+
   beforeModel() {
     return this.get('system.namespaces');
   },

ui/app/routes/jobs/job.js

@@ -2,11 +2,14 @@ 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 { jobCrumbs } from 'nomad-ui/utils/breadcrumb-utils';
 
 export default Route.extend({
   store: service(),
   token: service(),
 
+  breadcrumbs: jobCrumbs,
+
   serialize(model) {
     return { job_name: model.get('plainId') };
   },