diff --git a/ui/app/templates/allocations/allocation/index.hbs b/ui/app/templates/allocations/allocation/index.hbs
index 668094bd0..19d499dc5 100644
--- a/ui/app/templates/allocations/allocation/index.hbs
+++ b/ui/app/templates/allocations/allocation/index.hbs
@@ -32,8 +32,8 @@
           </div>
         </div>
       {{else}}
-        <div class="empty-message">
-          <h3 class="empty-message-headline">Allocation isn't running</h3>
+        <div data-test-resource-error class="empty-message">
+          <h3 data-test-resource-error-headline class="empty-message-headline">Allocation isn't running</h3>
           <p class="empty-message-body">Only running allocations utilize resources.</p>
         </div>
       {{/if}}
diff --git a/ui/app/templates/allocations/allocation/task/index.hbs b/ui/app/templates/allocations/allocation/task/index.hbs
index 4d4a46a08..ae6523c01 100644
--- a/ui/app/templates/allocations/allocation/task/index.hbs
+++ b/ui/app/templates/allocations/allocation/task/index.hbs
@@ -40,8 +40,8 @@
           </div>
         </div>
       {{else}}
-        <div class="empty-message">
-          <h3 class="empty-message-headline">Task isn't running</h3>
+        <div data-test-resource-error class="empty-message">
+          <h3 data-test-resource-error-headline class="empty-message-headline">Task isn't running</h3>
           <p class="empty-message-body">Only running tasks utilize resources.</p>
         </div>
       {{/if}}
diff --git a/ui/tests/acceptance/allocation-detail-test.js b/ui/tests/acceptance/allocation-detail-test.js
index bb7854ac9..dba89d9b5 100644
--- a/ui/tests/acceptance/allocation-detail-test.js
+++ b/ui/tests/acceptance/allocation-detail-test.js
@@ -191,3 +191,24 @@ moduleForAcceptance('Acceptance | allocation detail (rescheduled)', {
 test('when the allocation has been rescheduled, the reschedule events section is rendered', function(assert) {
   assert.ok(Allocation.hasRescheduleEvents, 'Reschedule Events section exists');
 });
+
+moduleForAcceptance('Acceptance | allocation detail (not running)', {
+  beforeEach() {
+    server.create('agent');
+
+    node = server.create('node');
+    job = server.create('job', { createAllocations: false });
+    allocation = server.create('allocation', { clientStatus: 'pending' });
+
+    Allocation.visit({ id: allocation.id });
+  },
+});
+
+test('when the allocation is not running, the utilization graphs are replaced by an empty message', function(assert) {
+  assert.equal(Allocation.resourceCharts.length, 0, 'No resource charts');
+  assert.equal(
+    Allocation.resourceEmptyMessage,
+    "Allocation isn't running",
+    'Empty message is appropriate'
+  );
+});
diff --git a/ui/tests/acceptance/task-detail-test.js b/ui/tests/acceptance/task-detail-test.js
index 177df255d..aab5c954c 100644
--- a/ui/tests/acceptance/task-detail-test.js
+++ b/ui/tests/acceptance/task-detail-test.js
@@ -271,3 +271,22 @@ test('breadcrumbs match jobs / job / task group / allocation / task', function(a
     );
   });
 });
+
+moduleForAcceptance('Acceptance | task detail (not running)', {
+  beforeEach() {
+    server.create('agent');
+    server.create('node');
+    server.create('namespace');
+    server.create('namespace', { id: 'other-namespace' });
+    server.create('job', { createAllocations: false, namespaceId: 'other-namespace' });
+    allocation = server.create('allocation', 'withTaskWithPorts', { clientStatus: 'complete' });
+    task = server.db.taskStates.where({ allocationId: allocation.id })[0];
+
+    Task.visit({ id: allocation.id, name: task.name });
+  },
+});
+
+test('when the allocation for a task is not running, the resource utilization graphs are replaced by an empty message', function(assert) {
+  assert.equal(Task.resourceCharts.length, 0, 'No resource charts');
+  assert.equal(Task.resourceEmptyMessage, "Task isn't running", 'Empty message is appropriate');
+});
diff --git a/ui/tests/pages/allocations/detail.js b/ui/tests/pages/allocations/detail.js
index bc3bc165d..54ce5acca 100644
--- a/ui/tests/pages/allocations/detail.js
+++ b/ui/tests/pages/allocations/detail.js
@@ -28,6 +28,8 @@ export default create({
     chartClass: attribute('class', '[data-test-percentage-chart] progress'),
   }),
 
+  resourceEmptyMessage: text('[data-test-resource-error-headline]'),
+
   tasks: collection('[data-test-task-row]', {
     name: text('[data-test-name]'),
     state: text('[data-test-state]'),
diff --git a/ui/tests/pages/allocations/task/detail.js b/ui/tests/pages/allocations/task/detail.js
index 249986cfb..9e5c0a60b 100644
--- a/ui/tests/pages/allocations/task/detail.js
+++ b/ui/tests/pages/allocations/task/detail.js
@@ -30,6 +30,8 @@ export default create({
     chartClass: attribute('class', '[data-test-percentage-chart] progress'),
   }),
 
+  resourceEmptyMessage: text('[data-test-resource-error-headline]'),
+
   hasAddresses: isPresent('[data-test-task-addresses]'),
   addresses: collection('[data-test-task-address]', {
     name: text('[data-test-task-address-name]'),