system-logs: Do not log to console when system-logging is enabled

src/libs/system-logging.ts

@@ -47,6 +47,11 @@ const saveLogEventInDB = (event: LogEvent): void => {
 
 const enableSystemLogging = localStorage.getItem(systemLoggingEnablingKey)
 if (enableSystemLogging === 'true') {
+  console.log(`
+    System logging is enabled.
+    This means that all console logs will be saved to the database, and won't be displayed in the console.
+    To disable system logging go to "Configuration" -> "Development".
+  `)
   const oldConsoleFunction = {
     error: console.error,
     warn: console.warn,
@@ -55,10 +60,9 @@ if (enableSystemLogging === 'true') {
     trace: console.trace,
     log: console.log,
   }
-  Object.entries(oldConsoleFunction).forEach(([level, fn]) => {
+  Object.entries(oldConsoleFunction).forEach(([level]) => {
     // @ts-ignore
     window.console[level] = (...o: any[]) => {
-      fn(...o)
       let wholeMessage = ''
       o.forEach((m) => {
         let msg = m

src/views/ConfigurationDevelopmentView.vue

@@ -55,7 +55,18 @@
           />
         </div>
         <ExpansiblePanel :is-expanded="!interfaceStore.isOnPhoneScreen">
-          <template #title>System logs</template>
+          <template #title>
+            <div class="flex justify-between">
+              <span>System logs</span>
+              <span class="text-sm text-gray-300 cursor-pointer" @click.stop="deleteOldLogs">
+                <v-tooltip text="Delete old logs">
+                  <template #activator="{ props }">
+                    <v-icon left class="mr-2" v-bind="props">mdi-delete-sweep</v-icon>
+                  </template>
+                </v-tooltip>
+              </span>
+            </div>
+          </template>
           <template #content>
             <v-data-table
               :items="systemLogsData"
@@ -65,7 +76,10 @@
               class="w-full max-h-[60%] rounded-md bg-[#FFFFFF11]"
             >
               <template #item.actions="{ item }">
-                <div class="text-center cursor-pointer icon-btn mdi mdi-download" @click="downloadLog(item.name)" />
+                <div class="flex justify-center space-x-2">
+                  <div class="cursor-pointer icon-btn mdi mdi-download" @click="downloadLog(item.name)" />
+                  <div class="cursor-pointer icon-btn mdi mdi-delete" @click="deleteLog(item.name)" />
+                </div>
               </template>
             </v-data-table>
           </template>
@@ -129,6 +143,33 @@ const downloadLog = async (logName: string): Promise<void> => {
   const logBlob = new Blob([logParts], { type: 'application/json' })
   saveAs(logBlob, logName)
 }
+
+const deleteLog = async (logName: string): Promise<void> => {
+  await cockpitSytemLogsDB.removeItem(logName)
+  systemLogsData.value = systemLogsData.value.filter((log) => log.name !== logName)
+}
+
+const deleteOldLogs = async (): Promise<void> => {
+  const yesterday = new Date()
+  yesterday.setDate(yesterday.getDate() - 1)
+
+  const logsToDelete: string[] = []
+  await cockpitSytemLogsDB.iterate((log: SystemLog, logName: string) => {
+    const logDate = new Date(log.initialDate)
+    if (logDate < yesterday) {
+      logsToDelete.push(logName)
+    }
+  })
+
+  for (const logName of logsToDelete) {
+    await cockpitSytemLogsDB.removeItem(logName)
+  }
+
+  systemLogsData.value = systemLogsData.value.filter((log) => {
+    const logDate = new Date(log.initialDate)
+    return logDate >= yesterday
+  })
+}
 </script>
 <style scoped>
 .custom-header {