[pull] main from AzuraCast:main

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: []

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

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) + '%';

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

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

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>

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);
     });

frontend/components/Stations/menu.ts

@@ -25,6 +25,7 @@ export function useStationsMenu(): ReactiveMenu {
     // Reuse this variable to avoid multiple calls.
     const userCanManageMedia = userAllowedForStation(StationPermission.Media);
 
+    // @ts-expect-error This is proper, TS just messes it up
     const menu: ReactiveMenu = reactive([
         {
             key: 'profile',

frontend/functions/filterMenu.ts

@@ -1,32 +1,36 @@
 import {cloneDeep, filter, get, map} from "lodash";
-import {ComputedRef, Reactive} from "vue";
+import {ComputedRef, Reactive, toRaw} from "vue";
 import {Icon} from "../components/Common/icons";
-import {RouteLocationRaw} from "vue-router";
 import {reactiveComputed} from "@vueuse/core";
 
-export type ReactiveMenu = Reactive<Array<MenuCategory>>;
+export type ReactiveMenu = Reactive<MenuCategory[]>;
+
+interface RouteBasedUrl {
+    name: string,
+    params?: Record<string, any>
+}
 
 export interface MenuSubCategory {
     key: string,
     label: ComputedRef<string>,
-    url?: RouteLocationRaw | string | null,
-    icon?: Icon | null,
-    visible?: boolean | null,
-    external?: boolean | null,
+    url?: string | RouteBasedUrl,
+    icon?: Icon,
+    visible?: boolean,
+    external?: boolean,
     title?: string,
-    class?: string,
+    "class"?: string,
 }
 
 export interface MenuCategory extends MenuSubCategory {
-    items?: MenuSubCategory[] | null
+    items?: MenuSubCategory[]
 }
 
 export default function filterMenu(menuItems: ReactiveMenu): ReactiveMenu {
     return reactiveComputed(
         () => filter(
             map(
-                cloneDeep(menuItems),
-                (menuRow: MenuCategory): MenuCategory | null => {
+                cloneDeep(toRaw(menuItems as unknown as MenuCategory[])),
+                (menuRow): MenuCategory | null => {
                     const itemIsVisible: boolean = get(menuRow, 'visible', true);
                     if (!itemIsVisible) {
                         return null;

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];
         }
     }