Preemptions count and filtering on client detail page

Show the count in the allocations table next to the existing total alloc
count badge. Clicking either will filter by all or by preemptions.

ui/app/controllers/clients/client.js

@@ -10,6 +10,7 @@ export default Controller.extend(Sortable, Searchable, {
     searchTerm: 'search',
     sortProperty: 'sort',
     sortDescending: 'desc',
+    onlyPreemptions: 'preemptions',
   },
 
   currentPage: 1,
@@ -20,10 +21,25 @@ export default Controller.extend(Sortable, Searchable, {
 
   searchProps: computed(() => ['shortId', 'name']),
 
-  listToSort: alias('model.allocations'),
+  onlyPreemptions: false,
+
+  visibleAllocations: computed(
+    'model.allocations.[]',
+    'preemptions.[]',
+    'onlyPreemptions',
+    function() {
+      return this.onlyPreemptions ? this.preemptions : this.model.allocations;
+    }
+  ),
+
+  listToSort: alias('visibleAllocations'),
   listToSearch: alias('listSorted'),
   sortedAllocations: alias('listSearched'),
 
+  preemptions: computed('model.allocations.@each.wasPreempted', function() {
+    return this.model.allocations.filterBy('wasPreempted');
+  }),
+
   sortedEvents: computed('model.events.@each.time', function() {
     return this.get('model.events')
       .sortBy('time')
@@ -38,5 +54,9 @@ export default Controller.extend(Sortable, Searchable, {
     gotoAllocation(allocation) {
       this.transitionToRoute('allocations.allocation', allocation);
     },
+
+    setPreemptionFilter(value) {
+      this.set('onlyPreemptions', value);
+    },
   },
 });

ui/app/styles/components/badge.scss

@@ -4,6 +4,7 @@
   line-height: 1;
   border-radius: $radius;
   padding: 0.25em 0.75em;
+  border: none;
 
   @each $name, $pair in $colors {
     $color: nth($pair, 1);
@@ -43,3 +44,7 @@
     background: lighten($grey-blue, 10%);
   }
 }
+
+button.badge {
+  cursor: pointer;
+}

ui/app/templates/clients/client.hbs

@@ -95,7 +95,17 @@
 
   <div class="boxed-section">
     <div class="boxed-section-head">
-      <div>Allocations <span class="badge is-white">{{model.allocations.length}}</span></div>
+      <div>
+        Allocations
+        <button role="button" class="badge is-white" onclick={{action "setPreemptionFilter" false}}>
+          {{model.allocations.length}}
+        </button>
+        {{#if preemptions.length}}
+          <button role="button" class="badge is-warning" onclick={{action "setPreemptionFilter" true}}>
+            {{preemptions.length}} {{pluralize "preemption" preemptions.length}}
+          </button>
+        {{/if}}
+      </div>
       {{search-box
         searchTerm=(mut searchTerm)
         onChange=(action resetPagination)