diff --git a/.changelog/11590.txt b/.changelog/11590.txt new file mode 100644 index 000000000000..9d6b219d07bd --- /dev/null +++ b/.changelog/11590.txt @@ -0,0 +1,3 @@ +```release-note:improvement +ui: Add titles to breadcrumb labels in app navigation bar +``` diff --git a/ui/app/components/app-breadcrumbs.js b/ui/app/components/app-breadcrumbs.js deleted file mode 100644 index 1537febbd2f1..000000000000 --- a/ui/app/components/app-breadcrumbs.js +++ /dev/null @@ -1,13 +0,0 @@ -import Component from '@ember/component'; -import { inject as service } from '@ember/service'; -import { reads } from '@ember/object/computed'; -import { tagName } from '@ember-decorators/component'; -import classic from 'ember-classic-decorator'; - -@classic -@tagName('') -export default class AppBreadcrumbs extends Component { - @service('breadcrumbs') breadcrumbsService; - - @reads('breadcrumbsService.breadcrumbs') breadcrumbs; -} diff --git a/ui/app/components/breadcrumb.js b/ui/app/components/breadcrumb.js new file mode 100644 index 000000000000..813aeccef2cb --- /dev/null +++ b/ui/app/components/breadcrumb.js @@ -0,0 +1,27 @@ +import { assert } from '@ember/debug'; +import { action } from '@ember/object'; +import { inject as service } from '@ember/service'; +import Component from '@glimmer/component'; + +export default class Breadcrumb extends Component { + @service breadcrumbs; + + constructor() { + super(...arguments); + assert('Provide a valid breadcrumb argument', this.args.crumb); + this.register(); + } + + @action register() { + this.breadcrumbs.registerBreadcrumb(this); + } + + @action deregister() { + this.breadcrumbs.deregisterBreadcrumb(this); + } + + willDestroy() { + super.willDestroy(); + this.deregister(); + } +} diff --git a/ui/app/components/breadcrumbs.hbs b/ui/app/components/breadcrumbs.hbs new file mode 100644 index 000000000000..7e807bd1ec73 --- /dev/null +++ b/ui/app/components/breadcrumbs.hbs @@ -0,0 +1 @@ +{{yield this.crumbs}} \ No newline at end of file diff --git a/ui/app/components/breadcrumbs.js b/ui/app/components/breadcrumbs.js new file mode 100644 index 000000000000..8ce6674b16aa --- /dev/null +++ b/ui/app/components/breadcrumbs.js @@ -0,0 +1,10 @@ +import Component from '@glimmer/component'; +import { inject as service } from '@ember/service'; + +export default class Breadcrumbs extends Component { + @service breadcrumbs; + + get crumbs() { + return this.breadcrumbs.crumbs; + } +} diff --git a/ui/app/components/breadcrumbs/default.hbs b/ui/app/components/breadcrumbs/default.hbs new file mode 100644 index 000000000000..baf06cc7801b --- /dev/null +++ b/ui/app/components/breadcrumbs/default.hbs @@ -0,0 +1,16 @@ +
  • + + {{#if @crumb.title}} +
    +
    + {{@crumb.title}} +
    +
    + {{@crumb.label}} +
    +
    + {{else}} + {{@crumb.label}} + {{/if}} +     +
    • \ No newline at end of file diff --git a/ui/app/components/breadcrumbs/job.hbs b/ui/app/components/breadcrumbs/job.hbs new file mode 100644 index 000000000000..87e5e2a7b81c --- /dev/null +++ b/ui/app/components/breadcrumbs/job.hbs @@ -0,0 +1,49 @@ + + {{did-insert trigger.fns.do}} + {{#if trigger.data.isBusy}} +
  • + + … + +
    • + {{/if}} + {{#if trigger.data.isSuccess}} + {{#if trigger.data.result}} +
  • + +
    +
    + Parent Job +
    +
    + {{trigger.data.result.trimmedName}} +
    +
    +     +
    • + {{/if}} +
  • + +
    +
    + {{if this.job.hasChildren "Parent Job" "Job"}} +
    +
    + {{this.job.trimmedName}} +
    +
    +     +
    • + {{/if}} +     \ No newline at end of file diff --git a/ui/app/components/breadcrumbs/job.js b/ui/app/components/breadcrumbs/job.js new file mode 100644 index 000000000000..da688a0e9773 --- /dev/null +++ b/ui/app/components/breadcrumbs/job.js @@ -0,0 +1,22 @@ +import { assert } from '@ember/debug'; +import { action } from '@ember/object'; +import Component from '@glimmer/component'; + +export default class BreadcrumbsJob extends Component { + get job() { + return this.args.crumb.job; + } + + @action + onError(err) { + assert(`Error: ${err.message}`); + } + + @action + fetchParent() { + const hasParent = !!this.job.belongsTo('parent').id(); + if (hasParent) { + return this.job.get('parent'); + } + } +} diff --git a/ui/app/components/trigger.hbs b/ui/app/components/trigger.hbs new file mode 100644 index 000000000000..c6fdb221f2a9 --- /dev/null +++ b/ui/app/components/trigger.hbs @@ -0,0 +1 @@ +{{yield (hash data=this.data fns=this.fns)}} \ No newline at end of file diff --git a/ui/app/components/trigger.js b/ui/app/components/trigger.js new file mode 100644 index 000000000000..17f981b873ef --- /dev/null +++ b/ui/app/components/trigger.js @@ -0,0 +1,68 @@ +import { action } from '@ember/object'; +import Component from '@glimmer/component'; +import { tracked } from '@glimmer/tracking'; +import { task } from 'ember-concurrency'; + +const noOp = () => undefined; + +export default class Trigger extends Component { + @tracked error = null; + @tracked result = null; + + get isBusy() { + return this.triggerTask.isRunning; + } + + get isIdle() { + return this.triggerTask.isIdle; + } + + get isSuccess() { + return this.triggerTask.last?.isSuccessful; + } + + get isError() { + return !!this.error; + } + + get fns() { + return { + do: this.onTrigger, + }; + } + + get onError() { + return this.args.onError ?? noOp; + } + + get onSuccess() { + return this.args.onSuccess ?? noOp; + } + + get data() { + const { isBusy, isIdle, isSuccess, isError, result } = this; + return { isBusy, isIdle, isSuccess, isError, result }; + } + + _reset() { + this.result = null; + this.error = null; + } + + @task(function*() { + this._reset(); + try { + this.result = yield this.args.do(); + this.onSuccess(this.result); + } catch (e) { + this.error = { Error: e }; + this.onError(this.error); + } + }) + triggerTask; + + @action + onTrigger() { + this.triggerTask.perform(); + } +} diff --git a/ui/app/controllers/allocations/allocation.js b/ui/app/controllers/allocations/allocation.js new file mode 100644 index 000000000000..b29d7b6cb02a --- /dev/null +++ b/ui/app/controllers/allocations/allocation.js @@ -0,0 +1,47 @@ +import Controller from '@ember/controller'; +import { inject as service } from '@ember/service'; +import { qpBuilder } from 'nomad-ui/utils/classes/query-params'; + +export default class AllocationsAllocationController extends Controller { + @service store; + + get allocation() { + return this.model; + } + + get job() { + const allocation = this.model; + const jobId = allocation.belongsTo('job').id(); + const job = this.store.peekRecord('job', jobId); + return job; + } + + get jobNamespace() { + const jobNamespaceId = this.job.belongsTo('namespace').id(); + + return jobNamespaceId || 'default'; + } + // Allocation breadcrumbs extend from job / task group breadcrumbs + // even though the route structure does not. + get breadcrumbs() { + const { allocation, job, jobNamespace } = this; + const jobQueryParams = qpBuilder({ + jobNamespace, + }); + + return [ + { label: 'Jobs', args: ['jobs.index', jobQueryParams] }, + { type: 'job', job: job }, + { + title: 'Task Group', + label: allocation.taskGroupName, + args: ['jobs.job.task-group', job.plainId, allocation.taskGroupName, jobQueryParams], + }, + { + title: 'Allocation', + label: allocation.shortId, + args: ['allocations.allocation', allocation], + }, + ]; + } +} diff --git a/ui/app/controllers/allocations/allocation/task.js b/ui/app/controllers/allocations/allocation/task.js new file mode 100644 index 000000000000..3e3c9a0343b3 --- /dev/null +++ b/ui/app/controllers/allocations/allocation/task.js @@ -0,0 +1,15 @@ +import Controller from '@ember/controller'; + +export default class AllocationsAllocationTaskController extends Controller { + get task() { + return this.model; + } + + get breadcrumb() { + return { + title: 'Task', + label: this.task.get('name'), + args: ['allocations.allocation.task', this.task.get('allocation'), this.task], + }; + } +} diff --git a/ui/app/controllers/clients/client.js b/ui/app/controllers/clients/client.js new file mode 100644 index 000000000000..d13eb42be7be --- /dev/null +++ b/ui/app/controllers/clients/client.js @@ -0,0 +1,15 @@ +import Controller from '@ember/controller'; + +export default class ClientsClientController extends Controller { + get client() { + return this.model; + } + + get breadcrumb() { + return { + title: 'Client', + label: this.client.get('shortId'), + args: ['clients.client', this.client.get('id')], + }; + } +} diff --git a/ui/app/controllers/csi/plugins/plugin.js b/ui/app/controllers/csi/plugins/plugin.js new file mode 100644 index 000000000000..d82e83f7f0dc --- /dev/null +++ b/ui/app/controllers/csi/plugins/plugin.js @@ -0,0 +1,21 @@ +import Controller from '@ember/controller'; + +export default class CsiPluginsPluginController extends Controller { + get plugin() { + return this.model; + } + + get breadcrumbs() { + const { plainId } = this.plugin; + return [ + { + label: 'Plugins', + args: ['csi.plugins'], + }, + { + label: plainId, + args: ['csi.plugins.plugin', plainId], + }, + ]; + } +} diff --git a/ui/app/controllers/csi/volumes/volume.js b/ui/app/controllers/csi/volumes/volume.js index e687a078c011..c151e5dec633 100644 --- a/ui/app/controllers/csi/volumes/volume.js +++ b/ui/app/controllers/csi/volumes/volume.js @@ -1,6 +1,7 @@ import Controller from '@ember/controller'; import { inject as service } from '@ember/service'; import { action, computed } from '@ember/object'; +import { qpBuilder } from 'nomad-ui/utils/classes/query-params'; export default class VolumeController extends Controller { // Used in the template @@ -13,6 +14,31 @@ export default class VolumeController extends Controller { ]; volumeNamespace = 'default'; + get volume() { + return this.model; + } + + get breadcrumbs() { + const volume = this.volume; + return [ + { + label: 'Volumes', + args: [ + 'csi.volumes', + qpBuilder({ volumeNamespace: volume.get('namespace.name') || 'default' }), + ], + }, + { + label: volume.name, + args: [ + 'csi.volumes.volume', + volume.plainId, + qpBuilder({ volumeNamespace: volume.get('namespace.name') || 'default' }), + ], + }, + ]; + } + @computed('model.readAllocations.@each.modifyIndex') get sortedReadAllocations() { return this.model.readAllocations.sortBy('modifyIndex').reverse(); diff --git a/ui/app/controllers/jobs.js b/ui/app/controllers/jobs.js index d6d5e36fd664..77b1678a4399 100644 --- a/ui/app/controllers/jobs.js +++ b/ui/app/controllers/jobs.js @@ -1,3 +1,4 @@ import Controller from '@ember/controller'; +// The WithNamespaceResetting Mixin uses Controller Injection and requires us to keep this controller around export default class JobsController extends Controller {} diff --git a/ui/app/controllers/jobs/job.js b/ui/app/controllers/jobs/job.js index 519d9eae3093..93c96493ea75 100644 --- a/ui/app/controllers/jobs/job.js +++ b/ui/app/controllers/jobs/job.js @@ -7,4 +7,8 @@ export default class JobController extends Controller { }, ]; jobNamespace = 'default'; + + get job() { + return this.model; + } } diff --git a/ui/app/controllers/jobs/job/dispatch.js b/ui/app/controllers/jobs/job/dispatch.js new file mode 100644 index 000000000000..7498f649ab61 --- /dev/null +++ b/ui/app/controllers/jobs/job/dispatch.js @@ -0,0 +1,4 @@ +import Controller from '@ember/controller'; + +// This may be safe to remove but we can't be sure, some route may try access this directly using this.controllerFor +export default class JobsJobDispatchController extends Controller {} diff --git a/ui/app/controllers/jobs/job/task-group.js b/ui/app/controllers/jobs/job/task-group.js index f8a0ec3620f1..3cb6efe34777 100644 --- a/ui/app/controllers/jobs/job/task-group.js +++ b/ui/app/controllers/jobs/job/task-group.js @@ -5,6 +5,7 @@ import Controller from '@ember/controller'; import { action, computed, get } from '@ember/object'; import { scheduleOnce } from '@ember/runloop'; import intersection from 'lodash.intersection'; +import { qpBuilder } from 'nomad-ui/utils/classes/query-params'; import Sortable from 'nomad-ui/mixins/sortable'; import Searchable from 'nomad-ui/mixins/searchable'; import WithNamespaceResetting from 'nomad-ui/mixins/with-namespace-resetting'; @@ -13,10 +14,10 @@ import classic from 'ember-classic-decorator'; @classic export default class TaskGroupController extends Controller.extend( - Sortable, - Searchable, - WithNamespaceResetting - ) { + Sortable, + Searchable, + WithNamespaceResetting +) { @service userSettings; @service can; @@ -141,4 +142,22 @@ export default class TaskGroupController extends Controller.extend( setFacetQueryParam(queryParam, selection) { this.set(queryParam, serialize(selection)); } + + get taskGroup() { + return this.model; + } + + get breadcrumb() { + const { job, name } = this.taskGroup; + return { + title: 'Task Group', + label: name, + args: [ + 'jobs.job.task-group', + job, + name, + qpBuilder({ jobNamespace: job.get('namespace.name') || 'default' }), + ], + }; + } } diff --git a/ui/app/controllers/optimize/summary.js b/ui/app/controllers/optimize/summary.js index db81b7a263c3..986dede450d7 100644 --- a/ui/app/controllers/optimize/summary.js +++ b/ui/app/controllers/optimize/summary.js @@ -9,4 +9,16 @@ export default class OptimizeSummaryController extends Controller { jobNamespace: 'namespace', }, ]; + + get summary() { + return this.model; + } + + get breadcrumb() { + const { slug } = this.summary; + return { + label: slug.replace('/', ' / '), + args: ['optimize.summary', slug], + }; + } } diff --git a/ui/app/controllers/servers/server.js b/ui/app/controllers/servers/server.js new file mode 100644 index 000000000000..81a3d4062782 --- /dev/null +++ b/ui/app/controllers/servers/server.js @@ -0,0 +1,7 @@ +import Controller from '@ember/controller'; + +export default class ServersServerController extends Controller { + get server() { + return this.model; + } +} diff --git a/ui/app/routes/allocations/allocation.js b/ui/app/routes/allocations/allocation.js index 251f00726c2f..bb5ce7bfc1d2 100644 --- a/ui/app/routes/allocations/allocation.js +++ b/ui/app/routes/allocations/allocation.js @@ -1,49 +1,28 @@ import Route from '@ember/routing/route'; +import { inject as service } from '@ember/service'; 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 class AllocationRoute extends Route.extend(WithWatchers) { + @service store; + startWatchers(controller, model) { if (model) { controller.set('watcher', this.watch.perform(model)); } } - // Allocation breadcrumbs extend from job / task group breadcrumbs - // even though the route structure does not. - breadcrumbs(model) { - const jobQueryParams = qpBuilder({ - jobNamespace: model.get('job.namespace.name') || 'default', - }); - - return [ - { label: 'Jobs', args: ['jobs.index', jobQueryParams] }, - ...jobCrumbs(model.get('job')), - { - label: model.get('taskGroupName'), - args: [ - 'jobs.job.task-group', - model.get('job.plainId'), - model.get('taskGroupName'), - jobQueryParams, - ], - }, - { - label: model.get('shortId'), - args: ['allocations.allocation', model], - }, - ]; - } - model() { // Preload the job for the allocation since it's required for the breadcrumb trail return super .model(...arguments) - .then(allocation => allocation.get('job').then(() => allocation)) + .then(allocation => + allocation + .get('job') + .then(() => this.store.findAll('namespace')) // namespaces belong to a job and are an asynchronous relationship so we can peak them later on + .then(() => allocation) + ) .catch(notifyError(this)); } diff --git a/ui/app/routes/allocations/allocation/task.js b/ui/app/routes/allocations/allocation/task.js index 7f3eec93df42..03be52f3c30c 100644 --- a/ui/app/routes/allocations/allocation/task.js +++ b/ui/app/routes/allocations/allocation/task.js @@ -5,16 +5,6 @@ import EmberError from '@ember/error'; export default class TaskRoute extends Route { @service store; - 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'); diff --git a/ui/app/routes/clients.js b/ui/app/routes/clients.js index c0c85460e9f9..8029193487a4 100644 --- a/ui/app/routes/clients.js +++ b/ui/app/routes/clients.js @@ -10,13 +10,6 @@ export default class ClientsRoute extends Route.extend(WithForbiddenState) { @service store; @service system; - breadcrumbs = [ - { - label: 'Clients', - args: ['clients.index'], - }, - ]; - beforeModel() { return this.get('system.leader'); } diff --git a/ui/app/routes/clients/client.js b/ui/app/routes/clients/client.js index b10d57e0f891..7dc94a49d387 100644 --- a/ui/app/routes/clients/client.js +++ b/ui/app/routes/clients/client.js @@ -9,16 +9,6 @@ export default class ClientRoute extends Route { return super.model(...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')); diff --git a/ui/app/routes/csi/plugins.js b/ui/app/routes/csi/plugins.js index 0ddd99f36ac9..25728b2d2009 100644 --- a/ui/app/routes/csi/plugins.js +++ b/ui/app/routes/csi/plugins.js @@ -6,13 +6,6 @@ import notifyForbidden from 'nomad-ui/utils/notify-forbidden'; export default class PluginsRoute extends Route.extend(WithForbiddenState) { @service store; - breadcrumbs = [ - { - label: 'Storage', - args: ['csi.index'], - }, - ]; - model() { return this.store.query('plugin', { type: 'csi' }).catch(notifyForbidden(this)); } diff --git a/ui/app/routes/csi/plugins/plugin.js b/ui/app/routes/csi/plugins/plugin.js index 5643b2fb7d73..9728e5be1fff 100644 --- a/ui/app/routes/csi/plugins/plugin.js +++ b/ui/app/routes/csi/plugins/plugin.js @@ -6,17 +6,6 @@ export default class PluginRoute extends Route { @service store; @service system; - breadcrumbs = plugin => [ - { - label: 'Plugins', - args: ['csi.plugins'], - }, - { - label: plugin.plainId, - args: ['csi.plugins.plugin', plugin.plainId], - }, - ]; - serialize(model) { return { plugin_name: model.get('plainId') }; } diff --git a/ui/app/routes/csi/volumes.js b/ui/app/routes/csi/volumes.js index e81232393f96..e2e2f19ddba7 100644 --- a/ui/app/routes/csi/volumes.js +++ b/ui/app/routes/csi/volumes.js @@ -6,11 +6,4 @@ import classic from 'ember-classic-decorator'; export default class VolumesRoute extends Route.extend() { @service system; @service store; - - breadcrumbs = [ - { - label: 'Storage', - args: ['csi.index'], - }, - ]; } diff --git a/ui/app/routes/csi/volumes/volume.js b/ui/app/routes/csi/volumes/volume.js index 7a68264e6dce..01afa4b4c658 100644 --- a/ui/app/routes/csi/volumes/volume.js +++ b/ui/app/routes/csi/volumes/volume.js @@ -3,7 +3,6 @@ import Route from '@ember/routing/route'; import { collect } from '@ember/object/computed'; import RSVP from 'rsvp'; import notifyError from 'nomad-ui/utils/notify-error'; -import { qpBuilder } from 'nomad-ui/utils/classes/query-params'; import { watchRecord } from 'nomad-ui/utils/properties/watch'; import WithWatchers from 'nomad-ui/mixins/with-watchers'; import classic from 'ember-classic-decorator'; @@ -13,24 +12,6 @@ export default class VolumeRoute extends Route.extend(WithWatchers) { @service store; @service system; - breadcrumbs = volume => [ - { - label: 'Volumes', - args: [ - 'csi.volumes', - qpBuilder({ volumeNamespace: volume.get('namespace.name') || 'default' }), - ], - }, - { - label: volume.name, - args: [ - 'csi.volumes.volume', - volume.plainId, - qpBuilder({ volumeNamespace: volume.get('namespace.name') || 'default' }), - ], - }, - ]; - startWatchers(controller, model) { if (!model) return; diff --git a/ui/app/routes/jobs.js b/ui/app/routes/jobs.js deleted file mode 100644 index 5599f63abc0f..000000000000 --- a/ui/app/routes/jobs.js +++ /dev/null @@ -1,12 +0,0 @@ -import Route from '@ember/routing/route'; -import classic from 'ember-classic-decorator'; - -@classic -export default class JobsRoute extends Route.extend() { - breadcrumbs = [ - { - label: 'Jobs', - args: ['jobs.index'], - }, - ]; -} diff --git a/ui/app/routes/jobs/job.js b/ui/app/routes/jobs/job.js index 32709b0be70b..971d5be805c5 100644 --- a/ui/app/routes/jobs/job.js +++ b/ui/app/routes/jobs/job.js @@ -2,7 +2,6 @@ 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'; import classic from 'ember-classic-decorator'; @classic @@ -11,8 +10,6 @@ export default class JobRoute extends Route { @service store; @service token; - breadcrumbs = jobCrumbs; - serialize(model) { return { job_name: model.get('plainId') }; } diff --git a/ui/app/routes/jobs/job/dispatch.js b/ui/app/routes/jobs/job/dispatch.js index 647804814296..cce1a3200c31 100644 --- a/ui/app/routes/jobs/job/dispatch.js +++ b/ui/app/routes/jobs/job/dispatch.js @@ -4,13 +4,6 @@ import { inject as service } from '@ember/service'; export default class DispatchRoute extends Route { @service can; - breadcrumbs = [ - { - label: 'Dispatch', - args: ['jobs.job.dispatch'], - }, - ]; - beforeModel() { const job = this.modelFor('jobs.job'); const namespace = job.namespace.get('name'); diff --git a/ui/app/routes/jobs/job/task-group.js b/ui/app/routes/jobs/job/task-group.js index e4f1ad9edd50..17ea124f4a82 100644 --- a/ui/app/routes/jobs/job/task-group.js +++ b/ui/app/routes/jobs/job/task-group.js @@ -4,25 +4,9 @@ import EmberError from '@ember/error'; import { resolve, all } from 'rsvp'; import { watchRecord, watchRelationship } from 'nomad-ui/utils/properties/watch'; import WithWatchers from 'nomad-ui/mixins/with-watchers'; -import { qpBuilder } from 'nomad-ui/utils/classes/query-params'; import notifyError from 'nomad-ui/utils/notify-error'; export default class TaskGroupRoute extends Route.extend(WithWatchers) { - breadcrumbs(model) { - if (!model) return []; - return [ - { - label: model.get('name'), - args: [ - 'jobs.job.task-group', - model.get('job'), - model.get('name'), - qpBuilder({ jobNamespace: model.get('job.namespace.name') || 'default' }), - ], - }, - ]; - } - model({ name }) { const job = this.modelFor('jobs.job'); diff --git a/ui/app/routes/jobs/run.js b/ui/app/routes/jobs/run.js index 2111e1334837..6d456ead9ee6 100644 --- a/ui/app/routes/jobs/run.js +++ b/ui/app/routes/jobs/run.js @@ -8,13 +8,6 @@ export default class RunRoute extends Route { @service store; @service system; - breadcrumbs = [ - { - label: 'Run', - args: ['jobs.run'], - }, - ]; - beforeModel(transition) { if (this.can.cannot('run job', null, { namespace: transition.to.queryParams.namespace })) { this.transitionTo('jobs'); diff --git a/ui/app/routes/optimize.js b/ui/app/routes/optimize.js index b326b2b1e02f..4ba9309519d4 100644 --- a/ui/app/routes/optimize.js +++ b/ui/app/routes/optimize.js @@ -9,13 +9,6 @@ import RSVP from 'rsvp'; export default class OptimizeRoute extends Route { @service can; - breadcrumbs = [ - { - label: 'Recommendations', - args: ['optimize'], - }, - ]; - beforeModel() { if (this.can.cannot('accept recommendation')) { this.transitionTo('jobs'); diff --git a/ui/app/routes/optimize/summary.js b/ui/app/routes/optimize/summary.js index 09bcce488734..20822f4c2568 100644 --- a/ui/app/routes/optimize/summary.js +++ b/ui/app/routes/optimize/summary.js @@ -2,17 +2,6 @@ import Route from '@ember/routing/route'; import notifyError from 'nomad-ui/utils/notify-error'; export default class OptimizeSummaryRoute extends Route { - breadcrumbs(model) { - if (!model) return []; - - return [ - { - label: model.slug.replace('/', ' / '), - args: ['optimize.summary', model.slug], - }, - ]; - } - async model({ jobNamespace, slug }) { const model = this.modelFor('optimize').summaries.find( summary => summary.slug === slug && summary.jobNamespace === jobNamespace diff --git a/ui/app/routes/servers.js b/ui/app/routes/servers.js index 5976dfaffde7..d784a89df2e9 100644 --- a/ui/app/routes/servers.js +++ b/ui/app/routes/servers.js @@ -10,13 +10,6 @@ export default class ServersRoute extends Route.extend(WithForbiddenState) { @service store; @service system; - breadcrumbs = [ - { - label: 'Servers', - args: ['servers.index'], - }, - ]; - beforeModel() { return this.get('system.leader'); } diff --git a/ui/app/routes/servers/server.js b/ui/app/routes/servers/server.js index 9fbe06fb4174..ab399d639c42 100644 --- a/ui/app/routes/servers/server.js +++ b/ui/app/routes/servers/server.js @@ -1,14 +1,4 @@ import Route from '@ember/routing/route'; import WithModelErrorHandling from 'nomad-ui/mixins/with-model-error-handling'; -export default class ServerRoute extends Route.extend(WithModelErrorHandling) { - breadcrumbs(model) { - if (!model) return []; - return [ - { - label: model.name, - args: ['servers.server', model.id], - }, - ]; - } -} +export default class ServerRoute extends Route.extend(WithModelErrorHandling) {} diff --git a/ui/app/routes/topology.js b/ui/app/routes/topology.js index a53a92708cf2..89f35c4f8ff3 100644 --- a/ui/app/routes/topology.js +++ b/ui/app/routes/topology.js @@ -10,13 +10,6 @@ export default class TopologyRoute extends Route.extend(WithForbiddenState) { @service store; @service system; - breadcrumbs = [ - { - label: 'Topology', - args: ['topology'], - }, - ]; - model() { return RSVP.hash({ jobs: this.store.findAll('job'), diff --git a/ui/app/services/breadcrumbs.js b/ui/app/services/breadcrumbs.js index fd44b9e7a5de..eacf9f95544b 100644 --- a/ui/app/services/breadcrumbs.js +++ b/ui/app/services/breadcrumbs.js @@ -1,45 +1,20 @@ -import { getOwner } from '@ember/application'; -import Service, { inject as service } from '@ember/service'; -import { computed } from '@ember/object'; -import classic from 'ember-classic-decorator'; +import Service from '@ember/service'; +import { action } from '@ember/object'; +import { tracked } from '@glimmer/tracking'; +import { schedule } from '@ember/runloop'; -@classic -export default class BreadcrumbsService extends Service { - @service router; +export default class BucketService extends Service { + @tracked crumbs = []; - // currentURL is only used to listen to all transitions. - // currentRouteName has all information necessary to compute breadcrumbs, - // but it doesn't change when a transition to the same route with a different - // model occurs. - @computed('router.{currentURL,currentRouteName}') - get breadcrumbs() { - const owner = getOwner(this); - const allRoutes = (this.get('router.currentRouteName') || '') - .split('.') - .without('') - .map((segment, index, allSegments) => allSegments.slice(0, index + 1).join('.')); - - let crumbs = []; - allRoutes.forEach(routeName => { - const route = owner.lookup(`route:${routeName}`); - - // Routes can reset the breadcrumb trail to start anew even - // if the route is deeply nested. - if (route.resetBreadcrumbs) { - crumbs = []; - } - - // Breadcrumbs are either an array of static crumbs - // or a function that returns breadcrumbs given the current - // model for the route's controller. - let breadcrumbs = route.breadcrumbs || []; - if (typeof breadcrumbs === 'function') { - breadcrumbs = breadcrumbs(route.get('controller.model')) || []; - } - - crumbs.push(...breadcrumbs); + @action registerBreadcrumb(crumb) { + schedule('actions', this, () => { + this.crumbs = [...this.crumbs, crumb]; }); + } + + @action deregisterBreadcrumb(crumb) { + const newCrumbs = this.crumbs.filter(c => c !== crumb); - return crumbs; + this.crumbs = newCrumbs; } } diff --git a/ui/app/styles/core/breadcrumb.scss b/ui/app/styles/core/breadcrumb.scss index 092bb022149a..2b0ddd8b770c 100644 --- a/ui/app/styles/core/breadcrumb.scss +++ b/ui/app/styles/core/breadcrumb.scss @@ -11,7 +11,24 @@ } } - li.is-active a { + ul { + align-items: center; + } + + li::before { + font-size: x-large; + } + + li:last-child a.active { opacity: 1; } + + dl dd { + margin: -4px 0px; + font-size: medium; + } + + dl dt { + font-size: small; + } } diff --git a/ui/app/styles/core/navbar.scss b/ui/app/styles/core/navbar.scss index 840d8d1e9bee..dffa0ce019a1 100644 --- a/ui/app/styles/core/navbar.scss +++ b/ui/app/styles/core/navbar.scss @@ -1,5 +1,6 @@ .navbar { display: flex; + align-items: center; &.is-primary { background: linear-gradient(to right, $nomad-green-darker, $nomad-green-dark); diff --git a/ui/app/templates/allocations/allocation.hbs b/ui/app/templates/allocations/allocation.hbs index c24cd68950a9..0915a337c5cd 100644 --- a/ui/app/templates/allocations/allocation.hbs +++ b/ui/app/templates/allocations/allocation.hbs @@ -1 +1,4 @@ -{{outlet}} +{{#each this.breadcrumbs as |crumb|}} + +{{/each}} +{{outlet}} \ No newline at end of file diff --git a/ui/app/templates/allocations/allocation/task.hbs b/ui/app/templates/allocations/allocation/task.hbs index c24cd68950a9..2cb651886148 100644 --- a/ui/app/templates/allocations/allocation/task.hbs +++ b/ui/app/templates/allocations/allocation/task.hbs @@ -1 +1 @@ -{{outlet}} +{{outlet}} \ No newline at end of file diff --git a/ui/app/templates/clients.hbs b/ui/app/templates/clients.hbs index 197c6c10d5c6..4da9ce68a00f 100644 --- a/ui/app/templates/clients.hbs +++ b/ui/app/templates/clients.hbs @@ -1,3 +1,4 @@ + {{outlet}} - + \ No newline at end of file diff --git a/ui/app/templates/clients/client.hbs b/ui/app/templates/clients/client.hbs index c24cd68950a9..2cb651886148 100644 --- a/ui/app/templates/clients/client.hbs +++ b/ui/app/templates/clients/client.hbs @@ -1 +1 @@ -{{outlet}} +{{outlet}} \ No newline at end of file diff --git a/ui/app/templates/components/app-breadcrumbs.hbs b/ui/app/templates/components/app-breadcrumbs.hbs index 6cfc2aa606cb..7c1e105a92c0 100644 --- a/ui/app/templates/components/app-breadcrumbs.hbs +++ b/ui/app/templates/components/app-breadcrumbs.hbs @@ -1,13 +1,7 @@ -{{#each this.breadcrumbs as |breadcrumb index|}} -
  • - {{#if breadcrumb.isPending}} - … - {{else}} - - {{breadcrumb.label}} - - {{/if}} -
    • -{{/each}} + + {{#each breadcrumbs as |crumb|}} + {{#let crumb.args.crumb as |c|}} + {{component (concat "breadcrumbs/" (or c.type "default")) crumb=c}} + {{/let}} + {{/each}} + \ No newline at end of file diff --git a/ui/app/templates/csi/plugins.hbs b/ui/app/templates/csi/plugins.hbs index c24cd68950a9..1d511b7a8136 100644 --- a/ui/app/templates/csi/plugins.hbs +++ b/ui/app/templates/csi/plugins.hbs @@ -1 +1 @@ -{{outlet}} +{{outlet}} \ No newline at end of file diff --git a/ui/app/templates/csi/plugins/plugin.hbs b/ui/app/templates/csi/plugins/plugin.hbs index c24cd68950a9..0915a337c5cd 100644 --- a/ui/app/templates/csi/plugins/plugin.hbs +++ b/ui/app/templates/csi/plugins/plugin.hbs @@ -1 +1,4 @@ -{{outlet}} +{{#each this.breadcrumbs as |crumb|}} + +{{/each}} +{{outlet}} \ No newline at end of file diff --git a/ui/app/templates/csi/volumes.hbs b/ui/app/templates/csi/volumes.hbs index c24cd68950a9..1d511b7a8136 100644 --- a/ui/app/templates/csi/volumes.hbs +++ b/ui/app/templates/csi/volumes.hbs @@ -1 +1 @@ -{{outlet}} +{{outlet}} \ No newline at end of file diff --git a/ui/app/templates/csi/volumes/volume.hbs b/ui/app/templates/csi/volumes/volume.hbs index 83e932383fb5..7ac8e68f92ba 100644 --- a/ui/app/templates/csi/volumes/volume.hbs +++ b/ui/app/templates/csi/volumes/volume.hbs @@ -1,107 +1,160 @@ +{{#each this.breadcrumbs as |crumb|}} + +{{/each}} {{page-title "CSI Volume " this.model.name}}
    -

    {{this.model.name}}

    - +

    + {{this.model.name}} +

    - Volume Details + + Volume Details + - Health + + Health + {{if this.model.schedulable "Schedulable" "Unschedulable"}} - Provider + + Provider + {{this.model.provider}} - External ID + + External ID + {{this.model.externalId}} {{#if this.system.shouldShowNamespaces}} - Namespace + + Namespace + {{this.model.namespace.name}} {{/if}}
    -
    Write Allocations
    {{#if this.model.writeAllocations.length}} - + - ID - Created - Modified - Status - Client - Job - Version - CPU - Memory + + ID + + + Created + + + Modified + + + Status + + + Client + + + Job + + + Version + + + CPU + + + Memory + + @onClick={{action "gotoAllocation" row.model}} + /> {{else}}
    -

    No Write Allocations

    -

    No allocations are depending on this volume for read/write access.

    +

    + No Write Allocations +

    +

    + No allocations are depending on this volume for read/write access. +

    {{/if}}
    -
    Read Allocations
    {{#if this.model.readAllocations.length}} - + - ID - Modified - Created - Status - Client - Job - Version - CPU - Memory + + ID + + + Modified + + + Created + + + Status + + + Client + + + Job + + + Version + + + CPU + + + Memory + + @onClick={{action "gotoAllocation" row.model}} + /> {{else}}
    -

    No Read Allocations

    -

    No allocations are depending on this volume for read-only access.

    +

    + No Read Allocations +

    +

    + No allocations are depending on this volume for read-only access. +

    {{/if}}
    -
    Constraints @@ -109,20 +162,32 @@
    - - + + - - + + - - + +
    SettingValue + Setting + + Value +
    Access Mode{{this.model.accessMode}} + Access Mode + + {{this.model.accessMode}} +
    Attachment Mode{{this.model.attachmentMode}} + Attachment Mode + + {{this.model.attachmentMode}} +
    -
    + \ No newline at end of file diff --git a/ui/app/templates/jobs.hbs b/ui/app/templates/jobs.hbs index 197c6c10d5c6..f2c9986c752c 100644 --- a/ui/app/templates/jobs.hbs +++ b/ui/app/templates/jobs.hbs @@ -1,3 +1,4 @@ + {{outlet}} - + \ No newline at end of file diff --git a/ui/app/templates/jobs/job.hbs b/ui/app/templates/jobs/job.hbs index c24cd68950a9..ba9c71856e98 100644 --- a/ui/app/templates/jobs/job.hbs +++ b/ui/app/templates/jobs/job.hbs @@ -1 +1 @@ -{{outlet}} +{{outlet}} \ No newline at end of file diff --git a/ui/app/templates/jobs/job/dispatch.hbs b/ui/app/templates/jobs/job/dispatch.hbs index 1f479113c12b..6252aa206eca 100644 --- a/ui/app/templates/jobs/job/dispatch.hbs +++ b/ui/app/templates/jobs/job/dispatch.hbs @@ -1,5 +1,6 @@ + {{page-title "Dispatch new " this.model.name}}
    - -
    + + \ No newline at end of file diff --git a/ui/app/templates/jobs/job/task-group.hbs b/ui/app/templates/jobs/job/task-group.hbs index b031c84a7865..dd95b32e0a96 100644 --- a/ui/app/templates/jobs/job/task-group.hbs +++ b/ui/app/templates/jobs/job/task-group.hbs @@ -1,64 +1,117 @@ + {{page-title "Task group " this.model.name " - Job " this.model.job.name}}
      -
    • Overview
      • +
    • + + Overview + +

    - {{this.model.name}} + + {{this.model.name}} +
    {{#if this.model.scaling}} - - Count - + + Count + {{/if}}

    -
    - Task Group Details - - # Tasks {{this.model.tasks.length}} - Reserved CPU {{format-scheduled-hertz this.model.reservedCPU}} + + Task Group Details + + + + # Tasks + + {{this.model.tasks.length}} + + + + Reserved CPU + + {{format-scheduled-hertz this.model.reservedCPU}} + - Reserved Memory + + Reserved Memory + {{format-scheduled-bytes this.model.reservedMemory start="MiB"}} {{#if (gt this.model.reservedMemoryMax this.model.reservedMemory)}} - ({{format-scheduled-bytes this.model.reservedMemoryMax start="MiB"}} Max) + ({{format-scheduled-bytes this.model.reservedMemoryMax start="MiB"}}Max) {{/if}} - Reserved Disk {{format-scheduled-bytes this.model.reservedEphemeralDisk start="MiB"}} + + + Reserved Disk + + {{format-scheduled-bytes this.model.reservedEphemeralDisk start="MiB"}} + {{#if this.model.scaling}} - Count Range - {{this.model.scaling.min}} to {{this.model.scaling.max}} + + + Count Range + + {{this.model.scaling.min}} + to + {{this.model.scaling.max}} - Scaling Policy? + + + Scaling Policy? + {{if this.model.scaling.policy "Yes" "No"}} {{/if}}
    -
    -
    Allocation Status {{this.allocations.length}}
    +
    + Allocation Status + + {{this.allocations.length}} + +
    - +
      {{#each chart.data as |datum index|}} -
    1. +
      3. {{/each}} @@ -99,62 +152,102 @@ @source={{this.sortedAllocations}} @size={{this.pageSize}} @page={{this.currentPage}} - @class="allocations" as |p|> + @class="allocations" as |p| + > + @class="with-foot" as |t| + > - ID - Created - Modified - Status - Version - Client - Volume - CPU - Memory + + ID + + + Created + + + Modified + + + Status + + + Version + + + Client + + + Volume + + + CPU + + + Memory + - +
      - {{else}} - {{#if this.allocations.length}} -
      -
      -

      No Matches

      -

      No allocations match the term {{this.searchTerm}}

      -
      + {{else if this.allocations.length}} +
      +
      +

      + No Matches +

      +

      + No allocations match the term + + {{this.searchTerm}} + +

      - {{else}} -
      -
      -

      No Allocations

      -

      No allocations have been placed.

      -
      +
      + {{else}} +
      +
      +

      + No Allocations +

      +

      + No allocations have been placed. +

      - {{/if}} +
      {{/if}}
      - - {{#if this.model.scaleState.isVisible}} {{#if this.shouldShowScaleEventTimeline}}
      @@ -166,7 +259,6 @@
    {{/if}} -
    Recent Scaling Events @@ -176,7 +268,6 @@
    {{/if}} - {{#if this.model.volumes.length}}
    @@ -185,29 +276,47 @@
    - Name - Type - Source - Permissions + + Name + + + Type + + + Source + + + Permissions + {{#if row.model.isCSI}} - + {{row.model.name}} {{else}} {{row.model.name}} {{/if}} - {{row.model.type}} - {{row.model.source}} - {{if row.model.readOnly "Read" "Read/Write"}} + + {{row.model.type}} + + + {{row.model.source}} + + + {{if row.model.readOnly "Read" "Read/Write"}} +
    {{/if}} -
    + \ No newline at end of file diff --git a/ui/app/templates/jobs/run.hbs b/ui/app/templates/jobs/run.hbs index 6aa51d9ca237..7bb74880bc6c 100644 --- a/ui/app/templates/jobs/run.hbs +++ b/ui/app/templates/jobs/run.hbs @@ -1,7 +1,5 @@ + {{page-title "Run a job"}}
    - -
    + + \ No newline at end of file diff --git a/ui/app/templates/optimize.hbs b/ui/app/templates/optimize.hbs index a922cbca5c2c..5e1795c15a0b 100644 --- a/ui/app/templates/optimize.hbs +++ b/ui/app/templates/optimize.hbs @@ -1,3 +1,4 @@ +
    {{#if this.summaries}} @@ -8,7 +9,12 @@ data-test-recommendation-summaries-search @onChange={{this.syncActiveSummary}} @searchTerm={{mut this.searchTerm}} - @placeholder="Search {{this.summaries.length}} {{pluralize "recommendation" this.summaries.length}}..." /> + @placeholder="Search + {{this.summaries.length}} + + {{pluralize "recommendation" this.summaries.length}} + ..." + /> {{/if}}
    @@ -19,72 +25,88 @@ @label="Namespace" @options={{this.optionsNamespaces}} @selection={{this.qpNamespace}} - @onSelect={{action (queue - (action this.cacheNamespace) - (action this.setFacetQueryParam "qpNamespace") - )}} /> + @onSelect={{action + (queue + (action this.cacheNamespace) (action this.setFacetQueryParam "qpNamespace") + ) + }} + /> {{/if}} + @onSelect={{action this.setFacetQueryParam "qpType"}} + /> + @onSelect={{action this.setFacetQueryParam "qpStatus"}} + /> + @onSelect={{action this.setFacetQueryParam "qpDatacenter"}} + /> + @onSelect={{action this.setFacetQueryParam "qpPrefix"}} + />
    - {{#if this.filteredSummaries}} {{outlet}} - - + - Job - Recommended At - # Allocs - CPU - Mem - Agg. CPU - Agg. Mem + + Job + + + Recommended At + + + # Allocs + + + CPU + + + Mem + + + Agg. CPU + + + Agg. Mem + {{#if row.model.isProcessed}} - + {{else}} {{/if}} - {{else}}
    -

    No Matches

    +

    + No Matches +

    No recommendations match your current filter selection.

    @@ -92,11 +114,13 @@ {{/if}} {{else}}
    -

    No Recommendations

    +

    + No Recommendations +

    All recommendations have been accepted or dismissed. Nomad will continuously monitor applications so expect more recommendations in the future.

    {{/if}}
    -     + \ No newline at end of file diff --git a/ui/app/templates/optimize/summary.hbs b/ui/app/templates/optimize/summary.hbs index f84fa9366ae5..bb0e71003650 100644 --- a/ui/app/templates/optimize/summary.hbs +++ b/ui/app/templates/optimize/summary.hbs @@ -1,6 +1,2 @@ -{{#if @model}} - -{{/if}} \ No newline at end of file + + \ No newline at end of file diff --git a/ui/app/templates/servers.hbs b/ui/app/templates/servers.hbs index 197c6c10d5c6..d90af14eec3e 100644 --- a/ui/app/templates/servers.hbs +++ b/ui/app/templates/servers.hbs @@ -1,3 +1,4 @@ + {{outlet}} - + \ No newline at end of file diff --git a/ui/app/templates/servers/server.hbs b/ui/app/templates/servers/server.hbs index c24cd68950a9..29449f358636 100644 --- a/ui/app/templates/servers/server.hbs +++ b/ui/app/templates/servers/server.hbs @@ -1 +1,4 @@ -{{outlet}} + +{{outlet}} \ No newline at end of file diff --git a/ui/app/templates/topology.hbs b/ui/app/templates/topology.hbs index 59f509a4c075..a95d57d08083 100644 --- a/ui/app/templates/topology.hbs +++ b/ui/app/templates/topology.hbs @@ -1,3 +1,4 @@ + {{page-title "Cluster Topology"}}
    @@ -8,11 +9,26 @@
    -

    Some Clients Were Filtered

    -

    {{this.filteredNodes.length}} {{if (eq this.filteredNodes.length 1) "client was" "clients were"}} filtered from the topology visualization. This is most likely due to the {{pluralize "client" this.filteredNodes.length}} running a version of Nomad <0.9.0.

    +

    + Some Clients Were Filtered +

    +

    + {{this.filteredNodes.length}} + {{if (eq this.filteredNodes.length 1) "client was" "clients were"}} + filtered from the topology visualization. This is most likely due to the + {{pluralize "client" this.filteredNodes.length}} + running a version of Nomad +

    - +
    @@ -23,11 +39,22 @@
    -

    No Live Updating

    -

    The topology visualization depends on too much data to continuously poll.

    +

    + No Live Updating +

    +

    + The topology visualization depends on too much data to continuously poll. +

    - +
    @@ -36,154 +63,335 @@
    Legend {{#if (cannot "list all jobs")}} - Partial View + + Partial View + {{/if}}
    -

    Metrics

    +

    + Metrics +

    -
    M:
    Memory
    -
    C:
    CPU
    +
    + M: +
    +
    + Memory +
    +
    + C: +
    +
    + CPU +
    -

    Allocation Status

    +

    + Allocation Status +

    -
    Running
    -
    Starting
    +
    +
    + +
    +
    + Running +
    +
    +
    +
    + +
    +
    + Starting +
    +
    - {{#if this.activeNode}}Client{{else if this.activeAllocation}}Allocation{{else}}Cluster{{/if}} Details + {{#if this.activeNode}} + Client + {{else if this.activeAllocation}} + Allocation + {{else}} + Cluster + {{/if}} + Details
    {{#if this.activeNode}} {{#let this.activeNode.node as |node|}} -
    -

    {{this.activeNode.allocations.length}} Allocations

    -
    -
    -

    - Client: - - {{node.shortId}} - -

    -

    Name: {{node.name}}

    -

    Address: {{node.httpAddr}}

    -

    Status: {{node.status}}

    -
    -
    -

    - Draining? {{if node.isDraining "Yes" "No"}} -

    -

    - Eligible? {{if node.isEligible "Yes" "No"}} -

    -
    -
    -

    - {{this.nodeUtilization.totalMemoryFormatted}} - {{this.nodeUtilization.totalMemoryUnits}} - of memory -

    -
    -
    -
    - - {{this.nodeUtilization.reservedMemoryPercent}} - +
    +

    + {{this.activeNode.allocations.length}} + + Allocations + +

    +
    +
    +

    + + Client: + + + {{node.shortId}} + +

    +

    + + Name: + + {{node.name}} +

    +

    + + Address: + + {{node.httpAddr}} +

    +

    + + Status: + + {{node.status}} +

    +
    +
    +

    + + Draining? + + + {{if node.isDraining "Yes" "No"}} + +

    +

    + + Eligible? + + + {{if node.isEligible "Yes" "No"}} + +

    +
    +
    +

    + {{this.nodeUtilization.totalMemoryFormatted}} + + {{this.nodeUtilization.totalMemoryUnits}} + + + of memory + +

    +
    +
    +
    + + {{this.nodeUtilization.reservedMemoryPercent}} + +
    +
    +
    + + {{format-percentage this.nodeUtilization.reservedMemoryPercent total=1}} +
    -
    - {{format-percentage this.nodeUtilization.reservedMemoryPercent total=1}} +
    + + {{format-scheduled-bytes this.nodeUtilization.totalReservedMemory}} + + / + {{format-scheduled-bytes this.nodeUtilization.totalMemory}} + reserved
    -
    - {{format-scheduled-bytes this.nodeUtilization.totalReservedMemory}} / {{format-scheduled-bytes this.nodeUtilization.totalMemory}} reserved -
    -
    -
    -

    {{this.nodeUtilization.totalCPU}} MHz of CPU

    -
    -
    -
    - - {{this.nodeUtilization.reservedCPUPercent}} - +
    +

    + {{this.nodeUtilization.totalCPU}} + + MHz + + + of CPU + +

    +
    +
    +
    + + {{this.nodeUtilization.reservedCPUPercent}} + +
    +
    +
    + + {{format-percentage this.nodeUtilization.reservedCPUPercent total=1}} +
    -
    - {{format-percentage this.nodeUtilization.reservedCPUPercent total=1}} +
    + + {{format-scheduled-hertz this.nodeUtilization.totalReservedCPU}} + + / + {{format-scheduled-hertz this.nodeUtilization.totalCPU}} + reserved
    -
    - {{format-scheduled-hertz this.nodeUtilization.totalReservedCPU}} / {{format-scheduled-hertz this.nodeUtilization.totalCPU}} reserved -
    -
    {{/let}} {{else if this.activeAllocation}}

    - Allocation: - {{this.activeAllocation.shortId}} + + Allocation: + + + {{this.activeAllocation.shortId}} +

    -

    Sibling Allocations: {{this.siblingAllocations.length}}

    -

    Unique Client Placements: {{this.uniqueActiveAllocationNodes.length}}

    +

    + + Sibling Allocations: + + {{this.siblingAllocations.length}} +

    +

    + + Unique Client Placements: + + {{this.uniqueActiveAllocationNodes.length}} +

    - Job: + + Job: + - {{this.activeAllocation.job.name}} - / {{this.activeAllocation.taskGroupName}} + @query={{hash jobNamespace=this.activeAllocation.job.namespace.id}} + > + {{this.activeAllocation.job.name}} + + + / + {{this.activeAllocation.taskGroupName}} +

    -

    Type: {{this.activeAllocation.job.type}}

    -

    Priority: {{this.activeAllocation.job.priority}}

    +

    + + Type: + + {{this.activeAllocation.job.type}} +

    +

    + + Priority: + + {{this.activeAllocation.job.priority}} +

    - Client: - + + Client: + + {{this.activeAllocation.node.shortId}}

    -

    Name: {{this.activeAllocation.node.name}}

    -

    Address: {{this.activeAllocation.node.httpAddr}}

    +

    + + Name: + + {{this.activeAllocation.node.name}} +

    +

    + + Address: + + {{this.activeAllocation.node.httpAddr}} +

    - +
    - +
    {{else}}
    -

    {{this.model.nodes.length}} Clients

    +

    + {{this.model.nodes.length}} + + Clients + +

    -

    {{this.scheduledAllocations.length}} Allocations

    +

    + {{this.scheduledAllocations.length}} + + Allocations + +

    -

    {{this.totalMemoryFormatted}} {{this.totalMemoryUnits}} of memory

    +

    + {{this.totalMemoryFormatted}} + + {{this.totalMemoryUnits}} + + + of memory + +

    @@ -191,21 +399,37 @@ data-test-memory-progress-bar class="progress is-danger is-small" value="{{this.reservedMemoryPercent}}" - max="1"> + max="1" + > {{this.reservedMemoryPercent}}
    - {{format-percentage this.reservedMemoryPercent total=1}} + + {{format-percentage this.reservedMemoryPercent total=1}} +
    - {{format-bytes this.totalReservedMemory}} / {{format-bytes this.totalMemory}} reserved + + {{format-bytes this.totalReservedMemory}} + + / + {{format-bytes this.totalMemory}} + reserved
    -

    {{this.totalCPUFormatted}} {{this.totalCPUUnits}} of CPU

    +

    + {{this.totalCPUFormatted}} + + {{this.totalCPUUnits}} + + + of CPU + +

    @@ -213,17 +437,25 @@ data-test-cpu-progress-bar class="progress is-info is-small" value="{{this.reservedCPUPercent}}" - max="1"> + max="1" + > {{this.reservedCPUPercent}}
    - {{format-percentage this.reservedCPUPercent total=1}} + + {{format-percentage this.reservedCPUPercent total=1}} +
    - {{format-hertz this.totalReservedCPU}} / {{format-hertz this.totalCPU}} reserved + + {{format-hertz this.totalReservedCPU}} + + / + {{format-hertz this.totalCPU}} + reserved
    {{/if}} @@ -236,9 +468,10 @@ @allocations={{this.model.allocations}} @onAllocationSelect={{action this.setAllocation}} @onNodeSelect={{action this.setNode}} - @onDataError={{action this.handleTopoVizDataError}}/> + @onDataError={{action this.handleTopoVizDataError}} + />
    {{/if}}
    -     + \ No newline at end of file diff --git a/ui/app/utils/breadcrumb-utils.js b/ui/app/utils/breadcrumb-utils.js deleted file mode 100644 index 699d3f87522c..000000000000 --- a/ui/app/utils/breadcrumb-utils.js +++ /dev/null @@ -1,28 +0,0 @@ -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/package.json b/ui/package.json index 1777c0ebd8cb..1f7250733008 100644 --- a/ui/package.json +++ b/ui/package.json @@ -94,6 +94,7 @@ "ember-power-select": "^4.1.3", "ember-qunit": "^4.6.0", "ember-qunit-nice-errors": "^1.2.0", + "ember-render-helpers": "^0.2.0", "ember-resolver": "^8.0.0", "ember-responsive": "^3.0.4", "ember-sinon": "^4.0.0", diff --git a/ui/tests/acceptance/client-detail-test.js b/ui/tests/acceptance/client-detail-test.js index cfd9042adcb2..2b2049b5465a 100644 --- a/ui/tests/acceptance/client-detail-test.js +++ b/ui/tests/acceptance/client-detail-test.js @@ -68,8 +68,8 @@ module('Acceptance | client detail', function(hooks) { ); assert.equal( Layout.breadcrumbFor('clients.client').text, - node.id.split('-')[0], - 'Second breadcrumb says the node short id' + `Client ${node.id.split('-')[0]}`, + 'Second breadcrumb is a titled breadcrumb saying the node short id' ); await Layout.breadcrumbFor('clients.index').visit(); assert.equal(currentURL(), '/clients', 'First breadcrumb links back to clients'); diff --git a/ui/tests/acceptance/client-monitor-test.js b/ui/tests/acceptance/client-monitor-test.js index 49523009ce8b..c795345e600d 100644 --- a/ui/tests/acceptance/client-monitor-test.js +++ b/ui/tests/acceptance/client-monitor-test.js @@ -36,7 +36,7 @@ module('Acceptance | client monitor', function(hooks) { await ClientMonitor.visit({ id: node.id }); assert.equal(Layout.breadcrumbFor('clients.index').text, 'Clients'); - assert.equal(Layout.breadcrumbFor('clients.client').text, node.id.split('-')[0]); + assert.equal(Layout.breadcrumbFor('clients.client').text, `Client ${node.id.split('-')[0]}`); await Layout.breadcrumbFor('clients.index').visit(); assert.equal(currentURL(), '/clients'); diff --git a/ui/tests/acceptance/server-monitor-test.js b/ui/tests/acceptance/server-monitor-test.js index 41cf3fc9afe1..0f6aeed3e02d 100644 --- a/ui/tests/acceptance/server-monitor-test.js +++ b/ui/tests/acceptance/server-monitor-test.js @@ -33,9 +33,12 @@ module('Acceptance | server monitor', function(hooks) { test('/servers/:id/monitor should have a breadcrumb trail linking back to servers', async function(assert) { await ServerMonitor.visit({ name: agent.name }); - - assert.equal(Layout.breadcrumbFor('servers.index').text, 'Servers'); - assert.equal(Layout.breadcrumbFor('servers.server').text, agent.name); + assert.equal( + Layout.breadcrumbFor('servers.index').text, + 'Servers', + 'The page should read the breadcrumb Servers' + ); + assert.equal(Layout.breadcrumbFor('servers.server').text, `Server ${agent.name}`); await Layout.breadcrumbFor('servers.index').visit(); assert.equal(currentURL(), '/servers'); diff --git a/ui/tests/acceptance/task-detail-test.js b/ui/tests/acceptance/task-detail-test.js index e15f47b62747..becc9c212f1f 100644 --- a/ui/tests/acceptance/task-detail-test.js +++ b/ui/tests/acceptance/task-detail-test.js @@ -1,4 +1,4 @@ -import { currentURL } from '@ember/test-helpers'; +import { currentURL, waitFor } from '@ember/test-helpers'; import { module, test } from 'qunit'; import { setupApplicationTest } from 'ember-qunit'; import { setupMirage } from 'ember-cli-mirage/test-support'; @@ -57,26 +57,27 @@ module('Acceptance | task detail', function(hooks) { const job = server.db.jobs.find(jobId); const shortId = allocation.id.split('-')[0]; - assert.equal(Layout.breadcrumbFor('jobs.index').text, 'Jobs', 'Jobs is the first breadcrumb'); + + await waitFor('[data-test-job-breadcrumb]'); assert.equal( Layout.breadcrumbFor('jobs.job.index').text, - job.name, + `Job ${job.name}`, 'Job is the second breadcrumb' ); assert.equal( Layout.breadcrumbFor('jobs.job.task-group').text, - taskGroup, + `Task Group ${taskGroup}`, 'Task Group is the third breadcrumb' ); assert.equal( Layout.breadcrumbFor('allocations.allocation').text, - shortId, + `Allocation ${shortId}`, 'Allocation short id is the fourth breadcrumb' ); assert.equal( Layout.breadcrumbFor('allocations.allocation.task').text, - task.name, + `Task ${task.name}`, 'Task name is the fifth breadcrumb' ); diff --git a/ui/tests/acceptance/task-group-detail-test.js b/ui/tests/acceptance/task-group-detail-test.js index 795a227ee231..9f14c3f47617 100644 --- a/ui/tests/acceptance/task-group-detail-test.js +++ b/ui/tests/acceptance/task-group-detail-test.js @@ -122,12 +122,12 @@ module('Acceptance | task group detail', function(hooks) { assert.equal(Layout.breadcrumbFor('jobs.index').text, 'Jobs', 'First breadcrumb says jobs'); assert.equal( Layout.breadcrumbFor('jobs.job.index').text, - job.name, + `Job ${job.name}`, 'Second breadcrumb says the job name' ); assert.equal( Layout.breadcrumbFor('jobs.job.task-group').text, - taskGroup.name, + `Task Group ${taskGroup.name}`, 'Third breadcrumb says the job name' ); }); diff --git a/ui/tests/integration/components/app-breadcrumbs-test.js b/ui/tests/integration/components/app-breadcrumbs-test.js index 60ca4b1a0538..bc3d18c054db 100644 --- a/ui/tests/integration/components/app-breadcrumbs-test.js +++ b/ui/tests/integration/components/app-breadcrumbs-test.js @@ -1,49 +1,31 @@ -import Service from '@ember/service'; -import RSVP from 'rsvp'; +/* eslint-disable ember-a11y-testing/a11y-audit-called */ +import { setComponentTemplate } from '@ember/component'; +import Component from '@glimmer/component'; import { module, test } from 'qunit'; import { setupRenderingTest } from 'ember-qunit'; -import { findAll, render, settled } from '@ember/test-helpers'; +import { findAll, render } from '@ember/test-helpers'; import hbs from 'htmlbars-inline-precompile'; -import PromiseObject from 'nomad-ui/utils/classes/promise-object'; -import { componentA11yAudit } from 'nomad-ui/tests/helpers/a11y-audit'; module('Integration | Component | app breadcrumbs', function(hooks) { setupRenderingTest(hooks); - hooks.beforeEach(function() { - const mockBreadcrumbs = Service.extend({ - init() { - this._super(...arguments); - this.breadcrumbs = []; - }, - }); - - this.owner.register('service:breadcrumbs', mockBreadcrumbs); - this.breadcrumbs = this.owner.lookup('service:breadcrumbs'); - }); - - const commonCrumbs = [{ label: 'One', args: ['one'] }, { label: 'Two', args: ['two'] }]; - - const template = hbs` -
    - `; - - test('breadcrumbs comes from the breadcrumbs service', async function(assert) { - this.breadcrumbs.set('breadcrumbs', commonCrumbs); - - await render(template); - - assert.equal( - findAll('[data-test-breadcrumb]').length, - commonCrumbs.length, - 'The number of crumbs matches the crumbs from the service' - ); - }); + const commonCrumbs = [ + { label: 'Jobs', args: ['jobs.index'] }, + { label: 'Job', args: ['jobs.job.index'] }, + ]; test('every breadcrumb is rendered correctly', async function(assert) { - this.breadcrumbs.set('breadcrumbs', commonCrumbs); - - await render(template); + this.set('commonCrumbs', commonCrumbs); + await render(hbs` + + {{#each this.commonCrumbs as |crumb|}} + + {{/each}} + `); + + assert + .dom('[data-test-breadcrumb-default]') + .exists('We register the default breadcrumb component if no type is specified on the crumb'); const renderedCrumbs = findAll('[data-test-breadcrumb]'); @@ -56,36 +38,39 @@ module('Integration | Component | app breadcrumbs', function(hooks) { }); }); - test('when breadcrumbs are pending promises, an ellipsis is rendered', async 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'] }, - ]); - - await render(template); - - assert.equal( - findAll('[data-test-breadcrumb]')[1].textContent.trim(), - '…', - 'Promise breadcrumb is in a loading state' + test('when we register a crumb with a type property, a dedicated breadcrumb/ component renders', async function(assert) { + const crumbs = [ + { label: 'Jobs', args: ['jobs.index'] }, + { type: 'special', label: 'Job', args: ['jobs.job.index'] }, + ]; + this.set('crumbs', crumbs); + + class MockComponent extends Component {} + this.owner.register( + 'component:breadcrumbs/special', + setComponentTemplate( + hbs` +
    Test
    + `, + MockComponent + ) ); - await componentA11yAudit(this.element, assert); - - resolvePromise({ label: 'Two', args: ['two'] }); - - return settled().then(() => { - assert.equal( - findAll('[data-test-breadcrumb]')[1].textContent.trim(), - 'Two', - 'Promise breadcrumb has resolved and now renders Two' + await render(hbs` + + {{#each this.crumbs as |crumb|}} + + {{/each}} + `); + + assert + .dom('[data-test-breadcrumb-special]') + .exists( + 'We can create a new type of breadcrumb component and AppBreadcrumbs will handle rendering by type' ); - }); + + assert + .dom('[data-test-breadcrumb-default]') + .exists('Default breadcrumb registers if no type is specified'); }); }); diff --git a/ui/tests/integration/components/breadcrumbs-test.js b/ui/tests/integration/components/breadcrumbs-test.js new file mode 100644 index 000000000000..5d24329ff0bf --- /dev/null +++ b/ui/tests/integration/components/breadcrumbs-test.js @@ -0,0 +1,67 @@ +/* eslint-disable ember-a11y-testing/a11y-audit-called */ +import { module, test } from 'qunit'; +import { setupRenderingTest } from 'ember-qunit'; +import { click, findAll, render } from '@ember/test-helpers'; +import { hbs } from 'ember-cli-htmlbars'; + +module('Integration | Component | breadcrumbs', function(hooks) { + setupRenderingTest(hooks); + + test('it declaratively renders a list of registered crumbs', async function(assert) { + this.set('isRegistered', false); + this.set('toggleCrumb', () => this.set('isRegistered', !this.isRegistered)); + await render(hbs` + +
      + {{#each bb as |crumb|}} +
    • {{crumb.args.crumb}}
      • + {{/each}} +
    +     + + + {{#if this.isRegistered}} + + {{/if}} + `); + + assert.dom('[data-test-crumb]').exists({ count: 1 }, 'We register one crumb'); + assert.dom('[data-test-crumb]').hasText('Zoey', 'The first registered crumb is Zoey'); + + await click('[data-test-button]'); + const crumbs = await findAll('[data-test-crumb]'); + + assert + .dom('[data-test-crumb]') + .exists({ count: 2 }, 'The second crumb registered successfully'); + assert + .dom(crumbs[0]) + .hasText('Zoey', 'Breadcrumbs maintain the order in which they are declared'); + assert + .dom(crumbs[1]) + .hasText('Tomster', 'Breadcrumbs maintain the order in which they are declared'); + + await click('[data-test-button]'); + assert.dom('[data-test-crumb]').exists({ count: 1 }, 'We deregister one crumb'); + assert + .dom('[data-test-crumb]') + .hasText('Zoey', 'Zoey remains in the template after Tomster deregisters'); + }); + + test('it can register complex crumb objects', async function(assert) { + await render(hbs` + +
      + {{#each bb as |crumb|}} +
    • {{crumb.args.crumb.name}}
      • + {{/each}} +
    +     + + `); + + assert + .dom('[data-test-crumb]') + .hasText('Tomster', 'We can access the registered breadcrumbs in the template'); + }); +}); diff --git a/ui/tests/integration/components/trigger-test.js b/ui/tests/integration/components/trigger-test.js new file mode 100644 index 000000000000..bbcb41b32488 --- /dev/null +++ b/ui/tests/integration/components/trigger-test.js @@ -0,0 +1,191 @@ +import { module, test } from 'qunit'; +import { setupRenderingTest } from 'ember-qunit'; +import { render, click, waitFor } from '@ember/test-helpers'; +import { hbs } from 'ember-cli-htmlbars'; + +module('Integration | Component | trigger', function(hooks) { + setupRenderingTest(hooks); + + module('Synchronous Interactions', function() { + test('it can trigger a synchronous action', async function(assert) { + this.set('name', 'Tomster'); + this.set('changeName', () => this.set('name', 'Zoey')); + await render(hbs` + +

    {{this.name}}

    + +     + `); + assert.dom('[data-test-name]').hasText('Tomster', 'Initial state renders correctly.'); + + await click('[data-test-button]'); + + assert + .dom('[data-test-name]') + .hasText('Zoey', 'The name property changes when the button is clicked'); + }); + + test('it sets the result of the action', async function(assert) { + this.set('tomster', () => 'Tomster'); + await render(hbs` + + {{#if trigger.data.result}} +

    {{trigger.data.result}}

    + {{/if}} + +     + `); + assert + .dom('[data-test-name]') + .doesNotExist('Initial state does not render because there is no result yet.'); + + await click('[data-test-button]'); + + assert + .dom('[data-test-name]') + .hasText('Tomster', 'The result state updates after the triggered action'); + }); + }); + + module('Asynchronous Interactions', function() { + test('it can trigger an asynchronous action', async function(assert) { + this.set( + 'onTrigger', + () => + new Promise(resolve => { + this.set('resolve', resolve); + }) + ); + + await render(hbs` + + {{#if trigger.data.isBusy}} +
    ...Loading
    + {{/if}} + {{#if trigger.data.isSuccess}} +
    Success!
    + {{/if}} + +     + `); + + assert + .dom('[data-test-div]') + .doesNotExist('The div does not render until after the action dispatches successfully'); + + await click('[data-test-button]'); + assert + .dom('[data-test-div-loading]') + .exists('Loading state is displayed when the action hasnt resolved yet'); + assert + .dom('[data-test-div]') + .doesNotExist('Success message does not display until after promise resolves'); + + this.resolve(); + await waitFor('[data-test-div]'); + assert + .dom('[data-test-div-loading]') + .doesNotExist( + 'Loading state is no longer rendered after state changes from busy to success' + ); + assert + .dom('[data-test-div]') + .exists('Action has dispatched successfully after the promise resolves'); + + await click('[data-test-button]'); + assert + .dom('[data-test-div]') + .doesNotExist('Aftering clicking the button, again, the state is reset'); + assert + .dom('[data-test-div-loading]') + .exists('After clicking the button, again, we are back in the loading state'); + + this.resolve(); + await waitFor('[data-test-div]'); + + assert + .dom('[data-test-div]') + .exists( + 'An new action and new promise resolve after clicking the button for the second time' + ); + }); + + test('it handles the success state', async function(assert) { + this.set( + 'onTrigger', + () => + new Promise(resolve => { + this.set('resolve', resolve); + }) + ); + this.set('onSuccess', () => assert.step('On success happened')); + + await render(hbs` + + {{#if trigger.data.isSuccess}} + Success! + {{/if}} + + + `); + + assert + .dom('[data-test-div]') + .doesNotExist('No text should appear until after the onSuccess callback is fired'); + await click('[data-test-button]'); + this.resolve(); + await waitFor('[data-test-div]'); + assert.verifySteps(['On success happened']); + }); + + test('it handles the error state', async function(assert) { + this.set( + 'onTrigger', + () => + new Promise((_, reject) => { + this.set('reject', reject); + }) + ); + this.set('onError', () => { + assert.step('On error happened'); + }); + + await render(hbs` + + {{#if trigger.data.isBusy}} +
    ...Loading
    + {{/if}} + {{#if trigger.data.isError}} + Error! + {{/if}} + +     + `); + + await click('[data-test-button]'); + assert + .dom('[data-test-div-loading]') + .exists('Loading state is displayed when the action hasnt resolved yet'); + + assert + .dom('[data-test-div]') + .doesNotExist('No text should appear until after the onError callback is fired'); + + this.reject(); + await waitFor('[data-test-span]'); + assert.verifySteps(['On error happened']); + + await click('[data-test-button]'); + + assert + .dom('[data-test-div-loading]') + .exists('The previous error state was cleared and we show loading, again.'); + + assert.dom('[data-test-div]').doesNotExist('The error state is cleared'); + + this.reject(); + await waitFor('[data-test-span]'); + assert.verifySteps(['On error happened'], 'The error dispatches'); + }); + }); +}); diff --git a/ui/tests/unit/services/breadcrumbs-test.js b/ui/tests/unit/services/breadcrumbs-test.js deleted file mode 100644 index e71c7eb3a673..000000000000 --- a/ui/tests/unit/services/breadcrumbs-test.js +++ /dev/null @@ -1,151 +0,0 @@ -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 RSVP from 'rsvp'; -import { module, test } from 'qunit'; -import { setupTest } 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(), - }); - -module('Unit | Service | Breadcrumbs', function(hooks) { - setupTest(hooks); - - hooks.beforeEach(function() { - this.subject = function() { - return this.owner.factoryFor('service:breadcrumbs').create(); - }; - }); - - hooks.beforeEach(function() { - const mockRouter = Service.extend({ - currentRouteName: 'application', - currentURL: '/', - }); - - this.owner.register('service:router', mockRouter); - this.router = this.owner.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: this.owner.lookup('service:router'), - model: alias('router.currentURL'), - }); - - this.owner.register('route:none', none); - this.owner.register('route:none.more-none', none); - this.owner.register('route:static', fixed); - this.owner.register('route:static.many', manyFixed); - this.owner.register('route:dynamic', dynamic); - this.owner.register('route:dynamic.many', manyDynamic); - this.owner.register('route:promise', promise); - this.owner.register('route:url', fromURL); - }); - - 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' - ); - }); -}); diff --git a/ui/yarn.lock b/ui/yarn.lock index 586b7893459b..fefe48c547bc 100644 --- a/ui/yarn.lock +++ b/ui/yarn.lock @@ -4345,6 +4345,13 @@ ansi-to-html@^0.6.11, ansi-to-html@^0.6.6: dependencies: entities "^1.1.2" +ansi-to-html@^0.6.15: + version "0.6.15" + resolved "https://registry.yarnpkg.com/ansi-to-html/-/ansi-to-html-0.6.15.tgz#ac6ad4798a00f6aa045535d7f6a9cb9294eebea7" + integrity sha512-28ijx2aHJGdzbs+O5SNQF65r6rrKYnkuwTYm8lZlChuoJ9P1vVzIpWO20sQTqTPDXYp6NFwk326vApTtLVFXpQ== + dependencies: + entities "^2.0.0" + ansicolors@~0.2.1: version "0.2.1" resolved "https://registry.yarnpkg.com/ansicolors/-/ansicolors-0.2.1.tgz#be089599097b74a5c9c4a84a0cdbcdb62bd87aef" @@ -8925,6 +8932,22 @@ ember-cli-typescript@^3.0.0, ember-cli-typescript@^3.1.3, ember-cli-typescript@^ stagehand "^1.0.0" walk-sync "^2.0.0" +ember-cli-typescript@^4.0.0: + version "4.2.1" + resolved "https://registry.yarnpkg.com/ember-cli-typescript/-/ember-cli-typescript-4.2.1.tgz#54d08fc90318cc986f3ea562f93ce58a6cc4c24d" + integrity sha512-0iKTZ+/wH6UB/VTWKvGuXlmwiE8HSIGcxHamwNhEC5x1mN3z8RfvsFZdQWYUzIWFN2Tek0gmepGRPTwWdBYl/A== + dependencies: + ansi-to-html "^0.6.15" + broccoli-stew "^3.0.0" + debug "^4.0.0" + execa "^4.0.0" + fs-extra "^9.0.1" + resolve "^1.5.0" + rsvp "^4.8.1" + semver "^7.3.2" + stagehand "^1.0.0" + walk-sync "^2.2.0" + ember-cli-typescript@^4.1.0: version "4.1.0" resolved "https://registry.yarnpkg.com/ember-cli-typescript/-/ember-cli-typescript-4.1.0.tgz#2ff17be2e6d26b58c88b1764cb73887e7176618b" @@ -9426,6 +9449,14 @@ ember-qunit@^4.6.0: ember-cli-test-loader "^2.2.0" qunit "^2.9.3" +ember-render-helpers@^0.2.0: + version "0.2.0" + resolved "https://registry.yarnpkg.com/ember-render-helpers/-/ember-render-helpers-0.2.0.tgz#5f7af8ee74ae29f85e0d156b2775edff23f6de21" + integrity sha512-MnqGS8BnY3GJ+n5RZVVRqCwKjfXXMr5quKyqNu1vxft8oslOJuZ1f1dOesQouD+6LwD4Y9tWRVKNw+LOqM9ocw== + dependencies: + ember-cli-babel "^7.23.0" + ember-cli-typescript "^4.0.0" + ember-resolver@^8.0.0: version "8.0.2" resolved "https://registry.yarnpkg.com/ember-resolver/-/ember-resolver-8.0.2.tgz#8a45a744aaf5391eb52b4cb393b3b06d2db1975c"