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 127f387c391 [FLINK-39503][runtime-web] Auto-fit "Job Overview" DAG
height and add recenter control
127f387c391 is described below
commit 127f387c391670beb0a5b2a816fb9c5fcfbe6287
Author: Purushottam Sinha <[email protected]>
AuthorDate: Mon May 18 21:35:44 2026 +0530
[FLINK-39503][runtime-web] Auto-fit "Job Overview" DAG height and add
recenter control
---
flink-runtime-web/web-dashboard/src/app/app-icons.ts | 4 +++-
.../src/app/components/dagre/dagre.component.html | 12 ++++++++++++
.../src/app/components/dagre/dagre.component.less | 10 ++++++++++
.../src/app/components/dagre/dagre.component.ts | 15 ++++++++++++++-
.../src/app/pages/job/overview/job-overview.component.ts | 13 ++++++++++++-
5 files changed, 51 insertions(+), 3 deletions(-)
diff --git a/flink-runtime-web/web-dashboard/src/app/app-icons.ts
b/flink-runtime-web/web-dashboard/src/app/app-icons.ts
index 0bdd142b403..e473c681d78 100644
--- a/flink-runtime-web/web-dashboard/src/app/app-icons.ts
+++ b/flink-runtime-web/web-dashboard/src/app/app-icons.ts
@@ -31,6 +31,7 @@ import {
FolderOutline,
FullscreenExitOutline,
FullscreenOutline,
+ AimOutline,
LoginOutline,
MenuFoldOutline,
MenuUnfoldOutline,
@@ -88,5 +89,6 @@ export const APP_ICONS = [
FullscreenOutline,
ArrowsAltOutline,
ShrinkOutline,
- PicCenterOutline
+ PicCenterOutline,
+ AimOutline
];
diff --git
a/flink-runtime-web/web-dashboard/src/app/components/dagre/dagre.component.html
b/flink-runtime-web/web-dashboard/src/app/components/dagre/dagre.component.html
index 5e0cf627f3b..07f676c41c6 100644
---
a/flink-runtime-web/web-dashboard/src/app/components/dagre/dagre.component.html
+++
b/flink-runtime-web/web-dashboard/src/app/components/dagre/dagre.component.html
@@ -109,3 +109,15 @@
[ngModel]="zoom"
(ngModelChange)="zoomToLevel($event)"
></nz-slider>
+<div class="zoom-controls">
+ <button
+ nz-button
+ nzType="default"
+ nzShape="circle"
+ (click)="moveToCenter()"
+ nz-tooltip
+ nzTooltipTitle="Recenter Graph"
+ >
+ <span nz-icon nzType="aim"></span>
+ </button>
+</div>
diff --git
a/flink-runtime-web/web-dashboard/src/app/components/dagre/dagre.component.less
b/flink-runtime-web/web-dashboard/src/app/components/dagre/dagre.component.less
index cd8666fc79b..d4408524318 100644
---
a/flink-runtime-web/web-dashboard/src/app/components/dagre/dagre.component.less
+++
b/flink-runtime-web/web-dashboard/src/app/components/dagre/dagre.component.less
@@ -32,6 +32,16 @@ nz-slider {
margin-top: -100px;
}
+.zoom-controls {
+ position: absolute;
+ right: 12px;
+ bottom: 12px;
+ z-index: 10;
+ display: flex;
+ flex-direction: column;
+ gap: 8px;
+}
+
.checkbox {
margin: 10px;
}
diff --git
a/flink-runtime-web/web-dashboard/src/app/components/dagre/dagre.component.ts
b/flink-runtime-web/web-dashboard/src/app/components/dagre/dagre.component.ts
index b25698e8a73..0567f85f603 100644
---
a/flink-runtime-web/web-dashboard/src/app/components/dagre/dagre.component.ts
+++
b/flink-runtime-web/web-dashboard/src/app/components/dagre/dagre.component.ts
@@ -35,8 +35,11 @@ import { FormsModule } from '@angular/forms';
import { NodesItemCorrect, NodesItemLink } from
'@flink-runtime-web/interfaces';
import { select } from 'd3-selection';
import { zoomIdentity } from 'd3-zoom';
+import { NzButtonModule } from 'ng-zorro-antd/button';
import { NzCheckboxModule } from 'ng-zorro-antd/checkbox';
+import { NzIconModule } from 'ng-zorro-antd/icon';
import { NzSliderModule } from 'ng-zorro-antd/slider';
+import { NzTooltipModule } from 'ng-zorro-antd/tooltip';
import { NodeComponent } from './components/node/node.component';
import { SvgContainerComponent } from
'./components/svg-container/svg-container.component';
@@ -52,7 +55,17 @@ enum Visibility {
templateUrl: './dagre.component.html',
styleUrls: ['./dagre.component.less'],
changeDetection: ChangeDetectionStrategy.OnPush,
- imports: [SvgContainerComponent, NodeComponent, NzSliderModule, FormsModule,
CommonModule, NzCheckboxModule]
+ imports: [
+ SvgContainerComponent,
+ NodeComponent,
+ NzSliderModule,
+ FormsModule,
+ CommonModule,
+ NzCheckboxModule,
+ NzButtonModule,
+ NzIconModule,
+ NzTooltipModule
+ ]
})
export class DagreComponent extends NzGraph {
visibility: Visibility | string = Visibility.Hidden;
diff --git
a/flink-runtime-web/web-dashboard/src/app/pages/job/overview/job-overview.component.ts
b/flink-runtime-web/web-dashboard/src/app/pages/job/overview/job-overview.component.ts
index 8b46f079f1e..4f7fc020233 100644
---
a/flink-runtime-web/web-dashboard/src/app/pages/job/overview/job-overview.component.ts
+++
b/flink-runtime-web/web-dashboard/src/app/pages/job/overview/job-overview.component.ts
@@ -22,6 +22,7 @@ import {
ChangeDetectorRef,
Component,
ElementRef,
+ HostListener,
OnDestroy,
OnInit,
ViewChild
@@ -55,9 +56,18 @@ export class JobOverviewComponent implements OnInit,
OnDestroy {
public pendingNodes: NodesItemCorrect[] = [];
public pendingLinks: NodesItemLink[] = [];
public selectedNode: NodesItemCorrect | null;
- public top = 500;
+ public top = Math.max(280, Math.min(Math.round(window.innerHeight * 0.4),
500));
public jobId: string;
public timeoutId: number;
+ private isTopManuallyResized = false;
+
+ @HostListener('window:resize', ['$event'])
+ onResize(): void {
+ if (!this.isTopManuallyResized) {
+ this.top = Math.max(280, Math.min(Math.round(window.innerHeight * 0.4),
500));
+ this.cdr.markForCheck();
+ }
+ }
@ViewChild(DagreComponent, { static: true }) private readonly
dagreComponent: DagreComponent;
@@ -134,6 +144,7 @@ export class JobOverviewComponent implements OnInit,
OnDestroy {
}
public onResizeEnd(): void {
+ this.isTopManuallyResized = true;
if (!this.selectedNode) {
this.dagreComponent.moveToCenter();
} else {
