Fix typing on Admin stats panels.

igecloudsdev · Jan 15, 2025 · 19ddd8c · 19ddd8c
1 parent d2abf8d
commit 19ddd8c
Show file tree

Hide file tree

Showing 9 changed files with 131 additions and 30 deletions.
diff --git a/frontend/components/Admin/Index.vue b/frontend/components/Admin/Index.vue
@@ -91,6 +91,94 @@
     </div>
 </template>
 
+<script lang="ts">
+interface AdminCpuCore {
+    name: string,
+    usage: string,
+    idle: string,
+    io_wait: string,
+    steal: string,
+}
+
+interface AdminCpuStats {
+    total: AdminCpuCore,
+    cores: AdminCpuCore[],
+    load: number[],
+}
+
+interface AdminMemoryStats {
+    bytes: {
+        total: string,
+        free: string,
+        buffers: string,
+        cached: string,
+        sReclaimable: string,
+        shmem: string,
+        used: string,
+    },
+    readable: {
+        total: string,
+        free: string,
+        buffers: string,
+        cached: string,
+        sReclaimable: string,
+        shmem: string,
+        used: string,
+    }
+}
+
+interface AdminStorageStats {
+    bytes: {
+        total: string,
+        free: string,
+        used: string,
+    },
+    readable: {
+        total: string,
+        free: string,
+        used: string,
+    }
+}
+
+interface AdminNetworkInterfaceStats {
+    interface_name: string,
+    received: {
+        speed: {
+            bytes: string,
+            readable: string,
+        },
+        packets: string,
+        errs: string,
+        drop: string,
+        fifo: string,
+        frame: string,
+        compressed: string,
+        multicast: string,
+    },
+    transmitted: {
+        speed: {
+            bytes: string
+            readable: string
+        },
+        packets: string,
+        errs: string,
+        drop: string,
+        fifo: string,
+        frame: string,
+        carrier: string,
+        compressed: string,
+    }
+}
+
+export interface AdminStats {
+    cpu: AdminCpuStats,
+    memory: AdminMemoryStats,
+    swap: AdminStorageStats,
+    disk: AdminStorageStats,
+    network: AdminNetworkInterfaceStats[]
+}
+</script>
+
 <script setup lang="ts">
 import Icon from '~/components/Common/Icon.vue';
 import {useAxios} from "~/vendor/axios";
@@ -110,7 +198,7 @@ const menuItems = useAdminMenu();
 
 const {axiosSilent} = useAxios();
 
-const {state: stats, isLoading} = useAutoRefreshingAsyncState(
+const {state: stats, isLoading} = useAutoRefreshingAsyncState<AdminStats>(
     () => axiosSilent.get(statsUrl.value).then(r => r.data),
     {
         cpu: {
@@ -121,32 +209,42 @@ const {state: stats, isLoading} = useAutoRefreshingAsyncState(
                 usage: 0
             },
             cores: [],
-            load: [
-                0,
-                0,
-                0
-            ]
+            load: [0, 0, 0]
         },
         memory: {
             bytes: {
-                total: 0,
-                used: 0,
-                cached: 0
+                total: "0",
+                used: "0",
+                cached: "0"
+            },
+            readable: {
+                total: "",
+                used: "",
+                cached: ""
+            }
+        },
+        swap: {
+            bytes: {
+                total: "0",
+                free: "0",
+                used: "0",
             },
             readable: {
-                total: '',
-                used: '',
-                cached: ''
+                total: "",
+                free: "",
+                used: "",
             }
         },
         disk: {
             bytes: {
-                total: 0,
-                used: 0
+                total: "0",
+                free: "0",
+                used: "0",
             },
             readable: {
-                total: '',
-                used: ''
+                total: "",
+                free: "",
+                used: "",
             }
         },
         network: []

diff --git a/frontend/components/Admin/Index/CpuStatsPanel.vue b/frontend/components/Admin/Index/CpuStatsPanel.vue
@@ -139,9 +139,10 @@ import {ref} from "vue";
 import CpuStatsHelpModal from "~/components/Admin/Index/CpuStatsHelpModal.vue";
 import {upperFirst} from "lodash";
 import {IconInfo} from "~/components/Common/icons.ts";
+import {AdminStats} from "~/components/Admin/Index.vue";
 
 const props = defineProps<{
-    stats: object, // TODO
+    stats: AdminStats,
 }>();
 
 const $cpuStatsHelpModal = ref<InstanceType<typeof CpuStatsHelpModal> | null>(null);

diff --git a/frontend/components/Admin/Index/DiskUsagePanel.vue b/frontend/components/Admin/Index/DiskUsagePanel.vue
@@ -40,9 +40,11 @@
 </template>
 
 <script setup lang="ts">
+import {AdminStats} from "~/components/Admin/Index.vue";
+
 const props = defineProps<{
-    stats: object, // TODO
-}>;
+    stats: AdminStats,
+}>();
 
 const getPercent = (amount, total) => {
     return ((amount / total) * 100) + '%';

diff --git a/frontend/components/Admin/Index/MemoryStatsPanel.vue b/frontend/components/Admin/Index/MemoryStatsPanel.vue
@@ -66,10 +66,11 @@ import Icon from "~/components/Common/Icon.vue";
 import {ref} from "vue";
 import MemoryStatsHelpModal from "~/components/Admin/Index/MemoryStatsHelpModal.vue";
 import {IconInfo} from "~/components/Common/icons.ts";
+import {AdminStats} from "~/components/Admin/Index.vue";
 
 const props = defineProps<{
-    stats: object, // TODO
-}>;
+    stats: AdminStats,
+}>();
 
 const $memoryStatsHelpModal = ref<InstanceType<typeof MemoryStatsHelpModal> | null>(null);
 const showMemoryStatsHelpModal = () => {

diff --git a/frontend/components/Admin/Index/NetworkStatsPanel.vue b/frontend/components/Admin/Index/NetworkStatsPanel.vue
@@ -46,9 +46,10 @@ import Tab from "~/components/Common/Tab.vue";
 import Tabs from "~/components/Common/Tabs.vue";
 import {isObject} from "lodash";
 import NetworkStatsTable from "~/components/Admin/Index/NetworkStatsTable.vue";
+import {AdminStats} from "~/components/Admin/Index.vue";
 
 const props = defineProps<{
-    stats: object
+    stats: AdminStats
 }>();
 
 const getNetworkInterfaceTableFields = (interfaceData) => Object.keys(interfaceData);

diff --git a/frontend/components/Admin/Index/NetworkStatsTable.vue b/frontend/components/Admin/Index/NetworkStatsTable.vue
@@ -32,7 +32,7 @@
 import {get} from "lodash";
 
 const props = defineProps<{
-    fields: object, // TODO,
-    data: Array<any>, // TODO
+    fields: string[],
+    data: Record<string, any>,
 }>();
 </script>
diff --git a/frontend/components/Admin/Index/ServicesPanel.vue b/frontend/components/Admin/Index/ServicesPanel.vue
@@ -69,7 +69,7 @@ const {state: services, isLoading} = useAutoRefreshingAsyncState(
 
 const {notifySuccess} = useNotify();
 
-const doRestart = (serviceUrl) => {
+const doRestart = (serviceUrl: string) => {
     axios.post(serviceUrl).then((resp) => {
         notifySuccess(resp.data.message);
     });

diff --git a/frontend/functions/filterMenu.ts b/frontend/functions/filterMenu.ts
@@ -1,7 +1,6 @@
 import {cloneDeep, filter, get, map} from "lodash";
 import {ComputedRef, Reactive, toRaw} from "vue";
 import {Icon} from "../components/Common/icons";
-import {RouteLocationAsPathGeneric, RouteLocationAsRelativeGeneric} from "vue-router";
 import {reactiveComputed} from "@vueuse/core";
 
 export type ReactiveMenu = Reactive<MenuCategory[]>;

diff --git a/frontend/functions/mergeExisting.ts b/frontend/functions/mergeExisting.ts
@@ -1,18 +1,19 @@
 import isObject from "./isObject";
 import {toRaw} from "vue";
+import {cloneDeep} from "lodash";
 
 /*
  * A "deep" merge that only merges items from the source into the destination that already exist in the destination.
  * Useful for merging in form values with API returns.
  */
-export default function mergeExisting<T extends object>(
+export default function mergeExisting<T extends Record<any, any>>(
     destRaw: T,
     sourceRaw: Partial<T>
 ): T {
     const dest = toRaw(destRaw);
     const source = toRaw(sourceRaw);
 
-    const ret = {};
+    const ret: T = cloneDeep(dest);
     for (const destKey in dest) {
         if (destKey in source) {
             const destVal = dest[destKey];
@@ -23,8 +24,6 @@ export default function mergeExisting<T extends object>(
             } else {
                 ret[destKey] = sourceVal;
             }
-        } else {
-            ret[destKey] = dest[destKey];
         }
     }