mirror of
https://github.com/kemko/nomad.git
synced 2026-01-01 16:05:42 +03:00
* [ui] Service job status panel (#16134) * it begins * Hacky demo enabled * Still very hacky but seems deece * Floor of at least 3 must be shown * Width from on-high * Other statuses considered * More sensible allocTypes listing * Beginnings of a legend * Total number of allocs running now maps over job.groups * Lintfix * base the number of slots to hold open on actual tallies, which should never exceed totalAllocs * Versions get yer versions here * Versions lookin like versions * Mirage fixup * Adds Remaining as an alloc chart status and adds historical status option * Get tests passing again by making job status static for a sec * Historical status panel click actions moved into their own component class * job detail tests plz chill * Testing if percy is fickle * Hyper-specfic on summary distribution bar identifier * Perhaps the 2nd allocSummary item no longer exists with the more accurate afterCreate data * UI Test eschewing the page pattern * Bones of a new acceptance test * Track width changes explicitly with window-resize * testlintfix * Alloc counting tests * Alloc grouping test * Alloc grouping with complex resizing * Refined the list of showable statuses * PR feedback addressed * renamed allocation-row to allocation-status-row * [ui, job status] Make panel status mode a queryParam (#16345) * queryParam changing * Test for QP in panel * Adding @tracked to legacy controller * Move the job of switching to Historical out to larger context * integration test mock passed func * [ui] Service job deployment status panel (#16383) * A very fast and loose deployment panel * Removing Unknown status from the panel * Set up oldAllocs list in constructor, rather than as a getter/tracked var * Small amount of template cleanup * Refactored latest-deployment new logic back into panel.js * Revert now-unused latest-deployment component * margin bottom when ungrouped also * Basic integration tests for job deployment status panel * Updates complete alloc colour to green for new visualizations only (#16618) * Updates complete alloc colour to green for new visualizations only * Pale green instead of dark green for viz in general * [ui] Job Deployment Status: History and Update Props (#16518) * Deployment history wooooooo * Styled deployment history * Update Params * lintfix * Types and groups for updateParams * Live-updating history * Harden with types, error states, and pending states * Refactor updateParams to use trigger component * [ui] Deployment History search (#16608) * Functioning searchbox * Some nice animations for history items * History search test * Fixing up some old mirage conventions * some a11y rule override to account for scss keyframes * Split panel into deploying and steady components * HandleError passed from job index * gridified panel elements * TotalAllocs added to deploying.js * Width perc to px * [ui] Splitting deployment allocs by status, health, and canary status (#16766) * Initial attempt with lots of scratchpad work * Style mods per UI discussion * Fix canary overflow bug * Dont show canary or health for steady/prev-alloc blocks * Steady state * Thanks Julie * Fixes steady-state versions * Legen, wait for it... * Test fixes now that we have a minimum block size * PR prep * Shimmer effect on pending and unplaced allocs (#16801) * Shimmer effect on pending and unplaced * Dont show animation in the legend * [ui, deployments] Linking allocblocks and legends to allocation / allocations index routes (#16821) * Conditional link-to component and basic linking to allocations and allocation routes * Job versions filter added to allocations index page * Steady state legends link * Legend links * Badge count links for versions * Fix: faded class on steady-state legend items * version link now wont show completed ones * Fix a11y violations with link labels * Combining some template conditional logic * [ui, deployments] Conversions on long nanosecond update params (#16882) * Conversions on long nanosecond nums * Early return in updateParamGroups comp prop * [ui, deployments] Mirage Actively Deploying Job and Deployment Integration Tests (#16888) * Start of deployment alloc test scaffolding * Bit of test cleanup and canary for ungrouped allocs * Flakey but more robust integrations for deployment panel * De-flake acceptance tests and add an actively deploying job to mirage * Jitter-less alloc status distribution removes my bad math * bugfix caused by summary.desiredTotal non-null * More interesting mirage active deployment alloc breakdown * Further tests for previous-allocs row * Previous alloc legend tests * Percy snapshots added to integration test * changelog
407 lines
13 KiB
JavaScript
407 lines
13 KiB
JavaScript
/**
|
|
* Copyright (c) HashiCorp, Inc.
|
|
* SPDX-License-Identifier: MPL-2.0
|
|
*/
|
|
|
|
/* eslint-disable qunit/require-expect */
|
|
/* eslint-disable qunit/no-conditional-assertions */
|
|
import {
|
|
click,
|
|
currentRouteName,
|
|
currentURL,
|
|
visit,
|
|
find,
|
|
} from '@ember/test-helpers';
|
|
import { module, test } from 'qunit';
|
|
import { setupApplicationTest } from 'ember-qunit';
|
|
import { setupMirage } from 'ember-cli-mirage/test-support';
|
|
import JobDetail from 'nomad-ui/tests/pages/jobs/detail';
|
|
import setPolicy from 'nomad-ui/tests/utils/set-policy';
|
|
|
|
const jobTypesWithStatusPanel = ['service'];
|
|
|
|
async function switchToHistorical() {
|
|
await JobDetail.statusModes.historical.click();
|
|
}
|
|
|
|
// moduleFor is an old Ember-QUnit API that is deprected https://guides.emberjs.com/v1.10.0/testing/unit-test-helpers/
|
|
// this is a misnomer in our context, because we're not using this API, however, the linter does not understand this
|
|
// the linter warning will go away if we rename this factory function to generateJobDetailsTests
|
|
// eslint-disable-next-line ember/no-test-module-for
|
|
export default function moduleForJob(
|
|
title,
|
|
context,
|
|
jobFactory,
|
|
additionalTests
|
|
) {
|
|
let job;
|
|
|
|
module(title, function (hooks) {
|
|
setupApplicationTest(hooks);
|
|
setupMirage(hooks);
|
|
hooks.before(function () {
|
|
if (context !== 'allocations' && context !== 'children') {
|
|
throw new Error(
|
|
`Invalid context provided to moduleForJob, expected either "allocations" or "children", got ${context}`
|
|
);
|
|
}
|
|
});
|
|
|
|
hooks.beforeEach(async function () {
|
|
server.create('node');
|
|
job = jobFactory();
|
|
if (!job.namespace || job.namespace === 'default') {
|
|
await JobDetail.visit({ id: job.id });
|
|
} else {
|
|
await JobDetail.visit({ id: `${job.id}@${job.namespace}` });
|
|
}
|
|
|
|
const hasClientStatus = ['system', 'sysbatch'].includes(job.type);
|
|
if (context === 'allocations' && hasClientStatus) {
|
|
await click("[data-test-accordion-summary-chart='allocation-status']");
|
|
}
|
|
});
|
|
|
|
test('visiting /jobs/:job_id', async function (assert) {
|
|
const expectedURL = job.namespace
|
|
? `/jobs/${job.name}@${job.namespace}`
|
|
: `/jobs/${job.name}`;
|
|
|
|
assert.equal(decodeURIComponent(currentURL()), expectedURL);
|
|
assert.equal(document.title, `Job ${job.name} - Nomad`);
|
|
});
|
|
|
|
test('the subnav links to overview', async function (assert) {
|
|
await JobDetail.tabFor('overview').visit();
|
|
|
|
const expectedURL = job.namespace
|
|
? `/jobs/${job.name}@${job.namespace}`
|
|
: `/jobs/${job.name}`;
|
|
|
|
assert.equal(decodeURIComponent(currentURL()), expectedURL);
|
|
});
|
|
|
|
test('the subnav links to definition', async function (assert) {
|
|
await JobDetail.tabFor('definition').visit();
|
|
|
|
const expectedURL = job.namespace
|
|
? `/jobs/${job.name}@${job.namespace}/definition`
|
|
: `/jobs/${job.name}/definition`;
|
|
|
|
assert.equal(decodeURIComponent(currentURL()), expectedURL);
|
|
});
|
|
|
|
test('the subnav links to versions', async function (assert) {
|
|
await JobDetail.tabFor('versions').visit();
|
|
|
|
const expectedURL = job.namespace
|
|
? `/jobs/${job.name}@${job.namespace}/versions`
|
|
: `/jobs/${job.name}/versions`;
|
|
|
|
assert.equal(decodeURIComponent(currentURL()), expectedURL);
|
|
});
|
|
|
|
test('the subnav links to evaluations', async function (assert) {
|
|
await JobDetail.tabFor('evaluations').visit();
|
|
|
|
const expectedURL = job.namespace
|
|
? `/jobs/${job.name}@${job.namespace}/evaluations`
|
|
: `/jobs/${job.name}/evaluations`;
|
|
|
|
assert.equal(decodeURIComponent(currentURL()), expectedURL);
|
|
});
|
|
|
|
test('the title buttons are dependent on job status', async function (assert) {
|
|
if (job.status === 'dead') {
|
|
assert.ok(JobDetail.start.isPresent);
|
|
assert.ok(JobDetail.purge.isPresent);
|
|
assert.notOk(JobDetail.stop.isPresent);
|
|
assert.notOk(JobDetail.execButton.isPresent);
|
|
} else {
|
|
assert.notOk(JobDetail.start.isPresent);
|
|
assert.notOk(JobDetail.purge.isPresent);
|
|
assert.ok(JobDetail.stop.isPresent);
|
|
assert.ok(JobDetail.execButton.isPresent);
|
|
}
|
|
});
|
|
|
|
if (context === 'allocations') {
|
|
test('allocations for the job are shown in the overview', async function (assert) {
|
|
if (jobTypesWithStatusPanel.includes(job.type)) {
|
|
await switchToHistorical(job);
|
|
}
|
|
assert.ok(
|
|
JobDetail.allocationsSummary.isPresent,
|
|
'Allocations are shown in the summary section'
|
|
);
|
|
assert.ok(
|
|
JobDetail.childrenSummary.isHidden,
|
|
'Children are not shown in the summary section'
|
|
);
|
|
});
|
|
|
|
test('clicking in an allocation row navigates to that allocation', async function (assert) {
|
|
const allocationRow = JobDetail.allocations[0];
|
|
const allocationId = allocationRow.id;
|
|
|
|
await allocationRow.visitRow();
|
|
|
|
assert.equal(
|
|
currentURL(),
|
|
`/allocations/${allocationId}`,
|
|
'Allocation row links to allocation detail'
|
|
);
|
|
});
|
|
|
|
test('clicking in a task group row navigates to that task group', async function (assert) {
|
|
const tgRow = JobDetail.taskGroups[0];
|
|
const tgName = tgRow.name;
|
|
|
|
await tgRow.visitRow();
|
|
|
|
const expectedURL = job.namespace
|
|
? `/jobs/${encodeURIComponent(job.name)}@${job.namespace}/${tgName}`
|
|
: `/jobs/${encodeURIComponent(job.name)}/${tgName}`;
|
|
|
|
assert.equal(currentURL(), expectedURL);
|
|
});
|
|
|
|
test('clicking legend item navigates to a pre-filtered allocations table', async function (assert) {
|
|
if (jobTypesWithStatusPanel.includes(job.type)) {
|
|
await switchToHistorical(job);
|
|
}
|
|
const legendItem = find('.legend li.is-clickable');
|
|
const status = legendItem.getAttribute('data-test-legend-label');
|
|
await legendItem.click();
|
|
|
|
const encodedStatus = encodeURIComponent(JSON.stringify([status]));
|
|
const expectedURL = new URL(
|
|
urlWithNamespace(
|
|
`/jobs/${job.name}@default/clients?status=${encodedStatus}`,
|
|
job.namespace
|
|
),
|
|
window.location
|
|
);
|
|
const gotURL = new URL(currentURL(), window.location);
|
|
assert.deepEqual(gotURL.path, expectedURL.path);
|
|
assert.deepEqual(gotURL.searchParams, expectedURL.searchParams);
|
|
});
|
|
|
|
test('clicking in a slice takes you to a pre-filtered allocations table', async function (assert) {
|
|
if (jobTypesWithStatusPanel.includes(job.type)) {
|
|
await switchToHistorical(job);
|
|
}
|
|
const slice = JobDetail.allocationsSummary.slices[0];
|
|
const status = slice.label;
|
|
await slice.click();
|
|
|
|
const encodedStatus = encodeURIComponent(JSON.stringify([status]));
|
|
const expectedURL = new URL(
|
|
urlWithNamespace(
|
|
`/jobs/${encodeURIComponent(
|
|
job.name
|
|
)}/allocations?status=${encodedStatus}`,
|
|
job.namespace
|
|
),
|
|
window.location
|
|
);
|
|
const gotURL = new URL(currentURL(), window.location);
|
|
assert.deepEqual(gotURL.pathname, expectedURL.pathname);
|
|
|
|
// Sort and compare URL query params.
|
|
gotURL.searchParams.sort();
|
|
expectedURL.searchParams.sort();
|
|
assert.equal(
|
|
gotURL.searchParams.toString(),
|
|
expectedURL.searchParams.toString()
|
|
);
|
|
});
|
|
}
|
|
|
|
if (context === 'children') {
|
|
test('children for the job are shown in the overview', async function (assert) {
|
|
assert.ok(
|
|
JobDetail.childrenSummary.isPresent,
|
|
'Children are shown in the summary section'
|
|
);
|
|
assert.ok(
|
|
JobDetail.allocationsSummary.isHidden,
|
|
'Allocations are not shown in the summary section'
|
|
);
|
|
});
|
|
}
|
|
|
|
for (var testName in additionalTests) {
|
|
test(testName, async function (assert) {
|
|
await additionalTests[testName].call(this, job, assert);
|
|
});
|
|
}
|
|
});
|
|
}
|
|
|
|
// moduleFor is an old Ember-QUnit API that is deprected https://guides.emberjs.com/v1.10.0/testing/unit-test-helpers/
|
|
// this is a misnomer in our context, because we're not using this API, however, the linter does not understand this
|
|
// the linter warning will go away if we rename this factory function to generateJobClientStatusTests
|
|
// eslint-disable-next-line ember/no-test-module-for
|
|
export function moduleForJobWithClientStatus(
|
|
title,
|
|
jobFactory,
|
|
additionalTests
|
|
) {
|
|
let job;
|
|
|
|
module(title, function (hooks) {
|
|
setupApplicationTest(hooks);
|
|
setupMirage(hooks);
|
|
|
|
hooks.beforeEach(async function () {
|
|
const clients = server.createList('node', 3, {
|
|
datacenter: 'dc1',
|
|
status: 'ready',
|
|
});
|
|
|
|
clients.push(
|
|
server.create('node', { datacenter: 'dc2', status: 'ready' })
|
|
);
|
|
clients.push(
|
|
server.create('node', { datacenter: 'dc3', status: 'ready' })
|
|
);
|
|
clients.push(
|
|
server.create('node', { datacenter: 'canada-west-1', status: 'ready' })
|
|
);
|
|
job = jobFactory();
|
|
clients.forEach((c) => {
|
|
server.create('allocation', { jobId: job.id, nodeId: c.id });
|
|
});
|
|
});
|
|
|
|
module('with node:read permissions', function (hooks) {
|
|
hooks.beforeEach(async function () {
|
|
// Displaying the job status in client requires node:read permission.
|
|
setPolicy({
|
|
id: 'node-read',
|
|
name: 'node-read',
|
|
rulesJSON: {
|
|
Node: {
|
|
Policy: 'read',
|
|
},
|
|
},
|
|
});
|
|
|
|
await visitJobDetailPage(job);
|
|
});
|
|
|
|
test('the subnav links to clients', async function (assert) {
|
|
await JobDetail.tabFor('clients').visit();
|
|
|
|
const expectedURL = job.namespace
|
|
? `/jobs/${job.id}@${job.namespace}/clients`
|
|
: `/jobs/${job.id}/clients`;
|
|
|
|
assert.equal(currentURL(), expectedURL);
|
|
});
|
|
|
|
test('job status summary is shown in the overview', async function (assert) {
|
|
assert.ok(
|
|
JobDetail.jobClientStatusSummary.statusBar.isPresent,
|
|
'Summary bar is displayed in the Job Status in Client summary section'
|
|
);
|
|
});
|
|
|
|
test('clicking legend item navigates to a pre-filtered clients table', async function (assert) {
|
|
const legendItem =
|
|
JobDetail.jobClientStatusSummary.statusBar.legend.clickableItems[0];
|
|
const status = legendItem.label;
|
|
await legendItem.click();
|
|
|
|
const encodedStatus = encodeURIComponent(JSON.stringify([status]));
|
|
const expectedURL = new URL(
|
|
urlWithNamespace(
|
|
`/jobs/${job.name}/clients?status=${encodedStatus}`,
|
|
job.namespace
|
|
),
|
|
window.location
|
|
);
|
|
const gotURL = new URL(currentURL(), window.location);
|
|
assert.deepEqual(gotURL.path, expectedURL.path);
|
|
assert.deepEqual(gotURL.searchParams, expectedURL.searchParams);
|
|
});
|
|
|
|
test('clicking in a slice takes you to a pre-filtered clients table', async function (assert) {
|
|
const slice = JobDetail.jobClientStatusSummary.statusBar.slices[0];
|
|
const status = slice.label;
|
|
await slice.click();
|
|
|
|
const encodedStatus = encodeURIComponent(JSON.stringify([status]));
|
|
|
|
const expectedURL = job.namespace
|
|
? `/jobs/${job.name}@${job.namespace}/clients?status=${encodedStatus}`
|
|
: `/jobs/${job.name}/clients?status=${encodedStatus}`;
|
|
|
|
assert.deepEqual(currentURL(), expectedURL, 'url is correct');
|
|
});
|
|
|
|
for (var testName in additionalTests) {
|
|
test(testName, async function (assert) {
|
|
await additionalTests[testName].call(this, job, assert);
|
|
});
|
|
}
|
|
});
|
|
|
|
module('without node:read permissions', function (hooks) {
|
|
hooks.beforeEach(async function () {
|
|
// Test blank Node policy to mock lack of permission.
|
|
setPolicy({
|
|
id: 'node',
|
|
name: 'node',
|
|
rulesJSON: {},
|
|
});
|
|
|
|
await visitJobDetailPage(job);
|
|
});
|
|
|
|
test('the page handles presentations concerns regarding the user not having node:read permissions', async function (assert) {
|
|
assert
|
|
.dom("[data-test-tab='clients']")
|
|
.doesNotExist(
|
|
'Job Detail Sub Navigation should not render Clients tab'
|
|
);
|
|
|
|
assert
|
|
.dom('[data-test-nodes-not-authorized]')
|
|
.exists('Renders Not Authorized message');
|
|
});
|
|
|
|
test('/jobs/job/clients route is protected with authorization logic', async function (assert) {
|
|
await visit(`/jobs/${job.id}/clients`);
|
|
|
|
assert.equal(
|
|
currentRouteName(),
|
|
'jobs.job.index',
|
|
'The clients route cannot be visited unless you have node:read permissions'
|
|
);
|
|
});
|
|
});
|
|
});
|
|
}
|
|
|
|
function urlWithNamespace(url, namespace) {
|
|
if (!namespace || namespace === 'default') {
|
|
return url;
|
|
}
|
|
|
|
const parts = url.split('?');
|
|
const params = new URLSearchParams(parts[1]);
|
|
params.set('namespace', namespace);
|
|
|
|
return `${parts[0]}?${params.toString()}`;
|
|
}
|
|
|
|
async function visitJobDetailPage({ id, namespace }) {
|
|
if (!namespace || namespace === 'default') {
|
|
await JobDetail.visit({ id });
|
|
} else {
|
|
await JobDetail.visit({ id: `${id}@${namespace}` });
|
|
}
|
|
}
|