Fix: Daily log file not adding newlines to logs, Add: Config log page loads last 5000 logs for the current day #72

client/pages/config/log.vue

@@ -1,8 +1,12 @@
 <template>
   <div id="page-wrapper" class="page p-6 overflow-y-auto" :class="streamAudiobook ? 'streaming' : ''">
     <div class="w-full max-w-4xl mx-auto">
-      <div class="mb-4 flex items-center justify-between">
-        <p class="text-2xl">Logger</p>
+      <div class="mb-4 flex items-end">
+        <p class="text-2xl mr-4">Logger</p>
+
+        <ui-text-input ref="input" v-model="search" placeholder="Search filter.." @input="inputUpdate" clearable class="w-40 h-8 text-sm" />
+
+        <div class="flex-grow" />
 
         <div class="w-44">
           <ui-dropdown v-model="newServerSettings.logLevel" label="Server Log Level" :items="logLevelItems" @input="logLevelUpdated" />
@@ -22,7 +26,6 @@
 
         <div v-if="!logs.length" class="absolute top-0 left-0 w-full h-full flex flex-col items-center justify-center text-center">
           <p class="text-xl text-gray-200 mb-2">No Logs</p>
-          <p class="text-base text-gray-400">Log listening starts when you login</p>
         </div>
       </div>
     </div>
@@ -38,6 +41,9 @@ export default {
   },
   data() {
     return {
+      search: null,
+      searchTimeout: null,
+      searchText: null,
       newServerSettings: {},
       logColors: ['yellow-200', 'gray-400', 'info', 'warning', 'error', 'red-800', 'blue-400'],
       logLevels: [
@@ -53,7 +59,8 @@ export default {
           value: 3,
           text: 'Warn'
         }
-      ]
+      ],
+      loadedLogs: []
     }
   },
   watch: {
@@ -73,8 +80,14 @@ export default {
       return this.logLevels
     },
     logs() {
-      return this.$store.state.logs.logs.filter((log) => {
-        return log.level >= this.newServerSettings.logLevel
+      return this.loadedLogs.filter((log) => {
+        if (log.level >= this.newServerSettings.logLevel) {
+          if (this.searchText) {
+            return log.message.toLowerCase().includes(this.searchText)
+          }
+          return true
+        }
+        return false
       })
     },
     serverSettings() {
@@ -85,6 +98,16 @@ export default {
     }
   },
   methods: {
+    inputUpdate() {
+      clearTimeout(this.searchTimeout)
+      this.searchTimeout = setTimeout(() => {
+        if (!this.search || !this.search.trim()) {
+          this.searchText = ''
+          return
+        }
+        this.searchText = this.search.toLowerCase().trim()
+      }, 500)
+    },
     updateScroll() {
       if (this.$refs.container) {
         this.$refs.container.scrollTop = this.$refs.container.scrollHeight - this.$refs.container.clientHeight
@@ -96,7 +119,7 @@ export default {
       }
       this.updateServerSettings(payload)
 
-      this.$store.dispatch('logs/setLogListener', this.newServerSettings.logLevel)
+      this.$root.socket.emit('set_log_listener', this.newServerSettings.logLevel)
       this.$nextTick(this.updateScroll)
     },
     updateServerSettings(payload) {
@@ -109,6 +132,14 @@ export default {
           console.error('Failed to update server settings', error)
         })
     },
+    logEvtReceived(payload) {
+      this.loadedLogs.push(payload)
+
+      // Dont let logs get too large
+      if (this.loadedLogs.length > 5050) {
+        this.loadedLogs = this.loadedLogs.slice(-5000)
+      }
+    },
     init(attempts = 0) {
       if (!this.$root.socket) {
         if (attempts > 10) {
@@ -119,7 +150,15 @@ export default {
         }, 250)
         return
       }
+
       this.newServerSettings = this.serverSettings ? { ...this.serverSettings } : {}
+      this.$root.socket.on('daily_logs', this.dailyLogsLoaded)
+      this.$root.socket.on('log', this.logEvtReceived)
+      this.$root.socket.emit('set_log_listener', this.newServerSettings.logLevel)
+      this.$root.socket.emit('fetch_daily_logs')
+    },
+    dailyLogsLoaded(lines) {
+      this.loadedLogs = lines
     }
   },
   updated() {
@@ -127,6 +166,11 @@ export default {
   },
   mounted() {
     this.init()
+  },
+  beforeDestroy() {
+    if (!this.$root.socket) return
+    this.$root.socket.off('daily_logs', this.dailyLogsLoaded)
+    this.$root.socket.off('log', this.logEvtReceived)
   }
 }
 </script>