diff --git a/.changelog/20626.txt b/.changelog/20626.txt new file mode 100644 index 000000000000..09451912634b --- /dev/null +++ b/.changelog/20626.txt @@ -0,0 +1,3 @@ +```release-note:improvement +ui: namespace dropdown gets a search field and supports many namespaces +``` diff --git a/ui/app/controllers/jobs/index.js b/ui/app/controllers/jobs/index.js index a2d612472b59..733eb89ce164 100644 --- a/ui/app/controllers/jobs/index.js +++ b/ui/app/controllers/jobs/index.js @@ -392,6 +392,22 @@ export default class JobsIndexController extends Controller { }; } + @tracked namespaceFilter = ''; + + get shownNamespaces() { + return this.namespaceFacet.options.filter((option) => + option.label.toLowerCase().includes(this.namespaceFilter) + ); + } + + /** + * Pares down the list of namespaces + * @param {InputEvent & { target: HTMLInputElement }} event - The input event + */ + @action filterNamespaces(event) { + this.namespaceFilter = event.target.value.toLowerCase(); + } + get filterFacets() { let facets = [this.statusFacet, this.typeFacet]; if (this.system.shouldShowNodepools) { diff --git a/ui/app/templates/jobs/index.hbs b/ui/app/templates/jobs/index.hbs index edcd8ff89ee7..3a953ebad66b 100644 --- a/ui/app/templates/jobs/index.hbs +++ b/ui/app/templates/jobs/index.hbs @@ -20,7 +20,7 @@ /> {{#each this.filterFacets as |group|}} - + + - {{#each this.namespaceFacet.options as |option|}} + + + + {{#each this.shownNamespaces as |option|}}