Recommendation accepted
+A new version of this job will now be deployed.
++ Actions +
+ {{#if this.contextualActions.length}} +-
+ {{#each this.actionInstances as |instance|}}
+
- Actions -
- {{#if this.contextualActions.length}} --
- {{#each this.actionInstances as |instance|}}
-
+
+
+}
diff --git a/ui/app/components/agent-monitor.hbs b/ui/app/components/agent-monitor.hbs
deleted file mode 100644
index f0e6b19b8c8..00000000000
--- a/ui/app/components/agent-monitor.hbs
+++ /dev/null
@@ -1,38 +0,0 @@
-{{!
- Copyright IBM Corp. 2015, 2025
- SPDX-License-Identifier: BUSL-1.1
-~}}
-
-
+
+ Level:
+ {{this.capitalizeLevel level}}
+
+
+
+
+
+
-
\ No newline at end of file
diff --git a/ui/app/components/agent-monitor.js b/ui/app/components/agent-monitor.js
deleted file mode 100644
index 60ed8c6d677..00000000000
--- a/ui/app/components/agent-monitor.js
+++ /dev/null
@@ -1,87 +0,0 @@
-/**
- * Copyright IBM Corp. 2015, 2025
- * SPDX-License-Identifier: BUSL-1.1
- */
-
-import { service } from '@ember/service';
-import Component from '@ember/component';
-import { action, computed } from '@ember/object';
-import { assert } from '@ember/debug';
-import { tagName } from '@ember-decorators/component';
-import classic from 'ember-classic-decorator';
-import Log from 'nomad-ui/utils/classes/log';
-
-const LEVELS = ['error', 'warn', 'info', 'debug', 'trace'];
-
-@classic
-@tagName('')
-export default class AgentMonitor extends Component {
- @service token;
-
- client = null;
- server = null;
- level = LEVELS[2];
- onLevelChange() {}
-
- levels = LEVELS;
- monitorUrl = '/v1/agent/monitor';
- isStreaming = true;
- logger = null;
-
- @computed('client.id', 'level', 'server.{id,region}')
- get monitorParams() {
- assert(
- 'Provide a client OR a server to AgentMonitor, not both.',
- this.server != null || this.client != null,
- );
-
- const type = this.server ? 'server_id' : 'client_id';
- const id = this.server ? this.server.id : this.client && this.client.id;
-
- const params = {
- log_level: this.level,
- [type]: id,
- };
-
- if (this.server) {
- params.region = this.server.region;
- }
-
- return params;
- }
-
- didInsertElement() {
- super.didInsertElement(...arguments);
- this.updateLogger();
- }
-
- updateLogger() {
- let currentTail = this.logger ? this.logger.tail : '';
- if (currentTail) {
- currentTail += `\n...changing log level to ${this.level}...\n\n`;
- }
- this.set(
- 'logger',
- Log.create({
- logFetch: (url) => this.token.authorizedRequest(url),
- params: this.monitorParams,
- url: this.monitorUrl,
- tail: currentTail,
- }),
- );
- }
-
- @action
- setLevel(level) {
- this.logger.stop();
- this.set('level', level);
- this.onLevelChange(level);
- this.updateLogger();
- }
-
- @action
- toggleStream() {
- this.set('streamMode', 'streaming');
- this.toggleProperty('isStreaming');
- }
-}
diff --git a/ui/app/components/allocation-row.gjs b/ui/app/components/allocation-row.gjs
new file mode 100644
index 00000000000..2f7073d6421
--- /dev/null
+++ b/ui/app/components/allocation-row.gjs
@@ -0,0 +1,272 @@
+/**
+ * Copyright IBM Corp. 2015, 2025
+ * SPDX-License-Identifier: BUSL-1.1
+ */
+
+import Component from '@glimmer/component';
+import { array } from '@ember/helper';
+import { tracked } from '@glimmer/tracking';
+import { didInsert, didUpdate } from '@ember/render-modifiers';
+import { LinkTo } from '@ember/routing';
+import { on } from '@ember/modifier';
+import { service } from '@ember/service';
+import { eq, notEq, or } from 'ember-truth-helpers';
+import { task, timeout } from 'ember-concurrency';
+import momentFromNow from 'ember-moment/helpers/moment-from-now';
+import { HdsIcon } from '@hashicorp/design-system-components/components';
+import AllocationStat from 'nomad-ui/components/allocation-stat';
+import Tooltip from 'nomad-ui/components/tooltip';
+import formatJobId from 'nomad-ui/helpers/format-job-id';
+import formatMonthTs from 'nomad-ui/helpers/format-month-ts';
+import ENV from 'nomad-ui/config/environment';
+import AllocationStatsTracker from 'nomad-ui/utils/classes/allocation-stats-tracker';
+import { lazyClick } from 'nomad-ui/helpers/lazy-click';
+
+export default class AllocationRow extends Component {
+ @service store;
+ @service token;
+
+ @tracked statsError = false;
+ @tracked statsTracker = null;
+
+ get enablePolling() {
+ if (typeof this.args.enablePolling === 'boolean') {
+ return this.args.enablePolling;
+ }
+
+ return ENV.environment !== 'test';
+ }
+
+ get stats() {
+ return this.statsTracker;
+ }
+
+ buildStatsTracker(allocation) {
+ if (!allocation?.isRunning) {
+ return null;
+ }
+
+ return AllocationStatsTracker.create({
+ fetch: (url) => this.token.authorizedRequest(url),
+ allocation,
+ });
+ }
+
+ get cpu() {
+ const cpu = this.stats?.cpu;
+ return cpu?.[cpu.length - 1];
+ }
+
+ get memory() {
+ const memory = this.stats?.memory;
+ return memory?.[memory.length - 1];
+ }
+
+ get hasJobActions() {
+ return Boolean(this.args.model?.job?.actions?.length);
+ }
+
+ click = (event) => {
+ lazyClick([this.args.onClick, event]);
+ };
+
+ updateStatsTracker = () => {
+ const allocation = this.args.allocation;
+ this.statsTracker = this.buildStatsTracker(allocation);
+
+ if (allocation) {
+ this.qualifyAllocation();
+ } else {
+ this.fetchStats.cancelAll();
+ }
+ };
+
+ qualifyAllocation = async () => {
+ const allocation = this.args.allocation;
+ if (!allocation) {
+ return;
+ }
+
+ if (allocation.isPartial) {
+ await this.store.findRecord('allocation', allocation.id, {
+ backgroundReload: false,
+ });
+ }
+
+ if (allocation.get('job.isPending')) {
+ await allocation.get('job');
+ } else if (!allocation.get('taskGroup')) {
+ const job = allocation.get('job.content');
+ if (job.isPartial) await job.reload();
+ }
+
+ this.fetchStats.perform();
+ };
+
+ fetchStats = task({ drop: true }, async () => {
+ do {
+ if (this.stats) {
+ try {
+ await this.stats.poll.linked().perform();
+ this.statsError = false;
+ } catch {
+ this.statsError = true;
+ }
+ }
+
+ await timeout(500);
+ } while (this.enablePolling);
+ });
+
+
+
-
- Level: {{capitalize level}}
-
-
-
-
-
-
+
+
+ {{/if}}
+ {{/if}}
+
+}
diff --git a/ui/app/components/allocation-stat.hbs b/ui/app/components/allocation-stat.hbs
deleted file mode 100644
index 2890ca15f82..00000000000
--- a/ui/app/components/allocation-stat.hbs
+++ /dev/null
@@ -1,36 +0,0 @@
-{{!
- Copyright IBM Corp. 2015, 2025
- SPDX-License-Identifier: BUSL-1.1
-~}}
-
-{{#if this.allocation.isRunning}}
- {{#if (and (not this.stat) this.isLoading)}}
- …
- {{else if this.error}}
-
-
-
-
- {{/if}}
-{{/if}}
\ No newline at end of file
diff --git a/ui/app/components/allocation-stat.js b/ui/app/components/allocation-stat.js
deleted file mode 100644
index 41066869f37..00000000000
--- a/ui/app/components/allocation-stat.js
+++ /dev/null
@@ -1,64 +0,0 @@
-/**
- * Copyright IBM Corp. 2015, 2025
- * SPDX-License-Identifier: BUSL-1.1
- */
-
-import Component from '@ember/component';
-import { computed } from '@ember/object';
-import { formatBytes, formatHertz } from 'nomad-ui/utils/units';
-import { tagName } from '@ember-decorators/component';
-import classic from 'ember-classic-decorator';
-
-@classic
-@tagName('')
-export default class AllocationStat extends Component {
- allocation = null;
- statsTracker = null;
- isLoading = false;
- error = null;
- metric = 'memory'; // Either memory or cpu
-
- @computed('metric')
- get statClass() {
- return this.metric === 'cpu' ? 'is-info' : 'is-danger';
- }
-
- @computed('statsTracker.cpu.[]')
- get cpu() {
- const cpu = this.statsTracker?.cpu;
- return cpu?.[cpu.length - 1];
- }
-
- @computed('statsTracker.memory.[]')
- get memory() {
- const memory = this.statsTracker?.memory;
- return memory?.[memory.length - 1];
- }
-
- @computed('metric', 'cpu', 'memory')
- get stat() {
- const { metric } = this;
- if (metric === 'cpu' || metric === 'memory') {
- return this[this.metric];
- }
-
- return undefined;
- }
-
- @computed('metric', 'stat.used')
- get formattedStat() {
- if (!this.stat) return undefined;
- if (this.metric === 'memory') return formatBytes(this.stat.used);
- if (this.metric === 'cpu') return formatHertz(this.stat.used, 'MHz');
- return undefined;
- }
-
- @computed('metric', 'statsTracker.{reservedMemory,reservedCPU}')
- get formattedReserved() {
- if (this.metric === 'memory')
- return formatBytes(this.statsTracker.reservedMemory, 'MiB');
- if (this.metric === 'cpu')
- return formatHertz(this.statsTracker.reservedCPU, 'MHz');
- return undefined;
- }
-}
diff --git a/ui/app/components/allocation-status-bar.js b/ui/app/components/allocation-status-bar.gjs
similarity index 57%
rename from ui/app/components/allocation-status-bar.js
rename to ui/app/components/allocation-status-bar.gjs
index 527e0e21049..cc085276c86 100644
--- a/ui/app/components/allocation-status-bar.js
+++ b/ui/app/components/allocation-status-bar.gjs
@@ -3,22 +3,15 @@
* SPDX-License-Identifier: BUSL-1.1
*/
-import { computed } from '@ember/object';
-import DistributionBar from './distribution-bar';
-import { attributeBindings } from '@ember-decorators/component';
-import classic from 'ember-classic-decorator';
+import Component from '@glimmer/component';
+import DistributionBar from 'nomad-ui/components/distribution-bar';
-@classic
-@attributeBindings('data-test-allocation-status-bar')
-export default class AllocationStatusBar extends DistributionBar {
- layoutName = 'components/distribution-bar';
-
- allocationContainer = null;
- job = null;
-
- 'data-test-allocation-status-bar' = true;
+export default class AllocationStatusBar extends Component {
+ get container() {
+ return this.args.allocationContainer;
+ }
- generateLegendLink(job, status) {
+ generateLegendLink = (job, status) => {
if (!job || status === 'queued') return null;
const namespace = job.namespaceId || job.namespace;
@@ -42,18 +35,14 @@ export default class AllocationStatusBar extends DistributionBar {
return {
queryParams,
};
- }
+ };
- @computed(
- 'allocationContainer.{queuedAllocs,completeAllocs,failedAllocs,runningAllocs,startingAllocs,lostAllocs,unknownAllocs}',
- 'job.namespace',
- )
get data() {
- if (!this.allocationContainer) {
+ if (!this.container) {
return [];
}
- const allocs = this.allocationContainer.getProperties(
+ const allocs = this.container.getProperties(
'queuedAllocs',
'completeAllocs',
'failedAllocs',
@@ -62,51 +51,66 @@ export default class AllocationStatusBar extends DistributionBar {
'lostAllocs',
'unknownAllocs',
);
+
return [
{
label: 'Queued',
value: allocs.queuedAllocs,
className: 'queued',
- legendLink: this.generateLegendLink(this.job, 'queued'),
+ legendLink: this.generateLegendLink(this.args.job, 'queued'),
},
{
label: 'Starting',
value: allocs.startingAllocs,
className: 'starting',
layers: 2,
- legendLink: this.generateLegendLink(this.job, 'pending'),
+ legendLink: this.generateLegendLink(this.args.job, 'pending'),
},
{
label: 'Running',
value: allocs.runningAllocs,
className: 'running',
- legendLink: this.generateLegendLink(this.job, 'running'),
+ legendLink: this.generateLegendLink(this.args.job, 'running'),
},
{
label: 'Complete',
value: allocs.completeAllocs,
className: 'complete',
- legendLink: this.generateLegendLink(this.job, 'complete'),
+ legendLink: this.generateLegendLink(this.args.job, 'complete'),
},
{
label: 'Unknown',
value: allocs.unknownAllocs,
className: 'unknown',
- legendLink: this.generateLegendLink(this.job, 'unknown'),
+ legendLink: this.generateLegendLink(this.args.job, 'unknown'),
help: 'Allocation is unknown since its node is disconnected.',
},
{
label: 'Failed',
value: allocs.failedAllocs,
className: 'failed',
- legendLink: this.generateLegendLink(this.job, 'failed'),
+ legendLink: this.generateLegendLink(this.args.job, 'failed'),
},
{
label: 'Lost',
value: allocs.lostAllocs,
className: 'lost',
- legendLink: this.generateLegendLink(this.job, 'lost'),
+ legendLink: this.generateLegendLink(this.args.job, 'lost'),
},
];
}
+
+
+ | Name | +Value | +
|---|
| Name | -Value | -
|---|
-
+
- + {{@crumb.title}} + +
- + {{@crumb.label}} + +
-
+
- + {{@crumb.title}} + +
- + {{@crumb.label}} + +
-
-
- - {{@crumb.title}} - -
- - {{@crumb.label}} - -
-
+
- + Parent Job + +
- + {{trigger.data.result.trimmedName}} + +
-
+
- + {{if this.job.hasChildren "Parent Job" "Job"}} + +
- + {{this.job.trimmedName}} + +
-
+
- + {{if this.job.hasChildren "Parent Job" "Job"}} + +
- + {{this.job.trimmedName}} + +
-
-
- - Parent Job - -
- - {{trigger.data.result.trimmedName}} - -
-
-
- - {{if this.job.hasChildren "Parent Job" "Job"}} - -
- - {{this.job.trimmedName}} - -
+ {{#each this.processed key=@key as |annotation|}}
+
+
}
diff --git a/ui/app/components/chart-primitives/h-annotations.hbs b/ui/app/components/chart-primitives/h-annotations.hbs
deleted file mode 100644
index bd56df272ff..00000000000
--- a/ui/app/components/chart-primitives/h-annotations.hbs
+++ /dev/null
@@ -1,29 +0,0 @@
-{{!
- Copyright IBM Corp. 2015, 2025
- SPDX-License-Identifier: BUSL-1.1
-~}}
-
-
+
+
+
+ {{/each}}
+
- {{#each this.processed key=@key as |annotation|}}
-
\ No newline at end of file
diff --git a/ui/app/components/chart-primitives/tooltip.gjs b/ui/app/components/chart-primitives/tooltip.gjs
new file mode 100644
index 00000000000..55c4cd43d91
--- /dev/null
+++ b/ui/app/components/chart-primitives/tooltip.gjs
@@ -0,0 +1,23 @@
+/**
+ * Copyright IBM Corp. 2015, 2025
+ * SPDX-License-Identifier: BUSL-1.1
+ */
+
+import { inc } from '@nullvoxpopuli/ember-composable-helpers';
+
+export const ChartPrimitivesTooltip =
+
-
-
-
- {{/each}}
-
+
+;
+
+export default ChartPrimitivesTooltip;
diff --git a/ui/app/components/chart-primitives/tooltip.hbs b/ui/app/components/chart-primitives/tooltip.hbs
deleted file mode 100644
index cf986c0c91b..00000000000
--- a/ui/app/components/chart-primitives/tooltip.hbs
+++ /dev/null
@@ -1,17 +0,0 @@
-{{!
- Copyright IBM Corp. 2015, 2025
- SPDX-License-Identifier: BUSL-1.1
-~}}
-
--
+ {{#each @data as |props|}}
+ {{yield props.series props.datum (inc props.index)}}
+ {{/each}}
+
-
\ No newline at end of file
diff --git a/ui/app/components/chart-primitives/v-annotations.js b/ui/app/components/chart-primitives/v-annotations.gjs
similarity index 64%
rename from ui/app/components/chart-primitives/v-annotations.js
rename to ui/app/components/chart-primitives/v-annotations.gjs
index 699f2825d3a..a9900190ede 100644
--- a/ui/app/components/chart-primitives/v-annotations.js
+++ b/ui/app/components/chart-primitives/v-annotations.gjs
@@ -5,7 +5,10 @@
import Component from '@glimmer/component';
import { htmlSafe } from '@ember/template';
-import { action, get } from '@ember/object';
+import { get } from '@ember/object';
+import { on } from '@ember/modifier';
+import { fn } from '@ember/helper';
+import { HdsIcon } from '@hashicorp/design-system-components/components';
import styleString from 'nomad-ui/utils/properties/glimmer-style-string';
const iconFor = {
@@ -69,8 +72,36 @@ export default class ChartPrimitiveVAnnotations extends Component {
return annotation === activeAnnotation;
}
- @action
- selectAnnotation(annotation) {
+ selectAnnotation = (annotation) => {
if (this.args.annotationClick) this.args.annotationClick(annotation);
- }
+ };
+
+
+ -
- {{#each @data as |props|}}
- {{yield props.series props.datum (inc props.index)}}
- {{/each}}
-
+ {{#each this.processed key=@key as |annotation|}}
+
+
}
diff --git a/ui/app/components/chart-primitives/v-annotations.hbs b/ui/app/components/chart-primitives/v-annotations.hbs
deleted file mode 100644
index 9326b18aa18..00000000000
--- a/ui/app/components/chart-primitives/v-annotations.hbs
+++ /dev/null
@@ -1,31 +0,0 @@
-{{!
- Copyright IBM Corp. 2015, 2025
- SPDX-License-Identifier: BUSL-1.1
-~}}
-
-
+
+
+
+ {{/each}}
+
- {{#each this.processed key=@key as |annotation|}}
-
\ No newline at end of file
diff --git a/ui/app/components/child-job-row.gjs b/ui/app/components/child-job-row.gjs
new file mode 100644
index 00000000000..085407646f7
--- /dev/null
+++ b/ui/app/components/child-job-row.gjs
@@ -0,0 +1,79 @@
+/**
+ * Copyright IBM Corp. 2015, 2025
+ * SPDX-License-Identifier: BUSL-1.1
+ */
+
+import Component from '@glimmer/component';
+import { capitalize } from '@ember/string';
+import { fn } from '@ember/helper';
+import { LinkTo } from '@ember/routing';
+import { service } from '@ember/service';
+import {
+ HdsBadge,
+ HdsIcon,
+} from '@hashicorp/design-system-components/components';
+import formatMonthTs from 'nomad-ui/helpers/format-month-ts';
+import keyboardShortcut from 'nomad-ui/modifiers/keyboard-shortcut';
+import JobStatusAllocationStatusRow from 'nomad-ui/components/job-status/allocation-status-row';
+
+export default class ChildJobRow extends Component {
+ @service router;
+
+ gotoJob = () => {
+ const { job } = this.args;
+ this.router.transitionTo('jobs.job.index', job.idWithNamespace);
+ };
+
+ get statusText() {
+ return capitalize(this.args.job?.aggregateAllocStatus?.label || '');
+ }
+
+
+
-
-
-
- {{/each}}
-
+
+
-
- Recommendation accepted
-A new version of this job will now be deployed.
-| Current | +{{@model.reservedCPU}} MHz | +{{@model.reservedMemory}} MiB | +Difference | +{{this.diffs.cpu.signedDiff}} | ++ {{this.diffs.memory.signedDiff}} + | +
|---|---|---|---|---|---|
| Recommended | +{{this.diffs.cpu.recommended}} + MHz | ++ {{this.diffs.memory.recommended}} + MiB + | +% Difference | ++ {{this.diffs.cpu.percentDiff}} + | ++ {{this.diffs.memory.percentDiff}} + | +
| Current | -{{@model.reservedCPU}} MHz | -{{@model.reservedMemory}} MiB | -Difference | -{{this.diffs.cpu.signedDiff}} | -{{this.diffs.memory.signedDiff}} | -
|---|---|---|---|---|---|
| Recommended | -{{this.diffs.cpu.recommended}} - MHz | -{{this.diffs.memory.recommended}} MiB | -% Difference | -{{this.diffs.cpu.percentDiff}} | -{{this.diffs.memory.percentDiff}} | -
Recommendation dismissed
+ {{else}} +Recommendation dismissed
+ +Nomad will not apply these resource change recommendations.
+ +To never get recommendations for this task group again, disable + dynamic application sizing in the job definition.
+Recommendation dismissed
- {{else}} -Recommendation dismissed
- -Nomad will not apply these resource change recommendations.
- -To never get recommendations for this task group again, disable dynamic - application sizing in the job definition.
-Recommendation error
+ ++ There were errors processing applications: +
+ +{{@error}}
+ Recommendation error
- -- There were errors processing applications: -
- -{{@error}}
-
+
+
+
+
+
+
+ {{#if this.diffs.cpu.delta}}
+
+ CPU
+ {{this.diffs.cpu.signedDiff}}
+ {{this.diffs.cpu.percentDiff}}
+
+ {{/if}}
+
+ {{#if this.diffs.memory.delta}}
+
+ Mem
+ {{this.diffs.memory.signedDiff}}
+ {{this.diffs.memory.percentDiff}}
+
+ {{/if}}
+
+
+
+
+
+
+
+ {{/if}}
+
+}
diff --git a/ui/app/components/das/recommendation-accordion.hbs b/ui/app/components/das/recommendation-accordion.hbs
deleted file mode 100644
index 6263bd8153b..00000000000
--- a/ui/app/components/das/recommendation-accordion.hbs
+++ /dev/null
@@ -1,55 +0,0 @@
-{{!
- Copyright IBM Corp. 2015, 2025
- SPDX-License-Identifier: BUSL-1.1
-~}}
-
-{{#if this.show}}
-
+
+
-
-
-
-
-
-
- {{#if this.diffs.cpu.delta}}
-
- CPU
- {{this.diffs.cpu.signedDiff}}
- {{this.diffs.cpu.percentDiff}}
-
- {{/if}}
-
- {{#if this.diffs.memory.delta}}
-
- Mem
- {{this.diffs.memory.signedDiff}}
- {{this.diffs.memory.percentDiff}}
-
- {{/if}}
-
-
-
-
-
-
-
-{{/if}}
\ No newline at end of file
diff --git a/ui/app/components/das/recommendation-accordion.js b/ui/app/components/das/recommendation-accordion.js
deleted file mode 100644
index 07f1d8706a8..00000000000
--- a/ui/app/components/das/recommendation-accordion.js
+++ /dev/null
@@ -1,57 +0,0 @@
-/**
- * Copyright IBM Corp. 2015, 2025
- * SPDX-License-Identifier: BUSL-1.1
- */
-
-import Component from '@glimmer/component';
-import { action } from '@ember/object';
-import { tracked } from '@glimmer/tracking';
-import { task, timeout } from 'ember-concurrency';
-import { htmlSafe } from '@ember/template';
-import { macroCondition, isTesting } from '@embroider/macros';
-import ResourcesDiffs from 'nomad-ui/utils/resources-diffs';
-
-export default class DasRecommendationAccordionComponent extends Component {
- @tracked waitingToProceed = false;
- @tracked closing = false;
- @tracked animationContainerStyle = htmlSafe('');
-
- @(task(function* () {
- this.closing = true;
- this.animationContainerStyle = htmlSafe(
- `height: ${this.accordionElement.clientHeight}px`,
- );
-
- yield timeout(10);
-
- this.animationContainerStyle = htmlSafe('height: 0px');
-
- // The 450ms for the animation to complete, set in CSS as $timing-slow
- yield timeout(macroCondition(isTesting()) ? 0 : 450);
-
- this.waitingToProceed = false;
- }).drop())
- proceed;
-
- @action
- inserted(element) {
- this.accordionElement = element;
- this.waitingToProceed = true;
- }
-
- get show() {
- return !this.args.summary.isProcessed || this.waitingToProceed;
- }
-
- get diffs() {
- const summary = this.args.summary;
- const taskGroup = summary.taskGroup;
-
- return new ResourcesDiffs(
- taskGroup,
- taskGroup.count,
- this.args.summary.recommendations,
- this.args.summary.excludedRecommendations,
- );
- }
-}
diff --git a/ui/app/components/das/recommendation-card.gjs b/ui/app/components/das/recommendation-card.gjs
new file mode 100644
index 00000000000..4596375d140
--- /dev/null
+++ b/ui/app/components/das/recommendation-card.gjs
@@ -0,0 +1,495 @@
+/**
+ * Copyright IBM Corp. 2015, 2025
+ * SPDX-License-Identifier: BUSL-1.1
+ */
+
+import Component from '@glimmer/component';
+import { service } from '@ember/service';
+import { tracked } from '@glimmer/tracking';
+import { htmlSafe } from '@ember/template';
+import { fn } from '@ember/helper';
+import { on } from '@ember/modifier';
+import { didInsert } from '@ember/render-modifiers';
+import { and, not, eq } from 'ember-truth-helpers';
+import { includes } from '@nullvoxpopuli/ember-composable-helpers';
+import { didCancel, task, timeout } from 'ember-concurrency';
+import { macroCondition, isTesting } from '@embroider/macros';
+import CopyButton from 'nomad-ui/components/copy-button';
+import Toggle from 'nomad-ui/components/toggle';
+import DasAccepted from 'nomad-ui/components/das/accepted';
+import DasDismissed from 'nomad-ui/components/das/dismissed';
+import DasDiffsTable from 'nomad-ui/components/das/diffs-table';
+import DasError from 'nomad-ui/components/das/error';
+import DasRecommendationChart from 'nomad-ui/components/das/recommendation-chart';
+import DasTaskRow from 'nomad-ui/components/das/task-row';
+import ResourcesDiffs from 'nomad-ui/utils/resources-diffs';
+
+export default class DasRecommendationCard extends Component {
+ @service router;
+
+ @tracked allCpuToggleActive = true;
+ @tracked allMemoryToggleActive = true;
+
+ @tracked activeTaskToggleRowIndex = 0;
+
+ element = null;
+
+ @tracked cardHeight;
+ @tracked interstitialComponent;
+ @tracked error;
+
+ @tracked proceedPromiseResolve;
+
+ get activeTaskToggleRow() {
+ return this.taskToggleRows[this.activeTaskToggleRowIndex];
+ }
+
+ get activeTask() {
+ return this.activeTaskToggleRow.task;
+ }
+
+ get narrative() {
+ const summary = this.args.summary;
+ const taskGroup = summary.taskGroup;
+
+ const diffs = new ResourcesDiffs(
+ taskGroup,
+ taskGroup.count,
+ this.args.summary.recommendations,
+ this.args.summary.excludedRecommendations,
+ );
+
+ const cpuDelta = diffs.cpu.delta;
+ const memoryDelta = diffs.memory.delta;
+
+ const aggregate = taskGroup.count > 1;
+ const aggregateString = aggregate ? ' an aggregate' : '';
+
+ if (cpuDelta || memoryDelta) {
+ const deltasSameDirection =
+ (cpuDelta < 0 && memoryDelta < 0) || (cpuDelta > 0 && memoryDelta > 0);
+
+ let narrative = 'Applying the selected recommendations will';
+
+ if (deltasSameDirection) {
+ narrative += ` ${verbForDelta(cpuDelta)} ${aggregateString}`;
+ }
+
+ if (cpuDelta) {
+ if (!deltasSameDirection) {
+ narrative += ` ${verbForDelta(cpuDelta)} ${aggregateString}`;
+ }
+
+ narrative += ` ${diffs.cpu.absoluteAggregateDiff} of CPU`;
+ }
+
+ if (cpuDelta && memoryDelta) {
+ narrative += ' and';
+ }
+
+ if (memoryDelta) {
+ if (!deltasSameDirection) {
+ narrative += ` ${verbForDelta(memoryDelta)} ${aggregateString}`;
+ }
+
+ narrative += ` ${diffs.memory.absoluteAggregateDiff} of memory`;
+ }
+
+ if (taskGroup.count === 1) {
+ narrative += '.';
+ } else {
+ narrative += ` across ${taskGroup.count} allocations.`;
+ }
+
+ return htmlSafe(narrative);
+ } else {
+ return '';
+ }
+ }
+
+ get taskToggleRows() {
+ const taskNameToTaskToggles = {};
+
+ return this.args.summary.recommendations.reduce(
+ (taskToggleRows, recommendation) => {
+ let taskToggleRow = taskNameToTaskToggles[recommendation.task.name];
+
+ if (!taskToggleRow) {
+ taskToggleRow = {
+ recommendations: [],
+ task: recommendation.task,
+ };
+
+ taskNameToTaskToggles[recommendation.task.name] = taskToggleRow;
+ taskToggleRows.push(taskToggleRow);
+ }
+
+ const isCpu = recommendation.resource === 'CPU';
+ const rowResourceProperty = isCpu ? 'cpu' : 'memory';
+
+ taskToggleRow[rowResourceProperty] = {
+ recommendation,
+ isActive:
+ !this.args.summary.excludedRecommendations.includes(recommendation),
+ };
+
+ if (isCpu) {
+ taskToggleRow.recommendations.unshift(recommendation);
+ } else {
+ taskToggleRow.recommendations.push(recommendation);
+ }
+
+ return taskToggleRows;
+ },
+ [],
+ );
+ }
+
+ get showToggleAllToggles() {
+ return this.taskToggleRows.length > 1;
+ }
+
+ get allCpuToggleDisabled() {
+ return !this.args.summary.recommendations.filterBy('resource', 'CPU')
+ .length;
+ }
+
+ get allMemoryToggleDisabled() {
+ return !this.args.summary.recommendations.filterBy('resource', 'MemoryMB')
+ .length;
+ }
+
+ get cannotAccept() {
+ return (
+ this.args.summary.excludedRecommendations.length ==
+ this.args.summary.recommendations.length
+ );
+ }
+
+ get copyButtonLink() {
+ const path = this.router.urlFor(
+ 'optimize.summary',
+ this.args.summary.slug,
+ {
+ queryParams: { namespace: this.args.summary.jobNamespace },
+ },
+ );
+ const { origin } = window.location;
+
+ return `${origin}${path}`;
+ }
+
+ onApplied = task({ drop: true }, async () => {
+ this.interstitialComponent = 'accepted';
+ await timeout(macroCondition(isTesting()) ? 0 : 2000);
+
+ this.args.proceed.perform();
+ this.resetInterstitial();
+ });
+
+ onDismissed = task({ drop: true }, async () => {
+ const { manuallyDismissed } = await new Promise((resolve) => {
+ this.proceedPromiseResolve = resolve;
+ this.interstitialComponent = 'dismissed';
+ });
+
+ if (!manuallyDismissed) {
+ await timeout(macroCondition(isTesting()) ? 0 : 2000);
+ }
+
+ this.args.proceed.perform();
+ this.resetInterstitial();
+ });
+
+ onError = task({ drop: true }, async (error) => {
+ await new Promise((resolve) => {
+ this.proceedPromiseResolve = resolve;
+ this.interstitialComponent = 'error';
+ this.error = error.toString();
+ });
+
+ this.args.proceed.perform();
+ this.resetInterstitial();
+ });
+
+ get interstitialStyle() {
+ return htmlSafe(`height: ${this.cardHeight}px`);
+ }
+
+ toggleAllRecommendationsForResource = (resource) => {
+ let enabled;
+
+ if (resource === 'CPU') {
+ this.allCpuToggleActive = !this.allCpuToggleActive;
+ enabled = this.allCpuToggleActive;
+ } else {
+ this.allMemoryToggleActive = !this.allMemoryToggleActive;
+ enabled = this.allMemoryToggleActive;
+ }
+
+ this.args.summary.toggleAllRecommendationsForResource(resource, enabled);
+ };
+
+ accept = () => {
+ this.storeCardHeight();
+ this.args.summary
+ .save()
+ .then(
+ () => this.onApplied.perform(),
+ (e) => this.onError.perform(e),
+ )
+ .catch((e) => {
+ if (!didCancel(e)) {
+ throw e;
+ }
+ });
+ };
+
+ dismiss = async () => {
+ this.storeCardHeight();
+ const recommendations = await this.args.summary.recommendations;
+
+ this.args.summary.excludedRecommendations.pushObjects(recommendations);
+
+ this.args.summary
+ .save()
+ .then(
+ () => this.onDismissed.perform(),
+ (e) => this.onError.perform(e),
+ )
+ .catch((e) => {
+ if (!didCancel(e)) {
+ throw e;
+ }
+ });
+ };
+
+ setActiveTaskToggleRowIndex = (index) => {
+ this.activeTaskToggleRowIndex = index;
+ };
+
+ resetInterstitial() {
+ if (!this.args.skipReset) {
+ this.interstitialComponent = undefined;
+ this.error = undefined;
+ }
+ }
+
+ cardInserted = (element) => {
+ this.element = element;
+ };
+
+ storeCardHeight() {
+ this.cardHeight = this.element.clientHeight;
+ }
+
+
+ {{! template-lint-disable no-duplicate-landmark-elements}}
+ {{#if this.interstitialComponent}}
+
-
- Resource Recommendation
+ ++ {{@summary.taskGroup.job.name}} + {{@summary.taskGroup.name}} +
++ Namespace: + {{@summary.jobNamespace}} +
+{{this.narrative}}
+| Task | +Toggle All | ++ + | ++ + | + {{else}} +Task | +CPU | +Mem | + {{/if}} +|
|---|---|---|---|---|---|---|---|
{{this.activeTask.name}} task
+-
+ {{#each
+ this.activeTaskToggleRow.recommendations
+ as |recommendation|
+ }}
+
-
+
+
+ {{/each}}
+
Resource Recommendation
- -- {{@summary.taskGroup.job.name}} - {{@summary.taskGroup.name}} -
-- Namespace: - {{@summary.jobNamespace}} -
-{{this.narrative}}
-| Task | -Toggle All | -- - | -- - | - {{else}} -Task | -CPU | -Mem | - {{/if}} -|
|---|---|---|---|---|---|---|---|
{{this.activeTask.name}} task
--
- {{#each this.activeTaskToggleRow.recommendations as |recommendation|}}
-
-
-
+
+
+
+
+
}
diff --git a/ui/app/components/das/recommendation-chart.hbs b/ui/app/components/das/recommendation-chart.hbs
deleted file mode 100644
index fd938220e04..00000000000
--- a/ui/app/components/das/recommendation-chart.hbs
+++ /dev/null
@@ -1,177 +0,0 @@
-{{!
- Copyright IBM Corp. 2015, 2025
- SPDX-License-Identifier: BUSL-1.1
-~}}
-
-
+
+
+ -
+ {{#each this.sortedStats as |stat|}}
+
- + + {{stat.label}} + + {{stat.value}} + + {{/each}} +
-
-
-
-
\ No newline at end of file
diff --git a/ui/app/components/das/recommendation-row.gjs b/ui/app/components/das/recommendation-row.gjs
new file mode 100644
index 00000000000..6566f985a59
--- /dev/null
+++ b/ui/app/components/das/recommendation-row.gjs
@@ -0,0 +1,120 @@
+/**
+ * Copyright IBM Corp. 2015, 2025
+ * SPDX-License-Identifier: BUSL-1.1
+ */
+
+import Component from '@glimmer/component';
+import { tracked } from '@glimmer/tracking';
+import { didInsert } from '@ember/render-modifiers';
+import formatMonthTs from 'nomad-ui/helpers/format-month-ts';
+import ResourcesDiffs from 'nomad-ui/utils/resources-diffs';
+
+export default class DasRecommendationRow extends Component {
+ @tracked cpu = {};
+ @tracked memory = {};
+
+ get taskGroup() {
+ return this.args.summary.taskGroup;
+ }
+
+ get jobName() {
+ return (
+ this.taskGroup?.job?.name ||
+ this.args.summary.job?.name ||
+ this.args.summary.jobId
+ );
+ }
+
+ get allocationCount() {
+ return this.taskGroup?.count || 0;
+ }
+
+ storeDiffs = () => {
+ // Prevent resource toggling from affecting the summary diffs
+ if (!this.taskGroup) {
+ this.cpu = {};
+ this.memory = {};
+ return;
+ }
+
+ const diffs = new ResourcesDiffs(
+ this.taskGroup,
+ 1,
+ this.args.summary.recommendations,
+ this.args.summary.excludedRecommendations,
+ );
+
+ const aggregateDiffs = new ResourcesDiffs(
+ this.taskGroup,
+ this.taskGroup.count,
+ this.args.summary.recommendations,
+ this.args.summary.excludedRecommendations,
+ );
+
+ this.cpu = {
+ delta: diffs.cpu.delta,
+ signedDiff: diffs.cpu.signedDiff,
+ percentDiff: diffs.cpu.percentDiff,
+ signedAggregateDiff: aggregateDiffs.cpu.signedDiff,
+ };
+
+ this.memory = {
+ delta: diffs.memory.delta,
+ signedDiff: diffs.memory.signedDiff,
+ percentDiff: diffs.memory.percentDiff,
+ signedAggregateDiff: aggregateDiffs.memory.signedDiff,
+ };
+ };
+
+
+ {{#if @summary.taskGroup.allocations.length}}
+ {{! Prevent storing aggregate diffs until allocation count is known }}
+
-
-
--
- {{#each this.sortedStats as |stat|}}
-
- - - {{stat.label}} - - {{stat.value}} - - {{/each}} -
+ {{@summary.taskGroup.job.name}}
+ /
+ {{@summary.taskGroup.name}}
+
+
+ Namespace:
+ {{@summary.jobNamespace}}
+
+
- {{@summary.taskGroup.job.name}}
- /
- {{@summary.taskGroup.name}}
-
-
- Namespace:
- {{@summary.jobNamespace}}
-
-
-
-{{/if}}
\ No newline at end of file
diff --git a/ui/app/components/distribution-bar.js b/ui/app/components/distribution-bar.js
deleted file mode 100644
index fbf2179a97e..00000000000
--- a/ui/app/components/distribution-bar.js
+++ /dev/null
@@ -1,199 +0,0 @@
-/**
- * Copyright IBM Corp. 2015, 2025
- * SPDX-License-Identifier: BUSL-1.1
- */
-
-/* eslint-disable ember/no-observers */
-import Component from '@ember/component';
-import { computed, set } from '@ember/object';
-import { observes } from '@ember-decorators/object';
-import { run, once, schedule } from '@ember/runloop';
-import { guidFor } from '@ember/object/internals';
-import { copy } from 'ember-copy';
-import { computed as overridable } from 'ember-overridable-computed';
-import d3 from 'd3-selection';
-import 'd3-transition';
-import WindowResizable from '../mixins/window-resizable';
-import styleStringProperty from '../utils/properties/style-string';
-import { classNames, classNameBindings } from '@ember-decorators/component';
-import classic from 'ember-classic-decorator';
-
-const sumAggregate = (total, val) => total + val;
-
-@classic
-@classNames('chart', 'distribution-bar')
-@classNameBindings('isNarrow:is-narrow')
-export default class DistributionBar extends Component.extend(WindowResizable) {
- chart = null;
- @overridable(() => null) data;
- onSliceClick = null;
- activeDatum = null;
- isNarrow = false;
-
- @styleStringProperty('tooltipPosition') tooltipStyle;
- maskId = null;
-
- @computed('data')
- get _data() {
- const data = copy(this.data, true);
- const sum = data.mapBy('value').reduce(sumAggregate, 0);
-
- return data.map(
- ({ label, value, className, layers, legendLink, help }, index) => ({
- label,
- value,
- className,
- layers,
- legendLink,
- help,
- index,
- percent: value / sum,
- offset:
- data.slice(0, index).mapBy('value').reduce(sumAggregate, 0) / sum,
- }),
- );
- }
-
- didInsertElement() {
- super.didInsertElement(...arguments);
- const svg = this.element.querySelector('svg');
- const chart = d3.select(svg);
- const maskId = `dist-mask-${guidFor(this)}`;
- this.setProperties({ chart, maskId });
-
- svg.querySelector('clipPath').setAttribute('id', maskId);
-
- chart.on('mouseleave', () => {
- run(() => {
- this.set('isActive', false);
- this.set('activeDatum', null);
- chart
- .selectAll('g')
- .classed('active', false)
- .classed('inactive', false);
- });
- });
-
- this.renderChart();
- }
-
- didUpdateAttrs() {
- super.didUpdateAttrs();
- this.renderChart();
- }
-
- @observes('_data.@each.{value,label,className}')
- updateChart() {
- this.renderChart();
- }
-
- // prettier-ignore
-
- renderChart() {
- const { chart, _data, isNarrow } = this;
- const width = this.element.querySelector('svg').clientWidth;
- const filteredData = _data.filter(d => d.value > 0);
- filteredData.forEach((d, index) => {
- set(d, 'index', index);
- });
-
- let slices = chart.select('.bars').selectAll('g').data(filteredData, d => d.label);
- let sliceCount = filteredData.length;
-
- slices.exit().remove();
-
- let slicesEnter = slices.enter()
- .append('g')
- .on('mouseenter', (ev, d) => {
- run(() => {
- const slices = this.slices;
- const slice = slices.filter(datum => datum.label === d.label);
- slices.classed('active', false).classed('inactive', true);
- slice.classed('active', true).classed('inactive', false);
- this.set('activeDatum', d);
-
- const box = slice.node().getBBox();
- const pos = box.x + box.width / 2;
-
- // Ensure that the position is set before the tooltip is visible
- schedule('afterRender', this, () => this.set('isActive', true));
- this.set('tooltipPosition', {
- left: pos,
- });
- });
- });
-
- slices = slices.merge(slicesEnter);
- slices.attr('class', d => {
- const className = d.className || `slice-${_data.indexOf(d)}`
- const activeDatum = this.activeDatum;
- const isActive = activeDatum && activeDatum.label === d.label;
- const isInactive = activeDatum && activeDatum.label !== d.label;
- const isClickable = !!this.onSliceClick;
- return [
- className,
- isActive && 'active',
- isInactive && 'inactive',
- isClickable && 'clickable'
- ].compact().join(' ');
- }).attr('data-test-slice-label', d => d.className);
-
- this.set('slices', slices);
-
- const setWidth = d => {
- // Remove a pixel from either side of the slice
- let modifier = 2;
- if (d.index === 0) modifier--; // But not the left side
- if (d.index === sliceCount - 1) modifier--; // But not the right side
-
- return `${width * d.percent - modifier}px`;
- };
- const setOffset = d => `${width * d.offset + (d.index === 0 ? 0 : 1)}px`;
-
- let hoverTargets = slices.selectAll('.target').data(d => [d]);
- hoverTargets.enter()
- .append('rect')
- .attr('class', 'target')
- .attr('width', setWidth)
- .attr('height', '100%')
- .attr('x', setOffset)
- .merge(hoverTargets)
- .transition()
- .duration(200)
- .attr('width', setWidth)
- .attr('x', setOffset)
-
- let layers = slices.selectAll('.bar').data((d, i) => {
- return new Array(d.layers || 1).fill(Object.assign({ index: i }, d));
- });
- layers.enter()
- .append('rect')
- .attr('width', setWidth)
- .attr('x', setOffset)
- .attr('y', () => isNarrow ? '50%' : 0)
- .attr('clip-path', `url(#${this.maskId})`)
- .attr('height', () => isNarrow ? '6px' : '100%')
- .attr('transform', () => isNarrow ? 'translate(0, -3)' : '')
- .merge(layers)
- .attr('class', (d, i) => `bar layer-${i}`)
- .transition()
- .duration(200)
- .attr('width', setWidth)
- .attr('x', setOffset)
-
- if (isNarrow) {
- d3.select(this.element).select('.mask')
- .attr('height', '6px')
- .attr('y', '50%');
- }
-
- if (this.onSliceClick) {
- slices.on('click', this.onSliceClick);
- }
- }
- /* eslint-enable */
-
- windowResizeHandler() {
- once(this, this.renderChart);
- }
-}
diff --git a/ui/app/components/drain-popover.gjs b/ui/app/components/drain-popover.gjs
new file mode 100644
index 00000000000..c71f230b312
--- /dev/null
+++ b/ui/app/components/drain-popover.gjs
@@ -0,0 +1,293 @@
+/**
+ * Copyright IBM Corp. 2015, 2025
+ * SPDX-License-Identifier: BUSL-1.1
+ */
+
+import Component from '@glimmer/component';
+import { tracked } from '@glimmer/tracking';
+import { fn } from '@ember/helper';
+import { on } from '@ember/modifier';
+import { task } from 'ember-concurrency';
+import { HdsIcon } from '@hashicorp/design-system-components/components';
+import Duration from 'duration-js';
+import PowerSelect from 'ember-power-select/components/power-select';
+import PopoverMenu from 'nomad-ui/components/popover-menu';
+import Toggle from 'nomad-ui/components/toggle';
+import localStorageProperty from 'nomad-ui/utils/properties/local-storage';
+
+const noOp = () => {};
+
+export default class DrainPopover extends Component {
+ @tracked parseError = '';
+ @tracked deadlineEnabled = false;
+ @tracked forceDrain = false;
+ @tracked drainSystemJobs = true;
+ @tracked customDuration = '';
+ @tracked selectedDurationQuickOption;
+
+ @localStorageProperty('nomadDrainOptions', {}) drainOptions;
+
+ constructor() {
+ super(...arguments);
+
+ this.selectedDurationQuickOption = this.durationQuickOptions[0];
+
+ [
+ 'deadlineEnabled',
+ 'customDuration',
+ 'forceDrain',
+ 'drainSystemJobs',
+ 'selectedDurationQuickOption',
+ ].forEach((key) => {
+ if (key in this.drainOptions) {
+ this[key] = this.drainOptions[key];
+ }
+ });
+ }
+
+ get isDisabled() {
+ return this.args.isDisabled ?? false;
+ }
+
+ get onError() {
+ return this.args.onError ?? noOp;
+ }
+
+ get onDrain() {
+ return this.args.onDrain ?? noOp;
+ }
+
+ get durationQuickOptions() {
+ return [
+ { label: '1 Hour', value: '1h' },
+ { label: '4 Hours', value: '4h' },
+ { label: '8 Hours', value: '8h' },
+ { label: '12 Hours', value: '12h' },
+ { label: '1 Day', value: '1d' },
+ { label: 'Custom', value: 'custom' },
+ ];
+ }
+
+ get durationIsCustom() {
+ return this.selectedDurationQuickOption?.value === 'custom';
+ }
+
+ get deadline() {
+ if (!this.deadlineEnabled) return 0;
+ if (this.durationIsCustom) return this.customDuration;
+ return this.selectedDurationQuickOption.value;
+ }
+
+ get popoverLabel() {
+ return this.args.client?.isDraining ? 'Update Drain' : 'Drain';
+ }
+
+ get popoverTooltip() {
+ return this.isDisabled ? 'Not allowed to drain clients' : undefined;
+ }
+
+ get triggerClass() {
+ return [
+ 'is-small',
+ this.drain.isRunning ? 'is-loading' : '',
+ this.isDisabled ? 'tooltip is-right-aligned' : '',
+ ]
+ .filter(Boolean)
+ .join(' ');
+ }
+
+ get customDurationInputValue() {
+ return this.customDuration === 0 ? '' : this.customDuration;
+ }
+
+ drain = task({ drop: true }, async (close) => {
+ if (!this.args.client) return;
+ const isUpdating = this.args.client.isDraining;
+
+ let deadline;
+ try {
+ deadline = new Duration(this.deadline).nanoseconds();
+ } catch (err) {
+ this.parseError = err.message;
+ return;
+ }
+
+ const spec = {
+ Deadline: deadline,
+ IgnoreSystemJobs: !this.drainSystemJobs,
+ };
+
+ this.drainOptions = {
+ deadlineEnabled: this.deadlineEnabled,
+ customDuration: this.deadline,
+ selectedDurationQuickOption: this.selectedDurationQuickOption,
+ drainSystemJobs: this.drainSystemJobs,
+ forceDrain: this.forceDrain,
+ };
+
+ close();
+
+ try {
+ if (this.forceDrain) {
+ await this.args.client.forceDrain(spec);
+ } else {
+ await this.args.client.drain(spec);
+ }
+ this.onDrain(isUpdating);
+ } catch (err) {
+ this.onError(err);
+ }
+ });
+
+ onSubmit = (event, close) => {
+ event.preventDefault();
+ this.drain.perform(close);
+ };
+
+ onClickDrain = (close) => {
+ this.drain.perform(close);
+ };
+
+ updateDeadlineEnabled = ({ target: { checked } }) => {
+ this.deadlineEnabled = checked;
+ };
+
+ updateForceDrain = ({ target: { checked } }) => {
+ this.forceDrain = checked;
+ };
+
+ updateDrainSystemJobs = ({ target: { checked } }) => {
+ this.drainSystemJobs = checked;
+ };
+
+ updateSelectedDuration = (option) => {
+ this.selectedDurationQuickOption = option;
+ };
+
+ updateCustomDuration = ({ target: { value } }) => {
+ this.parseError = '';
+ this.customDuration = value;
+ };
+
+
+ {{! template-lint-disable require-input-label }}
+ -
- {{#each this._data as |datum index|}}
-
- - - - {{datum.label}} - - {{datum.value}} - - {{/each}} -
+
+;
+
+export default EvaluationSidebarRelatedEvaluations;
diff --git a/ui/app/components/evaluation-sidebar/related-evaluations.hbs b/ui/app/components/evaluation-sidebar/related-evaluations.hbs
deleted file mode 100644
index 6cfe44c316c..00000000000
--- a/ui/app/components/evaluation-sidebar/related-evaluations.hbs
+++ /dev/null
@@ -1,65 +0,0 @@
-{{!
- Copyright IBM Corp. 2015, 2025
- SPDX-License-Identifier: BUSL-1.1
-~}}
-
-
+ Related Evaluations
+
+
+
-
\ No newline at end of file
diff --git a/ui/app/components/exec-terminal.gjs b/ui/app/components/exec-terminal.gjs
new file mode 100644
index 00000000000..34cf2c50423
--- /dev/null
+++ b/ui/app/components/exec-terminal.gjs
@@ -0,0 +1,80 @@
+/**
+ * Copyright IBM Corp. 2015, 2025
+ * SPDX-License-Identifier: BUSL-1.1
+ */
+
+import Component from '@glimmer/component';
+import { FitAddon } from 'xterm-addon-fit';
+import { didInsert } from '@ember/render-modifiers';
+import windowResize from 'nomad-ui/modifiers/window-resize';
+
+export default class ExecTerminal extends Component {
+ fitAddon = null;
+ beforeUnloadHandler = null;
+
+ get terminal() {
+ return this.args.terminal;
+ }
+
+ get socketOpen() {
+ return this.args.socketOpen;
+ }
+
+ setupTerminal = (element) => {
+ if (!this.terminal) {
+ return;
+ }
+
+ const fitAddon = new FitAddon();
+ this.fitAddon = fitAddon;
+ this.terminal.loadAddon(fitAddon);
+ this.terminal.open(element);
+ fitAddon.fit();
+ this.addExitHandler();
+ };
+
+ addExitHandler = () => {
+ if (this.beforeUnloadHandler) {
+ return;
+ }
+
+ this.beforeUnloadHandler = (event) => this.confirmExit(event);
+ window.addEventListener('beforeunload', this.beforeUnloadHandler);
+ };
+
+ removeExitHandler = () => {
+ if (!this.beforeUnloadHandler) {
+ return;
+ }
+
+ window.removeEventListener('beforeunload', this.beforeUnloadHandler);
+ this.beforeUnloadHandler = null;
+ };
+
+ confirmExit(event) {
+ if (this.socketOpen) {
+ event.preventDefault();
+ return (event.returnValue = 'Are you sure you want to exit?');
+ }
+ }
+
+ windowResizeHandler = (event) => {
+ this.fitAddon?.fit();
+ this.terminal?.resized?.(event);
+ };
+
+ willDestroy() {
+ super.willDestroy(...arguments);
+ this.removeExitHandler();
+ }
+
+
+
- Related Evaluations
-
-
-
+
+
+
+}
diff --git a/ui/app/components/exec-terminal.hbs b/ui/app/components/exec-terminal.hbs
deleted file mode 100644
index 5c6435d2dc7..00000000000
--- a/ui/app/components/exec-terminal.hbs
+++ /dev/null
@@ -1,6 +0,0 @@
-{{!
- Copyright IBM Corp. 2015, 2025
- SPDX-License-Identifier: BUSL-1.1
-~}}
-
-
\ No newline at end of file
diff --git a/ui/app/components/exec-terminal.js b/ui/app/components/exec-terminal.js
deleted file mode 100644
index 69a9f3d0915..00000000000
--- a/ui/app/components/exec-terminal.js
+++ /dev/null
@@ -1,68 +0,0 @@
-/**
- * Copyright IBM Corp. 2015, 2025
- * SPDX-License-Identifier: BUSL-1.1
- */
-
-import Component from '@ember/component';
-import { FitAddon } from 'xterm-addon-fit';
-import WindowResizable from '../mixins/window-resizable';
-import { classNames } from '@ember-decorators/component';
-import classic from 'ember-classic-decorator';
-import { service } from '@ember/service';
-import { action } from '@ember/object';
-
-@classic
-@classNames('terminal-container')
-export default class ExecTerminal extends Component.extend(WindowResizable) {
- @service router;
-
- didInsertElement() {
- super.didInsertElement(...arguments);
- let fitAddon = new FitAddon();
- this.fitAddon = fitAddon;
- this.terminal.loadAddon(fitAddon);
-
- this.terminal.open(this.element.querySelector('.terminal'));
-
- fitAddon.fit();
- this.addExitHandler();
- }
-
- socketOpen = false;
- hasRemovedExitHandler = false;
-
- @action
- addExitHandler() {
- window.addEventListener('beforeunload', this.confirmExit.bind(this));
- }
- removeExitHandler() {
- if (!this.hasRemovedExitHandler) {
- window.removeEventListener('beforeunload', this.confirmExit.bind(this));
- this.hasRemovedExitHandler = true;
- }
- }
-
- /**
- *
- * @param {BeforeUnloadEvent} event
- * @returns {string}
- */
- confirmExit(event) {
- if (this.socketOpen) {
- event.preventDefault();
- return (event.returnValue = 'Are you sure you want to exit?');
- }
- }
-
- willDestroy() {
- super.willDestroy(...arguments);
- this.removeExitHandler();
- }
-
- windowResizeHandler(e) {
- this.fitAddon.fit();
- if (this.terminal.resized) {
- this.terminal.resized(e);
- }
- }
-}
diff --git a/ui/app/components/exec/open-button.gjs b/ui/app/components/exec/open-button.gjs
new file mode 100644
index 00000000000..bb959c3dc93
--- /dev/null
+++ b/ui/app/components/exec/open-button.gjs
@@ -0,0 +1,59 @@
+/**
+ * Copyright IBM Corp. 2015, 2025
+ * SPDX-License-Identifier: BUSL-1.1
+ */
+
+import Component from '@glimmer/component';
+import { service } from '@ember/service';
+import { on } from '@ember/modifier';
+import { array } from '@ember/helper';
+import { or } from 'ember-truth-helpers';
+import { HdsButton } from '@hashicorp/design-system-components/components';
+import cannot from 'ember-can/helpers/cannot';
+import keyboardShortcutModifier from 'nomad-ui/modifiers/keyboard-shortcut';
+import generateExecUrl from 'nomad-ui/utils/generate-exec-url';
+import openExecUrl from 'nomad-ui/utils/open-exec-url';
+
+export default class OpenButton extends Component {
+ @service router;
+
+ open = () => {
+ openExecUrl(this.generateUrl());
+ };
+
+ generateUrl() {
+ return generateExecUrl(this.router, {
+ job: this.args.job,
+ taskGroup: this.args.taskGroup,
+ task: this.args.task,
+ allocation: this.args.allocation,
+ });
+ }
+
+
+ {{#let
+ (cannot "exec allocation" namespace=(or @job.namespaceId @job.namespace))
+ as |cannotExec|
+ }}
+
+ {{/let}}
+
+}
diff --git a/ui/app/components/exec/open-button.hbs b/ui/app/components/exec/open-button.hbs
deleted file mode 100644
index 0be3378e553..00000000000
--- a/ui/app/components/exec/open-button.hbs
+++ /dev/null
@@ -1,30 +0,0 @@
-{{!
- Copyright IBM Corp. 2015, 2025
- SPDX-License-Identifier: BUSL-1.1
-~}}
-
-{{#let
- (cannot
- "exec allocation" namespace=(or this.job.namespaceId this.job.namespace)
- )
- as |cannotExec|
-}}
-
-{{/let}}
\ No newline at end of file
diff --git a/ui/app/components/exec/open-button.js b/ui/app/components/exec/open-button.js
deleted file mode 100644
index 52e4ad9d9de..00000000000
--- a/ui/app/components/exec/open-button.js
+++ /dev/null
@@ -1,32 +0,0 @@
-/**
- * Copyright IBM Corp. 2015, 2025
- * SPDX-License-Identifier: BUSL-1.1
- */
-
-import Component from '@ember/component';
-import { action } from '@ember/object';
-import { service } from '@ember/service';
-import generateExecUrl from 'nomad-ui/utils/generate-exec-url';
-import openExecUrl from 'nomad-ui/utils/open-exec-url';
-import { tagName } from '@ember-decorators/component';
-import classic from 'ember-classic-decorator';
-
-@classic
-@tagName('')
-export default class OpenButton extends Component {
- @service router;
-
- @action
- open() {
- openExecUrl(this.generateUrl());
- }
-
- generateUrl() {
- return generateExecUrl(this.router, {
- job: this.job,
- taskGroup: this.taskGroup,
- task: this.task,
- allocation: this.allocation,
- });
- }
-}
diff --git a/ui/app/components/exec/task-contents.gjs b/ui/app/components/exec/task-contents.gjs
new file mode 100644
index 00000000000..d02f0bc7a5b
--- /dev/null
+++ b/ui/app/components/exec/task-contents.gjs
@@ -0,0 +1,34 @@
+/**
+ * Copyright IBM Corp. 2015, 2025
+ * SPDX-License-Identifier: BUSL-1.1
+ */
+
+import { HdsIcon } from '@hashicorp/design-system-components/components';
+
+export const TaskContents =
+
+
+
+ {{#if @shouldOpenInNewWindow}}
+
+
+ {{#if @active}}
+
+
-
-
-{{#if this.shouldOpenInNewWindow}}
-
-
- {{#if this.active}}
-
--
+ {{#each this.sortedTasks as |task|}}
+ {{#if @shouldOpenInNewWindow}}
+
+
-
- {{#each this.sortedTasks as |task|}}
- {{#if this.shouldOpenInNewWindow}}
-
-
+ {{#each @items as |item|}}
+
+
}
diff --git a/ui/app/components/flex-masonry.hbs b/ui/app/components/flex-masonry.hbs
deleted file mode 100644
index 7e0736a34f3..00000000000
--- a/ui/app/components/flex-masonry.hbs
+++ /dev/null
@@ -1,21 +0,0 @@
-{{!
- Copyright IBM Corp. 2015, 2025
- SPDX-License-Identifier: BUSL-1.1
-~}}
-
-
+ {{yield item this.reflow}}
+
+ {{/each}}
+
- {{#each @items as |item|}}
-
\ No newline at end of file
diff --git a/ui/app/components/forbidden-message.gjs b/ui/app/components/forbidden-message.gjs
new file mode 100644
index 00000000000..d4159ba3bc2
--- /dev/null
+++ b/ui/app/components/forbidden-message.gjs
@@ -0,0 +1,102 @@
+/**
+ * Copyright IBM Corp. 2015, 2025
+ * SPDX-License-Identifier: BUSL-1.1
+ */
+
+import Component from '@glimmer/component';
+import { fn } from '@ember/helper';
+import { LinkTo } from '@ember/routing';
+import { on } from '@ember/modifier';
+import { service } from '@ember/service';
+import { not } from 'ember-truth-helpers';
+import conditionallyCapitalize from 'nomad-ui/helpers/conditionally-capitalize';
+
+export default class ForbiddenMessage extends Component {
+ @service token;
+ @service store;
+ @service router;
+
+ forbiddenOriginPath = null;
+
+ constructor() {
+ super(...arguments);
+
+ const currentURL = this.router.currentURL;
+ if (
+ !this.forbiddenOriginPath &&
+ currentURL &&
+ currentURL !== '/settings/tokens'
+ ) {
+ this.forbiddenOriginPath = currentURL;
+ }
+
+ if (currentURL && currentURL !== '/settings/tokens') {
+ if (!this.token.postExpiryPath) {
+ this.token.postExpiryPath = currentURL;
+ }
+ if (!this.token.forbiddenReturnPath) {
+ this.token.forbiddenReturnPath = currentURL;
+ }
+ }
+ }
+
+ get authMethods() {
+ return this.store.findAll('auth-method');
+ }
+
+
+
+
+}
diff --git a/ui/app/components/forbidden-message.hbs b/ui/app/components/forbidden-message.hbs
deleted file mode 100644
index fb40e89dae5..00000000000
--- a/ui/app/components/forbidden-message.hbs
+++ /dev/null
@@ -1,58 +0,0 @@
-{{!
- Copyright IBM Corp. 2015, 2025
- SPDX-License-Identifier: BUSL-1.1
-~}}
-
-
\ No newline at end of file
diff --git a/ui/app/components/forbidden-message.js b/ui/app/components/forbidden-message.js
deleted file mode 100644
index d5dc7c1cb98..00000000000
--- a/ui/app/components/forbidden-message.js
+++ /dev/null
@@ -1,56 +0,0 @@
-/**
- * Copyright IBM Corp. 2015, 2025
- * SPDX-License-Identifier: BUSL-1.1
- */
-
-import Component from '@ember/component';
-import { tagName } from '@ember-decorators/component';
-import { service } from '@ember/service';
-import { action } from '@ember/object';
-
-@tagName('')
-export default class ForbiddenMessage extends Component {
- @service token;
- @service store;
- @service router;
-
- forbiddenOriginPath = null;
-
- didReceiveAttrs() {
- super.didReceiveAttrs(...arguments);
-
- const currentURL = this.router.currentURL;
- if (
- !this.forbiddenOriginPath &&
- currentURL &&
- currentURL !== '/settings/tokens'
- ) {
- this.forbiddenOriginPath = currentURL;
- }
-
- if (currentURL && currentURL !== '/settings/tokens') {
- if (!this.token.postExpiryPath) {
- this.token.postExpiryPath = currentURL;
- }
- if (!this.token.forbiddenReturnPath) {
- this.token.forbiddenReturnPath = currentURL;
- }
- }
- }
-
- @action
- rememberPostExpiryPath() {
- const currentURL = this.forbiddenOriginPath || this.router.currentURL;
-
- if (!currentURL || currentURL === '/settings/tokens') {
- return;
- }
-
- this.token.postExpiryPath = currentURL;
- this.token.forbiddenReturnPath = currentURL;
- }
-
- get authMethods() {
- return this.store.findAll('auth-method');
- }
-}
diff --git a/ui/app/components/fs/breadcrumbs.gjs b/ui/app/components/fs/breadcrumbs.gjs
new file mode 100644
index 00000000000..82b83670528
--- /dev/null
+++ b/ui/app/components/fs/breadcrumbs.gjs
@@ -0,0 +1,62 @@
+/**
+ * Copyright IBM Corp. 2015, 2025
+ * SPDX-License-Identifier: BUSL-1.1
+ */
+
+import Component from '@glimmer/component';
+import FsLink from 'nomad-ui/components/fs/link';
+
+export default class Breadcrumbs extends Component {
+ get breadcrumbs() {
+ const path = this.args.path ?? '';
+ const breadcrumbs = path
+ .split('/')
+ .filter(Boolean)
+ .reduce((items, pathSegment, index) => {
+ let breadcrumbPath;
+
+ if (index > 0) {
+ const lastBreadcrumb = items[index - 1];
+ breadcrumbPath = `${lastBreadcrumb.path}/${pathSegment}`;
+ } else {
+ breadcrumbPath = pathSegment;
+ }
+
+ items.push({
+ name: pathSegment,
+ path: breadcrumbPath,
+ });
+
+ return items;
+ }, []);
+
+ if (breadcrumbs.length) {
+ breadcrumbs[breadcrumbs.length - 1].isLast = true;
+ }
+
+ return breadcrumbs;
+ }
+
+
+
+
+}
diff --git a/ui/app/components/fs/breadcrumbs.hbs b/ui/app/components/fs/breadcrumbs.hbs
deleted file mode 100644
index 5e9438c4ece..00000000000
--- a/ui/app/components/fs/breadcrumbs.hbs
+++ /dev/null
@@ -1,23 +0,0 @@
-{{!
- Copyright IBM Corp. 2015, 2025
- SPDX-License-Identifier: BUSL-1.1
-~}}
-
-
- {{yield item this.reflow}}
-
- {{/each}}
--
-
-
-
-
-
+
+
+ Name
+ File Size
+ Last Modified
+
+
+
+
+ {{else}}
+
+ {{/if}}
+
+
+ {{#if @directoryEntries}}
+
+
+
+ {{/if}}
+
-
-
- Name
- File Size
- Last Modified
-
-
-
-
- {{else}}
-
- {{/if}}
-
-
- {{#if this.directoryEntries}}
-
-
-
- {{/if}}
-
+ {{#if this.noConnection}}
+
+
+}
diff --git a/ui/app/components/fs/file.hbs b/ui/app/components/fs/file.hbs
deleted file mode 100644
index 5739ab50984..00000000000
--- a/ui/app/components/fs/file.hbs
+++ /dev/null
@@ -1,88 +0,0 @@
-{{!
- Copyright IBM Corp. 2015, 2025
- SPDX-License-Identifier: BUSL-1.1
-~}}
-
-{{#if this.noConnection}}
-
+
+ {{/if}}
+ Cannot fetch file
+The files for this + {{if @taskState "task" "allocation"}} + are inaccessible. Check the condition of the client the allocation + is on.
+
+ {{yield}}
+
+
+ {{#unless this.fileTypeIsUnknown}}
+
+ {{/unless}}
+ {{#if (and this.isLarge this.isStreamable)}}
+
+
+ {{/if}}
+ {{#if this.isStreamable}}
+
+ {{/if}}
+
+
+
+ {{#if (eq this.fileComponent "stream")}}
+
+
-
-{{/if}}
-Cannot fetch file
-The files for this - {{if this.task "task" "allocation"}} - are inaccessible. Check the condition of the client the allocation is on.
-
- {{yield}}
-
-
- {{#unless this.fileTypeIsUnknown}}
-
- {{/unless}}
- {{#if (and this.isLarge this.isStreamable)}}
-
-
- {{/if}}
- {{#if this.isStreamable}}
-
- {{/if}}
-
-
-
- {{#if (eq this.fileComponent "stream")}}
-
\ No newline at end of file
diff --git a/ui/app/components/fs/file.js b/ui/app/components/fs/file.js
deleted file mode 100644
index 1d4f7e6f5f0..00000000000
--- a/ui/app/components/fs/file.js
+++ /dev/null
@@ -1,224 +0,0 @@
-/**
- * Copyright IBM Corp. 2015, 2025
- * SPDX-License-Identifier: BUSL-1.1
- */
-
-import { macroCondition, isTesting } from '@embroider/macros';
-import { service } from '@ember/service';
-import Component from '@ember/component';
-import { action, computed } from '@ember/object';
-import { equal, gt } from '@ember/object/computed';
-import RSVP from 'rsvp';
-import Log from 'nomad-ui/utils/classes/log';
-import timeout from 'nomad-ui/utils/timeout';
-import { classNames, attributeBindings } from '@ember-decorators/component';
-import classic from 'ember-classic-decorator';
-
-@classic
-@classNames('boxed-section', 'task-log')
-@attributeBindings('data-test-file-viewer')
-export default class File extends Component {
- @service token;
- @service system;
-
- 'data-test-file-viewer' = true;
-
- allocation = null;
- taskState = null;
- file = null;
- stat = null; // { Name, IsDir, Size, FileMode, ModTime, ContentType }
-
- // When true, request logs from the server agent
- useServer = false;
-
- // When true, logs cannot be fetched from either the client or the server
- noConnection = false;
-
- clientTimeout = 1000;
- serverTimeout = 5000;
-
- mode = 'head';
-
- @computed('stat.ContentType')
- get fileComponent() {
- const contentType = this.stat.ContentType || '';
-
- if (contentType.startsWith('image/')) {
- return 'image';
- } else if (
- contentType.startsWith('text/') ||
- contentType.startsWith('application/json')
- ) {
- return 'stream';
- } else {
- return 'unknown';
- }
- }
-
- @gt('stat.Size', 50000) isLarge;
-
- @equal('fileComponent', 'unknown') fileTypeIsUnknown;
- @equal('fileComponent', 'stream') isStreamable;
- isStreaming = false;
-
- @computed('allocation.id', 'taskState.name', 'file')
- get catUrlWithoutRegion() {
- const taskUrlPrefix = this.taskState ? `${this.taskState.name}/` : '';
- const encodedPath = encodeURIComponent(`${taskUrlPrefix}${this.file}`);
- return `/v1/client/fs/cat/${this.allocation.id}?path=${encodedPath}`;
- }
-
- @computed('catUrlWithoutRegion', 'system.{activeRegion,shouldIncludeRegion}')
- get catUrl() {
- let apiPath = this.catUrlWithoutRegion;
- const activeRegion = this.system.activeRegion;
-
- if (this.system.shouldIncludeRegion && activeRegion) {
- apiPath += `®ion=${activeRegion}`;
- }
- return apiPath;
- }
-
- @computed('isLarge', 'mode')
- get fetchMode() {
- if (this.mode === 'streaming') {
- return 'stream';
- }
-
- if (!this.isLarge) {
- return 'cat';
- } else if (this.mode === 'head' || this.mode === 'tail') {
- return 'readat';
- }
-
- return undefined;
- }
-
- @computed('allocation.{id,node.httpAddr}', 'fetchMode', 'useServer')
- get fileUrl() {
- const address = this.get('allocation.node.httpAddr');
- const url = `/v1/client/fs/${this.fetchMode}/${this.allocation.id}`;
- return this.useServer ? url : `//${address}${url}`;
- }
-
- @computed('file', 'mode', 'stat.Size', 'taskState.name')
- get fileParams() {
- // The Log class handles encoding query params
- const taskUrlPrefix = this.taskState ? `${this.taskState.name}/` : '';
- const path = `${taskUrlPrefix}${this.file}`;
-
- switch (this.mode) {
- case 'head':
- return { path, offset: 0, limit: 50000 };
- case 'tail':
- return { path, offset: this.stat.Size - 50000, limit: 50000 };
- case 'streaming':
- return { path, offset: 50000, origin: 'end' };
- default:
- return { path };
- }
- }
-
- @computed(
- 'clientTimeout',
- 'fileParams',
- 'fileUrl',
- 'mode',
- 'serverTimeout',
- 'useServer',
- )
- get logger() {
- // The cat and readat APIs are in plainText while the stream API is always encoded.
- const plainText = this.mode === 'head' || this.mode === 'tail';
-
- // If the file request can't settle in one second, the client
- // must be unavailable and the server should be used instead
- const timing = this.useServer ? this.serverTimeout : this.clientTimeout;
- const logFetch = (url) =>
- RSVP.race([this.token.authorizedRequest(url), timeout(timing)]).then(
- (response) => {
- if (!response || !response.ok) {
- this.nextErrorState(response);
- }
- return response;
- },
- (error) => this.nextErrorState(error),
- );
-
- return Log.create({
- logFetch,
- plainText,
- params: this.fileParams,
- url: this.fileUrl,
- });
- }
-
- nextErrorState(error) {
- if (this.useServer) {
- this.set('noConnection', true);
- } else {
- this.send('failoverToServer');
- }
- throw error;
- }
-
- @action
- toggleStream() {
- this.set('mode', 'streaming');
- this.toggleProperty('isStreaming');
- }
-
- @action
- gotoHead() {
- this.set('mode', 'head');
- this.set('isStreaming', false);
- }
-
- @action
- gotoTail() {
- this.set('mode', 'tail');
- this.set('isStreaming', false);
- }
-
- @action
- failoverToServer() {
- this.set('useServer', true);
- }
-
- @action
- async downloadFile() {
- const timing = this.useServer ? this.serverTimeout : this.clientTimeout;
-
- try {
- const response = await RSVP.race([
- this.token.authorizedRequest(this.catUrl),
- timeout(timing),
- ]);
-
- if (!response || !response.ok) throw new Error('file download timeout');
-
- // Don't download in tests. Unfortunately, since the download is triggered
- // by the download attribute of the ephemeral anchor element, there's no
- // way to stub this in tests.
- if (macroCondition(isTesting())) return;
-
- const blob = await response.blob();
- const url = window.URL.createObjectURL(blob);
- const downloadAnchor = document.createElement('a');
-
- downloadAnchor.href = url;
- downloadAnchor.target = '_blank';
- downloadAnchor.rel = 'noopener noreferrer';
- downloadAnchor.download = this.file;
-
- // Appending the element to the DOM is required for Firefox support
- document.body.appendChild(downloadAnchor);
- downloadAnchor.click();
- downloadAnchor.remove();
-
- window.URL.revokeObjectURL(url);
- } catch (err) {
- this.nextErrorState(err);
- }
- }
-}
diff --git a/ui/app/components/fs/link.gjs b/ui/app/components/fs/link.gjs
new file mode 100644
index 00000000000..6ac2278b8a8
--- /dev/null
+++ b/ui/app/components/fs/link.gjs
@@ -0,0 +1,49 @@
+/**
+ * Copyright IBM Corp. 2015, 2025
+ * SPDX-License-Identifier: BUSL-1.1
+ */
+
+import { array } from '@ember/helper';
+import { LinkTo } from '@ember/routing';
+
+export const FsLink =
+ {{#if @taskState}}
+ {{#if @path}}
+
+
+
+
+}
diff --git a/ui/app/components/gauge-chart.hbs b/ui/app/components/gauge-chart.hbs
deleted file mode 100644
index 48b652f6b73..00000000000
--- a/ui/app/components/gauge-chart.hbs
+++ /dev/null
@@ -1,43 +0,0 @@
-{{!
- Copyright IBM Corp. 2015, 2025
- SPDX-License-Identifier: BUSL-1.1
-~}}
-
-
-
+
+ {{this.label}}
+{{formatPercentage + this.value + total=this.total + complement=this.complement + }}
+
-
\ No newline at end of file
diff --git a/ui/app/components/gauge-chart.js b/ui/app/components/gauge-chart.js
deleted file mode 100644
index 28457c380cb..00000000000
--- a/ui/app/components/gauge-chart.js
+++ /dev/null
@@ -1,98 +0,0 @@
-/**
- * Copyright IBM Corp. 2015, 2025
- * SPDX-License-Identifier: BUSL-1.1
- */
-
-import Component from '@ember/component';
-import { computed } from '@ember/object';
-import { assert } from '@ember/debug';
-import { guidFor } from '@ember/object/internals';
-import { once } from '@ember/runloop';
-import d3Shape from 'd3-shape';
-import WindowResizable from 'nomad-ui/mixins/window-resizable';
-import { classNames } from '@ember-decorators/component';
-import classic from 'ember-classic-decorator';
-
-@classic
-@classNames('chart', 'gauge-chart')
-export default class GaugeChart extends Component.extend(WindowResizable) {
- value = null;
- complement = null;
- total = null;
- chartClass = 'is-info';
-
- width = 0;
- height = 0;
-
- @computed('value', 'complement', 'total')
- get percent() {
- assert(
- 'Provide complement OR total to GaugeChart, not both.',
- this.complement != null || this.total != null,
- );
-
- if (this.complement != null) {
- return this.value / (this.value + this.complement);
- }
-
- return this.value / this.total;
- }
-
- @computed
- get fillId() {
- return `gauge-chart-fill-${guidFor(this)}`;
- }
-
- @computed
- get maskId() {
- return `gauge-chart-mask-${guidFor(this)}`;
- }
-
- @computed('width')
- get radius() {
- return this.width / 2;
- }
-
- weight = 4;
-
- @computed('radius', 'weight')
- get backgroundArc() {
- const { radius, weight } = this;
- const arc = d3Shape
- .arc()
- .outerRadius(radius)
- .innerRadius(radius - weight)
- .cornerRadius(weight)
- .startAngle(-Math.PI / 2)
- .endAngle(Math.PI / 2);
- return arc();
- }
-
- @computed('radius', 'weight', 'percent')
- get valueArc() {
- const { radius, weight, percent } = this;
-
- const arc = d3Shape
- .arc()
- .outerRadius(radius)
- .innerRadius(radius - weight)
- .cornerRadius(weight)
- .startAngle(-Math.PI / 2)
- .endAngle(-Math.PI / 2 + Math.PI * percent);
- return arc();
- }
-
- didInsertElement() {
- super.didInsertElement(...arguments);
- this.updateDimensions();
- }
-
- updateDimensions() {
- const width = this.element.querySelector('svg').clientWidth;
- this.setProperties({ width, height: width / 2 });
- }
-
- windowResizeHandler() {
- once(this, this.updateDimensions);
- }
-}
diff --git a/ui/app/components/global-header.gjs b/ui/app/components/global-header.gjs
new file mode 100644
index 00000000000..b0983b44273
--- /dev/null
+++ b/ui/app/components/global-header.gjs
@@ -0,0 +1,111 @@
+/**
+ * Copyright IBM Corp. 2015, 2025
+ * SPDX-License-Identifier: BUSL-1.1
+ */
+
+import Component from '@glimmer/component';
+import { on } from '@ember/modifier';
+import { LinkTo } from '@ember/routing';
+import { htmlSafe } from '@ember/template';
+import { service } from '@ember/service';
+import media from 'ember-responsive/helpers/media';
+import GlobalSearchControl from 'nomad-ui/components/global-search/control';
+import HamburgerMenu from 'nomad-ui/components/hamburger-menu';
+import NomadLogo from 'nomad-ui/components/nomad-logo';
+import ProfileNavbarItem from 'nomad-ui/components/profile-navbar-item';
+import RegionSwitcher from 'nomad-ui/components/region-switcher';
+
+export default class GlobalHeader extends Component {
+ @service system;
+
+ get onHamburgerClick() {
+ return this.args.onHamburgerClick ?? (() => {});
+ }
+
+ get labelStyles() {
+ return htmlSafe(
+ `
+ color: ${this.system.agent.get('config')?.UI?.Label?.TextColor};
+ background-color: ${
+ this.system.agent.get('config')?.UI?.Label?.BackgroundColor
+ };
+ `,
+ );
+ }
+
+
+ {{this.label}}
-{{format-percentage - this.value - total=this.total - complement=this.complement - }}
-
+ {{! template-lint-disable no-duplicate-landmark-elements }}
+
+
+
+
+}
diff --git a/ui/app/components/global-header.hbs b/ui/app/components/global-header.hbs
deleted file mode 100644
index 701c3edb55f..00000000000
--- a/ui/app/components/global-header.hbs
+++ /dev/null
@@ -1,76 +0,0 @@
-{{!
- Copyright IBM Corp. 2015, 2025
- SPDX-License-Identifier: BUSL-1.1
-~}}
-
-{{! template-lint-disable no-duplicate-landmark-elements }}
-
-
\ No newline at end of file
diff --git a/ui/app/components/global-header.js b/ui/app/components/global-header.js
deleted file mode 100644
index 0e66d229600..00000000000
--- a/ui/app/components/global-header.js
+++ /dev/null
@@ -1,31 +0,0 @@
-/**
- * Copyright IBM Corp. 2015, 2025
- * SPDX-License-Identifier: BUSL-1.1
- */
-
-import Component from '@ember/component';
-import classic from 'ember-classic-decorator';
-import { service } from '@ember/service';
-import { attributeBindings } from '@ember-decorators/component';
-import { htmlSafe } from '@ember/template';
-
-@classic
-@attributeBindings('data-test-global-header')
-export default class GlobalHeader extends Component {
- @service config;
- @service system;
-
- 'data-test-global-header' = true;
- onHamburgerClick() {}
-
- get labelStyles() {
- return htmlSafe(
- `
- color: ${this.system.agent.get('config')?.UI?.Label?.TextColor};
- background-color: ${
- this.system.agent.get('config')?.UI?.Label?.BackgroundColor
- };
- `,
- );
- }
-}
diff --git a/ui/app/components/global-search/trigger.gjs b/ui/app/components/global-search/trigger.gjs
index 00803d3bf28..d0de4373bc2 100644
--- a/ui/app/components/global-search/trigger.gjs
+++ b/ui/app/components/global-search/trigger.gjs
@@ -3,24 +3,19 @@
* SPDX-License-Identifier: BUSL-1.1
*/
-import Component from '@glimmer/component';
import { or, not } from 'ember-truth-helpers';
import { HdsIcon } from '@hashicorp/design-system-components/components';
-export default class GlobalSearchTrigger extends Component {
- get select() {
- return this.args.select;
- }
+export const GlobalSearchTrigger =
+
+
+
+}
diff --git a/ui/app/components/gutter-menu.hbs b/ui/app/components/gutter-menu.hbs
deleted file mode 100644
index 194a596b5a3..00000000000
--- a/ui/app/components/gutter-menu.hbs
+++ /dev/null
@@ -1,170 +0,0 @@
-{{!
- Copyright IBM Corp. 2015, 2025
- SPDX-License-Identifier: BUSL-1.1
-~}}
-
-
+
+
+
+
+
+
+ {{#if this.system.agent.version}}
+
+ {{/if}}
+
+
+ {{yield}}
+
+
+
-
-
-
-
-
-
- {{#if this.system.agent.version}}
-
- {{/if}}
-
-
- {{yield}}
-
-
\ No newline at end of file
diff --git a/ui/app/components/gutter-menu.js b/ui/app/components/gutter-menu.js
deleted file mode 100644
index 94ee2189220..00000000000
--- a/ui/app/components/gutter-menu.js
+++ /dev/null
@@ -1,51 +0,0 @@
-/**
- * Copyright IBM Corp. 2015, 2025
- * SPDX-License-Identifier: BUSL-1.1
- */
-
-import { service } from '@ember/service';
-import Component from '@ember/component';
-import { action, computed } from '@ember/object';
-import classic from 'ember-classic-decorator';
-
-@classic
-export default class GutterMenu extends Component {
- @service system;
- @service router;
- @service keyboard;
-
- @computed('system.namespaces.@each.name')
- get sortedNamespaces() {
- const namespaces = this.get('system.namespaces').toArray() || [];
-
- return namespaces.sort((a, b) => {
- const aName = a.get('name');
- const bName = b.get('name');
-
- // Make sure the default namespace is always first in the list
- if (aName === 'default') {
- return -1;
- }
- if (bName === 'default') {
- return 1;
- }
-
- if (aName < bName) {
- return -1;
- }
- if (aName > bName) {
- return 1;
- }
-
- return 0;
- });
- }
-
- onHamburgerClick() {}
-
- // Seemingly redundant, but serves to ensure the action is passed to the keyboard service correctly
- @action
- transitionTo(destination) {
- return this.router.transitionTo(destination);
- }
-}
diff --git a/ui/app/components/hamburger-menu.gjs b/ui/app/components/hamburger-menu.gjs
new file mode 100644
index 00000000000..9149aabf988
--- /dev/null
+++ b/ui/app/components/hamburger-menu.gjs
@@ -0,0 +1,19 @@
+/**
+ * Copyright IBM Corp. 2015, 2025
+ * SPDX-License-Identifier: BUSL-1.1
+ */
+
+export const HamburgerMenu =
+
+;
+
+export default HamburgerMenu;
diff --git a/ui/app/components/hamburger-menu.hbs b/ui/app/components/hamburger-menu.hbs
deleted file mode 100644
index ed5c5520f5b..00000000000
--- a/ui/app/components/hamburger-menu.hbs
+++ /dev/null
@@ -1,14 +0,0 @@
-{{!
- Copyright IBM Corp. 2015, 2025
- SPDX-License-Identifier: BUSL-1.1
-~}}
-
-
\ No newline at end of file
diff --git a/ui/app/components/hamburger-menu.js b/ui/app/components/hamburger-menu.js
deleted file mode 100644
index d1298f63001..00000000000
--- a/ui/app/components/hamburger-menu.js
+++ /dev/null
@@ -1,10 +0,0 @@
-/**
- * Copyright IBM Corp. 2015, 2025
- * SPDX-License-Identifier: BUSL-1.1
- */
-
-import Component from '@ember/component';
-import { tagName } from '@ember-decorators/component';
-
-@tagName('')
-export default class HamburgerMenu extends Component {}
diff --git a/ui/app/components/image-file.gjs b/ui/app/components/image-file.gjs
new file mode 100644
index 00000000000..14a2d50304a
--- /dev/null
+++ b/ui/app/components/image-file.gjs
@@ -0,0 +1,68 @@
+/**
+ * Copyright IBM Corp. 2015, 2025
+ * SPDX-License-Identifier: BUSL-1.1
+ */
+
+import Component from '@glimmer/component';
+import { tracked } from '@glimmer/tracking';
+import { on } from '@ember/modifier';
+import formatBytes from 'nomad-ui/helpers/format-bytes';
+
+export default class ImageFile extends Component {
+ @tracked width = 0;
+ @tracked height = 0;
+
+ get fileName() {
+ const src = this.args.src;
+ if (!src) return undefined;
+ return src.includes('/') ? src.match(/^.*\/(.*)$/)[1] : src;
+ }
+
+ get altText() {
+ return this.args.alt || this.fileName;
+ }
+
+ get hasDimensions() {
+ return this.width && this.height;
+ }
+
+ handleImageLoad = (event) => {
+ const img = event.target;
+ this.width = img.naturalWidth;
+ this.height = img.naturalHeight;
+
+ if (typeof this.args.updateImageMeta === 'function') {
+ this.args.updateImageMeta(event);
+ }
+ };
+
+
+
+
+ {{else}}
+ {{this.allocationSummaryPlaceholder}}
+ {{/if}}
+
-
- {{else}}
- {{this.allocationSummaryPlaceholder}}
- {{/if}}
-
+
+
+}
diff --git a/ui/app/components/job-deployment.hbs b/ui/app/components/job-deployment.hbs
deleted file mode 100644
index c9e39e860d1..00000000000
--- a/ui/app/components/job-deployment.hbs
+++ /dev/null
@@ -1,50 +0,0 @@
-{{!
- Copyright IBM Corp. 2015, 2025
- SPDX-License-Identifier: BUSL-1.1
-~}}
-
-
+ {{@deployment.shortId}}
+ {{@deployment.status}}
+ {{#if @deployment.requiresPromotion}}
+ Requires Promotion
+ {{/if}}
+
+
+ Version
+ #{{@deployment.version.number}}
+ |
+
+ {{momentFromNow @deployment.version.submitTime}}
+
+
+
+
+
+
+ {{#if this.isOpen}}
+
+
+
+
+ {{/if}}
+
- {{this.deployment.shortId}}
- {{this.deployment.status}}
- {{#if this.deployment.requiresPromotion}}
- Requires Promotion
- {{/if}}
-
-
- Version
- #{{this.deployment.version.number}}
- |
-
- {{moment-from-now this.deployment.version.submitTime}}
-
-
-
-
-
-
-{{#if this.isOpen}}
-
-
-
-
-{{/if}}
\ No newline at end of file
diff --git a/ui/app/components/job-deployment.js b/ui/app/components/job-deployment.js
deleted file mode 100644
index fa82be6ee11..00000000000
--- a/ui/app/components/job-deployment.js
+++ /dev/null
@@ -1,21 +0,0 @@
-/**
- * Copyright IBM Corp. 2015, 2025
- * SPDX-License-Identifier: BUSL-1.1
- */
-
-import Component from '@ember/component';
-import { classNames } from '@ember-decorators/component';
-import { action } from '@ember/object';
-import classic from 'ember-classic-decorator';
-
-@classic
-@classNames('job-deployment', 'boxed-section')
-export default class JobDeployment extends Component {
- deployment = null;
- isOpen = false;
-
- @action
- toggleDetails() {
- this.set('isOpen', !this.isOpen);
- }
-}
diff --git a/ui/app/components/job-deployment/deployment-allocations.gjs b/ui/app/components/job-deployment/deployment-allocations.gjs
new file mode 100644
index 00000000000..066ed9b195c
--- /dev/null
+++ b/ui/app/components/job-deployment/deployment-allocations.gjs
@@ -0,0 +1,66 @@
+/**
+ * Copyright IBM Corp. 2015, 2025
+ * SPDX-License-Identifier: BUSL-1.1
+ */
+
+import AllocationRow from 'nomad-ui/components/allocation-row';
+import ListTable from 'nomad-ui/components/list-table';
+
+export const JobDeploymentDeploymentAllocations =
+
+
+;
+
+export default JobDeploymentDeploymentAllocations;
diff --git a/ui/app/components/job-deployment/deployment-allocations.hbs b/ui/app/components/job-deployment/deployment-allocations.hbs
deleted file mode 100644
index a2d2d689ea1..00000000000
--- a/ui/app/components/job-deployment/deployment-allocations.hbs
+++ /dev/null
@@ -1,59 +0,0 @@
-{{!
- Copyright IBM Corp. 2015, 2025
- SPDX-License-Identifier: BUSL-1.1
-~}}
-
-
+ Allocations
+
+
+ {{#if @deployment.allocations.length}}
+
+
+ Driver Health,
+ Scheduling, and Preemption
+ ID
+ Task Group
+ Created
+ Modified
+ Status
+ Version
+ Node
+ Volume
+ CPU
+ Memory
+
+
+
+
+ {{else}}
+
+ {{/if}}
+
+
-
\ No newline at end of file
diff --git a/ui/app/components/job-deployment/deployment-metrics.gjs b/ui/app/components/job-deployment/deployment-metrics.gjs
new file mode 100644
index 00000000000..8da97705224
--- /dev/null
+++ b/ui/app/components/job-deployment/deployment-metrics.gjs
@@ -0,0 +1,84 @@
+/**
+ * Copyright IBM Corp. 2015, 2025
+ * SPDX-License-Identifier: BUSL-1.1
+ */
+
+import { eq, gt } from 'ember-truth-helpers';
+
+export const JobDeploymentDeploymentMetrics =
+
- Allocations
-
-
- {{#if @deployment.allocations.length}}
-
-
- Driver Health,
- Scheduling, and Preemption
- ID
- Task Group
- Created
- Modified
- Status
- Version
- Node
- Volume
- CPU
- Memory
-
-
-
-
- {{else}}
-
- {{/if}}
-
-
+
+;
+
+export default JobDeploymentDeploymentMetrics;
diff --git a/ui/app/components/job-deployment/deployment-metrics.hbs b/ui/app/components/job-deployment/deployment-metrics.hbs
deleted file mode 100644
index efe4e278a32..00000000000
--- a/ui/app/components/job-deployment/deployment-metrics.hbs
+++ /dev/null
@@ -1,78 +0,0 @@
-{{!
- Copyright IBM Corp. 2015, 2025
- SPDX-License-Identifier: BUSL-1.1
-~}}
-
-
+
+
+
+
+
+
+ Canaries
+{{@deployment.placedCanaries}} + / + {{@deployment.desiredCanaries}}
+
+
+
+
+
+ Placed
+{{@deployment.placedAllocs}}
+
+
+ Desired
+{{@deployment.desiredTotal}}
+
+
+
+
+
+ Healthy
+{{@deployment.healthyAllocs}}
+
+
+
+
+ Unhealthy
+{{@deployment.unhealthyAllocs}}
+
+
+
+ {{@deployment.statusDescription}}
+
+
-
\ No newline at end of file
diff --git a/ui/app/components/job-deployment/deployment-metrics.js b/ui/app/components/job-deployment/deployment-metrics.js
deleted file mode 100644
index a376ba2dcf8..00000000000
--- a/ui/app/components/job-deployment/deployment-metrics.js
+++ /dev/null
@@ -1,12 +0,0 @@
-/**
- * Copyright IBM Corp. 2015, 2025
- * SPDX-License-Identifier: BUSL-1.1
- */
-
-import Component from '@ember/component';
-import { tagName } from '@ember-decorators/component';
-import classic from 'ember-classic-decorator';
-
-@classic
-@tagName('')
-export default class DeploymentMetrics extends Component {}
diff --git a/ui/app/components/job-deployment/task-groups.gjs b/ui/app/components/job-deployment/task-groups.gjs
new file mode 100644
index 00000000000..37465b3b404
--- /dev/null
+++ b/ui/app/components/job-deployment/task-groups.gjs
@@ -0,0 +1,75 @@
+/**
+ * Copyright IBM Corp. 2015, 2025
+ * SPDX-License-Identifier: BUSL-1.1
+ */
+
+import { or } from 'ember-truth-helpers';
+import formatTs from 'nomad-ui/helpers/format-ts';
+import ListTable from 'nomad-ui/components/list-table';
+
+export const JobDeploymentTaskGroups =
+
-
-
-
-
-
-
- Canaries
-{{this.deployment.placedCanaries}} - / - {{this.deployment.desiredCanaries}}
-
-
-
-
-
- Placed
-{{this.deployment.placedAllocs}}
-
-
- Desired
-{{this.deployment.desiredTotal}}
-
-
-
-
-
- Healthy
-{{this.deployment.healthyAllocs}}
-
-
-
-
- Unhealthy
-{{this.deployment.unhealthyAllocs}}
-
-
-
- {{this.deployment.statusDescription}}
-
-
+
+;
+
+export default JobDeploymentTaskGroups;
diff --git a/ui/app/components/job-deployment/task-groups.hbs b/ui/app/components/job-deployment/task-groups.hbs
deleted file mode 100644
index e5b32cc7171..00000000000
--- a/ui/app/components/job-deployment/task-groups.hbs
+++ /dev/null
@@ -1,65 +0,0 @@
-{{!
- Copyright IBM Corp. 2015, 2025
- SPDX-License-Identifier: BUSL-1.1
-~}}
-
-
+ Task Groups
+
+
+
+
+ Name
+ Needs Promotion?
+ Auto Revert?
+ Canaries
+ Allocs
+ Healthy Allocs
+ Unhealthy Allocs
+ Progress Deadline
+
+
+
+ {{row.model.name}}
+
+ {{#if row.model.requiresPromotion}}
+ {{if row.model.promoted "No" "Yes"}}
+ {{else}}
+ N/A
+ {{/if}}
+
+ {{if
+ row.model.autoRevert
+ "Yes"
+ "No"
+ }}
+ {{or
+ row.model.placedCanaries
+ 0
+ }}
+ /
+ {{row.model.desiredCanaries}}
+ {{row.model.placedAllocs}}
+ /
+ {{row.model.desiredTotal}}
+ {{row.model.healthyAllocs}}
+ {{row.model.unhealthyAllocs}}
+
+ {{formatTs
+ row.model.requireProgressBy
+ }}
+
+
+
+
+
+
-
\ No newline at end of file
diff --git a/ui/app/components/job-deployments-stream.gjs b/ui/app/components/job-deployments-stream.gjs
new file mode 100644
index 00000000000..0ea2bfa21ca
--- /dev/null
+++ b/ui/app/components/job-deployments-stream.gjs
@@ -0,0 +1,86 @@
+/**
+ * Copyright IBM Corp. 2015, 2025
+ * SPDX-License-Identifier: BUSL-1.1
+ */
+
+import Component from '@glimmer/component';
+import moment from 'moment';
+import formatDate from 'nomad-ui/helpers/format-date';
+import JobDeployment from 'nomad-ui/components/job-deployment';
+
+export default class JobDeploymentsStream extends Component {
+ get deployments() {
+ return normalizeCollection(this.args.deployments);
+ }
+
+ get sortedDeployments() {
+ return [...this.deployments].sort((a, b) => {
+ return (b.versionSubmitTime ?? 0) - (a.versionSubmitTime ?? 0);
+ });
+ }
+
+ get annotatedDeployments() {
+ const deployments = this.sortedDeployments;
+ return deployments.map((deployment, index) => {
+ const meta = {};
+
+ if (index === 0) {
+ meta.showDate = true;
+ } else {
+ const previousDeployment = deployments[index - 1];
+ const previousSubmitTime = previousDeployment.get('version.submitTime');
+ const submitTime = deployment.get('submitTime');
+ if (
+ submitTime &&
+ previousSubmitTime &&
+ moment(previousSubmitTime)
+ .startOf('day')
+ .diff(moment(submitTime).startOf('day'), 'days') > 0
+ ) {
+ meta.showDate = true;
+ }
+ }
+
+ return { deployment, meta };
+ });
+ }
+
+
+
- Task Groups
-
-
-
-
- Name
- Needs Promotion?
- Auto Revert?
- Canaries
- Allocs
- Healthy Allocs
- Unhealthy Allocs
- Progress Deadline
-
-
-
- {{row.model.name}}
-
- {{#if row.model.requiresPromotion}}
- {{if row.model.promoted "No" "Yes"}}
- {{else}}
- N/A
- {{/if}}
-
- {{if
- row.model.autoRevert
- "Yes"
- "No"
- }}
- {{or
- row.model.placedCanaries
- 0
- }}
- /
- {{row.model.desiredCanaries}}
- {{row.model.placedAllocs}}
- /
- {{row.model.desiredTotal}}
- {{row.model.healthyAllocs}}
- {{row.model.unhealthyAllocs}}
-
- {{format-ts
- row.model.requireProgressBy
- }}
-
-
-
-
-
--
+ {{#each this.annotatedDeployments key="deployment.id" as |record|}}
+ {{#if record.meta.showDate}}
+
- + {{#if record.deployment.version.submitTime}} + {{formatDate record.deployment.version.submitTime}} + {{else}} + Unknown time + {{/if}} + + {{/if}} +
-
+
+
+ {{/each}}
+
+
+
+ {{this.marker field}}
+
+ {{field.Name}}:
+
+ {{#if (this.isType field "added")}}
+ "{{field.New}}"
+ {{else if (this.isType field "deleted")}}
+ "{{field.Old}}"
+ {{else if (this.isType field "edited")}}
+ "{{field.Old}}" => "{{field.New}}"
+ {{else}}
+ "{{field.New}}"
+ {{/if}}
+
+ {{/each}}
+
+ {{#each this.objects as |object|}}
+
+
+ {{this.marker object}}
+
+ {{object.Name}}
+ {
+
+ {{/each}}
+
+}
diff --git a/ui/app/components/job-diff-fields-and-objects.hbs b/ui/app/components/job-diff-fields-and-objects.hbs
deleted file mode 100644
index f0fbcdb9710..00000000000
--- a/ui/app/components/job-diff-fields-and-objects.hbs
+++ /dev/null
@@ -1,73 +0,0 @@
-{{!
- Copyright IBM Corp. 2015, 2025
- SPDX-License-Identifier: BUSL-1.1
-~}}
-
-
- {{#each this.fields as |field|}}
-
-
-{{#each this.objects as |object|}}
-
-
-
- {{#if (eq (lowercase field.Type) "added")}}
- +
- {{else if (eq (lowercase field.Type) "deleted")}}
- -
- {{else if (eq (lowercase field.Type) "edited")}}
- +/-
- {{/if}}
-
- {{field.Name}}:
-
- {{#if (eq (lowercase field.Type) "added")}}
- "{{field.New}}"
- {{else if (eq (lowercase field.Type) "deleted")}}
- "{{field.Old}}"
- {{else if (eq (lowercase field.Type) "edited")}}
- "{{field.Old}}" => "{{field.New}}"
- {{else}}
- "{{field.New}}"
- {{/if}}
-
- {{/each}}
-
-
- {{#if (eq (lowercase object.Type) "added")}}
- +
- {{else if (eq (lowercase object.Type) "deleted")}}
- -
- {{else if (eq (lowercase object.Type) "edited")}}
- +/-
- {{/if}}
-
- {{object.Name}}
- {
-
-{{/each}}
\ No newline at end of file
diff --git a/ui/app/components/job-diff-fields-and-objects.js b/ui/app/components/job-diff-fields-and-objects.js
deleted file mode 100644
index 153f2f07ba1..00000000000
--- a/ui/app/components/job-diff-fields-and-objects.js
+++ /dev/null
@@ -1,12 +0,0 @@
-/**
- * Copyright IBM Corp. 2015, 2025
- * SPDX-License-Identifier: BUSL-1.1
- */
-
-import Component from '@ember/component';
-import { tagName } from '@ember-decorators/component';
-import classic from 'ember-classic-decorator';
-
-@classic
-@tagName('')
-export default class JobDiffFieldsAndObjects extends Component {}
diff --git a/ui/app/components/job-diff.gjs b/ui/app/components/job-diff.gjs
new file mode 100644
index 00000000000..53489ab6fe8
--- /dev/null
+++ b/ui/app/components/job-diff.gjs
@@ -0,0 +1,154 @@
+/**
+ * Copyright IBM Corp. 2015, 2025
+ * SPDX-License-Identifier: BUSL-1.1
+ */
+
+import Component from '@glimmer/component';
+import { dasherize } from '@ember/string';
+import JobDiffFieldsAndObjects from 'nomad-ui/components/job-diff-fields-and-objects';
+
+export default class JobDiff extends Component {
+ get verbose() {
+ return this.args.verbose ?? true;
+ }
+
+ get diff() {
+ return this.args.diff || {};
+ }
+
+ get fields() {
+ return this.diff.Fields || this.diff.fields || [];
+ }
+
+ get objects() {
+ return this.diff.Objects || this.diff.objects || [];
+ }
+
+ get taskGroups() {
+ return this.diff.TaskGroups || this.diff.taskGroups || [];
+ }
+
+ fieldsFor = (item) => item?.Fields || item?.fields || [];
+
+ objectsFor = (item) => item?.Objects || item?.objects || [];
+
+ tasksFor = (group) => group?.Tasks || group?.tasks || [];
+
+ lowerType = (item) => (item?.Type || '').toLowerCase();
+
+ marker = (item) => {
+ const type = this.lowerType(item);
+ if (type === 'added') return '+';
+ if (type === 'deleted') return '-';
+ if (type === 'edited') return '+/-';
+ return '';
+ };
+
+ markerClass = (item) => {
+ const type = this.lowerType(item);
+ return type ? `is-${type}` : '';
+ };
+
+ sectionClass = (item) => {
+ const type = this.lowerType(item);
+ return type ? `diff-section-label is-${type}` : 'diff-section-label';
+ };
+
+ isType = (item, type) => this.lowerType(item) === type;
+
+ shouldShowDiff = (item) => this.verbose || this.isType(item, 'edited');
+
+ cssClass = (value) => dasherize(String(value || '').replace(/\//g, '-'));
+
+ isLastAnnotation = (task, index) =>
+ index === (task?.Annotations?.length || 0) - 1;
+
+ get rootClass() {
+ const classes = ['job-diff'];
+ if (this.isType(this.diff, 'edited')) classes.push('is-edited');
+ if (this.isType(this.diff, 'added')) classes.push('is-added');
+ if (this.isType(this.diff, 'deleted')) classes.push('is-deleted');
+ return classes.join(' ');
+ }
+
+
+
-
- }
-
+
+
+}
diff --git a/ui/app/components/job-diff.hbs b/ui/app/components/job-diff.hbs
deleted file mode 100644
index 86f2eb916e4..00000000000
--- a/ui/app/components/job-diff.hbs
+++ /dev/null
@@ -1,112 +0,0 @@
-{{!
- Copyright IBM Corp. 2015, 2025
- SPDX-License-Identifier: BUSL-1.1
-~}}
-
-{{! Job heading }}
-{{! template-lint-disable simple-unless }}
-
+
+ {{this.marker this.diff}}
+
+ Job: "{{this.diff.ID}}"
+
+
+ {{#if (this.shouldShowDiff this.diff)}}
+
+
+ {{/if}}
+
+ {{#each this.taskGroups as |group|}}
+
+
+ {{this.marker group}}
+
+ Task Group: "{{group.Name}}"
+ {{#if group.Updates}}
+ ({{#each-in group.Updates as |updateType count|}}
+ {{count}}
+ {{updateType}}
+ {{/each-in}})
+ {{/if}}
+
+ {{#if (this.shouldShowDiff group)}}
+
+ {{/each}}
+
+
+ {{/if}}
+
+ {{#each (this.tasksFor group) as |task|}}
+
+
+ {{this.marker task}}
+
+ Task: "{{task.Name}}"
+ {{#if task.Annotations}}
+ ({{~#each task.Annotations as |annotation index|}}
+ {{annotation}}
+ {{#unless (this.isLastAnnotation task index)}},{{/unless}}
+ {{/each~}})
+ {{/if}}
+ {{#if (this.shouldShowDiff task)}}
+
+ {{/each}}
+
-
- {{#if (eq (lowercase this.diff.Type) "added")}}
- +
- {{else if (eq (lowercase this.diff.Type) "deleted")}}
- -
- {{else if (eq (lowercase this.diff.Type) "edited")}}
- +/-
- {{/if}}
-
- Job: "{{this.diff.ID}}"
-
-
-{{! Show job field and object diffs if the job is edited }}
-{{#if (or this.verbose (eq (lowercase this.diff.Type) "edited"))}}
-
-
-{{/if}}
-
-{{! Each task group }}
-{{#each this.diff.TaskGroups as |group|}}
-
-
- {{#if (eq (lowercase group.Type) "added")}}
- +
- {{else if (eq (lowercase group.Type) "deleted")}}
- -
- {{else if (eq (lowercase group.Type) "edited")}}
- +/-
- {{/if}}
-
- Task Group: "{{group.Name}}"
- {{#if group.Updates}}
- ({{#each-in group.Updates as |updateType count|}}
- {{count}}
- {{updateType}}
- {{/each-in}})
- {{/if}}
-
- {{! Show task group field and object diffs if the task group is edited }}
- {{#if (or (eq (lowercase group.Type) "edited") this.verbose)}}
-
-{{/each}}
\ No newline at end of file
diff --git a/ui/app/components/job-diff.js b/ui/app/components/job-diff.js
deleted file mode 100644
index c5b8ddcd4f1..00000000000
--- a/ui/app/components/job-diff.js
+++ /dev/null
@@ -1,26 +0,0 @@
-/**
- * Copyright IBM Corp. 2015, 2025
- * SPDX-License-Identifier: BUSL-1.1
- */
-
-import { equal } from '@ember/object/computed';
-import Component from '@ember/component';
-import { classNames, classNameBindings } from '@ember-decorators/component';
-import classic from 'ember-classic-decorator';
-
-@classic
-@classNames('job-diff')
-@classNameBindings(
- 'isEdited:is-edited',
- 'isAdded:is-added',
- 'isDeleted:is-deleted',
-)
-export default class JobDiff extends Component {
- diff = null;
-
- verbose = true;
-
- @equal('diff.Type', 'Edited') isEdited;
- @equal('diff.Type', 'Added') isAdded;
- @equal('diff.Type', 'Deleted') isDeleted;
-}
diff --git a/ui/app/components/job-dispatch.gjs b/ui/app/components/job-dispatch.gjs
new file mode 100644
index 00000000000..875bd3a0717
--- /dev/null
+++ b/ui/app/components/job-dispatch.gjs
@@ -0,0 +1,253 @@
+/**
+ * Copyright IBM Corp. 2015, 2025
+ * SPDX-License-Identifier: BUSL-1.1
+ */
+
+import Component from '@glimmer/component';
+import { tracked } from '@glimmer/tracking';
+import { fn } from '@ember/helper';
+import { on } from '@ember/modifier';
+import { service } from '@ember/service';
+import { trackedArray } from '@ember/reactive/collections';
+import { task } from 'ember-concurrency';
+import codeMirror from 'nomad-ui/modifiers/code-mirror';
+import { noCase } from 'change-case';
+import { titleCase } from 'title-case';
+import messageFromAdapterError from 'nomad-ui/utils/message-from-adapter-error';
+
+class MetaField {
+ @tracked value;
+ @tracked error;
+
+ name;
+ required;
+ title;
+
+ constructor(meta) {
+ this.name = meta.name;
+ this.required = meta.required;
+ this.title = meta.title;
+ this.value = meta.value;
+ this.error = meta.error;
+ }
+
+ validate() {
+ this.error = '';
+
+ if (this.required && !this.value) {
+ this.error = `Missing required meta parameter "${this.name}".`;
+ }
+ }
+}
+
+export default class JobDispatch extends Component {
+ @service router;
+ @service config;
+
+ @tracked metaFields = [];
+ @tracked payload = '';
+ @tracked payloadHasError = false;
+ errors = trackedArray([]);
+
+ constructor() {
+ super(...arguments);
+
+ const mapper = (values, required) =>
+ values.map(
+ (value) =>
+ new MetaField({
+ name: value,
+ required,
+ title: titleCase(noCase(value)),
+ value: this.args.job.meta ? this.args.job.meta.get(value) : '',
+ }),
+ );
+
+ const required = mapper(
+ this.args.job.parameterizedDetails.MetaRequired || [],
+ true,
+ );
+ const optional = mapper(
+ this.args.job.parameterizedDetails.MetaOptional || [],
+ false,
+ );
+
+ this.metaFields = required.concat(optional);
+ }
+
+ get hasPayload() {
+ return this.args.job.parameterizedDetails.Payload !== 'forbidden';
+ }
+
+ get payloadRequired() {
+ return this.args.job.parameterizedDetails.Payload === 'required';
+ }
+
+ updateMetaField = (field, event) => {
+ field.value = event.target.value;
+ };
+
+ updatePayload = (value) => {
+ this.payload = value;
+ };
+
+ dispatch = () => {
+ this.validateForm();
+ if (this.errors.length > 0) {
+ this.scrollToError();
+ return;
+ }
+
+ this.onDispatched.perform();
+ };
+
+ cancel = () => {
+ this.router.transitionTo('jobs.job');
+ };
+
+ onDispatched = task({ drop: true }, async () => {
+ try {
+ const paramValues = {};
+ this.metaFields.forEach((field) => {
+ paramValues[field.name] = field.value;
+ });
+ const dispatch = await this.args.job.dispatch(paramValues, this.payload);
+
+ const namespaceId = this.args.job.belongsTo('namespace').id();
+ const jobId = namespaceId
+ ? `${dispatch.DispatchedJobID}@${namespaceId}`
+ : dispatch.DispatchedJobID;
+
+ this.router.transitionTo('jobs.job', jobId);
+ } catch (err) {
+ const error = messageFromAdapterError(err) || 'Could not dispatch job';
+ this.errors.push(error);
+ this.scrollToError();
+ }
+ });
+
+ scrollToError() {
+ if (!this.config.isTest) {
+ window.scrollTo(0, 0);
+ }
+ }
+
+ resetErrors() {
+ this.payloadHasError = false;
+ this.errors.splice(0, this.errors.length);
+ }
+
+ validateForm() {
+ this.resetErrors();
+
+ this.metaFields.forEach((field) => {
+ field.validate();
+ if (field.error) {
+ this.errors.push(field.error);
+ }
+ });
+
+ if (this.payloadRequired && !this.payload) {
+ this.errors.push('Missing required payload.');
+ this.payloadHasError = true;
+ }
+ }
+
+
+ {{#if this.errors}}
+
-
- {{/if}}
-
- {{! Each task }}
- {{#each group.Tasks as |task|}}
-
-
- {{#if (eq (lowercase task.Type) "added")}}
- +
- {{else if (eq (lowercase task.Type) "deleted")}}
- -
- {{else if (eq (lowercase task.Type) "edited")}}
- +/-
- {{/if}}
-
- Task: "{{task.Name}}"
- {{#if task.Annotations}}
- ({{~#each task.Annotations as |annotation index|}}
- {{annotation}}
- {{#unless (eq index (dec task.Annotations.length))}},{{/unless}}
- {{/each~}})
- {{/if}}
- {{#if (or this.verbose (eq (lowercase task.Type) "edited"))}}
-
- {{/each}}
-
+
+ {{/if}}
+
+
+
+}
diff --git a/ui/app/components/job-dispatch.hbs b/ui/app/components/job-dispatch.hbs
deleted file mode 100644
index 215f19df18b..00000000000
--- a/ui/app/components/job-dispatch.hbs
+++ /dev/null
@@ -1,100 +0,0 @@
-{{!
- Copyright IBM Corp. 2015, 2025
- SPDX-License-Identifier: BUSL-1.1
-~}}
-
-{{#if this.errors}}
- Dispatch Error
+-
+ {{#each this.errors as |error|}}
+
- {{error}} + {{/each}} +
-
-{{/if}}
-
-
\ No newline at end of file
diff --git a/ui/app/components/job-dispatch.js b/ui/app/components/job-dispatch.js
deleted file mode 100644
index d33e95b57bb..00000000000
--- a/ui/app/components/job-dispatch.js
+++ /dev/null
@@ -1,153 +0,0 @@
-/**
- * Copyright IBM Corp. 2015, 2025
- * SPDX-License-Identifier: BUSL-1.1
- */
-
-import Component from '@glimmer/component';
-import { tracked } from '@glimmer/tracking';
-import { service } from '@ember/service';
-import { action } from '@ember/object';
-import { A } from '@ember/array';
-import { task } from 'ember-concurrency';
-import { noCase } from 'change-case';
-import { titleCase } from 'title-case';
-import messageFromAdapterError from 'nomad-ui/utils/message-from-adapter-error';
-
-class MetaField {
- @tracked value;
- @tracked error;
-
- name;
- required;
- title;
-
- constructor(meta) {
- this.name = meta.name;
- this.required = meta.required;
- this.title = meta.title;
- this.value = meta.value;
- this.error = meta.error;
- }
-
- validate() {
- this.error = '';
-
- if (this.required && !this.value) {
- this.error = `Missing required meta parameter "${this.name}".`;
- }
- }
-}
-
-export default class JobDispatch extends Component {
- @service router;
- @service config;
-
- @tracked metaFields = [];
- @tracked payload = '';
- @tracked payloadHasError = false;
-
- errors = A([]);
-
- constructor() {
- super(...arguments);
-
- // Helper for mapping the params into a useable form.
- const mapper = (values, required) =>
- values.map(
- (x) =>
- new MetaField({
- name: x,
- required,
- title: titleCase(noCase(x)),
- value: this.args.job.meta ? this.args.job.meta.get(x) : '',
- }),
- );
-
- // Fetch the different types of parameters.
- const required = mapper(
- this.args.job.parameterizedDetails.MetaRequired || [],
- true,
- );
- const optional = mapper(
- this.args.job.parameterizedDetails.MetaOptional || [],
- false,
- );
-
- // Merge them, required before optional.
- this.metaFields = required.concat(optional);
- }
-
- get hasPayload() {
- return this.args.job.parameterizedDetails.Payload !== 'forbidden';
- }
-
- get payloadRequired() {
- return this.args.job.parameterizedDetails.Payload === 'required';
- }
-
- @action
- dispatch() {
- this.validateForm();
- if (this.errors.length > 0) {
- this.scrollToError();
- return;
- }
-
- this.onDispatched.perform();
- }
-
- @action
- cancel() {
- this.router.transitionTo('jobs.job');
- }
-
- @task({ drop: true }) *onDispatched() {
- // Try to create the dispatch.
- try {
- let paramValues = {};
- this.metaFields.forEach((m) => (paramValues[m.name] = m.value));
- const dispatch = yield this.args.job.dispatch(paramValues, this.payload);
-
- // Navigate to the newly created instance.
- const namespaceId = this.args.job.belongsTo('namespace').id();
- const jobId = namespaceId
- ? `${dispatch.DispatchedJobID}@${namespaceId}`
- : dispatch.DispatchedJobID;
-
- this.router.transitionTo('jobs.job', jobId);
- } catch (err) {
- const error = messageFromAdapterError(err) || 'Could not dispatch job';
- this.errors.pushObject(error);
- this.scrollToError();
- }
- }
-
- scrollToError() {
- if (!this.config.isTest) {
- window.scrollTo(0, 0);
- }
- }
-
- resetErrors() {
- this.payloadHasError = false;
- this.errors.clear();
- }
-
- validateForm() {
- this.resetErrors();
-
- // Make sure that we have all of the meta fields that we need.
- this.metaFields.forEach((f) => {
- f.validate();
- if (f.error) {
- this.errors.pushObject(f.error);
- }
- });
-
- // Validate payload.
- if (this.payloadRequired && !this.payload) {
- this.errors.pushObject('Missing required payload.');
- this.payloadHasError = true;
- }
- }
-}
diff --git a/ui/app/components/job-editor.js b/ui/app/components/job-editor.gjs
similarity index 67%
rename from ui/app/components/job-editor.js
rename to ui/app/components/job-editor.gjs
index 2f560583a23..df8e5663354 100644
--- a/ui/app/components/job-editor.js
+++ b/ui/app/components/job-editor.gjs
@@ -4,21 +4,25 @@
*/
import Component from '@glimmer/component';
+import { tracked } from '@glimmer/tracking';
+import { on } from '@ember/modifier';
import { service } from '@ember/service';
-import { action } from '@ember/object';
import { scheduleOnce } from '@ember/runloop';
import { task } from 'ember-concurrency';
+import can from 'ember-can/helpers/can';
+import { eq } from 'ember-truth-helpers';
+import {
+ HdsButton,
+ HdsButtonSet,
+} from '@hashicorp/design-system-components/components';
+import JobEditorAlert from 'nomad-ui/components/job-editor/alert';
+import JobEditorEdit from 'nomad-ui/components/job-editor/edit';
+import JobEditorRead from 'nomad-ui/components/job-editor/read';
+import JobEditorReview from 'nomad-ui/components/job-editor/review';
import messageFromAdapterError from 'nomad-ui/utils/message-from-adapter-error';
-import localStorageProperty from 'nomad-ui/utils/properties/local-storage';
-import { tracked } from '@glimmer/tracking';
import jsonToHcl from 'nomad-ui/utils/json-to-hcl';
+import localStorageProperty from 'nomad-ui/utils/properties/local-storage';
-/**
- * JobEditor component that provides an interface for editing and managing Nomad jobs.
- *
- * @class JobEditor
- * @extends Component
- */
export default class JobEditor extends Component {
@service config;
@service store;
@@ -27,9 +31,6 @@ export default class JobEditor extends Component {
@tracked error = null;
@tracked planOutput = null;
- /**
- * Initialize the component, setting the definition and definition variables on the model if available.
- */
constructor() {
super(...arguments);
@@ -65,17 +66,11 @@ export default class JobEditor extends Component {
}
}
- /**
- * Check if the component is in editing mode.
- *
- * @returns {boolean} True if the component is in 'new' or 'edit' context, otherwise false.
- */
get isEditing() {
return ['new', 'edit'].includes(this.args.context);
}
- @action
- setDefinitionOnModel() {
+ setDefinitionOnModel = () => {
if (
!this.args.job ||
this.args.job.isDestroying ||
@@ -89,9 +84,9 @@ export default class JobEditor extends Component {
if (this.args.job._newDefinition !== definition) {
this.args.job.set('_newDefinition', definition);
}
- }
+ };
- setDefinitionVariablesOnModel(variables) {
+ setDefinitionVariablesOnModel = (variables) => {
if (
!this.args.job ||
this.args.job.isDestroying ||
@@ -103,108 +98,77 @@ export default class JobEditor extends Component {
if (this.args.job._newDefinitionVariables !== variables) {
this.args.job.set('_newDefinitionVariables', variables);
}
- }
+ };
- /**
- * Enter the edit mode and defensively set the definition on the model.
- */
- @action
- edit() {
+ edit = () => {
this.setDefinitionOnModel();
this.args.onToggleEdit(true);
- }
+ };
- @action
- onCancel() {
+ onCancel = () => {
this.args.onToggleEdit(false);
- }
+ };
- /**
- * Determine the current stage of the component based on the plan output and editing state.
- *
- * @returns {"review"|"edit"|"read"} The current stage, either 'review', 'edit', or 'read'.
- */
get stage() {
if (this.planOutput) return 'review';
if (this.isEditing) return 'edit';
- else return 'read';
+ return 'read';
}
@localStorageProperty('nomadMessageJobPlan', true) shouldShowPlanMessage;
@localStorageProperty('nomadShouldWrapCode', false) shouldWrapCode;
- @action
- dismissPlanMessage() {
+ dismissPlanMessage = () => {
this.shouldShowPlanMessage = false;
- }
+ };
- /**
- * A task that performs the job parsing and planning.
- * On error, it calls the onError method.
- */
- @(task(function* () {
+ plan = task({ drop: true }, async () => {
this.reset();
try {
- yield this.args.job.parse();
+ await this.args.job.parse();
} catch (err) {
this.onError(err, 'parse', 'parse jobs');
return;
}
try {
- const plan = yield this.args.job.plan();
+ const plan = await this.args.job.plan();
this.planOutput = plan;
} catch (err) {
this.onError(err, 'plan', 'plan jobs');
}
- }).drop())
- plan;
-
- /**
- * A task that submits the job, either running a new job or updating an existing one.
- * On error, it calls the onError method and resets our planOutput state.
- */
- @task(function* () {
+ });
+
+ submit = task(async () => {
try {
if (this.args.context === 'new') {
- yield this.args.job.run();
+ await this.args.job.run();
} else {
- yield this.args.job.update(this.args.format);
+ await this.args.job.update(this.args.format);
}
const id = this.args.job.plainId;
const namespace = this.args.job.belongsTo('namespace').id() || 'default';
this.reset();
-
- // Treat the job as ephemeral and only provide ID parts.
this.args.onSubmit(id, namespace);
} catch (err) {
this.onError(err, 'run', 'submit jobs');
this.planOutput = null;
}
- })
- submit;
-
- /**
- * Handle errors, setting the error object and scrolling to the error message.
- *
- * @param {Error} err - The error object.
- * @param {"parse"|"plan"|"run"} type - The type of error (e.g., 'parse', 'plan', 'run').
- * @param {string} actionMsg - A message describing the action that caused the error.
- */
+ });
+
onError(err, type, actionMsg) {
const error = messageFromAdapterError(err, actionMsg);
this.error = { message: error, type };
this.scrollToError();
}
- @action
- reset() {
+ reset = () => {
this.planOutput = null;
this.error = null;
- }
+ };
scrollToError() {
if (!this.config.get('isTest')) {
@@ -212,15 +176,7 @@ export default class JobEditor extends Component {
}
}
- /**
- * Update the job's definition or definition variables based on the provided type.
- *
- * @param {string} value - The new value for the job's definition or definition variables.
- * @param {_codemirror} _codemirror - The CodeMirror instance (not used in this action).
- * @param {"hclVariables"|"job"} [type='job'] - The type of code being updated ('job' or 'hclVariables').
- */
- @action
- updateCode(value, _codemirror, type = 'job') {
+ updateCode = (value, _codemirror, type = 'job') => {
if (!this.args.job.isDestroying && !this.args.job.isDestroyed) {
if (type === 'hclVariables') {
this.args.job.set('_newDefinitionVariables', value);
@@ -228,23 +184,13 @@ export default class JobEditor extends Component {
this.args.job.set('_newDefinition', value);
}
}
- }
+ };
- /**
- * Toggle the wrapping of the job's definition or definition variables.
- */
- @action
- toggleWrap() {
+ toggleWrap = () => {
this.shouldWrapCode = !this.shouldWrapCode;
- }
+ };
- /**
- * Read the content of an uploaded job specification file and update the job's definition.
- *
- * @param {Event} event - The input change event containing the selected file.
- */
- @action
- uploadJobSpec(event) {
+ uploadJobSpec = (event) => {
const reader = new FileReader();
reader.onload = () => {
this.updateCode(reader.result);
@@ -252,13 +198,9 @@ export default class JobEditor extends Component {
const [file] = event.target.files;
reader.readAsText(file);
- }
+ };
- /**
- * Download the job's definition or specification as .nomad.hcl file locally
- */
- @action
- async handleSaveAsFile() {
+ handleSaveAsFile = async () => {
try {
const blob = new Blob([this.args.job._newDefinition], {
type: 'text/plain',
@@ -288,19 +230,14 @@ export default class JobEditor extends Component {
sticky: true,
});
}
- }
+ };
- /**
- * Get the definition or specification based on the view type.
- *
- * @returns {string} The definition or specification in JSON or HCL format.
- */
get definition() {
if (this.args.view === 'full-definition') {
return JSON.stringify(this.args.definition, null, 2);
- } else {
- return this.args.specification;
}
+
+ return this.args.specification;
}
get definitionVariables() {
@@ -330,6 +267,14 @@ export default class JobEditor extends Component {
};
}
+ get alertData() {
+ return {
+ ...this.data,
+ error: this.error,
+ stage: this.stage,
+ };
+ }
+
get fns() {
return {
onCancel: this.onCancel,
@@ -346,4 +291,51 @@ export default class JobEditor extends Component {
onToggleWrap: this.toggleWrap,
};
}
+
+
+ Dispatch Error
--
- {{#each this.errors as |error|}}
-
- {{error}} - {{/each}} -
+
+
+
+ {{#if
+ (can "read variable" path="nomad/job-templates/*" namespace="*")
+ }}
+
+
+ {{/if}}
+ {{#if (eq this.stage "review")}}
+
+
}
diff --git a/ui/app/components/job-editor.hbs b/ui/app/components/job-editor.hbs
deleted file mode 100644
index 86fb105cefd..00000000000
--- a/ui/app/components/job-editor.hbs
+++ /dev/null
@@ -1,50 +0,0 @@
-{{!
- Copyright IBM Corp. 2015, 2025
- SPDX-License-Identifier: BUSL-1.1
-~}}
-
-Run a job
++ Paste or author HCL or JSON to submit to your cluster, or select + from a list of templates. A plan will be requested before the job is + submitted. You can also attach a job spec by uploading a job file or + dragging & dropping a file to the editor. +
+
-
-
-
- {{#if (can "read variable" path="nomad/job-templates/*" namespace="*")}}
-
-
- {{/if}}
- {{#if (eq this.stage "review")}}
-
\ No newline at end of file
diff --git a/ui/app/components/job-editor/alert.gjs b/ui/app/components/job-editor/alert.gjs
new file mode 100644
index 00000000000..109d6e168b7
--- /dev/null
+++ b/ui/app/components/job-editor/alert.gjs
@@ -0,0 +1,88 @@
+/**
+ * Copyright IBM Corp. 2015, 2025
+ * SPDX-License-Identifier: BUSL-1.1
+ */
+
+import Component from '@glimmer/component';
+import { tracked } from '@glimmer/tracking';
+import { hash } from '@ember/helper';
+import { and, eq } from 'ember-truth-helpers';
+import { HdsAlert } from '@hashicorp/design-system-components/components';
+import conditionallyCapitalize from 'nomad-ui/helpers/conditionally-capitalize';
+
+export default class Alert extends Component {
+ @tracked shouldShowAlert = true;
+
+ dismissAlert = () => {
+ this.shouldShowAlert = false;
+ };
+
+
+ Run a job
-- Paste or author HCL or JSON to submit to your cluster, or select from a - list of templates. A plan will be requested before the job is submitted. - You can also attach a job spec by uploading a job file or dragging & - dropping a file to the editor. -
-
+ {{#if @data.error}}
+
+ {{conditionallyCapitalize
+ @data.error.type
+ true
+ }}
+ {{@data.error.message}}
+ {{#if (eq @data.error.message "Job ID does not match")}}
+
+ {{/if}}
+ {{#if
+ (and
+ (eq @data.stage "read") @data.hasVariables (eq @data.view "job-spec")
+ )
+ }}
+ {{#if this.shouldShowAlert}}
+
+ HCL Variables values may be incomplete
+ Nomad cannot ensure that all variable values provided
+ below match those provided on job submit. Ensure the proper values
+ are provided before re-submitting the job.
+
+ {{/if}}
+ {{/if}}
+ {{#if (and (eq @data.stage "edit") (eq @data.view "full-definition"))}}
+
+ Edit JSON
+ If you edit the JSON formation in the full definition,
+ you will no longer be able to see job spec in HCL.
+
+ {{/if}}
+ {{#if (and (eq @data.stage "review") @data.shouldShowPlanMessage)}}
+
+ Job Plan
+ This is the impact running
+ this job will have on your cluster
+
+ {{/if}}
+
+
+}
diff --git a/ui/app/components/job-editor/alert.hbs b/ui/app/components/job-editor/alert.hbs
deleted file mode 100644
index 0a3516691ff..00000000000
--- a/ui/app/components/job-editor/alert.hbs
+++ /dev/null
@@ -1,65 +0,0 @@
-{{!
- Copyright IBM Corp. 2015, 2025
- SPDX-License-Identifier: BUSL-1.1
-~}}
-
-
- {{#if @data.error}}
-
- {{conditionally-capitalize
- @data.error.type
- true
- }}
- {{@data.error.message}}
- {{#if (eq @data.error.message "Job ID does not match")}}
-
- {{/if}}
- {{#if
- (and (eq @data.stage "read") @data.hasVariables (eq @data.view "job-spec"))
- }}
- {{#if this.shouldShowAlert}}
-
- HCL Variables values may be incomplete
- Nomad cannot ensure that all variable values provided
- below match those provided on job submit. Ensure the proper values are
- provided before re-submitting the job.
-
- {{/if}}
- {{/if}}
- {{#if (and (eq @data.stage "edit") (eq @data.view "full-definition"))}}
-
- Edit JSON
- If you edit the JSON formation in the full definition, you
- will no longer be able to see job spec in HCL.
-
- {{/if}}
- {{#if (and (eq @data.stage "review") @data.shouldShowPlanMessage)}}
-
- Job Plan
- This is the impact running this
- job will have on your cluster
-
- {{/if}}
-
\ No newline at end of file
diff --git a/ui/app/components/job-editor/alert.js b/ui/app/components/job-editor/alert.js
deleted file mode 100644
index f423d9d71a8..00000000000
--- a/ui/app/components/job-editor/alert.js
+++ /dev/null
@@ -1,17 +0,0 @@
-/**
- * Copyright IBM Corp. 2015, 2025
- * SPDX-License-Identifier: BUSL-1.1
- */
-
-import Component from '@glimmer/component';
-import { action } from '@ember/object';
-import { tracked } from '@glimmer/tracking';
-
-export default class Alert extends Component {
- @tracked shouldShowAlert = true;
-
- @action
- dismissAlert() {
- this.shouldShowAlert = false;
- }
-}
diff --git a/ui/app/components/job-editor/edit.gjs b/ui/app/components/job-editor/edit.gjs
new file mode 100644
index 00000000000..e3eeef09cac
--- /dev/null
+++ b/ui/app/components/job-editor/edit.gjs
@@ -0,0 +1,154 @@
+/**
+ * Copyright IBM Corp. 2015, 2025
+ * SPDX-License-Identifier: BUSL-1.1
+ */
+
+import { array, fn } from '@ember/helper';
+import { on } from '@ember/modifier';
+import can from 'ember-can/helpers/can';
+import { eq, not, or } from 'ember-truth-helpers';
+import {
+ HdsButton,
+ HdsButtonSet,
+ HdsFormToggleField,
+} from '@hashicorp/design-system-components/components';
+import Tooltip from 'nomad-ui/components/tooltip';
+import codeMirror from 'nomad-ui/modifiers/code-mirror';
+import keyboardShortcutModifier from 'nomad-ui/modifiers/keyboard-shortcut';
+
+const performTask = (task) => {
+ if (typeof task?.perform === 'function') {
+ task.perform();
+ }
+};
+
+export const JobEditorEdit =
+
+
+
+ Job Definition
+ {{#if @data.cancelable}}
+
+
+
+
+ Word Wrap
+
+
+
+
+
+
+ {{/if}}
+
+
+
+
+
+
+
+ {{#if (or (eq @data.view "job-spec") @data.job.isNew)}}
+
+
+ {{/if}}
+
+ {{#if @data.job.isNew}}
+ HCL Variable Values
+ {{else}}
+ Edit HCL Variable Values
+ {{/if}}
+
+
+
+
+
-
-
- Job Definition
- {{#if @data.cancelable}}
-
-
-
-
- Word Wrap
-
-
-
-
-
-
- {{/if}}
-
-
-
-
-
-
-
- {{#if (or (eq @data.view "job-spec") @data.job.isNew)}}
-
-
- {{/if}}
-
- {{#if @data.job.isNew}}
- HCL Variable Values
- {{else}}
- Edit HCL Variable Values
- {{/if}}
-
-
-
-
-
+
+;
+
+export default JobEditorRead;
diff --git a/ui/app/components/job-editor/read.hbs b/ui/app/components/job-editor/read.hbs
deleted file mode 100644
index f0544220b24..00000000000
--- a/ui/app/components/job-editor/read.hbs
+++ /dev/null
@@ -1,114 +0,0 @@
-{{!
- Copyright IBM Corp. 2015, 2025
- SPDX-License-Identifier: BUSL-1.1
-~}}
-
-
+ Job Definition
+
+
+
+
+ Word Wrap
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ {{#if (eq @data.view "job-spec")}}
+
+ {{else}}
+
+ {{/if}}
+
+ {{#if (and (eq @data.view "job-spec") @data.hasVariables)}}
+
+
+ {{/if}}
+
+ HCL Variable Values
+
+
+
+
+
-
\ No newline at end of file
diff --git a/ui/app/components/job-editor/review.gjs b/ui/app/components/job-editor/review.gjs
new file mode 100644
index 00000000000..2a9fda25250
--- /dev/null
+++ b/ui/app/components/job-editor/review.gjs
@@ -0,0 +1,141 @@
+/**
+ * Copyright IBM Corp. 2015, 2025
+ * SPDX-License-Identifier: BUSL-1.1
+ */
+
+import Component from '@glimmer/component';
+import { on } from '@ember/modifier';
+import { and } from 'ember-truth-helpers';
+import {
+ HdsAlert,
+ HdsButton,
+ HdsButtonSet,
+} from '@hashicorp/design-system-components/components';
+import { htmlSafe } from '@ember/template';
+import AllocationRow from 'nomad-ui/components/allocation-row';
+import JobDiff from 'nomad-ui/components/job-diff';
+import ListTable from 'nomad-ui/components/list-table';
+import PlacementFailure from 'nomad-ui/components/placement-failure';
+
+export default class JobEditorReview extends Component {
+ // Slightly formats the warning string to be more readable
+ get warnings() {
+ return htmlSafe(
+ (this.args.data.planOutput.warnings || '')
+ .replace(/\n/g, '
- Job Definition
-
-
-
-
- Word Wrap
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- {{#if (eq @data.view "job-spec")}}
-
- {{else}}
-
- {{/if}}
-
- {{#if (and (eq @data.view "job-spec") @data.hasVariables)}}
-
-
- {{/if}}
-
- HCL Variable Values
-
-
-
-
- ') + .replace(/\t/g, ' '), + ); + } + + run = () => { + const submitTask = this.args.fns?.onSubmit; + if (typeof submitTask?.perform === 'function') { + submitTask.perform(); + } + }; + + +
+
+
+ Job Plan
+
+
+ + + {{#if this.warnings}} +
+ {{this.warnings}} +
++ {{/if}} + + {{#if + (and + @data.planOutput.preemptions.isFulfilled + @data.planOutput.preemptions.length + ) + }} +
+
+ {{/if}}
+
+ Preemptions (if you choose to run this job, these allocations will be
+ stopped)
+
+
+
+
+
+
+ Driver Health, Scheduling, and Preemption
+
+
+ ID
+ Task Group
+ Created
+ Modified
+ Status
+ Version
+ Node
+ Volume
+ CPU
+ Memory
+
+
+
+
+
+
-
-
-Job Plan
-
-
-- -{{#if this.warnings}} -
- {{this.warnings}} -
--{{/if}} - -{{#if - (and - @data.planOutput.preemptions.isFulfilled @data.planOutput.preemptions.length - ) -}} -
-
-{{/if}}
-
- Preemptions (if you choose to run this job, these allocations will be
- stopped)
-
-
-
-
- Driver Health,
- Scheduling, and Preemption
- ID
- Task Group
- Created
- Modified
- Status
- Version
- Node
- Volume
- CPU
- Memory
-
-
-
-
-
- ') - .replace(/\t/g, ' '), - ); - } -} diff --git a/ui/app/components/job-page.gjs b/ui/app/components/job-page.gjs new file mode 100644 index 00000000000..fd03f5bdcf0 --- /dev/null +++ b/ui/app/components/job-page.gjs @@ -0,0 +1,76 @@ +/** + * Copyright IBM Corp. 2015, 2025 + * SPDX-License-Identifier: BUSL-1.1 + */ + +import Component from '@glimmer/component'; +import { tracked } from '@glimmer/tracking'; +import { hash } from '@ember/helper'; +import JobStatusPanel from 'nomad-ui/components/job-status/panel'; +import JobPagePartsBody from 'nomad-ui/components/job-page/parts/body'; +import JobPagePartsChildren from 'nomad-ui/components/job-page/parts/children'; +import JobPagePartsDasRecommendations from 'nomad-ui/components/job-page/parts/das-recommendations'; +import JobPagePartsError from 'nomad-ui/components/job-page/parts/error'; +import JobPagePartsMeta from 'nomad-ui/components/job-page/parts/meta'; +import JobPagePartsPlacementFailures from 'nomad-ui/components/job-page/parts/placement-failures'; +import JobPagePartsRecentAllocations from 'nomad-ui/components/job-page/parts/recent-allocations'; +import JobPagePartsStatsBox from 'nomad-ui/components/job-page/parts/stats-box'; +import JobPagePartsSummary from 'nomad-ui/components/job-page/parts/summary'; +import JobPagePartsTaskGroups from 'nomad-ui/components/job-page/parts/task-groups'; +import JobPagePartsTitle from 'nomad-ui/components/job-page/parts/title'; +import messageForError from 'nomad-ui/utils/message-from-adapter-error'; + +export default class JobPage extends Component { + @tracked errorMessage = null; + + clearErrorMessage = () => { + this.errorMessage = null; + }; + + handleError = (errorObject) => { + this.errorMessage = errorObject; + }; + + setError = (err) => { + this.errorMessage = { + title: 'Could Not Force Launch', + description: messageForError(err, 'submit jobs'), + }; + }; + + + {{yield + (hash + data=(hash) + fns=(hash setError=this.setError) + ui=(hash + Body=(component JobPagePartsBody job=@job) + Error=(component + JobPagePartsError + errorMessage=this.errorMessage + onDismiss=this.clearErrorMessage + ) + Title=(component + JobPagePartsTitle job=@job handleError=this.handleError + ) + StatsBox=(component JobPagePartsStatsBox job=@job) + Summary=(component JobPagePartsSummary job=@job) + PlacementFailures=(component JobPagePartsPlacementFailures job=@job) + TaskGroups=(component JobPagePartsTaskGroups job=@job) + RecentAllocations=(component + JobPagePartsRecentAllocations + job=@job + activeTask=@activeTask + setActiveTaskQueryParam=@setActiveTaskQueryParam + ) + Meta=(component JobPagePartsMeta meta=@job.meta) + DasRecommendations=(component JobPagePartsDasRecommendations job=@job) + Children=(component JobPagePartsChildren job=@job) + StatusPanel=(component + JobStatusPanel job=@job handleError=this.handleError + ) + ) + ) + }} + +} diff --git a/ui/app/components/job-page.hbs b/ui/app/components/job-page.hbs deleted file mode 100644 index 43453e85825..00000000000 --- a/ui/app/components/job-page.hbs +++ /dev/null @@ -1,40 +0,0 @@ -{{! - Copyright IBM Corp. 2015, 2025 - SPDX-License-Identifier: BUSL-1.1 -~}} - -{{yield - (hash - data=(hash) - fns=(hash setError=this.setError) - ui=(hash - Body=(component "job-page/parts/body" job=@job) - Error=(component - "job-page/parts/error" - errorMessage=this.errorMessage - onDismiss=this.clearErrorMessage - ) - Title=(component - "job-page/parts/title" job=@job handleError=this.handleError - ) - StatsBox=(component "job-page/parts/stats-box" job=@job) - Summary=(component "job-page/parts/summary" job=@job) - PlacementFailures=(component "job-page/parts/placement-failures" job=@job) - TaskGroups=(component "job-page/parts/task-groups" job=@job) - RecentAllocations=(component - "job-page/parts/recent-allocations" - job=@job - activeTask=@activeTask - setActiveTaskQueryParam=@setActiveTaskQueryParam - ) - Meta=(component "job-page/parts/meta" meta=@job.meta) - DasRecommendations=(component - "job-page/parts/das-recommendations" job=@job - ) - Children=(component "job-page/parts/children" job=@job) - StatusPanel=(component - "job-status/panel" job=@job handleError=this.handleError - ) - ) - ) -}} \ No newline at end of file diff --git a/ui/app/components/job-page.js b/ui/app/components/job-page.js deleted file mode 100644 index 6286f867ee0..00000000000 --- a/ui/app/components/job-page.js +++ /dev/null @@ -1,31 +0,0 @@ -/** - * Copyright IBM Corp. 2015, 2025 - * SPDX-License-Identifier: BUSL-1.1 - */ - -import { action } from '@ember/object'; -import Component from '@glimmer/component'; -import { tracked } from '@glimmer/tracking'; -import messageForError from 'nomad-ui/utils/message-from-adapter-error'; - -export default class JobPage extends Component { - @tracked errorMessage = null; - - @action - clearErrorMessage() { - this.errorMessage = null; - } - - @action - handleError(errorObject) { - this.errorMessage = errorObject; - } - - @action - setError(err) { - this.errorMessage = { - title: 'Could Not Force Launch', - description: messageForError(err, 'submit jobs'), - }; - } -} diff --git a/ui/app/components/job-page/batch.gjs b/ui/app/components/job-page/batch.gjs new file mode 100644 index 00000000000..f8dc3835ffe --- /dev/null +++ b/ui/app/components/job-page/batch.gjs @@ -0,0 +1,32 @@ +/** + * Copyright IBM Corp. 2015, 2025 + * SPDX-License-Identifier: BUSL-1.1 + */ + +import JobPage from 'nomad-ui/components/job-page'; + +export const JobPageBatch = +
+ {{#if @job.meta}}
+
+
+ Meta
+
+
+
+
+ {{/if}}
+
+
+
+ Payload
+
+
+ {{#if this.payloadJSON}}
+
+
+
+ {{this.payload}}
+
+
+ {{/if}}
+
- {{#if @job.meta}}
-
-
- Meta
-
-
-
-
- {{/if}}
-
-
-
- Payload
-
-
- {{#if this.payloadJSON}}
-
-
-
- {{this.payload}}
-
-
- {{/if}}
-
+
+
+}
+
+function sortItems(items, sortProperty, sortDescending = true) {
+ const normalizedItems = (items?.toArray?.() || items || []).filter(Boolean);
+
+ if (!sortProperty) {
+ return normalizedItems;
+ }
+
+ const sortedItems = normalizedItems
+ .slice()
+ .sort((left, right) => compareValues(left, right, sortProperty));
+
+ return sortDescending ? sortedItems.reverse() : sortedItems;
+}
+
+function compareValues(left, right, sortProperty) {
+ const leftValue = getPathValue(left, sortProperty);
+ const rightValue = getPathValue(right, sortProperty);
+
+ if (typeof leftValue === 'string' && typeof rightValue === 'string') {
+ return leftValue.localeCompare(rightValue);
+ }
+
+ if (leftValue === rightValue) {
+ return 0;
+ }
+
+ if (leftValue == null) {
+ return -1;
+ }
+
+ if (rightValue == null) {
+ return 1;
+ }
+
+ return leftValue > rightValue ? 1 : -1;
+}
+
+function getPathValue(item, sortProperty) {
+ return sortProperty.split('.').reduce((value, key) => value?.[key], item);
+}
diff --git a/ui/app/components/job-page/parts/children.hbs b/ui/app/components/job-page/parts/children.hbs
deleted file mode 100644
index df9f1fe26f0..00000000000
--- a/ui/app/components/job-page/parts/children.hbs
+++ /dev/null
@@ -1,95 +0,0 @@
-{{!
- Copyright IBM Corp. 2015, 2025
- SPDX-License-Identifier: BUSL-1.1
-~}}
-
-
+ Job Launches
+ {{#if @job.parameterized}}
+ {{#if (can "dispatch job" namespace=@job.namespaceId)}}
+
+ Dispatch Job
+
+ {{else}}
+
+ {{/if}}
+ {{/if}}
+
+
+ {{#if this.sortedChildren}}
+
+
+
+
+ Name
+
+
+ Submitted At
+
+
+ Status
+
+
+ Completed Allocations
+
+
+
+
+
+
+ {{else}}
+
+ {{/if}}
+
+
+
+
- Job Launches
- {{#if this.job.parameterized}}
- {{#if (can "dispatch job" namespace=this.job.namespaceId)}}
-
- Dispatch Job
-
- {{else}}
-
- {{/if}}
- {{/if}}
-
-
- {{#if this.sortedChildren}}
-
-
-
-
- Name
-
-
- Submitted At
-
-
- Status
-
-
- Completed Allocations
-
-
-
-
-
-
- {{else}}
-
- {{/if}}
-
\ No newline at end of file
diff --git a/ui/app/components/job-page/parts/children.js b/ui/app/components/job-page/parts/children.js
deleted file mode 100644
index b40082dadf2..00000000000
--- a/ui/app/components/job-page/parts/children.js
+++ /dev/null
@@ -1,48 +0,0 @@
-/**
- * Copyright IBM Corp. 2015, 2025
- * SPDX-License-Identifier: BUSL-1.1
- */
-
-import Component from '@ember/component';
-import { service } from '@ember/service';
-import { action, computed } from '@ember/object';
-import { alias, readOnly } from '@ember/object/computed';
-import Sortable from 'nomad-ui/mixins/sortable';
-import { classNames } from '@ember-decorators/component';
-import classic from 'ember-classic-decorator';
-
-@classic
-@classNames('boxed-section')
-export default class Children extends Component.extend(Sortable) {
- @service system;
- @service userSettings;
-
- job = null;
-
- // Provide a value that is bound to a query param
- sortProperty = null;
- sortDescending = null;
- currentPage = null;
-
- @readOnly('userSettings.pageSize') pageSize;
-
- @computed('job.taskGroups.[]')
- get taskGroups() {
- return this.get('job.taskGroups') || [];
- }
-
- @computed('jobs.[]')
- get children() {
- return this.jobs || [];
- }
-
- @alias('children') listToSort;
- @alias('listSorted') sortedChildren;
-
- @action
- resetPagination() {
- if (this.currentPage != null) {
- this.set('currentPage', 1);
- }
- }
-}
diff --git a/ui/app/components/job-page/parts/das-recommendations.gjs b/ui/app/components/job-page/parts/das-recommendations.gjs
new file mode 100644
index 00000000000..1ecd0d60a2f
--- /dev/null
+++ b/ui/app/components/job-page/parts/das-recommendations.gjs
@@ -0,0 +1,17 @@
+/**
+ * Copyright IBM Corp. 2015, 2025
+ * SPDX-License-Identifier: BUSL-1.1
+ */
+
+import can from 'ember-can/helpers/can';
+import DasRecommendationAccordion from 'nomad-ui/components/das/recommendation-accordion';
+
+export const JobPagePartsDasRecommendations =
+ {{#if (can "accept recommendations")}}
+ {{#each @job.recommendationSummaries as |summary|}}
+
-
-
+
+ {{/if}}
+;
+
+export default JobPagePartsError;
diff --git a/ui/app/components/job-page/parts/error.hbs b/ui/app/components/job-page/parts/error.hbs
deleted file mode 100644
index dc0166710ce..00000000000
--- a/ui/app/components/job-page/parts/error.hbs
+++ /dev/null
@@ -1,26 +0,0 @@
-{{!
- Copyright IBM Corp. 2015, 2025
- SPDX-License-Identifier: BUSL-1.1
-~}}
-
-{{#if this.errorMessage}}
-
+
+
+
+ {{@errorMessage.title}}
+{{@errorMessage.description}}
+
+
+
+
-
-{{/if}}
\ No newline at end of file
diff --git a/ui/app/components/job-page/parts/error.js b/ui/app/components/job-page/parts/error.js
deleted file mode 100644
index f543626b097..00000000000
--- a/ui/app/components/job-page/parts/error.js
+++ /dev/null
@@ -1,15 +0,0 @@
-/**
- * Copyright IBM Corp. 2015, 2025
- * SPDX-License-Identifier: BUSL-1.1
- */
-
-import Component from '@ember/component';
-import { tagName } from '@ember-decorators/component';
-import classic from 'ember-classic-decorator';
-
-@classic
-@tagName('')
-export default class Error extends Component {
- errorMessage = null;
- onDismiss() {}
-}
diff --git a/ui/app/components/job-page/parts/meta.gjs b/ui/app/components/job-page/parts/meta.gjs
new file mode 100644
index 00000000000..bec3dd23db3
--- /dev/null
+++ b/ui/app/components/job-page/parts/meta.gjs
@@ -0,0 +1,25 @@
+/**
+ * Copyright IBM Corp. 2015, 2025
+ * SPDX-License-Identifier: BUSL-1.1
+ */
+
+import AttributesTable from 'nomad-ui/components/attributes-table';
+
+export const JobPagePartsMeta =
+ {{#if @meta.structured}}
+
-
-
-
- {{this.errorMessage.title}}
-{{this.errorMessage.description}}
-
-
-
-
+
+ {{/if}}
+;
+
+export default JobPagePartsMeta;
diff --git a/ui/app/components/job-page/parts/meta.hbs b/ui/app/components/job-page/parts/meta.hbs
deleted file mode 100644
index f1f68818aa4..00000000000
--- a/ui/app/components/job-page/parts/meta.hbs
+++ /dev/null
@@ -1,19 +0,0 @@
-{{!
- Copyright IBM Corp. 2015, 2025
- SPDX-License-Identifier: BUSL-1.1
-~}}
-
-{{#if @meta.structured}}
-
+ Meta
+
+
+
+
-
-{{/if}}
\ No newline at end of file
diff --git a/ui/app/components/job-page/parts/placement-failures.gjs b/ui/app/components/job-page/parts/placement-failures.gjs
new file mode 100644
index 00000000000..99b2bc89330
--- /dev/null
+++ b/ui/app/components/job-page/parts/placement-failures.gjs
@@ -0,0 +1,28 @@
+/**
+ * Copyright IBM Corp. 2015, 2026
+ * SPDX-License-Identifier: BUSL-1.1
+ */
+
+import { HdsAlert } from '@hashicorp/design-system-components/components';
+import PlacementFailure from 'nomad-ui/components/placement-failure';
+
+const PlacementFailures =
+ {{#if @job.hasPlacementFailures}}
+
- Meta
-
-
-
-
+
+
+}
diff --git a/ui/app/components/job-page/parts/recent-allocations.hbs b/ui/app/components/job-page/parts/recent-allocations.hbs
deleted file mode 100644
index c8d267ee2d0..00000000000
--- a/ui/app/components/job-page/parts/recent-allocations.hbs
+++ /dev/null
@@ -1,123 +0,0 @@
-{{!
- Copyright IBM Corp. 2015, 2025
- SPDX-License-Identifier: BUSL-1.1
-~}}
-
-
+ Recent Allocations
+
+ Show Tasks
+
+
+
+ {{#if @job.allocations.length}}
+
+
+ Driver Health,
+ Scheduling, and Preemption
+
+ ID
+
+
+ Task Group
+
+
+ Created
+
+
+ Modified
+
+
+ Status
+
+
+ Version
+
+
+ Client
+
+
+ Volume
+
+
+ CPU
+
+
+ Memory
+
+ {{#if @job.actions.length}}
+ Actions
+ {{/if}}
+
+
+
+
+ {{else}}
+
+ {{/if}}
+
+ {{#if @job.allocations.length}}
+
+
+ {{/if}}
+
+
-
\ No newline at end of file
diff --git a/ui/app/components/job-page/parts/recent-allocations.js b/ui/app/components/job-page/parts/recent-allocations.js
deleted file mode 100644
index 60c878aa54e..00000000000
--- a/ui/app/components/job-page/parts/recent-allocations.js
+++ /dev/null
@@ -1,43 +0,0 @@
-/**
- * Copyright IBM Corp. 2015, 2025
- * SPDX-License-Identifier: BUSL-1.1
- */
-
-import Component from '@ember/component';
-import { action, computed } from '@ember/object';
-import { service } from '@ember/service';
-import PromiseArray from 'nomad-ui/utils/classes/promise-array';
-import { classNames } from '@ember-decorators/component';
-import classic from 'ember-classic-decorator';
-import localStorageProperty from 'nomad-ui/utils/properties/local-storage';
-
-@classic
-@classNames('boxed-section')
-export default class RecentAllocations extends Component {
- @service router;
-
- sortProperty = 'modifyIndex';
- sortDescending = true;
-
- @localStorageProperty('nomadShowSubTasks', true) showSubTasks;
-
- @action
- toggleShowSubTasks(e) {
- e.preventDefault();
- this.set('showSubTasks', !this.get('showSubTasks'));
- }
-
- @computed('job.allocations.@each.modifyIndex')
- get sortedAllocations() {
- return PromiseArray.create({
- promise: this.get('job.allocations').then((allocations) =>
- allocations.sortBy('modifyIndex').reverse().slice(0, 5),
- ),
- });
- }
-
- @action
- gotoAllocation(allocation) {
- this.router.transitionTo('allocations.allocation', allocation.id);
- }
-}
diff --git a/ui/app/components/job-page/parts/stats-box.gjs b/ui/app/components/job-page/parts/stats-box.gjs
new file mode 100644
index 00000000000..637681c417c
--- /dev/null
+++ b/ui/app/components/job-page/parts/stats-box.gjs
@@ -0,0 +1,102 @@
+/**
+ * Copyright IBM Corp. 2015, 2025
+ * SPDX-License-Identifier: BUSL-1.1
+ */
+
+import { LinkTo } from '@ember/routing';
+import Component from '@glimmer/component';
+import { service } from '@ember/service';
+import { and } from 'ember-truth-helpers';
+import can from 'ember-can/helpers/can';
+
+export default class StatsBox extends Component {
+ @service system;
+
+ get packDetails() {
+ let packMeta = this.args.job?.meta?.structured.root.children.pack;
+
+ if (!packMeta) {
+ return null;
+ }
+
+ return packMeta.files
+ .map((file) => ({
+ key: file.name,
+ value: file.variable.value,
+ }))
+ .reduce((accumulator, file) => {
+ accumulator[file.key] = file.value;
+ return accumulator;
+ }, {});
+ }
+
+
+ {{! template-lint-disable no-inline-styles }}
+
- Recent Allocations
-
- Show Tasks
-
-
-
- {{#if this.job.allocations.length}}
-
-
- Driver Health,
- Scheduling, and Preemption
-
- ID
-
-
- Task Group
-
-
- Created
-
-
- Modified
-
-
- Status
-
-
- Version
-
-
- Client
-
-
- Volume
-
-
- CPU
-
-
- Memory
-
- {{#if this.job.actions.length}}
- Actions
- {{/if}}
-
-
-
-
- {{else}}
-
- {{/if}}
-
- {{#if this.job.allocations.length}}
-
-
- {{/if}}
-
-
+
+
+}
diff --git a/ui/app/components/job-page/parts/stats-box.hbs b/ui/app/components/job-page/parts/stats-box.hbs
deleted file mode 100644
index 493defab131..00000000000
--- a/ui/app/components/job-page/parts/stats-box.hbs
+++ /dev/null
@@ -1,72 +0,0 @@
-{{!
- Copyright IBM Corp. 2015, 2025
- SPDX-License-Identifier: BUSL-1.1
-~}}
-
-{{! template-lint-disable no-inline-styles }}
-
+ Job Details
+
+ Type
+ {{@job.type}}
+
+
+ Priority
+ {{@job.priority}}
+
+
+ Version
+ {{@job.version}}
+
+ {{#if (and (can "list variables") @job.pathLinkedVariable)}}
+
+ Variables
+
+ {{/if}}
+ {{yield to="beforeNamespace"}}
+ {{#if (and @job.namespaceId this.system.shouldShowNamespaces)}}
+
+ Namespace
+ {{@job.namespaceId}}
+
+ {{/if}}
+
+ Node Pool
+ {{#if @job.nodePool}}{{@job.nodePool}}{{else}}-{{/if}}
+
+ {{yield to="afterNamespace"}}
+
+
+ {{#if this.packDetails.name}}
+
+ Pack Details
+
+ Name
+ {{this.packDetails.name}}
+
+ {{#if this.packDetails.registry}}
+
+ Registry
+ {{this.packDetails.registry}}
+
+ {{/if}}
+ {{#if this.packDetails.version}}
+
+ Version
+ {{this.packDetails.version}}
+
+ {{/if}}
+ {{#if this.packDetails.revision}}
+
+ Revision
+ {{this.packDetails.revision}}
+
+ {{/if}}
+ {{yield to="pack"}}
+
+ {{/if}}
+
-
\ No newline at end of file
diff --git a/ui/app/components/job-page/parts/stats-box.js b/ui/app/components/job-page/parts/stats-box.js
deleted file mode 100644
index 428951d3612..00000000000
--- a/ui/app/components/job-page/parts/stats-box.js
+++ /dev/null
@@ -1,30 +0,0 @@
-/**
- * Copyright IBM Corp. 2015, 2025
- * SPDX-License-Identifier: BUSL-1.1
- */
-
-import Component from '@glimmer/component';
-import { service } from '@ember/service';
-
-export default class StatsBox extends Component {
- @service system;
-
- get packDetails() {
- let packMeta = this.args.job?.meta?.structured.root.children.pack;
- if (!packMeta) {
- return null;
- } else {
- return packMeta.files
- .map((file) => {
- return {
- key: file.name,
- value: file.variable.value,
- };
- })
- .reduce((acc, file) => {
- acc[file.key] = file.value;
- return acc;
- }, {});
- }
- }
-}
diff --git a/ui/app/components/job-page/parts/summary-chart.gjs b/ui/app/components/job-page/parts/summary-chart.gjs
new file mode 100644
index 00000000000..2952e09627e
--- /dev/null
+++ b/ui/app/components/job-page/parts/summary-chart.gjs
@@ -0,0 +1,110 @@
+/**
+ * Copyright IBM Corp. 2015, 2025
+ * SPDX-License-Identifier: BUSL-1.1
+ */
+
+import { LinkTo } from '@ember/routing';
+import Component from '@glimmer/component';
+import { camelize } from '@ember/string';
+import { service } from '@ember/service';
+import { and, eq, gt } from 'ember-truth-helpers';
+import AllocationStatusBar from 'nomad-ui/components/allocation-status-bar';
+import ChildrenStatusBar from 'nomad-ui/components/children-status-bar';
+import JobPagePartsSummaryLegendItem from 'nomad-ui/components/job-page/parts/summary-legend-item';
+
+export default class JobPagePartsSummaryChart extends Component {
+ @service router;
+
+ gotoAllocations = (status) => {
+ const namespace = this.args.job.namespaceId || this.args.job.namespace;
+ const queryParams = {
+ status: JSON.stringify(status),
+ page: 1,
+ search: '',
+ sort: 'modifyIndex',
+ desc: true,
+ client: '',
+ taskGroup: '',
+ version: '',
+ scheduling: '',
+ activeTask: null,
+ };
+
+ if (namespace && namespace !== 'default') {
+ queryParams.namespace = namespace;
+ }
+
+ this.router.transitionTo('jobs.job.allocations', this.args.job, {
+ queryParams,
+ });
+ };
+
+ onSliceClick = (event, slice) => {
+ this.gotoAllocations([camelize(slice.label)]);
+ };
+
+
+ {{#if @job.hasChildren}}
+
- Job Details
-
- Type
- {{@job.type}}
-
-
- Priority
- {{@job.priority}}
-
-
- Version
- {{@job.version}}
-
- {{#if (and (can "list variables") @job.pathLinkedVariable)}}
-
- Variables
-
- {{/if}}
- {{yield to="beforeNamespace"}}
- {{#if (and @job.namespaceId this.system.shouldShowNamespaces)}}
-
- Namespace
- {{@job.namespaceId}}
-
- {{/if}}
-
- Node Pool
- {{#if @job.nodePool}}{{@job.nodePool}}{{else}}-{{/if}}
-
- {{yield to="afterNamespace"}}
-
-
- {{#if this.packDetails.name}}
-
- Pack Details
-
- Name
- {{this.packDetails.name}}
-
- {{#if this.packDetails.registry}}
-
- Registry
- {{this.packDetails.registry}}
-
- {{/if}}
- {{#if this.packDetails.version}}
-
- Version
- {{this.packDetails.version}}
-
- {{/if}}
- {{#if this.packDetails.revision}}
-
- Revision
- {{this.packDetails.revision}}
-
- {{/if}}
- {{yield to="pack"}}
-
- {{/if}}
--
+ {{#each chart.data as |datum index|}}
+
-
+
+
+ {{/each}}
+
-
+ {{#each chart.data as |datum index|}}
+
-
+ {{#if (and (gt datum.value 0) datum.legendLink)}}
+
+ + {{else}} ++ + {{/if}} +
+ {{/each}}
+
-
- {{#each chart.data as |datum index|}}
-
-
-
-
- {{#each chart.data as |datum index|}}
-
-
- {{#if (and (gt datum.value 0) datum.legendLink)}}
-
- - {{else}} -
- {{/each}}
-
+
+
+
+ {{@datum.value}}
+
+
+ {{@datum.label}}
+
+
+ {{#if @datum.help}}
+
+
+;
+
+export default JobPagePartsSummaryLegendItem;
diff --git a/ui/app/components/job-page/parts/summary-legend-item.hbs b/ui/app/components/job-page/parts/summary-legend-item.hbs
deleted file mode 100644
index 1189bae383e..00000000000
--- a/ui/app/components/job-page/parts/summary-legend-item.hbs
+++ /dev/null
@@ -1,24 +0,0 @@
-{{!
- Copyright IBM Corp. 2015, 2025
- SPDX-License-Identifier: BUSL-1.1
-~}}
-
-
-
-
-
- {{@datum.value}}
-
-
- {{@datum.label}}
-
-
- {{#if @datum.help}}
-
-
\ No newline at end of file
diff --git a/ui/app/components/job-page/parts/summary.gjs b/ui/app/components/job-page/parts/summary.gjs
new file mode 100644
index 00000000000..585c51bfaab
--- /dev/null
+++ b/ui/app/components/job-page/parts/summary.gjs
@@ -0,0 +1,101 @@
+/**
+ * Copyright IBM Corp. 2015, 2025
+ * SPDX-License-Identifier: BUSL-1.1
+ */
+
+import { array } from '@ember/helper';
+import Component from '@glimmer/component';
+import { tracked } from '@glimmer/tracking';
+import { gt } from 'ember-truth-helpers';
+import AllocationStatusBar from 'nomad-ui/components/allocation-status-bar';
+import ChildrenStatusBar from 'nomad-ui/components/children-status-bar';
+import JobPagePartsSummaryChart from 'nomad-ui/components/job-page/parts/summary-chart';
+import ListAccordion from 'nomad-ui/components/list-accordion';
+
+export default class Summary extends Component {
+ @tracked persistedStateVersion = 0;
+
+ get forceCollapsed() {
+ return this.args.forceCollapsed ?? false;
+ }
+
+ get isExpanded() {
+ this.persistedStateVersion;
+
+ if (this.forceCollapsed) {
+ return false;
+ }
+
+ const storageValue = window.localStorage.nomadExpandJobSummary;
+ return storageValue != null ? JSON.parse(storageValue) : true;
+ }
+
+ persist = (item, isOpen) => {
+ window.localStorage.nomadExpandJobSummary = isOpen;
+ this.persistedStateVersion++;
+ };
+
+
+
+
+
+ {{#if a.item.hasChildren}}
+ Children Status
+
+ {{a.item.summary.totalChildren}}
+
+ {{else}}
+ Allocation Status
+
+ {{a.item.summary.totalAllocs}}
+
+ {{/if}}
+
+ {{#unless a.isOpen}}
+
+
+ {{/unless}}
+
+ {{#if a.item.hasChildren}}
+ {{#if (gt a.item.totalChildren 0)}}
+
+
-
-
- {{#if a.item.hasChildren}}
- Children Status
-
- {{a.item.summary.totalChildren}}
-
- {{else}}
- Allocation Status
-
- {{a.item.summary.totalAllocs}}
-
- {{/if}}
-
- {{#unless a.isOpen}}
-
-
- {{/unless}}
-
- {{#if a.item.hasChildren}}
- {{#if (gt a.item.totalChildren 0)}}
-
-
+
+
+}
+
+function sortItems(items, sortProperty, sortDescending = true) {
+ const normalizedItems = (items?.toArray?.() || items || []).filter(Boolean);
+
+ if (!sortProperty) {
+ return normalizedItems;
+ }
+
+ const sortedItems = normalizedItems
+ .slice()
+ .sort((left, right) => compareValues(left, right, sortProperty));
+
+ return sortDescending ? sortedItems.reverse() : sortedItems;
+}
+
+function compareValues(left, right, sortProperty) {
+ const leftValue = getPathValue(left, sortProperty);
+ const rightValue = getPathValue(right, sortProperty);
+
+ if (typeof leftValue === 'string' && typeof rightValue === 'string') {
+ return leftValue.localeCompare(rightValue);
+ }
+
+ if (leftValue === rightValue) {
+ return 0;
+ }
+
+ if (leftValue == null) {
+ return -1;
+ }
+
+ if (rightValue == null) {
+ return 1;
+ }
+
+ return leftValue > rightValue ? 1 : -1;
+}
+
+function getPathValue(item, sortProperty) {
+ return sortProperty.split('.').reduce((value, key) => value?.[key], item);
+}
diff --git a/ui/app/components/job-page/parts/task-groups.hbs b/ui/app/components/job-page/parts/task-groups.hbs
deleted file mode 100644
index ea7e244f6bd..00000000000
--- a/ui/app/components/job-page/parts/task-groups.hbs
+++ /dev/null
@@ -1,53 +0,0 @@
-{{!
- Copyright IBM Corp. 2015, 2025
- SPDX-License-Identifier: BUSL-1.1
-~}}
-
-
+ Task Groups
+
+
+
+
+
+ Name
+
+
+ Count
+
+
+ Allocation Status
+
+
+ Volume
+
+
+ Reserved CPU
+
+
+ Reserved Memory
+
+
+ Reserved Disk
+
+
+
+
+
+
+
-
\ No newline at end of file
diff --git a/ui/app/components/job-page/parts/task-groups.js b/ui/app/components/job-page/parts/task-groups.js
deleted file mode 100644
index 8428ac11bec..00000000000
--- a/ui/app/components/job-page/parts/task-groups.js
+++ /dev/null
@@ -1,37 +0,0 @@
-/**
- * Copyright IBM Corp. 2015, 2025
- * SPDX-License-Identifier: BUSL-1.1
- */
-
-import Component from '@ember/component';
-import { action, computed } from '@ember/object';
-import { service } from '@ember/service';
-import { alias } from '@ember/object/computed';
-import Sortable from 'nomad-ui/mixins/sortable';
-import { classNames } from '@ember-decorators/component';
-import classic from 'ember-classic-decorator';
-
-@classic
-@classNames('boxed-section')
-export default class TaskGroups extends Component.extend(Sortable) {
- @service router;
-
- job = null;
-
- // Provide a value that is bound to a query param
- sortProperty = null;
- sortDescending = null;
-
- @action
- gotoTaskGroup(taskGroup) {
- this.router.transitionTo('jobs.job.task-group', this.job, taskGroup.name);
- }
-
- @computed('job.taskGroups.[]')
- get taskGroups() {
- return this.get('job.taskGroups') || [];
- }
-
- @alias('taskGroups') listToSort;
- @alias('listSorted') sortedTaskGroups;
-}
diff --git a/ui/app/components/job-page/parts/title.gjs b/ui/app/components/job-page/parts/title.gjs
new file mode 100644
index 00000000000..d5e113a6be0
--- /dev/null
+++ b/ui/app/components/job-page/parts/title.gjs
@@ -0,0 +1,340 @@
+/**
+ * Copyright IBM Corp. 2015, 2025
+ * SPDX-License-Identifier: BUSL-1.1
+ */
+
+import { array, fn, hash } from '@ember/helper';
+import Component from '@glimmer/component';
+import { htmlSafe } from '@ember/template';
+import { not } from 'ember-truth-helpers';
+import { service } from '@ember/service';
+import { task } from 'ember-concurrency';
+import can from 'ember-can/helpers/can';
+import {
+ HdsButton,
+ HdsIcon,
+ HdsPageHeader,
+} from '@hashicorp/design-system-components/components';
+import { marked } from 'marked';
+import DOMPurify from 'dompurify';
+import ActionsDropdown from 'nomad-ui/components/actions-dropdown';
+import ExecOpenButton from 'nomad-ui/components/exec/open-button';
+import TwoStepButton from 'nomad-ui/components/two-step-button';
+import hdsTooltip from '@hashicorp/design-system-components/modifiers/hds-tooltip';
+import keyboardShortcutModifier from 'nomad-ui/modifiers/keyboard-shortcut';
+import jsonToHcl from 'nomad-ui/utils/json-to-hcl';
+import messageFromAdapterError from 'nomad-ui/utils/message-from-adapter-error';
+
+export default class Title extends Component {
+ @service router;
+ @service notifications;
+
+ get displayTitle() {
+ return this.args.title || this.args.job.name;
+ }
+
+ get hasPack() {
+ return !!this.args.job.meta?.structured?.root.children.pack;
+ }
+
+ get showRunningActions() {
+ return this.args.job.status !== 'dead';
+ }
+
+ get showActionsDropdown() {
+ return this.args.job.actions.length && this.args.job.allocations.length;
+ }
+
+ get showStableVersionRevert() {
+ return this.args.job.hasStableNonCurrentVersion;
+ }
+
+ get showLatestVersionRevert() {
+ return !this.args.job.hasVersionStability && this.args.job.latestVersion;
+ }
+
+ stopJob = task(async (withNotifications = false) => {
+ try {
+ const job = this.args.job;
+ await job.stop();
+ job.set('status', 'dead');
+
+ if (withNotifications) {
+ this.notifications.add({
+ title: 'Job Stopped',
+ message: `${job.name} has been stopped`,
+ color: 'success',
+ });
+ }
+ } catch (err) {
+ this.args.handleError?.({
+ title: 'Could Not Stop Job',
+ description: messageFromAdapterError(err, 'stop jobs'),
+ });
+ }
+ });
+
+ purgeJob = task(async () => {
+ try {
+ const job = this.args.job;
+ await job.purge();
+ this.notifications.add({
+ title: 'Job Purged',
+ message: `You have purged ${job.name}`,
+ color: 'success',
+ });
+ this.router.transitionTo('jobs');
+ } catch (err) {
+ this.args.handleError?.({
+ title: 'Error purging job',
+ description: messageFromAdapterError(err, 'purge jobs'),
+ });
+ }
+ });
+
+ startJob = task(async (withNotifications = false) => {
+ const job = this.args.job;
+
+ try {
+ const specification = await job.fetchRawSpecification();
+
+ let newDefinitionVariables = job.get('_newDefinitionVariables') || '';
+
+ if (specification.VariableFlags) {
+ newDefinitionVariables += jsonToHcl(specification.VariableFlags);
+ }
+
+ if (specification.Variables) {
+ newDefinitionVariables += specification.Variables;
+ }
+
+ job.set('_newDefinitionVariables', newDefinitionVariables);
+ job.set('_newDefinition', specification.Source);
+ } catch {
+ const definition = await job.fetchRawDefinition();
+ delete definition.Stop;
+ job.set('_newDefinition', JSON.stringify(definition));
+ }
+
+ try {
+ await job.parse();
+ await job.update();
+ job.set('status', 'running');
+
+ if (withNotifications) {
+ this.notifications.add({
+ title: 'Job Started',
+ message: `${job.name} has started`,
+ color: 'success',
+ });
+ }
+ } catch (err) {
+ this.args.handleError?.({
+ title: 'Could Not Start Job',
+ description: messageFromAdapterError(err, 'start jobs'),
+ });
+ }
+ });
+
+ revertTo = task(async (version) => {
+ if (!version) {
+ return;
+ }
+
+ await version.revertTo();
+ });
+
+ get description() {
+ if (!this.args.job.ui?.Description) {
+ return null;
+ }
+
+ marked.use({
+ gfm: true,
+ breaks: true,
+ });
+
+ const purifyConfig = {
+ FORBID_TAGS: ['script', 'style'],
+ FORBID_ATTR: ['onerror', 'onload'],
+ };
+ const rawDescription = marked.parse(this.args.job.ui.Description);
+
+ if (typeof rawDescription !== 'string') {
+ console.error(
+ 'Expected a string from marked.parse(), received:',
+ typeof rawDescription,
+ );
+ return null;
+ }
+
+ const cleanDescription = DOMPurify.sanitize(rawDescription, purifyConfig);
+ return htmlSafe(cleanDescription);
+ }
+
+ get links() {
+ return this.args.job.ui?.Links;
+ }
+
+
+
- Task Groups
-
-
-
-
-
- Name
-
-
- Count
-
-
- Allocation Status
-
-
- Volume
-
-
- Reserved CPU
-
-
- Reserved Memory
-
-
- Reserved Disk
-
-
-
-
-
-
-
+ {{#each this.links as |link|}}
+
+
- {{#each this.links as |link|}}
-
- on newlines, use github-flavoured-markdown. - marked.use({ - gfm: true, - breaks: true, - }); - - const purifyConfig = { - FORBID_TAGS: ['script', 'style'], - FORBID_ATTR: ['onerror', 'onload'], - }; - const rawDescription = marked.parse(this.job.ui.Description); - if (typeof rawDescription !== 'string') { - console.error( - 'Expected a string from marked.parse(), received:', - typeof rawDescription, - ); - return null; - } - const cleanDescription = DOMPurify.sanitize(rawDescription, purifyConfig); - return htmlSafe(cleanDescription); - } - - get links() { - return this.job.ui?.Links; - } -} diff --git a/ui/app/components/job-page/periodic-child.gjs b/ui/app/components/job-page/periodic-child.gjs new file mode 100644 index 00000000000..11f556deba6 --- /dev/null +++ b/ui/app/components/job-page/periodic-child.gjs @@ -0,0 +1,44 @@ +/** + * Copyright IBM Corp. 2015, 2025 + * SPDX-License-Identifier: BUSL-1.1 + */ + +import { LinkTo } from '@ember/routing'; +import JobPage from 'nomad-ui/components/job-page'; + +export const JobPagePeriodicChild = +
+ {{#if @job.hasChildren}}
+ {{#if (gt @job.totalChildren 0)}}
+
+
- {{#if this.job.hasChildren}}
- {{#if (gt this.job.totalChildren 0)}}
-
-
+ {{#if this.countToShow}}
+
+ {{#if
+ this.countToShow
+ }}+{{/if}}{{this.remaining}}
+ {{#unless @steady}}
+ {{#if (eq @canary "canary")}}
+
+ {{/if}}
+ {{#if (eq @status "running")}}
+
+ {{#if (eq @health "healthy")}}
+
+ {{/if}}
+
+
+}
diff --git a/ui/app/components/job-status/allocation-status-block.hbs b/ui/app/components/job-status/allocation-status-block.hbs
deleted file mode 100644
index 7127d7d824e..00000000000
--- a/ui/app/components/job-status/allocation-status-block.hbs
+++ /dev/null
@@ -1,64 +0,0 @@
-{{!
- Copyright IBM Corp. 2015, 2025
- SPDX-License-Identifier: BUSL-1.1
-~}}
-
-{{!
- Exists as a "middleman" between AllocationStatusRow and IndividualAllocation
- only when showSummaries in AllocationStatusRow is true (i.e. when the math of how
- many allocations to show in each block is done x minWidth of each alloc exceeds
- available space)
-}}
-
-
+ {{#each this.visibleAllocs as |allocation|}}
+
+ {{/if}}
+ {{#if this.remaining}}
+
+
- {{#if this.countToShow}}
-
- {{#if
- this.countToShow
- }}+{{/if}}{{this.remaining}}
- {{#unless @steady}}
- {{#if (eq @canary "canary")}}
-
- {{/if}}
- {{#if (eq @status "running")}}
-
- {{#if (eq @health "healthy")}}
-
- {{/if}}
-
\ No newline at end of file
diff --git a/ui/app/components/job-status/allocation-status-block.js b/ui/app/components/job-status/allocation-status-block.js
deleted file mode 100644
index e122ee09972..00000000000
--- a/ui/app/components/job-status/allocation-status-block.js
+++ /dev/null
@@ -1,23 +0,0 @@
-/**
- * Copyright IBM Corp. 2015, 2025
- * SPDX-License-Identifier: BUSL-1.1
- */
-
-import Component from '@glimmer/component';
-
-export default class JobStatusAllocationStatusBlockComponent extends Component {
- get countToShow() {
- if (this.args.compact) {
- return 0;
- }
- const restWidth = 50;
- const restGap = 10;
- let cts = Math.floor((this.args.width - (restWidth + restGap)) / 42);
- // Either show 3+ or show only a single/remaining box
- return cts > 3 ? cts : 0;
- }
-
- get remaining() {
- return this.args.count - this.countToShow;
- }
-}
diff --git a/ui/app/components/job-status/allocation-status-row.gjs b/ui/app/components/job-status/allocation-status-row.gjs
new file mode 100644
index 00000000000..5c8b9601df5
--- /dev/null
+++ b/ui/app/components/job-status/allocation-status-row.gjs
@@ -0,0 +1,152 @@
+/**
+ * Copyright IBM Corp. 2015, 2025
+ * SPDX-License-Identifier: BUSL-1.1
+ */
+
+import Component from '@glimmer/component';
+import { tracked } from '@glimmer/tracking';
+import { didInsert } from '@ember/render-modifiers';
+import windowResize from 'nomad-ui/modifiers/window-resize';
+import JobStatusAllocationStatusBlock from 'nomad-ui/components/job-status/allocation-status-block';
+import JobStatusIndividualAllocation from 'nomad-ui/components/job-status/individual-allocation';
+
+const ALLOC_BLOCK_WIDTH = 32;
+const ALLOC_BLOCK_GAP = 10;
+const COMPACT_INTER_SUMMARY_GAP = 7;
+
+export default class JobStatusAllocationStatusRow extends Component {
+ @tracked width = 0;
+
+ get allocationGroups() {
+ return Object.entries(this.args.allocBlocks || {}).flatMap(
+ ([status, allocsByStatus]) =>
+ Object.entries(allocsByStatus || {}).flatMap(
+ ([health, allocsByHealth]) =>
+ Object.entries(allocsByHealth || {}).map(
+ ([canary, allocsByCanary]) => ({
+ status,
+ health,
+ canary,
+ allocs: allocsByCanary || [],
+ }),
+ ),
+ ),
+ );
+ }
+
+ get allocBlockSlots() {
+ return this.allocationGroups.reduce(
+ (totalSlots, group) => totalSlots + group.allocs.length,
+ 0,
+ );
+ }
+
+ get showSummaries() {
+ return (
+ this.args.compact ||
+ this.allocBlockSlots * (ALLOC_BLOCK_WIDTH + ALLOC_BLOCK_GAP) -
+ ALLOC_BLOCK_GAP >
+ this.width
+ );
+ }
+
+ get numberOfSummariesShown() {
+ return this.allocationGroups.filter((group) => group.allocs.length > 0)
+ .length;
+ }
+
+ get summaryGroups() {
+ return this.allocationGroups
+ .filter((group) => group.allocs.length > 0)
+ .map((group) => ({
+ ...group,
+ width: this.calcWidth(group.allocs.length),
+ }));
+ }
+
+ get individualAllocs() {
+ return this.allocationGroups.flatMap((group) =>
+ group.allocs.map((allocation) => ({
+ allocation,
+ status: group.status,
+ health: group.health,
+ canary: group.canary,
+ })),
+ );
+ }
+
+ get compactTally() {
+ if (!this.args.compact) {
+ return null;
+ }
+
+ if (this.args.allocationTallyMode === 'complete') {
+ return `${this.args.completeAllocs}/${this.args.groupCountSum}`;
+ }
+
+ return `${this.args.runningAllocs}/${this.args.groupCountSum}`;
+ }
+
+ calcWidth(count) {
+ if (this.args.compact) {
+ const totalGaps =
+ (this.numberOfSummariesShown - 1) * COMPACT_INTER_SUMMARY_GAP;
+ const usableWidth = this.width - totalGaps;
+ return (count / this.allocBlockSlots) * usableWidth;
+ }
+
+ return (count / this.allocBlockSlots) * this.width;
+ }
+
+ reflow = (element) => {
+ this.width = element.clientWidth;
+ };
+
+ captureElement = (element) => {
+ this.width = element.clientWidth;
+ };
+
+
+
- {{#each (range 0 this.countToShow) as |i|}}
-
- {{/if}}
- {{#if this.remaining}}
-
-
+ {{#if this.showSummaries}}
+
+
+}
diff --git a/ui/app/components/job-status/allocation-status-row.hbs b/ui/app/components/job-status/allocation-status-row.hbs
deleted file mode 100644
index 5086d89a2a1..00000000000
--- a/ui/app/components/job-status/allocation-status-row.hbs
+++ /dev/null
@@ -1,64 +0,0 @@
-{{!
- Copyright IBM Corp. 2015, 2025
- SPDX-License-Identifier: BUSL-1.1
-~}}
-
-
+ {{#each this.summaryGroups as |group|}}
+
+ {{else}}
+
+ {{#each this.individualAllocs as |item|}}
+
+ {{/if}}
+ {{#if @compact}}
+ {{this.compactTally}}
+ {{/if}}
+
- {{#if this.showSummaries}}
-
\ No newline at end of file
diff --git a/ui/app/components/job-status/allocation-status-row.js b/ui/app/components/job-status/allocation-status-row.js
deleted file mode 100644
index a5e59fc2d59..00000000000
--- a/ui/app/components/job-status/allocation-status-row.js
+++ /dev/null
@@ -1,68 +0,0 @@
-/**
- * Copyright IBM Corp. 2015, 2025
- * SPDX-License-Identifier: BUSL-1.1
- */
-
-import Component from '@glimmer/component';
-import { action } from '@ember/object';
-import { tracked } from '@glimmer/tracking';
-
-const ALLOC_BLOCK_WIDTH = 32;
-const ALLOC_BLOCK_GAP = 10;
-const COMPACT_INTER_SUMMARY_GAP = 7;
-
-export default class JobStatusAllocationStatusRowComponent extends Component {
- @tracked width = 0;
-
- get allocBlockSlots() {
- return Object.values(this.args.allocBlocks)
- .flatMap((statusObj) => Object.values(statusObj))
- .flatMap((healthObj) => Object.values(healthObj))
- .reduce(
- (totalSlots, allocsByCanary) =>
- totalSlots + (allocsByCanary ? allocsByCanary.length : 0),
- 0,
- );
- }
-
- get showSummaries() {
- return (
- this.args.compact ||
- this.allocBlockSlots * (ALLOC_BLOCK_WIDTH + ALLOC_BLOCK_GAP) -
- ALLOC_BLOCK_GAP >
- this.width
- );
- }
-
- // When we calculate how much width to give to a row in our viz,
- // we want to also offset the gap BETWEEN summaries. The way that css grid
- // works, a gap only appears between 2 elements, not at the start or end of a row.
- // Thus, we need to calculate total gap space using the number of summaries shown.
- get numberOfSummariesShown() {
- return Object.values(this.args.allocBlocks)
- .flatMap((statusObj) => Object.values(statusObj))
- .flatMap((healthObj) => Object.values(healthObj))
- .filter((allocs) => allocs.length > 0).length;
- }
-
- @action
- calcPerc(count) {
- if (this.args.compact) {
- const totalGaps =
- (this.numberOfSummariesShown - 1) * COMPACT_INTER_SUMMARY_GAP;
- const usableWidth = this.width - totalGaps;
- return (count / this.allocBlockSlots) * usableWidth;
- } else {
- return (count / this.allocBlockSlots) * this.width;
- }
- }
-
- @action reflow(element) {
- this.width = element.clientWidth;
- }
-
- @action
- captureElement(element) {
- this.width = element.clientWidth;
- }
-}
diff --git a/ui/app/components/job-status/deployment-history.gjs b/ui/app/components/job-status/deployment-history.gjs
new file mode 100644
index 00000000000..9998420ab44
--- /dev/null
+++ b/ui/app/components/job-status/deployment-history.gjs
@@ -0,0 +1,202 @@
+/**
+ * Copyright IBM Corp. 2015, 2025
+ * SPDX-License-Identifier: BUSL-1.1
+ */
+
+import Component from '@glimmer/component';
+import { tracked } from '@glimmer/tracking';
+import { service } from '@ember/service';
+import { get } from '@ember/object';
+import { scheduleOnce } from '@ember/runloop';
+import { on } from '@ember/modifier';
+import { LinkTo } from '@ember/routing';
+import { eq, or } from 'ember-truth-helpers';
+import { HdsIcon } from '@hashicorp/design-system-components/components';
+import SearchBox from 'nomad-ui/components/search-box';
+import formatTs from 'nomad-ui/helpers/format-ts';
+
+const MAX_NUMBER_OF_EVENTS = 500;
+
+export default class JobStatusDeploymentHistory extends Component {
+ @service notifications;
+
+ @tracked isHidden = false;
+ @tracked errorState = null;
+ @tracked searchTerm = '';
+
+ constructor() {
+ super(...arguments);
+
+ this.isHidden = this.args.isHidden ?? false;
+ }
+
+ get job() {
+ return get(this.args.deployment, 'job');
+ }
+
+ get deploymentVersion() {
+ return get(this.args.deployment, 'versionNumber');
+ }
+
+ get jobAllocations() {
+ return this.job?.get?.('allocations') || [];
+ }
+
+ get deploymentAllocations() {
+ return (
+ this.args.allocations ||
+ this.jobAllocations.filter(
+ (alloc) => alloc.jobVersion === this.deploymentVersion,
+ )
+ );
+ }
+
+ get history() {
+ try {
+ return this.deploymentAllocations
+ .map((allocation) => {
+ const states =
+ allocation?.get?.('states') || allocation?.states || [];
+ const stateList = states?.toArray?.() || states || [];
+
+ return stateList
+ .map((state) => state?.events?.toArray?.() || state?.events || [])
+ .flat();
+ })
+ .flat()
+ .filter(Boolean)
+ .filter((taskEvent) => this.containsSearchTerm(taskEvent))
+ .sort((left, right) => {
+ const leftTime = left?.time?.valueOf?.() || left?.get?.('time') || 0;
+ const rightTime =
+ right?.time?.valueOf?.() || right?.get?.('time') || 0;
+ return leftTime - rightTime;
+ })
+ .reverse()
+ .slice(0, MAX_NUMBER_OF_EVENTS);
+ } catch (error) {
+ this.triggerError(error);
+ return [];
+ }
+ }
+
+ triggerError(error) {
+ // eslint-disable-next-line ember/no-incorrect-calls-with-inline-anonymous-functions
+ scheduleOnce('actions', this, () => {
+ if (this.errorState === error) {
+ return;
+ }
+
+ this.errorState = error;
+ this.notifications.add({
+ title: 'Could not fetch deployment history',
+ message: error?.message || String(error),
+ color: 'critical',
+ });
+ });
+ }
+
+ containsSearchTerm(taskEvent) {
+ if (!taskEvent) {
+ return false;
+ }
+
+ const lowerSearchTerm = this.searchTerm.toLowerCase();
+ const message = (taskEvent.message || '').toLowerCase();
+ const type = (taskEvent.type || '').toLowerCase();
+ const allocationShortId =
+ taskEvent.state?.allocation?.shortId?.toLowerCase?.() || '';
+
+ return (
+ message.includes(lowerSearchTerm) ||
+ type.includes(lowerSearchTerm) ||
+ allocationShortId.includes(lowerSearchTerm)
+ );
+ }
+
+ toggleHidden = () => {
+ this.isHidden = !this.isHidden;
+ };
+
+ setSearchTerm = (searchTerm) => {
+ this.searchTerm = searchTerm;
+ };
+
+
+
- {{#each-in @allocBlocks as |status allocsByStatus|}}
- {{#each-in allocsByStatus as |health allocsByHealth|}}
- {{#each-in allocsByHealth as |canary allocsByCanary|}}
- {{#if (gt allocsByCanary.length 0)}}
-
- {{else}}
-
- {{#each-in @allocBlocks as |status allocsByStatus|}}
- {{#each-in allocsByStatus as |health allocsByHealth|}}
- {{#each-in allocsByHealth as |canary allocsByCanary|}}
- {{#if (gt allocsByCanary.length 0)}}
- {{#each (range 0 allocsByCanary.length) as |i|}}
-
- {{/if}}
- {{#if @compact}}
- {{#if (eq @allocationTallyMode "complete")}}
- {{@completeAllocs}}/{{@groupCountSum}}
- {{else}}
- {{@runningAllocs}}/{{@groupCountSum}}
- {{/if}}
- {{/if}}
-
+
+
+ {{#unless this.isHidden}}
+
+
+}
diff --git a/ui/app/components/job-status/deployment-history.hbs b/ui/app/components/job-status/deployment-history.hbs
deleted file mode 100644
index 854c7e0c45f..00000000000
--- a/ui/app/components/job-status/deployment-history.hbs
+++ /dev/null
@@ -1,85 +0,0 @@
-{{!
- Copyright IBM Corp. 2015, 2025
- SPDX-License-Identifier: BUSL-1.1
-~}}
-
-+ +
+ {{#unless this.isHidden}} +
+
+ {{/unless}}
+ -
+ {{#each this.history as |deploymentLog|}}
+
-
+ ++
{{deploymentLog.state.allocation.shortId}} + {{deploymentLog.type}}: + {{deploymentLog.message}} + + {{formatTs deploymentLog.time}} + +
+ {{else}}
+ {{#if this.errorState}}
+ -
+ + Error loading deployment history ++
+ {{else if this.deploymentAllocations.length}}
+ {{#if this.searchTerm}}
+
-
+ + No events match {{this.searchTerm}} ++
+ {{else}}
+
-
+ + No deployment events yet ++
+ {{/if}}
+ {{else}}
+
-
+ + Loading deployment events ++
+ {{/if}}
+ {{/each}}
+
-
-
- {{#unless this.isHidden}}
-
\ No newline at end of file
diff --git a/ui/app/components/job-status/deployment-history.js b/ui/app/components/job-status/deployment-history.js
deleted file mode 100644
index bf70ea1a4cf..00000000000
--- a/ui/app/components/job-status/deployment-history.js
+++ /dev/null
@@ -1,134 +0,0 @@
-/**
- * Copyright IBM Corp. 2015, 2025
- * SPDX-License-Identifier: BUSL-1.1
- */
-
-import Component from '@glimmer/component';
-import { alias } from '@ember/object/computed';
-import { tracked } from '@glimmer/tracking';
-import { service } from '@ember/service';
-import { action } from '@ember/object';
-import { scheduleOnce } from '@ember/runloop';
-
-const MAX_NUMBER_OF_EVENTS = 500;
-
-export default class JobStatusDeploymentHistoryComponent extends Component {
- @service notifications;
-
- // eslint-disable-next-line ember/no-tracked-properties-from-args
- @tracked isHidden = this.args.isHidden;
-
- /**
- * @type { Error }
- */
- @tracked errorState = null;
-
- /**
- * @type { import('../../models/job').default }
- */
- @alias('args.deployment.job') job;
-
- /**
- * @type { number }
- */
- @alias('args.deployment.versionNumber') deploymentVersion;
-
- /**
- * Get all allocations for the job
- * @type { import('../../models/allocation').default[] }
- */
- get jobAllocations() {
- return this.job.get('allocations');
- }
-
- /**
- * Filter the job's allocations to only those that are part of the deployment
- * @type { import('../../models/allocation').default[] }
- */
- get deploymentAllocations() {
- return (
- this.args.allocations ||
- this.jobAllocations.filter(
- (alloc) => alloc.jobVersion === this.deploymentVersion,
- )
- );
- }
-
- /**
- * Map the deployment's allocations to their task events, in reverse-chronological order
- * @type { import('../../models/task-event').default[] }
- */
- get history() {
- try {
- return this.deploymentAllocations
- .map((allocation) => {
- const states =
- allocation?.get?.('states') || allocation?.states || [];
- const stateList = states?.toArray?.() || states || [];
-
- return stateList
- .map((state) => state?.events?.toArray?.() || state?.events || [])
- .flat();
- })
- .flat()
- .filter(Boolean)
- .filter((taskEvent) => this.containsSearchTerm(taskEvent))
- .sort((a, b) => {
- const aTime = a?.time?.valueOf?.() || a?.get?.('time') || 0;
- const bTime = b?.time?.valueOf?.() || b?.get?.('time') || 0;
- return aTime - bTime;
- })
- .reverse()
- .slice(0, MAX_NUMBER_OF_EVENTS);
- } catch (e) {
- this.triggerError(e);
- return [];
- }
- }
-
- @action triggerError(error) {
- // eslint-disable-next-line ember/no-incorrect-calls-with-inline-anonymous-functions
- scheduleOnce('actions', this, () => {
- if (this.errorState === error) {
- return;
- }
-
- this.errorState = error;
- this.notifications.add({
- title: 'Could not fetch deployment history',
- message: error?.message || String(error),
- color: 'critical',
- });
- });
- }
-
- // #region search
-
- /**
- * @type { string }
- */
- @tracked searchTerm = '';
-
- /**
- * @param { import('../../models/task-event').default } taskEvent
- * @returns { boolean }
- */
- containsSearchTerm(taskEvent) {
- if (!taskEvent) {
- return false;
- }
-
- const message = (taskEvent.message || '').toLowerCase();
- const type = (taskEvent.type || '').toLowerCase();
- const allocationShortId =
- taskEvent.state?.allocation?.shortId?.toLowerCase?.() || '';
-
- return (
- message.includes(this.searchTerm.toLowerCase()) ||
- type.includes(this.searchTerm.toLowerCase()) ||
- allocationShortId.includes(this.searchTerm.toLowerCase())
- );
- }
-
- // #endregion search
-}
diff --git a/ui/app/components/job-status/failed-or-lost.gjs b/ui/app/components/job-status/failed-or-lost.gjs
new file mode 100644
index 00000000000..152df601c62
--- /dev/null
+++ b/ui/app/components/job-status/failed-or-lost.gjs
@@ -0,0 +1,72 @@
+/**
+ * Copyright IBM Corp. 2015, 2025
+ * SPDX-License-Identifier: BUSL-1.1
+ */
+
+import Component from '@glimmer/component';
+import { get } from '@ember/object';
+import { concat, hash } from '@ember/helper';
+import {
+ HdsIcon,
+ HdsTooltipButton,
+} from '@hashicorp/design-system-components/components';
+import ConditionalLinkTo from 'nomad-ui/components/conditional-link-to';
+
+export default class JobStatusFailedOrLost extends Component {
+ get latestDeploymentVersion() {
+ return get(this.args.job, 'latestDeployment.versionNumber');
+ }
+
+
+ - -
- {{#unless this.isHidden}} -
-
- {{/unless}}
--
- {{#each this.history as |deployment-log|}}
-
-
- --
{{deployment-log.state.allocation.shortId}} - {{deployment-log.type}}: - {{deployment-log.message}} - - {{format-ts deployment-log.time}} - -
- {{else}}
- {{#if this.errorState}}
- -
- - Error loading deployment history --
- {{else}}
- {{#if this.deploymentAllocations.length}}
- {{#if this.searchTerm}}
-
-
- - No events match {{this.searchTerm}} --
- {{else}}
-
-
- - No deployment events yet --
- {{/if}}
- {{else}}
-
-
- - Loading deployment events --
- {{/if}}
- {{/if}}
- {{/each}}
-
Replaced Allocations
+
+ {{#if @supportsRescheduling}}
+
+
+
+
+ {{@rescheduledAllocs.length}}
+ Rescheduled
+
+
+ {{/if}}
+
+
+
+
+
+ {{@restartedAllocs.length}}
+ Restarted
+
+
+
+ Replaced Allocations
-
- {{#if @supportsRescheduling}}
-
-
-
-
- {{@rescheduledAllocs.length}}
- Rescheduled
-
-
- {{/if}}
-
-
-
-
-
- {{@restartedAllocs.length}}
- Restarted
-
-
-
-
+ Latest Deployment
+
+ {{this.healthyAllocs}}/{{this.desiredTotal}} Healthy
+
- Latest Deployment
-
- {{this.healthyAllocs}}/{{this.desiredTotal}} Healthy
-
+
+
+}
diff --git a/ui/app/components/job-status/panel/deploying.hbs b/ui/app/components/job-status/panel/deploying.hbs
deleted file mode 100644
index 121468be8fa..00000000000
--- a/ui/app/components/job-status/panel/deploying.hbs
+++ /dev/null
@@ -1,281 +0,0 @@
-{{!
- Copyright IBM Corp. 2015, 2025
- SPDX-License-Identifier: BUSL-1.1
-~}}
-
-
+
+
+ Status:
+
+
+ Status:
+
+
+ {{#if @job.latestDeployment.isRunning}}
+ {{#if (can "fail deployment" namespace=@job.namespace)}}
+
+
+ {{#if @job.latestDeployment.requiresPromotion}}
+
+
+ {{#if this.canariesHealthy}}
+
+ Deployment requires promotion
+ Your deployment requires manual promotion — all
+ canary allocations have passed their health checks.
+ {{#if (can "promote deployment" namespace=@job.namespace)}}
+
+ {{else if this.someCanariesHaveFailed}}
+
+ Some Canaries have failed
+ Your canary allocations have failed their health
+ checks. Please have a look at the error logs and task events
+ for the allocations in question.
+
+ {{else}}
+
+ Checking Canary health
+ {{#if this.deploymentIsAutoPromoted}}
+ Your canary allocations are being placed and
+ health-checked. If they pass, they will be automatically
+ promoted and your deployment will continue.
+ {{else}}
+ Your job requires manual promotion, and your
+ canary allocations are being placed and health-checked.
+ {{/if}}
+
+ {{/if}}
+
+ {{/if}}
+
+
+ {{#if this.oldVersionAllocBlockIDs.length}}
+
+
+ Previous allocations:
+ {{#if
+ this.oldVersionAllocBlocks.running
+ }}{{this.oldRunningHealthyAllocBlocks.length}} running{{/if}}
+
+
+
+ New
+ allocations:
+ {{this.newRunningHealthyAllocBlocks.length}}/{{this.totalAllocs}}
+ running and healthy
+
+
+
+
+
+
+ Previous allocations:
+ {{#if
+ this.oldVersionAllocBlocks.running
+ }}{{this.oldRunningHealthyAllocBlocks.length}} running{{/if}}
+
+
+
+
+ {{#each this.oldVersions as |versionObj|}}
+ -
+
+ {{#if (eq versionObj.version "unknown")}}
+
+
+ {{/each}}
+
+
+
+ -
+ {{#each this.oldVersions as |versionObj|}}
+
-
+
+ {{#if (eq versionObj.version "unknown")}} + ++ {{else}} + + {{/if}} + +
+ {{/each}}
+
+
+
+
+
+
+ {{/if}}
+
+ New
+ allocations:
+ {{this.newRunningHealthyAllocBlocks.length}}/{{this.totalAllocs}}
+ running and healthy
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
-
\ No newline at end of file
diff --git a/ui/app/components/job-status/panel/deploying.js b/ui/app/components/job-status/panel/deploying.js
deleted file mode 100644
index a4584609a0e..00000000000
--- a/ui/app/components/job-status/panel/deploying.js
+++ /dev/null
@@ -1,315 +0,0 @@
-/**
- * Copyright IBM Corp. 2015, 2025
- * SPDX-License-Identifier: BUSL-1.1
- */
-
-import Component from '@glimmer/component';
-import { action } from '@ember/object';
-import { task } from 'ember-concurrency';
-import { tracked } from '@glimmer/tracking';
-import { alias } from '@ember/object/computed';
-import messageFromAdapterError from 'nomad-ui/utils/message-from-adapter-error';
-import { jobAllocStatuses } from '../../../utils/allocation-client-statuses';
-
-export default class JobStatusPanelDeployingComponent extends Component {
- @alias('args.job') job;
- @alias('args.handleError') handleError = () => {};
-
- get allocTypes() {
- return jobAllocStatuses[this.args.job.type].map((type) => {
- return {
- label: type,
- };
- });
- }
-
- get allocations() {
- const relationship = this.job?.hasMany?.('allocations');
- const ids = relationship?.ids?.() || [];
- const store = this.job?.store;
-
- if (!store || !ids.length) {
- return [];
- }
-
- return ids.map((id) => store.peekRecord('allocation', id)).filter(Boolean);
- }
-
- @tracked oldVersionAllocBlockIDs = [];
-
- // Called via did-insert; sets a static array of "outgoing"
- // allocations we can track throughout a deployment
- @action
- establishOldAllocBlockIDs() {
- this.oldVersionAllocBlockIDs = this.allocations.filter(
- (a) => a.clientStatus === 'running' && a.isOld,
- );
- }
-
- /**
- * Promotion of a deployment will error if the canary allocations are not of status "Healthy";
- * this function will check for that and disable the promote button if necessary.
- * @returns {boolean}
- */
- get canariesHealthy() {
- const relevantAllocs = this.allocations.filter(
- (a) => !a.isOld && a.isCanary && !a.hasBeenRescheduled,
- );
- return (
- relevantAllocs.length &&
- relevantAllocs.every((a) => a.clientStatus === 'running' && a.isHealthy)
- );
- }
-
- get someCanariesHaveFailed() {
- const relevantAllocs = this.allocations.filter(
- (a) => !a.isOld && a.isCanary && !a.hasBeenRescheduled,
- );
- return relevantAllocs.some(
- (a) =>
- a.clientStatus === 'failed' ||
- a.clientStatus === 'lost' ||
- a.isUnhealthy,
- );
- }
-
- @task(function* () {
- try {
- yield this.job.latestDeployment.content.promote();
- } catch (err) {
- this.handleError({
- title: 'Could Not Promote Deployment',
- description: messageFromAdapterError(err, 'promote deployments'),
- });
- }
- })
- promote;
-
- @task(function* () {
- try {
- yield this.job.latestDeployment.content.fail();
- } catch (err) {
- this.handleError({
- title: 'Could Not Fail Deployment',
- description: messageFromAdapterError(err, 'fail deployments'),
- });
- }
- })
- fail;
-
- @alias('job.latestDeployment') deployment;
- @alias('totalAllocs') desiredTotal;
-
- get oldVersionAllocBlocks() {
- return this.allocations
- .filter((allocation) => this.oldVersionAllocBlockIDs.includes(allocation))
- .reduce((alloGroups, currentAlloc) => {
- const status = currentAlloc.clientStatus;
-
- if (!alloGroups[status]) {
- alloGroups[status] = {
- healthy: { nonCanary: [] },
- unhealthy: { nonCanary: [] },
- health_unknown: { nonCanary: [] },
- };
- }
- alloGroups[status].healthy.nonCanary.push(currentAlloc);
-
- return alloGroups;
- }, {});
- }
-
- get newVersionAllocBlocks() {
- let availableSlotsToFill = this.desiredTotal;
- let allocationsOfDeploymentVersion = this.allocations.filter(
- (a) => !a.isOld,
- );
-
- let allocationCategories = this.allocTypes.reduce((categories, type) => {
- categories[type.label] = {
- healthy: { canary: [], nonCanary: [] },
- unhealthy: { canary: [], nonCanary: [] },
- health_unknown: { canary: [], nonCanary: [] },
- };
- return categories;
- }, {});
-
- for (let alloc of allocationsOfDeploymentVersion) {
- if (availableSlotsToFill <= 0) {
- break;
- }
- let status = alloc.clientStatus;
- let canary = alloc.isCanary ? 'canary' : 'nonCanary';
-
- // Health status only matters in the context of a "running" allocation.
- // However, healthy/unhealthy is never purged when an allocation moves to a different clientStatus
- // Thus, we should only show something as "healthy" in the event that it is running.
- // Otherwise, we'd have arbitrary groupings based on previous health status.
- let health =
- status === 'running'
- ? alloc.isHealthy
- ? 'healthy'
- : alloc.isUnhealthy
- ? 'unhealthy'
- : 'health_unknown'
- : 'health_unknown';
-
- if (allocationCategories[status]) {
- // If status is failed or lost, we only want to show it IF it's used up its restarts/rescheds.
- // Otherwise, we'd be showing an alloc that had been replaced.
- if (alloc.willNotRestart) {
- if (!alloc.willNotReschedule) {
- // Dont count it
- continue;
- }
- }
- allocationCategories[status][health][canary].push(alloc);
- availableSlotsToFill--;
- }
- }
-
- // Fill unplaced slots if availableSlotsToFill > 0
- if (availableSlotsToFill > 0) {
- allocationCategories['unplaced'] = {
- healthy: { canary: [], nonCanary: [] },
- unhealthy: { canary: [], nonCanary: [] },
- health_unknown: { canary: [], nonCanary: [] },
- };
- allocationCategories['unplaced']['healthy']['nonCanary'] = Array(
- availableSlotsToFill,
- )
- .fill()
- .map(() => {
- return { clientStatus: 'unplaced' };
- });
- }
-
- return allocationCategories;
- }
-
- get newRunningHealthyAllocBlocks() {
- return [
- ...this.newVersionAllocBlocks['running']['healthy']['canary'],
- ...this.newVersionAllocBlocks['running']['healthy']['nonCanary'],
- ];
- }
-
- get newRunningUnhealthyAllocBlocks() {
- return [
- ...this.newVersionAllocBlocks['running']['unhealthy']['canary'],
- ...this.newVersionAllocBlocks['running']['unhealthy']['nonCanary'],
- ];
- }
-
- get newRunningHealthUnknownAllocBlocks() {
- return [
- ...this.newVersionAllocBlocks['running']['health_unknown']['canary'],
- ...this.newVersionAllocBlocks['running']['health_unknown']['nonCanary'],
- ];
- }
-
- get rescheduledAllocs() {
- return this.allocations.filter((a) => !a.isOld && a.hasBeenRescheduled);
- }
-
- get restartedAllocs() {
- return this.allocations.filter((a) => !a.isOld && a.hasBeenRestarted);
- }
-
- // #region legend
- get newAllocsByStatus() {
- return Object.entries(this.newVersionAllocBlocks).reduce(
- (counts, [status, healthStatusObj]) => {
- counts[status] = Object.values(healthStatusObj)
- .flatMap((canaryStatusObj) => Object.values(canaryStatusObj))
- .flatMap((canaryStatusArray) => canaryStatusArray).length;
- return counts;
- },
- {},
- );
- }
-
- get newAllocsByCanary() {
- return Object.values(this.newVersionAllocBlocks)
- .flatMap((healthStatusObj) => Object.values(healthStatusObj))
- .flatMap((canaryStatusObj) => Object.entries(canaryStatusObj))
- .reduce((counts, [canaryStatus, items]) => {
- counts[canaryStatus] = (counts[canaryStatus] || 0) + items.length;
- return counts;
- }, {});
- }
-
- get newAllocsByHealth() {
- return {
- healthy: this.newRunningHealthyAllocBlocks.length,
- unhealthy: this.newRunningUnhealthyAllocBlocks.length,
- health_unknown: this.newRunningHealthUnknownAllocBlocks.length,
- };
- }
- // #endregion legend
-
- get oldRunningHealthyAllocBlocks() {
- return this.oldVersionAllocBlocks.running?.healthy?.nonCanary || [];
- }
- get oldCompleteHealthyAllocBlocks() {
- return this.oldVersionAllocBlocks.complete?.healthy?.nonCanary || [];
- }
-
- // TODO: eventually we will want this from a new property on a job.
- // TODO: consolidate w/ the one in steady.js
- get totalAllocs() {
- // v----- Experimental method: Count all allocs. Good for testing but not a realistic representation of "Desired"
- // return this.allocTypes.reduce((sum, type) => sum + this.args.job[type.property], 0);
-
- // v----- Realistic method: Tally a job's task groups' "count" property
- return this.args.job.taskGroups.reduce((sum, tg) => sum + tg.count, 0);
- }
-
- get deploymentIsAutoPromoted() {
- return this.job.latestDeployment?.get('isAutoPromoted');
- }
-
- get oldVersions() {
- const oldVersions = Object.values(this.oldRunningHealthyAllocBlocks)
- .map((a) => (!isNaN(a?.jobVersion) ? a.jobVersion : 'unknown')) // "starting" allocs, GC'd allocs, etc. do not have a jobVersion
- .sort((a, b) => a - b)
- .reduce((result, item) => {
- const existingVersion = result.find((v) => v.version === item);
- if (existingVersion) {
- existingVersion.allocations.push(item);
- } else {
- result.push({ version: item, allocations: [item] });
- }
- return result;
- }, []);
-
- return oldVersions;
- }
-
- get newVersions() {
- // Note: it's probably safe to assume all new allocs have the latest job version, but
- // let's map just in case there's ever a situation with multiple job versions going out
- // in a deployment for some reason
- const newVersions = Object.values(this.newVersionAllocBlocks)
- .flatMap((allocType) => Object.values(allocType))
- .flatMap((allocHealth) => Object.values(allocHealth))
- .flatMap((allocCanary) => Object.values(allocCanary))
- .filter((a) => a.jobVersion && a.jobVersion !== 'unknown')
- .map((a) => a.jobVersion)
- .sort((a, b) => a - b)
- .reduce((result, item) => {
- const existingVersion = result.find((v) => v.version === item);
- if (existingVersion) {
- existingVersion.allocations.push(item);
- } else {
- result.push({ version: item, allocations: [item] });
- }
- return result;
- }, []);
- return newVersions;
- }
-
- get versions() {
- return [...this.oldVersions, ...this.newVersions];
- }
-}
diff --git a/ui/app/components/job-status/panel/steady.gjs b/ui/app/components/job-status/panel/steady.gjs
new file mode 100644
index 00000000000..174bcef1147
--- /dev/null
+++ b/ui/app/components/job-status/panel/steady.gjs
@@ -0,0 +1,432 @@
+/**
+ * Copyright IBM Corp. 2015, 2025
+ * SPDX-License-Identifier: BUSL-1.1
+ */
+
+import Component from '@glimmer/component';
+import { LinkTo } from '@ember/routing';
+import { HdsBadge } from '@hashicorp/design-system-components/components';
+import { and, eq, notEq } from 'ember-truth-helpers';
+import JobPagePartsSummaryChart from 'nomad-ui/components/job-page/parts/summary-chart';
+import ConditionalLinkTo from 'nomad-ui/components/conditional-link-to';
+import JobStatusAllocationStatusRow from 'nomad-ui/components/job-status/allocation-status-row';
+import JobStatusDeploymentHistory from 'nomad-ui/components/job-status/deployment-history';
+import JobStatusFailedOrLost from 'nomad-ui/components/job-status/failed-or-lost';
+import JobStatusLatestDeployment from 'nomad-ui/components/job-status/latest-deployment';
+import { jobAllocStatuses } from 'nomad-ui/utils/allocation-client-statuses';
+import { on } from '@ember/modifier';
+
+export default class JobStatusPanelSteady extends Component {
+ get allocations() {
+ const relationship = this.args.job?.hasMany?.('allocations');
+ const ids = relationship?.ids?.() || [];
+ const store = this.args.job?.store;
+
+ if (!store || !ids.length) {
+ return [];
+ }
+
+ return ids.map((id) => store.peekRecord('allocation', id)).filter(Boolean);
+ }
+
+ get allocTypes() {
+ return this.args.job.allocTypes;
+ }
+
+ get allocBlocks() {
+ let availableSlotsToFill = this.totalAllocs;
+
+ const allocationsOfShowableType = this.allocTypes.reduce(
+ (accumulator, type) => {
+ accumulator[type.label] = { healthy: { nonCanary: [] } };
+ return accumulator;
+ },
+ {},
+ );
+
+ for (const alloc of this.allocations.filter(
+ (allocation) =>
+ allocation.clientStatus === 'running' ||
+ allocation.clientStatus === 'pending',
+ )) {
+ if (availableSlotsToFill === 0) {
+ break;
+ }
+
+ const status = alloc.clientStatus;
+ allocationsOfShowableType[status].healthy.nonCanary.push(alloc);
+ availableSlotsToFill--;
+ }
+
+ const sortedAllocs = this.allocations
+ .filter(
+ (allocation) =>
+ allocation.clientStatus !== 'running' &&
+ allocation.clientStatus !== 'pending',
+ )
+ .sort((left, right) => {
+ if (left.jobVersion > right.jobVersion) return 1;
+ if (left.jobVersion < right.jobVersion) return -1;
+
+ if (left.jobVersion === right.jobVersion) {
+ return (
+ jobAllocStatuses[this.args.job.type].indexOf(right.clientStatus) -
+ jobAllocStatuses[this.args.job.type].indexOf(left.clientStatus)
+ );
+ }
+
+ return 0;
+ })
+ .reverse();
+
+ for (const alloc of sortedAllocs) {
+ if (availableSlotsToFill === 0) {
+ break;
+ }
+
+ const status = alloc.clientStatus;
+ if (
+ this.allocTypes.map(({ label }) => label).includes(status) &&
+ allocationsOfShowableType[status].healthy.nonCanary.length <
+ this.totalAllocs
+ ) {
+ allocationsOfShowableType[status].healthy.nonCanary.push(alloc);
+ availableSlotsToFill--;
+ }
+ }
+
+ if (availableSlotsToFill > 0) {
+ allocationsOfShowableType.unplaced = {
+ healthy: {
+ nonCanary: Array(availableSlotsToFill)
+ .fill()
+ .map(() => ({ clientStatus: 'unplaced' })),
+ },
+ };
+ }
+
+ return allocationsOfShowableType;
+ }
+
+ get nodes() {
+ return this.args.nodes;
+ }
+
+ get totalAllocs() {
+ if (this.args.job.type === 'service' || this.args.job.type === 'batch') {
+ return this.args.job.taskGroups.reduce(
+ (sum, taskGroup) => sum + taskGroup.count,
+ 0,
+ );
+ } else if (this.atMostOneAllocPerNode) {
+ return new Set(
+ this.allocations
+ .map((allocation) => allocation?.nodeID)
+ .filter(Boolean),
+ ).size;
+ }
+
+ return this.args.job.count;
+ }
+
+ get totalNonCompletedAllocs() {
+ return this.totalAllocs - this.completedAllocs.length;
+ }
+
+ get allAllocsComplete() {
+ return this.completedAllocs.length && this.totalNonCompletedAllocs === 0;
+ }
+
+ get atMostOneAllocPerNode() {
+ return this.args.job.type === 'system' || this.args.job.type === 'sysbatch';
+ }
+
+ get versions() {
+ return Object.values(this.allocBlocks)
+ .flatMap((allocType) => Object.values(allocType))
+ .flatMap((allocHealth) => Object.values(allocHealth))
+ .flatMap((allocCanary) => Object.values(allocCanary))
+ .map((allocation) =>
+ !isNaN(allocation?.jobVersion) ? allocation.jobVersion : 'unknown',
+ )
+ .sort((left, right) => left - right)
+ .reduce((result, item) => {
+ const existingVersion = result.find(
+ (version) => version.version === item,
+ );
+ if (existingVersion) {
+ existingVersion.allocations.push(item);
+ } else {
+ result.push({
+ version: item,
+ allocations: [item],
+ query: {
+ version: `[${item}]`,
+ status: '["running", "pending", "failed"]',
+ },
+ });
+ }
+ return result;
+ }, []);
+ }
+
+ get versionsQueryString() {
+ return `[${this.versions.map((version) => version.version).join(',')}]`;
+ }
+
+ get rescheduledAllocs() {
+ return this.allocations.filter(
+ (allocation) => !allocation.isOld && allocation.hasBeenRescheduled,
+ );
+ }
+
+ get restartedAllocs() {
+ return this.allocations.filter(
+ (allocation) => !allocation.isOld && allocation.hasBeenRestarted,
+ );
+ }
+
+ get runningAllocs() {
+ return this.allocations.filter(
+ (allocation) => allocation.clientStatus === 'running',
+ );
+ }
+
+ get completedAllocs() {
+ return this.allocations.filter(
+ (allocation) =>
+ !allocation.isOld && allocation.clientStatus === 'complete',
+ );
+ }
+
+ get supportsRescheduling() {
+ return this.args.job.type !== 'system';
+ }
+
+ get latestVersionAllocations() {
+ return this.allocations.filter((allocation) => !allocation.isOld);
+ }
+
+ get currentStatus() {
+ const totalAllocs = this.totalAllocs;
+
+ if (this.args.job.status === 'dead' && this.args.job.stopped) {
+ return { label: 'Stopped', state: 'neutral' };
+ }
+
+ if (this.totalAllocs === 0 && !this.args.job.hasClientStatus) {
+ return { label: 'Scaled Down', state: 'neutral' };
+ }
+
+ if (this.args.job.type === 'batch' || this.args.job.type === 'sysbatch') {
+ const completeAllocs = this.allocBlocks.complete?.healthy?.nonCanary;
+ if (completeAllocs?.length === totalAllocs) {
+ return { label: 'Complete', state: 'success' };
+ }
+
+ const healthyAllocs = this.allocBlocks.running?.healthy?.nonCanary;
+ if (healthyAllocs?.length + completeAllocs?.length === totalAllocs) {
+ return { label: 'Running', state: 'success' };
+ }
+ }
+
+ const healthyAllocs = this.allocBlocks.running?.healthy?.nonCanary;
+ if (healthyAllocs?.length && healthyAllocs?.length === totalAllocs) {
+ return { label: 'Healthy', state: 'success' };
+ }
+
+ const pendingAllocs = this.allocBlocks.pending?.healthy?.nonCanary;
+ if (pendingAllocs?.length > 0) {
+ return { label: 'Recovering', state: 'highlight' };
+ }
+
+ const failedOrLostAllocs = [
+ ...(this.allocBlocks.failed?.healthy?.nonCanary || []),
+ ...(this.allocBlocks.lost?.healthy?.nonCanary || []),
+ ...(this.allocBlocks.unplaced?.healthy?.nonCanary || []),
+ ];
+
+ if (failedOrLostAllocs.length === totalAllocs) {
+ return { label: 'Failed', state: 'critical' };
+ }
+
+ return { label: 'Degraded', state: 'warning' };
+ }
+
+ get legendEntries() {
+ return this.allocTypes.map((type) => {
+ const count =
+ this.allocBlocks[type.label]?.healthy?.nonCanary?.length || 0;
+ return {
+ type: type.label,
+ count,
+ label: this.capitalize(type.label),
+ query: {
+ status: `["${type.label}"]`,
+ version: this.versionsQueryString,
+ },
+ };
+ });
+ }
+
+ get runningSummary() {
+ if (this.allAllocsComplete) {
+ return 'All allocations have completed successfully';
+ }
+
+ const total = this.atMostOneAllocPerNode
+ ? ''
+ : this.args.job.type === 'batch'
+ ? `/${this.totalNonCompletedAllocs}`
+ : `/${this.totalAllocs}`;
+ const remaining = this.args.job.type === 'batch' ? 'Remaining ' : '';
+ const allocationLabel =
+ this.runningAllocs.length === 1 ? 'Allocation' : 'Allocations';
+
+ return `${this.runningAllocs.length}${total} ${remaining}${allocationLabel} Running`;
+ }
+
+ capitalize(value) {
+ if (!value) return '';
+ return `${value.charAt(0).toUpperCase()}${value.slice(1)}`;
+ }
+
+ setCurrentStatusMode = () => {
+ this.args.setStatusMode?.('current');
+ };
+
+ setHistoricalStatusMode = () => {
+ this.args.setStatusMode?.('historical');
+ };
+
+
+
-
-
- Status:
-
-
- Status:
-
-
- {{#if @job.latestDeployment.isRunning}}
- {{#if (can "fail deployment" namespace=@job.namespace)}}
-
-
- {{#if @job.latestDeployment.requiresPromotion}}
-
-
- {{#if this.canariesHealthy}}
-
- Deployment requires promotion
- Your deployment requires manual promotion — all
- canary allocations have passed their health checks.
- {{#if (can "promote deployment" namespace=@job.namespace)}}
-
- {{else}}
- {{#if this.someCanariesHaveFailed}}
-
- Some Canaries have failed
- Your canary allocations have failed their health
- checks. Please have a look at the error logs and task events for
- the allocations in question.
-
- {{else}}
-
- Checking Canary health
- {{#if this.deploymentIsAutoPromoted}}
- Your canary allocations are being placed and
- health-checked. If they pass, they will be automatically
- promoted and your deployment will continue.
- {{else}}
- Your job requires manual promotion, and your
- canary allocations are being placed and health-checked.
- {{/if}}
-
- {{/if}}
- {{/if}}
-
- {{/if}}
-
-
- {{#if this.oldVersionAllocBlockIDs.length}}
-
-
- Previous allocations:
- {{#if
- this.oldVersionAllocBlocks.running
- }}{{this.oldRunningHealthyAllocBlocks.length}} running{{/if}}
-
-
-
- New
- allocations:
- {{this.newRunningHealthyAllocBlocks.length}}/{{this.totalAllocs}}
- running and healthy
-
-
-
-
-
-
- Previous allocations:
- {{#if
- this.oldVersionAllocBlocks.running
- }}{{this.oldRunningHealthyAllocBlocks.length}} running{{/if}}
-
-
-
-
- {{#each this.oldVersions as |versionObj|}}
- -
-
- {{#if (eq versionObj.version "unknown")}}
-
-
- {{/each}}
-
-
-
- -
- {{#each this.oldVersions as |versionObj|}}
-
-
-
- {{#if (eq versionObj.version "unknown")}} - -
- {{/each}}
-
-
-
-
-
-
- {{/if}}
-
- New
- allocations:
- {{this.newRunningHealthyAllocBlocks.length}}/{{this.totalAllocs}}
- running and healthy
-
-
-
-
-
-
-
-
-
- {{! Legend by Status, then by Health, then by Canary }}
-
-
-
-
-
-
-
-
+
+
+}
diff --git a/ui/app/components/job-status/panel/steady.hbs b/ui/app/components/job-status/panel/steady.hbs
deleted file mode 100644
index 7aee98a8b37..00000000000
--- a/ui/app/components/job-status/panel/steady.hbs
+++ /dev/null
@@ -1,183 +0,0 @@
-{{!
- Copyright IBM Corp. 2015, 2025
- SPDX-License-Identifier: BUSL-1.1
-~}}
-
-
+ Status:
+
+
+
+ Status:
+
+
+
+
+
+
+
+ {{#if (eq @statusMode "historical")}}
+
+ {{this.runningSummary}}
+
+
+
+
+
+
+ {{#if @job.latestDeployment}}
+
+
+ Versions
+-
+ {{#each this.versions as |versionObj|}}
+
-
+
+ {{#if (eq versionObj.version "unknown")}} + ++ {{else}} + + {{/if}} + +
+ {{/each}}
+
+ {{#if this.latestVersionAllocations.length}}
+
+
+ {{/if}}
+
-
\ No newline at end of file
diff --git a/ui/app/components/job-status/panel/steady.js b/ui/app/components/job-status/panel/steady.js
deleted file mode 100644
index d3383dec6ea..00000000000
--- a/ui/app/components/job-status/panel/steady.js
+++ /dev/null
@@ -1,284 +0,0 @@
-/* eslint-disable no-unsafe-optional-chaining */
-/**
- * Copyright IBM Corp. 2015, 2025
- * SPDX-License-Identifier: BUSL-1.1
- */
-
-import Component from '@glimmer/component';
-import { alias } from '@ember/object/computed';
-import { jobAllocStatuses } from '../../../utils/allocation-client-statuses';
-
-export default class JobStatusPanelSteadyComponent extends Component {
- @alias('args.job') job;
-
- get allocations() {
- const relationship = this.job?.hasMany?.('allocations');
- const ids = relationship?.ids?.() || [];
- const store = this.job?.store;
-
- if (!store || !ids.length) {
- return [];
- }
-
- return ids.map((id) => store.peekRecord('allocation', id)).filter(Boolean);
- }
-
- get allocTypes() {
- return this.args.job.allocTypes;
- }
-
- /**
- * @typedef {Object} HealthStatus
- * @property {Array} nonCanary
- * @property {Array} canary
- */
-
- /**
- * @typedef {Object} AllocationStatus
- * @property {HealthStatus} healthy
- * @property {HealthStatus} unhealthy
- * @property {HealthStatus} health unknown
- */
-
- /**
- * @typedef {Object} AllocationBlock
- * @property {AllocationStatus} [running]
- * @property {AllocationStatus} [pending]
- * @property {AllocationStatus} [failed]
- * @property {AllocationStatus} [lost]
- * @property {AllocationStatus} [unplaced]
- * @property {AllocationStatus} [complete]
- */
-
- /**
- * Looks through running/pending allocations with the aim of filling up your desired number of allocations.
- * If any desired remain, it will walk backwards through job versions and other allocation types to build
- * a picture of the job's overall status.
- *
- * @returns {AllocationBlock} An object containing healthy non-canary allocations
- * for each clientStatus.
- */
- get allocBlocks() {
- let availableSlotsToFill = this.totalAllocs;
-
- // Initialize allocationsOfShowableType with empty arrays for each clientStatus
- /**
- * @type {AllocationBlock}
- */
- let allocationsOfShowableType = this.allocTypes.reduce(
- (accumulator, type) => {
- accumulator[type.label] = { healthy: { nonCanary: [] } };
- return accumulator;
- },
- {},
- );
-
- // First accumulate the Running/Pending allocations
- for (const alloc of this.allocations.filter(
- (a) => a.clientStatus === 'running' || a.clientStatus === 'pending',
- )) {
- if (availableSlotsToFill === 0) {
- break;
- }
-
- const status = alloc.clientStatus;
- allocationsOfShowableType[status].healthy.nonCanary.push(alloc);
- availableSlotsToFill--;
- }
-
- // Sort all allocs by jobVersion in descending order
- const sortedAllocs = this.allocations
- .filter(
- (a) => a.clientStatus !== 'running' && a.clientStatus !== 'pending',
- )
- .sort((a, b) => {
- // First sort by jobVersion
- if (a.jobVersion > b.jobVersion) return 1;
- if (a.jobVersion < b.jobVersion) return -1;
-
- // If jobVersion is the same, sort by status order
- if (a.jobVersion === b.jobVersion) {
- return (
- jobAllocStatuses[this.args.job.type].indexOf(b.clientStatus) -
- jobAllocStatuses[this.args.job.type].indexOf(a.clientStatus)
- );
- } else {
- return 0;
- }
- })
- .reverse();
-
- // Iterate over the sorted allocs
- for (const alloc of sortedAllocs) {
- if (availableSlotsToFill === 0) {
- break;
- }
-
- const status = alloc.clientStatus;
- // If the alloc has another clientStatus, add it to the corresponding list
- // as long as we haven't reached the totalAllocs limit for that clientStatus
- if (
- this.allocTypes.map(({ label }) => label).includes(status) &&
- allocationsOfShowableType[status].healthy.nonCanary.length <
- this.totalAllocs
- ) {
- allocationsOfShowableType[status].healthy.nonCanary.push(alloc);
- availableSlotsToFill--;
- }
- }
-
- // Handle unplaced allocs
- if (availableSlotsToFill > 0) {
- allocationsOfShowableType['unplaced'] = {
- healthy: {
- nonCanary: Array(availableSlotsToFill)
- .fill()
- .map(() => {
- return { clientStatus: 'unplaced' };
- }),
- },
- };
- }
-
- return allocationsOfShowableType;
- }
-
- get nodes() {
- return this.args.nodes;
- }
-
- get totalAllocs() {
- if (this.args.job.type === 'service' || this.args.job.type === 'batch') {
- return this.args.job.taskGroups.reduce((sum, tg) => sum + tg.count, 0);
- } else if (this.atMostOneAllocPerNode) {
- return new Set(this.allocations.map((a) => a?.nodeID).filter(Boolean))
- .size;
- } else {
- return this.args.job.count; // TODO: this is probably not the correct totalAllocs count for any type.
- }
- }
-
- get totalNonCompletedAllocs() {
- return this.totalAllocs - this.completedAllocs.length;
- }
-
- get allAllocsComplete() {
- return this.completedAllocs.length && this.totalNonCompletedAllocs === 0;
- }
-
- get atMostOneAllocPerNode() {
- return this.args.job.type === 'system' || this.args.job.type === 'sysbatch';
- }
-
- get versions() {
- const versions = Object.values(this.allocBlocks)
- .flatMap((allocType) => Object.values(allocType))
- .flatMap((allocHealth) => Object.values(allocHealth))
- .flatMap((allocCanary) => Object.values(allocCanary))
- .map((a) => (!isNaN(a?.jobVersion) ? a.jobVersion : 'unknown')) // "starting" allocs, GC'd allocs, etc. do not have a jobVersion
- .sort((a, b) => a - b)
- .reduce((result, item) => {
- const existingVersion = result.find((v) => v.version === item);
- if (existingVersion) {
- existingVersion.allocations.push(item);
- } else {
- result.push({ version: item, allocations: [item] });
- }
- return result;
- }, []);
- return versions;
- }
-
- get rescheduledAllocs() {
- return this.allocations.filter((a) => !a.isOld && a.hasBeenRescheduled);
- }
-
- get restartedAllocs() {
- return this.allocations.filter((a) => !a.isOld && a.hasBeenRestarted);
- }
-
- get runningAllocs() {
- return this.allocations.filter((a) => a.clientStatus === 'running');
- }
-
- get completedAllocs() {
- return this.allocations.filter(
- (a) => !a.isOld && a.clientStatus === 'complete',
- );
- }
-
- get supportsRescheduling() {
- return this.job.type !== 'system';
- }
-
- get latestVersionAllocations() {
- return this.allocations.filter((a) => !a.isOld);
- }
-
- /**
- * @typedef {Object} CurrentStatus
- * @property {"Healthy"|"Failed"|"Degraded"|"Recovering"|"Complete"|"Running"|"Stopped"|"Scaled Down"} label - The current status of the job
- * @property {"highlight"|"success"|"warning"|"critical"|"neutral"} state -
- */
-
- /**
- * A general assessment for how a job is going, in a non-deployment state
- * @returns {CurrentStatus}
- */
- get currentStatus() {
- // If all allocs are running, the job is Healthy
- const totalAllocs = this.totalAllocs;
-
- if (this.job.status === 'dead' && this.job.stopped) {
- return {
- label: 'Stopped',
- state: 'neutral',
- };
- }
-
- if (this.totalAllocs === 0 && !this.job.hasClientStatus) {
- return {
- label: 'Scaled Down',
- state: 'neutral',
- };
- }
-
- if (this.job.type === 'batch' || this.job.type === 'sysbatch') {
- // If all the allocs are complete, the job is Complete
- const completeAllocs = this.allocBlocks.complete?.healthy?.nonCanary;
- if (completeAllocs?.length === totalAllocs) {
- return { label: 'Complete', state: 'success' };
- }
-
- // If any allocations are running the job is "Running"
- const healthyAllocs = this.allocBlocks.running?.healthy?.nonCanary;
- if (healthyAllocs?.length + completeAllocs?.length === totalAllocs) {
- return { label: 'Running', state: 'success' };
- }
- }
-
- const healthyAllocs = this.allocBlocks.running?.healthy?.nonCanary;
- if (healthyAllocs?.length && healthyAllocs?.length === totalAllocs) {
- return { label: 'Healthy', state: 'success' };
- }
-
- // If any allocations are pending the job is "Recovering"
- const pendingAllocs = this.allocBlocks.pending?.healthy?.nonCanary;
- if (pendingAllocs?.length > 0) {
- return { label: 'Recovering', state: 'highlight' };
- }
-
- // If any allocations are failed, lost, or unplaced in a steady state, the job is "Degraded"
- const failedOrLostAllocs = [
- ...this.allocBlocks.failed?.healthy?.nonCanary,
- ...this.allocBlocks.lost?.healthy?.nonCanary,
- ...this.allocBlocks.unplaced?.healthy?.nonCanary,
- ];
-
- if (failedOrLostAllocs.length === totalAllocs) {
- return { label: 'Failed', state: 'critical' };
- } else {
- return { label: 'Degraded', state: 'warning' };
- }
- }
-}
diff --git a/ui/app/components/job-status/update-params.gjs b/ui/app/components/job-status/update-params.gjs
new file mode 100644
index 00000000000..7740db71b38
--- /dev/null
+++ b/ui/app/components/job-status/update-params.gjs
@@ -0,0 +1,99 @@
+/**
+ * Copyright IBM Corp. 2015, 2025
+ * SPDX-License-Identifier: BUSL-1.1
+ */
+
+import Component from '@glimmer/component';
+import { tracked } from '@glimmer/tracking';
+import { service } from '@ember/service';
+import { didInsert } from '@ember/render-modifiers';
+import Trigger from 'nomad-ui/components/trigger';
+import formatDuration from 'nomad-ui/utils/format-duration';
+
+const PARAMS_REQUIRING_CONVERSION = [
+ 'HealthyDeadline',
+ 'MinHealthyTime',
+ 'ProgressDeadline',
+ 'Stagger',
+];
+
+export default class JobStatusUpdateParams extends Component {
+ @service notifications;
+
+ @tracked rawDefinition = null;
+
+ get updateParamGroups() {
+ if (!this.rawDefinition) {
+ return null;
+ }
+
+ return this.rawDefinition.TaskGroups.map((taskGroup) => ({
+ name: taskGroup.Name,
+ update: Object.keys(taskGroup.Update || {}).reduce(
+ (newUpdateObj, key) => {
+ newUpdateObj[key] = PARAMS_REQUIRING_CONVERSION.includes(key)
+ ? formatDuration(taskGroup.Update[key])
+ : taskGroup.Update[key];
+ return newUpdateObj;
+ },
+ {},
+ ),
+ }));
+ }
+
+ onError = ({ Error }) => {
+ const error = Error.errors[0].title || 'Error fetching job parameters';
+ this.notifications.add({
+ title: 'Could not fetch job definition',
+ message: error,
+ color: 'critical',
+ });
+ };
+
+ fetchJobDefinition = async () => {
+ this.rawDefinition = await this.args.job.fetchRawDefinition();
+ };
+
+
+
- Status:
-
-
-
- Status:
-
-
-
-
-
-
-
- {{#if (eq @statusMode "historical")}}
-
-- {{#if this.allAllocsComplete}} - All allocations have completed successfully - {{else}} - - {{this.runningAllocs.length~}} - {{#unless this.atMostOneAllocPerNode~}} - {{#if (eq @job.type "batch")~}} - /{{this.totalNonCompletedAllocs}} - {{else~}} - /{{this.totalAllocs}} - {{/if}} - {{/unless}} - - {{#if (eq @job.type "batch")~}}Remaining{{/if}} - {{pluralize "Allocation" this.runningAllocs.length}} - Running - {{/if}} -
-
-
-
-
-
-
- {{#if @job.latestDeployment}}
-
-
- Versions
--
- {{#each this.versions as |versionObj|}}
-
-
-
- {{#if (eq versionObj.version "unknown")}} - -
- {{/each}}
-
- {{#if this.latestVersionAllocations.length}}
-
-
- {{/if}}
-
+
+ Update Params
+
+
+ {{#if trigger.data.isSuccess}}
+
+ {{#each this.updateParamGroups as |group|}}
+ -
+ Group "{{group.name}}"
+
+ {{#each-in group.update as |key value|}}
+ -
+ {{key}}
+ {{value}}
+
+ {{/each-in}}
+
+
+ {{/each}}
+
+ {{/if}}
+
+ {{#if trigger.data.isBusy}}
+ Loading Parameters
+ {{/if}}
+
+ {{#if trigger.data.isError}}
+ Error loading parameters
+ {{/if}}
+
+
+
-
-Update Params
-
-
- {{#if (and trigger.data.isSuccess (not trigger.data.isError))}}
-
- {{#each this.updateParamGroups as |group|}}
- -
- Group "{{group.name}}"
-
- {{#each-in group.update as |k v|}}
- -
- {{k}}
- {{v}}
-
- {{/each-in}}
-
-
- {{/each}}
-
- {{/if}}
-
- {{#if trigger.data.isBusy}}
- Loading Parameters
- {{/if}}
-
- {{#if trigger.data.isError}}
- Error loading parameters
- {{/if}}
-
-
-
+
+ Version #{{this.version.number}}
+
+ {{#if this.version.job.hasVersionStability}}
+
+ Stable
+
+ {{#if this.isOpen}}
+
+ {{this.version.stable}}
+
+ {{else}}
+
+ {{/if}}
+
+ Submitted
+ {{formatTs
+ this.version.submitTime
+ }}
+
+
+ {{#if this.diff}}
+
+ No Changes
+ {{/if}}
+
+
+ {{/if}}
+
+
-
- Version #{{this.version.number}}
-
- {{#if this.version.job.hasVersionStability}}
-
- Stable
-
- {{#if this.isOpen}}
-
-{{this.version.stable}}
-
- {{else}}
-
- {{/if}}
-
- Submitted
- {{format-ts
- this.version.submitTime
- }}
-
-
- {{#if this.diff}}
-
- No Changes
- {{/if}}
-
-
- {{/if}}
-
- -
+ {{#each this.annotatedVersions key="version.id" as |record|}}
+ {{#if record.meta.showDate}}
+
- + {{formatDate record.version.submitTime}} + + {{/if}} +
-
+
+
+ {{/each}}
+
+
+
+
+}
diff --git a/ui/app/components/json-viewer.hbs b/ui/app/components/json-viewer.hbs
deleted file mode 100644
index ef85e263cb2..00000000000
--- a/ui/app/components/json-viewer.hbs
+++ /dev/null
@@ -1,14 +0,0 @@
-{{!
- Copyright IBM Corp. 2015, 2025
- SPDX-License-Identifier: BUSL-1.1
-~}}
-
-
\ No newline at end of file
diff --git a/ui/app/components/json-viewer.js b/ui/app/components/json-viewer.js
deleted file mode 100644
index 6401040b733..00000000000
--- a/ui/app/components/json-viewer.js
+++ /dev/null
@@ -1,13 +0,0 @@
-/**
- * Copyright IBM Corp. 2015, 2025
- * SPDX-License-Identifier: BUSL-1.1
- */
-
-import Component from '@ember/component';
-import { classNames, classNameBindings } from '@ember-decorators/component';
-import classic from 'ember-classic-decorator';
-
-@classic
-@classNames('json-viewer')
-@classNameBindings('fluidHeight:has-fluid-height')
-export default class JsonViewer extends Component {}
diff --git a/ui/app/components/keyboard-shortcuts-modal.gjs b/ui/app/components/keyboard-shortcuts-modal.gjs
new file mode 100644
index 00000000000..60f060b0423
--- /dev/null
+++ b/ui/app/components/keyboard-shortcuts-modal.gjs
@@ -0,0 +1,211 @@
+/**
+ * Copyright IBM Corp. 2015, 2025
+ * SPDX-License-Identifier: BUSL-1.1
+ */
+
+import Component from '@glimmer/component';
+import { array, fn } from '@ember/helper';
+import { on } from '@ember/modifier';
+import { service } from '@ember/service';
+import { didInsert, willDestroy } from '@ember/render-modifiers';
+import onClickOutside from 'ember-click-outside/modifiers/on-click-outside';
+import { and, not, or } from 'ember-truth-helpers';
+import {
+ HdsFormToggleField,
+ HdsIcon,
+} from '@hashicorp/design-system-components/components';
+import cleanKeycommand from 'nomad-ui/helpers/clean-keycommand';
+import keyboardCommands from 'nomad-ui/helpers/keyboard-commands';
+import autofocus from 'nomad-ui/modifiers/autofocus';
+import Tether from 'tether';
+
+export default class KeyboardShortcutsModal extends Component {
+ @service keyboard;
+ @service config;
+
+ blurHandler = () => {
+ if (this.isDestroying || this.isDestroyed) {
+ return;
+ }
+
+ const keyboard = this.keyboard;
+ if (!keyboard || keyboard.isDestroying || keyboard.isDestroyed) {
+ return;
+ }
+
+ keyboard.displayHints = false;
+ };
+
+ constructor() {
+ super(...arguments);
+ window.addEventListener('blur', this.blurHandler);
+ }
+
+ willDestroy() {
+ super.willDestroy(...arguments);
+ window.removeEventListener('blur', this.blurHandler);
+ }
+
+ escapeCommand = {
+ label: 'Hide Keyboard Shortcuts',
+ pattern: ['Escape'],
+ action: () => {
+ this.keyboard.shortcutsVisible = false;
+ },
+ };
+
+ get commands() {
+ return this.keyboard.keyCommands.reduce((memo, command) => {
+ if (
+ command.label &&
+ command.action &&
+ !memo.find((existing) => existing.label === command.label)
+ ) {
+ memo.push(command);
+ }
+ return memo;
+ }, []);
+ }
+
+ get hints() {
+ if (!this.keyboard.displayHints) {
+ return [];
+ }
+
+ const elementBoundKeyCommands = this.keyboard.keyCommands.filter(
+ (command) => command.element,
+ );
+
+ return elementBoundKeyCommands.map((command) => {
+ const pair = this.keyboard.keyCommands.find(
+ (candidate) =>
+ JSON.stringify(candidate.defaultPattern) ===
+ JSON.stringify(command.pattern),
+ );
+
+ if (!pair) {
+ return command;
+ }
+
+ return {
+ ...command,
+ pattern: pair.pattern,
+ };
+ });
+ }
+
+ tetherToElement = (element, hint, self) => {
+ if (!this.config.isTest) {
+ hint.binder = new Tether({
+ element: self,
+ target: element,
+ attachment: 'top left',
+ targetAttachment: 'top left',
+ targetModifier: 'visible',
+ });
+ }
+ };
+
+ untetherFromElement = (hint) => {
+ if (!this.config.isTest) {
+ hint.binder.destroy();
+ }
+ };
+
+ closeShortcuts = () => {
+ this.keyboard.shortcutsVisible = false;
+ };
+
+ toggleListener = () => {
+ this.keyboard.enabled = !this.keyboard.enabled;
+ };
+
+
+ {{#if this.keyboard.shortcutsVisible}}
+ {{keyboardCommands (array this.escapeCommand)}}
+ Keyboard Shortcuts
+Click a key pattern to re-bind it to a shortcut of your choosing.
+-
+ {{#each this.commands as |command|}}
+
- + {{command.label}} + + {{#if command.recording}} + Recording; ESC to cancel. + {{else}} + {{#if command.custom}} + + {{/if}} + {{/if}} + + + + + {{/each}} +
Keyboard Shortcuts
-Click a key pattern to re-bind it to a shortcut of your choosing.
--
- {{#each this.commands as |command|}}
-
- - {{command.label}} - - {{#if command.recording}} - Recording; ESC to cancel. - {{else}} - {{#if command.custom}} - - {{/if}} - {{/if}} - - - - - {{/each}} -
+
+
+ {{#if @taskState}}
+
+ {{@task.name}}
+
+ {{else}}
+ {{@task.name}}
+ {{/if}}
+
+
+
+
+
+
+}
diff --git a/ui/app/components/lifecycle-chart-row.hbs b/ui/app/components/lifecycle-chart-row.hbs
deleted file mode 100644
index 857201738d9..00000000000
--- a/ui/app/components/lifecycle-chart-row.hbs
+++ /dev/null
@@ -1,39 +0,0 @@
-{{!
- Copyright IBM Corp. 2015, 2025
- SPDX-License-Identifier: BUSL-1.1
-~}}
-
-{{this.lifecycleTitle}}
+ Task
+
-
-
- {{#if this.taskState}}
-
- {{this.task.name}}
-
- {{else}}
- {{this.task.name}}
- {{/if}}
-
-
-
-
-
\ No newline at end of file
diff --git a/ui/app/components/lifecycle-chart-row.js b/ui/app/components/lifecycle-chart-row.js
deleted file mode 100644
index a1534ac7512..00000000000
--- a/ui/app/components/lifecycle-chart-row.js
+++ /dev/null
@@ -1,90 +0,0 @@
-/**
- * Copyright IBM Corp. 2015, 2025
- * SPDX-License-Identifier: BUSL-1.1
- */
-
-import Component from '@ember/component';
-import { computed } from '@ember/object';
-import { tagName } from '@ember-decorators/component';
-import classic from 'ember-classic-decorator';
-
-@classic
-@tagName('')
-export default class LifecycleChartRow extends Component {
- @computed('taskState.{failed,state}')
- get taskColor() {
- let color = 'neutral';
- if (this.taskState?.state === 'running') {
- color = 'success';
- }
- if (this.taskState?.state === 'pending') {
- color = 'neutral';
- }
- if (this.taskState?.state === 'dead') {
- if (this.taskState?.failed) {
- color = 'critical';
- } else {
- color = 'neutral';
- }
- }
- return color;
- }
-
- get taskIcon() {
- let icon;
- if (this.taskState?.state === 'running') {
- icon = 'running';
- }
- if (this.taskState?.state === 'pending') {
- icon = 'test';
- }
- if (this.taskState?.state === 'dead') {
- if (this.taskState?.failed) {
- icon = 'alert-circle';
- } else {
- if (this.taskState?.startedAt) {
- icon = 'check-circle';
- } else {
- icon = 'minus-circle';
- }
- }
- }
-
- return icon;
- }
-
- @computed('taskState.state')
- get activeClass() {
- if (this.taskState && this.taskState.state === 'running') {
- return 'is-active';
- }
-
- return undefined;
- }
-
- @computed('taskState.state')
- get finishedClass() {
- if (this.taskState && this.taskState.state === 'dead') {
- return 'is-finished';
- }
-
- return undefined;
- }
-
- @computed('task.lifecycleName')
- get lifecycleLabel() {
- if (!this.task) {
- return '';
- }
-
- const name = this.task.lifecycleName;
-
- if (name.includes('sidecar')) {
- return 'sidecar';
- } else if (name.includes('ephemeral')) {
- return name.substr(0, name.indexOf('-'));
- } else {
- return name;
- }
- }
-}
diff --git a/ui/app/components/lifecycle-chart.gjs b/ui/app/components/lifecycle-chart.gjs
new file mode 100644
index 00000000000..ce543573727
--- /dev/null
+++ b/ui/app/components/lifecycle-chart.gjs
@@ -0,0 +1,156 @@
+/**
+ * Copyright IBM Corp. 2015, 2025
+ * SPDX-License-Identifier: BUSL-1.1
+ */
+
+import Component from '@glimmer/component';
+import { get } from '@ember/object';
+import { gt } from 'ember-truth-helpers';
+import LifecycleChartRow from 'nomad-ui/components/lifecycle-chart-row';
+
+export default class LifecycleChart extends Component {
+ get lifecyclePhases() {
+ const taskStates = normalizeCollection(this.args.taskStates);
+ const tasks = normalizeCollection(this.args.tasks);
+ const tasksOrStates = taskStates.length ? taskStates : tasks;
+ const lifecycles = {
+ 'prestart-ephemerals': [],
+ 'prestart-sidecars': [],
+ 'poststart-ephemerals': [],
+ 'poststart-sidecars': [],
+ poststops: [],
+ mains: [],
+ };
+
+ tasksOrStates.forEach((taskOrState) => {
+ const task = get(taskOrState, 'task') || taskOrState;
+
+ const lifecycleName = get(task, 'lifecycleName');
+ if (lifecycleName) {
+ lifecycles[`${lifecycleName}s`].push(taskOrState);
+ }
+ });
+
+ const phases = [];
+ const stateActiveIterator = (state) => get(state, 'state') === 'running';
+
+ if (lifecycles.mains.length < tasksOrStates.length) {
+ phases.push({
+ name: 'Prestart',
+ cssClass: 'prestart',
+ isActive: lifecycles['prestart-ephemerals'].some(stateActiveIterator),
+ });
+
+ phases.push({
+ name: 'Main',
+ cssClass: 'main',
+ isActive:
+ lifecycles.mains.some(stateActiveIterator) ||
+ lifecycles['poststart-ephemerals'].some(stateActiveIterator),
+ });
+
+ phases.push({
+ name: 'Poststart',
+ cssClass: 'poststart',
+ });
+
+ phases.push({
+ name: 'Poststop',
+ cssClass: 'poststop',
+ isActive: lifecycles.poststops.some(stateActiveIterator),
+ });
+ }
+
+ return phases;
+ }
+
+ get sortedLifecycleTaskStates() {
+ return normalizeCollection(this.args.taskStates).sort((a, b) => {
+ return getTaskSortPrefix(a.task).localeCompare(getTaskSortPrefix(b.task));
+ });
+ }
+
+ get sortedLifecycleTasks() {
+ return normalizeCollection(this.args.tasks).sort((a, b) => {
+ return getTaskSortPrefix(a).localeCompare(getTaskSortPrefix(b));
+ });
+ }
+
+
+ {{#if (gt this.lifecyclePhases.length 1)}}
+ {{capitalize
- this.lifecycleLabel
- }}
- Task
-
+
+ {{/if}}
+
+}
+
+const lifecycleNameSortPrefix = {
+ 'prestart-ephemeral': 0,
+ 'prestart-sidecar': 1,
+ main: 2,
+ 'poststart-sidecar': 3,
+ 'poststart-ephemeral': 4,
+ poststop: 5,
+};
+
+function getTaskSortPrefix(task) {
+ return `${lifecycleNameSortPrefix[task.lifecycleName]}-${task.name}`;
+}
+
+function normalizeCollection(value) {
+ if (!value) {
+ return [];
+ }
+
+ if (Array.isArray(value)) {
+ return [...value];
+ }
+
+ if (typeof value.toArray === 'function') {
+ return value.toArray();
+ }
+
+ if (typeof value[Symbol.iterator] === 'function') {
+ return Array.from(value);
+ }
+
+ return [];
+}
diff --git a/ui/app/components/lifecycle-chart.hbs b/ui/app/components/lifecycle-chart.hbs
deleted file mode 100644
index 4eba74cfb5b..00000000000
--- a/ui/app/components/lifecycle-chart.hbs
+++ /dev/null
@@ -1,47 +0,0 @@
-{{!
- Copyright IBM Corp. 2015, 2025
- SPDX-License-Identifier: BUSL-1.1
-~}}
-
-{{#if (gt this.lifecyclePhases.length 1)}}
-
+ Task Lifecycle
+ {{if @taskStates "Status" "Configuration"}}
+
+
+
+
+
+ {{#each this.lifecyclePhases as |phase|}}
+
+
+
+
+ {{/each}}
+
+
+ {{phase.name}}
+
+ {{#if @tasks}}
+ {{#each this.sortedLifecycleTasks as |task|}}
+
+
+
-
-{{/if}}
\ No newline at end of file
diff --git a/ui/app/components/lifecycle-chart.js b/ui/app/components/lifecycle-chart.js
deleted file mode 100644
index 5c8407ea545..00000000000
--- a/ui/app/components/lifecycle-chart.js
+++ /dev/null
@@ -1,90 +0,0 @@
-/**
- * Copyright IBM Corp. 2015, 2025
- * SPDX-License-Identifier: BUSL-1.1
- */
-
-import Component from '@ember/component';
-import { computed } from '@ember/object';
-import { sort } from '@ember/object/computed';
-import { tagName } from '@ember-decorators/component';
-import classic from 'ember-classic-decorator';
-
-@classic
-@tagName('')
-export default class LifecycleChart extends Component {
- tasks = null;
- taskStates = null;
-
- @computed('tasks.@each.lifecycle', 'taskStates.@each.state')
- get lifecyclePhases() {
- const tasksOrStates = this.taskStates || this.tasks;
- const lifecycles = {
- 'prestart-ephemerals': [],
- 'prestart-sidecars': [],
- 'poststart-ephemerals': [],
- 'poststart-sidecars': [],
- poststops: [],
- mains: [],
- };
-
- tasksOrStates.forEach((taskOrState) => {
- const task = taskOrState.task || taskOrState;
-
- if (task.lifecycleName) {
- lifecycles[`${task.lifecycleName}s`].push(taskOrState);
- }
- });
-
- const phases = [];
- const stateActiveIterator = (state) => state.state === 'running';
-
- if (lifecycles.mains.length < tasksOrStates.length) {
- phases.push({
- name: 'Prestart',
- isActive: lifecycles['prestart-ephemerals'].some(stateActiveIterator),
- });
-
- phases.push({
- name: 'Main',
- isActive:
- lifecycles.mains.some(stateActiveIterator) ||
- lifecycles['poststart-ephemerals'].some(stateActiveIterator),
- });
-
- // Poststart is rendered as a subphase of main and therefore has no independent active state
- phases.push({
- name: 'Poststart',
- });
-
- phases.push({
- name: 'Poststop',
- isActive: lifecycles.poststops.some(stateActiveIterator),
- });
- }
-
- return phases;
- }
-
- @sort('taskStates', function (a, b) {
- return getTaskSortPrefix(a.task).localeCompare(getTaskSortPrefix(b.task));
- })
- sortedLifecycleTaskStates;
-
- @sort('tasks', function (a, b) {
- return getTaskSortPrefix(a).localeCompare(getTaskSortPrefix(b));
- })
- sortedLifecycleTasks;
-}
-
-const lifecycleNameSortPrefix = {
- 'prestart-ephemeral': 0,
- 'prestart-sidecar': 1,
- main: 2,
- 'poststart-sidecar': 3,
- 'poststart-ephemeral': 4,
- poststop: 5,
-};
-
-function getTaskSortPrefix(task) {
- return `${lifecycleNameSortPrefix[task.lifecycleName]}-${task.name}`;
-}
diff --git a/ui/app/components/line-chart.js b/ui/app/components/line-chart.gjs
similarity index 54%
rename from ui/app/components/line-chart.js
rename to ui/app/components/line-chart.gjs
index 8b0e501b51e..8fc61cc0aeb 100644
--- a/ui/app/components/line-chart.js
+++ b/ui/app/components/line-chart.gjs
@@ -5,7 +5,8 @@
import Component from '@glimmer/component';
import { tracked } from '@glimmer/tracking';
-import { action } from '@ember/object';
+import { hash } from '@ember/helper';
+import { didInsert, didUpdate } from '@ember/render-modifiers';
import { schedule, next } from '@ember/runloop';
import d3 from 'd3-selection';
import d3Scale from 'd3-scale';
@@ -13,26 +14,31 @@ import d3Axis from 'd3-axis';
import d3Array from 'd3-array';
import d3Format from 'd3-format';
import d3TimeFormat from 'd3-time-format';
+import Area from 'nomad-ui/components/chart-primitives/area';
+import HAnnotations from 'nomad-ui/components/chart-primitives/h-annotations';
+import Tooltip from 'nomad-ui/components/chart-primitives/tooltip';
+import VAnnotations from 'nomad-ui/components/chart-primitives/v-annotations';
+import windowResize from 'nomad-ui/modifiers/window-resize';
import styleString from 'nomad-ui/utils/properties/glimmer-style-string';
import uniquely from 'nomad-ui/utils/properties/uniquely';
-// Returns a new array with the specified number of points linearly
-// distributed across the bounds
const lerp = ([low, high], numPoints) => {
const step = (high - low) / (numPoints - 1);
- const arr = [];
- for (var i = 0; i < numPoints; i++) {
- arr.push(low + step * i);
+ const values = [];
+ for (let index = 0; index < numPoints; index++) {
+ values.push(low + step * index);
}
- return arr;
+ return values;
};
-// Round a number or an array of numbers
-const nice = (val) => (val instanceof Array ? val.map(nice) : Math.round(val));
+const nice = (value) =>
+ value instanceof Array ? value.map(nice) : Math.round(value);
const defaultXScale = (data, yAxisOffset, xProp, timeseries) => {
const scale = timeseries ? d3Scale.scaleTime() : d3Scale.scaleLinear();
- const domain = data.length ? d3Array.extent(data, (d) => d[xProp]) : [0, 1];
+ const domain = data.length
+ ? d3Array.extent(data, (datum) => datum[xProp])
+ : [0, 1];
scale.rangeRound([10, yAxisOffset]).domain(domain);
@@ -40,7 +46,7 @@ const defaultXScale = (data, yAxisOffset, xProp, timeseries) => {
};
const defaultYScale = (data, xAxisOffset, yProp) => {
- let max = d3Array.max(data, (d) => d[yProp]) || 1;
+ let max = d3Array.max(data, (datum) => datum[yProp]) || 1;
if (max > 1) {
max = nice(max);
}
@@ -49,22 +55,6 @@ const defaultYScale = (data, xAxisOffset, yProp) => {
};
export default class LineChart extends Component {
- /** Args
- data = null;
- xProp = null;
- yProp = null;
- curve = 'linear';
- title = 'Line Chart';
- description = null;
- timeseries = false;
- activeAnnotation = null;
- onAnnotationClick() {}
- xFormat;
- yFormat;
- xScale;
- yScale;
- */
-
@tracked width = 0;
@tracked height = 0;
@tracked isActive = false;
@@ -77,35 +67,46 @@ export default class LineChart extends Component {
@uniquely('title') titleId;
@uniquely('desc') descriptionId;
+ latestMouseX = 0;
+
get xProp() {
return this.args.xProp || 'time';
}
+
get yProp() {
return this.args.yProp || 'value';
}
+
get data() {
if (!this.args.data) return [];
if (this.args.dataProp) {
- return this.args.data.mapBy(this.args.dataProp).flat();
+ return this.args.data.map((item) => item?.[this.args.dataProp]).flat();
}
return this.args.data;
}
+
get curve() {
return this.args.curve || 'linear';
}
- @action
- xFormat(timeseries) {
+ xFormat = (timeseries) => {
if (this.args.xFormat) return this.args.xFormat;
return timeseries
? d3TimeFormat.timeFormat('%b %d, %H:%M')
: d3Format.format(',');
- }
+ };
- @action
- yFormat() {
+ yFormat = () => {
if (this.args.yFormat) return this.args.yFormat;
return d3Format.format(',.2~r');
+ };
+
+ get title() {
+ return this.args.title || 'Line Chart';
+ }
+
+ get description() {
+ return this.args.description;
}
get activeDatumLabel() {
@@ -113,8 +114,7 @@ export default class LineChart extends Component {
if (!datum) return undefined;
- const x = datum[this.xProp];
- return this.xFormat(this.args.timeseries)(x);
+ return this.xFormat(this.args.timeseries)(datum[this.xProp]);
}
get activeDatumValue() {
@@ -122,8 +122,7 @@ export default class LineChart extends Component {
if (!datum) return undefined;
- const y = datum[this.yProp];
- return this.yFormat()(y);
+ return this.yFormat()(datum[this.yProp]);
}
@styleString
@@ -137,19 +136,33 @@ export default class LineChart extends Component {
}
get xRange() {
- const { xProp, data } = this;
- const range = d3Array.extent(data, (d) => d[xProp]);
const formatter = this.xFormat(this.args.timeseries);
-
- return range.map(formatter);
+ return d3Array
+ .extent(this.data, (datum) => datum[this.xProp])
+ .map(formatter);
}
get yRange() {
- const yProp = this.yProp;
- const range = d3Array.extent(this.data, (d) => d[yProp]);
const formatter = this.yFormat();
+ return d3Array
+ .extent(this.data, (datum) => datum[this.yProp])
+ .map(formatter);
+ }
+
+ get xRangeStart() {
+ return this.xRange[0];
+ }
+
+ get xRangeEnd() {
+ return this.xRange[this.xRange.length - 1];
+ }
- return range.map(formatter);
+ get yRangeStart() {
+ return this.yRange[0];
+ }
+
+ get yRangeEnd() {
+ return this.yRange[this.yRange.length - 1];
}
get yScale() {
@@ -158,35 +171,29 @@ export default class LineChart extends Component {
}
get xAxis() {
- const formatter = this.xFormat(this.args.timeseries);
-
return d3Axis
.axisBottom()
.scale(this.xScale)
.ticks(5)
- .tickFormat(formatter);
+ .tickFormat(this.xFormat(this.args.timeseries));
}
get yTicks() {
- const height = this.xAxisOffset;
- const tickCount = Math.ceil(height / 120) * 2 + 1;
+ const tickCount = Math.ceil(this.xAxisOffset / 120) * 2 + 1;
const domain = this.yScale.domain();
const ticks = lerp(domain, tickCount);
return domain[1] - domain[0] > 1 ? nice(ticks) : ticks;
}
get yAxis() {
- const formatter = this.yFormat();
-
return d3Axis
.axisRight()
.scale(this.yScale)
.tickValues(this.yTicks)
- .tickFormat(formatter);
+ .tickFormat(this.yFormat());
}
get yGridlines() {
- // The first gridline overlaps the x-axis, so remove it
const [, ...ticks] = this.yTicks;
return d3Axis
@@ -198,7 +205,6 @@ export default class LineChart extends Component {
}
get xAxisHeight() {
- // Avoid divide by zero errors by always having a height
if (!this.element) return 1;
const axis = this.element.querySelector('.x-axis');
@@ -206,7 +212,6 @@ export default class LineChart extends Component {
}
get yAxisWidth() {
- // Avoid divide by zero errors by always having a width
if (!this.element) return 1;
const axis = this.element.querySelector('.y-axis');
@@ -227,25 +232,23 @@ export default class LineChart extends Component {
return { left, width: right - left, top, height: bottom - top };
}
- @action
- onInsert(element) {
+ onInsert = (element) => {
this.element = element;
this.updateDimensions();
const canvas = d3.select(this.element.querySelector('.hover-target'));
const updateActiveDatum = this.updateActiveDatum.bind(this);
- const chart = this;
- canvas.on('mouseenter', function (ev) {
- const mouseX = d3.pointer(ev, this)[0];
- chart.latestMouseX = mouseX;
+ canvas.on('mouseenter', (event) => {
+ const mouseX = d3.pointer(event, canvas.node())[0];
+ this.latestMouseX = mouseX;
updateActiveDatum(mouseX);
- schedule('afterRender', chart, () => (chart.isActive = true));
+ schedule('afterRender', this, () => (this.isActive = true));
});
- canvas.on('mousemove', function (ev) {
- const mouseX = d3.pointer(ev, this)[0];
- chart.latestMouseX = mouseX;
+ canvas.on('mousemove', (event) => {
+ const mouseX = d3.pointer(event, canvas.node())[0];
+ this.latestMouseX = mouseX;
updateActiveDatum(mouseX);
});
@@ -254,10 +257,10 @@ export default class LineChart extends Component {
this.activeDatum = null;
this.activeData = [];
});
- }
+ };
updateActiveDatum(mouseX) {
- if (!this.data || !this.data.length) return;
+ if (!this.data?.length) return;
const { xScale, xProp, yScale, yProp } = this;
let { dataProp, data } = this.args;
@@ -267,33 +270,22 @@ export default class LineChart extends Component {
data = [{ data: this.data }];
}
- // Map screen coordinates to data domain
- const bisector = d3Array.bisector((d) => d[xProp]).left;
+ const bisector = d3Array.bisector((datum) => datum[xProp]).left;
const x = xScale.invert(mouseX);
- // Find the closest datum to the cursor for each series
const activeData = data
.map((series, seriesIndex) => {
const dataset = series[dataProp];
-
- // If the dataset is empty, there can't be an activeData.
- // This must be done here instead of preemptively in a filter to
- // preserve the seriesIndex value.
if (!dataset.length) return null;
const index = bisector(dataset, x, 1);
-
- // The data point on either side of the cursor
const dLeft = dataset[index - 1];
const dRight = dataset[index];
let datum;
-
- // If there is only one point, it's the activeDatum
if (dLeft && !dRight) {
datum = dLeft;
} else {
- // Pick the closer point
datum = x - dLeft[xProp] > dRight[xProp] - x ? dRight : dLeft;
}
@@ -307,9 +299,8 @@ export default class LineChart extends Component {
index: data.length - seriesIndex - 1,
};
})
- .compact();
+ .filter(Boolean);
- // Of the selected data, determine which is closest
const closestDatum = activeData
.slice()
.sort(
@@ -318,11 +309,10 @@ export default class LineChart extends Component {
Math.abs(b.datum.datum[xProp] - x),
)[0];
- // If any other selected data are beyond a distance threshold, drop them from the list
- // xScale is used here to measure distance in screen-space rather than data-space.
const dist = Math.abs(xScale(closestDatum.datum.datum[xProp]) - mouseX);
const filteredData = activeData.filter(
- (d) => Math.abs(xScale(d.datum.datum[xProp]) - mouseX) < dist + 10,
+ (entry) =>
+ Math.abs(xScale(entry.datum.datum[xProp]) - mouseX) < dist + 10,
);
this.activeData = filteredData;
@@ -333,41 +323,31 @@ export default class LineChart extends Component {
};
}
- // The renderChart method should only ever be responsible for runtime calculations
- // and appending d3 created elements to the DOM (such as axes).
- renderChart() {
- // There is nothing to do if the element hasn't been inserted yet
+ renderChart = () => {
if (!this.element) return;
- // Create the axes to get the dimensions of the resulting
- // svg elements
this.mountD3Elements();
next(() => {
- // Since each axis depends on the dimension of the other
- // axis, the axes themselves are recomputed and need to
- // be re-rendered.
this.mountD3Elements();
this.ready = true;
if (this.isActive) {
this.updateActiveDatum(this.latestMouseX);
}
});
- }
+ };
- @action
- recomputeXAxis(el) {
+ recomputeXAxis = (element) => {
if (!this.isDestroyed && !this.isDestroying) {
- d3.select(el.querySelector('.x-axis')).call(this.xAxis);
+ d3.select(element.querySelector('.x-axis')).call(this.xAxis);
}
- }
+ };
- @action
- recomputeYAxis(el) {
+ recomputeYAxis = (element) => {
if (!this.isDestroyed && !this.isDestroying) {
- d3.select(el.querySelector('.y-axis')).call(this.yAxis);
+ d3.select(element.querySelector('.y-axis')).call(this.yAxis);
}
- }
+ };
mountD3Elements() {
if (!this.isDestroyed && !this.isDestroying) {
@@ -379,16 +359,116 @@ export default class LineChart extends Component {
}
}
- annotationClick(annotation) {
- this.args.onAnnotationClick && this.args.onAnnotationClick(annotation);
- }
+ annotationClick = (annotation) => {
+ this.args.onAnnotationClick?.(annotation);
+ };
- @action
- updateDimensions() {
- const $svg = this.element.querySelector('svg');
+ updateDimensions = () => {
+ const svg = this.element.querySelector('svg');
- this.height = $svg.clientHeight;
- this.width = $svg.clientWidth;
+ this.height = svg.clientHeight;
+ this.width = svg.clientWidth;
this.renderChart();
- }
+ };
+
+
+
- Task Lifecycle
- {{if this.taskStates "Status" "Configuration"}}
-
-
-
-
-
- {{#each this.lifecyclePhases as |phase|}}
-
-
-
-
- {{/each}}
-
-
- {{phase.name}}
-
- {{#if this.tasks}}
- {{#each this.sortedLifecycleTasks as |task|}}
-
-
-
+
+ {{#if this.ready}}
+ {{yield
+ (hash
+ VAnnotations=(component
+ VAnnotations
+ timeseries=@timeseries
+ format=this.xFormat
+ scale=this.xScale
+ prop=this.xProp
+ height=this.xAxisOffset
+ )
+ HAnnotations=(component
+ HAnnotations
+ format=this.yFormat
+ scale=this.yScale
+ prop=this.yProp
+ left=this.canvasDimensions.left
+ width=this.canvasDimensions.width
+ )
+ Tooltip=(component
+ Tooltip
+ active=this.activeData.length
+ style=this.tooltipStyle
+ data=this.activeData
+ )
+ )
+ to="after"
+ }}
+ {{/if}}
+
+
}
diff --git a/ui/app/components/line-chart.hbs b/ui/app/components/line-chart.hbs
deleted file mode 100644
index ec99dadd79b..00000000000
--- a/ui/app/components/line-chart.hbs
+++ /dev/null
@@ -1,103 +0,0 @@
-{{!
- Copyright IBM Corp. 2015, 2025
- SPDX-License-Identifier: BUSL-1.1
-~}}
-
-
-
- {{#if this.ready}}
- {{yield
- (hash
- VAnnotations=(component
- "chart-primitives/v-annotations"
- timeseries=@timeseries
- format=this.xFormat
- scale=this.xScale
- prop=this.xProp
- height=this.xAxisOffset
- )
- HAnnotations=(component
- "chart-primitives/h-annotations"
- format=this.yFormat
- scale=this.yScale
- prop=this.yProp
- left=this.canvasDimensions.left
- width=this.canvasDimensions.width
- )
- Tooltip=(component
- "chart-primitives/tooltip"
- active=this.activeData.length
- style=this.tooltipStyle
- data=this.activeData
- )
- )
- to="after"
- }}
- {{/if}}
-
\ No newline at end of file
diff --git a/ui/app/components/list-accordion.gjs b/ui/app/components/list-accordion.gjs
new file mode 100644
index 00000000000..c0a645e4803
--- /dev/null
+++ b/ui/app/components/list-accordion.gjs
@@ -0,0 +1,94 @@
+/**
+ * Copyright IBM Corp. 2015, 2025
+ * SPDX-License-Identifier: BUSL-1.1
+ */
+
+import Component from '@glimmer/component';
+import { tracked } from '@glimmer/tracking';
+import { fn, hash } from '@ember/helper';
+import { get } from '@ember/object';
+import ListAccordionAccordionBody from 'nomad-ui/components/list-accordion/accordion-body';
+import ListAccordionAccordionHead from 'nomad-ui/components/list-accordion/accordion-head';
+
+export default class ListAccordion extends Component {
+ @tracked stateCache = [];
+
+ get key() {
+ return this.args.key ?? 'id';
+ }
+
+ get source() {
+ return this.args.source ?? [];
+ }
+
+ get startExpanded() {
+ return this.args.startExpanded ?? false;
+ }
+
+ get decoratedSource() {
+ const stateCache = this.stateCache;
+ const key = this.key;
+ const startExpanded = this.startExpanded;
+
+ return this.source.map((item) => {
+ const itemKey = get(item, key);
+ const cacheItem = stateCache.find(
+ (candidate) => candidate.key === itemKey,
+ );
+
+ return {
+ item,
+ isOpen: cacheItem ? !!cacheItem.isOpen : startExpanded,
+ };
+ });
+ }
+
+ setItemOpenState = (item, isOpen) => {
+ const key = this.key;
+ const itemKey = get(item, key);
+ const nextState = this.stateCache.slice();
+ const existingIndex = nextState.findIndex(
+ (candidate) => candidate.key === itemKey,
+ );
+
+ if (existingIndex === -1) {
+ nextState.push({ key: itemKey, isOpen });
+ } else {
+ nextState[existingIndex] = { key: itemKey, isOpen };
+ }
+
+ this.stateCache = nextState;
+ this.args.onToggle?.(item, isOpen);
+ };
+
+ openItem = (item) => {
+ this.setItemOpenState(item, true);
+ };
+
+ closeItem = (item) => {
+ this.setItemOpenState(item, false);
+ };
+
+
+
+ {{#each this.decoratedSource as |item|}}
+ {{yield
+ (hash
+ head=(component
+ ListAccordionAccordionHead
+ isOpen=item.isOpen
+ onOpen=(fn this.openItem item.item)
+ onClose=(fn this.closeItem item.item)
+ item=item.item
+ )
+ body=(component ListAccordionAccordionBody isOpen=item.isOpen)
+ item=item.item
+ isOpen=item.isOpen
+ onOpen=(fn this.openItem item.item)
+ onClose=(fn this.closeItem item.item)
+ )
+ }}
+ {{/each}}
+
+
+}
diff --git a/ui/app/components/list-accordion.hbs b/ui/app/components/list-accordion.hbs
deleted file mode 100644
index da5b5fb8726..00000000000
--- a/ui/app/components/list-accordion.hbs
+++ /dev/null
@@ -1,30 +0,0 @@
-{{!
- Copyright IBM Corp. 2015, 2025
- SPDX-License-Identifier: BUSL-1.1
-~}}
-
-{{#each this.decoratedSource as |item|}}
- {{yield
- (hash
- head=(component
- "list-accordion/accordion-head"
- isOpen=item.isOpen
- onOpen=(queue
- (fn (mut item.isOpen) true) (fn this.onToggle item.item item.isOpen)
- )
- onClose=(queue
- (fn (mut item.isOpen) false) (fn this.onToggle item.item item.isOpen)
- )
- )
- body=(component "list-accordion/accordion-body" isOpen=item.isOpen)
- item=item.item
- isOpen=item.isOpen
- onOpen=(queue
- (fn (mut item.isOpen) true) (fn this.onToggle item.item item.isOpen)
- )
- onClose=(queue
- (fn (mut item.isOpen) false) (fn this.onToggle item.item item.isOpen)
- )
- )
- }}
-{{/each}}
\ No newline at end of file
diff --git a/ui/app/components/list-accordion.js b/ui/app/components/list-accordion.js
deleted file mode 100644
index 7de97f8cbf8..00000000000
--- a/ui/app/components/list-accordion.js
+++ /dev/null
@@ -1,44 +0,0 @@
-/**
- * Copyright IBM Corp. 2015, 2025
- * SPDX-License-Identifier: BUSL-1.1
- */
-
-import Component from '@ember/component';
-import { computed, get } from '@ember/object';
-import { computed as overridable } from 'ember-overridable-computed';
-import { classNames } from '@ember-decorators/component';
-import classic from 'ember-classic-decorator';
-
-@classic
-@classNames('accordion')
-export default class ListAccordion extends Component {
- key = 'id';
- @overridable(() => []) source;
-
- onToggle /* item, isOpen */() {}
- startExpanded = false;
-
- @computed('key', 'source.[]', 'startExpanded', 'stateCache')
- get decoratedSource() {
- const stateCache = this.stateCache;
- const key = this.key;
- const deepKey = `item.${key}`;
- const startExpanded = this.startExpanded;
-
- const decoratedSource = this.source.map((item) => {
- const cacheItem = stateCache.findBy(deepKey, get(item, key));
- return {
- item,
- isOpen: cacheItem ? !!cacheItem.isOpen : startExpanded,
- };
- });
-
- // eslint-disable-next-line ember/no-side-effects
- this.set('stateCache', decoratedSource);
- return decoratedSource;
- }
-
- // When source updates come in, the state cache is used to preserve
- // open/close state.
- @overridable(() => []) stateCache;
-}
diff --git a/ui/app/components/list-accordion/accordion-body.gjs b/ui/app/components/list-accordion/accordion-body.gjs
new file mode 100644
index 00000000000..4529ffccbf4
--- /dev/null
+++ b/ui/app/components/list-accordion/accordion-body.gjs
@@ -0,0 +1,17 @@
+/**
+ * Copyright IBM Corp. 2015, 2025
+ * SPDX-License-Identifier: BUSL-1.1
+ */
+
+export const ListAccordionAccordionBody =
+ {{#if @isOpen}}
+
+ {{yield}}
+
+ {{/if}}
+;
+
+export default ListAccordionAccordionBody;
diff --git a/ui/app/components/list-accordion/accordion-body.hbs b/ui/app/components/list-accordion/accordion-body.hbs
deleted file mode 100644
index 4ea9a50786f..00000000000
--- a/ui/app/components/list-accordion/accordion-body.hbs
+++ /dev/null
@@ -1,13 +0,0 @@
-{{!
- Copyright IBM Corp. 2015, 2025
- SPDX-License-Identifier: BUSL-1.1
-~}}
-
-{{#if this.isOpen}}
-
- {{yield}}
-
-{{/if}}
\ No newline at end of file
diff --git a/ui/app/components/list-accordion/accordion-body.js b/ui/app/components/list-accordion/accordion-body.js
deleted file mode 100644
index 002e4565da5..00000000000
--- a/ui/app/components/list-accordion/accordion-body.js
+++ /dev/null
@@ -1,14 +0,0 @@
-/**
- * Copyright IBM Corp. 2015, 2025
- * SPDX-License-Identifier: BUSL-1.1
- */
-
-import Component from '@ember/component';
-import { tagName } from '@ember-decorators/component';
-import classic from 'ember-classic-decorator';
-
-@classic
-@tagName('')
-export default class AccordionBody extends Component {
- isOpen = false;
-}
diff --git a/ui/app/components/list-accordion/accordion-head.gjs b/ui/app/components/list-accordion/accordion-head.gjs
new file mode 100644
index 00000000000..11e9fea4cc2
--- /dev/null
+++ b/ui/app/components/list-accordion/accordion-head.gjs
@@ -0,0 +1,33 @@
+/**
+ * Copyright IBM Corp. 2015, 2025
+ * SPDX-License-Identifier: BUSL-1.1
+ */
+
+import { fn } from '@ember/helper';
+import { on } from '@ember/modifier';
+import { or } from 'ember-truth-helpers';
+
+export const ListAccordionAccordionHead =
+
+
+;
+
+export default ListAccordionAccordionHead;
diff --git a/ui/app/components/list-accordion/accordion-head.hbs b/ui/app/components/list-accordion/accordion-head.hbs
deleted file mode 100644
index acf0ab3d09b..00000000000
--- a/ui/app/components/list-accordion/accordion-head.hbs
+++ /dev/null
@@ -1,18 +0,0 @@
-{{!
- Copyright IBM Corp. 2015, 2025
- SPDX-License-Identifier: BUSL-1.1
-~}}
-
-
+ {{yield}}
+
+
+
- {{yield}}
-
-
\ No newline at end of file
diff --git a/ui/app/components/list-accordion/accordion-head.js b/ui/app/components/list-accordion/accordion-head.js
deleted file mode 100644
index b52de76e028..00000000000
--- a/ui/app/components/list-accordion/accordion-head.js
+++ /dev/null
@@ -1,28 +0,0 @@
-/**
- * Copyright IBM Corp. 2015, 2025
- * SPDX-License-Identifier: BUSL-1.1
- */
-
-import Component from '@ember/component';
-import {
- classNames,
- classNameBindings,
- attributeBindings,
-} from '@ember-decorators/component';
-import classic from 'ember-classic-decorator';
-
-@classic
-@classNames('accordion-head')
-@classNameBindings('isOpen::is-light', 'isExpandable::is-inactive')
-@attributeBindings('data-test-accordion-head')
-export default class AccordionHead extends Component {
- 'data-test-accordion-head' = true;
-
- buttonLabel = 'toggle';
- isOpen = false;
- isExpandable = true;
- item = null;
-
- onClose() {}
- onOpen() {}
-}
diff --git a/ui/app/components/list-pagination.gjs b/ui/app/components/list-pagination.gjs
new file mode 100644
index 00000000000..53cd19c2685
--- /dev/null
+++ b/ui/app/components/list-pagination.gjs
@@ -0,0 +1,121 @@
+/**
+ * Copyright IBM Corp. 2015, 2025
+ * SPDX-License-Identifier: BUSL-1.1
+ */
+
+import Component from '@glimmer/component';
+import { hash } from '@ember/helper';
+import ListPager from 'nomad-ui/components/list-pagination/list-pager';
+
+export default class ListPagination extends Component {
+ get source() {
+ return this.args.source ?? [];
+ }
+
+ get size() {
+ return this.args.size ?? 25;
+ }
+
+ get page() {
+ return this.args.page ?? 1;
+ }
+
+ get spread() {
+ return this.args.spread ?? 2;
+ }
+
+ get startsAt() {
+ return (this.page - 1) * this.size + 1;
+ }
+
+ get endsAt() {
+ return Math.min(this.page * this.size, this.source.length);
+ }
+
+ get lastPage() {
+ return Math.ceil(this.source.length / this.size);
+ }
+
+ get pageLinks() {
+ const { spread, page, lastPage } = this;
+
+ // When there is only one page, don't bother with page links
+ if (lastPage === 1) {
+ return [];
+ }
+
+ const lowerBound = Math.max(1, page - spread);
+ const upperBound = Math.min(lastPage, page + spread) + 1;
+
+ return Array(upperBound - lowerBound)
+ .fill(null)
+ .map((_, index) => ({
+ pageNumber: lowerBound + index,
+ }));
+ }
+
+ get list() {
+ const size = this.size;
+ const start = (this.page - 1) * size;
+ return this.source.slice(start, start + size);
+ }
+
+ get firstOrPrevVisible() {
+ return this.page !== 1;
+ }
+
+ get nextOrLastVisible() {
+ return this.page !== this.lastPage;
+ }
+
+ get prevPage() {
+ return this.page - 1;
+ }
+
+ get nextPage() {
+ return this.page + 1;
+ }
+
+
+ {{#if this.source.length}}
+ {{yield
+ (hash
+ first=(component
+ ListPager
+ test="first"
+ label="First page"
+ page=1
+ visible=this.firstOrPrevVisible
+ )
+ prev=(component
+ ListPager
+ test="prev"
+ label="Previous page"
+ page=this.prevPage
+ visible=this.firstOrPrevVisible
+ )
+ next=(component
+ ListPager
+ test="next"
+ label="Next page"
+ page=this.nextPage
+ visible=this.nextOrLastVisible
+ )
+ last=(component
+ ListPager
+ test="last"
+ label="Last page"
+ page=this.lastPage
+ visible=this.nextOrLastVisible
+ )
+ pageLinks=this.pageLinks
+ currentPage=this.page
+ totalPages=this.lastPage
+ startsAt=this.startsAt
+ endsAt=this.endsAt
+ list=this.list
+ )
+ }}
+ {{/if}}
+
+}
diff --git a/ui/app/components/list-pagination.hbs b/ui/app/components/list-pagination.hbs
deleted file mode 100644
index 03a91151d6c..00000000000
--- a/ui/app/components/list-pagination.hbs
+++ /dev/null
@@ -1,45 +0,0 @@
-{{!
- Copyright IBM Corp. 2015, 2025
- SPDX-License-Identifier: BUSL-1.1
-~}}
-
-{{#if this.source.length}}
- {{yield
- (hash
- first=(component
- "list-pagination/list-pager"
- test="first"
- label="First page"
- page=1
- visible=(not-eq this.page 1)
- )
- prev=(component
- "list-pagination/list-pager"
- test="prev"
- label="Previous page"
- page=(dec this.page)
- visible=(not-eq this.page 1)
- )
- next=(component
- "list-pagination/list-pager"
- test="next"
- label="Next page"
- page=(inc this.page)
- visible=(not-eq this.page this.lastPage)
- )
- last=(component
- "list-pagination/list-pager"
- test="last"
- label="Last page"
- page=this.lastPage
- visible=(not-eq this.page this.lastPage)
- )
- pageLinks=this.pageLinks
- currentPage=this.page
- totalPages=this.lastPage
- startsAt=this.startsAt
- endsAt=this.endsAt
- list=this.list
- )
- }}
-{{/if}}
\ No newline at end of file
diff --git a/ui/app/components/list-pagination.js b/ui/app/components/list-pagination.js
deleted file mode 100644
index 3edc66ffb5c..00000000000
--- a/ui/app/components/list-pagination.js
+++ /dev/null
@@ -1,58 +0,0 @@
-/**
- * Copyright IBM Corp. 2015, 2025
- * SPDX-License-Identifier: BUSL-1.1
- */
-
-import Component from '@ember/component';
-import { computed } from '@ember/object';
-import { computed as overridable } from 'ember-overridable-computed';
-import classic from 'ember-classic-decorator';
-
-@classic
-export default class ListPagination extends Component {
- @overridable(() => []) source;
- size = 25;
- page = 1;
- spread = 2;
-
- @computed('size', 'page')
- get startsAt() {
- return (this.page - 1) * this.size + 1;
- }
-
- @computed('source.[]', 'size', 'page')
- get endsAt() {
- return Math.min(this.page * this.size, this.get('source.length'));
- }
-
- @computed('source.[]', 'size')
- get lastPage() {
- return Math.ceil(this.get('source.length') / this.size);
- }
-
- @computed('source.[]', 'page', 'spread')
- get pageLinks() {
- const { spread, page, lastPage } = this;
-
- // When there is only one page, don't bother with page links
- if (lastPage === 1) {
- return [];
- }
-
- const lowerBound = Math.max(1, page - spread);
- const upperBound = Math.min(lastPage, page + spread) + 1;
-
- return Array(upperBound - lowerBound)
- .fill(null)
- .map((_, index) => ({
- pageNumber: lowerBound + index,
- }));
- }
-
- @computed('source.[]', 'page', 'size')
- get list() {
- const size = this.size;
- const start = (this.page - 1) * size;
- return this.source.slice(start, start + size);
- }
-}
diff --git a/ui/app/components/list-pagination/list-pager.gjs b/ui/app/components/list-pagination/list-pager.gjs
new file mode 100644
index 00000000000..674d10364d0
--- /dev/null
+++ b/ui/app/components/list-pagination/list-pager.gjs
@@ -0,0 +1,59 @@
+/**
+ * Copyright IBM Corp. 2015, 2025
+ * SPDX-License-Identifier: BUSL-1.1
+ */
+
+import Component from '@glimmer/component';
+import { hash } from '@ember/helper';
+import { LinkTo } from '@ember/routing';
+import { service } from '@ember/service';
+import KeyboardShortcutModifier from 'nomad-ui/modifiers/keyboard-shortcut';
+
+export default class ListPager extends Component {
+ @service router;
+
+ // Even though we don't currently use "first" / "last" pagination in the app,
+ // the option is there at a component level, so let's make sure that we
+ // only append keyNav to the "next" and "prev" links.
+ // We use this to make the modifier conditional, per https://v5.chriskrycho.com/journal/conditional-modifiers-and-helpers-in-emberjs/
+ get includeKeyboardNav() {
+ return this.args.label === 'Next page' ||
+ this.args.label === 'Previous page'
+ ? KeyboardShortcutModifier
+ : null;
+ }
+
+ get keyboardLabel() {
+ return this.args.label === 'Next page' ? 'Next Page' : 'Previous Page';
+ }
+
+ get keyboardPattern() {
+ return this.args.label === 'Next page' ? [']', ']'] : ['[', '['];
+ }
+
+ gotoRoute = () => {
+ this.router.transitionTo({
+ queryParams: { page: this.args.page },
+ });
+ };
+
+
+ {{#if @visible}}
+
+
+
+}
diff --git a/ui/app/components/loading-spinner.hbs b/ui/app/components/loading-spinner.hbs
deleted file mode 100644
index 7367a377923..00000000000
--- a/ui/app/components/loading-spinner.hbs
+++ /dev/null
@@ -1,21 +0,0 @@
-{{!
- Copyright IBM Corp. 2015, 2025
- SPDX-License-Identifier: BUSL-1.1
-~}}
-
-
+
+
+
+
+
+
+
+
+
+
-
\ No newline at end of file
diff --git a/ui/app/components/loading-spinner.js b/ui/app/components/loading-spinner.js
deleted file mode 100644
index 4b1e5f25572..00000000000
--- a/ui/app/components/loading-spinner.js
+++ /dev/null
@@ -1,17 +0,0 @@
-/**
- * Copyright IBM Corp. 2015, 2025
- * SPDX-License-Identifier: BUSL-1.1
- */
-
-import Component from '@glimmer/component';
-import { tracked } from '@glimmer/tracking';
-import { action } from '@ember/object';
-
-export default class LoadingSpinner extends Component {
- @tracked paused = false;
-
- @action
- togglePaused() {
- this.paused = !this.paused;
- }
-}
diff --git a/ui/app/components/metadata-editor.gjs b/ui/app/components/metadata-editor.gjs
new file mode 100644
index 00000000000..9ff3387135a
--- /dev/null
+++ b/ui/app/components/metadata-editor.gjs
@@ -0,0 +1,79 @@
+/**
+ * Copyright IBM Corp. 2015, 2025
+ * SPDX-License-Identifier: BUSL-1.1
+ */
+
+import { on } from '@ember/modifier';
+import { fn } from '@ember/helper';
+import autofocus from 'nomad-ui/modifiers/autofocus';
+
+const updateKVKey = (kv, event) => {
+ if (kv) kv.key = event.target.value;
+};
+
+const updateKVValue = (kv, event) => {
+ if (!kv) return;
+
+ const value = event.target.value;
+ if (typeof kv.setValue === 'function') {
+ kv.setValue(value);
+ }
+
+ kv.value = value;
+};
+
+const preventSubmit = (event) => {
+ event?.preventDefault?.();
+};
+
+export const MetadataEditor =
+
+;
+
+export default MetadataEditor;
diff --git a/ui/app/components/metadata-editor.hbs b/ui/app/components/metadata-editor.hbs
deleted file mode 100644
index cbffd173c4f..00000000000
--- a/ui/app/components/metadata-editor.hbs
+++ /dev/null
@@ -1,46 +0,0 @@
-{{!
- Copyright IBM Corp. 2015, 2025
- SPDX-License-Identifier: BUSL-1.1
-~}}
-
-
\ No newline at end of file
diff --git a/ui/app/components/metadata-kv.gjs b/ui/app/components/metadata-kv.gjs
new file mode 100644
index 00000000000..e78e7034415
--- /dev/null
+++ b/ui/app/components/metadata-kv.gjs
@@ -0,0 +1,122 @@
+/**
+ * Copyright IBM Corp. 2015, 2025
+ * SPDX-License-Identifier: BUSL-1.1
+ */
+
+import Component from '@glimmer/component';
+import { tracked } from '@glimmer/tracking';
+import { on } from '@ember/modifier';
+import CopyButton from 'nomad-ui/components/copy-button';
+import MetadataEditor from 'nomad-ui/components/metadata-editor';
+import { hash } from '@ember/helper';
+import { not, or } from 'ember-truth-helpers';
+
+export default class MetadataKv extends Component {
+ @tracked editing = false;
+ // eslint-disable-next-line ember/no-tracked-properties-from-args
+ @tracked value = this.args.value;
+
+ get prefixedKey() {
+ return this.args.prefix
+ ? `${this.args.prefix}.${this.args.key}`
+ : this.args.key;
+ }
+
+ onEdit = (event) => {
+ if (event.key === 'Escape') {
+ this.cancelEditing();
+ }
+ };
+
+ setValue = (value) => {
+ this.value = value;
+ };
+
+ startEditing = () => {
+ this.editing = true;
+ };
+
+ cancelEditing = () => {
+ this.editing = false;
+ this.value = this.args.value;
+ };
+
+ saveMetadata = () => {
+ this.args.onKVSave?.({ key: this.prefixedKey, value: this.value });
+ this.editing = false;
+ };
+
+ deleteMetadata = () => {
+ this.args.onKVSave?.({ key: this.prefixedKey, value: null });
+ this.editing = false;
+ };
+
+
+
-
-
-
-
-
-
-
-
-
-
+
+
+
+
+ {{#if this.options}}
+
+
+
+
+}
diff --git a/ui/app/components/multi-select-dropdown.hbs b/ui/app/components/multi-select-dropdown.hbs
deleted file mode 100644
index 793e2b5df67..00000000000
--- a/ui/app/components/multi-select-dropdown.hbs
+++ /dev/null
@@ -1,67 +0,0 @@
-{{!
- Copyright IBM Corp. 2015, 2025
- SPDX-License-Identifier: BUSL-1.1
-~}}
-
-
+ {{@label}}
+ {{#if this.selection.length}}
+
+ {{this.selection.length}}
+
+ {{/if}}
+
+
+ -
+ {{#each this.options key="key" as |option|}}
+
+
+
+ {{/each}}
+ -
+
- + No options + +
- {{this.label}}
- {{#if this.selection.length}}
-
- {{this.selection.length}}
-
- {{/if}}
-
-
- -
- {{#each this.options key="key" as |option|}}
-
-
-
- {{/each}}
- -
-
- - No options - -
+
+
+
+ {{yield}}
+
+
+
+}
diff --git a/ui/app/components/page-layout.hbs b/ui/app/components/page-layout.hbs
deleted file mode 100644
index b42d3f32c2a..00000000000
--- a/ui/app/components/page-layout.hbs
+++ /dev/null
@@ -1,18 +0,0 @@
-{{!
- Copyright IBM Corp. 2015, 2025
- SPDX-License-Identifier: BUSL-1.1
-~}}
-
-
+
+ Per page
+
+
+ {{option}}
+
+
+
+}
diff --git a/ui/app/components/page-size-select.hbs b/ui/app/components/page-size-select.hbs
deleted file mode 100644
index 642e85dccf4..00000000000
--- a/ui/app/components/page-size-select.hbs
+++ /dev/null
@@ -1,27 +0,0 @@
-{{!
- Copyright IBM Corp. 2015, 2025
- SPDX-License-Identifier: BUSL-1.1
-~}}
-
-
-
- Per page
-
-
- {{option}}
-
-
\ No newline at end of file
diff --git a/ui/app/components/page-size-select.js b/ui/app/components/page-size-select.js
deleted file mode 100644
index 6d35c398e64..00000000000
--- a/ui/app/components/page-size-select.js
+++ /dev/null
@@ -1,16 +0,0 @@
-/**
- * Copyright IBM Corp. 2015, 2025
- * SPDX-License-Identifier: BUSL-1.1
- */
-
-import Component from '@ember/component';
-import { service } from '@ember/service';
-
-export default class PageSizeSelect extends Component {
- @service userSettings;
-
- tagName = '';
- pageSizeOptions = [10, 25, 50];
-
- onChange() {}
-}
diff --git a/ui/app/components/placement-failure.gjs b/ui/app/components/placement-failure.gjs
new file mode 100644
index 00000000000..6a3494d8018
--- /dev/null
+++ b/ui/app/components/placement-failure.gjs
@@ -0,0 +1,119 @@
+/**
+ * Copyright IBM Corp. 2015, 2026
+ * SPDX-License-Identifier: BUSL-1.1
+ */
+
+import Component from '@glimmer/component';
+import { HdsBadge } from '@hashicorp/design-system-components/components';
+
+const isZero = (value) => value === 0;
+const plusOne = (value) => value + 1;
+const pluralizedNode = (count) => (count === 1 ? 'node' : 'nodes');
+
+export default class PlacementFailure extends Component {
+ get placementFailures() {
+ return this.args.taskGroup?.placementFailures ?? this.args.failedTGAlloc;
+ }
+
+
+ {{#if this.placementFailures}}
+ {{#let this.placementFailures as |failures|}}
+
+ {{failures.name}}
+
+
+ -
+ {{#if (isZero failures.nodesEvaluated)}}
+
- + No nodes were eligible for evaluation + + {{/if}} + + {{#each-in failures.nodesAvailable as |datacenter available|}} + {{#if (isZero available)}} +
- + No nodes are available in datacenter + {{datacenter}} + + {{/if}} + {{/each-in}} + + {{#each-in failures.classFiltered as |class count|}} +
- + Class + {{class}} + filtered + {{count}} + {{pluralizedNode count}} + + {{/each-in}} + + {{#each-in failures.constraintFiltered as |constraint count|}} +
-
+ Constraint
+
{{constraint}}+ filtered + {{count}} + {{pluralizedNode count}} +
+ {{/each-in}}
+
+ {{#if failures.nodesExhausted}}
+ - + Resources exhausted on + {{failures.nodesExhausted}} + {{pluralizedNode failures.nodesExhausted}} + + {{/if}} + + {{#each-in failures.classExhausted as |class count|}} +
- + Class + {{class}} + exhausted on + {{count}} + {{pluralizedNode count}} + + {{/each-in}} + + {{#each-in failures.dimensionExhausted as |dimension count|}} +
- + Dimension + {{dimension}} + exhausted on + {{count}} + {{pluralizedNode count}} + + {{/each-in}} + + {{#each-in failures.quotaExhausted as |quota dimension|}} +
- + Quota limit hit + {{dimension}} + + {{/each-in}} + + {{#each-in failures.scores as |name score|}} +
- + Score + {{name}} + = + {{score}} + + {{/each-in}} +
- {{this.placementFailures.name}}
-
- -
- {{#if (eq failures.nodesEvaluated 0)}}
-
- No nodes were - eligible for evaluation - {{/if}} - {{#each-in failures.nodesAvailable as |datacenter available|}} - {{#if (eq available 0)}} -
- No - nodes are available in datacenter - {{datacenter}} - {{/if}} - {{/each-in}} - {{#each-in failures.classFiltered as |class count|}} -
- Class - {{class}} - filtered - {{count}} - {{pluralize "node" count}} - {{/each-in}} - {{#each-in failures.constraintFiltered as |constraint count|}} -
- Constraint
-
{{constraint}}- filtered - {{count}} - {{pluralize "node" count}}
- {{/each-in}}
- {{#if failures.nodesExhausted}}
- - Resources exhausted on - {{failures.nodesExhausted}} - {{pluralize "node" failures.nodesExhausted}} - {{/if}} - {{#each-in failures.classExhausted as |class count|}} -
- Class - {{class}} - exhausted on - {{count}} - {{pluralize "node" count}} - {{/each-in}} - {{#each-in failures.dimensionExhausted as |dimension count|}} -
- Dimension - {{dimension}} - exhausted on - {{count}} - {{pluralize "node" count}} - {{/each-in}} - {{#each-in failures.quotaExhausted as |quota dimension|}} -
- Quota limit - hit - {{dimension}} - {{/each-in}} - {{#each-in failures.scores as |name score|}} -
- Score - {{name}} - = - {{score}} - {{/each-in}} -
+
+ {{#let dd.Trigger dd.Content as |Trigger Content|}}
+
+ {{@label}}
+
+
+ {{yield dd}}
+
+ {{/let}}
+
+
+
+}
diff --git a/ui/app/components/popover-menu.hbs b/ui/app/components/popover-menu.hbs
deleted file mode 100644
index a6cd1a30b22..00000000000
--- a/ui/app/components/popover-menu.hbs
+++ /dev/null
@@ -1,31 +0,0 @@
-{{!
- Copyright IBM Corp. 2015, 2025
- SPDX-License-Identifier: BUSL-1.1
-~}}
-
-
+
+
+}
diff --git a/ui/app/components/primary-metric/allocation.hbs b/ui/app/components/primary-metric/allocation.hbs
deleted file mode 100644
index 6c2bc3b14b3..00000000000
--- a/ui/app/components/primary-metric/allocation.hbs
+++ /dev/null
@@ -1,77 +0,0 @@
-{{!
- Copyright IBM Corp. 2015, 2025
- SPDX-License-Identifier: BUSL-1.1
-~}}
-
-+ {{#if (eq this.metric "cpu")}} + CPU + {{else if (eq this.metric "memory")}} + Memory + {{else}} + {{this.metric}} + {{/if}} +
+
+
+ <:svg as |c|>
+ {{#each (reverse this.series) as |series idx|}}
+
+
+ {{series.name}}
+ {{#if (eq this.metric "cpu")}}
+ {{formatScheduledHertz
+ datum.datum.used
+ }}
+ {{else if (eq this.metric "memory")}}
+ {{formatScheduledBytes
+ datum.datum.used
+ }}
+ {{else}}
+ {{datum.formatttedY}}
+ {{/if}}
+
+
+
+
+
+
+ {{#if (eq this.metric "cpu")}}
+ {{formatScheduledHertz this.data.lastObject.used}}
+ /
+ {{formatScheduledHertz this.reservedAmount}}
+ Total
+ {{else if (eq this.metric "memory")}}
+ {{formatScheduledBytes this.data.lastObject.used}}
+ /
+ {{formatScheduledBytes this.reservedAmount start="MiB"}}
+ Total
+ {{else}}
+ {{this.data.lastObject.used}}
+ /
+ {{this.reservedAmount}}
+ Total
+ {{/if}}
+
+
-
\ No newline at end of file
diff --git a/ui/app/components/primary-metric/allocation.js b/ui/app/components/primary-metric/allocation.js
deleted file mode 100644
index 9021e3c4a5f..00000000000
--- a/ui/app/components/primary-metric/allocation.js
+++ /dev/null
@@ -1,90 +0,0 @@
-/**
- * Copyright IBM Corp. 2015, 2025
- * SPDX-License-Identifier: BUSL-1.1
- */
-
-import Component from '@glimmer/component';
-import { task, timeout } from 'ember-concurrency';
-import { assert } from '@ember/debug';
-import { service } from '@ember/service';
-import { action, get, computed } from '@ember/object';
-import { dependentKeyCompat } from '@ember/object/compat';
-import ENV from 'nomad-ui/config/environment';
-
-export default class AllocationPrimaryMetric extends Component {
- @service('stats-trackers-registry') statsTrackersRegistry;
-
- /** Args
- allocation = null;
- metric null; (one of 'cpu' or 'memory'
- */
-
- get metric() {
- assert('metric is a required argument', this.args.metric);
- return this.args.metric;
- }
-
- @dependentKeyCompat
- get allocation() {
- return this.args.allocation;
- }
-
- @computed('allocation')
- get tracker() {
- return this.statsTrackersRegistry.getTracker(this.allocation);
- }
-
- get data() {
- if (!this.tracker) return [];
- return get(this, `tracker.${this.metric}`);
- }
-
- @computed('tracker.tasks.[]', 'metric')
- get series() {
- const ret = this.tracker.tasks
- .map((task) => ({
- name: task.task,
- data: task[this.metric],
- }))
- .reverse();
-
- return ret;
- }
-
- get reservedAmount() {
- if (this.metric === 'cpu') return this.tracker.reservedCPU;
- if (this.metric === 'memory') return this.tracker.reservedMemory;
- return null;
- }
-
- get chartClass() {
- if (this.metric === 'cpu') return 'is-info';
- if (this.metric === 'memory') return 'is-danger';
- return 'is-primary';
- }
-
- get colorScale() {
- if (this.metric === 'cpu') return 'blues';
- if (this.metric === 'memory') return 'reds';
- return 'ordinal';
- }
-
- @task(function* () {
- do {
- this.tracker.poll.perform();
- yield timeout(100);
- } while (ENV.environment !== 'test');
- })
- poller;
-
- @action
- start() {
- if (this.tracker) this.poller.perform();
- }
-
- willDestroy() {
- super.willDestroy(...arguments);
- this.poller.cancelAll();
- this.tracker.signalPause.perform();
- }
-}
diff --git a/ui/app/components/primary-metric/current-value.gjs b/ui/app/components/primary-metric/current-value.gjs
new file mode 100644
index 00000000000..77a0073304d
--- /dev/null
+++ b/ui/app/components/primary-metric/current-value.gjs
@@ -0,0 +1,32 @@
+/**
+ * Copyright IBM Corp. 2015, 2025
+ * SPDX-License-Identifier: BUSL-1.1
+ */
+
+import { or } from 'ember-truth-helpers';
+import formatPercentage from 'nomad-ui/helpers/format-percentage';
+
+export const PrimaryMetricCurrentValue =
+ - {{#if (eq this.metric "cpu")}} - CPU - {{else if (eq this.metric "memory")}} - Memory - {{else}} {{this.metric}} {{/if}} -
-
-
- <:svg as |c|>
- {{#each (reverse this.series) as |series idx|}}
-
-
- {{series.name}}
- {{#if (eq this.metric "cpu")}}
- {{format-scheduled-hertz
- datum.datum.used
- }}
- {{else if (eq this.metric "memory")}}
- {{format-scheduled-bytes
- datum.datum.used
- }}
- {{else}}
- {{datum.formatttedY}}
- {{/if}}
-
-
-
-
-
-
- {{#if (eq this.metric "cpu")}}
- {{format-scheduled-hertz this.data.lastObject.used}}
- /
- {{format-scheduled-hertz this.reservedAmount}}
- Total
- {{else if (eq this.metric "memory")}}
- {{format-scheduled-bytes this.data.lastObject.used}}
- /
- {{format-scheduled-bytes this.reservedAmount start="MiB"}}
- Total
- {{else}}
- {{this.data.lastObject.used}}
- /
- {{this.reservedAmount}}
- Total
- {{/if}}
-
-
+
+;
+
+export default PrimaryMetricCurrentValue;
diff --git a/ui/app/components/primary-metric/current-value.hbs b/ui/app/components/primary-metric/current-value.hbs
deleted file mode 100644
index db9aef7573f..00000000000
--- a/ui/app/components/primary-metric/current-value.hbs
+++ /dev/null
@@ -1,25 +0,0 @@
-{{!
- Copyright IBM Corp. 2015, 2025
- SPDX-License-Identifier: BUSL-1.1
-~}}
-
-
+
+
+
+
+
+ {{formatPercentage
+ @percent
+ total=1
+ }}
+
+
-
\ No newline at end of file
diff --git a/ui/app/components/primary-metric/node.gjs b/ui/app/components/primary-metric/node.gjs
new file mode 100644
index 00000000000..af8a0180311
--- /dev/null
+++ b/ui/app/components/primary-metric/node.gjs
@@ -0,0 +1,145 @@
+/**
+ * Copyright IBM Corp. 2015, 2025
+ * SPDX-License-Identifier: BUSL-1.1
+ */
+
+import Component from '@glimmer/component';
+import { assert } from '@ember/debug';
+import { service } from '@ember/service';
+import { task, timeout } from 'ember-concurrency';
+import { didInsert, didUpdate } from '@ember/render-modifiers';
+import { eq } from 'ember-truth-helpers';
+import ENV from 'nomad-ui/config/environment';
+import formatScheduledBytes from 'nomad-ui/helpers/format-scheduled-bytes';
+import formatScheduledHertz from 'nomad-ui/helpers/format-scheduled-hertz';
+import { formatScheduledHertz as formatScheduledHertzValue } from 'nomad-ui/utils/units';
+import PrimaryMetricCurrentValue from 'nomad-ui/components/primary-metric/current-value';
+import StatsTimeSeries from 'nomad-ui/components/stats-time-series';
+
+export default class NodePrimaryMetric extends Component {
+ @service('stats-trackers-registry') statsTrackersRegistry;
+
+ get metric() {
+ assert('metric is a required argument', this.args.metric);
+ return this.args.metric;
+ }
+
+ get tracker() {
+ return this.statsTrackersRegistry.getTracker(this.args.node);
+ }
+
+ get data() {
+ if (!this.tracker) return [];
+ return this.tracker[this.metric];
+ }
+
+ get reservedAmount() {
+ if (!this.tracker) return null;
+ if (this.metric === 'cpu') return this.tracker.reservedCPU;
+ if (this.metric === 'memory') return this.tracker.reservedMemory;
+ return null;
+ }
+
+ get chartClass() {
+ if (this.metric === 'cpu') return 'is-info';
+ if (this.metric === 'memory') return 'is-danger';
+ return 'is-primary';
+ }
+
+ get reservedAnnotations() {
+ const reserved = this.args.node?.reserved;
+
+ if (this.metric === 'cpu' && reserved?.cpu) {
+ const cpu = reserved.cpu;
+ return [
+ {
+ label: `${formatScheduledHertzValue(cpu, 'MHz')} reserved`,
+ percent: cpu / this.reservedAmount,
+ },
+ ];
+ }
+
+ if (this.metric === 'memory' && reserved?.memory) {
+ const memory = reserved.memory;
+ return [
+ {
+ label: `${formatScheduledBytes(memory, 'MiB')} reserved`,
+ percent: memory / this.reservedAmount,
+ },
+ ];
+ }
+
+ return [];
+ }
+
+ poller = task(async () => {
+ do {
+ this.tracker?.poll?.perform?.();
+ await timeout(100);
+ } while (ENV.environment !== 'test');
+ });
+
+ start = () => {
+ if (this.tracker) this.poller.perform();
+ };
+
+ willDestroy() {
+ super.willDestroy(...arguments);
+ this.poller.cancelAll();
+ this.tracker?.signalPause?.perform?.();
+ }
+
+
+
-
-
-
-
-
- {{format-percentage
- @percent
- total=1
- }}
-
-
+
+
+}
diff --git a/ui/app/components/primary-metric/node.hbs b/ui/app/components/primary-metric/node.hbs
deleted file mode 100644
index c07c9ce52e5..00000000000
--- a/ui/app/components/primary-metric/node.hbs
+++ /dev/null
@@ -1,54 +0,0 @@
-{{!
- Copyright IBM Corp. 2015, 2025
- SPDX-License-Identifier: BUSL-1.1
-~}}
-
-+ {{#if (eq this.metric "cpu")}} + CPU + {{else if (eq this.metric "memory")}} + Memory + {{else}} + {{this.metric}} + {{/if}} +
+
+
+ <:after as |c|>
+ {{#if this.reservedAnnotations}}
+
+
+
+ {{#if (eq this.metric "cpu")}}
+ {{formatScheduledHertz this.data.lastObject.used}}
+ /
+ {{formatScheduledHertz this.reservedAmount}}
+ Total
+ {{else if (eq this.metric "memory")}}
+ {{formatScheduledBytes this.data.lastObject.used}}
+ /
+ {{formatScheduledBytes this.reservedAmount start="MiB"}}
+ Total
+ {{else}}
+ {{this.data.lastObject.used}}
+ /
+ {{this.reservedAmount}}
+ Total
+ {{/if}}
+
+
-
\ No newline at end of file
diff --git a/ui/app/components/primary-metric/node.js b/ui/app/components/primary-metric/node.js
deleted file mode 100644
index f2b698fe0e9..00000000000
--- a/ui/app/components/primary-metric/node.js
+++ /dev/null
@@ -1,93 +0,0 @@
-/**
- * Copyright IBM Corp. 2015, 2025
- * SPDX-License-Identifier: BUSL-1.1
- */
-
-import Component from '@glimmer/component';
-import { task, timeout } from 'ember-concurrency';
-import { assert } from '@ember/debug';
-import { service } from '@ember/service';
-import { action, get } from '@ember/object';
-import {
- formatScheduledBytes,
- formatScheduledHertz,
-} from 'nomad-ui/utils/units';
-import ENV from 'nomad-ui/config/environment';
-
-export default class NodePrimaryMetric extends Component {
- @service('stats-trackers-registry') statsTrackersRegistry;
-
- /** Args
- node = null;
- metric null; (one of 'cpu' or 'memory')
- */
-
- get metric() {
- assert('metric is a required argument', this.args.metric);
- return this.args.metric;
- }
-
- get tracker() {
- return this.statsTrackersRegistry.getTracker(this.args.node);
- }
-
- get data() {
- if (!this.tracker) return [];
- return get(this, `tracker.${this.metric}`);
- }
-
- get reservedAmount() {
- if (this.metric === 'cpu') return this.tracker.reservedCPU;
- if (this.metric === 'memory') return this.tracker.reservedMemory;
- return null;
- }
-
- get chartClass() {
- if (this.metric === 'cpu') return 'is-info';
- if (this.metric === 'memory') return 'is-danger';
- return 'is-primary';
- }
-
- get reservedAnnotations() {
- if (this.metric === 'cpu' && get(this.args.node, 'reserved.cpu')) {
- const cpu = this.args.node.reserved.cpu;
- return [
- {
- label: `${formatScheduledHertz(cpu, 'MHz')} reserved`,
- percent: cpu / this.reservedAmount,
- },
- ];
- }
-
- if (this.metric === 'memory' && get(this.args.node, 'reserved.memory')) {
- const memory = this.args.node.reserved.memory;
- return [
- {
- label: `${formatScheduledBytes(memory, 'MiB')} reserved`,
- percent: memory / this.reservedAmount,
- },
- ];
- }
-
- return [];
- }
-
- @task(function* () {
- do {
- this.tracker.poll.perform();
- yield timeout(100);
- } while (ENV.environment !== 'test');
- })
- poller;
-
- @action
- start() {
- if (this.tracker) this.poller.perform();
- }
-
- willDestroy() {
- super.willDestroy(...arguments);
- this.poller.cancelAll();
- this.tracker.signalPause.perform();
- }
-}
diff --git a/ui/app/components/primary-metric/task.gjs b/ui/app/components/primary-metric/task.gjs
new file mode 100644
index 00000000000..4a8a81db585
--- /dev/null
+++ b/ui/app/components/primary-metric/task.gjs
@@ -0,0 +1,115 @@
+/**
+ * Copyright IBM Corp. 2015, 2025
+ * SPDX-License-Identifier: BUSL-1.1
+ */
+
+import Component from '@glimmer/component';
+import { tracked } from '@glimmer/tracking';
+import { assert } from '@ember/debug';
+import { service } from '@ember/service';
+import { task, timeout } from 'ember-concurrency';
+import { didInsert, didUpdate } from '@ember/render-modifiers';
+import { eq } from 'ember-truth-helpers';
+import ENV from 'nomad-ui/config/environment';
+import formatScheduledBytes from 'nomad-ui/helpers/format-scheduled-bytes';
+import formatScheduledHertz from 'nomad-ui/helpers/format-scheduled-hertz';
+import PrimaryMetricCurrentValue from 'nomad-ui/components/primary-metric/current-value';
+import StatsTimeSeries from 'nomad-ui/components/stats-time-series';
+
+export default class TaskPrimaryMetric extends Component {
+ @service('stats-trackers-registry') statsTrackersRegistry;
+
+ @tracked tracker = null;
+ @tracked taskState = null;
+
+ get metric() {
+ assert('metric is a required argument', this.args.metric);
+ return this.args.metric;
+ }
+
+ get data() {
+ if (!this.tracker) return [];
+ const task = this.tracker.tasks.findBy('task', this.taskState.name);
+ return task && task[this.metric];
+ }
+
+ get reservedAmount() {
+ if (!this.tracker) return null;
+ const task = this.tracker.tasks.findBy('task', this.taskState.name);
+ if (this.metric === 'cpu') return task.reservedCPU;
+ if (this.metric === 'memory') return task.reservedMemory;
+ return null;
+ }
+
+ get chartClass() {
+ if (this.metric === 'cpu') return 'is-info';
+ if (this.metric === 'memory') return 'is-danger';
+ return 'is-primary';
+ }
+
+ poller = task(async () => {
+ do {
+ this.tracker?.poll?.perform?.();
+ await timeout(100);
+ } while (ENV.environment !== 'test');
+ });
+
+ start = () => {
+ this.taskState = this.args.taskState;
+ this.tracker = this.statsTrackersRegistry.getTracker(
+ this.args.taskState.allocation,
+ );
+ this.poller.perform();
+ };
+
+ willDestroy() {
+ super.willDestroy(...arguments);
+ this.poller.cancelAll();
+ this.tracker?.signalPause?.perform?.();
+ }
+
+
+ - {{#if (eq this.metric "cpu")}} - CPU - {{else if (eq this.metric "memory")}} - Memory - {{else}} {{this.metric}} {{/if}} -
-
-
- <:after as |c|>
- {{#if this.reservedAnnotations}}
-
-
-
- {{#if (eq this.metric "cpu")}}
- {{format-scheduled-hertz this.data.lastObject.used}}
- /
- {{format-scheduled-hertz this.reservedAmount}}
- Total
- {{else if (eq this.metric "memory")}}
- {{format-scheduled-bytes this.data.lastObject.used}}
- /
- {{format-scheduled-bytes this.reservedAmount start="MiB"}}
- Total
- {{else}}
- {{this.data.lastObject.used}}
- /
- {{this.reservedAmount}}
- Total
- {{/if}}
-
-
+
+
+}
diff --git a/ui/app/components/primary-metric/task.hbs b/ui/app/components/primary-metric/task.hbs
deleted file mode 100644
index 83c7905ea89..00000000000
--- a/ui/app/components/primary-metric/task.hbs
+++ /dev/null
@@ -1,45 +0,0 @@
-{{!
- Copyright IBM Corp. 2015, 2025
- SPDX-License-Identifier: BUSL-1.1
-~}}
-
-+ {{#if (eq this.metric "cpu")}} + CPU + {{else if (eq this.metric "memory")}} + Memory + {{else}} + {{this.metric}} + {{/if}} +
+
+
+
+ {{#if (eq this.metric "cpu")}}
+ {{formatScheduledHertz this.data.lastObject.used}}
+ /
+ {{formatScheduledHertz this.reservedAmount}}
+ Total
+ {{else if (eq this.metric "memory")}}
+ {{formatScheduledBytes this.data.lastObject.used}}
+ /
+ {{formatScheduledBytes this.reservedAmount start="MiB"}}
+ Total
+ {{else}}
+ {{this.data.lastObject.used}}
+ /
+ {{this.reservedAmount}}
+ Total
+ {{/if}}
+
+
-
\ No newline at end of file
diff --git a/ui/app/components/primary-metric/task.js b/ui/app/components/primary-metric/task.js
deleted file mode 100644
index ffe6a3e7197..00000000000
--- a/ui/app/components/primary-metric/task.js
+++ /dev/null
@@ -1,72 +0,0 @@
-/**
- * Copyright IBM Corp. 2015, 2025
- * SPDX-License-Identifier: BUSL-1.1
- */
-
-import Component from '@glimmer/component';
-import { tracked } from '@glimmer/tracking';
-import { task, timeout } from 'ember-concurrency';
-import { assert } from '@ember/debug';
-import { service } from '@ember/service';
-import { action } from '@ember/object';
-import ENV from 'nomad-ui/config/environment';
-
-export default class TaskPrimaryMetric extends Component {
- @service('stats-trackers-registry') statsTrackersRegistry;
-
- /** Args
- taskState = null;
- metric null; (one of 'cpu' or 'memory'
- */
-
- @tracked tracker = null;
- @tracked taskState = null;
-
- get metric() {
- assert('metric is a required argument', this.args.metric);
- return this.args.metric;
- }
-
- get data() {
- if (!this.tracker) return [];
- const task = this.tracker.tasks.findBy('task', this.taskState.name);
- return task && task[this.metric];
- }
-
- get reservedAmount() {
- if (!this.tracker) return null;
- const task = this.tracker.tasks.findBy('task', this.taskState.name);
- if (this.metric === 'cpu') return task.reservedCPU;
- if (this.metric === 'memory') return task.reservedMemory;
- return null;
- }
-
- get chartClass() {
- if (this.metric === 'cpu') return 'is-info';
- if (this.metric === 'memory') return 'is-danger';
- return 'is-primary';
- }
-
- @task(function* () {
- do {
- this.tracker.poll.perform();
- yield timeout(100);
- } while (ENV.environment !== 'test');
- })
- poller;
-
- @action
- start() {
- this.taskState = this.args.taskState;
- this.tracker = this.statsTrackersRegistry.getTracker(
- this.args.taskState.allocation,
- );
- this.poller.perform();
- }
-
- willDestroy() {
- super.willDestroy(...arguments);
- this.poller.cancelAll();
- this.tracker.signalPause.perform();
- }
-}
diff --git a/ui/app/components/profile-navbar-item.gjs b/ui/app/components/profile-navbar-item.gjs
new file mode 100644
index 00000000000..1f7d184a88e
--- /dev/null
+++ b/ui/app/components/profile-navbar-item.gjs
@@ -0,0 +1,85 @@
+/**
+ * Copyright IBM Corp. 2015, 2025
+ * SPDX-License-Identifier: BUSL-1.1
+ */
+
+import Component from '@glimmer/component';
+import { service } from '@ember/service';
+import { on } from '@ember/modifier';
+import keyboardShortcut from 'nomad-ui/modifiers/keyboard-shortcut';
+import {
+ HdsButton,
+ HdsDropdown,
+} from '@hashicorp/design-system-components/components';
+
+export default class ProfileNavbarItem extends Component {
+ @service token;
+ @service router;
+ @service store;
+
+ profileShortcut = ['g', 'p'];
+
+ get profileName() {
+ return this.token.selfToken?.name || 'Profile';
+ }
+
+ signOut = () => {
+ this.token.setProperties({
+ secret: undefined,
+ });
+
+ // Clear out all data to ensure only data the anonymous token is privileged to see is shown.
+ this.store.unloadAll();
+ this.token.reset();
+ this.router.transitionTo('jobs.index');
+ };
+
+
+ {{#if this.token.selfToken}}
+ - {{#if (eq this.metric "cpu")}} - CPU - {{else if (eq this.metric "memory")}} - Memory - {{else}} {{this.metric}} {{/if}} -
-
-
-
- {{#if (eq this.metric "cpu")}}
- {{format-scheduled-hertz this.data.lastObject.used}}
- /
- {{format-scheduled-hertz this.reservedAmount}}
- Total
- {{else if (eq this.metric "memory")}}
- {{format-scheduled-bytes this.data.lastObject.used}}
- /
- {{format-scheduled-bytes this.reservedAmount start="MiB"}}
- Total
- {{else}}
- {{this.data.lastObject.used}}
- /
- {{this.reservedAmount}}
- Total
- {{/if}}
-
-
+ {{#unless @linkToAllocation}}
+
+
+ This Allocation
+
+ {{/unless}}
+
+
+
+
+
+
+ {{@allocation.clientStatus}}
+
+
+
+
+
+
+ Allocation
+ {{#if @linkToAllocation}}
+
+
+ {{else}}
+
+
+
+
+
+ {{@allocation.shortId}}
+ {{@allocation.shortId}}
+ {{/if}}
+
+
+ Client
+
+ {{@allocation.node.id}}
+
- {{#unless this.linkToAllocation}}
-
-
- This Allocation
-
- {{/unless}}
-
-
-
-
-
-
- {{this.allocation.clientStatus}}
-
-
-
-
-
-
- Allocation
- {{#if this.linkToAllocation}}
-
-
- {{else}}
-
-
-
-
-
- {{this.allocation.shortId}}
- {{this.allocation.shortId}}
- {{/if}}
-
-
- Client
-
- {{this.allocation.node.id}}
- -
+ {{#if @allocation.nextAllocation}}
+
-
+
+ Nomad has stopped attempting to reschedule this allocation. +
+ {{/if}}
+ {{#if
+ (and
+ @allocation.followUpEvaluation.waitUntil
+ (not @allocation.nextAllocation)
+ )
+ }}
+ -
+
+ Nomad will attempt to reschedule + + {{momentFromNow + @allocation.followUpEvaluation.waitUntil + interval=1000 + }} + +
+ {{/if}}
+
-
- {{#if @allocation.nextAllocation}}
-
-
-
-
-
+
+
+
+
+ {{#if a.item.error}}
+
+
+ {{#if a.item.hasCount}}
+
+ {{#if a.item.increased}}
+
+
+ {{a.item.count}}
+
+ {{/if}}
+
+
+ {{a.item.message}}
+
+
-
-
-
-
- {{#if a.item.error}}
-
-
- {{#if a.item.hasCount}}
-
- {{#if a.item.increased}}
-
-
- {{a.item.count}}
-
- {{/if}}
-
-
- {{a.item.message}}
-
-
+
+ {{/if}}
+
+}
+
+function cloneValue(value) {
+ if (typeof structuredClone === 'function') {
+ return structuredClone(value);
+ }
+
+ return value == null ? value : JSON.parse(JSON.stringify(value));
+}
+
+function cloneScaleEvent(event, index) {
+ const fallbackUid = `${+event?.time || 0}:${event?.message || ''}:${index}`;
+
+ return {
+ uid: event?.uid ?? fallbackUid,
+ error: event?.error,
+ time: event?.time,
+ message: event?.message,
+ meta: cloneValue(event?.meta),
+ };
+}
diff --git a/ui/app/components/scale-events-chart.hbs b/ui/app/components/scale-events-chart.hbs
deleted file mode 100644
index 1bad301134a..00000000000
--- a/ui/app/components/scale-events-chart.hbs
+++ /dev/null
@@ -1,54 +0,0 @@
-{{!
- Copyright IBM Corp. 2015, 2025
- SPDX-License-Identifier: BUSL-1.1
-~}}
-
-
+
+
+ {{#if this.activeEvent.event.error}}
+
+
+
+
+
+
-
-{{/if}}
\ No newline at end of file
diff --git a/ui/app/components/scale-events-chart.js b/ui/app/components/scale-events-chart.js
deleted file mode 100644
index 18a233173f8..00000000000
--- a/ui/app/components/scale-events-chart.js
+++ /dev/null
@@ -1,79 +0,0 @@
-/**
- * Copyright IBM Corp. 2015, 2025
- * SPDX-License-Identifier: BUSL-1.1
- */
-
-import Component from '@glimmer/component';
-import { tracked } from '@glimmer/tracking';
-import { action, get } from '@ember/object';
-
-export default class ScaleEventsChart extends Component {
- /** Args
- events = []
- */
-
- @tracked activeEvent = null;
-
- get data() {
- const data = this.args.events.filterBy('hasCount').sortBy('time');
-
- // Extend the domain of the chart to the current time
- data.push({
- time: new Date(),
- count: data[data.length - 1].count,
- });
-
- // Make sure the domain of the chart includes the first annotation
- const firstAnnotation = this.annotations.sortBy('time')[0];
- if (firstAnnotation && firstAnnotation.time < data[0].time) {
- data.unshift({
- time: firstAnnotation.time,
- count: data[0].count,
- });
- }
-
- return data;
- }
-
- get annotations() {
- return this.args.events.rejectBy('hasCount').map((ev) => ({
- type: ev.error ? 'error' : 'info',
- time: ev.time,
- event: cloneScaleEvent(ev),
- }));
- }
-
- @action
- toggleEvent(ev) {
- if (
- this.activeEvent &&
- get(this.activeEvent, 'event.uid') === get(ev, 'event.uid')
- ) {
- this.closeEventDetails();
- } else {
- this.activeEvent = ev;
- }
- }
-
- closeEventDetails() {
- this.activeEvent = null;
- }
-}
-
-function cloneValue(value) {
- if (typeof structuredClone === 'function') {
- return structuredClone(value);
- }
-
- return value == null ? value : JSON.parse(JSON.stringify(value));
-}
-
-function cloneScaleEvent(event) {
- return {
- uid: get(event, 'uid'),
- error: get(event, 'error'),
- time: get(event, 'time'),
- message: get(event, 'message'),
- meta: cloneValue(get(event, 'meta')),
- };
-}
diff --git a/ui/app/components/search-box.gjs b/ui/app/components/search-box.gjs
new file mode 100644
index 00000000000..34b6389d937
--- /dev/null
+++ b/ui/app/components/search-box.gjs
@@ -0,0 +1,68 @@
+/**
+ * Copyright IBM Corp. 2015, 2025
+ * SPDX-License-Identifier: BUSL-1.1
+ */
+
+import Component from '@glimmer/component';
+import { tracked } from '@glimmer/tracking';
+import { debounce } from '@ember/runloop';
+import { on } from '@ember/modifier';
+import { HdsIcon } from '@hashicorp/design-system-components/components';
+import { didUpdate } from '@ember/render-modifiers';
+
+export default class SearchBox extends Component {
+ @tracked _searchTerm = null;
+
+ debounce = 150;
+
+ constructor() {
+ super(...arguments);
+ this.syncSearchTerm();
+ }
+
+ syncSearchTerm = () => {
+ this._searchTerm = this.args.searchTerm;
+ };
+
+ setSearchTerm = (e) => {
+ this._searchTerm = e.target.value;
+ debounce(this, this.updateSearch, this.debounce);
+ };
+
+ clear = () => {
+ this._searchTerm = '';
+ debounce(this, this.updateSearch, this.debounce);
+ };
+
+ updateSearch = () => {
+ const newTerm = this._searchTerm;
+ this.args.onChange?.(newTerm);
+ };
+
+
+
-
-
- {{#if this.activeEvent.event.error}}
-
-
-
-
-
-
+
+
+}
diff --git a/ui/app/components/search-box.hbs b/ui/app/components/search-box.hbs
deleted file mode 100644
index 62af7d70275..00000000000
--- a/ui/app/components/search-box.hbs
+++ /dev/null
@@ -1,23 +0,0 @@
-{{!
- Copyright IBM Corp. 2015, 2025
- SPDX-License-Identifier: BUSL-1.1
-~}}
-
-
+
+
+
+
+
-
-
-
-
\ No newline at end of file
diff --git a/ui/app/components/search-box.js b/ui/app/components/search-box.js
deleted file mode 100644
index 6982b6af280..00000000000
--- a/ui/app/components/search-box.js
+++ /dev/null
@@ -1,45 +0,0 @@
-/**
- * Copyright IBM Corp. 2015, 2025
- * SPDX-License-Identifier: BUSL-1.1
- */
-
-import { reads } from '@ember/object/computed';
-import Component from '@ember/component';
-import { action } from '@ember/object';
-import { debounce } from '@ember/runloop';
-import { classNames } from '@ember-decorators/component';
-import classic from 'ember-classic-decorator';
-
-@classic
-@classNames('search-box', 'field', 'has-addons')
-export default class SearchBox extends Component {
- // Passed to the component (mutable)
- searchTerm = null;
-
- // Used as a debounce buffer
- @reads('searchTerm') _searchTerm;
-
- // Used to throttle sets to searchTerm
- debounce = 150;
-
- // A hook that's called when the search value changes
- onChange() {}
-
- @action
- setSearchTerm(e) {
- this.set('_searchTerm', e.target.value);
- debounce(this, updateSearch, this.debounce);
- }
-
- @action
- clear() {
- this.set('_searchTerm', '');
- debounce(this, updateSearch, this.debounce);
- }
-}
-
-function updateSearch() {
- const newTerm = this._searchTerm;
- this.onChange(newTerm);
- this.set('searchTerm', newTerm);
-}
diff --git a/ui/app/components/sentinel-policy-editor.gjs b/ui/app/components/sentinel-policy-editor.gjs
new file mode 100644
index 00000000000..1a78c32d348
--- /dev/null
+++ b/ui/app/components/sentinel-policy-editor.gjs
@@ -0,0 +1,250 @@
+/**
+ * Copyright IBM Corp. 2015, 2025
+ * SPDX-License-Identifier: BUSL-1.1
+ */
+
+import Component from '@glimmer/component';
+import { hash } from '@ember/helper';
+import { on } from '@ember/modifier';
+import { service } from '@ember/service';
+import can from 'ember-can/helpers/can';
+import { eq } from 'ember-truth-helpers';
+import {
+ HdsButton,
+ HdsFormRadioGroup,
+ HdsFormTextInputField,
+ HdsLinkInline,
+} from '@hashicorp/design-system-components/components';
+import autofocus from 'nomad-ui/modifiers/autofocus';
+import codeMirror from 'nomad-ui/modifiers/code-mirror';
+import messageFromAdapterError from 'nomad-ui/utils/message-from-adapter-error';
+
+export default class SentinelPolicyEditor extends Component {
+ @service notifications;
+ @service router;
+ @service store;
+
+ updatePolicy = (value) => {
+ this.args.policy.set('policy', value);
+ };
+
+ updatePolicyName = ({ target: { value } }) => {
+ this.args.policy.set('name', value);
+ };
+
+ updatePolicyDescription = ({ target: { value } }) => {
+ this.args.policy.set('description', value);
+ };
+
+ updatePolicyEnforcementLevel = ({ target: { id } }) => {
+ this.args.policy.set('enforcementLevel', id);
+ };
+
+ updatePolicyScope = ({ target: { id } }) => {
+ this.args.policy.set('scope', id);
+ };
+
+ save = async (event) => {
+ event?.preventDefault?.();
+
+ const policy = this.args.policy;
+
+ try {
+ const nameRegex = '^[a-zA-Z0-9-]{1,128}$';
+ if (!policy.name?.match(nameRegex)) {
+ throw new Error(
+ 'Policy name must be 1-128 characters long and can only contain letters, numbers, and dashes.',
+ );
+ }
+ if (policy.description?.length > 256) {
+ throw new Error(
+ 'Policy description must be under 256 characters long.',
+ );
+ }
+
+ const shouldRedirectAfterSave = policy.isNew;
+
+ if (
+ policy.isNew &&
+ this.store
+ .peekAll('sentinel-policy')
+ .filter((existingPolicy) => existingPolicy !== policy)
+ .findBy('name', policy.name)
+ ) {
+ throw new Error(
+ `A sentinel policy with name ${policy.name} already exists.`,
+ );
+ }
+
+ policy.set('id', policy.name);
+ await policy.save();
+
+ this.notifications.add({
+ title: 'Sentinel Policy Saved',
+ color: 'success',
+ });
+
+ if (shouldRedirectAfterSave) {
+ this.router.transitionTo(
+ 'administration.sentinel-policies.policy',
+ policy.name,
+ );
+ }
+ } catch (err) {
+ const message = err.errors?.length
+ ? messageFromAdapterError(err)
+ : err.message || 'Unknown Error';
+
+ this.notifications.add({
+ title: `Error creating Sentinel Policy ${policy.name}`,
+ message,
+ color: 'critical',
+ sticky: true,
+ });
+ }
+ };
+
+
+
+
+}
diff --git a/ui/app/components/sentinel-policy-editor.hbs b/ui/app/components/sentinel-policy-editor.hbs
deleted file mode 100644
index 13956bac97a..00000000000
--- a/ui/app/components/sentinel-policy-editor.hbs
+++ /dev/null
@@ -1,139 +0,0 @@
-{{!
- Copyright IBM Corp. 2015, 2025
- SPDX-License-Identifier: BUSL-1.1
-~}}
-
-
\ No newline at end of file
diff --git a/ui/app/components/sentinel-policy-editor.js b/ui/app/components/sentinel-policy-editor.js
deleted file mode 100644
index 89220c1f0e7..00000000000
--- a/ui/app/components/sentinel-policy-editor.js
+++ /dev/null
@@ -1,94 +0,0 @@
-/**
- * Copyright IBM Corp. 2015, 2025
- * SPDX-License-Identifier: BUSL-1.1
- */
-
-import Component from '@glimmer/component';
-import { action } from '@ember/object';
-import { service } from '@ember/service';
-import { alias } from '@ember/object/computed';
-import messageFromAdapterError from 'nomad-ui/utils/message-from-adapter-error';
-
-export default class SentinelPolicyEditorComponent extends Component {
- @service notifications;
- @service router;
- @service store;
-
- @alias('args.policy') policy;
-
- @action updatePolicy(value) {
- this.policy.set('policy', value);
- }
-
- @action updatePolicyName({ target: { value } }) {
- this.policy.set('name', value);
- }
-
- @action updatePolicyEnforcementLevel({ target: { id } }) {
- this.policy.set('enforcementLevel', id);
- }
-
- @action updatePolicyScope({ target: { id } }) {
- this.policy.set('scope', id);
- }
-
- @action async save(e) {
- if (e instanceof Event) {
- e.preventDefault(); // code-mirror "command+enter" submits the form, but doesnt have a preventDefault()
- }
- try {
- const nameRegex = '^[a-zA-Z0-9-]{1,128}$';
- if (!this.policy.name?.match(nameRegex)) {
- throw new Error(
- `Policy name must be 1-128 characters long and can only contain letters, numbers, and dashes.`,
- );
- }
- if (this.policy.description?.length > 256) {
- throw new Error(
- `Policy description must be under 256 characters long.`,
- );
- }
-
- const shouldRedirectAfterSave = this.policy.isNew;
- // Because we set the ID for adapter/serialization reasons just before save here,
- // that becomes a barrier to our Unique Name validation. So we explicltly exclude
- // the current policy when checking for uniqueness.
- if (
- this.policy.isNew &&
- this.store
- .peekAll('sentinel-policy')
- .filter((policy) => policy !== this.policy)
- .findBy('name', this.policy.name)
- ) {
- throw new Error(
- `A sentinel policy with name ${this.policy.name} already exists.`,
- );
- }
- this.policy.set('id', this.policy.name);
- await this.policy.save();
-
- this.notifications.add({
- title: 'Sentinel Policy Saved',
- color: 'success',
- });
-
- if (shouldRedirectAfterSave) {
- this.router.transitionTo(
- 'administration.sentinel-policies.policy',
- this.policy.name,
- );
- }
- } catch (err) {
- let message = err.errors?.length
- ? messageFromAdapterError(err)
- : err.message || 'Unknown Error';
-
- this.notifications.add({
- title: `Error creating Sentinel Policy ${this.policy.name}`,
- message,
- color: 'critical',
- sticky: true,
- });
- }
- }
-}
diff --git a/ui/app/components/server-agent-row.gjs b/ui/app/components/server-agent-row.gjs
new file mode 100644
index 00000000000..e9220ee7adc
--- /dev/null
+++ b/ui/app/components/server-agent-row.gjs
@@ -0,0 +1,106 @@
+/**
+ * Copyright IBM Corp. 2015, 2025
+ * SPDX-License-Identifier: BUSL-1.1
+ */
+
+import Component from '@glimmer/component';
+import { concat } from '@ember/helper';
+import { capitalize } from '@ember/string';
+import { LinkTo } from '@ember/routing';
+import { on } from '@ember/modifier';
+import { service } from '@ember/service';
+import { HdsBadge } from '@hashicorp/design-system-components/components';
+import keyboardShortcut from 'nomad-ui/modifiers/keyboard-shortcut';
+import { lazyClick } from 'nomad-ui/helpers/lazy-click';
+
+export default class ServerAgentRow extends Component {
+ // eslint-disable-next-line ember/no-private-routing-service
+ @service('-routing') _router;
+
+ get router() {
+ return this._router.router;
+ }
+
+ get isActive() {
+ const router = this.router;
+ const targetURL = router.generate('servers.server', this.args.agent);
+ const currentURL = `${router.get('rootURL').slice(0, -1)}${
+ router.get('currentURL').split('?')[0]
+ }`;
+
+ return currentURL.replace(/%40/g, '@') === targetURL.replace(/%40/g, '@');
+ }
+
+ goToAgent = (event) => {
+ const transition = () =>
+ this.router.transitionTo('servers.server', this.args.agent);
+ lazyClick([transition, event]);
+ };
+
+ get agentStatusColor() {
+ const agentStatus = this.args.agent?.status;
+ if (agentStatus === 'alive') {
+ return 'success';
+ } else if (agentStatus === 'failed') {
+ return 'critical';
+ } else if (agentStatus === 'leaving') {
+ return 'neutral';
+ } else if (agentStatus === 'left') {
+ return 'neutral';
+ } else {
+ return '';
+ }
+ }
+
+ get agentStatusText() {
+ return capitalize(this.args.agent?.status || '');
+ }
+
+
+
+
+ {{@label}}:
+
+ {{option.label}}
+
+
+
+
+}
diff --git a/ui/app/components/single-select-dropdown/index.hbs b/ui/app/components/single-select-dropdown/index.hbs
deleted file mode 100644
index 99fd4f588f3..00000000000
--- a/ui/app/components/single-select-dropdown/index.hbs
+++ /dev/null
@@ -1,25 +0,0 @@
-{{!
- Copyright IBM Corp. 2015, 2025
- SPDX-License-Identifier: BUSL-1.1
-~}}
-
-
-
- {{@label}}:
- {{option.label}}
-
-
\ No newline at end of file
diff --git a/ui/app/components/single-select-dropdown/index.js b/ui/app/components/single-select-dropdown/index.js
deleted file mode 100644
index 7ea79ad20d9..00000000000
--- a/ui/app/components/single-select-dropdown/index.js
+++ /dev/null
@@ -1,18 +0,0 @@
-/**
- * Copyright IBM Corp. 2015, 2025
- * SPDX-License-Identifier: BUSL-1.1
- */
-
-import Component from '@glimmer/component';
-import { action } from '@ember/object';
-
-export default class SingleSelectDropdown extends Component {
- get activeOption() {
- return this.args.options.findBy('key', this.args.selection);
- }
-
- @action
- setSelection({ key }) {
- this.args.onSelect && this.args.onSelect(key);
- }
-}
diff --git a/ui/app/components/stats-time-series.gjs b/ui/app/components/stats-time-series.gjs
new file mode 100644
index 00000000000..ebc6c936459
--- /dev/null
+++ b/ui/app/components/stats-time-series.gjs
@@ -0,0 +1,101 @@
+/**
+ * Copyright IBM Corp. 2015, 2025
+ * SPDX-License-Identifier: BUSL-1.1
+ */
+
+import Component from '@glimmer/component';
+import moment from 'moment';
+import d3TimeFormat from 'd3-time-format';
+import d3Format from 'd3-format';
+import { scaleTime, scaleLinear } from 'd3-scale';
+import d3Array from 'd3-array';
+import bind from 'nomad-ui/helpers/bind';
+import LineChart from 'nomad-ui/components/line-chart';
+import formatDuration from 'nomad-ui/utils/format-duration';
+
+export default class StatsTimeSeries extends Component {
+ xFormat = d3TimeFormat.timeFormat('%H:%M:%S');
+
+ yFormat = d3Format.format('.1~%');
+
+ get useDefaults() {
+ return !this.args.dataProp;
+ }
+
+ get description() {
+ const data = this.args.data;
+ const yRange = d3Array.extent(data, (d) => d.percent);
+ const xRange = d3Array.extent(data, (d) => d.timestamp);
+
+ const duration = formatDuration(xRange[1] - xRange[0], 'ms', true);
+
+ return `Time series data for the last ${duration}, with values ranging from ${this.yFormat(
+ yRange[0],
+ )} to ${this.yFormat(yRange[1])}`;
+ }
+
+ xScale(data, yAxisOffset) {
+ const scale = scaleTime();
+
+ const [low, high] = d3Array.extent(data, (d) => d.timestamp);
+ const minLow = moment(high).subtract(5, 'minutes').toDate();
+
+ const extent = data.length
+ ? [Math.min(low, minLow), high]
+ : [minLow, new Date()];
+ scale.rangeRound([10, yAxisOffset]).domain(extent);
+
+ return scale;
+ }
+
+ yScale(data, xAxisOffset) {
+ const yValueKey = this.args.dataProp ? 'percentStack' : 'percent';
+ const yValues = (data || []).map((datum) => datum?.[yValueKey]);
+
+ let [low, high] = [0, 1];
+ if (yValues.filter((value) => value != null).length) {
+ [low, high] = d3Array.extent(yValues);
+ }
+
+ return scaleLinear()
+ .rangeRound([xAxisOffset, 10])
+ .domain([Math.min(0, low), Math.max(1, high)]);
+ }
+
+
+
+
+
+
+
+
+
+}
diff --git a/ui/app/components/stepper-input.hbs b/ui/app/components/stepper-input.hbs
deleted file mode 100644
index 960e665af81..00000000000
--- a/ui/app/components/stepper-input.hbs
+++ /dev/null
@@ -1,43 +0,0 @@
-{{!
- Copyright IBM Corp. 2015, 2025
- SPDX-License-Identifier: BUSL-1.1
-~}}
-
-
-
-
-
\ No newline at end of file
diff --git a/ui/app/components/stepper-input.js b/ui/app/components/stepper-input.js
deleted file mode 100644
index 9923083ca39..00000000000
--- a/ui/app/components/stepper-input.js
+++ /dev/null
@@ -1,91 +0,0 @@
-/**
- * Copyright IBM Corp. 2015, 2025
- * SPDX-License-Identifier: BUSL-1.1
- */
-
-import Component from '@ember/component';
-import { action } from '@ember/object';
-import { debounce, join } from '@ember/runloop';
-import { classNames, classNameBindings } from '@ember-decorators/component';
-import classic from 'ember-classic-decorator';
-
-const ESC = 27;
-
-@classic
-@classNames('stepper-input')
-@classNameBindings(
- 'class',
- 'disabled:is-disabled',
- 'disabled:tooltip',
- 'disabled:multiline',
-)
-export default class StepperInput extends Component {
- min = 0;
- max = 10;
- value = 0;
- internalValue = 0;
- debounce = 500;
- onChange() {}
-
- didReceiveAttrs() {
- super.didReceiveAttrs(...arguments);
- this.set('internalValue', Number(this.value ?? 0));
- }
-
- @action
- increment() {
- join(this, () => {
- if (this.internalValue < this.max) {
- const nextValue = this.internalValue + 1;
- this.set('internalValue', nextValue);
- this.update(nextValue);
- }
- });
- }
-
- @action
- decrement() {
- join(this, () => {
- if (this.internalValue > this.min) {
- const nextValue = this.internalValue - 1;
- this.set('internalValue', nextValue);
- this.update(nextValue);
- }
- });
- }
-
- @action
- setValue(e) {
- join(this, () => {
- if (e.target.value !== '') {
- const newValue = Math.floor(
- Math.min(this.max, Math.max(this.min, e.target.value)),
- );
- this.set('internalValue', newValue);
- this.update(newValue);
- } else {
- e.target.value = this.internalValue;
- }
- });
- }
-
- @action
- resetTextInput(e) {
- if (e.keyCode === ESC) {
- e.target.value = this.internalValue;
- }
- }
-
- @action
- selectValue(e) {
- e.target.select();
- }
-
- update(value) {
- debounce(this, sendUpdateAction, value, this.debounce);
- }
-}
-
-function sendUpdateAction(value) {
- return this.onChange(value);
-}
diff --git a/ui/app/components/storage-subnav.gjs b/ui/app/components/storage-subnav.gjs
new file mode 100644
index 00000000000..496e840d66f
--- /dev/null
+++ b/ui/app/components/storage-subnav.gjs
@@ -0,0 +1,35 @@
+/**
+ * Copyright IBM Corp. 2015, 2025
+ * SPDX-License-Identifier: BUSL-1.1
+ */
+
+import Component from '@glimmer/component';
+import { service } from '@ember/service';
+import { LinkTo } from '@ember/routing';
+import { didInsert, willDestroy } from '@ember/render-modifiers';
+
+export default class StorageSubnav extends Component {
+ @service keyboard;
+
+
+
+
+}
diff --git a/ui/app/components/storage-subnav.hbs b/ui/app/components/storage-subnav.hbs
deleted file mode 100644
index 5696d7c1369..00000000000
--- a/ui/app/components/storage-subnav.hbs
+++ /dev/null
@@ -1,23 +0,0 @@
-{{!
- Copyright IBM Corp. 2015, 2025
- SPDX-License-Identifier: BUSL-1.1
-~}}
-
-
\ No newline at end of file
diff --git a/ui/app/components/storage-subnav.js b/ui/app/components/storage-subnav.js
deleted file mode 100644
index 68027514958..00000000000
--- a/ui/app/components/storage-subnav.js
+++ /dev/null
@@ -1,11 +0,0 @@
-/**
- * Copyright IBM Corp. 2015, 2025
- * SPDX-License-Identifier: BUSL-1.1
- */
-
-import Component from '@glimmer/component';
-import { service } from '@ember/service';
-
-export default class StorageSubnavComponent extends Component {
- @service keyboard;
-}
diff --git a/ui/app/components/streaming-file.gjs b/ui/app/components/streaming-file.gjs
new file mode 100644
index 00000000000..0660b967681
--- /dev/null
+++ b/ui/app/components/streaming-file.gjs
@@ -0,0 +1,193 @@
+/**
+ * Copyright IBM Corp. 2015, 2025
+ * SPDX-License-Identifier: BUSL-1.1
+ */
+
+import Component from '@glimmer/component';
+import { tracked } from '@glimmer/tracking';
+import { scheduleOnce, once } from '@ember/runloop';
+import { task } from 'ember-concurrency';
+import { didInsert, didUpdate } from '@ember/render-modifiers';
+import windowResize from 'nomad-ui/modifiers/window-resize';
+
+const A_KEY = 65;
+
+export default class StreamingFile extends Component {
+ @tracked follow = true;
+
+ requestFrame = true;
+ cliElement = null;
+ scrollHandlerBound = null;
+ keyDownHandlerBound = null;
+
+ get mode() {
+ return this.args.mode ?? 'streaming';
+ }
+
+ get isStreaming() {
+ return this.args.isStreaming ?? true;
+ }
+
+ get shouldFillHeight() {
+ return this.args.shouldFillHeight ?? true;
+ }
+
+ setupElement = (element) => {
+ this.cliElement = element;
+
+ if (this.shouldFillHeight) {
+ this.fillAvailableHeight();
+ }
+
+ this.scrollHandlerBound = this.scrollHandler.bind(this);
+ this.cliElement.addEventListener('scroll', this.scrollHandlerBound);
+
+ this.keyDownHandlerBound = this.keyDownHandler.bind(this);
+ document.addEventListener('keydown', this.keyDownHandlerBound);
+ };
+
+ onArgsChange = () => {
+ if (!this.args.logger) {
+ return;
+ }
+
+ // Defer task start/stop so task state doesn't mutate during render.
+ scheduleOnce('actions', this, this.performTask);
+ };
+
+ performTask = () => {
+ switch (this.mode) {
+ case 'head':
+ this.follow = false;
+ this.head.perform();
+ break;
+ case 'tail':
+ this.follow = true;
+ this.tail.perform();
+ break;
+ case 'streaming':
+ this.follow = true;
+ if (this.isStreaming) {
+ this.stream.perform();
+ } else {
+ this.args.logger.stop();
+ }
+ break;
+ }
+ };
+
+ scrollHandler() {
+ const cli = this.cliElement;
+
+ if (!cli) {
+ return;
+ }
+
+ // Scroll events can fire multiple times per frame, this eliminates
+ // redundant computation.
+ if (this.requestFrame) {
+ window.requestAnimationFrame(() => {
+ // If the scroll position is close enough to the bottom, autoscroll to the bottom.
+ this.follow = cli.scrollHeight - cli.scrollTop - cli.clientHeight < 20;
+ this.requestFrame = true;
+ });
+ }
+
+ this.requestFrame = false;
+ }
+
+ keyDownHandler(event) {
+ // Rebind select-all shortcut to only select the text in the streaming file output.
+ if ((event.metaKey || event.ctrlKey) && event.keyCode === A_KEY) {
+ event.preventDefault();
+ const selection = window.getSelection();
+ selection.removeAllRanges();
+ const range = document.createRange();
+ range.selectNode(this.cliElement);
+ selection.addRange(range);
+ }
+ }
+
+ windowResizeHandler = () => {
+ if (this.shouldFillHeight) {
+ once(this, this.fillAvailableHeight);
+ }
+ };
+
+ fillAvailableHeight = () => {
+ if (!this.cliElement) {
+ return;
+ }
+
+ // This math is arbitrary and far from bulletproof, but the UX of having
+ // the log window fill available height is worth the hack.
+ const margins = 30;
+ this.cliElement.style.height = `${
+ window.innerHeight - this.cliElement.offsetTop - margins
+ }px`;
+ };
+
+ head = task(async () => {
+ await this.args.logger.gotoHead.perform();
+ scheduleOnce('afterRender', this, this.scrollToTop);
+ });
+
+ scrollToTop = () => {
+ if (this.cliElement) {
+ this.cliElement.scrollTop = 0;
+ }
+ };
+
+ tail = task(async () => {
+ await this.args.logger.gotoTail.perform();
+ });
+
+ synchronizeScrollPosition = () => {
+ if (this.follow && this.cliElement) {
+ this.cliElement.scrollTop = this.cliElement.scrollHeight;
+ }
+ };
+
+ stream = task(async () => {
+ // Follow the log if the scroll position is near the bottom of the cli window.
+ this.args.logger.on('tick', this, 'scheduleScrollSynchronization');
+
+ await this.args.logger.startStreaming();
+ this.args.logger.off('tick', this, 'scheduleScrollSynchronization');
+ });
+
+ scheduleScrollSynchronization() {
+ scheduleOnce('afterRender', this, this.synchronizeScrollPosition);
+ }
+
+ willDestroy() {
+ super.willDestroy(...arguments);
+
+ if (this.cliElement && this.scrollHandlerBound) {
+ this.cliElement.removeEventListener('scroll', this.scrollHandlerBound);
+ }
+
+ if (this.keyDownHandlerBound) {
+ document.removeEventListener('keydown', this.keyDownHandlerBound);
+ }
+
+ this.args.logger?.stop();
+ }
+
+
+
+ {{@logger.output}}
+
+
+}
diff --git a/ui/app/components/streaming-file.hbs b/ui/app/components/streaming-file.hbs
deleted file mode 100644
index 312ff46c4e2..00000000000
--- a/ui/app/components/streaming-file.hbs
+++ /dev/null
@@ -1,9 +0,0 @@
-{{!
- Copyright IBM Corp. 2015, 2025
- SPDX-License-Identifier: BUSL-1.1
-~}}
-
-{{this.logger.output}}
\ No newline at end of file
diff --git a/ui/app/components/streaming-file.js b/ui/app/components/streaming-file.js
deleted file mode 100644
index 5e1d5def3d2..00000000000
--- a/ui/app/components/streaming-file.js
+++ /dev/null
@@ -1,170 +0,0 @@
-/**
- * Copyright IBM Corp. 2015, 2025
- * SPDX-License-Identifier: BUSL-1.1
- */
-
-import Component from '@ember/component';
-import { scheduleOnce, once } from '@ember/runloop';
-import { task } from 'ember-concurrency';
-import WindowResizable from 'nomad-ui/mixins/window-resizable';
-import {
- classNames,
- tagName,
- attributeBindings,
-} from '@ember-decorators/component';
-import classic from 'ember-classic-decorator';
-
-const A_KEY = 65;
-
-@classic
-@tagName('pre')
-@classNames('cli-window')
-@attributeBindings('data-test-log-cli')
-export default class StreamingFile extends Component.extend(WindowResizable) {
- 'data-test-log-cli' = true;
-
- mode = 'streaming'; // head, tail, streaming
- isStreaming = true;
- logger = null;
- follow = true;
- shouldFillHeight = true;
-
- // Internal bookkeeping to avoid multiple scroll events on one frame
- requestFrame = true;
-
- didReceiveAttrs() {
- super.didReceiveAttrs();
- if (!this.logger) {
- return;
- }
-
- // Defer task start/stop so task state doesn't mutate during render.
- scheduleOnce('actions', this, this.performTask);
- }
-
- performTask() {
- switch (this.mode) {
- case 'head':
- this.set('follow', false);
- this.head.perform();
- break;
- case 'tail':
- this.set('follow', true);
- this.tail.perform();
- break;
- case 'streaming':
- this.set('follow', true);
- if (this.isStreaming) {
- this.stream.perform();
- } else {
- this.logger.stop();
- }
- break;
- }
- }
-
- scrollHandler() {
- const cli = this.element;
-
- // Scroll events can fire multiple times per frame, this eliminates
- // redundant computation.
- if (this.requestFrame) {
- window.requestAnimationFrame(() => {
- // If the scroll position is close enough to the bottom, autoscroll to the bottom
- this.set(
- 'follow',
- cli.scrollHeight - cli.scrollTop - cli.clientHeight < 20,
- );
- this.requestFrame = true;
- });
- }
- this.requestFrame = false;
- }
-
- keyDownHandler(e) {
- // Rebind select-all shortcut to only select the text in the
- // streaming file output.
- if ((e.metaKey || e.ctrlKey) && e.keyCode === A_KEY) {
- e.preventDefault();
- const selection = window.getSelection();
- selection.removeAllRanges();
- const range = document.createRange();
- range.selectNode(this.element);
- selection.addRange(range);
- }
- }
-
- didInsertElement() {
- super.didInsertElement(...arguments);
- if (this.shouldFillHeight) {
- this.fillAvailableHeight();
- }
-
- this.set('_scrollHandler', this.scrollHandler.bind(this));
- this.element.addEventListener('scroll', this._scrollHandler);
-
- this.set('_keyDownHandler', this.keyDownHandler.bind(this));
- document.addEventListener('keydown', this._keyDownHandler);
- }
-
- willDestroyElement() {
- super.willDestroyElement(...arguments);
- this.element.removeEventListener('scroll', this._scrollHandler);
- document.removeEventListener('keydown', this._keyDownHandler);
- }
-
- windowResizeHandler() {
- if (this.shouldFillHeight) {
- once(this, this.fillAvailableHeight);
- }
- }
-
- fillAvailableHeight() {
- // This math is arbitrary and far from bulletproof, but the UX
- // of having the log window fill available height is worth the hack.
- const margins = 30; // Account for padding and margin on either side of the CLI
- const cliWindow = this.element;
- cliWindow.style.height = `${
- window.innerHeight - cliWindow.offsetTop - margins
- }px`;
- }
-
- @task(function* () {
- yield this.get('logger.gotoHead').perform();
- scheduleOnce('afterRender', this, this.scrollToTop);
- })
- head;
-
- scrollToTop() {
- this.element.scrollTop = 0;
- }
-
- @task(function* () {
- yield this.get('logger.gotoTail').perform();
- })
- tail;
-
- synchronizeScrollPosition() {
- if (this.follow) {
- this.element.scrollTop = this.element.scrollHeight;
- }
- }
-
- @task(function* () {
- // Follow the log if the scroll position is near the bottom of the cli window
- this.logger.on('tick', this, 'scheduleScrollSynchronization');
-
- yield this.logger.startStreaming();
- this.logger.off('tick', this, 'scheduleScrollSynchronization');
- })
- stream;
-
- scheduleScrollSynchronization() {
- scheduleOnce('afterRender', this, this.synchronizeScrollPosition);
- }
-
- willDestroy() {
- super.willDestroy(...arguments);
- this.logger.stop();
- }
-}
diff --git a/ui/app/components/svg-patterns.gjs b/ui/app/components/svg-patterns.gjs
new file mode 100644
index 00000000000..2eb148da98b
--- /dev/null
+++ b/ui/app/components/svg-patterns.gjs
@@ -0,0 +1,55 @@
+/**
+ * Copyright IBM Corp. 2015, 2025
+ * SPDX-License-Identifier: BUSL-1.1
+ */
+
+export const SvgPatterns =
+
+;
+
+export default SvgPatterns;
diff --git a/ui/app/components/svg-patterns.hbs b/ui/app/components/svg-patterns.hbs
deleted file mode 100644
index e5269f95e08..00000000000
--- a/ui/app/components/svg-patterns.hbs
+++ /dev/null
@@ -1,51 +0,0 @@
-{{!
- Copyright IBM Corp. 2015, 2025
- SPDX-License-Identifier: BUSL-1.1
-~}}
-
-
\ No newline at end of file
diff --git a/ui/app/components/task-context-sidebar.gjs b/ui/app/components/task-context-sidebar.gjs
new file mode 100644
index 00000000000..26ab51ffbc0
--- /dev/null
+++ b/ui/app/components/task-context-sidebar.gjs
@@ -0,0 +1,163 @@
+/**
+ * Copyright IBM Corp. 2015, 2025
+ * SPDX-License-Identifier: BUSL-1.1
+ */
+
+import Component from '@glimmer/component';
+import { tracked } from '@glimmer/tracking';
+import { array } from '@ember/helper';
+import { on } from '@ember/modifier';
+import { LinkTo } from '@ember/routing';
+import { HdsIcon } from '@hashicorp/design-system-components/components';
+import onClickOutside from 'ember-click-outside/modifiers/on-click-outside';
+import { reverse } from '@nullvoxpopuli/ember-composable-helpers';
+import ListTable from 'nomad-ui/components/list-table';
+import TaskLog from 'nomad-ui/components/task-log';
+import formatTs from 'nomad-ui/helpers/format-ts';
+import keyboardCommands from 'nomad-ui/helpers/keyboard-commands';
+
+export default class TaskContextSidebar extends Component {
+ @tracked wide = false;
+
+ get isSideBarOpen() {
+ return !!this.args.task;
+ }
+
+ get portalTargetElement() {
+ if (typeof document === 'undefined') {
+ return null;
+ }
+
+ return document.getElementById('log-sidebar-portal');
+ }
+
+ keyCommands = [
+ {
+ label: 'Close Task Logs Sidebar',
+ pattern: ['Escape'],
+ action: () => this.args.fns.closeSidebar(),
+ },
+ ];
+
+ narrowCommand = {
+ label: 'Narrow Sidebar',
+ pattern: ['ArrowRight', 'ArrowRight'],
+ action: () => this.toggleWide(),
+ };
+
+ widenCommand = {
+ label: 'Widen Sidebar',
+ pattern: ['ArrowLeft', 'ArrowLeft'],
+ action: () => this.toggleWide(),
+ };
+
+ toggleWide = () => {
+ this.wide = !this.wide;
+ };
+
+
+ {{#if this.portalTargetElement}}
+ {{#in-element this.portalTargetElement}}
+
+ {{/in-element}}
+ {{/if}}
+
+}
diff --git a/ui/app/components/task-context-sidebar.hbs b/ui/app/components/task-context-sidebar.hbs
deleted file mode 100644
index 7bbd226d212..00000000000
--- a/ui/app/components/task-context-sidebar.hbs
+++ /dev/null
@@ -1,105 +0,0 @@
-{{!
- Copyright IBM Corp. 2015, 2025
- SPDX-License-Identifier: BUSL-1.1
-~}}
-
-
+ {{#if this.noConnection}}
+
+
+}
diff --git a/ui/app/components/task-log.hbs b/ui/app/components/task-log.hbs
deleted file mode 100644
index e8499a8db69..00000000000
--- a/ui/app/components/task-log.hbs
+++ /dev/null
@@ -1,106 +0,0 @@
-{{!
- Copyright IBM Corp. 2015, 2025
- SPDX-License-Identifier: BUSL-1.1
-~}}
-
-{{#if this.noConnection}}
-
+
+ {{/if}}
+ {{#if this.logsDisabled}}
+
+
+
+
+ Cannot fetch logs
+The logs for this task are inaccessible. Check the condition of + the node the allocation is on.
+
+
+
+
+
+ {{/if}}
+
+
+
+
+ Cannot fetch logs
+Logs unavailable. Log collection may be disabled.
+
+
+
+
+
+
+
+
+
+
+
+ Word Wrap
+
+
+
+
+
+
+
+
+
+
-
-{{/if}}
-{{#if this.logsDisabled}}
-
-
-
-
- Cannot fetch logs
-The logs for this task are inaccessible. Check the condition of the - node the allocation is on.
-
-
-
-
-
-{{/if}}
-
-
-
-
- Cannot fetch logs
-Logs unavailable. Log collection may be disabled.
-
-
-
-
-
-
-
-
-
-
-
- Word Wrap
-
-
-
-
-
-
-
-
-
\ No newline at end of file
diff --git a/ui/app/components/task-log.js b/ui/app/components/task-log.js
deleted file mode 100644
index 18087b968cc..00000000000
--- a/ui/app/components/task-log.js
+++ /dev/null
@@ -1,134 +0,0 @@
-/**
- * Copyright IBM Corp. 2015, 2025
- * SPDX-License-Identifier: BUSL-1.1
- */
-
-import { service } from '@ember/service';
-import Component from '@ember/component';
-import { action, computed } from '@ember/object';
-import { alias } from '@ember/object/computed';
-import RSVP from 'rsvp';
-import { logger } from 'nomad-ui/utils/classes/log';
-import timeout from 'nomad-ui/utils/timeout';
-import { classNames } from '@ember-decorators/component';
-import classic from 'ember-classic-decorator';
-import localStorageProperty from 'nomad-ui/utils/properties/local-storage';
-
-@classic
-@classNames('boxed-section', 'task-log')
-export default class TaskLog extends Component {
- @service token;
- @service userSettings;
- @service abilities;
- allocation = null;
- task = null;
-
- // When true, request logs from the server agent
- useServer = false;
-
- // When true, logs cannot be fetched from either the client or the server
- noConnection = false;
- logsDisabled = false;
-
- clientTimeout = 1000;
- serverTimeout = 5000;
-
- isStreaming = true;
- streamMode = 'streaming';
-
- shouldFillHeight = true;
-
- @localStorageProperty('nomadShouldWrapCode', false) wrapped;
-
- @alias('userSettings.logMode') mode;
-
- @computed('allocation.{id,node.httpAddr}', 'useServer')
- get logUrl() {
- let address;
- const allocation = this.get('allocation.id');
- if (this.abilities.can('read client')) {
- address = this.get('allocation.node.httpAddr');
- }
- const url = `/v1/client/fs/logs/${allocation}`;
- return this.useServer ? url : address ? `//${address}${url}` : url;
- }
-
- @computed('task', 'mode')
- get logParams() {
- return {
- task: this.task,
- type: this.mode,
- };
- }
-
- @logger('logUrl', 'logParams', function logFetch() {
- // If the log request can't settle in one second, the client
- // must be unavailable and the server should be used instead
-
- const aborter = new AbortController();
- const timing = this.useServer ? this.serverTimeout : this.clientTimeout;
-
- // Capture the state of useServer at logger create time to avoid a race
- // between the stdout logger and stderr logger running at once.
- const useServer = this.useServer;
- return (url) =>
- RSVP.race([
- this.token.authorizedRequest(url, { signal: aborter.signal }),
- timeout(timing),
- ]).then(
- (response) => {
- // whenever the log files 404, it is due to log collection
- // being disabled.
- if (response.status === 404) {
- this.set('logsDisabled', true);
- }
- return response;
- },
- (error) => {
- aborter.abort();
- if (useServer) {
- this.set('noConnection', true);
- } else {
- this.send('failoverToServer');
- }
- throw error;
- },
- );
- })
- logger;
-
- @action
- setMode(mode) {
- if (this.mode === mode) return;
- this.logger.stop();
- this.set('mode', mode);
- }
-
- @action
- toggleStream() {
- this.set('streamMode', 'streaming');
- this.toggleProperty('isStreaming');
- }
-
- @action
- gotoHead() {
- this.set('streamMode', 'head');
- this.set('isStreaming', false);
- }
-
- @action
- gotoTail() {
- this.set('streamMode', 'tail');
- this.set('isStreaming', false);
- }
-
- @action
- failoverToServer() {
- this.set('useServer', true);
- }
-
- @action toggleWrap() {
- this.toggleProperty('wrapped');
- return false;
- }
-}
diff --git a/ui/app/components/task-row.gjs b/ui/app/components/task-row.gjs
new file mode 100644
index 00000000000..d6f936a8a45
--- /dev/null
+++ b/ui/app/components/task-row.gjs
@@ -0,0 +1,239 @@
+/**
+ * Copyright IBM Corp. 2015, 2025
+ * SPDX-License-Identifier: BUSL-1.1
+ */
+
+import Component from '@glimmer/component';
+import { array, concat } from '@ember/helper';
+import { tracked } from '@glimmer/tracking';
+import { didUpdate } from '@ember/render-modifiers';
+import { LinkTo } from '@ember/routing';
+import { on } from '@ember/modifier';
+import { service } from '@ember/service';
+import { and, not } from 'ember-truth-helpers';
+import { task, timeout } from 'ember-concurrency';
+import {
+ HdsIcon,
+ HdsTooltipButton,
+} from '@hashicorp/design-system-components/components';
+import formatBytes from 'nomad-ui/helpers/format-bytes';
+import formatHertz from 'nomad-ui/helpers/format-hertz';
+import formatTs from 'nomad-ui/helpers/format-ts';
+import formatVolumeName from 'nomad-ui/helpers/format-volume-name';
+import ProxyTag from 'nomad-ui/components/proxy-tag';
+import ENV from 'nomad-ui/config/environment';
+import { lazyClick } from 'nomad-ui/helpers/lazy-click';
+
+export default class TaskRow extends Component {
+ @service('stats-trackers-registry') statsTrackersRegistry;
+
+ @tracked statsError = false;
+
+ get enablePolling() {
+ return ENV.environment !== 'test';
+ }
+
+ get stats() {
+ if (!this.args.task?.isRunning) return undefined;
+ return this.statsTrackersRegistry.getTracker(this.args.task.allocation);
+ }
+
+ get taskStats() {
+ if (!this.stats) return undefined;
+ return this.stats.tasks?.find?.(
+ (entry) => entry.task === this.args.task?.name,
+ );
+ }
+
+ get cpu() {
+ const cpu = this.taskStats?.cpu;
+ return cpu?.[cpu.length - 1];
+ }
+
+ get memory() {
+ const memory = this.taskStats?.memory;
+ return memory?.[memory.length - 1];
+ }
+
+ click = (event) => {
+ lazyClick([this.args.onClick, event]);
+ };
+
+ handleTaskChange = () => {
+ const allocation = this.args.task?.allocation;
+
+ if (allocation) {
+ this.fetchStats.perform();
+ } else {
+ this.fetchStats.cancelAll();
+ }
+ };
+
+ fetchStats = task({ drop: true }, async () => {
+ do {
+ if (this.stats) {
+ try {
+ await this.stats.poll.linked().perform();
+ this.statsError = false;
+ } catch {
+ this.statsError = true;
+ }
+ }
+
+ await timeout(500);
+ } while (this.enablePolling);
+ });
+
+
+ -
+ {{#each @task.task.volumeMounts as |volume|}}
+
-
+
+ {{volume.volume}}
+ :
+
+ {{#if volume.isCSI}}
+
+ {{formatVolumeName + source=volume.source + isPerAlloc=volume.volumeDeclaration.perAlloc + volumeExtension=@task.allocation.volumeExtension + }} + + {{else}} + {{volume.source}} + {{/if}} +
+ {{/each}}
+
+
+
+ {{/if}}
+ {{/if}}
+
+
+
+ {{/if}}
+ {{/if}}
+ -
- {{#each this.task.task.volumeMounts as |volume|}}
-
-
-
- {{volume.volume}}
- :
-
- {{#if volume.isCSI}}
-
- {{format-volume-name - source=volume.source - isPerAlloc=volume.volumeDeclaration.perAlloc - volumeExtension=this.task.allocation.volumeExtension - }} - - {{else}} - {{volume.source}} - {{/if}} -
- {{/each}}
-
-
-
- {{/if}}
- {{/if}}
-
-
-
- {{/if}}
- {{/if}}
-
+ {{this.task.name}}
+
+
+
+
+
+ {{/if}}
+ {{/if}}
+
+
+
+ {{/if}}
+ {{/if}}
+
- {{this.task.name}}
-
-
-
-
-
- {{/if}}
- {{/if}}
-
-
-
- {{/if}}
- {{/if}}
-
+
+
+
+
+
}
function centerOfBBox(bbox) {
diff --git a/ui/app/components/topo-viz.hbs b/ui/app/components/topo-viz.hbs
deleted file mode 100644
index 5da6d94438b..00000000000
--- a/ui/app/components/topo-viz.hbs
+++ /dev/null
@@ -1,81 +0,0 @@
-{{!
- Copyright IBM Corp. 2015, 2025
- SPDX-License-Identifier: BUSL-1.1
-~}}
-
-
+ {{#let this.highlightAllocation as |allocation|}}
+
+
+ {{#if this.activeAllocation}}
+
+ {{/if}}
+ -
+
- + Job + {{allocation.allocation.job.name}}/{{allocation.allocation.taskGroupName}} + + {{#if this.system.shouldShowNamespaces}} +
- + Namespace + {{allocation.allocation.job.namespace.name}} + + {{/if}} +
- + Memory + {{formatScheduledBytes + allocation.memory + start="MiB" + }} + +
- + CPU + {{formatScheduledHertz allocation.cpu}} + +
-
-
-
-
\ No newline at end of file
diff --git a/ui/app/components/topo-viz/datacenter.gjs b/ui/app/components/topo-viz/datacenter.gjs
new file mode 100644
index 00000000000..3d3d14e553f
--- /dev/null
+++ b/ui/app/components/topo-viz/datacenter.gjs
@@ -0,0 +1,104 @@
+/**
+ * Copyright IBM Corp. 2015, 2025
+ * SPDX-License-Identifier: BUSL-1.1
+ */
+
+import Component from '@glimmer/component';
+import formatBytes from 'nomad-ui/helpers/format-bytes';
+import formatHertz from 'nomad-ui/helpers/format-hertz';
+import FlexMasonry from 'nomad-ui/components/flex-masonry';
+import TopoVizNode from 'nomad-ui/components/topo-viz/node';
+
+export default class TopoVizDatacenter extends Component {
+ get scheduledAllocations() {
+ return this.args.datacenter.nodes.reduce(
+ (all, node) =>
+ all.concat(node.allocations.filterBy('allocation.isScheduled')),
+ [],
+ );
+ }
+
+ get aggregatedAllocationResources() {
+ return this.scheduledAllocations.reduce(
+ (totals, allocation) => {
+ totals.cpu += allocation.cpu;
+ totals.memory += allocation.memory;
+ return totals;
+ },
+ { cpu: 0, memory: 0 },
+ );
+ }
+
+ get aggregatedNodeResources() {
+ return this.args.datacenter.nodes.reduce(
+ (totals, node) => {
+ totals.cpu += node.cpu;
+ totals.memory += node.memory;
+ return totals;
+ },
+ { cpu: 0, memory: 0 },
+ );
+ }
+
+
+
- {{#let this.highlightAllocation as |allocation|}}
-
-
- {{#if this.activeAllocation}}
-
- {{/if}}
--
-
- - Job - {{allocation.allocation.job.name}}/{{allocation.allocation.taskGroupName}} - - {{#if this.system.shouldShowNamespaces}} -
- - Namespace - {{allocation.allocation.job.namespace.name}} - - {{/if}} -
- - Memory - {{format-scheduled-bytes - allocation.memory - start="MiB" - }} - -
- - CPU - {{format-scheduled-hertz allocation.cpu}} - -
+
+
+}
diff --git a/ui/app/components/topo-viz/datacenter.hbs b/ui/app/components/topo-viz/datacenter.hbs
deleted file mode 100644
index c0bce0c6a90..00000000000
--- a/ui/app/components/topo-viz/datacenter.hbs
+++ /dev/null
@@ -1,54 +0,0 @@
-{{!
- Copyright IBM Corp. 2015, 2025
- SPDX-License-Identifier: BUSL-1.1
-~}}
-
-
+ {{@datacenter.name}}
+ {{this.scheduledAllocations.length}} Allocs
+ {{@datacenter.nodes.length}} Nodes
+
+ {{formatBytes
+ this.aggregatedAllocationResources.memory
+ start="MiB"
+ }}
+ /
+ {{formatBytes
+ this.aggregatedNodeResources.memory
+ start="MiB"
+ }},
+ {{formatHertz
+ this.aggregatedAllocationResources.cpu
+ }}
+ /
+ {{formatHertz
+ this.aggregatedNodeResources.cpu
+ }}
+
+
+
+ {{#let (if @isSingleColumn 1 2) as |layoutColumns|}}
+
+
+ {{/let}}
+
+
-
\ No newline at end of file
diff --git a/ui/app/components/topo-viz/datacenter.js b/ui/app/components/topo-viz/datacenter.js
deleted file mode 100644
index 8fd64035c6a..00000000000
--- a/ui/app/components/topo-viz/datacenter.js
+++ /dev/null
@@ -1,38 +0,0 @@
-/**
- * Copyright IBM Corp. 2015, 2025
- * SPDX-License-Identifier: BUSL-1.1
- */
-
-import Component from '@glimmer/component';
-
-export default class TopoVizDatacenter extends Component {
- get scheduledAllocations() {
- return this.args.datacenter.nodes.reduce(
- (all, node) =>
- all.concat(node.allocations.filterBy('allocation.isScheduled')),
- [],
- );
- }
-
- get aggregatedAllocationResources() {
- return this.scheduledAllocations.reduce(
- (totals, allocation) => {
- totals.cpu += allocation.cpu;
- totals.memory += allocation.memory;
- return totals;
- },
- { cpu: 0, memory: 0 },
- );
- }
-
- get aggregatedNodeResources() {
- return this.args.datacenter.nodes.reduce(
- (totals, node) => {
- totals.cpu += node.cpu;
- totals.memory += node.memory;
- return totals;
- },
- { cpu: 0, memory: 0 },
- );
- }
-}
diff --git a/ui/app/components/topo-viz/node.gjs b/ui/app/components/topo-viz/node.gjs
new file mode 100644
index 00000000000..fa828622d4d
--- /dev/null
+++ b/ui/app/components/topo-viz/node.gjs
@@ -0,0 +1,460 @@
+/**
+ * Copyright IBM Corp. 2015, 2025
+ * SPDX-License-Identifier: BUSL-1.1
+ */
+
+import Component from '@glimmer/component';
+import { tracked } from '@glimmer/tracking';
+import { guidFor } from '@ember/object/internals';
+import { LinkTo } from '@ember/routing';
+import {
+ HdsIcon,
+ HdsTooltipButton,
+} from '@hashicorp/design-system-components/components';
+import { on } from '@ember/modifier';
+import { fn } from '@ember/helper';
+import { eq, not, or } from 'ember-truth-helpers';
+import { didInsert, didUpdate } from '@ember/render-modifiers';
+import hdsTooltip from '@hashicorp/design-system-components/modifiers/hds-tooltip';
+
+import windowResize from 'nomad-ui/modifiers/window-resize';
+import formatScheduledBytes from 'nomad-ui/helpers/format-scheduled-bytes';
+import formatScheduledHertz from 'nomad-ui/helpers/format-scheduled-hertz';
+
+export default class TopoVizNode extends Component {
+ @tracked data = { cpu: [], memory: [] };
+ @tracked dimensionsWidth = 0;
+ @tracked padding = 5;
+ @tracked activeAllocation = null;
+
+ get height() {
+ return this.args.heightScale
+ ? this.args.heightScale(this.args.node.memory)
+ : 15;
+ }
+
+ get labelHeight() {
+ return this.height / 2;
+ }
+
+ get paddingLeft() {
+ const labelWidth = 20;
+ return this.padding + labelWidth;
+ }
+
+ // Since strokes are placed centered on the perimeter of fills, The width of the stroke needs to be removed from
+ // the height of the fill to match unstroked height and avoid clipping.
+ get selectedHeight() {
+ return this.height - 1;
+ }
+
+ // Since strokes are placed centered on the perimeter of fills, half the width of the stroke needs to be added to
+ // the yOffset to match heights with unstroked shapes.
+ get selectedYOffset() {
+ return this.height + 2.5;
+ }
+
+ get yOffset() {
+ return this.height + 2;
+ }
+
+ get maskHeight() {
+ return this.height + this.yOffset;
+ }
+
+ get totalHeight() {
+ return this.maskHeight + this.padding * 2;
+ }
+
+ get maskId() {
+ return `topo-viz-node-mask-${guidFor(this)}`;
+ }
+
+ get count() {
+ return this.allocations.length;
+ }
+
+ get allocations() {
+ // Sort by the delta between memory and cpu percent. This creates the least amount of
+ // drift between the positional alignment of an alloc's cpu and memory representations.
+ return this.args.node.allocations
+ .filterBy('allocation.isScheduled')
+ .sort((a, b) => {
+ const deltaA = Math.abs(a.memoryPercent - a.cpuPercent);
+ const deltaB = Math.abs(b.memoryPercent - b.cpuPercent);
+ return deltaA - deltaB;
+ });
+ }
+
+ reloadNode = async () => {
+ if (this.args.node.isPartial) {
+ await this.args.node.reload();
+ this.data = this.computeData(this.dimensionsWidth);
+ }
+ };
+
+ render = (svg) => {
+ this.dimensionsWidth = svg.clientWidth - this.padding - this.paddingLeft;
+ this.data = this.computeData(this.dimensionsWidth);
+ };
+
+ updateRender = (svg) => {
+ // Only update all data when the width changes
+ const newWidth = svg.clientWidth - this.padding - this.paddingLeft;
+ if (newWidth !== this.dimensionsWidth) {
+ this.dimensionsWidth = newWidth;
+ this.data = this.computeData(this.dimensionsWidth);
+ }
+ };
+
+ highlightAllocation = (allocation, { target }) => {
+ this.activeAllocation = allocation;
+ this.args.onAllocationFocus &&
+ this.args.onAllocationFocus(allocation, target);
+ };
+
+ allocationBlur = () => {
+ this.args.onAllocationBlur && this.args.onAllocationBlur();
+ };
+
+ clearHighlight = () => {
+ this.activeAllocation = null;
+ };
+
+ selectNode = () => {
+ if (this.args.isDense && this.args.onNodeSelect) {
+ this.args.onNodeSelect(this.args.node.isSelected ? null : this.args.node);
+ }
+ };
+
+ selectAllocation = (allocation) => {
+ if (this.args.onAllocationSelect) this.args.onAllocationSelect(allocation);
+ };
+
+ containsActiveTaskGroup() {
+ return this.args.node.allocations.some(
+ (allocation) =>
+ allocation.taskGroupName === this.args.activeTaskGroup &&
+ allocation.belongsTo('job').id() === this.args.activeJobId,
+ );
+ }
+
+ computeData(width) {
+ const allocations = this.allocations;
+ let cpuOffset = 0;
+ let memoryOffset = 0;
+
+ const cpu = [];
+ const memory = [];
+ for (const allocation of allocations) {
+ const { cpuPercent, memoryPercent, isSelected } = allocation;
+ const isFirst = allocation === allocations[0];
+
+ let cpuWidth = cpuPercent * width - 1;
+ let memoryWidth = memoryPercent * width - 1;
+ if (isFirst) {
+ cpuWidth += 0.5;
+ memoryWidth += 0.5;
+ }
+ if (isSelected) {
+ cpuWidth--;
+ memoryWidth--;
+ }
+
+ cpu.push({
+ allocation,
+ offset: cpuOffset * 100,
+ percent: cpuPercent * 100,
+ width: Math.max(cpuWidth, 0),
+ x: cpuOffset * width + (isFirst ? 0 : 0.5) + (isSelected ? 0.5 : 0),
+ className: allocation.allocation.clientStatus,
+ });
+ memory.push({
+ allocation,
+ offset: memoryOffset * 100,
+ percent: memoryPercent * 100,
+ width: Math.max(memoryWidth, 0),
+ x: memoryOffset * width + (isFirst ? 0 : 0.5) + (isSelected ? 0.5 : 0),
+ className: allocation.allocation.clientStatus,
+ });
+
+ cpuOffset += cpuPercent;
+ memoryOffset += memoryPercent;
+ }
+
+ const cpuRemainder = {
+ x: cpuOffset * width + 0.5,
+ width: Math.max(width - cpuOffset * width, 0),
+ };
+ const memoryRemainder = {
+ x: memoryOffset * width + 0.5,
+ width: Math.max(width - memoryOffset * width, 0),
+ };
+
+ return {
+ cpu,
+ memory,
+ cpuRemainder,
+ memoryRemainder,
+ cpuLabel: { x: -this.paddingLeft / 2, y: this.height / 2 + this.yOffset },
+ memoryLabel: { x: -this.paddingLeft / 2, y: this.height / 2 },
+ };
+ }
+
+
+
- {{@datacenter.name}}
- {{this.scheduledAllocations.length}} Allocs
- {{@datacenter.nodes.length}} Nodes
-
- {{format-bytes
- this.aggregatedAllocationResources.memory
- start="MiB"
- }}
- /
- {{format-bytes
- this.aggregatedNodeResources.memory
- start="MiB"
- }},
- {{format-hertz
- this.aggregatedAllocationResources.cpu
- }}
- /
- {{format-hertz
- this.aggregatedNodeResources.cpu
- }}
-
-
-
-
-
-
-
+ {{#unless @isDense}}
+
+
+}
diff --git a/ui/app/components/topo-viz/node.hbs b/ui/app/components/topo-viz/node.hbs
deleted file mode 100644
index d9094426315..00000000000
--- a/ui/app/components/topo-viz/node.hbs
+++ /dev/null
@@ -1,250 +0,0 @@
-{{!
- Copyright IBM Corp. 2015, 2025
- SPDX-License-Identifier: BUSL-1.1
-~}}
-
-
+ {{#if @node.node.isDraining}}
+
- {{#unless @isDense}}
-
\ No newline at end of file
diff --git a/ui/app/components/topo-viz/node.js b/ui/app/components/topo-viz/node.js
deleted file mode 100644
index 7d94144e080..00000000000
--- a/ui/app/components/topo-viz/node.js
+++ /dev/null
@@ -1,198 +0,0 @@
-/**
- * Copyright IBM Corp. 2015, 2025
- * SPDX-License-Identifier: BUSL-1.1
- */
-
-import Component from '@glimmer/component';
-import { tracked } from '@glimmer/tracking';
-import { action } from '@ember/object';
-import { guidFor } from '@ember/object/internals';
-
-export default class TopoVizNode extends Component {
- @tracked data = { cpu: [], memory: [] };
- @tracked dimensionsWidth = 0;
- @tracked padding = 5;
- @tracked activeAllocation = null;
-
- get height() {
- return this.args.heightScale
- ? this.args.heightScale(this.args.node.memory)
- : 15;
- }
-
- get labelHeight() {
- return this.height / 2;
- }
-
- get paddingLeft() {
- const labelWidth = 20;
- return this.padding + labelWidth;
- }
-
- // Since strokes are placed centered on the perimeter of fills, The width of the stroke needs to be removed from
- // the height of the fill to match unstroked height and avoid clipping.
- get selectedHeight() {
- return this.height - 1;
- }
-
- // Since strokes are placed centered on the perimeter of fills, half the width of the stroke needs to be added to
- // the yOffset to match heights with unstroked shapes.
- get selectedYOffset() {
- return this.height + 2.5;
- }
-
- get yOffset() {
- return this.height + 2;
- }
-
- get maskHeight() {
- return this.height + this.yOffset;
- }
-
- get totalHeight() {
- return this.maskHeight + this.padding * 2;
- }
-
- get maskId() {
- return `topo-viz-node-mask-${guidFor(this)}`;
- }
-
- get count() {
- return this.allocations.length;
- }
-
- get allocations() {
- // Sort by the delta between memory and cpu percent. This creates the least amount of
- // drift between the positional alignment of an alloc's cpu and memory representations.
- return this.args.node.allocations
- .filterBy('allocation.isScheduled')
- .sort((a, b) => {
- const deltaA = Math.abs(a.memoryPercent - a.cpuPercent);
- const deltaB = Math.abs(b.memoryPercent - b.cpuPercent);
- return deltaA - deltaB;
- });
- }
-
- @action
- async reloadNode() {
- if (this.args.node.isPartial) {
- await this.args.node.reload();
- this.data = this.computeData(this.dimensionsWidth);
- }
- }
-
- @action
- render(svg) {
- this.dimensionsWidth = svg.clientWidth - this.padding - this.paddingLeft;
- this.data = this.computeData(this.dimensionsWidth);
- }
-
- @action
- updateRender(svg) {
- // Only update all data when the width changes
- const newWidth = svg.clientWidth - this.padding - this.paddingLeft;
- if (newWidth !== this.dimensionsWidth) {
- this.dimensionsWidth = newWidth;
- this.data = this.computeData(this.dimensionsWidth);
- }
- }
-
- @action
- highlightAllocation(allocation, { target }) {
- this.activeAllocation = allocation;
- this.args.onAllocationFocus &&
- this.args.onAllocationFocus(allocation, target);
- }
-
- @action
- allocationBlur() {
- this.args.onAllocationBlur && this.args.onAllocationBlur();
- }
-
- @action
- clearHighlight() {
- this.activeAllocation = null;
- }
-
- @action
- selectNode() {
- if (this.args.isDense && this.args.onNodeSelect) {
- this.args.onNodeSelect(this.args.node.isSelected ? null : this.args.node);
- }
- }
-
- @action
- selectAllocation(allocation) {
- if (this.args.onAllocationSelect) this.args.onAllocationSelect(allocation);
- }
-
- containsActiveTaskGroup() {
- return this.args.node.allocations.some(
- (allocation) =>
- allocation.taskGroupName === this.args.activeTaskGroup &&
- allocation.belongsTo('job').id() === this.args.activeJobId,
- );
- }
-
- computeData(width) {
- const allocations = this.allocations;
- let cpuOffset = 0;
- let memoryOffset = 0;
-
- const cpu = [];
- const memory = [];
- for (const allocation of allocations) {
- const { cpuPercent, memoryPercent, isSelected } = allocation;
- const isFirst = allocation === allocations[0];
-
- let cpuWidth = cpuPercent * width - 1;
- let memoryWidth = memoryPercent * width - 1;
- if (isFirst) {
- cpuWidth += 0.5;
- memoryWidth += 0.5;
- }
- if (isSelected) {
- cpuWidth--;
- memoryWidth--;
- }
-
- cpu.push({
- allocation,
- offset: cpuOffset * 100,
- percent: cpuPercent * 100,
- width: Math.max(cpuWidth, 0),
- x: cpuOffset * width + (isFirst ? 0 : 0.5) + (isSelected ? 0.5 : 0),
- className: allocation.allocation.clientStatus,
- });
- memory.push({
- allocation,
- offset: memoryOffset * 100,
- percent: memoryPercent * 100,
- width: Math.max(memoryWidth, 0),
- x: memoryOffset * width + (isFirst ? 0 : 0.5) + (isSelected ? 0.5 : 0),
- className: allocation.allocation.clientStatus,
- });
-
- cpuOffset += cpuPercent;
- memoryOffset += memoryPercent;
- }
-
- const cpuRemainder = {
- x: cpuOffset * width + 0.5,
- width: Math.max(width - cpuOffset * width, 0),
- };
- const memoryRemainder = {
- x: memoryOffset * width + 0.5,
- width: Math.max(width - memoryOffset * width, 0),
- };
-
- return {
- cpu,
- memory,
- cpuRemainder,
- memoryRemainder,
- cpuLabel: { x: -this.paddingLeft / 2, y: this.height / 2 + this.yOffset },
- memoryLabel: { x: -this.paddingLeft / 2, y: this.height / 2 },
- };
- }
-}
diff --git a/ui/app/components/trigger.js b/ui/app/components/trigger.gjs
similarity index 84%
rename from ui/app/components/trigger.js
rename to ui/app/components/trigger.gjs
index 5185b2b9aa1..1567933c00f 100644
--- a/ui/app/components/trigger.js
+++ b/ui/app/components/trigger.gjs
@@ -3,9 +3,9 @@
* SPDX-License-Identifier: BUSL-1.1
*/
-import { action } from '@ember/object';
import Component from '@glimmer/component';
import { tracked } from '@glimmer/tracking';
+import { hash } from '@ember/helper';
import { task } from 'ember-concurrency';
const noOp = () => undefined;
@@ -54,20 +54,20 @@ export default class Trigger extends Component {
this.error = null;
}
- @task(function* () {
+ triggerTask = task(async () => {
this._reset();
try {
- this.result = yield this.args.do();
+ this.result = await this.args.do();
this.onSuccess(this.result);
} catch (e) {
this.error = { Error: e };
this.onError(this.error);
}
- })
- triggerTask;
+ });
- @action
- onTrigger() {
+ onTrigger = () => {
this.triggerTask.perform();
- }
+ };
+
+ {{yield (hash data=this.data fns=this.fns)}}
}
diff --git a/ui/app/components/trigger.hbs b/ui/app/components/trigger.hbs
deleted file mode 100644
index 0df99147831..00000000000
--- a/ui/app/components/trigger.hbs
+++ /dev/null
@@ -1,6 +0,0 @@
-{{!
- Copyright IBM Corp. 2015, 2025
- SPDX-License-Identifier: BUSL-1.1
-~}}
-
-{{yield (hash data=this.data fns=this.fns)}}
\ No newline at end of file
diff --git a/ui/app/components/two-step-button.gjs b/ui/app/components/two-step-button.gjs
new file mode 100644
index 00000000000..ceaf033aef7
--- /dev/null
+++ b/ui/app/components/two-step-button.gjs
@@ -0,0 +1,159 @@
+/**
+ * Copyright IBM Corp. 2015, 2025
+ * SPDX-License-Identifier: BUSL-1.1
+ */
+
+import Component from '@glimmer/component';
+import { tracked } from '@glimmer/tracking';
+import { on } from '@ember/modifier';
+import { HdsButton } from '@hashicorp/design-system-components/components';
+import onClickOutside from 'ember-click-outside/modifiers/on-click-outside';
+
+const noOp = () => {};
+
+export default class TwoStepButton extends Component {
+ @tracked state = 'idle';
+
+ get isIdle() {
+ return this.state === 'idle';
+ }
+
+ get isPendingConfirmation() {
+ return this.state === 'prompt';
+ }
+
+ get idleText() {
+ return this.args.idleText ?? '';
+ }
+
+ get cancelText() {
+ return this.args.cancelText ?? '';
+ }
+
+ get confirmText() {
+ return this.args.confirmText ?? '';
+ }
+
+ get confirmationMessage() {
+ return this.args.confirmationMessage ?? '';
+ }
+
+ get awaitingConfirmation() {
+ return this.args.awaitingConfirmation ?? false;
+ }
+
+ get disabled() {
+ return this.args.disabled ?? false;
+ }
+
+ get alignRight() {
+ return this.args.alignRight ?? false;
+ }
+
+ get inlineText() {
+ return this.args.inlineText ?? false;
+ }
+
+ get title() {
+ return this.args.title ?? '';
+ }
+
+ get onConfirm() {
+ return this.args.onConfirm ?? noOp;
+ }
+
+ get onCancel() {
+ return this.args.onCancel ?? noOp;
+ }
+
+ get onPrompt() {
+ return this.args.onPrompt ?? noOp;
+ }
+
+ get rootClass() {
+ const classes = ['two-step-button'];
+
+ if (this.inlineText) {
+ classes.push('has-inline-text');
+ }
+
+ if (this.args.fadingBackground) {
+ classes.push('has-fading-background');
+ }
+
+ return classes.join(' ');
+ }
+
+ setToIdle = () => {
+ this.state = 'idle';
+ };
+
+ promptForConfirmation = () => {
+ this.onPrompt();
+ this.state = 'prompt';
+ };
+
+ cancel = () => {
+ this.setToIdle();
+ this.onCancel();
+ };
+
+ confirm = () => {
+ this.setToIdle();
+ this.onConfirm();
+ };
+
+ handleOutsideClick = () => {
+ if (this.isPendingConfirmation && !this.awaitingConfirmation) {
+ this.onCancel();
+ this.setToIdle();
+ }
+ };
+
+
+
- {{#if @node.node.isDraining}}
-
+ {{#if this.isIdle}}
+
+
+}
diff --git a/ui/app/components/two-step-button.hbs b/ui/app/components/two-step-button.hbs
deleted file mode 100644
index 5d5193a6754..00000000000
--- a/ui/app/components/two-step-button.hbs
+++ /dev/null
@@ -1,44 +0,0 @@
-{{!
- Copyright IBM Corp. 2015, 2025
- SPDX-License-Identifier: BUSL-1.1
-~}}
-
-{{#if this.isIdle}}
-
+
+
+
+
+
+
+}
diff --git a/ui/app/components/variable-form/job-template-editor.hbs b/ui/app/components/variable-form/job-template-editor.hbs
deleted file mode 100644
index 91b6f575d27..00000000000
--- a/ui/app/components/variable-form/job-template-editor.hbs
+++ /dev/null
@@ -1,37 +0,0 @@
-{{!
- Copyright IBM Corp. 2015, 2025
- SPDX-License-Identifier: BUSL-1.1
-~}}
-
-{{did-insert-helper this.establishKeyValues}}
-
-
-
-
-
-
\ No newline at end of file
diff --git a/ui/app/components/variable-form/job-template-editor.js b/ui/app/components/variable-form/job-template-editor.js
deleted file mode 100644
index 96652fa2454..00000000000
--- a/ui/app/components/variable-form/job-template-editor.js
+++ /dev/null
@@ -1,27 +0,0 @@
-/**
- * Copyright IBM Corp. 2015, 2025
- * SPDX-License-Identifier: BUSL-1.1
- */
-
-import { action } from '@ember/object';
-import Component from '@glimmer/component';
-import { tracked } from '@glimmer/tracking';
-
-export default class JobTemplateEditor extends Component {
- @tracked description;
- @tracked template;
- @action
- establishKeyValues() {
- this.description = this.args.keyValues.findBy('key', 'description')?.value;
- this.template = this.args.keyValues.findBy('key', 'template')?.value;
- }
-
- @action
- updateDescription(event) {
- this.args.updateKeyValue('description', event.target.value);
- }
- @action
- updateTemplate(value) {
- this.args.updateKeyValue('template', value);
- }
-}
diff --git a/ui/app/components/variable-form/namespace-filter.gjs b/ui/app/components/variable-form/namespace-filter.gjs
new file mode 100644
index 00000000000..b0d61a08a8d
--- /dev/null
+++ b/ui/app/components/variable-form/namespace-filter.gjs
@@ -0,0 +1,68 @@
+/**
+ * Copyright IBM Corp. 2015, 2025
+ * SPDX-License-Identifier: BUSL-1.1
+ */
+
+import Component from '@glimmer/component';
+import { service } from '@ember/service';
+import { fn } from '@ember/helper';
+import { on } from '@ember/modifier';
+import { didInsert } from '@ember/render-modifiers';
+import { eq } from 'ember-truth-helpers';
+import { HdsDropdown } from '@hashicorp/design-system-components/components';
+import Trigger from 'nomad-ui/components/trigger';
+
+export default class NamespaceFilter extends Component {
+ @service store;
+
+ fetchNamespaces = async () => {
+ return this.store.findAll('namespace');
+ };
+
+ formatAndSetNamespaces = () => {
+ const namespaces = this.store
+ .peekAll('namespace')
+ .map(({ name }) => ({ key: name, label: name }));
+
+ if (namespaces.length <= 1) return null;
+
+ this.args.fns.setNamespaceOptions(namespaces);
+ };
+
+
+
diff --git a/ui/app/templates/clients/client/index.hbs b/ui/app/templates/clients/client/index.hbs
index 7315f080e88..977b9ccb08f 100644
--- a/ui/app/templates/clients/client/index.hbs
+++ b/ui/app/templates/clients/client/index.hbs
@@ -522,7 +522,7 @@
/>
Driver Health,
Scheduling, and Preemption
-
+
ID
-
-
+
+
Created
-
-
+
+
Modified
-
-
+
+
Status
-
-
+
+
Job
-
-
+
+
Version
-
+
Volume
@@ -598,7 +598,7 @@
@allocation={{row.model}}
@context="node"
@onClick={{fn this.gotoAllocation row.model}}
- @data-test-allocation={{row.model.id}}
+ data-test-allocation={{row.model.id}}
/>
{{#if this.showSubTasks}}
{{#each row.model.states as |task|}}
diff --git a/ui/app/templates/clients/index.hbs b/ui/app/templates/clients/index.hbs
index 79ce278d534..3fadde2a527 100644
--- a/ui/app/templates/clients/index.hbs
+++ b/ui/app/templates/clients/index.hbs
@@ -13,7 +13,7 @@
{{#if this.nodes.length}}
Driver Health
- ID
- ID
+ Name
- State
+ >Name
+ State
Address
- Node Pool
- Datacenter
- Version
+ Node Pool
+ Datacenter
+ Version
# Volumes
# Allocs
diff --git a/ui/app/templates/evaluations.hbs b/ui/app/templates/evaluations.hbs
index 53e14b9687e..1703ecb681b 100644
--- a/ui/app/templates/evaluations.hbs
+++ b/ui/app/templates/evaluations.hbs
@@ -7,6 +7,6 @@
@crumb={{hash label="Evaluations" args=(array "evaluations.index")}}
/>
-
\ No newline at end of file
diff --git a/ui/app/templates/evaluations/index.hbs b/ui/app/templates/evaluations/index.hbs
index c9d5fd39096..9ff4bdce891 100644
--- a/ui/app/templates/evaluations/index.hbs
+++ b/ui/app/templates/evaluations/index.hbs
@@ -11,7 +11,7 @@
diff --git a/ui/app/templates/jobs/job/allocations.hbs b/ui/app/templates/jobs/job/allocations.hbs
index 15f2d53f493..340dbb8016b 100644
--- a/ui/app/templates/jobs/job/allocations.hbs
+++ b/ui/app/templates/jobs/job/allocations.hbs
@@ -12,7 +12,7 @@
+
Name
- Status
- Leader
- Name
+ Status
+ Leader
+ Address
- port
- Datacenter
- Version
+ >Address
+ port
+ Datacenter
+ Version
- ID
- Controller Health
- Node Health
- Provider
+ ID
+ Controller Health
+ Node Health
+ Provider
ID
Created
- Modified
- Health
+ Modified
+ Health
Client
Job
Version
@@ -59,7 +59,7 @@
diff --git a/ui/app/templates/storage/plugins/plugin/index.hbs b/ui/app/templates/storage/plugins/plugin/index.hbs
index a45bf5e10fc..b97ef033221 100644
--- a/ui/app/templates/storage/plugins/plugin/index.hbs
+++ b/ui/app/templates/storage/plugins/plugin/index.hbs
@@ -130,7 +130,7 @@
@@ -195,7 +195,7 @@
diff --git a/ui/app/templates/storage/volumes/dynamic-host-volume.hbs b/ui/app/templates/storage/volumes/dynamic-host-volume.hbs
index da0b5188144..16c6ae7c219 100644
--- a/ui/app/templates/storage/volumes/dynamic-host-volume.hbs
+++ b/ui/app/templates/storage/volumes/dynamic-host-volume.hbs
@@ -87,7 +87,7 @@
enumerated=true
action=(fn this.gotoAllocation row.model)
}}
- @data-test-allocation={{row.model.id}}
+ data-test-allocation={{row.model.id}}
@allocation={{row.model}}
@context="volume"
@onClick={{fn this.gotoAllocation row.model}}
diff --git a/ui/app/templates/storage/volumes/volume.hbs b/ui/app/templates/storage/volumes/volume.hbs
index 9e7a55b4061..75ecf110de2 100644
--- a/ui/app/templates/storage/volumes/volume.hbs
+++ b/ui/app/templates/storage/volumes/volume.hbs
@@ -68,7 +68,7 @@
enumerated=true
action=(fn this.gotoAllocation row.model)
}}
- @data-test-write-allocation={{row.model.id}}
+ data-test-write-allocation={{row.model.id}}
@allocation={{row.model}}
@context="volume"
@onClick={{fn this.gotoAllocation row.model}}
@@ -123,7 +123,7 @@
enumerated=true
action=(fn this.gotoAllocation row.model)
}}
- @data-test-read-allocation={{row.model.id}}
+ data-test-read-allocation={{row.model.id}}
@allocation={{row.model}}
@context="volume"
@onClick={{fn this.gotoAllocation row.model}}
diff --git a/ui/app/templates/topology.hbs b/ui/app/templates/topology.hbs
index ba62d349d32..fd18755b9fe 100644
--- a/ui/app/templates/topology.hbs
+++ b/ui/app/templates/topology.hbs
@@ -511,6 +511,7 @@
-
-
-
+
+
+
-
-
+
+
+
+ ,
+ );
+
+ assert.deepEqual(
+ findAll('[data-test-flex-masonry-item]').length,
+ items.length,
+ );
+ });
+
+ test('the @withSpacing arg adds the with-spacing class', async function (assert) {
+ const items = [];
+ const columns = 1;
+
+ await render(
+
+
+
+ ,
+ );
+
+ const containerEl = find('[data-test-flex-masonry]');
+ assert.deepEqual(containerEl.style.maxHeight, '51px');
+ assert.ok(containerEl.textContent.includes('one'));
+ assert.ok(containerEl.textContent.includes('two'));
+
+ state.height = h(500);
+ await settled();
+ assert.deepEqual(containerEl.style.maxHeight, '51px');
+
+ // The height of the div changes when reflow is called
+ await click('[data-test-flex-masonry-item]:first-child div');
+
+ assert.deepEqual(containerEl.style.maxHeight, '501px');
+ });
+
+ test('items are rendered to the DOM in the order they were passed into the component', async function (assert) {
+ const items = [
+ { text: 'One', height: h(20) },
+ { text: 'Two', height: h(100) },
+ { text: 'Three', height: h(20) },
+ { text: 'Four', height: h(20) },
+ ];
+ const columns = 2;
+
+ await render(
+
+
+
+ ,
+ );
+
+ findAll('[data-test-flex-masonry-item]').forEach((el, index) => {
+ assert.deepEqual(el.textContent.trim(), items[index].text);
+ });
+ });
+
+ test('each item gets an order property', async function (assert) {
+ const items = [
+ { text: 'One', height: h(20), expectedOrder: 0 },
+ { text: 'Two', height: h(100), expectedOrder: 3 },
+ { text: 'Three', height: h(20), expectedOrder: 1 },
+ { text: 'Four', height: h(20), expectedOrder: 2 },
+ ];
+ const columns = 2;
+
+ await render(
+
+
+
+ ,
+ );
+
+ findAll('[data-test-flex-masonry-item]').forEach((el, index) => {
+ assert.strictEqual(Number(el.style.order), items[index].expectedOrder);
+ });
+ });
+
+ test('the last item in each column gets a specific flex-basis value', async function (assert) {
+ const items = [
+ { text: 'One', height: h(20) },
+ { text: 'Two', height: h(100), flexBasis: '100px' },
+ { text: 'Three', height: h(20) },
+ { text: 'Four', height: h(100), flexBasis: '100px' },
+ { text: 'Five', height: h(20), flexBasis: '80px' },
+ { text: 'Six', height: h(20), flexBasis: '80px' },
+ ];
+ const columns = 4;
+
+ await render(
+
+
+
+ ,
+ );
+
+ findAll('[data-test-flex-masonry-item]').forEach((el, index) => {
+ if (el.style.flexBasis) {
+ assert.deepEqual(el.style.flexBasis, items[index].flexBasis);
+ }
+ });
+ });
+
+ test('when a multi-column layout becomes a single column layout, all inline-styles are reset', async function (assert) {
+ class State {
+ @tracked columns = 4;
+ }
+
+ const state = new State();
+ const items = [
+ { text: 'One', height: h(20) },
+ { text: 'Two', height: h(100) },
+ { text: 'Three', height: h(20) },
+ { text: 'Four', height: h(100) },
+ { text: 'Five', height: h(20) },
+ { text: 'Six', height: h(20) },
+ ];
+
+ await render(
+
+
+
+ ,
+ );
+
+ assert.deepEqual(find('[data-test-flex-masonry]').style.maxHeight, '101px');
+
+ state.columns = 1;
+ await settled();
+
+ findAll('[data-test-flex-masonry-item]').forEach((el) => {
+ assert.deepEqual(el.style.flexBasis, '');
+ assert.deepEqual(el.style.order, '');
+ });
+
+ assert.deepEqual(find('[data-test-flex-masonry]').style.maxHeight, '');
+ });
+});
diff --git a/ui/tests/integration/components/flex-masonry-test.js b/ui/tests/integration/components/flex-masonry-test.js
deleted file mode 100644
index 9770dac1b69..00000000000
--- a/ui/tests/integration/components/flex-masonry-test.js
+++ /dev/null
@@ -1,215 +0,0 @@
-/**
- * Copyright IBM Corp. 2015, 2025
- * SPDX-License-Identifier: BUSL-1.1
- */
-
-import { htmlSafe } from '@ember/template';
-import { click, find, findAll, render, settled } from '@ember/test-helpers';
-import { module, test } from 'qunit';
-import { setupRenderingTest } from 'ember-qunit';
-import { hbs } from 'ember-cli-htmlbars';
-import { componentA11yAudit } from 'nomad-ui/tests/helpers/a11y-audit';
-
-// Used to prevent XSS warnings in console
-const h = (height) => htmlSafe(`height:${height}px`);
-
-module('Integration | Component | FlexMasonry', function (hooks) {
- setupRenderingTest(hooks);
-
- test('presents as a single div when @items is empty', async function (assert) {
- this.setProperties({
- items: [],
- });
-
- await render(hbs`
-
-
- `);
-
- const div = find('[data-test-flex-masonry]');
- assert.ok(div);
- assert.deepEqual(div.tagName.toLowerCase(), 'div');
- assert.deepEqual(div.children.length, 0);
-
- await componentA11yAudit(this.element, assert);
- });
-
- test('each item in @items gets wrapped in a flex-masonry-item wrapper', async function (assert) {
- this.setProperties({
- items: ['one', 'two', 'three'],
- columns: 2,
- });
-
- await render(hbs`
-
-
- `);
-
- assert.deepEqual(
- findAll('[data-test-flex-masonry-item]').length,
- this.items.length,
- );
- });
-
- test('the @withSpacing arg adds the with-spacing class', async function (assert) {
- await render(hbs`
-
-
- `);
-
- assert.ok(
- find('[data-test-flex-masonry]').classList.contains('with-spacing'),
- );
- });
-
- test('individual items along with the reflow action are yielded', async function (assert) {
- this.setProperties({
- items: ['one', 'two'],
- columns: 2,
- height: h(50),
- });
-
- await render(hbs`
-
-
- `);
-
- const div = find('[data-test-flex-masonry]');
- assert.deepEqual(div.style.maxHeight, '51px');
- assert.ok(div.textContent.includes('one'));
- assert.ok(div.textContent.includes('two'));
-
- this.set('height', h(500));
- await settled();
- assert.deepEqual(div.style.maxHeight, '51px');
-
- // The height of the div changes when reflow is called
- await click('[data-test-flex-masonry-item]:first-child div');
-
- assert.deepEqual(div.style.maxHeight, '501px');
- });
-
- test('items are rendered to the DOM in the order they were passed into the component', async function (assert) {
- this.setProperties({
- items: [
- { text: 'One', height: h(20) },
- { text: 'Two', height: h(100) },
- { text: 'Three', height: h(20) },
- { text: 'Four', height: h(20) },
- ],
- columns: 2,
- });
-
- await render(hbs`
-
-
- `);
-
- findAll('[data-test-flex-masonry-item]').forEach((el, index) => {
- assert.deepEqual(el.textContent.trim(), this.items[index].text);
- });
- });
-
- test('each item gets an order property', async function (assert) {
- this.setProperties({
- items: [
- { text: 'One', height: h(20), expectedOrder: 0 },
- { text: 'Two', height: h(100), expectedOrder: 3 },
- { text: 'Three', height: h(20), expectedOrder: 1 },
- { text: 'Four', height: h(20), expectedOrder: 2 },
- ],
- columns: 2,
- });
-
- await render(hbs`
-
-
- `);
-
- findAll('[data-test-flex-masonry-item]').forEach((el, index) => {
- assert.strictEqual(
- Number(el.style.order),
- this.items[index].expectedOrder,
- );
- });
- });
-
- test('the last item in each column gets a specific flex-basis value', async function (assert) {
- this.setProperties({
- items: [
- { text: 'One', height: h(20) },
- { text: 'Two', height: h(100), flexBasis: '100px' },
- { text: 'Three', height: h(20) },
- { text: 'Four', height: h(100), flexBasis: '100px' },
- { text: 'Five', height: h(20), flexBasis: '80px' },
- { text: 'Six', height: h(20), flexBasis: '80px' },
- ],
- columns: 4,
- });
-
- await render(hbs`
-
-
- `);
-
- findAll('[data-test-flex-masonry-item]').forEach((el, index) => {
- if (el.style.flexBasis) {
- assert.deepEqual(el.style.flexBasis, this.items[index].flexBasis);
- }
- });
- });
-
- test('when a multi-column layout becomes a single column layout, all inline-styles are reset', async function (assert) {
- this.setProperties({
- items: [
- { text: 'One', height: h(20) },
- { text: 'Two', height: h(100) },
- { text: 'Three', height: h(20) },
- { text: 'Four', height: h(100) },
- { text: 'Five', height: h(20) },
- { text: 'Six', height: h(20) },
- ],
- columns: 4,
- });
-
- await render(hbs`
-
-
- `);
-
- assert.deepEqual(find('[data-test-flex-masonry]').style.maxHeight, '101px');
-
- this.set('columns', 1);
- await settled();
-
- findAll('[data-test-flex-masonry-item]').forEach((el) => {
- assert.deepEqual(el.style.flexBasis, '');
- assert.deepEqual(el.style.order, '');
- });
-
- assert.deepEqual(find('[data-test-flex-masonry]').style.maxHeight, '');
- });
-});
diff --git a/ui/tests/integration/components/fs/file-test.js b/ui/tests/integration/components/fs/file-test.gjs
similarity index 87%
rename from ui/tests/integration/components/fs/file-test.js
rename to ui/tests/integration/components/fs/file-test.gjs
index 9429967449f..4c27da2b4e6 100644
--- a/ui/tests/integration/components/fs/file-test.js
+++ b/ui/tests/integration/components/fs/file-test.gjs
@@ -6,7 +6,7 @@
import { module, test } from 'qunit';
import { setupRenderingTest } from 'ember-qunit';
import { find, click, render, settled } from '@ember/test-helpers';
-import { hbs } from 'ember-cli-htmlbars';
+import FsFile from 'nomad-ui/components/fs/file';
import Pretender from 'pretender';
import { logEncode } from '../../../../mirage/data/logs';
import { componentA11yAudit } from 'nomad-ui/tests/helpers/a11y-audit';
@@ -14,6 +14,19 @@ import { componentA11yAudit } from 'nomad-ui/tests/helpers/a11y-audit';
const { assign } = Object;
const HOST = '1.1.1.1:1111';
+function renderFile() {
+ return render(
+
+
-
- `);
+ await render(
+
+
+
+ ,
+ );
assert.ok(
find('[data-test-header] [data-test-yield-spy]'),
@@ -269,7 +285,7 @@ module('Integration | Component | fs/file', function (hooks) {
const props = makeProps(fileStat('application/json', 5000));
this.setProperties(props);
- await render(commonTemplate);
+ await renderFile.call(this);
const classes = Array.from(find('[data-test-file-box]').classList);
assert.ok(classes.includes('is-dark'), 'Body is dark');
@@ -280,13 +296,13 @@ module('Integration | Component | fs/file', function (hooks) {
const props = makeProps(fileStat('image/jpeg', 5000));
this.setProperties(props);
- await render(commonTemplate);
+ await renderFile.call(this);
let classes = Array.from(find('[data-test-file-box]').classList);
assert.notOk(classes.includes('is-dark'), 'Body is not dark');
assert.notOk(classes.includes('is-full-bleed'), 'Body is not full-bleed');
- this.set('stat.ContentType', 'something/unknown');
+ this.set('stat', { ...this.stat, ContentType: 'something/unknown' });
await settled();
diff --git a/ui/tests/integration/components/gauge-chart-test.js b/ui/tests/integration/components/gauge-chart-test.gjs
similarity index 68%
rename from ui/tests/integration/components/gauge-chart-test.js
rename to ui/tests/integration/components/gauge-chart-test.gjs
index 2b0add4f8b8..7d2ce28de82 100644
--- a/ui/tests/integration/components/gauge-chart-test.js
+++ b/ui/tests/integration/components/gauge-chart-test.gjs
@@ -6,9 +6,9 @@
import { find, render } from '@ember/test-helpers';
import { module, test } from 'qunit';
import { setupRenderingTest } from 'ember-qunit';
-import { hbs } from 'ember-cli-htmlbars';
import { componentA11yAudit } from 'nomad-ui/tests/helpers/a11y-audit';
import { create } from 'ember-cli-page-object';
+import GaugeChartComponent from 'nomad-ui/components/gauge-chart';
import gaugeChart from 'nomad-ui/tests/pages/components/gauge-chart';
const GaugeChart = create(gaugeChart());
@@ -24,34 +24,38 @@ module('Integration | Component | gauge chart', function (hooks) {
test('presents as an svg, a formatted percentage, and a label', async function (assert) {
const props = commonProperties();
- this.setProperties(props);
- await render(hbs`
-
-
- `);
+ const job = {};
+
+ await render(
+
+
+
+ ,
+ );
assert.ok(find('[data-test-subnav="job"]'), 'Job subnav is rendered');
});
@@ -42,13 +44,13 @@ module('Integration | Component | job-page/parts/body', function (hooks) {
type: 'service',
});
- this.set('job', job);
-
- await render(hbs`
-
-
- `);
+ await render(
+
+
+
+ ,
+ );
const subnavLabels = findAll('[data-test-tab]').map((anchor) =>
anchor.textContent.trim(),
@@ -77,13 +79,13 @@ module('Integration | Component | job-page/parts/body', function (hooks) {
type: 'batch',
});
- this.set('job', job);
-
- await render(hbs`
-
-
- `);
+ await render(
+
+
+
+ ,
+ );
const subnavLabels = findAll('[data-test-tab]').map((anchor) =>
anchor.textContent.trim(),
@@ -103,13 +105,15 @@ module('Integration | Component | job-page/parts/body', function (hooks) {
});
test('body yields content to a section after the subnav', async function (assert) {
- this.set('job', {});
-
- await render(hbs`
-
-
- `);
+ const job = {};
+
+ await render(
+
+
+
+ ,
+ );
assert.ok(
find('[data-test-subnav="job"] + .section > .inner-content'),
diff --git a/ui/tests/integration/components/job-page/parts/children-test.js b/ui/tests/integration/components/job-page/parts/children-test.gjs
similarity index 77%
rename from ui/tests/integration/components/job-page/parts/children-test.js
rename to ui/tests/integration/components/job-page/parts/children-test.gjs
index c512f39afc4..59301f20d44 100644
--- a/ui/tests/integration/components/job-page/parts/children-test.js
+++ b/ui/tests/integration/components/job-page/parts/children-test.gjs
@@ -3,10 +3,10 @@
* SPDX-License-Identifier: BUSL-1.1
*/
-import { hbs } from 'ember-cli-htmlbars';
import { findAll, find, render } from '@ember/test-helpers';
import { module, test } from 'qunit';
import { setupRenderingTest } from 'ember-qunit';
+import JobPagePartsChildren from 'nomad-ui/components/job-page/parts/children';
import { startMirage } from 'nomad-ui/tests/helpers/start-mirage';
import { componentA11yAudit } from 'nomad-ui/tests/helpers/a11y-audit';
@@ -52,15 +52,18 @@ module('Integration | Component | job-page/parts/children', function (hooks) {
this.setProperties(props(parent, children));
- await render(hbs`
-
- <:after as |c|>
-
- `);
+ await render(
+
+
+ <:after as |c|>
+
+ ,
+ );
const sortedAnnotations = annotations.sortBy('x');
- findAll('[data-test-annotation]').forEach((annotation, idx) => {
- const datum = sortedAnnotations[idx];
+ findAll('[data-test-annotation]').forEach((annotation, index) => {
+ const datum = sortedAnnotations[index];
assert.deepEqual(
annotation.querySelector('button').getAttribute('title'),
`${datum.type} event at ${datum.x}`,
@@ -82,21 +81,24 @@ module('Integration | Component | line-chart', function (hooks) {
],
});
- await render(hbs`
-
- <:after as |c|>
-
- `);
+ await render(
+
+
+ <:after as |c|>
+
+ ,
+ );
const sortedAnnotations = annotations.sortBy('x').reverse();
- findAll('[data-test-annotation]').forEach((annotation, idx) => {
- const datum = sortedAnnotations[idx];
+ findAll('[data-test-annotation]').forEach((annotation, index) => {
+ const datum = sortedAnnotations[index];
assert.deepEqual(
annotation.querySelector('button').getAttribute('title'),
`${datum.type} event at ${moment(datum.x).format('MMM DD, HH:mm')}`,
@@ -115,16 +117,18 @@ module('Integration | Component | line-chart', function (hooks) {
click: sinon.spy(),
});
- await render(hbs`
-
- <:after as |c|>
-
- `);
+ await render(
+
+
+ <:after as |c|>
+
+ ,
+ );
await click('[data-test-annotation] button');
assert.ok(this.click.calledWith(annotations[0]));
@@ -145,23 +149,22 @@ module('Integration | Component | line-chart', function (hooks) {
click: sinon.spy(),
});
- await render(hbs`
-
- <:after as |c|>
-
- `);
+ await render(
+
+
+ <:after as |c|>
+
+ ,
+ );
- const annotationEls = findAll('[data-test-annotation]');
+ const annotationElements = findAll('[data-test-annotation]');
annotations
.sortBy('y')
.reverse()
.forEach((annotation, index) => {
assert.deepEqual(
- annotationEls[index].textContent.trim(),
+ annotationElements[index].textContent.trim(),
annotation.label,
);
});
@@ -221,44 +226,41 @@ module('Integration | Component | line-chart', function (hooks) {
],
});
- await render(hbs`
-
- {{p.currentPage}} of {{p.totalPages}}
- first
- prev
- {{#each p.pageLinks as |link|}}
- {{link.pageNumber}}
- {{/each}}
- next
- last
-
- {{#each p.list as |item|}}
-
- `);
+ const source = list100;
+
+ await render(
+
+
+ {{p.currentPage}} of {{p.totalPages}}
+ first
+ prev
+ {{#each p.pageLinks as |link|}}
+ {{link.pageNumber}}
+ {{/each}}
+ next
+ last
+
+ {{#each p.list as |item|}}
+
+ ,
+ );
assert.notOk(
findAll('.first').length,
@@ -91,17 +96,18 @@ module('Integration | Component | list pagination', function (hooks) {
});
test('the size property', async function (assert) {
- this.setProperties({
- size: 5,
- source: list100,
- });
- await render(hbs`
-
- {{p.currentPage}} of {{p.totalPages}}
-
- `);
+ const size = 5;
+ const source = list100;
- const totalPages = Math.ceil(this.source.length / this.size);
+ await render(
+
+
+ {{p.currentPage}} of {{p.totalPages}}
+
+ ,
+ );
+
+ const totalPages = Math.ceil(source.length / size);
assert.deepEqual(
find('.page-info').textContent,
`1 of ${totalPages}`,
@@ -117,13 +123,23 @@ module('Integration | Component | list pagination', function (hooks) {
currentPage: 5,
});
- await render(hbs`
-
- {{#each p.pageLinks as |link|}}
- {{link.pageNumber}}
- {{/each}}
-
- `);
+ await render(
+
+
+ {{#each p.pageLinks as |link|}}
+ {{link.pageNumber}}
+ {{/each}}
+
+ ,
+ );
testSpread.call(this, assert);
this.set('spread', 4);
@@ -137,13 +153,20 @@ module('Integration | Component | list pagination', function (hooks) {
currentPage: 5,
});
- await render(hbs`
-
- {{#each p.list as |item|}}
-
- `);
+ await render(
+
+
+ {{#each p.list as |item|}}
+
+ ,
+ );
testItems.call(this, assert);
this.set('currentPage', 2);
@@ -156,23 +179,28 @@ module('Integration | Component | list pagination', function (hooks) {
skip('pagination links link with query params', function () {});
test('there are no pagination links when source is less than page size', async function (assert) {
- this.set('source', list100.slice(0, 10));
- await render(hbs`
-
- {{p.currentPage}} of {{p.totalPages}}
- first
- prev
- {{#each p.pageLinks as |link|}}
- {{link.pageNumber}}
- {{/each}}
- next
- last
-
- {{#each p.list as |item|}}
-
- `);
+ const source = list100.slice(0, 10);
+
+ await render(
+
+
+ {{p.currentPage}} of {{p.totalPages}}
+ first
+ prev
+ {{#each p.pageLinks as |link|}}
+ {{link.pageNumber}}
+ {{/each}}
+ next
+ last
+
+ {{#each p.list as |item|}}
+
+ ,
+ );
assert.notOk(findAll('.first').length, 'No first link');
assert.notOk(findAll('.prev').length, 'No prev link');
@@ -182,7 +210,7 @@ module('Integration | Component | list pagination', function (hooks) {
assert.deepEqual(find('.page-info').textContent, '1 of 1', 'Only one page');
assert.deepEqual(
findAll('.item').length,
- this.source.length,
+ source.length,
'Number of items equals length of source',
);
});
@@ -198,18 +226,28 @@ module('Integration | Component | list pagination', function (hooks) {
const totalPages = Math.ceil(this.source.length / this.size);
- await render(hbs`
-
- {{p.currentPage}} of {{p.totalPages}}
- first
- prev
- {{#each p.pageLinks as |link|}}
- {{link.pageNumber}}
- {{/each}}
- next
- last
-
- `);
+ await render(
+
+
+ {{p.currentPage}} of {{p.totalPages}}
+ first
+ prev
+ {{#each p.pageLinks as |link|}}
+ {{link.pageNumber}}
+ {{/each}}
+ next
+ last
+
+ ,
+ );
assert.ok(findAll('.first').length, 'First page still exists');
assert.ok(findAll('.prev').length, 'Prev page still exists');
diff --git a/ui/tests/integration/components/list-table-test.js b/ui/tests/integration/components/list-table-test.gjs
similarity index 70%
rename from ui/tests/integration/components/list-table-test.js
rename to ui/tests/integration/components/list-table-test.gjs
index ffb66f2aa74..b3d76bf6a90 100644
--- a/ui/tests/integration/components/list-table-test.js
+++ b/ui/tests/integration/components/list-table-test.gjs
@@ -6,9 +6,9 @@
import { findAll, find, render } from '@ember/test-helpers';
import { module, skip, test } from 'qunit';
import { setupRenderingTest } from 'ember-qunit';
-import faker from 'nomad-ui/mirage/faker';
-import { hbs } from 'ember-cli-htmlbars';
import { componentA11yAudit } from 'nomad-ui/tests/helpers/a11y-audit';
+import ListTable from 'nomad-ui/components/list-table';
+import faker from 'nomad-ui/mirage/faker';
module('Integration | Component | list table', function (hooks) {
setupRenderingTest(hooks);
@@ -23,16 +23,19 @@ module('Integration | Component | list table', function (hooks) {
// thead
test('component exposes a thead contextual component', async function (assert) {
- this.set('source', commonTable);
- await render(hbs`
-
-
- First Name
- Last Name
- Age
-
-
- `);
+ const source = commonTable;
+
+ await render(
+
+
+
+ First Name
+ Last Name
+ Age
+
+
+ ,
+ );
assert.ok(findAll('.head').length, 'Table head is rendered');
assert.deepEqual(
@@ -44,23 +47,29 @@ module('Integration | Component | list table', function (hooks) {
// tbody
test('component exposes a tbody contextual component', async function (assert) {
- this.setProperties({
- source: commonTable,
- sortProperty: 'firstName',
- sortDescending: false,
- });
- await render(hbs`
-
-
-
- {{row.model.firstName}}
- {{row.model.lastName}}
- {{row.model.age}}
- {{index}}
-
-
-
- `);
+ const source = commonTable;
+ const sortProperty = 'firstName';
+ const sortDescending = false;
+
+ await render(
+
+
+
+
+ {{row.model.firstName}}
+ {{row.model.lastName}}
+ {{row.model.age}}
+ {{index}}
+
+
+
+ ,
+ );
assert.ok(findAll('.body').length, 'Table body is rendered');
assert.deepEqual(
@@ -71,13 +80,13 @@ module('Integration | Component | list table', function (hooks) {
assert.deepEqual(
findAll('.item').length,
- this.source.length,
+ source.length,
'Each item gets its own row',
);
// list-table is not responsible for sorting, only dispatching sort events. The table is still
// rendered in index-order.
- this.source.forEach((item, index) => {
+ source.forEach((item, index) => {
const $item = this.element.querySelectorAll('.item')[index];
assert.strictEqual(
$item.querySelectorAll('td')[0].textContent.trim(),
diff --git a/ui/tests/integration/components/multi-select-dropdown-test.js b/ui/tests/integration/components/multi-select-dropdown-test.gjs
similarity index 91%
rename from ui/tests/integration/components/multi-select-dropdown-test.js
rename to ui/tests/integration/components/multi-select-dropdown-test.gjs
index dde42e73c83..297ce82400f 100644
--- a/ui/tests/integration/components/multi-select-dropdown-test.js
+++ b/ui/tests/integration/components/multi-select-dropdown-test.gjs
@@ -14,8 +14,8 @@ import {
import { module, test } from 'qunit';
import { setupRenderingTest } from 'ember-qunit';
import sinon from 'sinon';
-import { hbs } from 'ember-cli-htmlbars';
import { componentA11yAudit } from 'nomad-ui/tests/helpers/a11y-audit';
+import MultiSelectDropdown from 'nomad-ui/components/multi-select-dropdown';
const TAB = 9;
const ESC = 27;
@@ -40,18 +40,22 @@ module('Integration | Component | multi-select dropdown', function (hooks) {
onSelect: sinon.spy(),
});
- const commonTemplate = hbs`
-
+
+ ,
+ );
const allocationRequest = this.server.pretender.handledRequests.find(
- (req) => req.url.startsWith('/v1/allocation'),
+ (request) => request.url.startsWith('/v1/allocation'),
);
assert.deepEqual(
allocationRequest.url,
@@ -66,9 +70,13 @@ module('Integration | Component | plugin allocation row', function (hooks) {
plugin: pluginRecord.get('controllers.firstObject'),
});
- await render(hbs`
-
+
+ ,
+ );
const [statsRequest] = this.server.pretender.handledRequests.slice(-1);
@@ -94,12 +102,16 @@ module('Integration | Component | plugin allocation row', function (hooks) {
plugin: pluginRecord.get('controllers.firstObject'),
});
- await render(hbs`
-
+
+ ,
+ );
const allocationRequest = this.server.pretender.handledRequests.find(
- (req) => req.url.startsWith('/v1/allocation'),
+ (request) => request.url.startsWith('/v1/allocation'),
);
assert.deepEqual(
@@ -111,7 +123,7 @@ module('Integration | Component | plugin allocation row', function (hooks) {
await settled();
const latestAllocationRequest = this.server.pretender.handledRequests
- .filter((req) => req.url.startsWith('/v1/allocation'))
+ .filter((request) => request.url.startsWith('/v1/allocation'))
.reverse()[0];
assert.deepEqual(
diff --git a/ui/tests/integration/components/policy-editor-test.js b/ui/tests/integration/components/policy-editor-test.gjs
similarity index 72%
rename from ui/tests/integration/components/policy-editor-test.js
rename to ui/tests/integration/components/policy-editor-test.gjs
index 88972b92cd7..47e2397a0a4 100644
--- a/ui/tests/integration/components/policy-editor-test.js
+++ b/ui/tests/integration/components/policy-editor-test.gjs
@@ -6,14 +6,14 @@
import { module, test } from 'qunit';
import { setupRenderingTest } from 'ember-qunit';
import { render } from '@ember/test-helpers';
-import { hbs } from 'ember-cli-htmlbars';
import { componentA11yAudit } from 'nomad-ui/tests/helpers/a11y-audit';
+import PolicyEditor from 'nomad-ui/components/policy-editor';
module('Integration | Component | policy-editor', function (hooks) {
setupRenderingTest(hooks);
test('it renders', async function (assert) {
- await render(hbs`
+
+ ,
+ );
+
+ assert.ok(PopoverMenu.isPresent);
+ assert.ok(PopoverMenu.labelHasIcon);
+ assert.notOk(PopoverMenu.menu.isOpen);
+ assert.deepEqual(PopoverMenu.label, props.label);
+ await componentA11yAudit(this.element, assert);
+ });
+
+ test('clicking the trigger button toggles the popover menu', async function (assert) {
+ const props = commonProperties();
+
+ await render(
+
+
+
+ ,
+ );
+ assert.notOk(PopoverMenu.menu.isOpen);
+
+ await PopoverMenu.toggle();
+
+ assert.ok(PopoverMenu.menu.isOpen);
+ await componentA11yAudit(this.element, assert);
+ });
+
+ test('the trigger gets the triggerClass prop assigned as a class', async function (assert) {
+ const specialClass = 'is-special';
+ const props = commonProperties({ triggerClass: specialClass });
+
+ await render(
+
+
+
+ ,
+ );
+
+ assert.dom('[data-test-popover-trigger]').hasClass('is-special');
+ });
+
+ test('pressing DOWN ARROW when the trigger is focused opens the popover menu', async function (assert) {
+ const props = commonProperties();
+
+ await render(
+
+
+
+ ,
+ );
+ assert.notOk(PopoverMenu.menu.isOpen);
+
+ await PopoverMenu.focus();
+ await PopoverMenu.downArrow();
+
+ assert.ok(PopoverMenu.menu.isOpen);
+ });
+
+ test('pressing TAB when the trigger button is focused and the menu is open focuses the first focusable element in the popover menu', async function (assert) {
+ const props = commonProperties();
+
+ await render(
+
+
+
+ ,
+ );
+
+ await PopoverMenu.focus();
+ await PopoverMenu.downArrow();
+
+ assert.dom('[data-test-popover-trigger]').isFocused();
+
+ await PopoverMenu.focusNext();
+
+ assert.dom('#mock-input-for-test').isFocused();
+ });
+
+ test('pressing ESC when the popover menu is open closes the menu and returns focus to the trigger button', async function (assert) {
+ const props = commonProperties();
+
+ await render(
+
+
+
+ ,
+ );
+
+ await PopoverMenu.toggle();
+ assert.ok(PopoverMenu.menu.isOpen);
+
+ await PopoverMenu.esc();
+
+ assert.notOk(PopoverMenu.menu.isOpen);
+ });
+
+ test('the ember-basic-dropdown object is yielded as context, including the close action', async function (assert) {
+ const props = commonProperties();
+
+ await render(
+
+
+
+ ,
+ );
+
+ await PopoverMenu.toggle();
+ assert.ok(PopoverMenu.menu.isOpen);
+
+ await click('#mock-button-for-test');
+ assert.notOk(PopoverMenu.menu.isOpen);
+ });
+});
diff --git a/ui/tests/integration/components/popover-menu-test.js b/ui/tests/integration/components/popover-menu-test.js
deleted file mode 100644
index 28bee1fc8d1..00000000000
--- a/ui/tests/integration/components/popover-menu-test.js
+++ /dev/null
@@ -1,123 +0,0 @@
-/**
- * Copyright IBM Corp. 2015, 2025
- * SPDX-License-Identifier: BUSL-1.1
- */
-
-import { click, render } from '@ember/test-helpers';
-import { module, test } from 'qunit';
-import { setupRenderingTest } from 'ember-qunit';
-import { hbs } from 'ember-cli-htmlbars';
-import { componentA11yAudit } from 'nomad-ui/tests/helpers/a11y-audit';
-import { create } from 'ember-cli-page-object';
-import popoverMenuPageObject from 'nomad-ui/tests/pages/components/popover-menu';
-
-const PopoverMenu = create(popoverMenuPageObject());
-
-module('Integration | Component | popover-menu', function (hooks) {
- setupRenderingTest(hooks);
-
- const commonProperties = (overrides) =>
- Object.assign(
- {
- triggerClass: '',
- label: 'Trigger Label',
- },
- overrides,
- );
-
- const commonTemplate = hbs`
-
-
- `;
-
- test('presents as a button with a chevron-down icon', async function (assert) {
- const props = commonProperties();
- this.setProperties(props);
- await render(commonTemplate);
-
- assert.ok(PopoverMenu.isPresent);
- assert.ok(PopoverMenu.labelHasIcon);
- assert.notOk(PopoverMenu.menu.isOpen);
- assert.deepEqual(PopoverMenu.label, props.label);
- await componentA11yAudit(this.element, assert);
- });
-
- test('clicking the trigger button toggles the popover menu', async function (assert) {
- const props = commonProperties();
- this.setProperties(props);
- await render(commonTemplate);
- assert.notOk(PopoverMenu.menu.isOpen);
-
- await PopoverMenu.toggle();
-
- assert.ok(PopoverMenu.menu.isOpen);
- await componentA11yAudit(this.element, assert);
- });
-
- test('the trigger gets the triggerClass prop assigned as a class', async function (assert) {
- const specialClass = 'is-special';
- const props = commonProperties({ triggerClass: specialClass });
- this.setProperties(props);
- await render(commonTemplate);
-
- assert.dom('[data-test-popover-trigger]').hasClass('is-special');
- });
-
- test('pressing DOWN ARROW when the trigger is focused opens the popover menu', async function (assert) {
- const props = commonProperties();
- this.setProperties(props);
- await render(commonTemplate);
- assert.notOk(PopoverMenu.menu.isOpen);
-
- await PopoverMenu.focus();
- await PopoverMenu.downArrow();
-
- assert.ok(PopoverMenu.menu.isOpen);
- });
-
- test('pressing TAB when the trigger button is focused and the menu is open focuses the first focusable element in the popover menu', async function (assert) {
- const props = commonProperties();
- this.setProperties(props);
- await render(commonTemplate);
-
- await PopoverMenu.focus();
- await PopoverMenu.downArrow();
-
- assert.dom('[data-test-popover-trigger]').isFocused();
-
- await PopoverMenu.focusNext();
-
- assert.dom('#mock-input-for-test').isFocused();
- });
-
- test('pressing ESC when the popover menu is open closes the menu and returns focus to the trigger button', async function (assert) {
- const props = commonProperties();
- this.setProperties(props);
- await render(commonTemplate);
-
- await PopoverMenu.toggle();
- assert.ok(PopoverMenu.menu.isOpen);
-
- await PopoverMenu.esc();
-
- assert.notOk(PopoverMenu.menu.isOpen);
- });
-
- test('the ember-basic-dropdown object is yielded as context, including the close action', async function (assert) {
- const props = commonProperties();
- this.setProperties(props);
- await render(commonTemplate);
-
- await PopoverMenu.toggle();
- assert.ok(PopoverMenu.menu.isOpen);
-
- await click('#mock-button-for-test');
- assert.notOk(PopoverMenu.menu.isOpen);
- });
-});
diff --git a/ui/tests/integration/components/primary-metric/allocation-test.js b/ui/tests/integration/components/primary-metric/allocation-test.gjs
similarity index 85%
rename from ui/tests/integration/components/primary-metric/allocation-test.js
rename to ui/tests/integration/components/primary-metric/allocation-test.gjs
index 2cc38f54f6e..5098eb23938 100644
--- a/ui/tests/integration/components/primary-metric/allocation-test.js
+++ b/ui/tests/integration/components/primary-metric/allocation-test.gjs
@@ -7,10 +7,10 @@ import { setupRenderingTest } from 'ember-qunit';
import { module, test } from 'qunit';
import { findAll, render } from '@ember/test-helpers';
import { initialize as fragmentSerializerInitializer } from 'nomad-ui/initializers/fragment-serializer';
-import { hbs } from 'ember-cli-htmlbars';
import { setupPrimaryMetricMocks, primaryMetric } from './primary-metric';
import { componentA11yAudit } from 'nomad-ui/tests/helpers/a11y-audit';
import { startMirage } from 'nomad-ui/tests/helpers/start-mirage';
+import PrimaryMetricAllocation from 'nomad-ui/components/primary-metric/allocation';
const mockTasks = [
{ task: 'One', reservedCPU: 200, reservedMemory: 500, cpu: [], memory: [] },
@@ -41,12 +41,6 @@ module('Integration | Component | PrimaryMetric::Allocation', function (hooks) {
this.server.shutdown();
});
- const template = hbs`
-
- {{this.label}}
-
- `;
+ const renderStepperInput = async (props) => {
+ await render(
+
+
+ {{props.label}}
+
+ ,
+ );
+ };
test('basic appearance includes a label, an input, and two buttons', async function (assert) {
- this.setProperties(commonProperties());
+ const props = commonProperties();
- await render(commonTemplate);
+ await renderStepperInput(props);
- assert.strictEqual(StepperInput.label, this.label);
- assert.strictEqual(Number(StepperInput.input.value), this.value);
+ assert.strictEqual(StepperInput.label, props.label);
+ assert.strictEqual(Number(StepperInput.input.value), props.value);
assert.ok(StepperInput.decrement.isPresent);
assert.ok(StepperInput.increment.isPresent);
assert.ok(
- StepperInput.decrement.classNames.split(' ').includes(this.classVariant),
+ StepperInput.decrement.classNames.split(' ').includes(props.classVariant),
);
assert.ok(
- StepperInput.increment.classNames.split(' ').includes(this.classVariant),
+ StepperInput.increment.classNames.split(' ').includes(props.classVariant),
);
await componentA11yAudit(this.element, assert);
});
test('clicking the increment and decrement buttons immediately changes the shown value in the input but debounces the onUpdate call', async function (assert) {
- this.setProperties(commonProperties());
+ const props = commonProperties();
- const baseValue = this.value;
+ const baseValue = props.value;
- await render(commonTemplate);
+ await renderStepperInput(props);
const incrementButton = find('[data-test-stepper-increment]');
const decrementButton = find('[data-test-stepper-decrement]');
incrementButton.click();
assert.strictEqual(Number(StepperInput.input.value), baseValue + 1);
- assert.strictEqual(this.onChange.callCount, 0);
+ assert.strictEqual(props.onChange.callCount, 0);
decrementButton.click();
assert.strictEqual(Number(StepperInput.input.value), baseValue);
- assert.strictEqual(this.onChange.callCount, 0);
+ assert.strictEqual(props.onChange.callCount, 0);
decrementButton.click();
assert.strictEqual(Number(StepperInput.input.value), baseValue - 1);
- assert.strictEqual(this.onChange.callCount, 0);
+ assert.strictEqual(props.onChange.callCount, 0);
await settled();
- assert.ok(this.onChange.calledOnceWithExactly(baseValue - 1));
+ assert.ok(props.onChange.calledOnceWithExactly(baseValue - 1));
});
test('the increment button is disabled when the internal value is the max value', async function (assert) {
- this.setProperties(commonProperties());
- this.set('value', this.max);
+ const props = commonProperties();
+ props.value = props.max;
- await render(commonTemplate);
+ await renderStepperInput(props);
assert.ok(StepperInput.increment.isDisabled);
});
test('the decrement button is disabled when the internal value is the min value', async function (assert) {
- this.setProperties(commonProperties());
- this.set('value', this.min);
+ const props = commonProperties();
+ props.value = props.min;
- await render(commonTemplate);
+ await renderStepperInput(props);
assert.ok(StepperInput.decrement.isDisabled);
});
test('the text input does not call the onUpdate function on oninput', async function (assert) {
- this.setProperties(commonProperties());
+ const props = commonProperties();
const newValue = 8;
- await render(commonTemplate);
+ await renderStepperInput(props);
const input = find('[data-test-stepper-input]');
input.value = newValue;
assert.strictEqual(Number(StepperInput.input.value), newValue);
- assert.notOk(this.onChange.called);
+ assert.notOk(props.onChange.called);
await triggerEvent(input, 'input');
assert.strictEqual(Number(StepperInput.input.value), newValue);
- assert.notOk(this.onChange.called);
+ assert.notOk(props.onChange.called);
await triggerEvent(input, 'change');
assert.strictEqual(Number(StepperInput.input.value), newValue);
- assert.ok(this.onChange.calledWith(newValue));
+ assert.ok(props.onChange.calledWith(newValue));
});
test('the text input does call the onUpdate function on onchange', async function (assert) {
- this.setProperties(commonProperties());
+ const props = commonProperties();
const newValue = 8;
- await render(commonTemplate);
+ await renderStepperInput(props);
await StepperInput.input.fill(newValue);
await settled();
assert.strictEqual(Number(StepperInput.input.value), newValue);
- assert.ok(this.onChange.calledWith(newValue));
+ assert.ok(props.onChange.calledWith(newValue));
});
test('text input limits input to the bounds of the min/max range', async function (assert) {
- this.setProperties(commonProperties());
- let newValue = this.max + 1;
+ const props = commonProperties();
+ let newValue = props.max + 1;
- await render(commonTemplate);
+ await renderStepperInput(props);
await StepperInput.input.fill(newValue);
await settled();
- assert.strictEqual(Number(StepperInput.input.value), this.max);
- assert.ok(this.onChange.calledWith(this.max));
+ assert.strictEqual(Number(StepperInput.input.value), props.max);
+ assert.ok(props.onChange.calledWith(props.max));
- newValue = this.min - 1;
+ newValue = props.min - 1;
await StepperInput.input.fill(newValue);
await settled();
- assert.strictEqual(Number(StepperInput.input.value), this.min);
- assert.ok(this.onChange.calledWith(this.min));
+ assert.strictEqual(Number(StepperInput.input.value), props.min);
+ assert.ok(props.onChange.calledWith(props.min));
});
test('pressing ESC in the text input reverts the text value back to the current value', async function (assert) {
- this.setProperties(commonProperties());
+ const props = commonProperties();
const newValue = 8;
- await render(commonTemplate);
+ await renderStepperInput(props);
const input = find('[data-test-stepper-input]');
@@ -170,13 +175,13 @@ module('Integration | Component | stepper input', function (hooks) {
assert.strictEqual(Number(StepperInput.input.value), newValue);
await StepperInput.input.esc();
- assert.strictEqual(Number(StepperInput.input.value), this.value);
+ assert.strictEqual(Number(StepperInput.input.value), props.value);
});
test('clicking the label focuses in the input', async function (assert) {
- this.setProperties(commonProperties());
+ const props = commonProperties();
- await render(commonTemplate);
+ await renderStepperInput(props);
await StepperInput.clickLabel();
const input = find('[data-test-stepper-input]');
@@ -184,40 +189,40 @@ module('Integration | Component | stepper input', function (hooks) {
});
test('focusing the input selects the input value', async function (assert) {
- this.setProperties(commonProperties());
+ const props = commonProperties();
- await render(commonTemplate);
+ await renderStepperInput(props);
await StepperInput.input.focus();
assert.strictEqual(
window.getSelection().toString().trim(),
- this.value.toString(),
+ props.value.toString(),
);
});
test('entering a fractional value floors the value', async function (assert) {
- this.setProperties(commonProperties());
+ const props = commonProperties();
const newValue = 3.14159;
- await render(commonTemplate);
+ await renderStepperInput(props);
await StepperInput.input.fill(newValue);
await settled();
assert.strictEqual(Number(StepperInput.input.value), Math.floor(newValue));
- assert.ok(this.onChange.calledWith(Math.floor(newValue)));
+ assert.ok(props.onChange.calledWith(Math.floor(newValue)));
});
test('entering an invalid value reverts the value', async function (assert) {
- this.setProperties(commonProperties());
+ const props = commonProperties();
const newValue = 'NaN';
- await render(commonTemplate);
+ await renderStepperInput(props);
await StepperInput.input.fill(newValue);
await settled();
- assert.strictEqual(Number(StepperInput.input.value), this.value);
- assert.notOk(this.onChange.called);
+ assert.strictEqual(Number(StepperInput.input.value), props.value);
+ assert.notOk(props.onChange.called);
});
});
diff --git a/ui/tests/integration/components/streaming-file-test.js b/ui/tests/integration/components/streaming-file-test.gjs
similarity index 79%
rename from ui/tests/integration/components/streaming-file-test.js
rename to ui/tests/integration/components/streaming-file-test.gjs
index 54d810b6b28..37e6ab1b373 100644
--- a/ui/tests/integration/components/streaming-file-test.js
+++ b/ui/tests/integration/components/streaming-file-test.gjs
@@ -6,11 +6,11 @@
import { find, render, triggerKeyEvent, waitUntil } from '@ember/test-helpers';
import { module, test } from 'qunit';
import { setupRenderingTest } from 'ember-qunit';
-import { hbs } from 'ember-cli-htmlbars';
import { componentA11yAudit } from 'nomad-ui/tests/helpers/a11y-audit';
import Pretender from 'pretender';
import { logEncode } from '../../../mirage/data/logs';
import Log from 'nomad-ui/utils/classes/log';
+import StreamingFile from 'nomad-ui/components/streaming-file';
const { assign } = Object;
const A_KEY = 65;
@@ -26,7 +26,7 @@ const makeLogger = (url, params) =>
url,
params,
plainText: true,
- logFetch: (url) => fetch(url).then((res) => res),
+ logFetch: (fetchUrl) => fetch(fetchUrl).then((res) => res),
});
module('Integration | Component | streaming file', function (hooks) {
@@ -43,20 +43,16 @@ module('Integration | Component | streaming file', function (hooks) {
this.server.shutdown();
});
- const commonTemplate = hbs`
-
- {{this.label}}
-
- `;
+ const renderToggle = async (props) => {
+ await render(
+
+
+ {{props.label}}
+
+ ,
+ );
+ };
test('presents as a label with an inner checkbox and display span, and text', async function (assert) {
const props = commonProperties();
- this.setProperties(props);
- await render(commonTemplate);
+
+ await renderToggle(props);
assert.deepEqual(
Toggle.label,
@@ -62,14 +67,16 @@ module('Integration | Component | toggle', function (hooks) {
test('the isActive property dictates the active state and class', async function (assert) {
const props = commonProperties();
- this.setProperties(props);
- await render(commonTemplate);
+
+ await renderToggle(props);
assert.notOk(Toggle.isActive);
assert.notOk(Toggle.hasActiveClass);
- this.set('isActive', true);
- await settled();
+ await renderToggle({
+ ...props,
+ isActive: true,
+ });
assert.ok(Toggle.isActive);
assert.ok(Toggle.hasActiveClass);
@@ -79,14 +86,16 @@ module('Integration | Component | toggle', function (hooks) {
test('the isDisabled property dictates the disabled state and class', async function (assert) {
const props = commonProperties();
- this.setProperties(props);
- await render(commonTemplate);
+
+ await renderToggle(props);
assert.notOk(Toggle.isDisabled);
assert.notOk(Toggle.hasDisabledClass);
- this.set('isDisabled', true);
- await settled();
+ await renderToggle({
+ ...props,
+ isDisabled: true,
+ });
assert.ok(Toggle.isDisabled);
assert.ok(Toggle.hasDisabledClass);
@@ -96,8 +105,8 @@ module('Integration | Component | toggle', function (hooks) {
test('toggling the input calls the onToggle action', async function (assert) {
const props = commonProperties();
- this.setProperties(props);
- await render(commonTemplate);
+
+ await renderToggle(props);
await Toggle.toggle();
assert.deepEqual(props.onToggle.callCount, 1);
diff --git a/ui/tests/integration/components/topo-viz-test.gjs b/ui/tests/integration/components/topo-viz-test.gjs
new file mode 100644
index 00000000000..f5445336231
--- /dev/null
+++ b/ui/tests/integration/components/topo-viz-test.gjs
@@ -0,0 +1,281 @@
+/**
+ * Copyright IBM Corp. 2015, 2025
+ * SPDX-License-Identifier: BUSL-1.1
+ */
+
+import { module, test } from 'qunit';
+import { find, render, triggerEvent } from '@ember/test-helpers';
+import { setupRenderingTest } from 'ember-qunit';
+import { componentA11yAudit } from 'nomad-ui/tests/helpers/a11y-audit';
+import { create } from 'ember-cli-page-object';
+import { setupMirage } from 'ember-cli-mirage/test-support';
+import sinon from 'sinon';
+import faker from 'nomad-ui/mirage/faker';
+import topoVizPageObject from 'nomad-ui/tests/pages/components/topo-viz';
+import { HOSTS } from '../../../mirage/common';
+import TopoVizComponent from 'nomad-ui/components/topo-viz';
+
+const TopoViz = create(topoVizPageObject());
+const noop = () => {};
+
+const alloc = (nodeId, jobId, taskGroupName, memory, cpu, props = {}) => ({
+ id: faker.random.uuid(),
+ taskGroupName,
+ isScheduled: true,
+ allocatedResources: {
+ cpu,
+ memory,
+ },
+ belongsTo: (type) => ({
+ id: () => (type === 'job' ? jobId : nodeId),
+ }),
+ ...props,
+});
+
+const node = (datacenter, id, memory, cpu) => ({
+ datacenter,
+ id,
+ name: `nomad@${HOSTS[Math.floor(Math.random() * 10) % HOSTS.length]}`,
+ resources: { memory, cpu },
+});
+
+module('Integration | Component | TopoViz', function (hooks) {
+ setupRenderingTest(hooks);
+ setupMirage(hooks);
+
+ test('presents as a FlexMasonry of datacenters', async function (assert) {
+ const nodes = [
+ node('dc1', 'node0', 1000, 500),
+ node('dc2', 'node1', 1000, 500),
+ ];
+
+ const allocations = [
+ alloc('node0', 'job1', 'group', 100, 100),
+ alloc('node0', 'job1', 'group', 100, 100),
+ alloc('node1', 'job1', 'group', 100, 100),
+ ];
+
+ await render(
+
+
-
- `);
+ const state = new State();
+ const changeName = () => {
+ state.name = 'Zoey';
+ };
+
+ await render(
+
+
+
+ ,
+ );
+
assert
.dom('[data-test-name]')
.hasText('Tomster', 'Initial state renders correctly.');
@@ -36,15 +52,23 @@ module('Integration | Component | trigger', function (hooks) {
});
test('it sets the result of the action', async function (assert) {
- this.set('tomster', () => 'Tomster');
- await render(hbs`
-
- {{#if trigger.data.result}}
-
- `);
+ const tomster = () => 'Tomster';
+
+ await render(
+
+
+ {{#if trigger.data.result}}
+
+ ,
+ );
+
assert
.dom('[data-test-name]')
.doesNotExist(
@@ -64,25 +88,29 @@ module('Integration | Component | trigger', function (hooks) {
module('Asynchronous Interactions', function () {
test('it can trigger an asynchronous action', async function (assert) {
- this.set(
- 'onTrigger',
- () =>
- new Promise((resolve) => {
- this.set('resolve', resolve);
- }),
- );
+ let resolve;
+ const onTrigger = () =>
+ new Promise((res) => {
+ resolve = res;
+ });
- await render(hbs`
-
- {{#if trigger.data.isBusy}}
-
- `);
+ await render(
+
+
+ {{#if trigger.data.isBusy}}
+
+ ,
+ );
assert
.dom('[data-test-div]')
@@ -102,7 +130,7 @@ module('Integration | Component | trigger', function (hooks) {
'Success message does not display until after promise resolves',
);
- this.resolve();
+ resolve();
await waitFor('[data-test-div]');
assert
.dom('[data-test-div-loading]')
@@ -127,7 +155,7 @@ module('Integration | Component | trigger', function (hooks) {
'After clicking the button, again, we are back in the loading state',
);
- this.resolve();
+ resolve();
await waitFor('[data-test-div]');
assert
@@ -138,23 +166,27 @@ module('Integration | Component | trigger', function (hooks) {
});
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'));
+ let resolve;
+ const onTrigger = () =>
+ new Promise((res) => {
+ resolve = res;
+ });
+ const onSuccess = () => assert.step('On success happened');
- await render(hbs`
-
- {{#if trigger.data.isSuccess}}
- Success!
- {{/if}}
-
-
- `);
+ await render(
+
+
+ {{#if trigger.data.isSuccess}}
+ Success!
+ {{/if}}
+
+
+ ,
+ );
assert
.dom('[data-test-div]')
@@ -162,34 +194,38 @@ module('Integration | Component | trigger', function (hooks) {
'No text should appear until after the onSuccess callback is fired',
);
await click('[data-test-button]');
- this.resolve();
+ 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', () => {
+ let reject;
+ const onTrigger = () =>
+ new Promise((_, rej) => {
+ reject = rej;
+ });
+ const onError = () => {
assert.step('On error happened');
- });
-
- await render(hbs`
-
- {{#if trigger.data.isBusy}}
-
- `);
+ };
+
+ await render(
+
+
+ {{#if trigger.data.isBusy}}
+
+ ,
+ );
await click('[data-test-button]');
assert
@@ -204,7 +240,7 @@ module('Integration | Component | trigger', function (hooks) {
'No text should appear until after the onError callback is fired',
);
- this.reject();
+ reject();
await waitFor('[data-test-span]');
assert.verifySteps(['On error happened']);
@@ -218,7 +254,7 @@ module('Integration | Component | trigger', function (hooks) {
assert.dom('[data-test-div]').doesNotExist('The error state is cleared');
- this.reject();
+ reject();
await waitFor('[data-test-span]');
assert.verifySteps(['On error happened'], 'The error dispatches');
});
diff --git a/ui/tests/integration/components/two-step-button-test.js b/ui/tests/integration/components/two-step-button-test.gjs
similarity index 80%
rename from ui/tests/integration/components/two-step-button-test.js
rename to ui/tests/integration/components/two-step-button-test.gjs
index 8a374831298..c9c913b9dad 100644
--- a/ui/tests/integration/components/two-step-button-test.js
+++ b/ui/tests/integration/components/two-step-button-test.gjs
@@ -6,10 +6,10 @@
import { find, click, render } from '@ember/test-helpers';
import { module, test } from 'qunit';
import { setupRenderingTest } from 'ember-qunit';
-import { hbs } from 'ember-cli-htmlbars';
import { componentA11yAudit } from 'nomad-ui/tests/helpers/a11y-audit';
import sinon from 'sinon';
import { create } from 'ember-cli-page-object';
+import TwoStepButtonComponent from 'nomad-ui/components/two-step-button';
import twoStepButton from 'nomad-ui/tests/pages/components/two-step-button';
const TwoStepButton = create(twoStepButton());
@@ -28,22 +28,26 @@ module('Integration | Component | two step button', function (hooks) {
onCancel: sinon.spy(),
});
- const commonTemplate = hbs`
-
Recent Scaling Events
diff --git a/ui/app/templates/optimize.hbs b/ui/app/templates/optimize.hbs
index 7938479bb9d..452987f2011 100644
--- a/ui/app/templates/optimize.hbs
+++ b/ui/app/templates/optimize.hbs
@@ -12,7 +12,10 @@
{{#if this.summaries}}
-
- {{#each bb as |crumb|}}
-
- {{crumb.args.crumb}} - {{/each}} -
-
+ {{#each bb as |crumb|}}
+
- {{crumb.args.crumb}} + {{/each}} +
-
- {{#each bb as |crumb|}}
-
- {{crumb.args.crumb.name}} - {{/each}} -
-
+ {{#each bb as |crumb|}}
+
- {{crumb.args.crumb.name}} + {{/each}} +
{{item}}
+{{item}}
+ {{item.text}}
+ {{item.text}}
+ {{item.text}}
+ {{item.text}}
+ {{item}}
-{{item}}
- {{item.text}}
- {{item.text}}
- {{item.text}}
- {{item.text}}
- Yielded content
- Yielded content
+
-
- `);
+
+ await render(
+
+
+
+ ,
+ );
const svg = find('[data-test-gauge-svg]');
diff --git a/ui/tests/integration/components/image-file-test.js b/ui/tests/integration/components/image-file-test.gjs
similarity index 61%
rename from ui/tests/integration/components/image-file-test.js
rename to ui/tests/integration/components/image-file-test.gjs
index 27aa899f325..fc10da43a62 100644
--- a/ui/tests/integration/components/image-file-test.js
+++ b/ui/tests/integration/components/image-file-test.gjs
@@ -6,19 +6,15 @@
import { find, render } from '@ember/test-helpers';
import { module, test } from 'qunit';
import { setupRenderingTest } from 'ember-qunit';
-import { hbs } from 'ember-cli-htmlbars';
-import { componentA11yAudit } from 'nomad-ui/tests/helpers/a11y-audit';
import sinon from 'sinon';
import RSVP from 'rsvp';
+import { componentA11yAudit } from 'nomad-ui/tests/helpers/a11y-audit';
import { formatBytes } from 'nomad-ui/utils/units';
+import ImageFile from 'nomad-ui/components/image-file';
module('Integration | Component | image file', function (hooks) {
setupRenderingTest(hooks);
- const commonTemplate = hbs`
-
-
- `;
-
test('job field diffs', async function (assert) {
- this.set('diff', {
+ const diff = {
ID: 'test-case-1',
Type: 'Edited',
Objects: null,
@@ -31,10 +23,17 @@ module('Integration | Component | job diff', function (hooks) {
field('Added Field', 'added', 'Foobar'),
field('Edited Field', 'edited', 512, 256),
],
- });
-
- await render(commonTemplate);
+ };
+ await render(
+
+
-
-
+
+ ,
+ );
assert.deepEqual(
findAll('[data-test-diff-section-label]').length,
5,
@@ -72,7 +71,7 @@ module('Integration | Component | job diff', function (hooks) {
});
test('job object diffs', async function (assert) {
- this.set('diff', {
+ const diff = {
ID: 'test-case-2',
Type: 'Edited',
Objects: [
@@ -113,9 +112,17 @@ module('Integration | Component | job diff', function (hooks) {
},
],
Fields: null,
- });
+ };
- await render(commonTemplate);
+ await render(
+
+
+
+
+
+ ,
+ );
assert.ok(
cleanWhitespace(
@@ -171,7 +178,7 @@ module('Integration | Component | job diff', function (hooks) {
findAll(
'[data-test-diff-section-label="object"][data-test-diff-field="added"] > [data-test-diff-section-label]',
).length,
- this.diff.Objects[1].Objects.length + this.diff.Objects[1].Fields.length,
+ diff.Objects[1].Objects.length + diff.Objects[1].Fields.length,
'Edited block contains each nested field and object',
);
@@ -179,7 +186,7 @@ module('Integration | Component | job diff', function (hooks) {
findAll(
'[data-test-diff-section-label="object"][data-test-diff-field="added"] [data-test-diff-section-label="object"] [data-test-diff-section-label="field"]',
).length,
- this.diff.Objects[1].Objects[0].Fields.length,
+ diff.Objects[1].Objects[0].Fields.length,
'Objects within objects are rendered',
);
diff --git a/ui/tests/integration/components/job-editor-test.js b/ui/tests/integration/components/job-editor-test.gjs
similarity index 86%
rename from ui/tests/integration/components/job-editor-test.js
rename to ui/tests/integration/components/job-editor-test.gjs
index c0a4ab35ecb..e20588b2531 100644
--- a/ui/tests/integration/components/job-editor-test.js
+++ b/ui/tests/integration/components/job-editor-test.gjs
@@ -5,10 +5,11 @@
import { module, test } from 'qunit';
import { setupRenderingTest } from 'ember-qunit';
-import { render, waitUntil } from '@ember/test-helpers';
-import { hbs } from 'ember-cli-htmlbars';
+import { click, render, waitUntil } from '@ember/test-helpers';
import { create } from 'ember-cli-page-object';
import sinon from 'sinon';
+import JobEditor from 'nomad-ui/components/job-editor';
+import JobEditorAlert from 'nomad-ui/components/job-editor/alert';
import { startMirage } from 'nomad-ui/tests/helpers/start-mirage';
import jobEditor from 'nomad-ui/tests/pages/components/job-editor';
import { initialize as fragmentSerializerInitializer } from 'nomad-ui/initializers/fragment-serializer';
@@ -80,23 +81,28 @@ module('Integration | Component | job-editor', function (hooks) {
}
`;
- const commonTemplate = hbs`
-
+
+ Inner content
- Inner content
+ Inner content
- Inner content
+ Inner content
- Inner content
+ Inner content
- Inner content
+
-
- <:after as |c|>
-
-
- `);
+ await render(
+
+
+
+ <:after as |c|>
+
+
+ ,
+ );
- const annotationEls = findAll('[data-test-annotation]');
- assert.notOk(annotationEls[0].classList.contains('is-staggered'));
- assert.ok(annotationEls[1].classList.contains('is-staggered'));
- assert.notOk(annotationEls[2].classList.contains('is-staggered'));
+ const annotationElements = findAll('[data-test-annotation]');
+ assert.notOk(annotationElements[0].classList.contains('is-staggered'));
+ assert.ok(annotationElements[1].classList.contains('is-staggered'));
+ assert.notOk(annotationElements[2].classList.contains('is-staggered'));
await componentA11yAudit(this.element, assert);
});
@@ -180,24 +183,26 @@ module('Integration | Component | line-chart', function (hooks) {
],
});
- await render(hbs`
-
-
- <:svg as |c|>
- {{#each this.data as |series idx|}}
-
-
- {{series.series}}
- {{datum.formattedY}}
-
-
-
-
-
- `);
+ await render(
+
+
+
+ <:svg as |c|>
+ {{#each this.data as |series index|}}
+
+
+ {{series.series}}
+ {{datum.formattedY}}
+
+
+
+
+
+ ,
+ );
- // All tooltip events are attached to the hover target
const hoverTarget = find('[data-test-hover-target]');
- // Mouse to data mapping happens based on the clientX of the MouseEvent
const bbox = hoverTarget.getBoundingClientRect();
- // The MouseEvent needs to be translated based on the location of the hover target
const xOffset = bbox.x;
- // An interval here is the width between x values given the fixed dimensions of the line chart
- // and the domain of the data
const interval = bbox.width / 5;
- // MouseEnter triggers the tooltip visibility
await triggerEvent(hoverTarget, 'mouseenter');
- // MouseMove positions the tooltip and updates the active datum
await triggerEvent(hoverTarget, 'mousemove', {
clientX: xOffset + interval * 1 + 5,
});
@@ -269,16 +271,18 @@ module('Integration | Component | line-chart', function (hooks) {
);
assert.deepEqual(
find('[data-test-chart-tooltip] .value').textContent.trim(),
- String(series2.find((d) => d.x === 2).y),
+ String(series2.find((datum) => datum.x === 2).y),
);
- // When the mouse falls between points and each series has points with different x values,
- // points will only be shown in the tooltip if they are close enough to the closest point
- // to the cursor.
- // This event is intentionally between points such that both points are within proximity.
const expected = [
- { label: this.data[0].series, value: series1.find((d) => d.x === 3).y },
- { label: this.data[1].series, value: series2.find((d) => d.x === 2).y },
+ {
+ label: this.data[0].series,
+ value: series1.find((datum) => datum.x === 3).y,
+ },
+ {
+ label: this.data[1].series,
+ value: series2.find((datum) => datum.x === 2).y,
+ },
];
await triggerEvent(hoverTarget, 'mousemove', {
clientX: xOffset + interval * 1.5 + 5,
diff --git a/ui/tests/integration/components/list-pagination-test.js b/ui/tests/integration/components/list-pagination-test.gjs
similarity index 59%
rename from ui/tests/integration/components/list-pagination-test.js
rename to ui/tests/integration/components/list-pagination-test.gjs
index 209edfaa4df..edec881b4ec 100644
--- a/ui/tests/integration/components/list-pagination-test.js
+++ b/ui/tests/integration/components/list-pagination-test.gjs
@@ -6,8 +6,8 @@
import { findAll, find, render } from '@ember/test-helpers';
import { module, skip, test } from 'qunit';
import { setupRenderingTest } from 'ember-qunit';
-import { hbs } from 'ember-cli-htmlbars';
import { componentA11yAudit } from 'nomad-ui/tests/helpers/a11y-audit';
+import ListPagination from 'nomad-ui/components/list-pagination';
module('Integration | Component | list pagination', function (hooks) {
setupRenderingTest(hooks);
@@ -24,23 +24,28 @@ module('Integration | Component | list pagination', function (hooks) {
.map((_, i) => i);
test('the source property', async function (assert) {
- this.set('source', list100);
- await render(hbs`
- {{item}}
- {{/each}}
- {{item}}
+ {{/each}}
+ {{item}}
- {{/each}}
- {{item}}
+ {{/each}}
+ {{item}}
- {{/each}}
- {{item}}
+ {{/each}}
+ This is a heading
+ + +This is a heading
+ + +This is a heading
+ + +This is a heading
+ + +This is a heading
+ + +This is a heading
+ + +This is a heading
+ + +This is a heading
- - -
-
- `);
+ await render(
+
+
+
+ ,
+ );
await componentA11yAudit(this.element, assert);
const bars = findAll('g > g').length;
diff --git a/ui/tests/integration/components/single-select-dropdown-test.js b/ui/tests/integration/components/single-select-dropdown-test.gjs
similarity index 74%
rename from ui/tests/integration/components/single-select-dropdown-test.js
rename to ui/tests/integration/components/single-select-dropdown-test.gjs
index c688c316a30..786a5a0d10f 100644
--- a/ui/tests/integration/components/single-select-dropdown-test.js
+++ b/ui/tests/integration/components/single-select-dropdown-test.gjs
@@ -9,7 +9,7 @@ import { setupRenderingTest } from 'ember-qunit';
import { selectChoose } from 'ember-power-select/test-support';
import { clickTrigger } from 'ember-power-select/test-support/helpers';
import sinon from 'sinon';
-import { hbs } from 'ember-cli-htmlbars';
+import SingleSelectDropdown from 'nomad-ui/components/single-select-dropdown';
import { componentA11yAudit } from 'nomad-ui/tests/helpers/a11y-audit';
module('Integration | Component | single-select dropdown', function (hooks) {
@@ -29,18 +29,20 @@ module('Integration | Component | single-select dropdown', function (hooks) {
onSelect: sinon.spy(),
});
- const commonTemplate = hbs`
-
-
- `);
-
- // Remove the width of the padding and the label from the SVG width
- const width = 100 - 5 - 5 - 20;
- this.node.allocations.forEach((alloc, index) => {
- const memWidth = alloc.memoryPercent * width - (index === 0 ? 0.5 : 1);
- const cpuWidth = alloc.cpuPercent * width - (index === 0 ? 0.5 : 1);
- assert.deepEqual(TopoVizNode.memoryRects[index].width, `${memWidth}px`);
- assert.deepEqual(TopoVizNode.cpuRects[index].width, `${cpuWidth}px`);
- });
- });
-
- test('clicking either the memory or cpu rect for an allocation will call onAllocationSelect', async function (assert) {
- const node = nodeGen('Node One', 'dc1', 1000, 1000);
- this.setProperties(
- props({
- node: {
- ...node,
- allocations: [allocGen(node, 100, 100), allocGen(node, 250, 250)],
- },
- }),
- );
-
- await render(commonTemplate);
-
- await TopoVizNode.memoryRects[0].select();
- assert.deepEqual(this.onAllocationSelect.callCount, 1);
- assert.ok(this.onAllocationSelect.calledWith(this.node.allocations[0]));
-
- await TopoVizNode.cpuRects[0].select();
- assert.deepEqual(this.onAllocationSelect.callCount, 2);
-
- await TopoVizNode.cpuRects[1].select();
- assert.deepEqual(this.onAllocationSelect.callCount, 3);
- assert.ok(this.onAllocationSelect.calledWith(this.node.allocations[1]));
-
- await TopoVizNode.memoryRects[1].select();
- assert.deepEqual(this.onAllocationSelect.callCount, 4);
- });
-
- test('hovering over a memory or cpu rect for an allocation will call onAllocationFocus', async function (assert) {
- const node = nodeGen('Node One', 'dc1', 1000, 1000);
- this.setProperties(
- props({
- node: {
- ...node,
- allocations: [allocGen(node, 100, 100), allocGen(node, 250, 250)],
- },
- }),
- );
-
- await render(commonTemplate);
-
- await TopoVizNode.memoryRects[0].hover();
- assert.deepEqual(this.onAllocationFocus.callCount, 1);
- assert.deepEqual(
- this.onAllocationFocus.getCall(0).args[0].allocation,
- this.node.allocations[0].allocation,
- );
- assert.deepEqual(
- this.onAllocationFocus.getCall(0).args[1],
- findAll('[data-test-memory-rect]')[0],
- );
-
- await TopoVizNode.cpuRects[1].hover();
- assert.deepEqual(this.onAllocationFocus.callCount, 2);
- assert.deepEqual(
- this.onAllocationFocus.getCall(1).args[0].allocation,
- this.node.allocations[1].allocation,
- );
- assert.deepEqual(
- this.onAllocationFocus.getCall(1).args[1],
- findAll('[data-test-cpu-rect]')[1],
- );
- });
-
- test('leaving the entire node will call onAllocationBlur, which allows for the tooltip transitions', async function (assert) {
- const node = nodeGen('Node One', 'dc1', 1000, 1000);
- this.setProperties(
- props({
- node: {
- ...node,
- allocations: [allocGen(node, 100, 100), allocGen(node, 250, 250)],
- },
- }),
- );
-
- await render(commonTemplate);
-
- await TopoVizNode.memoryRects[0].hover();
- assert.deepEqual(this.onAllocationFocus.callCount, 1);
- assert.deepEqual(this.onAllocationBlur.callCount, 0);
-
- await TopoVizNode.memoryRects[0].mouseleave();
- assert.deepEqual(this.onAllocationBlur.callCount, 0);
-
- await TopoVizNode.mouseout();
- assert.deepEqual(this.onAllocationBlur.callCount, 1);
- });
-
- test('allocations are sorted by smallest to largest delta of memory to cpu percent utilizations', async function (assert) {
- const node = nodeGen('Node One', 'dc1', 1000, 1000);
-
- const evenAlloc = allocGen(node, 100, 100);
- const mediumMemoryAlloc = allocGen(node, 200, 150);
- const largeMemoryAlloc = allocGen(node, 300, 50);
- const mediumCPUAlloc = allocGen(node, 150, 200);
- const largeCPUAlloc = allocGen(node, 50, 300);
-
- this.setProperties(
- props({
- node: {
- ...node,
- allocations: [
- largeCPUAlloc,
- mediumCPUAlloc,
- evenAlloc,
- mediumMemoryAlloc,
- largeMemoryAlloc,
- ],
- },
- }),
- );
-
- await render(commonTemplate);
-
- const expectedOrder = [
- evenAlloc,
- mediumCPUAlloc,
- mediumMemoryAlloc,
- largeCPUAlloc,
- largeMemoryAlloc,
- ];
- expectedOrder.forEach((alloc, index) => {
- assert.deepEqual(TopoVizNode.memoryRects[index].id, alloc.allocation.id);
- assert.deepEqual(TopoVizNode.cpuRects[index].id, alloc.allocation.id);
- });
- });
-
- test('when there are no allocations, a "no allocations" note is shown', async function (assert) {
- const node = nodeGen('Node One', 'dc1', 1000, 1000);
- this.setProperties(
- props({
- node: {
- ...node,
- allocations: [],
- },
- }),
- );
-
- await render(commonTemplate);
- assert.deepEqual(TopoVizNode.emptyMessage, 'Empty Client');
- });
-});
diff --git a/ui/tests/integration/components/trigger-test.js b/ui/tests/integration/components/trigger-test.gjs
similarity index 57%
rename from ui/tests/integration/components/trigger-test.js
rename to ui/tests/integration/components/trigger-test.gjs
index c91e4a730bf..ae2d1c9a176 100644
--- a/ui/tests/integration/components/trigger-test.js
+++ b/ui/tests/integration/components/trigger-test.gjs
@@ -6,21 +6,37 @@
import { module, test } from 'qunit';
import { setupRenderingTest } from 'ember-qunit';
import { render, click, waitFor } from '@ember/test-helpers';
-import { hbs } from 'ember-cli-htmlbars';
+import { tracked } from '@glimmer/tracking';
+import { on } from '@ember/modifier';
+import Trigger from 'nomad-ui/components/trigger';
+
+class State {
+ @tracked name = 'Tomster';
+}
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}}
- -{{state.name}}
+ +{{trigger.data.result}}
- {{/if}} - -{{trigger.data.result}}
+ {{/if}} + +...Loading
- {{/if}}
- {{#if trigger.data.isSuccess}}
- Success!
- {{/if}}
-
- ...Loading
+ {{/if}}
+ {{#if trigger.data.isSuccess}}
+ Success!
+ {{/if}}
+
+ ...Loading
- {{/if}}
- {{#if trigger.data.isError}}
- Error!
- {{/if}}
-
- ...Loading
+ {{/if}}
+ {{#if trigger.data.isError}}
+ Error!
+ {{/if}}
+
+