feat: collects all stats like cpu and mem in background for up to 5 minutes (#2740)

Author: amir20

assets/auto-imports.d.ts

@@ -290,6 +290,7 @@ declare global {
   const useSeoMeta: typeof import('@vueuse/head')['useSeoMeta']
   const useSessionStorage: typeof import('@vueuse/core')['useSessionStorage']
   const useShare: typeof import('@vueuse/core')['useShare']
+  const useSimpleRefHistory: typeof import('./utils/index')['useSimpleRefHistory']
   const useSlots: typeof import('vue')['useSlots']
   const useSorted: typeof import('@vueuse/core')['useSorted']
   const useSpeechRecognition: typeof import('@vueuse/core')['useSpeechRecognition']
@@ -646,6 +647,7 @@ declare module 'vue' {
     readonly useSeoMeta: UnwrapRef<typeof import('@vueuse/head')['useSeoMeta']>
     readonly useSessionStorage: UnwrapRef<typeof import('@vueuse/core')['useSessionStorage']>
     readonly useShare: UnwrapRef<typeof import('@vueuse/core')['useShare']>
+    readonly useSimpleRefHistory: UnwrapRef<typeof import('./utils/index')['useSimpleRefHistory']>
     readonly useSlots: UnwrapRef<typeof import('vue')['useSlots']>
     readonly useSorted: UnwrapRef<typeof import('@vueuse/core')['useSorted']>
     readonly useSpeechRecognition: UnwrapRef<typeof import('@vueuse/core')['useSpeechRecognition']>
@@ -995,6 +997,7 @@ declare module '@vue/runtime-core' {
     readonly useSeoMeta: UnwrapRef<typeof import('@vueuse/head')['useSeoMeta']>
     readonly useSessionStorage: UnwrapRef<typeof import('@vueuse/core')['useSessionStorage']>
     readonly useShare: UnwrapRef<typeof import('@vueuse/core')['useShare']>
+    readonly useSimpleRefHistory: UnwrapRef<typeof import('./utils/index')['useSimpleRefHistory']>
     readonly useSlots: UnwrapRef<typeof import('vue')['useSlots']>
     readonly useSorted: UnwrapRef<typeof import('@vueuse/core')['useSorted']>
     readonly useSpeechRecognition: UnwrapRef<typeof import('@vueuse/core')['useSpeechRecognition']>

assets/components/FuzzySearchModal.spec.ts

@@ -31,9 +31,9 @@ function createFuzzySearchModal() {
           initialState: {
             container: {
               containers: [
-                new Container("123", new Date(), "image", "test", "command", "host", {}, "status", "running"),
-                new Container("345", new Date(), "image", "foo bar", "command", "host", {}, "status", "running"),
-                new Container("567", new Date(), "image", "baz", "command", "host", {}, "status", "exited"),
+                new Container("123", new Date(), "image", "test", "command", "host", {}, "status", "running", []),
+                new Container("345", new Date(), "image", "foo bar", "command", "host", {}, "status", "running", []),
+                new Container("567", new Date(), "image", "baz", "command", "host", {}, "status", "exited", []),
               ],
             },
           },

assets/components/LogViewer/ContainerStat.vue

@@ -11,11 +11,11 @@ const { container } = useContainerContext();
 const cpuData = computedWithControl(
   () => container.value.stat,
   () => {
-    const history = container.value.statHistory;
+    const history = container.value.statsHistory;
     const points: Point<unknown>[] = history.map((stat, i) => ({
       x: i,
-      y: Math.max(0, stat.snapshot.cpu),
-      value: Math.max(0, stat.snapshot.cpu).toFixed(2) + "%",
+      y: Math.max(0, stat.cpu),
+      value: Math.max(0, stat.cpu).toFixed(2) + "%",
     }));
     return points;
   },
@@ -24,11 +24,11 @@ const cpuData = computedWithControl(
 const memoryData = computedWithControl(
   () => container.value.stat,
   () => {
-    const history = container.value.statHistory;
+    const history = container.value.statsHistory;
     const points: Point<string>[] = history.map((stat, i) => ({
       x: i,
-      y: stat.snapshot.memory,
-      value: formatBytes(stat.snapshot.memoryUsage),
+      y: stat.memory,
+      value: formatBytes(stat.memoryUsage),
     }));
     return points;
   },

assets/components/LogViewer/StatSparkline.vue

@@ -12,7 +12,7 @@ import { area, curveStep } from "d3-shape";
 
 const d3 = { extent, scaleLinear, area, curveStep };
 const { data, width = 150, height = 30 } = defineProps<{ data: Point<unknown>[]; width?: number; height?: number }>();
-const x = d3.scaleLinear().range([width, 0]);
+const x = d3.scaleLinear().range([0, width]);
 const y = d3.scaleLinear().range([height, 0]);
 
 const selectedPoint = defineEmit<[value: Point<unknown>]>();

assets/models/Container.spec.ts

@@ -18,7 +18,7 @@ describe("Container", () => {
   ];
 
   test.each(names)("name %s should be %s and %s", (name, expectedName, expectedSwarmId) => {
-    const c = new Container("id", new Date(), "image", name!, "command", "host", {}, "status", "created");
+    const c = new Container("id", new Date(), "image", name!, "command", "host", {}, "status", "created", []);
     expect(c.name).toBe(expectedName);
     expect(c.swarmId).toBe(expectedSwarmId);
   });

assets/models/Container.ts

@@ -1,6 +1,5 @@
 import type { ContainerHealth, ContainerStat, ContainerState } from "@/types/Container";
-import type { UseThrottledRefHistoryReturn } from "@vueuse/core";
-import { useExponentialMovingAverage } from "@/utils";
+import { useExponentialMovingAverage, useSimpleRefHistory } from "@/utils";
 import { Ref } from "vue";
 
 type Stat = Omit<ContainerStat, "id">;
@@ -19,7 +18,7 @@ const hosts = computed(() =>
 
 export class Container {
   private _stat: Ref<Stat>;
-  private readonly throttledStatHistory: UseThrottledRefHistoryReturn<Stat, Stat>;
+  private readonly _statsHistory: Ref<Stat[]>;
   public readonly swarmId: string | null = null;
   public readonly isSwarm: boolean = false;
   private readonly movingAverageStat: Ref<Stat>;
@@ -34,10 +33,11 @@ export class Container {
     public readonly labels = {} as Record<string, string>,
     public status: string,
     public state: ContainerState,
+    stats: Stat[],
     public health?: ContainerHealth,
   ) {
     this._stat = ref({ cpu: 0, memory: 0, memoryUsage: 0 });
-    this.throttledStatHistory = useThrottledRefHistory(this._stat, { capacity: 300, deep: true, throttle: 1000 });
+    this._statsHistory = useSimpleRefHistory(this._stat, { capacity: 300, deep: true, initial: stats });
     this.movingAverageStat = useExponentialMovingAverage(this._stat, 0.2);
 
     const match = name.match(SWARM_ID_REGEX);
@@ -48,8 +48,8 @@ export class Container {
     }
   }
 
-  get statHistory() {
-    return unref(this.throttledStatHistory.history);
+  get statsHistory() {
+    return unref(this._statsHistory);
   }
 
   get movingAverage() {

assets/stores/container.ts

@@ -64,7 +64,7 @@ export const useContainerStore = defineStore("container", () => {
       const event = JSON.parse((e as MessageEvent).data) as { actorId: string };
       const container = allContainersById.value[event.actorId];
       if (container) {
-        container.state = "dead";
+        container.state = "exited";
       }
     });
 
@@ -127,6 +127,7 @@ export const useContainerStore = defineStore("container", () => {
           c.labels,
           c.status,
           c.state,
+          c.stats,
           c.health,
         );
       }),

assets/types/Container.d.ts

@@ -15,6 +15,7 @@ export type ContainerJson = {
   readonly state: ContainerState;
   readonly host: string;
   readonly labels: Record<string, string>;
+  readonly stats: ContainerStat[];
   readonly health?: ContainerHealth;
 };
 

assets/utils/index.ts

@@ -51,3 +51,27 @@ export function useExponentialMovingAverage<T extends Record<string, number>>(so
 
   return ema;
 }
+
+interface UseSimpleRefHistoryOptions<T> {
+  capacity: number;
+  deep?: boolean;
+  initial?: T[];
+}
+
+export function useSimpleRefHistory<T>(source: Ref<T>, options: UseSimpleRefHistoryOptions<T>) {
+  const { capacity, deep = true, initial = [] as T[] } = options;
+  const history = ref<T[]>(initial) as Ref<T[]>;
+
+  watch(
+    source,
+    (value) => {
+      history.value.push(value);
+      if (history.value.length > capacity) {
+        history.value.shift();
+      }
+    },
+    { deep },
+  );
+
+  return history;
+}