feat: create trigger component

Create Trigger Component and deprecate Breadcrumb-Utils pattern.

ui/app/components/breadcrumbs/default.hbs

@@ -0,0 +1,5 @@
+<li>
+  <LinkTo @params={{@crumb.args}} data-test-breadcrumb={{@crumb.args.firstObject}}>
+    {{@crumb.label}}
+  </LinkTo>
+</li>

ui/app/components/breadcrumbs/job.hbs

@@ -0,0 +1,19 @@
+<Trigger @do={{this.fetchParent}} as |trigger|>
+  {{did-insert trigger.fns.do}}
+  {{#if trigger.data.result}}
+    <li>
+      <LinkTo @params={{trigger.data.result.args}} data-test-breadcrumb={{@crumb.args.firstObject}}>
+        {{trigger.data.result.label}}
+      </LinkTo>
+    </li>
+  {{/if}}
+  <li>
+    <LinkTo
+      @route={{@crumbs.args}}
+      data-test-breadcrumb={{@crumb.args.firstObject}}
+      {{!-- @model={{trigger.data.result}} FIX THIS PARAMETER --}}
+    >
+      {{this.crumb.label}}
+    </LinkTo>
+  </li>
+</Trigger>

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);
+  }
+}

ui/app/components/trigger.hbs

@@ -0,0 +1 @@
+{{yield (hash data=this.data fns=this.fns)}}

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();
+  }
+}

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: [

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 [

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 }];
+  }
 }

ui/app/templates/components/app-breadcrumbs.hbs

@@ -1,17 +1,15 @@
 <Breadcrumbs as |bb|>
   {{#each bb as |breadcrumb index|}}
     {{#each breadcrumb.args.crumb as |b|}}
-      <li class="{{if (eq (inc index) this.b.length) "is-active"}}">
-        {{#if b.isPending}}
+      {{#if b.isPending}}
+        <li class="{{if (eq (inc index) this.b.length) "is-active"}}">
           <a href="#" aria-label="loading" data-test-breadcrumb="loading">
             …
           </a>
-        {{else}}
-          <LinkTo @params={{b.args}} data-test-breadcrumb={{b.args.firstObject}}>
-            {{b.label}}
-          </LinkTo>
-        {{/if}}
-      </li>
+        </li>
+      {{else}}
+        {{component (concat "breadcrumbs/" (or b.type "default")) crumb=b}}
+      {{/if}}
     {{/each}}
   {{/each}}
 </Breadcrumbs>

ui/app/templates/jobs.hbs

@@ -1,4 +1,4 @@
+<Breadcrumb @bucket="navigation" @crumb={{this.breadcrumbs}} />
 <PageLayout>
   {{outlet}}
-</PageLayout>
-<Breadcrumb @bucket="navigation" @crumb={{this.breadcrumbs}} />
+</PageLayout>

ui/app/templates/servers/server.hbs

@@ -1 +1 @@
-{{outlet}}
+{{outlet}}<Breadcrumb bucket="navigation" crumb={{this.metadata.breadcrumb}} />

ui/app/utils/breadcrumb-utils.js

@@ -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)];
-  }
-};

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,

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",

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"