This is an automated email from the ASF dual-hosted git repository.
MartijnVisser 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 6bdaa5e1211 [FLINK-40045][runtime-web] Upgrade d3-flame-graph to v5
(#28601)
6bdaa5e1211 is described below
commit 6bdaa5e1211449f5b209d51daf2ee5a88d74826e
Author: Purushottam Sinha <[email protected]>
AuthorDate: Tue Jul 7 18:39:40 2026 +0530
[FLINK-40045][runtime-web] Upgrade d3-flame-graph to v5 (#28601)
---
.../src/main/resources/META-INF/NOTICE | 79 +---------------------
flink-runtime-web/web-dashboard/angular.json | 2 +-
flink-runtime-web/web-dashboard/package-lock.json | 34 ++--------
flink-runtime-web/web-dashboard/package.json | 3 +-
flink-runtime-web/web-dashboard/proxy.conf.json | 7 +-
.../src/@types/d3-flame-graph/index.d.ts | 26 ++++++-
.../web-dashboard/src/@types/d3-tip/index.d.ts | 19 ------
.../flame-graph/flame-graph.component.ts | 19 ++----
.../web-dashboard/src/styles/index.less | 5 +-
9 files changed, 43 insertions(+), 151 deletions(-)
diff --git a/flink-runtime-web/src/main/resources/META-INF/NOTICE
b/flink-runtime-web/src/main/resources/META-INF/NOTICE
index 15445cdcbcd..25aa4da295f 100644
--- a/flink-runtime-web/src/main/resources/META-INF/NOTICE
+++ b/flink-runtime-web/src/main/resources/META-INF/NOTICE
@@ -53,7 +53,6 @@ The Apache Software Foundation (http://www.apache.org/).
| d3-axis | 3.0.0 | ISC |
| d3-brush | 3.0.0 | ISC |
| d3-chord | 3.0.1 | ISC |
-| d3-collection | 1.0.7 | BSD-3-Clause |
| d3-color | 3.1.0 | ISC |
| d3-contour | 4.0.2 | ISC |
| d3-delaunay | 6.0.4 | ISC |
@@ -63,7 +62,7 @@ The Apache Software Foundation (http://www.apache.org/).
| d3-ease | 1.0.7 | BSD-3-Clause |
| d3-ease | 3.0.1 | BSD-3-Clause |
| d3-fetch | 3.0.1 | ISC |
-| d3-flame-graph | 4.1.3 | Apache-2.0 |
+| d3-flame-graph | 5.0.0 | Apache-2.0 |
| d3-force | 3.0.0 | ISC |
| d3-format | 3.1.2 | ISC |
| d3-geo | 3.1.1 | ISC |
@@ -75,14 +74,12 @@ The Apache Software Foundation (http://www.apache.org/).
| d3-random | 3.0.1 | ISC |
| d3-scale | 4.0.2 | ISC |
| d3-scale-chromatic | 3.1.0 | ISC |
-| d3-selection | 1.4.2 | BSD-3-Clause |
| d3-selection | 3.0.0 | ISC |
| d3-shape | 3.2.0 | ISC |
| d3-time | 3.1.0 | ISC |
| d3-time-format | 4.1.0 | ISC |
| d3-timer | 1.0.10 | BSD-3-Clause |
| d3-timer | 3.0.1 | ISC |
-| d3-tip | 0.9.1 | MIT |
| d3-transition | 3.0.1 | ISC |
| d3-zoom | 3.0.0 | ISC |
| date-fns | 2.30.0 | MIT |
@@ -845,37 +842,6 @@ OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT,
NEGLIGENCE OR OTHER
TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR PERFORMANCE OF
THIS SOFTWARE.
----
[email protected]
----
-Copyright 2010-2016, Mike Bostock
-All rights reserved.
-
-Redistribution and use in source and binary forms, with or without
modification,
-are permitted provided that the following conditions are met:
-
-* Redistributions of source code must retain the above copyright notice, this
- list of conditions and the following disclaimer.
-
-* Redistributions in binary form must reproduce the above copyright notice,
- this list of conditions and the following disclaimer in the documentation
- and/or other materials provided with the distribution.
-
-* Neither the name of the author nor the names of contributors may be used to
- endorse or promote products derived from this software without specific prior
- written permission.
-
-THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS
IS" AND
-ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED
-WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE
-DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT OWNER OR CONTRIBUTORS BE LIABLE FOR
-ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES
-(INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES;
-LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON
-ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
-(INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF THIS
-SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
-
---
[email protected]
---
@@ -1061,7 +1027,7 @@ TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE
USE OR PERFORMANCE OF
THIS SOFTWARE.
---
[email protected]
[email protected]
---
Apache License
Version 2.0, January 2004
@@ -1488,36 +1454,6 @@ under the License is distributed on an "AS IS"
BASIS, WITHOUT WARRANTI
CONDITIONS OF ANY KIND, either express or implied. See the License for the
specific language governing permissions and limitations under the License.
----
[email protected]
----
-Copyright (c) 2010-2018, Michael Bostock
-All rights reserved.
-
-Redistribution and use in source and binary forms, with or without
-modification, are permitted provided that the following conditions are met:
-
-* Redistributions of source code must retain the above copyright notice, this
- list of conditions and the following disclaimer.
-
-* Redistributions in binary form must reproduce the above copyright notice,
- this list of conditions and the following disclaimer in the documentation
- and/or other materials provided with the distribution.
-
-* The name Michael Bostock may not be used to endorse or promote products
- derived from this software without specific prior written permission.
-
-THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS
IS"
-AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE
-IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE
-DISCLAIMED. IN NO EVENT SHALL MICHAEL BOSTOCK BE LIABLE FOR ANY DIRECT,
-INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING,
-BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE,
-DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY
-OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING
-NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE,
-EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
-
---
[email protected]
---
@@ -1634,17 +1570,6 @@ OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF
CONTRACT, NEGLIGENCE OR OTHER
TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR PERFORMANCE OF
THIS SOFTWARE.
----
[email protected]
----
-The MIT License (MIT)
-Copyright (c) 2013 Justin Palmer
-
-Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"),
to deal in the Software without restriction, including without limitation the
rights to use, copy, modify, merge, publish, distribute, sublicense, and/or
sell copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:
-
-The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.
-
-THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO
EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES
OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE,
ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER
DEALINGS IN THE SOFTWARE.
---
[email protected]
---
diff --git a/flink-runtime-web/web-dashboard/angular.json
b/flink-runtime-web/web-dashboard/angular.json
index 48bec4fcff2..d9f35084338 100644
--- a/flink-runtime-web/web-dashboard/angular.json
+++ b/flink-runtime-web/web-dashboard/angular.json
@@ -33,7 +33,7 @@
},
"architect": {
"build": {
- "builder": "@angular-devkit/build-angular:browser",
+ "builder": "@angular-devkit/build-angular:browser-esbuild",
"options": {
"outputPath": "web",
"index": "src/index.html",
diff --git a/flink-runtime-web/web-dashboard/package-lock.json
b/flink-runtime-web/web-dashboard/package-lock.json
index 04ffe6206f5..d55221c730e 100644
--- a/flink-runtime-web/web-dashboard/package-lock.json
+++ b/flink-runtime-web/web-dashboard/package-lock.json
@@ -20,8 +20,7 @@
"@dagrejs/dagre": "^3.0.0",
"core-js": "^3.49.0",
"d3": "^7.9.0",
- "d3-flame-graph": "^4.1.3",
- "d3-tip": "^0.9.1",
+ "d3-flame-graph": "^5.0.0",
"monaco-editor": "^0.31.1",
"ng-zorro-antd": "^21.3.2",
"rxjs": "^7.5.7",
@@ -10141,12 +10140,6 @@
"node": ">=12"
}
},
- "node_modules/d3-collection": {
- "version": "1.0.7",
- "resolved":
"https://registry.npmjs.org/d3-collection/-/d3-collection-1.0.7.tgz";,
- "integrity":
"sha512-ii0/r5f4sjKNTfh84Di+DpztYwqKhEyUlKoPrzUFfeSkWxjW49xU2QzO9qrPrNkpdI0XJkfzvmTu8V2Zylln6A==",
- "license": "BSD-3-Clause"
- },
"node_modules/d3-color": {
"version": "3.1.0",
"resolved": "https://registry.npmjs.org/d3-color/-/d3-color-3.1.0.tgz";,
@@ -10258,9 +10251,9 @@
}
},
"node_modules/d3-flame-graph": {
- "version": "4.1.3",
- "resolved":
"https://registry.npmjs.org/d3-flame-graph/-/d3-flame-graph-4.1.3.tgz";,
- "integrity":
"sha512-NijuhJZhaTMwobVgwGQ67x9PovqMMHXBbs0FMHEGJvsWZGuL4M7OsB03v8mHdyVyHhnQYGsYnb5w021e9+R+RQ==",
+ "version": "5.0.0",
+ "resolved":
"https://registry.npmjs.org/d3-flame-graph/-/d3-flame-graph-5.0.0.tgz";,
+ "integrity":
"sha512-ALZQ4at8Dex8HCoj9D5p5TY6gLNEc2vAZAy+NKO/6GLEfhYJmGxYuRClO6RPoplndyOHxQTPipdlGeMggkjtnQ==",
"license": "Apache-2.0",
"dependencies": {
"d3-array": "^3.1.1",
@@ -10454,25 +10447,6 @@
"integrity":
"sha512-B1JDm0XDaQC+uvo4DT79H0XmBskgS3l6Ve+1SBCfxgmtIb1AVrPIoqd+nPSv+loMX8szQ0sVUhGngL7D5QPiXw==",
"license": "BSD-3-Clause"
},
- "node_modules/d3-tip": {
- "version": "0.9.1",
- "resolved": "https://registry.npmjs.org/d3-tip/-/d3-tip-0.9.1.tgz";,
- "integrity":
"sha512-EVBfG9d+HnjIoyVXfhpytWxlF59JaobwizqMX9EBXtsFmJytjwHeYiUs74ldHQjE7S9vzfKTx2LCtvUrIbuFYg==",
- "license": "MIT",
- "dependencies": {
- "d3-collection": "^1.0.4",
- "d3-selection": "^1.3.0"
- },
- "engines": {
- "node": ">=4.2.6"
- }
- },
- "node_modules/d3-tip/node_modules/d3-selection": {
- "version": "1.4.2",
- "resolved":
"https://registry.npmjs.org/d3-selection/-/d3-selection-1.4.2.tgz";,
- "integrity":
"sha512-SJ0BqYihzOjDnnlfyeHT0e30k0K1+5sR3d5fNueCNeuhZTnGw4M4o8mqJchSwgKMXCNFo+e2VTChiSJ0vYtXkg==",
- "license": "BSD-3-Clause"
- },
"node_modules/d3-transition": {
"version": "3.0.1",
"resolved":
"https://registry.npmjs.org/d3-transition/-/d3-transition-3.0.1.tgz";,
diff --git a/flink-runtime-web/web-dashboard/package.json
b/flink-runtime-web/web-dashboard/package.json
index a438dc0d120..86ede5adaa7 100644
--- a/flink-runtime-web/web-dashboard/package.json
+++ b/flink-runtime-web/web-dashboard/package.json
@@ -23,8 +23,7 @@
"@dagrejs/dagre": "^3.0.0",
"core-js": "^3.49.0",
"d3": "^7.9.0",
- "d3-flame-graph": "^4.1.3",
- "d3-tip": "^0.9.1",
+ "d3-flame-graph": "^5.0.0",
"monaco-editor": "^0.31.1",
"ng-zorro-antd": "^21.3.2",
"rxjs": "^7.5.7",
diff --git a/flink-runtime-web/web-dashboard/proxy.conf.json
b/flink-runtime-web/web-dashboard/proxy.conf.json
index e817e159285..d88ea0615b7 100644
--- a/flink-runtime-web/web-dashboard/proxy.conf.json
+++ b/flink-runtime-web/web-dashboard/proxy.conf.json
@@ -1,7 +1,6 @@
-[
- {
- "context": ["/"],
+{
+
"^/(applications|config|jars|jobmanager|jobs|overview|taskmanagers)(/|\\?|$)": {
"target": "http://localhost:8081";,
"secure": false
}
-]
+}
diff --git
a/flink-runtime-web/web-dashboard/src/@types/d3-flame-graph/index.d.ts
b/flink-runtime-web/web-dashboard/src/@types/d3-flame-graph/index.d.ts
index eae1c268507..24f4e6fe898 100644
--- a/flink-runtime-web/web-dashboard/src/@types/d3-flame-graph/index.d.ts
+++ b/flink-runtime-web/web-dashboard/src/@types/d3-flame-graph/index.d.ts
@@ -19,9 +19,29 @@
declare module 'd3-flame-graph' {
type ColorMapper = (node: unknown, originalColor: string) => string;
- export function flamegraph(): FlameGraph;
- export const offCpuColorMapper: ColorMapper;
- export function defaultFlamegraphTooltip(): unknown;
+ export default function flamegraph(): FlameGraph;
+
+ export const colorMapper: {
+ allocationColorMapper: ColorMapper;
+ differentialColorMapper: ColorMapper;
+ nodeJsColorMapper: ColorMapper;
+ offCpuColorMapper: ColorMapper;
+ };
+
+ export interface FlamegraphNode {
+ data: { name: string; value: number };
+ x0: number;
+ x1: number;
+ }
+
+ export interface FlamegraphTooltip {
+ html(accessor: (node: FlamegraphNode) => string): FlamegraphTooltip;
+ text(accessor: (node: FlamegraphNode) => string): FlamegraphTooltip;
+ }
+
+ export const tooltip: {
+ defaultFlamegraphTooltip(): FlamegraphTooltip;
+ };
export interface StackFrame {
name: string;
diff --git a/flink-runtime-web/web-dashboard/src/@types/d3-tip/index.d.ts
b/flink-runtime-web/web-dashboard/src/@types/d3-tip/index.d.ts
deleted file mode 100644
index b2a7e411a10..00000000000
--- a/flink-runtime-web/web-dashboard/src/@types/d3-tip/index.d.ts
+++ /dev/null
@@ -1,19 +0,0 @@
-/*
- * Licensed to the Apache Software Foundation (ASF) under one
- * or more contributor license agreements. See the NOTICE file
- * distributed with this work for additional information
- * regarding copyright ownership. The ASF licenses this file
- * to you under the Apache License, Version 2.0 (the
- * "License"); you may not use this file except in compliance
- * with the License. You may obtain a copy of the License at
- *
- * http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- */
-
-declare module 'd3-tip';
diff --git
a/flink-runtime-web/web-dashboard/src/app/components/flame-graph/flame-graph.component.ts
b/flink-runtime-web/web-dashboard/src/app/components/flame-graph/flame-graph.component.ts
index 0f94ba8b10a..a7caeb66808 100644
---
a/flink-runtime-web/web-dashboard/src/app/components/flame-graph/flame-graph.component.ts
+++
b/flink-runtime-web/web-dashboard/src/app/components/flame-graph/flame-graph.component.ts
@@ -19,11 +19,9 @@
import { Component, ChangeDetectionStrategy, ElementRef, Input, ViewChild }
from '@angular/core';
import { FlameGraphType, JobFlameGraphNode } from
'@flink-runtime-web/interfaces';
-import * as _d3 from 'd3';
-import { flamegraph, offCpuColorMapper } from 'd3-flame-graph';
+import flamegraph, { colorMapper, tooltip } from 'd3-flame-graph';
import { format } from 'd3-format';
import { select } from 'd3-selection';
-import _d3Tip from 'd3-tip';
@Component({
selector: 'flink-flame-graph',
@@ -40,21 +38,14 @@ export class FlameGraphComponent {
const element = this.flameGraphContainer.nativeElement;
const chart = flamegraph().width(element.clientWidth);
- const d3 = { ..._d3, tip: _d3Tip };
-
- const tip = d3
- .tip()
- .direction('s')
- .offset([8, 0])
- .attr('class', 'd3-flame-graph-tip')
- .html(function (d: { data: { name: string; value: string }; x1:
number; x0: number }) {
- return `${d.data.name} (${format('.3f')(100 * (d.x1 - d.x0))}%,
${d.data.value} samples)`;
- });
+ const tip = tooltip
+ .defaultFlamegraphTooltip()
+ .html(d => `${d.data.name} (${format('.3f')(100 * (d.x1 - d.x0))}%,
${d.data.value} samples)`);
chart.tooltip(tip);
if (this.graphType == FlameGraphType.OFF_CPU) {
- chart.setColorMapper(offCpuColorMapper);
+ chart.setColorMapper(colorMapper.offCpuColorMapper);
}
select(element).selectAll('*').remove();
diff --git a/flink-runtime-web/web-dashboard/src/styles/index.less
b/flink-runtime-web/web-dashboard/src/styles/index.less
index e7bbe88bc9e..10e4710e0f9 100644
--- a/flink-runtime-web/web-dashboard/src/styles/index.less
+++ b/flink-runtime-web/web-dashboard/src/styles/index.less
@@ -24,7 +24,10 @@
@import "./theme";
@import "./rewrite";
-.d3-flame-graph-tip {
+// Scoped under `body` so these overrides win over the vendor
`.d3-flame-graph-tip`
+// rules, which d3-flame-graph 5 ships inside its ESM entry and Angular injects
+// (with the lazily-loaded flame graph chunk) after this global stylesheet.
+body .d3-flame-graph-tip {
z-index: 1000;
padding: 12px;
border-radius: 2px;
