From ffbf40181b9608728b27cde5017eeb92060c42f4 Mon Sep 17 00:00:00 2001
From: Purushottam Sinha <psinha@confluent.io>
Date: Sun, 21 Jun 2026 00:54:27 +0530
Subject: [PATCH] [FLINK-39978][runtime-web] Restyle Cancel Job/Application
 action as a danger button
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

The Cancel action on the Job and Application detail pages rendered as an
oversized 24px blue text link — inconsistent with the sibling action links
(e.g. "Job Manager Log") and not signalling that it is a destructive action.

Render it as a small ng-zorro danger button (red outline, fills solid red on
hover with a smooth transition). Styling only — the confirmation dialog and
cancel behaviour are unchanged.
---
 .../status/application-status.component.html        |  7 +++++--
 .../status/application-status.component.less        | 13 ++++++++++++-
 .../status/application-status.component.ts          |  2 ++
 .../job/job-detail/status/job-status.component.html |  7 +++++--
 .../job/job-detail/status/job-status.component.less | 13 ++++++++++++-
 .../job/job-detail/status/job-status.component.ts   |  2 ++
 6 files changed, 38 insertions(+), 6 deletions(-)

diff --git a/flink-runtime-web/web-dashboard/src/app/pages/application/application-detail/status/application-status.component.html b/flink-runtime-web/web-dashboard/src/app/pages/application/application-detail/status/application-status.component.html
index 805bf9cefe75d..cb43ca9f9c7ef 100644
--- a/flink-runtime-web/web-dashboard/src/app/pages/application/application-detail/status/application-status.component.html
+++ b/flink-runtime-web/web-dashboard/src/app/pages/application/application-detail/status/application-status.component.html
@@ -20,7 +20,10 @@
   <div class="operate-action">
     <span *ngIf="statusTips">{{ statusTips }}</span>
     <ng-container *ngIf="!statusTips">
-      <a
+      <button
+        nz-button
+        nzDanger
+        nzSize="small"
         nz-popconfirm
         nzPopconfirmTitle="Cancel Application?"
         nzOkText="Yes"
@@ -32,7 +35,7 @@
         "
       >
         Cancel Application
-      </a>
+      </button>
     </ng-container>
   </div>
 </ng-template>
diff --git a/flink-runtime-web/web-dashboard/src/app/pages/application/application-detail/status/application-status.component.less b/flink-runtime-web/web-dashboard/src/app/pages/application/application-detail/status/application-status.component.less
index 776a1de5d9d5d..5407b3ea19cfb 100644
--- a/flink-runtime-web/web-dashboard/src/app/pages/application/application-detail/status/application-status.component.less
+++ b/flink-runtime-web/web-dashboard/src/app/pages/application/application-detail/status/application-status.component.less
@@ -31,7 +31,18 @@
   }
 
   .operate-action {
-    font-size: 24px;
+    font-size: @font-size-base;
+
+    button {
+      transition: all 0.3s ease;
+
+      &:hover {
+        border-color: @error-color;
+        background-color: @error-color;
+        color: #fff;
+        box-shadow: 0 2px 6px fade(@error-color, 30%);
+      }
+    }
   }
 
   .status-wrapper {
diff --git a/flink-runtime-web/web-dashboard/src/app/pages/application/application-detail/status/application-status.component.ts b/flink-runtime-web/web-dashboard/src/app/pages/application/application-detail/status/application-status.component.ts
index 07dcda5957990..876022da91a26 100644
--- a/flink-runtime-web/web-dashboard/src/app/pages/application/application-detail/status/application-status.component.ts
+++ b/flink-runtime-web/web-dashboard/src/app/pages/application/application-detail/status/application-status.component.ts
@@ -35,6 +35,7 @@ import {
   ApplicationModuleConfig
 } from '@flink-runtime-web/pages/application/application.config';
 import { ApplicationService, StatusService } from '@flink-runtime-web/services';
+import { NzButtonModule } from 'ng-zorro-antd/button';
 import { NzDescriptionsModule } from 'ng-zorro-antd/descriptions';
 import { NzDividerModule } from 'ng-zorro-antd/divider';
 import { NzPopconfirmModule } from 'ng-zorro-antd/popconfirm';
@@ -47,6 +48,7 @@ import { NzSkeletonModule } from 'ng-zorro-antd/skeleton';
   changeDetection: ChangeDetectionStrategy.OnPush,
   imports: [
     NgIf,
+    NzButtonModule,
     NzPopconfirmModule,
     NzDescriptionsModule,
     NzDividerModule,
diff --git a/flink-runtime-web/web-dashboard/src/app/pages/job/job-detail/status/job-status.component.html b/flink-runtime-web/web-dashboard/src/app/pages/job/job-detail/status/job-status.component.html
index 0c7a867f08986..4bb9c8ba1e42b 100644
--- a/flink-runtime-web/web-dashboard/src/app/pages/job/job-detail/status/job-status.component.html
+++ b/flink-runtime-web/web-dashboard/src/app/pages/job/job-detail/status/job-status.component.html
@@ -29,7 +29,10 @@
   <div class="operate-action">
     <span *ngIf="statusTips">{{ statusTips }}</span>
     <ng-container *ngIf="!statusTips">
-      <a
+      <button
+        nz-button
+        nzDanger
+        nzSize="small"
         nz-popconfirm
         nzPopconfirmTitle="Cancel Job?"
         nzOkText="Yes"
@@ -43,7 +46,7 @@
         "
       >
         Cancel Job
-      </a>
+      </button>
     </ng-container>
   </div>
 </ng-template>
diff --git a/flink-runtime-web/web-dashboard/src/app/pages/job/job-detail/status/job-status.component.less b/flink-runtime-web/web-dashboard/src/app/pages/job/job-detail/status/job-status.component.less
index 8285f1179541b..6302cfaaad864 100644
--- a/flink-runtime-web/web-dashboard/src/app/pages/job/job-detail/status/job-status.component.less
+++ b/flink-runtime-web/web-dashboard/src/app/pages/job/job-detail/status/job-status.component.less
@@ -31,7 +31,18 @@
   }
 
   .operate-action {
-    font-size: 24px;
+    font-size: @font-size-base;
+
+    button {
+      transition: all 0.3s ease;
+
+      &:hover {
+        border-color: @error-color;
+        background-color: @error-color;
+        color: #fff;
+        box-shadow: 0 2px 6px fade(@error-color, 30%);
+      }
+    }
   }
 
   .status-wrapper {
diff --git a/flink-runtime-web/web-dashboard/src/app/pages/job/job-detail/status/job-status.component.ts b/flink-runtime-web/web-dashboard/src/app/pages/job/job-detail/status/job-status.component.ts
index c9a1e07cb9d4d..c140a22955ba0 100644
--- a/flink-runtime-web/web-dashboard/src/app/pages/job/job-detail/status/job-status.component.ts
+++ b/flink-runtime-web/web-dashboard/src/app/pages/job/job-detail/status/job-status.component.ts
@@ -31,6 +31,7 @@ import { JobDetailCorrect } from '@flink-runtime-web/interfaces';
 import { JobLocalService } from '@flink-runtime-web/pages/job/job-local.service';
 import { JOB_MODULE_CONFIG, JOB_MODULE_DEFAULT_CONFIG, JobModuleConfig } from '@flink-runtime-web/pages/job/job.config';
 import { JobManagerService, JobService, StatusService } from '@flink-runtime-web/services';
+import { NzButtonModule } from 'ng-zorro-antd/button';
 import { NzDescriptionsModule } from 'ng-zorro-antd/descriptions';
 import { NzDividerModule } from 'ng-zorro-antd/divider';
 import { NzPopconfirmModule } from 'ng-zorro-antd/popconfirm';
@@ -43,6 +44,7 @@ import { NzSkeletonModule } from 'ng-zorro-antd/skeleton';
   changeDetection: ChangeDetectionStrategy.OnPush,
   imports: [
     NgIf,
+    NzButtonModule,
     NzPopconfirmModule,
     NzDescriptionsModule,
     NzDividerModule,