From dcd06ff6dd53f75b10f1941d90d1a587daf6e705 Mon Sep 17 00:00:00 2001
From: pa <maplenagisa@gmail.com>
Date: Wed, 12 Nov 2025 15:16:23 +0900
Subject: [PATCH] remove instance activity from keep-alive

---
 src/views/Charts/Charts.vue                   |  4 +--
 .../Charts/components/InstanceActivity.vue    | 33 +++++++++++--------
 .../components/InstanceActivityDetail.vue     | 17 +++++++---
 3 files changed, 34 insertions(+), 20 deletions(-)

diff --git a/src/views/Charts/Charts.vue b/src/views/Charts/Charts.vue
index deee8953..5831b151 100644
--- a/src/views/Charts/Charts.vue
+++ b/src/views/Charts/Charts.vue
@@ -3,9 +3,7 @@
         <div class="options-container" style="margin-top: 0">
             <span class="header">{{ t('view.charts.header') }}</span>
         </div>
-        <keep-alive>
-            <InstanceActivity />
-        </keep-alive>
+        <InstanceActivity />
         <el-backtop target="#chart" :right="30" :bottom="30"></el-backtop>
     </div>
 </template>
diff --git a/src/views/Charts/components/InstanceActivity.vue b/src/views/Charts/components/InstanceActivity.vue
index 09647225..00f8ef6b 100644
--- a/src/views/Charts/components/InstanceActivity.vue
+++ b/src/views/Charts/components/InstanceActivity.vue
@@ -124,7 +124,7 @@
 </template>
 
 <script setup>
-    import { nextTick, onActivated, onBeforeMount, onDeactivated, onMounted, ref, watch } from 'vue';
+    import { nextTick, onActivated, onBeforeMount, onBeforeUnmount, onDeactivated, onMounted, ref, watch } from 'vue';
     import { ArrowLeft, ArrowRight, InfoFilled, Refresh, Setting, WarningFilled } from '@element-plus/icons-vue';
     import { storeToRefs } from 'pinia';
     import { useI18n } from 'vue-i18n';
@@ -221,19 +221,19 @@
         }
     );
 
-    onActivated(() => {
-        // first time also call activated
-        if (echartsInstance.value) {
-            reloadData();
-        }
-    });
+    // onActivated(() => {
+    //     // first time also call activated
+    //     if (echartsInstance.value) {
+    //         reloadData();
+    //     }
+    // });
 
-    onDeactivated(() => {
-        // prevent resize animation when switch tab
-        if (resizeObserver.value) {
-            resizeObserver.value.disconnect();
-        }
-    });
+    // onDeactivated(() => {
+    //     // prevent resize animation when switch tab
+    //     if (resizeObserver.value) {
+    //         resizeObserver.value.disconnect();
+    //     }
+    // });
 
     onBeforeMount(() => {
         initializeSettings();
@@ -253,6 +253,13 @@
         }
     });
 
+    onBeforeUnmount(() => {
+        if (resizeObserver.value) {
+            resizeObserver.value.disconnect();
+            resizeObserver.value = null;
+        }
+    });
+
     reloadData = async function () {
         isLoading.value = true;
         try {
diff --git a/src/views/Charts/components/InstanceActivityDetail.vue b/src/views/Charts/components/InstanceActivityDetail.vue
index 0e157447..9618b123 100644
--- a/src/views/Charts/components/InstanceActivityDetail.vue
+++ b/src/views/Charts/components/InstanceActivityDetail.vue
@@ -15,7 +15,7 @@
 </template>
 
 <script setup>
-    import { computed, nextTick, onDeactivated, onMounted, ref, watch } from 'vue';
+    import { computed, nextTick, onBeforeUnmount, onDeactivated, onMounted, ref, watch } from 'vue';
     import { storeToRefs } from 'pinia';
 
     import dayjs from 'dayjs';
@@ -83,9 +83,18 @@
         initEcharts();
     });
 
-    onDeactivated(() => {
-        // prevent switch tab play resize animation
-        resizeObserver.value.disconnect();
+    // onDeactivated(() => {
+    //     // prevent switch tab play resize animation
+    //     if (resizeObserver.value) {
+    //         resizeObserver.value.disconnect();
+    //     }
+    // });
+
+    onBeforeUnmount(() => {
+        if (resizeObserver.value) {
+            resizeObserver.value.disconnect();
+            resizeObserver.value = null;
+        }
     });
 
     function initResizeObserver() {