From 5f203a809b1c17030772195f4bb41b9b488aacc4 Mon Sep 17 00:00:00 2001
From: jb-alvarado <jb@pixelcrusher.de>
Date: Thu, 25 Apr 2024 14:49:57 +0200
Subject: [PATCH] get system status with sse

---
 .vscode/settings.json      |  3 ++
 components/EventStatus.vue | 12 +++++
 components/HeaderMenu.vue  |  1 +
 components/SystemStats.vue | 91 ++++++++++++++++++++++----------------
 error.vue                  | 22 ++++-----
 lang/de-DE.js              |  2 +
 lang/en-US.js              |  2 +
 lang/pt-BR.js              |  2 +
 nuxt.config.ts             |  1 +
 package-lock.json          |  4 +-
 package.json               |  2 +-
 pages/index.vue            |  3 ++
 stores/auth.ts             | 14 ++++++
 stores/config.ts           |  1 +
 stores/index.ts            |  1 +
 types/index.d.ts           |  4 ++
 16 files changed, 114 insertions(+), 51 deletions(-)
 create mode 100644 components/EventStatus.vue

diff --git a/.vscode/settings.json b/.vscode/settings.json
index f262d050..57395ca4 100644
--- a/.vscode/settings.json
+++ b/.vscode/settings.json
@@ -28,4 +28,7 @@
     "[typescript]": {
         "editor.defaultFormatter": "esbenp.prettier-vscode"
     },
+    "cSpell.words": [
+        "nuxt"
+    ],
 }
diff --git a/components/EventStatus.vue b/components/EventStatus.vue
new file mode 100644
index 00000000..9d82fc64
--- /dev/null
+++ b/components/EventStatus.vue
@@ -0,0 +1,12 @@
+<template>
+    <div class="flex items-center ps-4 pe-1">
+        <div
+            class="w-2 h-2 rounded-full"
+            :class="indexStore.sseConnected ? 'bg-success shadow shadow-success' : 'bg-error shadow shadow-error'"
+            :title="indexStore.sseConnected ? $t('socketConnected') : $t('socketDisconnected')"
+        />
+    </div>
+</template>
+<script setup lang="ts">
+const indexStore = useIndex()
+</script>
diff --git a/components/HeaderMenu.vue b/components/HeaderMenu.vue
index 37dd793d..3f81c4d3 100644
--- a/components/HeaderMenu.vue
+++ b/components/HeaderMenu.vue
@@ -3,6 +3,7 @@
         <NuxtLink class="navbar-brand min-w-[46px] p-2" href="/">
             <img src="~/assets/images/ffplayout-small.png" class="img-fluid" alt="Logo" width="30" height="30" />
         </NuxtLink>
+        <EventStatus class="z-10"/>
         <div class="navbar-end w-1/5 grow">
             <label class="swap swap-rotate me-2 md:hidden">
                 <input type="checkbox" :checked="indexStore.darkMode" @change="toggleDarkTheme" />
diff --git a/components/SystemStats.vue b/components/SystemStats.vue
index 49e1da47..e0accece 100644
--- a/components/SystemStats.vue
+++ b/components/SystemStats.vue
@@ -1,5 +1,6 @@
 <template>
-    <div class="grid grid-cols-1 xs:grid-cols-2 border-4 rounded-md border-primary text-left shadow max-w-[960px]">
+    <!-- <div v-if="data">{{ systemStatus(data) }}</div> -->
+    <div class="grid grid-cols-1 xs:grid-cols-2 border-4 rounded-md border-primary text-left shadow min-w-[728px] max-w-[960px]">
         <div class="p-4 bg-base-100">
             <span class="text-3xl">{{ sysStat.system.name }} {{ sysStat.system.version }}</span>
             <span v-if="sysStat.system.kernel">
@@ -92,51 +93,67 @@ const { fileSize } = stringFormatter()
 
 const authStore = useAuth()
 const configStore = useConfig()
-const timer = ref()
-const sysStat = ref({
-    cpu: { cores: 0.0, usage: 0.0 },
+const indexStore = useIndex()
+
+const streamUrl = ref(
+    `/data/event/${configStore.configGui[configStore.configID].id}?endpoint=system&uuid=${authStore.uuid}`
+)
+
+// 'http://127.0.0.1:8787/data/event/1?endpoint=system&uuid=f2f8c29b-712a-48c5-8919-b535d3a05a3a'
+const { status, data, error, close } = useEventSource(streamUrl, [], {
+    autoReconnect: {
+        retries: -1,
+        delay: 1000,
+        onFailed() {
+            indexStore.sseConnected = false
+        },
+    },
+})
+
+const errorCounter = ref(0)
+const defaultStat = {
+    cpu: { cores: 1, 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 },
+    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: '', ffp_version: '' },
-} as SystemStatistics)
+    system: { name: '...', kernel: '...', version: '...', ffp_version: '...' },
+} as SystemStatistics
 
-onMounted(() => {
-    status()
-})
+const sysStat = ref(defaultStat)
 
 onBeforeUnmount(() => {
-    if (timer.value) {
-        clearTimeout(timer.value)
+    close()
+    indexStore.sseConnected = false
+})
+
+watch([status, error], async () => {
+    if (status.value === 'OPEN') {
+        indexStore.sseConnected = true
+        errorCounter.value = 0
+    } else {
+        indexStore.sseConnected = false
+        errorCounter.value += 1
+        sysStat.value = defaultStat
+
+        if (errorCounter.value > 15) {
+            await authStore.obtainUuid()
+            streamUrl.value = `/data/event/${configStore.configGui[configStore.configID].id}?endpoint=system&uuid=${
+                authStore.uuid
+            }`
+            errorCounter.value = 0
+        }
     }
 })
 
-async function status() {
-    systemStatus()
-
-    async function setStatus(resolve: any) {
-        /*
-            recursive function as a endless loop
-        */
-        systemStatus()
-
-        timer.value = setTimeout(() => setStatus(resolve), 1000)
+watch([data], () => {
+    if (data.value) {
+        try {
+            sysStat.value = JSON.parse(data.value)
+        } catch (_) {
+            indexStore.sseConnected = true
+        }
     }
-    return new Promise((resolve) => setStatus(resolve))
-}
-
-async function systemStatus() {
-    const channel = configStore.configGui[configStore.configID].id
-
-    if (!document?.hidden) {
-        await $fetch<SystemStatistics>(`/api/system/${channel}`, {
-            method: 'GET',
-            headers: { ...configStore.contentType, ...authStore.authHeader },
-        }).then((stat) => {
-            sysStat.value = stat
-        })
-    }
-}
+})
 </script>
diff --git a/error.vue b/error.vue
index 76885869..ddddea4b 100644
--- a/error.vue
+++ b/error.vue
@@ -28,16 +28,16 @@ const props = defineProps({
     },
 })
 
-onMounted(() => {
-    const statusCode = props.error?.statusCode || 400
+// onMounted(() => {
+//     const statusCode = props.error?.statusCode || 400
 
-    if (statusCode >= 400) {
-        setTimeout(() => {
-            reloadNuxtApp({
-                path: localePath({ name: 'index' }),
-                ttl: 1000,
-            })
-        }, 3000)
-    }
-})
+//     if (statusCode >= 400) {
+//         setTimeout(() => {
+//             reloadNuxtApp({
+//                 path: localePath({ name: 'index' }),
+//                 ttl: 1000,
+//             })
+//         }, 3000)
+//     }
+// })
 </script>
diff --git a/lang/de-DE.js b/lang/de-DE.js
index dc3c80e4..4fe92b58 100644
--- a/lang/de-DE.js
+++ b/lang/de-DE.js
@@ -1,6 +1,8 @@
 export default {
     ok: 'Ok',
     cancel: 'Abbrechen',
+    socketConnected: 'Event Stream verbunden',
+    socketDisconnected: 'Event Stream nicht verbunden',
     alert: {
         wrongLogin: 'Falsche Anmeldedaten!',
     },
diff --git a/lang/en-US.js b/lang/en-US.js
index 5844a34c..92f623eb 100644
--- a/lang/en-US.js
+++ b/lang/en-US.js
@@ -1,6 +1,8 @@
 export default {
     ok: 'Ok',
     cancel: 'Cancel',
+    socketConnected: 'Event stream connected',
+    socketDisconnected: 'Event stream disconnected',
     alert: {
         wrongLogin: 'Incorrect login data!',
     },
diff --git a/lang/pt-BR.js b/lang/pt-BR.js
index f6723e62..41676b79 100644
--- a/lang/pt-BR.js
+++ b/lang/pt-BR.js
@@ -1,6 +1,8 @@
 export default {
     ok: 'Ok',
     cancel: 'Cancelar',
+    socketConnected: 'Event stream conectado',
+    socketDisconnected: 'Event stream desconectado',
     alert: {
         wrongLogin: 'Dados incorretos!',
     },
diff --git a/nuxt.config.ts b/nuxt.config.ts
index a3f30e68..53b6d53a 100644
--- a/nuxt.config.ts
+++ b/nuxt.config.ts
@@ -9,6 +9,7 @@ export default defineNuxtConfig({
         devProxy: {
             '/api': { target: 'http://127.0.0.1:8787/api' },
             '/auth': { target: 'http://127.0.0.1:8787/auth' },
+            '/data': { target: 'http://127.0.0.1:8787/data' },
             '/live': { target: 'http://127.0.0.1:8787/live' },
             '/file': { target: 'http://127.0.0.1:8787/file' },
         },
diff --git a/package-lock.json b/package-lock.json
index 35a4d589..c777514a 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,12 +1,12 @@
 {
   "name": "ffplayout-frontend",
-  "version": "0.8.1",
+  "version": "0.9.0",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "ffplayout-frontend",
-      "version": "0.8.1",
+      "version": "0.9.0",
       "hasInstallScript": true,
       "dependencies": {
         "@nuxtjs/color-mode": "^3.4.0",
diff --git a/package.json b/package.json
index 0d40175e..28d22343 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "ffplayout-frontend",
-  "version": "0.8.1",
+  "version": "0.9.0",
   "description": "Web GUI for ffplayout",
   "author": "Jonathan Baecker",
   "private": true,
diff --git a/pages/index.vue b/pages/index.vue
index c0680210..45d9a977 100644
--- a/pages/index.vue
+++ b/pages/index.vue
@@ -1,6 +1,9 @@
 <template>
     <div class="w-full min-h-screen xs:h-full flex justify-center items-center">
         <div v-if="authStore.isLogin" class="flex flex-wrap justify-center text-center w-full max-w-[1024px] p-5">
+            <div class="absolute top-4 left-1">
+                <EventStatus />
+            </div>
             <SystemStats v-if="configStore.configGui.length > 0" />
             <div class="flex flex-wrap justify-center gap-1 md:gap-0 md:join mt-5">
                 <NuxtLink :to="localePath({ name: 'player' })" class="btn join-item btn-primary px-2">
diff --git a/stores/auth.ts b/stores/auth.ts
index 26b77ddb..d75a16ea 100644
--- a/stores/auth.ts
+++ b/stores/auth.ts
@@ -7,6 +7,7 @@ export const useAuth = defineStore('auth', {
         jwtToken: '',
         authHeader: {},
         role: '',
+        uuid: null as null | string,
     }),
 
     getters: {},
@@ -56,6 +57,19 @@ export const useAuth = defineStore('auth', {
             return code
         },
 
+        async obtainUuid() {
+            await $fetch<DataAuth>('/api/generate-uuid', {
+                method: 'POST',
+                headers: this.authHeader,
+            })
+                .then((response) => {
+                    this.uuid = response.uuid
+                })
+                .catch(() => {
+                    this.uuid = null
+                })
+        },
+
         inspectToken() {
             const token = useCookie('token').value
 
diff --git a/stores/config.ts b/stores/config.ts
index 9733ed27..6daca3e7 100644
--- a/stores/config.ts
+++ b/stores/config.ts
@@ -23,6 +23,7 @@ export const useConfig = defineStore('config', {
             authStore.inspectToken()
 
             if (authStore.isLogin) {
+                await authStore.obtainUuid()
                 await this.getGuiConfig()
                 await this.getPlayoutConfig()
                 await this.getUserConfig()
diff --git a/stores/index.ts b/stores/index.ts
index 4668783b..36cbe9d2 100644
--- a/stores/index.ts
+++ b/stores/index.ts
@@ -6,6 +6,7 @@ export const useIndex = defineStore('index', {
         showAlert: false,
         alertVariant: 'success',
         alertMsg: '',
+        sseConnected: false,
     }),
 
     getters: {},
diff --git a/types/index.d.ts b/types/index.d.ts
index ae7162e1..83959874 100644
--- a/types/index.d.ts
+++ b/types/index.d.ts
@@ -17,6 +17,10 @@ declare global {
         }
     }
 
+    interface DataAuth {
+        uuid: string
+    }
+
     interface GuiConfig {
         id: number
         config_path: string