diff --git a/ui/app/templates/components/task-log.hbs b/ui/app/templates/components/task-log.hbs
index 89a363747ae..1dc5caa79f8 100644
--- a/ui/app/templates/components/task-log.hbs
+++ b/ui/app/templates/components/task-log.hbs
@@ -1,7 +1,14 @@
 {{#if noConnection}}
   <div data-test-connection-error class="notification is-error">
-    <h3 class="title is-4">Cannot fetch logs</h3>
-    <p>The logs for this task are inaccessible. Check the condition of the node the allocation is on.</p>
+    <div class="columns">
+      <div class="column">
+        <h3 class="title is-4">Cannot fetch logs</h3>
+        <p>The logs for this task are inaccessible. Check the condition of the node the allocation is on.</p>
+      </div>
+      <div class="column is-centered is-minimum">
+        <button data-test-connection-error-dismiss class="button is-danger" onclick={{action (mut noConnection) false}}>Okay</button>
+      </div>
+    </div>
   </div>
 {{/if}}
 <div class="boxed-section-head">
diff --git a/ui/tests/integration/task-log-test.js b/ui/tests/integration/task-log-test.js
index de17aab3548..bea9b342b72 100644
--- a/ui/tests/integration/task-log-test.js
+++ b/ui/tests/integration/task-log-test.js
@@ -279,6 +279,9 @@ module('Integration | Component | task log', function(hooks) {
       'Log request was later made to the server'
     );
     assert.ok(find('[data-test-connection-error]'), 'An error message is shown');
+
+    await click('[data-test-connection-error-dismiss]');
+    assert.notOk(find('[data-test-connection-error]'), 'The error message is dismissable');
   });
 
   test('When the client is inaccessible, the server is accessible, and stderr is pressed before the client timeout occurs, the no connection error is not shown', async function(assert) {