feat: add filters to alloc table in task group view

ui/app/controllers/jobs/job/task-group.js

@@ -1,10 +1,14 @@
+/* eslint-disable ember/no-incorrect-calls-with-inline-anonymous-functions */
 import { inject as service } from '@ember/service';
 import { alias, readOnly } from '@ember/object/computed';
 import Controller from '@ember/controller';
 import { action, computed, get } from '@ember/object';
+import { scheduleOnce } from '@ember/runloop';
+import intersection from 'lodash.intersection';
 import Sortable from 'nomad-ui/mixins/sortable';
 import Searchable from 'nomad-ui/mixins/searchable';
 import WithNamespaceResetting from 'nomad-ui/mixins/with-namespace-resetting';
+import { serialize, deserializedQueryParam as selection } from 'nomad-ui/utils/qp-serialize';
 import classic from 'ember-classic-decorator';
 
 @classic
@@ -29,11 +33,19 @@ export default class TaskGroupController extends Controller.extend(
     {
       sortDescending: 'desc',
     },
+    {
+      qpStatus: 'status',
+    },
+    {
+      qpClient: 'client',
+    },
   ];
 
   currentPage = 1;
   @readOnly('userSettings.pageSize') pageSize;
 
+  qpStatus = '';
+  qpClient = '';
   sortProperty = 'modifyIndex';
   sortDescending = true;
 
@@ -42,15 +54,32 @@ export default class TaskGroupController extends Controller.extend(
     return ['shortId', 'name'];
   }
 
-  @computed('model.allocations.[]')
+  @computed('model.allocations.[]', 'selectionStatus', 'selectionClient')
   get allocations() {
-    return this.get('model.allocations') || [];
+    const allocations = this.get('model.allocations') || [];
+    const { selectionStatus, selectionClient } = this;
+
+    if (!allocations.length) return allocations;
+
+    return allocations.filter(alloc => {
+      if (selectionStatus.length && !selectionStatus.includes(alloc.clientStatus)) {
+        return false;
+      }
+      if (selectionClient.length && !selectionClient.includes(alloc.get('node.shortId'))) {
+        return false;
+      }
+
+      return true;
+    });
   }
 
   @alias('allocations') listToSort;
   @alias('listSorted') listToSearch;
   @alias('listSearched') sortedAllocations;
 
+  @selection('qpStatus') selectionStatus;
+  @selection('qpClient') selectionClient;
+
   @computed('model.scaleState.events.@each.time', function() {
     const events = get(this, 'model.scaleState.events');
     if (events) {
@@ -83,4 +112,33 @@ export default class TaskGroupController extends Controller.extend(
   scaleTaskGroup(count) {
     return this.model.scale(count);
   }
+
+  get optionsAllocationStatus() {
+    return [
+      { key: 'queued', label: 'Queued' },
+      { key: 'starting', label: 'Starting' },
+      { key: 'running', label: 'Running' },
+      { key: 'complete', label: 'Complete' },
+      { key: 'failed', label: 'Failed' },
+      { key: 'lost', label: 'Lost' },
+    ];
+  }
+
+  @computed('model.allocations.[]', 'selectionClient')
+  get optionsClients() {
+    const clients = Array.from(new Set(this.model.allocations.mapBy('node.shortId'))).compact();
+
+    // Update query param when the list of clients changes.
+    scheduleOnce('actions', () => {
+      // eslint-disable-next-line ember/no-side-effects
+      this.set('qpClient', serialize(intersection(clients, this.selectionClient)));
+    });
+
+    return clients.sort().map(dc => ({ key: dc, label: dc }));
+  }
+
+  @action
+  setFacetQueryParam(queryParam, selection) {
+    this.set(queryParam, serialize(selection));
+  }
 }

ui/app/templates/jobs/job/task-group.hbs

@@ -66,16 +66,32 @@
       </AllocationStatusBar>
     </div>
   </div>
-
   <div class="boxed-section">
     <div class="boxed-section-head">
       Allocations
-      <SearchBox
-        @searchTerm={{mut this.searchTerm}}
-        @placeholder="Search allocations..."
-        @onChange={{action this.resetPagination}}
-        @class="is-inline pull-right"
-        @inputClass="is-compact" />
+      <div class="pull-right is-subsection">
+        <MultiSelectDropdown
+          data-test-allocation-status-facet
+          @label="Status"
+          @options={{this.optionsAllocationStatus}}
+          @selection={{this.selectionStatus}}
+          @onSelect={{action "setFacetQueryParam" "qpStatus"}}
+        />
+        <MultiSelectDropdown
+          data-test-allocation-task-group-facet
+          @label="Client"
+          @options={{this.optionsClients}}
+          @selection={{this.selectionClient}}
+          @onSelect={{action "setFacetQueryParam" "qpClient"}}
+        />
+        <SearchBox
+          @searchTerm={{mut this.searchTerm}}
+          @placeholder="Search allocations..."
+          @onChange={{action this.resetPagination}}
+          @class="is-padded"
+          @inputClass="is-compact"
+        />
+      </div>
     </div>
     <div class="boxed-section-body is-full-bleed">
       {{#if this.sortedAllocations}}