This is an automated email from the ASF dual-hosted git repository.
ferenc-csaky pushed a commit to branch master
in repository https://gitbox.apache.org/repos/asf/flink.git
The following commit(s) were added to refs/heads/master by this push:
new b22372badbb [FLINK-39978][runtime-web] Restyle Cancel Job/Application
action as a danger button
b22372badbb is described below
commit b22372badbb65f9eff034b62529fd71bbd8196a6
Author: Purushottam Sinha <[email protected]>
AuthorDate: Wed Jun 24 15:46:49 2026 +0530
[FLINK-39978][runtime-web] Restyle Cancel Job/Application action as a
danger button
---
.../status/application-status.component.html | 7 +++++--
.../status/application-status.component.less | 13 ++++++++++++-
.../status/application-status.component.ts | 2 ++
.../pages/job/job-detail/status/job-status.component.html | 7 +++++--
.../pages/job/job-detail/status/job-status.component.less | 13 ++++++++++++-
.../app/pages/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 805bf9cefe7..cb43ca9f9c7 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 776a1de5d9d..5407b3ea19c 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 07dcda59579..876022da91a 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 0c7a867f089..4bb9c8ba1e4 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 8285f117954..6302cfaaad8 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 c9a1e07cb9d..c140a22955b 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,
