From f14c16975164d4bf11fcb034e5e21d14b45f58e1 Mon Sep 17 00:00:00 2001 From: Andreas Gerstmayr Date: Thu, 9 Oct 2025 20:33:13 +0200 Subject: [PATCH] NO-JIRA: Enable MUI CSS variables, upgrade @patternfly/react-charts Signed-off-by: Andreas Gerstmayr --- web/package-lock.json | 598 +++++++++++++----- web/package.json | 8 +- web/src/components/PersesWrapper.css | 6 + web/src/components/PersesWrapper.tsx | 28 +- .../pages/TraceDetailPage/TraceDetailPage.tsx | 7 +- web/src/pages/TracesPage/QueryBrowser.tsx | 4 +- 6 files changed, 460 insertions(+), 191 deletions(-) create mode 100644 web/src/components/PersesWrapper.css diff --git a/web/package-lock.json b/web/package-lock.json index 9c57efa..804e8d4 100644 --- a/web/package-lock.json +++ b/web/package-lock.json @@ -13,7 +13,7 @@ "@emotion/styled": "^11.11.0", "@grafana/lezer-traceql": "^0.0.22", "@hookform/resolvers": "^3.3.4", - "@patternfly/react-charts": "6.92.0", + "@patternfly/react-charts": "^8.2.0", "@patternfly/react-core": "^6.2.0", "@patternfly/react-icons": "^5.4.2", "@patternfly/react-templates": "^6.2.2", @@ -31,7 +31,8 @@ "i18next-parser": "^8.13.0", "lodash": "^4.17.21", "pluralize": "^8.0.0", - "use-query-params": "^2.2.1" + "use-query-params": "^2.2.1", + "victory": "^37.3.6" }, "devDependencies": { "@cypress/webpack-preprocessor": "^5.15.5", @@ -5540,36 +5541,94 @@ } }, "node_modules/@patternfly/react-charts": { - "version": "6.92.0", - "resolved": "https://registry.npmjs.org/@patternfly/react-charts/-/react-charts-6.92.0.tgz", - "integrity": "sha512-aQl+L7zH/tWX00L2xI6B0414xweaIocR98wbyhXLi6zknkhcAUcE2zITFIW4+EsU+qPvUlptwRiRufoH8/BlEw==", + "version": "8.3.1", + "resolved": "https://registry.npmjs.org/@patternfly/react-charts/-/react-charts-8.3.1.tgz", + "integrity": "sha512-5EPc4Bl7ZhZiDnFZzgyRhCkFcC0Km3fbC8PLjAxAf/prcWNCKXNHc6dtP38rYfrwP8R8Y831gF2bYg1uTbpKHQ==", "license": "MIT", "dependencies": { - "@patternfly/react-styles": "^4.89.0", - "@patternfly/react-tokens": "^4.91.0", - "hoist-non-react-statics": "^3.3.0", - "lodash": "^4.17.19", - "tslib": "^2.0.0", - "victory-area": "^36.2.1", - "victory-axis": "^36.2.1", - "victory-bar": "^36.2.1", - "victory-chart": "^36.2.1", - "victory-core": "^36.2.1", - "victory-create-container": "^36.2.1", - "victory-cursor-container": "^36.2.1", - "victory-group": "^36.2.1", - "victory-legend": "^36.2.1", - "victory-line": "^36.2.1", - "victory-pie": "^36.2.1", - "victory-scatter": "^36.2.1", - "victory-stack": "^36.2.1", - "victory-tooltip": "^36.2.1", - "victory-voronoi-container": "^36.2.1", - "victory-zoom-container": "^36.2.1" - }, - "peerDependencies": { - "react": "^16.8.0 || ^17.0.0", - "react-dom": "^16.8.0 || ^17.0.0" + "@patternfly/react-styles": "^6.3.1", + "@patternfly/react-tokens": "^6.3.1", + "hoist-non-react-statics": "^3.3.2", + "lodash": "^4.17.21", + "tslib": "^2.8.1" + }, + "peerDependencies": { + "echarts": "^5.6.0", + "react": "^17 || ^18 || ^19", + "react-dom": "^17 || ^18 || ^19", + "victory-area": "^37.3.6", + "victory-axis": "^37.3.6", + "victory-bar": "^37.3.6", + "victory-box-plot": "^37.3.6", + "victory-chart": "^37.3.6", + "victory-core": "^37.3.6", + "victory-create-container": "^37.3.6", + "victory-cursor-container": "^37.3.6", + "victory-group": "^37.3.6", + "victory-legend": "^37.3.6", + "victory-line": "^37.3.6", + "victory-pie": "^37.3.6", + "victory-scatter": "^37.3.6", + "victory-stack": "^37.3.6", + "victory-tooltip": "^37.3.6", + "victory-voronoi-container": "^37.3.6", + "victory-zoom-container": "^37.3.6" + }, + "peerDependenciesMeta": { + "echarts": { + "optional": true + }, + "victory-area": { + "optional": true + }, + "victory-axis": { + "optional": true + }, + "victory-bar": { + "optional": true + }, + "victory-box-plot": { + "optional": true + }, + "victory-chart": { + "optional": true + }, + "victory-core": { + "optional": true + }, + "victory-create-container": { + "optional": true + }, + "victory-cursor-container": { + "optional": true + }, + "victory-group": { + "optional": true + }, + "victory-legend": { + "optional": true + }, + "victory-line": { + "optional": true + }, + "victory-pie": { + "optional": true + }, + "victory-scatter": { + "optional": true + }, + "victory-stack": { + "optional": true + }, + "victory-tooltip": { + "optional": true + }, + "victory-voronoi-container": { + "optional": true + }, + "victory-zoom-container": { + "optional": true + } } }, "node_modules/@patternfly/react-core": { @@ -5600,18 +5659,6 @@ "react-dom": "^17 || ^18" } }, - "node_modules/@patternfly/react-core/node_modules/@patternfly/react-styles": { - "version": "6.2.2", - "resolved": "https://registry.npmjs.org/@patternfly/react-styles/-/react-styles-6.2.2.tgz", - "integrity": "sha512-rncRDq66H8VnLyb9DrHHlZtPddlpNL9+W0XuQC0L7F6p78hOwSZmoGTW2Vq8/wJplDj8h/61qRpfRF9VEYPW0g==", - "license": "MIT" - }, - "node_modules/@patternfly/react-core/node_modules/@patternfly/react-tokens": { - "version": "6.2.2", - "resolved": "https://registry.npmjs.org/@patternfly/react-tokens/-/react-tokens-6.2.2.tgz", - "integrity": "sha512-2GRWDPBTrcTlGNFc5NPJjrjEVU90RpgcGX/CIe2MplLgM32tpVIkeUtqIoJPLRk5GrbhyFuHJYRU+O93gU4o3Q==", - "license": "MIT" - }, "node_modules/@patternfly/react-icons": { "version": "5.4.2", "resolved": "https://registry.npmjs.org/@patternfly/react-icons/-/react-icons-5.4.2.tgz", @@ -5623,9 +5670,9 @@ } }, "node_modules/@patternfly/react-styles": { - "version": "4.92.8", - "resolved": "https://registry.npmjs.org/@patternfly/react-styles/-/react-styles-4.92.8.tgz", - "integrity": "sha512-K4lUU8O4HiCX9NeuNUIrPgN3wlGERCxJVio+PAjd8hpJD/PKnjFfOJ9u6/Cii3qLy/5ZviWPRNHbGiwA/+YUhg==", + "version": "6.3.1", + "resolved": "https://registry.npmjs.org/@patternfly/react-styles/-/react-styles-6.3.1.tgz", + "integrity": "sha512-hyb+PlO8YITjKh2wBvjdeZhX6FyB3hlf4r6yG4rPOHk4SgneXHjNSdGwQ3szAxgGqtbENCYtOqwD/8ai72GrxQ==", "license": "MIT" }, "node_modules/@patternfly/react-templates": { @@ -5655,22 +5702,10 @@ "react-dom": "^17 || ^18" } }, - "node_modules/@patternfly/react-templates/node_modules/@patternfly/react-styles": { - "version": "6.2.2", - "resolved": "https://registry.npmjs.org/@patternfly/react-styles/-/react-styles-6.2.2.tgz", - "integrity": "sha512-rncRDq66H8VnLyb9DrHHlZtPddlpNL9+W0XuQC0L7F6p78hOwSZmoGTW2Vq8/wJplDj8h/61qRpfRF9VEYPW0g==", - "license": "MIT" - }, - "node_modules/@patternfly/react-templates/node_modules/@patternfly/react-tokens": { - "version": "6.2.2", - "resolved": "https://registry.npmjs.org/@patternfly/react-tokens/-/react-tokens-6.2.2.tgz", - "integrity": "sha512-2GRWDPBTrcTlGNFc5NPJjrjEVU90RpgcGX/CIe2MplLgM32tpVIkeUtqIoJPLRk5GrbhyFuHJYRU+O93gU4o3Q==", - "license": "MIT" - }, "node_modules/@patternfly/react-tokens": { - "version": "4.94.7", - "resolved": "https://registry.npmjs.org/@patternfly/react-tokens/-/react-tokens-4.94.7.tgz", - "integrity": "sha512-h+ducOLDMSxcuec3+YY3x+stM5ZUSnrl/lC/eVmjypil2El08NuE2MNEPMQWdhrod6VRRZFMNqZw/m82iv6U1A==", + "version": "6.3.1", + "resolved": "https://registry.npmjs.org/@patternfly/react-tokens/-/react-tokens-6.3.1.tgz", + "integrity": "sha512-wt/xKU1tGCDXUueFb+8/Cwxlm4vUD/Xl26O8MxbSLm6NZAHOUPwytJ7gugloGSPvc/zcsXxEgKANL8UZNO6DTw==", "license": "MIT" }, "node_modules/@patternfly/react-topology": { @@ -5712,13 +5747,6 @@ "react-dom": "^17 || ^18" } }, - "node_modules/@patternfly/react-topology/node_modules/@patternfly/react-styles": { - "version": "6.2.2", - "resolved": "https://registry.npmjs.org/@patternfly/react-styles/-/react-styles-6.2.2.tgz", - "integrity": "sha512-rncRDq66H8VnLyb9DrHHlZtPddlpNL9+W0XuQC0L7F6p78hOwSZmoGTW2Vq8/wJplDj8h/61qRpfRF9VEYPW0g==", - "dev": true, - "license": "MIT" - }, "node_modules/@perses-dev/components": { "version": "0.52.0", "resolved": "https://registry.npmjs.org/@perses-dev/components/-/components-0.52.0.tgz", @@ -11025,6 +11053,12 @@ "d3-selection": "2 - 3" } }, + "node_modules/d3-voronoi": { + "version": "1.1.4", + "resolved": "https://registry.npmjs.org/d3-voronoi/-/d3-voronoi-1.1.4.tgz", + "integrity": "sha512-dArJ32hchFsrQ8uMiTBLq256MpnZjeuBtdHpaDlYuQyjU0CVzCJl/BVW+SkszaAeH95D/8gxqAhgx0ouAWAfRg==", + "license": "BSD-3-Clause" + }, "node_modules/d3-zoom": { "version": "3.0.0", "resolved": "https://registry.npmjs.org/d3-zoom/-/d3-zoom-3.0.0.tgz", @@ -11614,13 +11648,13 @@ } }, "node_modules/echarts": { - "version": "5.5.0", - "resolved": "https://registry.npmjs.org/echarts/-/echarts-5.5.0.tgz", - "integrity": "sha512-rNYnNCzqDAPCr4m/fqyUFv7fD9qIsd50S6GDFgO1DxZhncCsNsG7IfUlAlvZe5oSEQxtsjnHiUuppzccry93Xw==", + "version": "5.6.0", + "resolved": "https://registry.npmjs.org/echarts/-/echarts-5.6.0.tgz", + "integrity": "sha512-oTbVTsXfKuEhxftHqL5xprgLoc0k7uScAwtryCgWF6hPYFLRwOUHiFmHGCBKP5NPFNkDVopOieyUqYGH8Fa3kA==", "license": "Apache-2.0", "dependencies": { "tslib": "2.3.0", - "zrender": "5.5.0" + "zrender": "5.6.1" } }, "node_modules/echarts/node_modules/tslib": { @@ -27372,265 +27406,462 @@ "node": ">= 0.10" } }, + "node_modules/victory": { + "version": "37.3.6", + "resolved": "https://registry.npmjs.org/victory/-/victory-37.3.6.tgz", + "integrity": "sha512-CZ1vjvra0R1U3T2dMI4EsjI8Ng+JmQ2ox/EweSzjkTnHfW/Vn5ylryadawDiYjDMcBvABjO3uODsIlSEm4d/Sw==", + "license": "MIT", + "dependencies": { + "victory-area": "37.3.6", + "victory-axis": "37.3.6", + "victory-bar": "37.3.6", + "victory-box-plot": "37.3.6", + "victory-brush-container": "37.3.6", + "victory-brush-line": "37.3.6", + "victory-candlestick": "37.3.6", + "victory-canvas": "37.3.6", + "victory-chart": "37.3.6", + "victory-core": "37.3.6", + "victory-create-container": "37.3.6", + "victory-cursor-container": "37.3.6", + "victory-errorbar": "37.3.6", + "victory-group": "37.3.6", + "victory-histogram": "37.3.6", + "victory-legend": "37.3.6", + "victory-line": "37.3.6", + "victory-pie": "37.3.6", + "victory-polar-axis": "37.3.6", + "victory-scatter": "37.3.6", + "victory-selection-container": "37.3.6", + "victory-shared-events": "37.3.6", + "victory-stack": "37.3.6", + "victory-tooltip": "37.3.6", + "victory-voronoi": "37.3.6", + "victory-voronoi-container": "37.3.6", + "victory-zoom-container": "37.3.6" + }, + "engines": { + "node": ">=18.0.0" + }, + "peerDependencies": { + "react": ">=16.6.0" + } + }, "node_modules/victory-area": { - "version": "36.9.2", - "resolved": "https://registry.npmjs.org/victory-area/-/victory-area-36.9.2.tgz", - "integrity": "sha512-32aharvPf2RgdQB+/u1j3/ajYFNH/7ugLX9ZRpdd65gP6QEbtXL+58gS6CxvFw6gr/y8a0xMlkMKkpDVacXLpw==", + "version": "37.3.6", + "resolved": "https://registry.npmjs.org/victory-area/-/victory-area-37.3.6.tgz", + "integrity": "sha512-wVC8LKrZJLiSySNuJLRCB449qZTsPiRyzLlNoJwe21y+XA/a2HJbmJSeywmo8P153aX8viKe1H8ygDsTFXQhHw==", "license": "MIT", "dependencies": { "lodash": "^4.17.19", - "victory-core": "^36.9.2", - "victory-vendor": "^36.9.2" + "victory-core": "37.3.6", + "victory-vendor": "37.3.6" + }, + "engines": { + "node": ">=18.0.0" }, "peerDependencies": { "react": ">=16.6.0" } }, "node_modules/victory-axis": { - "version": "36.9.2", - "resolved": "https://registry.npmjs.org/victory-axis/-/victory-axis-36.9.2.tgz", - "integrity": "sha512-4Odws+IAjprJtBg2b2ZCxEPgrQ6LgIOa22cFkGghzOSfTyNayN4M3AauNB44RZyn2O/hDiM1gdBkEg1g9YDevQ==", + "version": "37.3.6", + "resolved": "https://registry.npmjs.org/victory-axis/-/victory-axis-37.3.6.tgz", + "integrity": "sha512-Vi0dZvgmXmnCdoqc49WckeG5cMXnl7FTtqVhXu9JweA9cgCnkZabBd5mRvAjblb3Lo4j0HZCSPKHYWUPW70qZg==", "license": "MIT", "dependencies": { "lodash": "^4.17.19", - "victory-core": "^36.9.2" + "victory-core": "37.3.6" + }, + "engines": { + "node": ">=18.0.0" }, "peerDependencies": { "react": ">=16.6.0" } }, "node_modules/victory-bar": { - "version": "36.9.2", - "resolved": "https://registry.npmjs.org/victory-bar/-/victory-bar-36.9.2.tgz", - "integrity": "sha512-R3LFoR91FzwWcnyGK2P8DHNVv9gsaWhl5pSr2KdeNtvLbZVEIvUkTeVN9RMBMzterSFPw0mbWhS1Asb3sV6PPw==", + "version": "37.3.6", + "resolved": "https://registry.npmjs.org/victory-bar/-/victory-bar-37.3.6.tgz", + "integrity": "sha512-jdATFRWL1LUW/yEpKWx/aId2BiU2o1pPF9+Kh1TFISBduJoI4ZqvZD90H1QK4f/z50PikqiqiDECaKoKM1jfOQ==", "license": "MIT", "dependencies": { "lodash": "^4.17.19", - "victory-core": "^36.9.2", - "victory-vendor": "^36.9.2" + "victory-core": "37.3.6", + "victory-vendor": "37.3.6" + }, + "engines": { + "node": ">=18.0.0" + }, + "peerDependencies": { + "react": ">=16.6.0" + } + }, + "node_modules/victory-box-plot": { + "version": "37.3.6", + "resolved": "https://registry.npmjs.org/victory-box-plot/-/victory-box-plot-37.3.6.tgz", + "integrity": "sha512-GOucnD63h14ScBuISC/nd1GBTEx6gIZfLE+0P0gyeH1poBKq0trTTvpQDvAMuGR8zICfEETG3ltmUMCwRrFyUg==", + "license": "MIT", + "dependencies": { + "lodash": "^4.17.19", + "victory-core": "37.3.6", + "victory-vendor": "37.3.6" + }, + "engines": { + "node": ">=18.0.0" }, "peerDependencies": { "react": ">=16.6.0" } }, "node_modules/victory-brush-container": { - "version": "36.9.2", - "resolved": "https://registry.npmjs.org/victory-brush-container/-/victory-brush-container-36.9.2.tgz", - "integrity": "sha512-KcQjzFeo40tn52cJf1A02l5MqeR9GKkk3loDqM3T2hfi1PCyUrZXEUjGN5HNlLizDRvtcemaAHNAWlb70HbG/g==", + "version": "37.3.6", + "resolved": "https://registry.npmjs.org/victory-brush-container/-/victory-brush-container-37.3.6.tgz", + "integrity": "sha512-LfZ2CgX1cYAqCtYxcSB68OfZS2v0T2VLXoEArd0lCXfRBY1Gya7GacCUcuo7GoK9XOXeslx7S/U95aVutt1VLg==", "license": "MIT", "dependencies": { "lodash": "^4.17.19", "react-fast-compare": "^3.2.0", - "victory-core": "^36.9.2" + "victory-core": "37.3.6" + }, + "engines": { + "node": ">=18.0.0" + }, + "peerDependencies": { + "react": ">=16.6.0" + } + }, + "node_modules/victory-brush-line": { + "version": "37.3.6", + "resolved": "https://registry.npmjs.org/victory-brush-line/-/victory-brush-line-37.3.6.tgz", + "integrity": "sha512-zsZJfF1fUj4F7mUoIMV+h73qoTClPA4bKM1terlYrDBD8l/c/f0KBbEotu3E1X+n4QMmDRruswaB/YUdqK5QLA==", + "license": "MIT", + "dependencies": { + "lodash": "^4.17.19", + "react-fast-compare": "^3.2.0", + "victory-core": "37.3.6" + }, + "engines": { + "node": ">=18.0.0" + }, + "peerDependencies": { + "react": ">=16.6.0" + } + }, + "node_modules/victory-candlestick": { + "version": "37.3.6", + "resolved": "https://registry.npmjs.org/victory-candlestick/-/victory-candlestick-37.3.6.tgz", + "integrity": "sha512-h/mOmkCrsWrirn4dFnpLxJPXpxT+uHxuYxnXGrAyH+YUOrVj3iKaDJlEiVlz5vy30syE5j5hzTQCMsZ/hzHNdg==", + "license": "MIT", + "dependencies": { + "lodash": "^4.17.19", + "victory-core": "37.3.6" + }, + "engines": { + "node": ">=18.0.0" + }, + "peerDependencies": { + "react": ">=16.6.0" + } + }, + "node_modules/victory-canvas": { + "version": "37.3.6", + "resolved": "https://registry.npmjs.org/victory-canvas/-/victory-canvas-37.3.6.tgz", + "integrity": "sha512-1CD4S0uZ92sUGGSIEQferEfSqd/z9EXw9G6zkzPIoJeTKFshpfqCjUkNRx9Iu9Upxt3fUpId8Qwl1YfchmbrFg==", + "license": "MIT", + "dependencies": { + "lodash": "^4.17.19", + "victory-bar": "37.3.6", + "victory-core": "37.3.6" + }, + "engines": { + "node": ">=18.0.0" }, "peerDependencies": { "react": ">=16.6.0" } }, "node_modules/victory-chart": { - "version": "36.9.2", - "resolved": "https://registry.npmjs.org/victory-chart/-/victory-chart-36.9.2.tgz", - "integrity": "sha512-dMNcS0BpqL3YiGvI4BSEmPR76FCksCgf3K4CSZ7C/MGyrElqB6wWwzk7afnlB1Qr71YIHXDmdwsPNAl/iEwTtA==", + "version": "37.3.6", + "resolved": "https://registry.npmjs.org/victory-chart/-/victory-chart-37.3.6.tgz", + "integrity": "sha512-IkPo/W4AJ7bPu902TGER09OseR9ODm+FQAKfOBw4JsdEhZZ7BiG9zgd/25+x0r5EsTLu81CYGQVkBa+ZazcOlA==", "license": "MIT", "dependencies": { "lodash": "^4.17.19", "react-fast-compare": "^3.2.0", - "victory-axis": "^36.9.2", - "victory-core": "^36.9.2", - "victory-polar-axis": "^36.9.2", - "victory-shared-events": "^36.9.2" + "victory-axis": "37.3.6", + "victory-core": "37.3.6", + "victory-polar-axis": "37.3.6", + "victory-shared-events": "37.3.6" + }, + "engines": { + "node": ">=18.0.0" }, "peerDependencies": { "react": ">=16.6.0" } }, "node_modules/victory-core": { - "version": "36.9.2", - "resolved": "https://registry.npmjs.org/victory-core/-/victory-core-36.9.2.tgz", - "integrity": "sha512-AzmMy+9MYMaaRmmZZovc/Po9urHne3R3oX7bbXeQdVuK/uMBrlPiv11gVJnuEH2SXLVyep43jlKgaBp8ef9stQ==", + "version": "37.3.6", + "resolved": "https://registry.npmjs.org/victory-core/-/victory-core-37.3.6.tgz", + "integrity": "sha512-aFgO6KokxPbUCPznZP5UPhOdI22pMuwDXKDt6eoQOnkVim66Ia+K95TQar2nwVKGYV5j26aKVf/n9blwphGJRw==", "license": "MIT", "dependencies": { "lodash": "^4.17.21", "react-fast-compare": "^3.2.0", - "victory-vendor": "^36.9.2" + "victory-vendor": "37.3.6" + }, + "engines": { + "node": ">=18.0.0" }, "peerDependencies": { "react": ">=16.6.0" } }, "node_modules/victory-create-container": { - "version": "36.9.2", - "resolved": "https://registry.npmjs.org/victory-create-container/-/victory-create-container-36.9.2.tgz", - "integrity": "sha512-uA0dh1R0YDzuXyE/7StZvq4qshet+WYceY7R1UR5mR/F9079xy+iQsa2Ca4h97/GtVZoLO6r1eKLWBt9TN+U7A==", + "version": "37.3.6", + "resolved": "https://registry.npmjs.org/victory-create-container/-/victory-create-container-37.3.6.tgz", + "integrity": "sha512-Uf5bFQvqUsXCjqpvBW4LhrdrHkM6dBqxYgub6FCsBb86f84xZQ3vY7jFkg/JfvF0oGKMoWXYYrYLC1sk+fcWVA==", "license": "MIT", "dependencies": { "lodash": "^4.17.19", - "victory-brush-container": "^36.9.2", - "victory-core": "^36.9.2", - "victory-cursor-container": "^36.9.2", - "victory-selection-container": "^36.9.2", - "victory-voronoi-container": "^36.9.2", - "victory-zoom-container": "^36.9.2" + "victory-brush-container": "37.3.6", + "victory-core": "37.3.6", + "victory-cursor-container": "37.3.6", + "victory-selection-container": "37.3.6", + "victory-voronoi-container": "37.3.6", + "victory-zoom-container": "37.3.6" + }, + "engines": { + "node": ">=18.0.0" }, "peerDependencies": { "react": ">=16.6.0" } }, "node_modules/victory-cursor-container": { - "version": "36.9.2", - "resolved": "https://registry.npmjs.org/victory-cursor-container/-/victory-cursor-container-36.9.2.tgz", - "integrity": "sha512-jidab4j3MaciF3fGX70jTj4H9rrLcY8o2LUrhJ67ZLvEFGGmnPtph+p8Fe97Umrag7E/DszjNxQZolpwlgUh3g==", + "version": "37.3.6", + "resolved": "https://registry.npmjs.org/victory-cursor-container/-/victory-cursor-container-37.3.6.tgz", + "integrity": "sha512-+Oiw57d5nE+iq8As8RvepknzmNtKq1Gsc50u1X3IRd4jXtX8zqZrgXGlVZ+BP/tkLsWnGYVjKulwKBf2oaEUuw==", "license": "MIT", "dependencies": { "lodash": "^4.17.19", - "victory-core": "^36.9.2" + "victory-core": "37.3.6" + }, + "engines": { + "node": ">=18.0.0" + }, + "peerDependencies": { + "react": ">=16.6.0" + } + }, + "node_modules/victory-errorbar": { + "version": "37.3.6", + "resolved": "https://registry.npmjs.org/victory-errorbar/-/victory-errorbar-37.3.6.tgz", + "integrity": "sha512-WGAv/qizOlfmwKv+Yfxr4q6pDgTfloNQwi3Z3M0h8povjMZt74tHYkvi/TASSRYr3zv5kjUqUJ28qAyGMWwryQ==", + "license": "MIT", + "dependencies": { + "lodash": "^4.17.19", + "victory-core": "37.3.6" + }, + "engines": { + "node": ">=18.0.0" }, "peerDependencies": { "react": ">=16.6.0" } }, "node_modules/victory-group": { - "version": "36.9.2", - "resolved": "https://registry.npmjs.org/victory-group/-/victory-group-36.9.2.tgz", - "integrity": "sha512-wBmpsjBTKva8mxHvHNY3b8RE58KtnpLLItEyyAHaYkmExwt3Uj8Cld3sF3vmeuijn2iR64NPKeMbgMbfZJzycw==", + "version": "37.3.6", + "resolved": "https://registry.npmjs.org/victory-group/-/victory-group-37.3.6.tgz", + "integrity": "sha512-kgy/Azl5BxwlJAV0KDPGypv35TMrOD1J2ZxnJW2Wyyq+e8i0GGBIv5MoBzou64BRsDlS9V0CYRIjnkHgrBpB5w==", "license": "MIT", "dependencies": { "lodash": "^4.17.19", "react-fast-compare": "^3.2.0", - "victory-core": "^36.9.2", - "victory-shared-events": "^36.9.2" + "victory-core": "37.3.6", + "victory-shared-events": "37.3.6" + }, + "engines": { + "node": ">=18.0.0" + }, + "peerDependencies": { + "react": ">=16.6.0" + } + }, + "node_modules/victory-histogram": { + "version": "37.3.6", + "resolved": "https://registry.npmjs.org/victory-histogram/-/victory-histogram-37.3.6.tgz", + "integrity": "sha512-K4d43MpXHYnGCLEMzfRpJ+lCRRDKALPi/juxfMGVzBPzSMgjC8h9x6hKdxaejiTd/E04UdzNO7J24plL3Uz8rA==", + "license": "MIT", + "dependencies": { + "lodash": "^4.17.19", + "react-fast-compare": "^3.2.0", + "victory-bar": "37.3.6", + "victory-core": "37.3.6", + "victory-vendor": "37.3.6" + }, + "engines": { + "node": ">=18.0.0" }, "peerDependencies": { "react": ">=16.6.0" } }, "node_modules/victory-legend": { - "version": "36.9.2", - "resolved": "https://registry.npmjs.org/victory-legend/-/victory-legend-36.9.2.tgz", - "integrity": "sha512-cucFJpv6fty+yXp5pElQFQnHBk1TqA4guGUMI+XF/wLlnuM4bhdAtASobRIIBkz0mHGBaCAAV4PzL9azPU/9dg==", + "version": "37.3.6", + "resolved": "https://registry.npmjs.org/victory-legend/-/victory-legend-37.3.6.tgz", + "integrity": "sha512-vRRrhj3/ENqKVLdaBMzEmR83N6BOjox1bthYT1eJjN2H5SIK35bxn30IkiV/Pz3y627EqZe4TAWaxc0jiJlCiA==", "license": "MIT", "dependencies": { "lodash": "^4.17.19", - "victory-core": "^36.9.2" + "victory-core": "37.3.6" + }, + "engines": { + "node": ">=18.0.0" }, "peerDependencies": { "react": ">=16.6.0" } }, "node_modules/victory-line": { - "version": "36.9.2", - "resolved": "https://registry.npmjs.org/victory-line/-/victory-line-36.9.2.tgz", - "integrity": "sha512-kmYFZUo0o2xC8cXRsmt/oUBRQSZJVT2IJnAkboUepypoj09e6CY5tRH4TSdfEDGkBk23xQkn7d4IFgl4kAGnSA==", + "version": "37.3.6", + "resolved": "https://registry.npmjs.org/victory-line/-/victory-line-37.3.6.tgz", + "integrity": "sha512-Ke817uf/qFbN9jU7Dba7CrcHXYO5wAZuKKnyeHJmLDeQeFST0773xejnIuC+dBgZipjFr4KIbSd+VcUafFNE1g==", "license": "MIT", "dependencies": { "lodash": "^4.17.19", - "victory-core": "^36.9.2", - "victory-vendor": "^36.9.2" + "victory-core": "37.3.6", + "victory-vendor": "37.3.6" + }, + "engines": { + "node": ">=18.0.0" }, "peerDependencies": { "react": ">=16.6.0" } }, "node_modules/victory-pie": { - "version": "36.9.2", - "resolved": "https://registry.npmjs.org/victory-pie/-/victory-pie-36.9.2.tgz", - "integrity": "sha512-i3zWezvy5wQEkhXKt4rS9ILGH7Vr9Q5eF9fKO4GMwDPBdYOTE3Dh2tVaSrfDC8g9zFIc0DKzOtVoJRTb+0AkPg==", + "version": "37.3.6", + "resolved": "https://registry.npmjs.org/victory-pie/-/victory-pie-37.3.6.tgz", + "integrity": "sha512-tvdgAZ/HQWlo3KDDe0XAVbizHuaNMbgkkiF7zfA7Ww+3bHSs+0P9dsDtK2xP365D8gBCOv8pWmuzvKRhzNbqeA==", "license": "MIT", "dependencies": { "lodash": "^4.17.19", - "victory-core": "^36.9.2", - "victory-vendor": "^36.9.2" + "victory-core": "37.3.6", + "victory-vendor": "37.3.6" + }, + "engines": { + "node": ">=18.0.0" }, "peerDependencies": { "react": ">=16.6.0" } }, "node_modules/victory-polar-axis": { - "version": "36.9.2", - "resolved": "https://registry.npmjs.org/victory-polar-axis/-/victory-polar-axis-36.9.2.tgz", - "integrity": "sha512-HBR90FF4M56yf/atXjSmy3DMps1vSAaLXmdVXLM/A5g+0pUS7HO719r5x6dsR3I6Rm+8x6Kk8xJs0qgpnGQIEw==", + "version": "37.3.6", + "resolved": "https://registry.npmjs.org/victory-polar-axis/-/victory-polar-axis-37.3.6.tgz", + "integrity": "sha512-RpFsCkzHezJq5P+C/wtVdjEHX25JIFsSgs6qYSnfr/hayaFbWgK5HhRFpriQm5hg61cx47WxAOLyHvzf0nasvw==", "license": "MIT", "dependencies": { "lodash": "^4.17.19", - "victory-core": "^36.9.2" + "victory-core": "37.3.6" + }, + "engines": { + "node": ">=18.0.0" }, "peerDependencies": { "react": ">=16.6.0" } }, "node_modules/victory-scatter": { - "version": "36.9.2", - "resolved": "https://registry.npmjs.org/victory-scatter/-/victory-scatter-36.9.2.tgz", - "integrity": "sha512-hK9AtbJQfaW05i8BH7Lf1HK7vWMAfQofj23039HEQJqTKbCL77YT+Q0LhZw1a1BRCpC/5aSg9EuqblhfIYw2wg==", + "version": "37.3.6", + "resolved": "https://registry.npmjs.org/victory-scatter/-/victory-scatter-37.3.6.tgz", + "integrity": "sha512-fp95zMTPXgW1cmTowzDXhn+KxePMVDrzU0lotsHQMdBV7eB+ioXdu9hORlx4VHmMYg2ihsGwRTF+VAZ7rGxphA==", "license": "MIT", "dependencies": { "lodash": "^4.17.19", - "victory-core": "^36.9.2" + "victory-core": "37.3.6" + }, + "engines": { + "node": ">=18.0.0" }, "peerDependencies": { "react": ">=16.6.0" } }, "node_modules/victory-selection-container": { - "version": "36.9.2", - "resolved": "https://registry.npmjs.org/victory-selection-container/-/victory-selection-container-36.9.2.tgz", - "integrity": "sha512-chboroEwqqVlMB60kveXM2WznJ33ZM00PWkFVCoJDzHHlYs7TCADxzhqet2S67SbZGSyvSprY2YztSxX8kZ+XQ==", + "version": "37.3.6", + "resolved": "https://registry.npmjs.org/victory-selection-container/-/victory-selection-container-37.3.6.tgz", + "integrity": "sha512-gd3qODDlBtLEJM7+2jCXk2YcLBUmIpYEEHswytMhwc6zihxXipGBUHRulhLj/I05mKay2gaOAg5ewiJHd4Awgw==", "license": "MIT", "dependencies": { "lodash": "^4.17.19", - "victory-core": "^36.9.2" + "victory-core": "37.3.6" + }, + "engines": { + "node": ">=18.0.0" }, "peerDependencies": { "react": ">=16.6.0" } }, "node_modules/victory-shared-events": { - "version": "36.9.2", - "resolved": "https://registry.npmjs.org/victory-shared-events/-/victory-shared-events-36.9.2.tgz", - "integrity": "sha512-W/atiw3Or6MnpBuhluFv6007YrixIRh5NtiRvtFLGxNuQJLYjaSh6koRAih5xJer5Pj7YUx0tL9x67jTRcJ6Dg==", + "version": "37.3.6", + "resolved": "https://registry.npmjs.org/victory-shared-events/-/victory-shared-events-37.3.6.tgz", + "integrity": "sha512-ygrbOtzLUTbtKebacZKyQRekhSAROnAvMkVI/PKsAGsz0ClY9P7qDEJG7eTUUygjO6ax0tI6WNE6JogQzeD1gw==", "license": "MIT", "dependencies": { "json-stringify-safe": "^5.0.1", "lodash": "^4.17.19", "react-fast-compare": "^3.2.0", - "victory-core": "^36.9.2" + "victory-core": "37.3.6" + }, + "engines": { + "node": ">=18.0.0" }, "peerDependencies": { "react": ">=16.6.0" } }, "node_modules/victory-stack": { - "version": "36.9.2", - "resolved": "https://registry.npmjs.org/victory-stack/-/victory-stack-36.9.2.tgz", - "integrity": "sha512-imR6FniVlDFlBa/B3Est8kTryNhWj2ZNpivmVOebVDxkKcVlLaDg3LotCUOI7NzOhBQaro0UzeE9KmZV93JcYA==", + "version": "37.3.6", + "resolved": "https://registry.npmjs.org/victory-stack/-/victory-stack-37.3.6.tgz", + "integrity": "sha512-ldod04RdqGJGH5p5eWXCofdTkbhZqIp3iwW7NpxSbMDLs8zPQIVvDFVtuJgMwQiC5vnIpbhMmxVeFbr8m64ZKA==", "license": "MIT", "dependencies": { "lodash": "^4.17.19", "react-fast-compare": "^3.2.0", - "victory-core": "^36.9.2", - "victory-shared-events": "^36.9.2" + "victory-core": "37.3.6", + "victory-shared-events": "37.3.6" + }, + "engines": { + "node": ">=18.0.0" }, "peerDependencies": { "react": ">=16.6.0" } }, "node_modules/victory-tooltip": { - "version": "36.9.2", - "resolved": "https://registry.npmjs.org/victory-tooltip/-/victory-tooltip-36.9.2.tgz", - "integrity": "sha512-76seo4TWD1WfZHJQH87IP3tlawv38DuwrUxpnTn8+uW6/CUex82poQiVevYdmJzhataS9jjyCWv3w7pOmLBCLg==", + "version": "37.3.6", + "resolved": "https://registry.npmjs.org/victory-tooltip/-/victory-tooltip-37.3.6.tgz", + "integrity": "sha512-vqaJS9noauOqDDBBAV9Ln9duOY/i17h1DCfCPAqhwPFyvFbwKvAub9zPTeYWAm/14VvWX5O/0yekFCVbcC7hjg==", "license": "MIT", "dependencies": { "lodash": "^4.17.19", - "victory-core": "^36.9.2" + "victory-core": "37.3.6" + }, + "engines": { + "node": ">=18.0.0" }, "peerDependencies": { "react": ">=16.6.0" } }, "node_modules/victory-vendor": { - "version": "36.9.2", - "resolved": "https://registry.npmjs.org/victory-vendor/-/victory-vendor-36.9.2.tgz", - "integrity": "sha512-PnpQQMuxlwYdocC8fIJqVXvkeViHYzotI+NJrCuav0ZYFoq912ZHBk3mCeuj+5/VpodOjPe1z0Fk2ihgzlXqjQ==", + "version": "37.3.6", + "resolved": "https://registry.npmjs.org/victory-vendor/-/victory-vendor-37.3.6.tgz", + "integrity": "sha512-SbPDPdDBYp+5MJHhBCAyI7wKM3d5ivekigc2Dk2s7pgbZ9wIgIBYGVw4zGHBml/qTFbexrofXW6Gu4noGxrOwQ==", "license": "MIT AND ISC", "dependencies": { "@types/d3-array": "^3.0.3", @@ -27649,30 +27880,53 @@ "d3-timer": "^3.0.1" } }, + "node_modules/victory-voronoi": { + "version": "37.3.6", + "resolved": "https://registry.npmjs.org/victory-voronoi/-/victory-voronoi-37.3.6.tgz", + "integrity": "sha512-Q+1FWHp8IAbmDL9pGWS0y0N4Cb5qmD9OOgxoxCfIDsLlhGvd6LddhRoknWsN7WnreaK+XiwjSfQkdMTCZ4hdhQ==", + "license": "MIT", + "dependencies": { + "d3-voronoi": "^1.1.4", + "lodash": "^4.17.19", + "victory-core": "37.3.6" + }, + "engines": { + "node": ">=18.0.0" + }, + "peerDependencies": { + "react": ">=16.6.0" + } + }, "node_modules/victory-voronoi-container": { - "version": "36.9.2", - "resolved": "https://registry.npmjs.org/victory-voronoi-container/-/victory-voronoi-container-36.9.2.tgz", - "integrity": "sha512-NIVYqck9N4OQnEz9mgQ4wILsci3OBWWK7RLuITGHyoD7Ne/+WH1i0Pv2y9eIx+f55rc928FUTugPPhkHvXyH3A==", + "version": "37.3.6", + "resolved": "https://registry.npmjs.org/victory-voronoi-container/-/victory-voronoi-container-37.3.6.tgz", + "integrity": "sha512-qAAG0rMuK7A4EoJ4cyUk5wNdOW+HuCXNKPOko+hYK6wWOYXJvFhiglYyA85a695YyAXECc6JyJS/crm4IOEFag==", "license": "MIT", "dependencies": { "delaunay-find": "0.0.6", "lodash": "^4.17.19", "react-fast-compare": "^3.2.0", - "victory-core": "^36.9.2", - "victory-tooltip": "^36.9.2" + "victory-core": "37.3.6", + "victory-tooltip": "37.3.6" + }, + "engines": { + "node": ">=18.0.0" }, "peerDependencies": { "react": ">=16.6.0" } }, "node_modules/victory-zoom-container": { - "version": "36.9.2", - "resolved": "https://registry.npmjs.org/victory-zoom-container/-/victory-zoom-container-36.9.2.tgz", - "integrity": "sha512-pXa2Ji6EX/pIarKT6Hcmmu2n7IG/x8Vs0D2eACQ/nbpvZa+DXWIxCRW4hcg2Va35fmXcDIEpGaX3/soXzZ+pbw==", + "version": "37.3.6", + "resolved": "https://registry.npmjs.org/victory-zoom-container/-/victory-zoom-container-37.3.6.tgz", + "integrity": "sha512-AGL+k20mI44OL5b0VgIxlmnNSefIoFmbbim5NraPmIxbtns9qQW/56ivIncJcYomBungIx99gUpsEpcQaMNHgQ==", "license": "MIT", "dependencies": { "lodash": "^4.17.19", - "victory-core": "^36.9.2" + "victory-core": "37.3.6" + }, + "engines": { + "node": ">=18.0.0" }, "peerDependencies": { "react": ">=16.6.0" @@ -28785,9 +29039,9 @@ } }, "node_modules/zrender": { - "version": "5.5.0", - "resolved": "https://registry.npmjs.org/zrender/-/zrender-5.5.0.tgz", - "integrity": "sha512-O3MilSi/9mwoovx77m6ROZM7sXShR/O/JIanvzTwjN3FORfLSr81PsUGd7jlaYOeds9d8tw82oP44+3YucVo+w==", + "version": "5.6.1", + "resolved": "https://registry.npmjs.org/zrender/-/zrender-5.6.1.tgz", + "integrity": "sha512-OFXkDJKcrlx5su2XbzJvj/34Q3m6PvyCZkVPHGYpcCJ52ek4U/ymZyfuV1nKE23AyBJ51E/6Yr0mhZ7xGTO4ag==", "license": "BSD-3-Clause", "dependencies": { "tslib": "2.3.0" diff --git a/web/package.json b/web/package.json index 8db223d..9825068 100644 --- a/web/package.json +++ b/web/package.json @@ -79,7 +79,7 @@ "@emotion/styled": "^11.11.0", "@grafana/lezer-traceql": "^0.0.22", "@hookform/resolvers": "^3.3.4", - "@patternfly/react-charts": "6.92.0", + "@patternfly/react-charts": "^8.2.0", "@patternfly/react-core": "^6.2.0", "@patternfly/react-icons": "^5.4.2", "@patternfly/react-templates": "^6.2.2", @@ -97,12 +97,14 @@ "i18next-parser": "^8.13.0", "lodash": "^4.17.21", "pluralize": "^8.0.0", - "use-query-params": "^2.2.1" + "use-query-params": "^2.2.1", + "victory": "^37.3.6" }, "peerDependencies": { "react-router-dom": "<7" }, "overrides": { - "cheerio": "1.0.0-rc.12" + "cheerio": "1.0.0-rc.12", + "echarts": "^5.6.0" } } diff --git a/web/src/components/PersesWrapper.css b/web/src/components/PersesWrapper.css new file mode 100644 index 0000000..56a9784 --- /dev/null +++ b/web/src/components/PersesWrapper.css @@ -0,0 +1,6 @@ +/* This theme styles Material UI components to look like PatternFly components */ + +.mui-pf-theme { + --mui-palette-text-primary: var(--pf-t--global--text--color--regular); + --mui-shape-borderRadius: var(--pf-t--global--border--radius--small); +} diff --git a/web/src/components/PersesWrapper.tsx b/web/src/components/PersesWrapper.tsx index 5a23cee..ffc9ca0 100644 --- a/web/src/components/PersesWrapper.tsx +++ b/web/src/components/PersesWrapper.tsx @@ -38,7 +38,7 @@ import * as tempoPlugin from '@perses-dev/tempo-plugin'; import * as scatterChartPlugin from '@perses-dev/scatter-chart-plugin'; import * as traceTablePlugin from '@perses-dev/trace-table-plugin'; import * as tracingGanttChartPlugin from '@perses-dev/tracing-gantt-chart-plugin'; -import { ChartThemeColor, getThemeColors } from '@patternfly/react-charts'; +import { ChartThemeColor, getThemeColors } from '@patternfly/react-charts/victory'; import { TempoInstance } from '../hooks/useTempoInstance'; import { getProxyURLFor } from '../hooks/api'; import { ErrorBoundary } from 'react-error-boundary'; @@ -47,6 +47,7 @@ import { NoTempoInstanceSelectedState } from './NoTempoInstanceSelectedState'; import { LoadingState } from './LoadingState'; import { usePatternFlyTheme } from './console/utils/usePatternFlyTheme'; import { Link as RouterLink, useNavigate } from 'react-router-dom-v5-compat'; +import './PersesWrapper.css'; class DatasourceApiImpl implements DatasourceApi { constructor(public proxyDatasource: GlobalDatasourceResource) {} @@ -75,14 +76,15 @@ const patternflyBlue500 = '#004080'; const patternflyBlue600 = '#002952'; const defaultPaletteColors = [patternflyBlue400, patternflyBlue500, patternflyBlue600]; -const patternflyChartsMultiUnorderedPalette = getThemeColors( - ChartThemeColor.multiUnordered, -).chart.colorScale.flatMap((cssColor) => { - // colors are stored as 'var(--pf-chart-theme--multi-color-unordered--ColorScale--3400, #73c5c5)' - // need to extract the hex value, because fillStyle() of does not support CSS vars - const match = cssColor.match(/#[a-fA-F0-9]+/); - return match ? [match[0]] : []; -}); +const chartColorScale = getThemeColors(ChartThemeColor.multiUnordered).chart?.colorScale; +const patternflyChartsMultiUnorderedPalette = Array.isArray(chartColorScale) + ? chartColorScale.flatMap((cssColor: string) => { + // colors are stored as 'var(--pf-chart-theme--multi-color-unordered--ColorScale--3400, #73c5c5)' + // need to extract the hex value, because fillStyle() of does not support CSS vars + const match = cssColor.match(/#[a-fA-F0-9]+/); + return match ? [match[0]] : []; + }) + : []; // PluginRegistry configuration to allow access to // visualization panels/charts (@perses-dev/panels-plugin) @@ -110,10 +112,10 @@ export function PersesWrapper({ children }: PersesWrapperProps) { ...typography, fontFamily: 'var(--pf-t--global--font--family--body)', }, - shape: { - borderRadius: 4, // should be var(--pf-t--global--border--radius--tiny), but type must be a number. - }, - }); + cssVariables: true, + // Remove casting once https://github.com/perses/perses/pull/3443 is merged + // eslint-disable-next-line @typescript-eslint/no-explicit-any + } as any); const chartsTheme: PersesChartsTheme = generateChartsTheme(muiTheme, { echartsTheme: { diff --git a/web/src/pages/TraceDetailPage/TraceDetailPage.tsx b/web/src/pages/TraceDetailPage/TraceDetailPage.tsx index 4738dbd..73fa927 100644 --- a/web/src/pages/TraceDetailPage/TraceDetailPage.tsx +++ b/web/src/pages/TraceDetailPage/TraceDetailPage.tsx @@ -53,7 +53,12 @@ function TraceDetailPageBody() { - +
- + {t('Traces')} @@ -91,7 +91,7 @@ export function QueryBrowserBody() { - +