diff --git a/ui/admin/app/routes/scopes/scope/workers/index.js b/ui/admin/app/routes/scopes/scope/workers/index.js index 9b0f77965..b1cb00cc9 100644 --- a/ui/admin/app/routes/scopes/scope/workers/index.js +++ b/ui/admin/app/routes/scopes/scope/workers/index.js @@ -17,21 +17,21 @@ export default class ScopesScopeWorkersIndexRoute extends Route { // it's loaded. @resourceFilter({ allowed: (route) => { - const configTags = route + const allTags = route .modelFor('scopes.scope.workers') - .flatMap((worker) => worker.configTagList) + .flatMap((worker) => worker.allTags) .filter(Boolean); // Filter out duplicate tags - return configTags.reduce((uniqueConfigTags, currentTag) => { - const isDuplicateTag = uniqueConfigTags.some( + return allTags.reduce((uniqueTags, currentTag) => { + const isDuplicateTag = uniqueTags.some( (tag) => tag.key === currentTag.key && tag.value === currentTag.value, ); if (!isDuplicateTag) { - uniqueConfigTags.push(currentTag); + uniqueTags.push(currentTag); } - return uniqueConfigTags; + return uniqueTags; }, []); }, findBySerialized: ({ key: itemKey, value: itemValue }, { key, value }) => @@ -49,14 +49,14 @@ export default class ScopesScopeWorkersIndexRoute extends Route { ); if (this.tags?.length) { - // Return workers that have config tags that have at + // Return workers that have config and/or api tags that have at // least one intersection with the filter tags return workers.filter((worker) => { - if (!worker.config_tags) { + if (!worker.config_tags && !worker.api_tags) { return null; } - const workerTags = worker.configTagList; + const workerTags = worker.allTags; return this.tags.some((tag) => workerTags.some( (workerTag) => diff --git a/ui/admin/app/styles/app.scss b/ui/admin/app/styles/app.scss index b79823621..b790e8f44 100644 --- a/ui/admin/app/styles/app.scss +++ b/ui/admin/app/styles/app.scss @@ -1047,6 +1047,13 @@ } // workers +.workers { + .rose-dropdown-content { + max-height: 300px; + overflow: scroll; + } +} + .view-more-tags { margin-top: 1.5rem; } diff --git a/ui/admin/app/templates/scopes/scope/workers/index.hbs b/ui/admin/app/templates/scopes/scope/workers/index.hbs index 054eb45ff..0fc830bf8 100644 --- a/ui/admin/app/templates/scopes/scope/workers/index.hbs +++ b/ui/admin/app/templates/scopes/scope/workers/index.hbs @@ -27,7 +27,7 @@ {{/if}} - + {{#if @model}} diff --git a/ui/admin/tests/acceptance/workers/list-test.js b/ui/admin/tests/acceptance/workers/list-test.js index 2e73cb327..092a0d441 100644 --- a/ui/admin/tests/acceptance/workers/list-test.js +++ b/ui/admin/tests/acceptance/workers/list-test.js @@ -23,6 +23,9 @@ const WORKERS_FLYOUT_VIEW_MORE_TAGS = '[data-test-worker-tags-flyout] .view-more-tags a'; const WORKER_TAGS_BUTTON = (workerId) => `[data-test-worker-tags-flyout-button="${workerId}"]`; +const TAGS_FILTER_TOGGLE = '.workers details summary'; +const TAGS_FILTER_FIRST_ITEM_SELECTOR = + '.workers details div input:first-child'; module('Acceptance | workers | list', function (hooks) { setupApplicationTest(hooks); @@ -36,6 +39,7 @@ module('Acceptance | workers | list', function (hooks) { global: null, }, worker: null, + worker2: null, }; const urls = { @@ -47,8 +51,12 @@ module('Acceptance | workers | list', function (hooks) { hooks.beforeEach(function () { instances.scopes.global = this.server.create('scope', { id: 'global' }); - const scope = instances.scopes.global; - instances.worker = this.server.create('worker', { scopeId: scope.id }); + instances.worker = this.server.create('worker', { + scope: instances.scopes.global, + }); + instances.worker2 = this.server.create('worker', { + scope: instances.scopes.global, + }); urls.globalScope = `/scopes/global/scopes`; urls.workers = `/scopes/global/workers`; urls.worker = `${urls.workers}/${instances.worker.id}`; @@ -94,6 +102,18 @@ module('Acceptance | workers | list', function (hooks) { assert.dom(`[href="${urls.workers}"]`).isVisible(); }); + test('Users can filter by tags', async function (assert) { + featuresService.enable('byow'); + await visit(urls.workers); + + assert.dom('tbody tr').exists({ count: 2 }); + + await click(TAGS_FILTER_TOGGLE); + await click(TAGS_FILTER_FIRST_ITEM_SELECTOR); + + assert.dom('tbody tr').exists({ count: 1 }); + }); + test('Users can open and close tags flyout for a specific worker', async function (assert) { featuresService.enable('byow'); await visit(urls.workers);