feat(task-execution): implement task cancellation handling and improve UI feedback for canceling tasks

ts_web/elements/cloudly-view-tasks.ts

@@ -37,6 +37,8 @@ export class CloudlyViewTasks extends DeesElement {
   private autoRefresh: boolean = true;
 
   private _refreshHandle: any = null;
+  @state()
+  private canceling: Record<string, boolean> = {};
 
   constructor() {
     super();
@@ -492,14 +494,19 @@ export class CloudlyViewTasks extends DeesElement {
       const running = executions[0];
       if (!running) return;
 
-      await appstate.dataState.dispatchAction(
-        appstate.taskActions.cancelTask, { executionId: running.id }
-      );
-      plugins.deesCatalog.DeesToast.createAndShow({
-        message: `Cancelled ${taskName}`,
-        type: 'success',
-      });
-      await this.loadExecutionsWithFilter();
+      this.canceling = { ...this.canceling, [running.id]: true };
+      try {
+        await appstate.dataState.dispatchAction(
+          appstate.taskActions.cancelTask, { executionId: running.id }
+        );
+        plugins.deesCatalog.DeesToast.createAndShow({
+          message: `Cancelled ${taskName}`,
+          type: 'success',
+        });
+      } finally {
+        this.canceling = { ...this.canceling, [running.id]: false };
+        await this.loadExecutionsWithFilter();
+      }
     } catch (err) {
       console.error('Failed to cancel task:', err);
       plugins.deesCatalog.DeesToast.createAndShow({
@@ -642,7 +649,12 @@ export class CloudlyViewTasks extends DeesElement {
             ${lastExecution ? html`<span class="status-badge status-${lastExecution.data.status}">${lastExecution.data.status}</span>` : html`<span class="status-badge" style="background:#2e2e2e;color:#ddd;border:1px solid #3a3a3a;">idle</span>`}
             ${isRunning ? html`
               <dees-spinner style="--size: 18px"></dees-spinner>
-              <dees-button .text=${'Cancel'} .type=${'secondary'} @click=${() => this.cancelTaskFor(task.name)}></dees-button>
+              <dees-button
+                .text=${this.canceling[lastExecution!.id] ? 'Cancelling…' : 'Cancel'}
+                .type=${'secondary'}
+                .disabled=${!!this.canceling[lastExecution!.id]}
+                @click=${() => this.cancelTaskFor(task.name)}
+              ></dees-button>
             ` : html`
               <dees-button .text=${'Run'} .type=${'primary'} .disabled=${!task.enabled} @click=${() => this.triggerTask(task.name)}></dees-button>
             `}