diff --git a/ui/app/components/global-search/control.js b/ui/app/components/global-search/control.js index ef125dda5ef2..38cbdebf4fad 100644 --- a/ui/app/components/global-search/control.js +++ b/ui/app/components/global-search/control.js @@ -9,6 +9,7 @@ import Searchable from 'nomad-ui/mixins/searchable'; import classic from 'ember-classic-decorator'; const SLASH_KEY = 191; +const MAXIMUM_RESULTS = 10; @classNames('global-search-container') export default class GlobalSearchControl extends Component { @@ -60,16 +61,16 @@ export default class GlobalSearchControl extends Component { set(this, 'jobs', jobs.toArray()); set(this, 'nodes', nodes.toArray()); - const jobResults = this.jobSearch.listSearched; - const nodeResults = this.nodeSearch.listSearched; + const jobResults = this.jobSearch.listSearched.slice(0, MAXIMUM_RESULTS); + const nodeResults = this.nodeSearch.listSearched.slice(0, MAXIMUM_RESULTS); return [ { - groupName: `Jobs (${jobResults.length})`, + groupName: resultsGroupLabel('Jobs', jobResults, this.jobSearch.listSearched), options: jobResults, }, { - groupName: `Clients (${nodeResults.length})`, + groupName: resultsGroupLabel('Clients', nodeResults, this.nodeSearch.listSearched), options: nodeResults, }, ]; @@ -179,3 +180,15 @@ class NodeSearch extends EmberObject.extend(Searchable) { fuzzySearchEnabled = true; includeFuzzySearchMatches = true; } + +function resultsGroupLabel(type, renderedResults, allResults) { + let countString; + + if (renderedResults.length < allResults.length) { + countString = `showing ${renderedResults.length} of ${allResults.length}`; + } else { + countString = renderedResults.length; + } + + return `${type} (${countString})`; +} diff --git a/ui/tests/acceptance/search-test.js b/ui/tests/acceptance/search-test.js index 10c4a432db6c..7572f1ba6923 100644 --- a/ui/tests/acceptance/search-test.js +++ b/ui/tests/acceptance/search-test.js @@ -142,6 +142,25 @@ module('Acceptance | search', function(hooks) { }); }); + test('results are truncated at 10 per group', async function(assert) { + server.create('node', { name: 'xyz' }); + + for (let i = 0; i < 15; i++) { + server.create('job', { id: `job-${i}`, namespaceId: 'default' }); + } + + await visit('/'); + + await selectSearch(PageLayout.navbar.search.scope, 'job'); + + PageLayout.navbar.search.as(search => { + search.groups[0].as(jobs => { + assert.equal(jobs.name, 'Jobs (showing 10 of 15)'); + assert.equal(jobs.options.length, 10); + }); + }); + }); + test('clicking the search field starts search immediately', async function(assert) { await visit('/');