diff --git a/ui/app/templates/clients/client.hbs b/ui/app/templates/clients/client.hbs
index 87a30f58f..7e87fee34 100644
--- a/ui/app/templates/clients/client.hbs
+++ b/ui/app/templates/clients/client.hbs
@@ -97,11 +97,11 @@
     <div class="boxed-section-head">
       <div>
         Allocations
-        <button role="button" class="badge is-white" onclick={{action "setPreemptionFilter" false}}>
+        <button role="button" class="badge is-white" onclick={{action "setPreemptionFilter" false}} data-test-filter-all>
           {{model.allocations.length}}
         </button>
         {{#if preemptions.length}}
-          <button role="button" class="badge is-warning" onclick={{action "setPreemptionFilter" true}}>
+          <button role="button" class="badge is-warning" onclick={{action "setPreemptionFilter" true}} data-test-filter-preemptions>
             {{preemptions.length}} {{pluralize "preemption" preemptions.length}}
           </button>
         {{/if}}
diff --git a/ui/tests/acceptance/client-detail-test.js b/ui/tests/acceptance/client-detail-test.js
index 5750ee6e2..2307731ed 100644
--- a/ui/tests/acceptance/client-detail-test.js
+++ b/ui/tests/acceptance/client-detail-test.js
@@ -12,6 +12,8 @@ import Jobs from 'nomad-ui/tests/pages/jobs/list';
 
 let node;
 
+const wasPreemptedFilter = allocation => !!allocation.preemptedByAllocation;
+
 module('Acceptance | client detail', function(hooks) {
   setupApplicationTest(hooks);
   setupMirage(hooks);
@@ -24,6 +26,7 @@ module('Acceptance | client detail', function(hooks) {
     server.create('agent');
     server.create('job', { createAllocations: false });
     server.createList('allocation', 3, { nodeId: node.id, clientStatus: 'running' });
+    server.create('allocation', 'preempted', { nodeId: node.id, clientStatus: 'running' });
   });
 
   test('/clients/:id should have a breadcrumb trail linking back to clients', async function(assert) {
@@ -219,6 +222,65 @@ module('Acceptance | client detail', function(hooks) {
     );
   });
 
+  test('the allocation section should show the count of preempted allocations on the client', async function(assert) {
+    const allocations = server.db.allocations.where({ nodeId: node.id });
+
+    await ClientDetail.visit({ id: node.id });
+
+    assert.equal(
+      ClientDetail.allocationFilter.allCount,
+      allocations.length,
+      'All filter/badge shows all allocations count'
+    );
+    assert.ok(
+      ClientDetail.allocationFilter.preemptionsCount.startsWith(
+        allocations.filter(wasPreemptedFilter).length
+      ),
+      'Preemptions filter/badge shows preempted allocations count'
+    );
+  });
+
+  test('clicking the preemption badge filters the allocations table and sets a query param', async function(assert) {
+    const allocations = server.db.allocations.where({ nodeId: node.id });
+
+    await ClientDetail.visit({ id: node.id });
+    await ClientDetail.allocationFilter.preemptions();
+
+    assert.equal(
+      ClientDetail.allocations.length,
+      allocations.filter(wasPreemptedFilter).length,
+      'Only preempted allocations are shown'
+    );
+    assert.equal(
+      currentURL(),
+      `/clients/${node.id}?preemptions=true`,
+      'Filter is persisted in the URL'
+    );
+  });
+
+  test('clicking the total allocations badge resets the filter and removes the query param', async function(assert) {
+    const allocations = server.db.allocations.where({ nodeId: node.id });
+
+    await ClientDetail.visit({ id: node.id });
+    await ClientDetail.allocationFilter.preemptions();
+    await ClientDetail.allocationFilter.all();
+
+    assert.equal(ClientDetail.allocations.length, allocations.length, 'All allocations are shown');
+    assert.equal(currentURL(), `/clients/${node.id}`, 'Filter is persisted in the URL');
+  });
+
+  test('navigating directly to the client detail page with the preemption query param set will filter the allocations table', async function(assert) {
+    const allocations = server.db.allocations.where({ nodeId: node.id });
+
+    await ClientDetail.visit({ id: node.id, preemptions: true });
+
+    assert.equal(
+      ClientDetail.allocations.length,
+      allocations.filter(wasPreemptedFilter).length,
+      'Only preempted allocations are shown'
+    );
+  });
+
   test('/clients/:id should list all attributes for the node', async function(assert) {
     await ClientDetail.visit({ id: node.id });
 
diff --git a/ui/tests/pages/clients/detail.js b/ui/tests/pages/clients/detail.js
index c4b98d9de..c0db54b74 100644
--- a/ui/tests/pages/clients/detail.js
+++ b/ui/tests/pages/clients/detail.js
@@ -45,6 +45,13 @@ export default create({
 
   ...allocations(),
 
+  allocationFilter: {
+    preemptions: clickable('[data-test-filter-preemptions]'),
+    all: clickable('[data-test-filter-all]'),
+    preemptionsCount: text('[data-test-filter-preemptions]'),
+    allCount: text('[data-test-filter-all]'),
+  },
+
   attributesTable: isPresent('[data-test-attributes]'),
   metaTable: isPresent('[data-test-meta]'),
   emptyMetaMessage: isPresent('[data-test-empty-meta-message]'),