From d9fb13862f815fa3b859fff9fb88cb346cc81e59 Mon Sep 17 00:00:00 2001
From: Buck Doyle <buck@hashicorp.com>
Date: Thu, 30 Jul 2020 15:13:12 -0500
Subject: [PATCH 1/2] Add truncation of rendered search results
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

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

I chose to have the full number of matches still render, though
I also considered having it display (10+) instead. The choice of
truncating at 10 is arbitrary, maybe a higher number would be
preferable, I’m open to suggestions.
---
 ui/app/components/global-search/control.js |  9 +++++----
 ui/tests/acceptance/search-test.js         | 19 +++++++++++++++++++
 2 files changed, 24 insertions(+), 4 deletions(-)

diff --git a/ui/app/components/global-search/control.js b/ui/app/components/global-search/control.js
index ef125dda5ef..2e5b1a7521d 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: `Jobs (${this.jobSearch.listSearched.length})`,
           options: jobResults,
         },
         {
-          groupName: `Clients (${nodeResults.length})`,
+          groupName: `Clients (${this.nodeSearch.listSearched.length})`,
           options: nodeResults,
         },
       ];
diff --git a/ui/tests/acceptance/search-test.js b/ui/tests/acceptance/search-test.js
index 10c4a432db6..e4b8d6a5e85 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 (15)');
+        assert.equal(jobs.options.length, 10);
+      });
+    });
+  });
+
   test('clicking the search field starts search immediately', async function(assert) {
     await visit('/');
 

From 0975f02f743ae0433fe42ef62d798d8c5e3850fa Mon Sep 17 00:00:00 2001
From: Buck Doyle <buck@hashicorp.com>
Date: Wed, 5 Aug 2020 08:53:54 -0500
Subject: [PATCH 2/2] Add truncation details to group heading

---
 ui/app/components/global-search/control.js | 16 ++++++++++++++--
 ui/tests/acceptance/search-test.js         |  2 +-
 2 files changed, 15 insertions(+), 3 deletions(-)

diff --git a/ui/app/components/global-search/control.js b/ui/app/components/global-search/control.js
index 2e5b1a7521d..38cbdebf4fa 100644
--- a/ui/app/components/global-search/control.js
+++ b/ui/app/components/global-search/control.js
@@ -66,11 +66,11 @@ export default class GlobalSearchControl extends Component {
 
       return [
         {
-          groupName: `Jobs (${this.jobSearch.listSearched.length})`,
+          groupName: resultsGroupLabel('Jobs', jobResults, this.jobSearch.listSearched),
           options: jobResults,
         },
         {
-          groupName: `Clients (${this.nodeSearch.listSearched.length})`,
+          groupName: resultsGroupLabel('Clients', nodeResults, this.nodeSearch.listSearched),
           options: nodeResults,
         },
       ];
@@ -180,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 e4b8d6a5e85..7572f1ba692 100644
--- a/ui/tests/acceptance/search-test.js
+++ b/ui/tests/acceptance/search-test.js
@@ -155,7 +155,7 @@ module('Acceptance | search', function(hooks) {
 
     PageLayout.navbar.search.as(search => {
       search.groups[0].as(jobs => {
-        assert.equal(jobs.name, 'Jobs (15)');
+        assert.equal(jobs.name, 'Jobs (showing 10 of 15)');
         assert.equal(jobs.options.length, 10);
       });
     });