work on dashboard

components/SystemStats.vue

@@ -0,0 +1,74 @@
+<template>
+    <div class="row sys-container text-start">
+        <div class="col-4 h-100 bg-warning">
+            {{ sysStat.system.name }} {{ sysStat.system.version }} {{ sysStat.system.kernel }}
+        </div>
+        <div class="col-5">CPU Cores: {{ sysStat.cpu.cores }} Used {{ sysStat.cpu.usage }}</div>
+        <div class="col-5">Load: {{ sysStat.load.one }} | {{ sysStat.load.five }} | {{ sysStat.load.fifteen }}</div>
+        <div class="col-5">Memory Total: {{ fileSize(sysStat.memory.total) }} Used: {{ fileSize(sysStat.memory.used) }}</div>
+        <div class="col-5">Network Name: {{ sysStat.network?.name }} In: {{ fileSize(sysStat.network?.current_in) }}</div>
+        <div class="col-5">Storage Path: {{ sysStat.storage?.path }} Size: {{ fileSize(sysStat.storage?.total) }} Used: {{fileSize(sysStat.storage?.used)}}</div>
+        <div class="col-5">Swap Total: {{ fileSize(sysStat.swap.total) }} Used: {{ fileSize(sysStat.swap.used) }}</div>
+    </div>
+</template>
+<script setup lang="ts">
+import { useAuth } from '~/stores/auth'
+import { useConfig } from '~/stores/config'
+
+const { fileSize } = stringFormatter()
+
+const authStore = useAuth()
+const configStore = useConfig()
+const contentType = { 'content-type': 'application/json,charset=UTF-8' }
+const timer = ref()
+const sysStat = ref({
+        cpu: { cores: 0.0, usage: 0.0 },
+        load: { one: 0.0, five: 0.0, fifteen: 0.0 },
+        memory: { total: 0.0, used: 0.0, free: 0.0 },
+        network: { name: "", current_in: 0.0, current_out: 0.0, total_in: 0.0, total_out: 0.0 },
+        storage: { path: "", total: 0.0, used: 0.0 },
+        swap: { total: 0.0, used: 0.0, free: 0.0 },
+        system: { name: "", kernel: "", version: "" },
+    } as SystemStatistics)
+
+onMounted(() => {
+    status()
+})
+
+onBeforeUnmount(() => {
+    if (timer.value) {
+        clearTimeout(timer.value)
+    }
+})
+
+async function status() {
+    systemStatus()
+
+    async function setStatus(resolve: any) {
+        /*
+            recursive function as a endless loop
+        */
+        systemStatus()
+
+        timer.value = setTimeout(() => setStatus(resolve), 1000)
+    }
+    return new Promise((resolve) => setStatus(resolve))
+}
+
+async function systemStatus() {
+    const channel = configStore.configGui[configStore.configID].id
+
+    await $fetch(`/api/system/${channel}`, {
+        method: 'GET',
+        headers: { ...contentType, ...authStore.authHeader },
+    }).then((stat: SystemStatistics) => {
+        console.log(stat)
+        sysStat.value = stat
+    })
+}
+</script>
+<style>
+.sys-container {
+    min-height: 500px,
+}
+</style>

composables/helper.ts

@@ -1,4 +1,30 @@
 export const stringFormatter = () => {
+    function fileSize(bytes: number | undefined, si=false, dp=1) {
+        if (!bytes) {
+            return 0.0
+        }
+
+        const thresh = si ? 1000 : 1024;
+
+        if (Math.abs(bytes) < thresh) {
+          return bytes + ' B';
+        }
+
+        const units = si
+          ? ['kB', 'MB', 'GB', 'TB', 'PB', 'EB', 'ZB', 'YB']
+          : ['KiB', 'MiB', 'GiB', 'TiB', 'PiB', 'EiB', 'ZiB', 'YiB'];
+        let u = -1;
+        const r = 10**dp;
+
+        do {
+          bytes /= thresh;
+          ++u;
+        } while (Math.round(Math.abs(bytes) * r) / r >= thresh && u < units.length - 1);
+
+
+        return bytes.toFixed(dp) + ' ' + units[u];
+    }
+
     function formatLog(text: string) {
         return (
             text
@@ -91,7 +117,7 @@ export const stringFormatter = () => {
         return null
     }
 
-    return { formatLog, timeToSeconds, secToHMS, numberToHex, hexToNumber, filename, toMin, secondsToTime, mediaType }
+    return { fileSize, formatLog, timeToSeconds, secToHMS, numberToHex, hexToNumber, filename, toMin, secondsToTime, mediaType }
 }
 
 export const playlistOperations = () => {

package.json

@@ -1,6 +1,6 @@
 {
   "name": "ffplayout-frontend",
-  "version": "0.5.0",
+  "version": "0.6.0",
   "description": "Web GUI for ffplayout",
   "author": "Jonathan Baecker",
   "private": true,
@@ -16,7 +16,7 @@
     "@nuxt/types": "^2.17.2",
     "@pinia/nuxt": "^0.5.1",
     "@popperjs/core": "^2.11.8",
-    "@vueuse/core": "^10.5.0",
+    "@vueuse/core": "^10.6.1",
     "bootstrap": "^5.3.2",
     "bootstrap-icons": "^1.11.1",
     "cookie-universal-nuxt": "^2.2.2",
@@ -33,14 +33,14 @@
   },
   "devDependencies": {
     "@nuxtjs/eslint-config": "^12.0.0",
-    "@types/bootstrap": "^5.2.8",
-    "@types/lodash": "^4.14.200",
-    "@types/splitpanes": "^2.2.4",
-    "@types/video.js": "^7.3.55",
-    "eslint": "^8.52.0",
+    "@types/bootstrap": "^5.2.9",
+    "@types/lodash": "^4.14.201",
+    "@types/splitpanes": "^2.2.5",
+    "@types/video.js": "^7.3.56",
+    "eslint": "^8.53.0",
     "eslint-plugin-nuxt": "^4.0.0",
     "fibers": "^5.0.3",
-    "nuxt": "3.8.0",
+    "nuxt": "3.8.1",
     "postcss": "^8.4.31",
     "postcss-loader": "^7.3.3",
     "sass": "^1.69.5",

pages/index.vue

@@ -4,13 +4,7 @@
             <div class="container login-container">
                 <div>
                     <div class="logo-div">
-                        <img
-                            src="~/assets/images/ffplayout.png"
-                            class="img-fluid"
-                            alt="Logo"
-                            width="256"
-                            height="256"
-                        />
+                        <SystemStats />
                     </div>
                     <div class="actions">
                         <div class="btn-group actions-grp btn-group-lg" role="group">

types/index.d.ts

@@ -26,9 +26,9 @@ declare global {
     }
 
     interface Payload {
-        method: string,
-        headers: any,
-        body?: any,
+        method: string
+        headers: any
+        body?: any
     }
 
     interface PlaylistItem {
@@ -87,4 +87,14 @@ declare global {
         paths?: string[]
         template?: Template
     }
+
+    interface SystemStatistics {
+        cpu: { cores: number; usage: number }
+        load: { one: number; five: number; fifteen: number }
+        memory: { total: number; used: number; free: number }
+        network?: { name: String; current_in: number; current_out: number; total_in: number; total_out: number }
+        storage?: { path: String; total: number; used: number }
+        swap: { total: number; used: number; free: number }
+        system: { name?: String; kernel?: String; version?: String }
+    }
 }