- {{#if (eq filteredJobs.length 0)}}
+ {{#if (eq visibleJobs.length 0)}}
No Jobs
The cluster is currently empty.
+ {{else if (eq filteredJobs.length 0)}}
+
No Matches
+
+ No jobs match your current filter selection.
+
{{else if searchTerm}}
No Matches
No jobs match the term {{searchTerm}}
diff --git a/ui/tests/acceptance/jobs-list-test.js b/ui/tests/acceptance/jobs-list-test.js
index f8b8bc92abf5..7dfdd0e1e1f6 100644
--- a/ui/tests/acceptance/jobs-list-test.js
+++ b/ui/tests/acceptance/jobs-list-test.js
@@ -166,3 +166,262 @@ test('when accessing jobs is forbidden, show a message with a link to the tokens
function typeForJob(job) {
return job.periodic ? 'periodic' : job.parameterized ? 'parameterized' : job.type;
}
+
+test('the jobs list page has appropriate faceted search options', function(assert) {
+ JobsList.visit();
+
+ andThen(() => {
+ assert.ok(JobsList.facets.type.isPresent, 'Type facet found');
+ assert.ok(JobsList.facets.status.isPresent, 'Status facet found');
+ assert.ok(JobsList.facets.datacenter.isPresent, 'Datacenter facet found');
+ assert.ok(JobsList.facets.prefix.isPresent, 'Prefix facet found');
+ });
+});
+
+testFacet('Type', {
+ facet: JobsList.facets.type,
+ paramName: 'type',
+ expectedOptions: ['Batch', 'Parameterized', 'Periodic', 'Service', 'System'],
+ beforeEach() {
+ server.createList('job', 2, { createAllocations: false, type: 'batch' });
+ server.createList('job', 2, {
+ createAllocations: false,
+ type: 'batch',
+ periodic: true,
+ childrenCount: 0,
+ });
+ server.createList('job', 2, {
+ createAllocations: false,
+ type: 'batch',
+ parameterized: true,
+ childrenCount: 0,
+ });
+ server.createList('job', 2, { createAllocations: false, type: 'service' });
+ JobsList.visit();
+ },
+ filter(job, selection) {
+ let displayType = job.type;
+ if (job.parameterized) displayType = 'parameterized';
+ if (job.periodic) displayType = 'periodic';
+ return selection.includes(displayType);
+ },
+});
+
+testFacet('Status', {
+ facet: JobsList.facets.status,
+ paramName: 'status',
+ expectedOptions: ['Pending', 'Running', 'Dead'],
+ beforeEach() {
+ server.createList('job', 2, { status: 'pending', createAllocations: false, childrenCount: 0 });
+ server.createList('job', 2, { status: 'running', createAllocations: false, childrenCount: 0 });
+ server.createList('job', 2, { status: 'dead', createAllocations: false, childrenCount: 0 });
+ JobsList.visit();
+ },
+ filter: (job, selection) => selection.includes(job.status),
+});
+
+testFacet('Datacenter', {
+ facet: JobsList.facets.datacenter,
+ paramName: 'dc',
+ expectedOptions(jobs) {
+ const allDatacenters = new Set(
+ jobs.mapBy('datacenters').reduce((acc, val) => acc.concat(val), [])
+ );
+ return Array.from(allDatacenters).sort();
+ },
+ beforeEach() {
+ server.create('job', {
+ datacenters: ['pdx', 'lax'],
+ createAllocations: false,
+ childrenCount: 0,
+ });
+ server.create('job', {
+ datacenters: ['pdx', 'ord'],
+ createAllocations: false,
+ childrenCount: 0,
+ });
+ server.create('job', {
+ datacenters: ['lax', 'jfk'],
+ createAllocations: false,
+ childrenCount: 0,
+ });
+ server.create('job', {
+ datacenters: ['jfk', 'dfw'],
+ createAllocations: false,
+ childrenCount: 0,
+ });
+ server.create('job', { datacenters: ['pdx'], createAllocations: false, childrenCount: 0 });
+ JobsList.visit();
+ },
+ filter: (job, selection) => job.datacenters.find(dc => selection.includes(dc)),
+});
+
+testFacet('Prefix', {
+ facet: JobsList.facets.prefix,
+ paramName: 'prefix',
+ expectedOptions: ['hashi (3)', 'nmd (2)', 'pre (2)'],
+ beforeEach() {
+ [
+ 'pre-one',
+ 'hashi-one',
+ 'nmd-one',
+ 'one-alone',
+ 'pre-two',
+ 'hashi-two',
+ 'hashi-three',
+ 'nmd-two',
+ 'noprefix',
+ ].forEach(name => {
+ server.create('job', { name, createAllocations: false, childrenCount: 0 });
+ });
+ JobsList.visit();
+ },
+ filter: (job, selection) => selection.find(prefix => job.name.startsWith(prefix)),
+});
+
+test('when the facet selections result in no matches, the empty state states why', function(assert) {
+ server.createList('job', 2, { status: 'pending', createAllocations: false, childrenCount: 0 });
+
+ JobsList.visit();
+
+ andThen(() => {
+ JobsList.facets.status.toggle();
+ });
+
+ andThen(() => {
+ JobsList.facets.status.options.objectAt(1).toggle();
+ });
+
+ andThen(() => {
+ assert.ok(JobsList.isEmpty, 'There is an empty message');
+ assert.equal(JobsList.emptyState.headline, 'No Matches', 'The message is appropriate');
+ });
+});
+
+test('the jobs list is immediately filtered based on query params', function(assert) {
+ server.create('job', { type: 'batch', createAllocations: false });
+ server.create('job', { type: 'service', createAllocations: false });
+
+ JobsList.visit({ type: JSON.stringify(['batch']) });
+
+ andThen(() => {
+ assert.equal(JobsList.jobs.length, 1, 'Only one job shown due to query param');
+ });
+});
+
+function testFacet(label, { facet, paramName, beforeEach, filter, expectedOptions }) {
+ test(`the ${label} facet has the correct options`, function(assert) {
+ beforeEach();
+
+ andThen(() => {
+ facet.toggle();
+ });
+
+ andThen(() => {
+ let expectation;
+ if (typeof expectedOptions === 'function') {
+ expectation = expectedOptions(server.db.jobs);
+ } else {
+ expectation = expectedOptions;
+ }
+
+ assert.deepEqual(
+ facet.options.map(option => option.label.trim()),
+ expectation,
+ 'Options for facet are as expected'
+ );
+ });
+ });
+
+ test(`the ${label} facet filters the jobs list by ${label}`, function(assert) {
+ let option;
+
+ beforeEach();
+
+ andThen(() => {
+ facet.toggle();
+ });
+
+ andThen(() => {
+ option = facet.options.objectAt(0);
+ option.toggle();
+ });
+
+ andThen(() => {
+ const selection = [option.key];
+ const expectedJobs = server.db.jobs
+ .filter(job => filter(job, selection))
+ .sortBy('modifyIndex')
+ .reverse();
+
+ JobsList.jobs.forEach((job, index) => {
+ assert.equal(
+ job.id,
+ expectedJobs[index].id,
+ `Job at ${index} is ${expectedJobs[index].id}`
+ );
+ });
+ });
+ });
+
+ test(`selecting multiple options in the ${label} facet results in a broader search`, function(assert) {
+ const selection = [];
+
+ beforeEach();
+
+ andThen(() => {
+ facet.toggle();
+ });
+
+ andThen(() => {
+ const option1 = facet.options.objectAt(0);
+ const option2 = facet.options.objectAt(1);
+ option1.toggle();
+ selection.push(option1.key);
+ option2.toggle();
+ selection.push(option2.key);
+ });
+
+ andThen(() => {
+ const expectedJobs = server.db.jobs
+ .filter(job => filter(job, selection))
+ .sortBy('modifyIndex')
+ .reverse();
+
+ JobsList.jobs.forEach((job, index) => {
+ assert.equal(
+ job.id,
+ expectedJobs[index].id,
+ `Job at ${index} is ${expectedJobs[index].id}`
+ );
+ });
+ });
+ });
+
+ test(`selecting options in the ${label} facet updates the ${paramName} query param`, function(assert) {
+ const selection = [];
+
+ beforeEach();
+
+ andThen(() => {
+ facet.toggle();
+ });
+
+ andThen(() => {
+ const option1 = facet.options.objectAt(0);
+ const option2 = facet.options.objectAt(1);
+ option1.toggle();
+ selection.push(option1.key);
+ option2.toggle();
+ selection.push(option2.key);
+ });
+
+ andThen(() => {
+ assert.equal(
+ currentURL(),
+ `/jobs?${paramName}=${encodeURIComponent(JSON.stringify(selection))}`,
+ 'URL has the correct query param key and value'
+ );
+ });
+ });
+}
diff --git a/ui/tests/integration/multi-select-dropdown-test.js b/ui/tests/integration/multi-select-dropdown-test.js
index 9b9ff1b0371e..f619ba808651 100644
--- a/ui/tests/integration/multi-select-dropdown-test.js
+++ b/ui/tests/integration/multi-select-dropdown-test.js
@@ -297,3 +297,15 @@ test('pressing ESC when the options list is open closes the list and returns foc
'The trigger has focus'
);
});
+
+test('when there are no list options, an empty message is shown', function(assert) {
+ const props = commonProperties();
+ props.options = [];
+ this.setProperties(props);
+ this.render(commonTemplate);
+
+ click('[data-test-dropdown-trigger]');
+ assert.ok(find('[data-test-dropdown-options]'), 'The dropdown is still shown');
+ assert.ok(find('[data-test-dropdown-empty]'), 'The empty state is shown');
+ assert.notOk(find('[data-test-dropdown-option]'), 'No options are shown');
+});
diff --git a/ui/tests/pages/components/facet.js b/ui/tests/pages/components/facet.js
new file mode 100644
index 000000000000..5dce211cdd29
--- /dev/null
+++ b/ui/tests/pages/components/facet.js
@@ -0,0 +1,17 @@
+import { isPresent, clickable, collection, text, attribute } from 'ember-cli-page-object';
+
+export default scope => ({
+ scope,
+
+ isPresent: isPresent(),
+
+ toggle: clickable('[data-test-dropdown-trigger]'),
+
+ options: collection('[data-test-dropdown-option]', {
+ testContainer: '#ember-testing',
+ resetScope: true,
+ label: text(),
+ key: attribute('data-test-dropdown-option'),
+ toggle: clickable('label'),
+ }),
+});
diff --git a/ui/tests/pages/jobs/list.js b/ui/tests/pages/jobs/list.js
index 24aff62f2877..620a6cec445e 100644
--- a/ui/tests/pages/jobs/list.js
+++ b/ui/tests/pages/jobs/list.js
@@ -9,6 +9,8 @@ import {
visitable,
} from 'ember-cli-page-object';
+import facet from 'nomad-ui/tests/pages/components/facet';
+
export default create({
pageSize: 10,
@@ -55,4 +57,11 @@ export default create({
label: text(),
}),
},
+
+ facets: {
+ type: facet('[data-test-type-facet]'),
+ status: facet('[data-test-status-facet]'),
+ datacenter: facet('[data-test-datacenter-facet]'),
+ prefix: facet('[data-test-prefix-facet]'),
+ },
});