fix: improves the loading of stats between page changes (#2985)

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);
     }
-
+    reset({ initial });
-    history = useSimpleRefHistory(totalStat, { capacity: 300, initial: initial.reverse() });
   },
   { immediate: true },
 );
@@ -71,8 +70,4 @@ const memoryData = computed(() =>
     value: formatBytes(stat.memoryUsage),
   })),
 );
-
-// watch(memoryData, () => {
-//   console.log(memoryData.value);
-// });
 </script>

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;

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) {