This is an automated email from the ASF dual-hosted git repository.
dengliming pushed a commit to branch master
in repository https://gitbox.apache.org/repos/asf/shenyu-dashboard.git
The following commit(s) were added to refs/heads/master by this push:
new 3b6a83ae fix: clean up instance chart lifecycle (#668)
3b6a83ae is described below
commit 3b6a83aed618b9cd5f253996dde8cd7a61dbc594
Author: vansh <[email protected]>
AuthorDate: Sat Sep 26 10:42:01 2026 +0530
fix: clean up instance chart lifecycle (#668)
Signed-off-by: vansh-nagar <[email protected]>
---
src/routes/System/Instance/chartLifecycle.test.js | 40 +++++++++++++++++++++++
src/routes/System/Instance/index.js | 28 +++++++++++-----
2 files changed, 60 insertions(+), 8 deletions(-)
diff --git a/src/routes/System/Instance/chartLifecycle.test.js
b/src/routes/System/Instance/chartLifecycle.test.js
new file mode 100644
index 00000000..647bb200
--- /dev/null
+++ b/src/routes/System/Instance/chartLifecycle.test.js
@@ -0,0 +1,40 @@
+/*
+ * 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.
+ */
+
+import { disposeCharts, resizeCharts } from "./index";
+
+describe("Instance chart lifecycle", () => {
+ it("resizes each initialized chart once", () => {
+ const pie = { resize: jest.fn() };
+ const line = { resize: jest.fn() };
+
+ resizeCharts(pie, null, line);
+
+ expect(pie.resize).toHaveBeenCalledTimes(1);
+ expect(line.resize).toHaveBeenCalledTimes(1);
+ });
+
+ it("disposes each initialized chart once", () => {
+ const pie = { dispose: jest.fn() };
+ const line = { dispose: jest.fn() };
+
+ disposeCharts(pie, undefined, line);
+
+ expect(pie.dispose).toHaveBeenCalledTimes(1);
+ expect(line.dispose).toHaveBeenCalledTimes(1);
+ });
+});
diff --git a/src/routes/System/Instance/index.js
b/src/routes/System/Instance/index.js
index 05d47716..805cc685 100644
--- a/src/routes/System/Instance/index.js
+++ b/src/routes/System/Instance/index.js
@@ -39,6 +39,14 @@ const { Text } = Typography;
const { Option } = Select;
+export const resizeCharts = (...charts) => {
+ charts.filter(Boolean).forEach((chart) => chart.resize());
+};
+
+export const disposeCharts = (...charts) => {
+ charts.filter(Boolean).forEach((chart) => chart.dispose());
+};
+
@connect(({ instance, loading, global }) => ({
instance,
language: global.language,
@@ -71,6 +79,7 @@ export default class Instance extends Component {
this.lineChartInstance = echarts.init(
document.getElementById("lineDataDiv"),
);
+ window.addEventListener("resize", this.handleChartResize);
}
componentDidUpdate(prevProps) {
@@ -91,6 +100,13 @@ export default class Instance extends Component {
}
}
+ componentWillUnmount() {
+ window.removeEventListener("resize", this.handleChartResize);
+ disposeCharts(this.pieChartInstance, this.lineChartInstance);
+ this.pieChartInstance = null;
+ this.lineChartInstance = null;
+ }
+
handleResize =
(index) =>
(e, { size }) => {
@@ -104,6 +120,10 @@ export default class Instance extends Component {
});
};
+ handleChartResize = () => {
+ resizeCharts(this.pieChartInstance, this.lineChartInstance);
+ };
+
onSelectChange = (selectedRowKeys) => {
this.setState({ selectedRowKeys });
};
@@ -179,10 +199,6 @@ export default class Instance extends Component {
};
this.pieChartInstance.setOption(option);
-
- window.addEventListener("resize", () => {
- this.pieChartInstance.resize();
- });
};
renderLineChart = (lineData) => {
@@ -254,10 +270,6 @@ export default class Instance extends Component {
};
this.lineChartInstance.setOption(option);
-
- window.addEventListener("resize", () => {
- this.lineChartInstance.resize();
- });
};
pageOnchange = (page) => {
