open-nomad/ui/tests/acceptance/task-detail-test.js
Phil Renaud 7dbebe9a93
[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

468 lines
14 KiB
JavaScript

/**
* Copyright (c) HashiCorp, Inc.
* SPDX-License-Identifier: MPL-2.0
*/
/* eslint-disable qunit/require-expect */
import { currentURL, waitFor } from '@ember/test-helpers';
import { module, test } from 'qunit';
import { setupApplicationTest } from 'ember-qunit';
import { setupMirage } from 'ember-cli-mirage/test-support';
import a11yAudit from 'nomad-ui/tests/helpers/a11y-audit';
import Task from 'nomad-ui/tests/pages/allocations/task/detail';
import Layout from 'nomad-ui/tests/pages/layout';
import moment from 'moment';
let allocation;
let task;
module('Acceptance | task detail', function (hooks) {
setupApplicationTest(hooks);
setupMirage(hooks);
hooks.beforeEach(async function () {
server.create('agent');
server.create('node');
server.create('job', { createAllocations: false });
allocation = server.create('allocation', 'withTaskWithPorts', {
clientStatus: 'running',
});
server.db.taskStates.update(
{ allocationId: allocation.id },
{ state: 'running' }
);
task = server.db.taskStates.where({ allocationId: allocation.id })[0];
await Task.visit({ id: allocation.id, name: task.name });
});
test('it passes an accessibility audit', async function (assert) {
assert.expect(1);
await a11yAudit(assert);
});
test('/allocation/:id/:task_name should name the task and list high-level task information', async function (assert) {
assert.ok(Task.title.text.includes(task.name), 'Task name');
assert.ok(Task.state.includes(task.state), 'Task state');
assert.ok(
Task.startedAt.includes(
moment(task.startedAt).format("MMM DD, 'YY HH:mm:ss ZZ")
),
'Task started at'
);
const lifecycle = server.db.tasks.where({ name: task.name })[0].Lifecycle;
let lifecycleName = 'main';
if (
lifecycle &&
(lifecycle.Hook === 'prestart' || lifecycle.Hook === 'poststart')
) {
lifecycleName = `${lifecycle.Hook}-${
lifecycle.Sidecar ? 'sidecar' : 'ephemeral'
}`;
}
if (lifecycle && lifecycle.Hook === 'poststop') {
lifecycleName = 'poststop';
}
assert.equal(Task.lifecycle, lifecycleName);
assert.equal(document.title, `Task ${task.name} - Mirage - Nomad`);
});
test('breadcrumbs match jobs / job / task group / allocation / task', async function (assert) {
const { jobId, taskGroup } = allocation;
const job = server.db.jobs.find(jobId);
const shortId = allocation.id.split('-')[0];
assert.equal(
Layout.breadcrumbFor('jobs.index').text,
'Jobs',
'Jobs is the first breadcrumb'
);
await waitFor('[data-test-job-breadcrumb]');
assert.equal(
Layout.breadcrumbFor('jobs.job.index').text,
`Job ${job.name}`,
'Job is the second breadcrumb'
);
assert.equal(
Layout.breadcrumbFor('jobs.job.task-group').text,
`Task Group ${taskGroup}`,
'Task Group is the third breadcrumb'
);
assert.equal(
Layout.breadcrumbFor('allocations.allocation').text,
`Allocation ${shortId}`,
'Allocation short id is the fourth breadcrumb'
);
assert.equal(
Layout.breadcrumbFor('allocations.allocation.task').text,
`Task ${task.name}`,
'Task name is the fifth breadcrumb'
);
await Layout.breadcrumbFor('jobs.index').visit();
assert.equal(currentURL(), '/jobs', 'Jobs breadcrumb links correctly');
await Task.visit({ id: allocation.id, name: task.name });
await Layout.breadcrumbFor('jobs.job.index').visit();
assert.equal(
currentURL(),
`/jobs/${job.id}@default`,
'Job breadcrumb links correctly'
);
await Task.visit({ id: allocation.id, name: task.name });
await Layout.breadcrumbFor('jobs.job.task-group').visit();
assert.equal(
currentURL(),
`/jobs/${job.id}@default/${taskGroup}`,
'Task Group breadcrumb links correctly'
);
await Task.visit({ id: allocation.id, name: task.name });
await Layout.breadcrumbFor('allocations.allocation').visit();
assert.equal(
currentURL(),
`/allocations/${allocation.id}`,
'Allocations breadcrumb links correctly'
);
});
test('/allocation/:id/:task_name should include resource utilization graphs', async function (assert) {
assert.equal(
Task.resourceCharts.length,
2,
'Two resource utilization graphs'
);
assert.equal(
Task.resourceCharts.objectAt(0).name,
'CPU',
'First chart is CPU'
);
assert.equal(
Task.resourceCharts.objectAt(1).name,
'Memory',
'Second chart is Memory'
);
});
test('the events table lists all recent events', async function (assert) {
const events = server.db.taskEvents.where({ taskStateId: task.id });
assert.equal(
Task.events.length,
events.length,
`Lists ${events.length} events`
);
});
test('when a task has volumes, the volumes table is shown', async function (assert) {
const taskGroup = server.schema.taskGroups.where({
jobId: allocation.jobId,
name: allocation.taskGroup,
}).models[0];
const jobTask = taskGroup.tasks.models.find((m) => m.name === task.name);
assert.ok(Task.hasVolumes);
assert.equal(Task.volumes.length, jobTask.volumeMounts.length);
});
test('when a task does not have volumes, the volumes table is not shown', async function (assert) {
const job = server.create('job', {
createAllocations: false,
noHostVolumes: true,
});
allocation = server.create('allocation', {
jobId: job.id,
clientStatus: 'running',
});
task = server.db.taskStates.where({ allocationId: allocation.id })[0];
await Task.visit({ id: allocation.id, name: task.name });
assert.notOk(Task.hasVolumes);
});
test('each volume in the volumes table shows information about the volume', async function (assert) {
const taskGroup = server.schema.taskGroups.where({
jobId: allocation.jobId,
name: allocation.taskGroup,
}).models[0];
const jobTask = taskGroup.tasks.models.find((m) => m.name === task.name);
const volume = jobTask.volumeMounts[0];
Task.volumes[0].as((volumeRow) => {
assert.equal(volumeRow.name, volume.Volume);
assert.equal(volumeRow.destination, volume.Destination);
assert.equal(
volumeRow.permissions,
volume.ReadOnly ? 'Read' : 'Read/Write'
);
assert.equal(
volumeRow.clientSource,
taskGroup.volumes[volume.Volume].Source
);
});
});
test('each recent event should list the time, type, and description of the event', async function (assert) {
const event = server.db.taskEvents.where({ taskStateId: task.id })[0];
const recentEvent = Task.events.objectAt(Task.events.length - 1);
assert.equal(
recentEvent.time,
moment(event.time / 1000000).format("MMM DD, 'YY HH:mm:ss ZZ"),
'Event timestamp'
);
assert.equal(recentEvent.type, event.type, 'Event type');
assert.equal(recentEvent.message, event.message, 'Event message');
});
test('when the allocation is not found, the application errors', async function (assert) {
await Task.visit({ id: 'not-a-real-allocation', name: task.name });
assert.equal(
server.pretender.handledRequests
.filter((request) => !request.url.includes('policy'))
.findBy('status', 404).url,
'/v1/allocation/not-a-real-allocation',
'A request to the nonexistent allocation is made'
);
assert.equal(
currentURL(),
`/allocations/not-a-real-allocation/${task.name}`,
'The URL persists'
);
assert.ok(Task.error.isPresent, 'Error message is shown');
assert.equal(Task.error.title, 'Not Found', 'Error message is for 404');
});
test('when the allocation is found but the task is not, the application errors', async function (assert) {
await Task.visit({ id: allocation.id, name: 'not-a-real-task-name' });
assert.ok(
server.pretender.handledRequests
.filterBy('status', 200)
.mapBy('url')
.includes(`/v1/allocation/${allocation.id}`),
'A request to the allocation is made successfully'
);
assert.equal(
currentURL(),
`/allocations/${allocation.id}/not-a-real-task-name`,
'The URL persists'
);
assert.ok(Task.error.isPresent, 'Error message is shown');
assert.equal(Task.error.title, 'Not Found', 'Error message is for 404');
});
test('task can be restarted', async function (assert) {
await Task.restart.idle();
await Task.restart.confirm();
const request = server.pretender.handledRequests.findBy('method', 'PUT');
assert.equal(
request.url,
`/v1/client/allocation/${allocation.id}/restart`,
'Restart request is made for the allocation'
);
assert.deepEqual(
JSON.parse(request.requestBody),
{ TaskName: task.name },
'Restart request is made for the correct task'
);
});
test('when task restart fails (403), an ACL permissions error message is shown', async function (assert) {
server.pretender.put('/v1/client/allocation/:id/restart', () => [
403,
{},
'',
]);
await Task.restart.idle();
await Task.restart.confirm();
assert.ok(Task.inlineError.isShown, 'Inline error is shown');
assert.ok(
Task.inlineError.title.includes('Could Not Restart Task'),
'Title is descriptive'
);
assert.ok(
/ACL token.+?allocation lifecycle/.test(Task.inlineError.message),
'Message mentions ACLs and the appropriate permission'
);
await Task.inlineError.dismiss();
assert.notOk(Task.inlineError.isShown, 'Inline error is no longer shown');
});
test('when task restart fails (500), the error message from the API is piped through to the alert', async function (assert) {
const message = 'A plaintext error message';
server.pretender.put('/v1/client/allocation/:id/restart', () => [
500,
{},
message,
]);
await Task.restart.idle();
await Task.restart.confirm();
assert.ok(Task.inlineError.isShown);
assert.ok(Task.inlineError.title.includes('Could Not Restart Task'));
assert.equal(Task.inlineError.message, message);
await Task.inlineError.dismiss();
assert.notOk(Task.inlineError.isShown);
});
test('exec button is present', async function (assert) {
assert.ok(Task.execButton.isPresent);
});
});
module('Acceptance | task detail (no addresses)', function (hooks) {
setupApplicationTest(hooks);
setupMirage(hooks);
hooks.beforeEach(async function () {
server.create('agent');
server.create('node');
server.create('job');
allocation = server.create('allocation', 'withoutTaskWithPorts', {
clientStatus: 'running',
});
task = server.db.taskStates.where({ allocationId: allocation.id })[0];
await Task.visit({ id: allocation.id, name: task.name });
});
});
module('Acceptance | task detail (different namespace)', function (hooks) {
setupApplicationTest(hooks);
setupMirage(hooks);
hooks.beforeEach(async function () {
server.create('agent');
server.create('node');
server.create('namespace');
server.create('namespace', { id: 'other-namespace' });
server.create('job', {
createAllocations: false,
namespaceId: 'other-namespace',
});
allocation = server.create('allocation', 'withTaskWithPorts', {
clientStatus: 'running',
});
task = server.db.taskStates.where({ allocationId: allocation.id })[0];
await Task.visit({ id: allocation.id, name: task.name });
});
test('breadcrumbs match jobs / job / task group / allocation / task', async function (assert) {
const { jobId, taskGroup } = allocation;
const job = server.db.jobs.find(jobId);
await Layout.breadcrumbFor('jobs.index').visit();
assert.equal(
currentURL(),
'/jobs?namespace=*',
'Jobs breadcrumb links correctly'
);
await Task.visit({ id: allocation.id, name: task.name });
await Layout.breadcrumbFor('jobs.job.index').visit();
assert.equal(
currentURL(),
`/jobs/${job.id}@other-namespace`,
'Job breadcrumb links correctly'
);
await Task.visit({ id: allocation.id, name: task.name });
await Layout.breadcrumbFor('jobs.job.task-group').visit();
assert.equal(
currentURL(),
`/jobs/${job.id}@other-namespace/${taskGroup}`,
'Task Group breadcrumb links correctly'
);
await Task.visit({ id: allocation.id, name: task.name });
await Layout.breadcrumbFor('allocations.allocation').visit();
assert.equal(
currentURL(),
`/allocations/${allocation.id}`,
'Allocations breadcrumb links correctly'
);
});
});
module('Acceptance | task detail (not running)', function (hooks) {
setupApplicationTest(hooks);
setupMirage(hooks);
hooks.beforeEach(async function () {
server.create('agent');
server.create('node');
server.create('namespace');
server.create('namespace', { id: 'other-namespace' });
server.create('job', {
createAllocations: false,
namespaceId: 'other-namespace',
});
allocation = server.create('allocation', 'withTaskWithPorts', {
clientStatus: 'complete',
});
task = server.db.taskStates.where({ allocationId: allocation.id })[0];
await Task.visit({ id: allocation.id, name: task.name });
});
test('when the allocation for a task is not running, the resource utilization graphs are replaced by an empty message', async function (assert) {
assert.equal(Task.resourceCharts.length, 0, 'No resource charts');
assert.equal(
Task.resourceEmptyMessage,
"Task isn't running",
'Empty message is appropriate'
);
});
test('exec button is absent', async function (assert) {
assert.notOk(Task.execButton.isPresent);
});
});
module('Acceptance | proxy task detail', function (hooks) {
setupApplicationTest(hooks);
setupMirage(hooks);
hooks.beforeEach(async function () {
server.create('agent');
server.create('node');
server.create('job', { createAllocations: false });
allocation = server.create('allocation', 'withTaskWithPorts', {
clientStatus: 'running',
});
const taskState = allocation.taskStates.models[0];
const task = server.schema.tasks.findBy({ name: taskState.name });
task.update('kind', 'connect-proxy:task');
task.save();
await Task.visit({ id: allocation.id, name: taskState.name });
});
test('a proxy tag is shown', async function (assert) {
assert.ok(Task.title.proxyTag.isPresent);
});
});