7dbebe9a93
* [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
468 lines
14 KiB
JavaScript
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);
|
|
});
|
|
});
|