[
https://issues.apache.org/jira/browse/FLINK-39978?page=com.atlassian.jira.plugin.system.issuetabpanels:all-tabpanel
]
Purushottam Sinha updated FLINK-39978:
--------------------------------------
Description:
Problem
On the Job and Application detail pages, the Cancel action renders as an
oversized 24px blue text link. It is visually inconsistent with sibling action
links (e.g. "Job Manager Log") and gives no signal thatnit is a destructive
operation.
Evidence
*
flink-runtime-web/web-dashboard/src/app/pages/job/job-detail/status/job-status.component.{html,less,ts}
Cancel rendered as a 24px <a> text link.
*
flink-runtime-web/web-dashboard/src/app/pages/application/application-detail/status/application-status.component.{html,less,ts}
same for Cancel Application.
Proposed fix
- Render Cancel as an ng-zorro nz-button nzDanger nzSize="small" instead of a
24px text link.
- Add a fill-on-hover transition (danger red background, white text).
- Keep behaviour unchanged — confirmation dialog and cancel logic untouched.
Acceptance
- Running job/application detail page shows Cancel as a small red danger button
that fills on hover.
- Confirmation dialog still appears and cancellation still works.
was:
Problem
On the Job and Application detail pages, the Cancel action renders as an
oversized 24px blue text link. It is visually inconsistent with sibling action
links (e.g. "Job Manager Log") and gives no signal thatnit is a destructive
operation.
Evidence
*
flink-runtime-web/web-dashboard/src/app/pages/job/job-detail/status/job-status.component.{html,less,ts}
Cancel rendered as a 24px <a> text link.
*
flink-runtime-web/web-dashboard/src/app/pages/application/application-detail/status/application-status.component.{html,less,ts}
same for Cancel Application.
Proposed fix
- Render Cancel as an ng-zorro nz-button nzDanger nzSize="small" instead of a
24px text link.
- Add a fill-on-hover transition (danger red background, white text).
- Keep behaviour unchanged — confirmation dialog and cancel logic untouched.
Acceptance
- Running job/application detail page shows Cancel as a small red danger button
that fills on hover.
- Confirmation dialog still appears and cancellation still works.
> Web dashboard: restyle Cancel Job/Application action as a danger button
> -----------------------------------------------------------------------
>
> Key: FLINK-39978
> URL: https://issues.apache.org/jira/browse/FLINK-39978
> Project: Flink
> Issue Type: Improvement
> Components: Runtime / Web Frontend
> Reporter: Purushottam Sinha
> Priority: Minor
> Labels: pull-request-available
>
> Problem
> On the Job and Application detail pages, the Cancel action renders as an
> oversized 24px blue text link. It is visually inconsistent with sibling
> action links (e.g. "Job Manager Log") and gives no signal thatnit is a
> destructive operation.
> Evidence
> *
> flink-runtime-web/web-dashboard/src/app/pages/job/job-detail/status/job-status.component.{html,less,ts}
> Cancel rendered as a 24px <a> text link.
> *
> flink-runtime-web/web-dashboard/src/app/pages/application/application-detail/status/application-status.component.{html,less,ts}
> same for Cancel Application.
> Proposed fix
> - Render Cancel as an ng-zorro nz-button nzDanger nzSize="small" instead of a
> 24px text link.
> - Add a fill-on-hover transition (danger red background, white text).
> - Keep behaviour unchanged — confirmation dialog and cancel logic untouched.
> Acceptance
> - Running job/application detail page shows Cancel as a small red danger
> button that fills on hover.
> - Confirmation dialog still appears and cancellation still works.
--
This message was sent by Atlassian Jira
(v8.20.10#820010)
