From e957e5b7d785f878936b2894c57ccc7cb484d7ab Mon Sep 17 00:00:00 2001 From: Jai Bhagat Date: Wed, 8 Dec 2021 14:26:25 -0500 Subject: [PATCH] feat: create trigger component Create Trigger Component and deprecate Breadcrumb-Utils pattern. --- ui/app/components/breadcrumbs/default.hbs | 5 ++ ui/app/components/breadcrumbs/job.hbs | 19 ++++++ ui/app/components/breadcrumbs/job.js | 36 +++++++++++ ui/app/components/trigger.hbs | 1 + ui/app/components/trigger.js | 62 +++++++++++++++++++ ui/app/controllers/allocations/allocation.js | 3 +- ui/app/controllers/clients/client.js | 2 +- ui/app/controllers/jobs/job.js | 5 +- .../templates/components/app-breadcrumbs.hbs | 14 ++--- ui/app/templates/jobs.hbs | 4 +- ui/app/templates/servers/server.hbs | 2 +- ui/app/utils/breadcrumb-utils.js | 29 --------- ui/config/environment.js | 5 ++ ui/package.json | 1 + ui/yarn.lock | 31 ++++++++++ 15 files changed, 174 insertions(+), 45 deletions(-) create mode 100644 ui/app/components/breadcrumbs/default.hbs create mode 100644 ui/app/components/breadcrumbs/job.hbs create mode 100644 ui/app/components/breadcrumbs/job.js create mode 100644 ui/app/components/trigger.hbs create mode 100644 ui/app/components/trigger.js delete mode 100644 ui/app/utils/breadcrumb-utils.js diff --git a/ui/app/components/breadcrumbs/default.hbs b/ui/app/components/breadcrumbs/default.hbs new file mode 100644 index 000000000..8b5108a7d --- /dev/null +++ b/ui/app/components/breadcrumbs/default.hbs @@ -0,0 +1,5 @@ +
  • + + {{@crumb.label}} + +
    • \ 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 000000000..140ee8b9a --- /dev/null +++ b/ui/app/components/breadcrumbs/job.hbs @@ -0,0 +1,19 @@ + + {{did-insert trigger.fns.do}} + {{#if trigger.data.result}} +
  • + + {{trigger.data.result.label}} + +
    • + {{/if}} +
  • + + {{this.crumb.label}} + +
    • +     \ 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 000000000..f58ef5677 --- /dev/null +++ b/ui/app/components/breadcrumbs/job.js @@ -0,0 +1,36 @@ +import { action } from '@ember/object'; +import Component from '@glimmer/component'; +import { tracked } from '@glimmer/tracking'; +import { qpBuilder } from 'nomad-ui/utils/classes/query-params'; + +export default class BreadcrumbsJob extends Component { + get job() { + return this.args.crumb.job; + } + + @tracked parent = null; + + generateCrumb(job) { + return { + label: job.get('trimmedName') || job.trimmedName, + args: [ + 'jobs.job.index', + job.get('plainId') || job.plainId, + qpBuilder({ + jobNamespace: job.get('namespace.name') || 'default', + }), + ], + }; + } + + get crumb() { + if (!this.job) return null; + return this.generateCrumb(this.job); + } + + @action + fetchParent() { + this.parent = this.job.parent || this.job.get('parent'); + return this.generateCrumb(this.parent); + } +} diff --git a/ui/app/components/trigger.hbs b/ui/app/components/trigger.hbs new file mode 100644 index 000000000..c6fdb221f --- /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 000000000..8054060e1 --- /dev/null +++ b/ui/app/components/trigger.js @@ -0,0 +1,62 @@ +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.triggerTask.lastErrored; + } + + 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 }; + } + + @task(function*() { + try { + this.result = yield this.args.do(); + this.onSuccess(this.result); + } catch (e) { + this.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 index fbd071ddd..2491bfd29 100644 --- a/ui/app/controllers/allocations/allocation.js +++ b/ui/app/controllers/allocations/allocation.js @@ -1,6 +1,5 @@ import Controller from '@ember/controller'; import { qpBuilder } from 'nomad-ui/utils/classes/query-params'; -import { jobCrumbs } from 'nomad-ui/utils/breadcrumb-utils'; export default class AllocationsAllocationController extends Controller { // Allocation breadcrumbs extend from job / task group breadcrumbs @@ -13,7 +12,7 @@ export default class AllocationsAllocationController extends Controller { return [ { label: 'Jobs', args: ['jobs.index', jobQueryParams] }, - ...jobCrumbs(model.get('job')), + { type: 'job', job: model.get('job') }, { label: model.get('taskGroupName'), args: [ diff --git a/ui/app/controllers/clients/client.js b/ui/app/controllers/clients/client.js index 3efd6ebe1..aa558c80b 100644 --- a/ui/app/controllers/clients/client.js +++ b/ui/app/controllers/clients/client.js @@ -1,7 +1,7 @@ import Controller from '@ember/controller'; export default class ClientsClientController extends Controller { - breadcrumbs() { + get breadcrumbs() { const model = this.model; if (!model) return []; return [ diff --git a/ui/app/controllers/jobs/job.js b/ui/app/controllers/jobs/job.js index f369e82b4..17e726db4 100644 --- a/ui/app/controllers/jobs/job.js +++ b/ui/app/controllers/jobs/job.js @@ -1,5 +1,4 @@ import Controller from '@ember/controller'; -import { jobCrumbs } from 'nomad-ui/utils/breadcrumb-utils'; export default class JobController extends Controller { queryParams = [ @@ -9,5 +8,7 @@ export default class JobController extends Controller { ]; jobNamespace = 'default'; - breadcrumbs = jobCrumbs(this.model); + get breadcrumbs() { + return [{ type: 'job', job: this.model }]; + } } diff --git a/ui/app/templates/components/app-breadcrumbs.hbs b/ui/app/templates/components/app-breadcrumbs.hbs index 3a24a6f9a..618237f31 100644 --- a/ui/app/templates/components/app-breadcrumbs.hbs +++ b/ui/app/templates/components/app-breadcrumbs.hbs @@ -1,17 +1,15 @@ {{#each bb as |breadcrumb index|}} {{#each breadcrumb.args.crumb as |b|}} -
  • - {{#if b.isPending}} + {{#if b.isPending}} +
  • … - {{else}} - - {{b.label}} - - {{/if}} -
    • + + {{else}} + {{component (concat "breadcrumbs/" (or b.type "default")) crumb=b}} + {{/if}} {{/each}} {{/each}}     \ No newline at end of file diff --git a/ui/app/templates/jobs.hbs b/ui/app/templates/jobs.hbs index 6e448d265..44a687f0c 100644 --- a/ui/app/templates/jobs.hbs +++ b/ui/app/templates/jobs.hbs @@ -1,4 +1,4 @@ + {{outlet}} - - \ No newline at end of file + \ No newline at end of file diff --git a/ui/app/templates/servers/server.hbs b/ui/app/templates/servers/server.hbs index c24cd6895..2fd45556a 100644 --- a/ui/app/templates/servers/server.hbs +++ b/ui/app/templates/servers/server.hbs @@ -1 +1 @@ -{{outlet}} +{{outlet}} \ 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 5050ee0f3..000000000 --- a/ui/app/utils/breadcrumb-utils.js +++ /dev/null @@ -1,29 +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 => { - console.log('job\n\n', 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/config/environment.js b/ui/config/environment.js index 35f112b9b..1894c0c55 100644 --- a/ui/config/environment.js +++ b/ui/config/environment.js @@ -25,7 +25,12 @@ module.exports = function(environment) { APP: { blockingQueries: true, +<<<<<<< HEAD mirageScenario: 'topoMedium', +======= + // TODO: revert before merging to main. + mirageScenario: 'allJobTypes', // convert to 'sysbatchSmall' when working on feature +>>>>>>> 5a1df0423 (feat: create trigger component) mirageWithNamespaces: false, mirageWithTokens: true, mirageWithRegions: true, diff --git a/ui/package.json b/ui/package.json index 1777c0ebd..1f7250733 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/yarn.lock b/ui/yarn.lock index 586b78934..fefe48c54 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"