From 7ae2081282ecbd7e07df3335dd3eece26702bc81 Mon Sep 17 00:00:00 2001
From: Michael Lange <dingoeatingfuzz@gmail.com>
Date: Wed, 17 Apr 2019 11:19:54 -0700
Subject: [PATCH] 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 | 22 +++++++++++++++++++++-
 ui/app/styles/components/badge.scss  |  5 +++++
 ui/app/templates/clients/client.hbs  | 12 +++++++++++-
 3 files changed, 37 insertions(+), 2 deletions(-)

diff --git a/ui/app/controllers/clients/client.js b/ui/app/controllers/clients/client.js
index 26dfc9b64..9044fd1f7 100644
--- a/ui/app/controllers/clients/client.js
+++ b/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);
+    },
   },
 });
diff --git a/ui/app/styles/components/badge.scss b/ui/app/styles/components/badge.scss
index 60f4f2c74..98087d9d8 100644
--- a/ui/app/styles/components/badge.scss
+++ b/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;
+}
diff --git a/ui/app/templates/clients/client.hbs b/ui/app/templates/clients/client.hbs
index 99e36f697..87a30f58f 100644
--- a/ui/app/templates/clients/client.hbs
+++ b/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)