[UI] Add synchronous start/stop pipeline error notifications (#133)

* Add error handling for sync start/stop pipeline * Add tests for pipeline sync start/stop errors
ConduitIO · Jan 27, 2022 · b63dea3 · b63dea3
1 parent e1fcda0
commit b63dea3
Show file tree

Hide file tree

Showing 3 changed files with 96 additions and 2 deletions.
diff --git a/ui/app/adapters/application.js b/ui/app/adapters/application.js
@@ -37,6 +37,7 @@ export default class ApplicationAdapter extends RESTAdapter {
       this.flashMessages.add({
         type: 'error',
         message: payload.message || 'Server Error',
+        sticky: true,
       });
     }
     return handledResponse;

diff --git a/ui/app/controllers/pipeline.js b/ui/app/controllers/pipeline.js
@@ -13,7 +13,13 @@ export default class PipelineController extends Controller {
   @action
   @waitFor
   async startPipeline(pipeline) {
-    await pipeline.startPipeline();
+    try {
+      await pipeline.startPipeline();
+    } catch (error) {
+      this._handleStartStopPipelineError(error);
+      return;
+    }
+
     await pipeline.reload();
     pipeline.onPipelineEvent(
       'onPipelineDegraded',
@@ -24,8 +30,14 @@ export default class PipelineController extends Controller {
   }
 
   @action
+  @waitFor
   async stopPipeline(pipeline) {
-    await pipeline.stopPipeline();
+    try {
+      await pipeline.stopPipeline();
+    } catch (error) {
+      this._handleStartStopPipelineError(error);
+      return;
+    }
     await pipeline.reload();
   }
 
@@ -41,4 +53,21 @@ export default class PipelineController extends Controller {
       },
     });
   }
+
+  _handleStartStopPipelineError(error) {
+    if (error.response?.data) {
+      const message = error.response.data.message;
+      this.flashMessages.add({
+        type: 'error',
+        message,
+        sticky: true,
+      });
+    } else {
+      this.flashMessages.add({
+        type: 'error',
+        message: error.message,
+        sticky: true,
+      });
+    }
+  }
 }
diff --git a/ui/tests/acceptance/pipeline/index-test.js b/ui/tests/acceptance/pipeline/index-test.js
@@ -2,6 +2,7 @@ import { assert, module, test } from 'qunit';
 import { find, visit, click, waitUntil } from '@ember/test-helpers';
 import { setupApplicationTest } from 'ember-qunit';
 import { setupMirage } from 'ember-cli-mirage/test-support';
+import { Response } from 'ember-cli-mirage';
 
 const page = {
   pipelineSubheaderName: '[data-test-pipeline-subheader-name]',
@@ -26,6 +27,7 @@ const page = {
   pipelineStatusIndicator: '[data-test-pipeline-status-indicator]',
   pipelineStatusButton: '[data-test-pipeline-status] button',
   pipelineStatusStart: "[data-test-pipeline-status-action='start']",
+  pipelineStatusStop: "[data-test-pipeline-status-action='stop']",
 
   connectorOverviewListItem: '[data-test-connector-overview-list-item]',
   connectorOverviewButton: '[data-test-connector-overview-button]',
@@ -166,6 +168,68 @@ module('Acceptance | pipeline/index', function (hooks) {
     });
   });
 
+  module('starting a pipeline that synchronously errors out', function (hooks) {
+    hooks.beforeEach(async function () {
+      const pipeline = this.server.create('pipeline');
+      this.set('pipeline', pipeline);
+
+      this.server.post('/pipelines/:id/start', function () {
+        return new Response(
+          500,
+          {},
+          {
+            code: 13,
+            message: 'failed to start pipeline',
+            details: [],
+          }
+        );
+      });
+
+      await visit(`/pipelines/${pipeline.id}`);
+
+      await click(page.pipelineStatusButton);
+
+      await click(page.pipelineStatusStart);
+    });
+
+    test('it displays an error notification', function (assert) {
+      assert.dom(page.errorTitle).containsText('failed to start pipeline');
+    });
+  });
+
+  module('stopping a pipeline that synchronously errors out', function (hooks) {
+    hooks.beforeEach(async function () {
+      const pipeline = this.server.create(
+        'pipeline',
+        { state: { status: 'STATUS_RUNNING' } },
+        'withFileConnectors'
+      );
+      this.set('pipeline', pipeline);
+
+      this.server.post('/pipelines/:id/stop', function () {
+        return new Response(
+          500,
+          {},
+          {
+            code: 13,
+            message: 'failed to stop pipeline',
+            details: [],
+          }
+        );
+      });
+
+      await visit(`/pipelines/${pipeline.id}`);
+
+      await click(page.pipelineStatusButton);
+
+      await click(page.pipelineStatusStop);
+    });
+
+    test('it displays an error notification', function (assert) {
+      assert.dom(page.errorTitle).containsText('failed to stop pipeline');
+    });
+  });
+
   module(
     'starting a pipeline that asynchronously errors out',
     function (hooks) {