Add summary-filtering field

This only filters by slug for now… 🧐

ui/app/controllers/optimize.js

@@ -8,13 +8,18 @@ import { task } from 'ember-concurrency';
 import intersection from 'lodash.intersection';
 import { serialize, deserializedQueryParam as selection } from 'nomad-ui/utils/qp-serialize';
 
+import EmberObject, { computed } from '@ember/object';
+import { alias } from '@ember/object/computed';
+import Searchable from 'nomad-ui/mixins/searchable';
+import classic from 'ember-classic-decorator';
+
 export default class OptimizeController extends Controller {
   @controller('optimize/summary') summaryController;
 
   queryParams = [
-    // {
-    //   searchTerm: 'search',
-    // },
+    {
+      searchTerm: 'search',
+    },
     {
       qpType: 'type',
     },
@@ -29,6 +34,16 @@ export default class OptimizeController extends Controller {
     },
   ];
 
+  constructor() {
+    super(...arguments);
+
+    this.summarySearch = RecommendationSummarySearch.create({
+      dataSource: this,
+    });
+  }
+
+  @tracked searchTerm = '';
+
   @tracked qpType = '';
   @tracked qpStatus = '';
   @tracked qpDatacenter = '';
@@ -112,7 +127,7 @@ export default class OptimizeController extends Controller {
 
     // A summary’s job must match ALL filter facets, but it can match ANY selection within a facet
     // Always return early to prevent unnecessary facet predicates.
-    return this.model.filter(summary => {
+    return this.summarySearch.listSearched.filter(summary => {
       const job = summary.get('job');
 
       if (types.length && !types.includes(job.get('displayType'))) {
@@ -166,3 +181,18 @@ export default class OptimizeController extends Controller {
     this[queryParam] = serialize(selection);
   }
 }
+
+@classic
+class RecommendationSummarySearch extends EmberObject.extend(Searchable) {
+  @computed
+  get fuzzySearchProps() {
+    return ['slug'];
+  }
+
+  @alias('dataSource.model') listToSearch;
+  @alias('dataSource.searchTerm') searchTerm;
+
+  exactMatchEnabled = false;
+  fuzzySearchEnabled = true;
+  includeFuzzySearchMatches = true;
+}

ui/app/models/recommendation-summary.js

@@ -47,6 +47,6 @@ export default class RecommendationSummary extends Model {
   }
 
   get slug() {
-    return `${this.jobId}/${this.taskGroupName}`;
+    return `${get(this, 'job.name')}/${this.taskGroupName}`;
   }
 }

ui/app/templates/optimize.hbs

@@ -4,11 +4,10 @@
       <div class="toolbar">
         <div class="toolbar-item">
           {{#if @model}}
-            {{!-- <SearchBox
-              data-test-jobs-search
+            <SearchBox
+              data-test-recommendation-summaries-search
               @searchTerm={{mut this.searchTerm}}
-              @onChange={{action this.resetPagination}}
-              @placeholder="Search jobs..." /> --}}
+              @placeholder="Search recommendations..." />
           {{/if}}
         </div>
         <div class="toolbar-item is-right-aligned is-mobile-full-width">

ui/tests/acceptance/optimize-test.js

@@ -351,7 +351,7 @@ module('Acceptance | optimize', function(hooks) {
   });
 });
 
-module('Acceptance | optimize facets', function(hooks) {
+module('Acceptance | optimize search and facets', function(hooks) {
   setupApplicationTest(hooks);
   setupMirage(hooks);
 
@@ -366,6 +366,29 @@ module('Acceptance | optimize facets', function(hooks) {
     window.localStorage.nomadTokenSecret = managementToken.secretId;
   });
 
+  test('search field narrows summary table results', async function(assert) {
+    server.createList('job', 1, {
+      name: 'oooooo',
+      createRecommendations: true,
+      groupsCount: 2,
+      groupTaskCount: 4,
+    });
+
+    server.createList('job', 1, {
+      name: 'pppppp',
+      createRecommendations: true,
+      groupsCount: 2,
+      groupTaskCount: 4,
+    });
+
+    await Optimize.visit();
+
+    await Optimize.search.fillIn('ooo');
+
+    assert.equal(Optimize.recommendationSummaries.length, 2);
+    assert.ok(Optimize.recommendationSummaries[0].slug.startsWith('oooooo'));
+  });
+
   test('the optimize page has appropriate faceted search options', async function(assert) {
     server.createList('job', 4, {
       status: 'running',

ui/tests/pages/optimize.js

@@ -24,6 +24,10 @@ export default create({
     return this.breadcrumbs.toArray().find(crumb => crumb.id === id);
   },
 
+  search: {
+    scope: '[data-test-recommendation-summaries-search] input',
+  },
+
   card: recommendationCard,
 
   recommendationSummaries: collection('[data-test-recommendation-summary-row]', {