chore: cleans up types in typescript (#2335)

assets/components/ContainerTable.vue

@@ -57,6 +57,8 @@
 </template>
 
 <script setup lang="ts">
+import { Container } from "@/models/Container";
+
 const fields = {
   name: {
     label: "label.container-name",
@@ -84,16 +86,6 @@ const fields = {
     mobileVisible: false,
   },
 };
-type Container = {
-  id: string;
-  name: string;
-  state: string;
-  created: Date;
-  movingAverage: {
-    cpu: number;
-    memory: number;
-  };
-};
 
 const { containers, perPage = 15 } = defineProps<{
   containers: Container[];

assets/components/LogViewer/ContainerPopup.vue

@@ -7,11 +7,11 @@
   </div>
   <div>
     <span class="has-text-weight-light"> LOAD </span>
-    <span class="has-text-weight-semibold"> {{ container.getLastStat().snapshot.cpu }}% </span>
+    <span class="has-text-weight-semibold"> {{ container.stat.cpu }}% </span>
   </div>
   <div>
     <span class="has-text-weight-light"> MEM </span>
-    <span class="has-text-weight-semibold"> {{ formatBytes(container.getLastStat().snapshot.memoryUsage) }} </span>
+    <span class="has-text-weight-semibold"> {{ formatBytes(container.stat.memoryUsage) }} </span>
   </div>
 </template>
 

assets/components/LogViewer/ContainerStat.vue

@@ -22,9 +22,9 @@ import { type ComputedRef } from "vue";
 const container = inject("container") as ComputedRef<Container>;
 
 const cpuData = computedWithControl(
-  () => container.value.getLastStat(),
+  () => container.value.stat,
   () => {
-    const history = container.value.getStatHistory();
+    const history = container.value.statHistory;
     const points: Point<unknown>[] = history.map((stat, i) => ({
       x: i,
       y: stat.snapshot.cpu,
@@ -35,9 +35,9 @@ const cpuData = computedWithControl(
 );
 
 const memoryData = computedWithControl(
-  () => container.value.getLastStat(),
+  () => container.value.stat,
   () => {
-    const history = container.value.getStatHistory();
+    const history = container.value.statHistory;
     const points: Point<string>[] = history.map((stat, i) => ({
       x: i,
       y: stat.snapshot.memory,

assets/models/Container.ts

@@ -8,7 +8,7 @@ type Stat = Omit<ContainerStat, "id">;
 const SWARM_ID_REGEX = /(\.[a-z0-9]{25})+$/i;
 
 export class Container {
-  public stat: Ref<Stat>;
+  private _stat: Ref<Stat>;
   private readonly throttledStatHistory: UseThrottledRefHistoryReturn<Stat, Stat>;
   public readonly swarmId: string | null = null;
   public readonly isSwarm: boolean = false;
@@ -25,9 +25,9 @@ export class Container {
     public state: ContainerState,
     public health?: ContainerHealth,
   ) {
-    this.stat = ref({ cpu: 0, memory: 0, memoryUsage: 0 });
-    this.throttledStatHistory = useThrottledRefHistory(this.stat, { capacity: 300, deep: true, throttle: 1000 });
-    this.movingAverageStat = useExponentialMovingAverage(this.stat, 0.2);
+    this._stat = ref({ cpu: 0, memory: 0, memoryUsage: 0 });
+    this.throttledStatHistory = useThrottledRefHistory(this._stat, { capacity: 300, deep: true, throttle: 1000 });
+    this.movingAverageStat = useExponentialMovingAverage(this._stat, 0.2);
 
     const match = name.match(SWARM_ID_REGEX);
     if (match) {
@@ -37,15 +37,24 @@ export class Container {
     }
   }
 
-  public getStatHistory() {
+  get statHistory() {
     return unref(this.throttledStatHistory.history);
   }
 
-  public getLastStat() {
-    return unref(this.throttledStatHistory.last);
-  }
-
   get movingAverage() {
     return unref(this.movingAverageStat);
   }
+
+  get stat() {
+    return unref(this._stat);
+  }
+
+  public updateStat(stat: Stat) {
+    if (isRef(this._stat)) {
+      this._stat.value = stat;
+    } else {
+      // @ts-ignore
+      this._stat = stat;
+    }
+  }
 }

assets/pages/index.vue

@@ -50,9 +50,11 @@
 </template>
 
 <script lang="ts" setup>
+import { Container } from "@/models/Container";
+
 const { version } = config;
 const containerStore = useContainerStore();
-const { containers } = storeToRefs(containerStore);
+const { containers } = storeToRefs(containerStore) as { containers: unknown } as { containers: Ref<Container[]> };
 
 const mostRecentContainers = $computed(() => [...containers.value].sort((a, b) => +b.created - +a.created));
 const runningContainers = $computed(() => mostRecentContainers.filter((c) => c.state === "running"));
@@ -60,7 +62,7 @@ const runningContainers = $computed(() => mostRecentContainers.filter((c) => c.s
 let totalCpu = $ref(0);
 useIntervalFn(
   () => {
-    totalCpu = runningContainers.reduce((acc, c) => acc + (c.stat?.cpu ?? 0), 0);
+    totalCpu = runningContainers.reduce((acc, c) => acc + c.stat.cpu, 0);
   },
   1000,
   { immediate: true },
@@ -69,7 +71,7 @@ useIntervalFn(
 let totalMem = $ref(0);
 useIntervalFn(
   () => {
-    totalMem = runningContainers.reduce((acc, c) => acc + (c.stat?.memoryUsage ?? 0), 0);
+    totalMem = runningContainers.reduce((acc, c) => acc + c.stat.memoryUsage, 0);
   },
   1000,
   { immediate: true },

assets/stores/container.ts

@@ -39,7 +39,7 @@ export const useContainerStore = defineStore("container", () => {
       const container = allContainersById.value[stat.id] as unknown as UnwrapNestedRefs<Container>;
       if (container) {
         const { id, ...rest } = stat;
-        container.stat = rest;
+        container.updateStat(rest);
       }
     });
     es.addEventListener("container-die", (e) => {