Add filtering to the plugin allocations page

ui/app/controllers/csi/plugins/plugin/allocations.js

@@ -4,6 +4,7 @@ import { computed } from '@ember/object';
 import { alias, readOnly } from '@ember/object/computed';
 import SortableFactory from 'nomad-ui/mixins/sortable-factory';
 import { lazyClick } from 'nomad-ui/helpers/lazy-click';
+import { serialize, deserializedQueryParam as selection } from 'nomad-ui/utils/qp-serialize';
 
 export default Controller.extend(SortableFactory(['updateTime', 'healthy']), {
   userSettings: service(),
@@ -12,6 +13,8 @@ export default Controller.extend(SortableFactory(['updateTime', 'healthy']), {
     currentPage: 'page',
     sortProperty: 'sort',
     sortDescending: 'desc',
+    qpHealth: 'healthy',
+    qpType: 'type',
   },
 
   currentPage: 1,
@@ -20,14 +23,52 @@ export default Controller.extend(SortableFactory(['updateTime', 'healthy']), {
   sortProperty: 'updateTime',
   sortDescending: false,
 
+  qpType: '',
+  qpHealth: '',
+
+  selectionType: selection('qpType'),
+  selectionHealth: selection('qpHealth'),
+
+  optionsType: computed(() => [
+    { key: 'controller', label: 'Controller' },
+    { key: 'node', label: 'Node' },
+  ]),
+
+  optionsHealth: computed(() => [
+    { key: true, label: 'Healthy' },
+    { key: false, label: 'Unhealthy' },
+  ]),
+
   combinedAllocations: computed('model.controllers.[]', 'model.nodes.[]', function() {
     return this.model.controllers.toArray().concat(this.model.nodes.toArray());
   }),
 
-  listToSort: alias('combinedAllocations'),
+  filteredAllocations: computed(
+    'combinedAllocations.[]',
+    'model.controllers.[]',
+    'model.nodes.[]',
+    'selectionType',
+    'selectionHealth',
+    function() {
+      const { selectionType: types, selectionHealth: healths } = this;
+
+      // Instead of filtering the combined list, revert back to one of the two
+      // pre-existing lists.
+      let listToFilter = this.combinedAllocations;
+      if (types.length === 1 && types[0] === 'controller') {
+        listToFilter = this.model.controllers;
+      } else if (types.length === 1 && types[0] === 'node') {
+        listToFilter = this.model.nodes;
+      }
+
+      if (healths.length === 1 && healths[0]) return listToFilter.filterBy('healthy');
+      if (healths.length === 1 && !healths[0]) return listToFilter.filterBy('healthy', false);
+      return listToFilter;
+    }
+  ),
+
+  listToSort: alias('filteredAllocations'),
   sortedAllocations: alias('listSorted'),
-  // TODO: Add facets for filtering
-  filteredAllocations: alias('sortedAllocations'),
 
   resetPagination() {
     if (this.currentPage != null) {
@@ -35,6 +76,10 @@ export default Controller.extend(SortableFactory(['updateTime', 'healthy']), {
     }
   },
 
+  setFacetQueryParam(queryParam, selection) {
+    this.set(queryParam, serialize(selection));
+  },
+
   actions: {
     gotoAllocation(allocation, event) {
       lazyClick([() => this.transitionToRoute('allocations.allocation', allocation), event]);

ui/app/templates/csi/plugins/plugin/allocations.hbs

@@ -6,8 +6,25 @@
   </ul>
 </div>
 <section class="section">
+  <div class="toolbar">
+    <div class="toolbar-item is-right-aligned is-mobile-full-width">
+      <div class="button-bar">
+        {{multi-select-dropdown
+          data-test-health-facet
+          label="Health"
+          options=optionsHealth
+          selection=selectionHealth
+          onSelect=(action setFacetQueryParam "qpHealth")}}
+        {{multi-select-dropdown
+          data-test-type-facet
+          label="Type"
+          options=optionsType
+          selection=selectionType
+          onSelect=(action setFacetQueryParam "qpType")}}
+      </div>
+    </div>
+  </div>
   {{#if filteredAllocations}}
-  {{log pageSize}}
     {{#list-pagination
       source=filteredAllocations
       size=pageSize