Merge pull request #11545 from hashicorp/f-ui/add-alloc-filters-on-table

Add Allocation Filters in Client View

.changelog/11545.txt

@@ -0,0 +1,3 @@
+```release-note:improvement
+ui: Add filters to the allocation list in the client and task group details pages
+```

ui/app/controllers/clients/client/index.js

@@ -1,12 +1,16 @@
 /* eslint-disable ember/no-observers */
+/* eslint-disable ember/no-incorrect-calls-with-inline-anonymous-functions */
 import { alias } from '@ember/object/computed';
 import Controller from '@ember/controller';
 import { action, computed } from '@ember/object';
 import { observes } from '@ember-decorators/object';
+import { scheduleOnce } from '@ember/runloop';
 import { task } from 'ember-concurrency';
+import intersection from 'lodash.intersection';
 import Sortable from 'nomad-ui/mixins/sortable';
 import Searchable from 'nomad-ui/mixins/searchable';
 import messageFromAdapterError from 'nomad-ui/utils/message-from-adapter-error';
+import { serialize, deserializedQueryParam as selection } from 'nomad-ui/utils/qp-serialize';
 import classic from 'ember-classic-decorator';
 
 @classic
@@ -27,11 +31,23 @@ export default class ClientController extends Controller.extend(Sortable, Search
     {
       onlyPreemptions: 'preemptions',
     },
+    {
+      qpNamespace: 'namespace',
+    },
+    {
+      qpJob: 'job',
+    },
+    {
+      qpStatus: 'status',
+    },
   ];
 
   // Set in the route
   flagAsDraining = false;
 
+  qpNamespace = '';
+  qpJob = '';
+  qpStatus = '';
   currentPage = 1;
   pageSize = 8;
 
@@ -50,10 +66,32 @@ export default class ClientController extends Controller.extend(Sortable, Search
     return this.onlyPreemptions ? this.preemptions : this.model.allocations;
   }
 
-  @alias('visibleAllocations') listToSort;
+  @computed('visibleAllocations.[]', 'selectionNamespace', 'selectionJob', 'selectionStatus')
+  get filteredAllocations() {
+    const { selectionNamespace, selectionJob, selectionStatus } = this;
+
+    return this.visibleAllocations.filter(alloc => {
+      if (selectionNamespace.length && !selectionNamespace.includes(alloc.get('namespace'))) {
+        return false;
+      }
+      if (selectionJob.length && !selectionJob.includes(alloc.get('plainJobId'))) {
+        return false;
+      }
+      if (selectionStatus.length && !selectionStatus.includes(alloc.clientStatus)) {
+        return false;
+      }
+      return true;
+    });
+  }
+
+  @alias('filteredAllocations') listToSort;
   @alias('listSorted') listToSearch;
   @alias('listSearched') sortedAllocations;
 
+  @selection('qpNamespace') selectionNamespace;
+  @selection('qpJob') selectionJob;
+  @selection('qpStatus') selectionStatus;
+
   eligibilityError = null;
   stopDrainError = null;
   drainError = null;
@@ -147,4 +185,52 @@ export default class ClientController extends Controller.extend(Sortable, Search
     const error = messageFromAdapterError(err) || 'Could not run drain';
     this.set('drainError', error);
   }
+
+  get optionsAllocationStatus() {
+    return [
+      { key: 'pending', label: 'Pending' },
+      { key: 'running', label: 'Running' },
+      { key: 'complete', label: 'Complete' },
+      { key: 'failed', label: 'Failed' },
+      { key: 'lost', label: 'Lost' },
+    ];
+  }
+
+  @computed('model.allocations.[]', 'selectionJob', 'selectionNamespace')
+  get optionsJob() {
+    // Only show options for jobs in the selected namespaces, if any.
+    const ns = this.selectionNamespace;
+    const jobs = Array.from(
+      new Set(
+        this.model.allocations
+          .filter(a => ns.length === 0 || ns.includes(a.namespace))
+          .mapBy('plainJobId')
+      )
+    ).compact();
+
+    // Update query param when the list of jobs changes.
+    scheduleOnce('actions', () => {
+      // eslint-disable-next-line ember/no-side-effects
+      this.set('qpJob', serialize(intersection(jobs, this.selectionJob)));
+    });
+
+    return jobs.sort().map(job => ({ key: job, label: job }));
+  }
+
+  @computed('model.allocations.[]', 'selectionNamespace')
+  get optionsNamespace() {
+    const ns = Array.from(new Set(this.model.allocations.mapBy('namespace'))).compact();
+
+    // Update query param when the list of namespaces changes.
+    scheduleOnce('actions', () => {
+      // eslint-disable-next-line ember/no-side-effects
+      this.set('qpNamespace', serialize(intersection(ns, this.selectionNamespace)));
+    });
+
+    return ns.sort().map(n => ({ key: n, label: n }));
+  }
+
+  setFacetQueryParam(queryParam, selection) {
+    this.set(queryParam, serialize(selection));
+  }
 }

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;
 
@@ -47,10 +59,29 @@ export default class TaskGroupController extends Controller.extend(
     return this.get('model.allocations') || [];
   }
 
-  @alias('allocations') listToSort;
+  @computed('allocations.[]', 'selectionStatus', 'selectionClient')
+  get filteredAllocations() {
+    const { selectionStatus, selectionClient } = this;
+
+    return this.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('filteredAllocations') 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 +114,31 @@ export default class TaskGroupController extends Controller.extend(
   scaleTaskGroup(count) {
     return this.model.scale(count);
   }
+
+  get optionsAllocationStatus() {
+    return [
+      { key: 'pending', label: 'Pending' },
+      { 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 }));
+  }
+
+  setFacetQueryParam(queryParam, selection) {
+    this.set(queryParam, serialize(selection));
+  }
 }

ui/app/models/allocation.js

@@ -23,6 +23,7 @@ export default class Allocation extends Model {
   @shortUUIDProperty('id') shortId;
   @belongsTo('job') job;
   @belongsTo('node') node;
+  @attr('string') namespace;
   @attr('string') name;
   @attr('string') taskGroupName;
   @fragment('resources') resources;
@@ -38,6 +39,11 @@ export default class Allocation extends Model {
   @attr('string') clientStatus;
   @attr('string') desiredStatus;
 
+  @computed('')
+  get plainJobId() {
+    return JSON.parse(this.belongsTo('job').id())[0];
+  }
+
   @computed('clientStatus')
   get statusIndex() {
     return STATUS_ORDER[this.clientStatus] || 100;

ui/app/styles/components/boxed-section.scss

@@ -19,6 +19,15 @@
       margin-left: auto;
     }
 
+    .is-subsection {
+      display: flex;
+      align-items: baseline;
+
+      .is-padded {
+        padding: 0em 0em 0em 1em;
+      }
+    }
+
     .is-fixed-width {
       display: inline-block;
       width: 8em;