From beb95c2f87f3ee83c31ce8bcbdc62f2c88659cc2 Mon Sep 17 00:00:00 2001
From: Amir Raminfar <findamir@gmail.com>
Date: Sun, 26 May 2024 10:29:26 -0700
Subject: [PATCH] fix: improves the loading of stats between page changes
 (#2985)

---
 assets/components/LogViewer/MultiContainerStat.vue | 9 ++-------
 assets/models/Container.ts                         | 3 ++-
 assets/utils/index.ts                              | 6 +++++-
 3 files changed, 9 insertions(+), 9 deletions(-)

diff --git a/assets/components/LogViewer/MultiContainerStat.vue b/assets/components/LogViewer/MultiContainerStat.vue
index 16881162..293e44a0 100644
--- a/assets/components/LogViewer/MultiContainerStat.vue
+++ b/assets/components/LogViewer/MultiContainerStat.vue
@@ -14,7 +14,7 @@ const { containers } = defineProps<{
 }>();
 
 const totalStat = ref<Stat>({ cpu: 0, memory: 0, memoryUsage: 0 });
-let history = useSimpleRefHistory(totalStat, { capacity: 300 });
+const { history, reset } = useSimpleRefHistory(totalStat, { capacity: 300 });
 
 watch(
   () => containers,
@@ -37,8 +37,7 @@ watch(
       );
       initial.push(stat);
     }
-
-    history = useSimpleRefHistory(totalStat, { capacity: 300, initial: initial.reverse() });
+    reset({ initial });
   },
   { immediate: true },
 );
@@ -71,8 +70,4 @@ const memoryData = computed(() =>
     value: formatBytes(stat.memoryUsage),
   })),
 );
-
-// watch(memoryData, () => {
-//   console.log(memoryData.value);
-// });
 </script>
diff --git a/assets/models/Container.ts b/assets/models/Container.ts
index 1f967da2..b5d1ab2b 100644
--- a/assets/models/Container.ts
+++ b/assets/models/Container.ts
@@ -42,7 +42,8 @@ export class Container {
     public health?: ContainerHealth,
   ) {
     this._stat = ref(stats.at(-1) || ({ cpu: 0, memory: 0, memoryUsage: 0 } as Stat));
-    this._statsHistory = useSimpleRefHistory(this._stat, { capacity: 300, deep: true, initial: stats });
+    const { history } = useSimpleRefHistory(this._stat, { capacity: 300, deep: true, initial: stats });
+    this._statsHistory = history;
     this.movingAverageStat = useExponentialMovingAverage(this._stat, 0.2);
 
     this._name = name;
diff --git a/assets/utils/index.ts b/assets/utils/index.ts
index 2dddcbd1..03357cfd 100644
--- a/assets/utils/index.ts
+++ b/assets/utils/index.ts
@@ -73,7 +73,11 @@ export function useSimpleRefHistory<T>(source: Ref<T>, options: UseSimpleRefHist
     { deep },
   );
 
-  return history;
+  const reset = ({ initial = [] }: Pick<UseSimpleRefHistoryOptions<T>, "initial">) => {
+    history.value = initial;
+  };
+
+  return { history, reset };
 }
 
 export function hashCode(str: string) {