UI: Add truncation of rendered search results (#8571)

This closes #8549. Thanks to @optiz0r for the bug report. Having
the global search attempt to render every returned result is
obviously a mistake!

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})`;
+}

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('/');