Files
nomad/ui/tests/helpers/module-for-job.js
Phil Renaud e1e59455e4 [ui, feature] Job Page Redesign (#16932)
* [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
2023-04-24 22:45:39 -04:00

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