Add system logs and allow downloading them

package.json

@@ -48,7 +48,7 @@
     "vue-draggable-plus": "^0.2.0-beta.2",
     "vue-router": "^4.0.14",
     "vue-virtual-scroller": "^2.0.0-beta.8",
-    "vuetify": "^3.1.13",
+    "vuetify": "3.4.7",
     "webfontloader": "^1.0.0",
     "webrtc-adapter": "^8.2.0"
   },

src/App.vue

@@ -159,7 +159,7 @@ import Dialog from './components/Dialog.vue'
 import EditMenu from './components/EditMenu.vue'
 import MiniWidgetContainer from './components/MiniWidgetContainer.vue'
 import Alerter from './components/widgets/Alerter.vue'
-import { datalogger } from './libs/logging'
+import { datalogger } from './libs/sensors-logging'
 import { useWidgetManagerStore } from './stores/widgetManager'
 
 const widgetStore = useWidgetManagerStore()

src/components/mini-widgets/DepthIndicator.vue

@@ -17,7 +17,7 @@ import { useAverage } from '@vueuse/math'
 import { ref, watch } from 'vue'
 import { computed } from 'vue'
 
-import { datalogger, DatalogVariable } from '@/libs/logging'
+import { datalogger, DatalogVariable } from '@/libs/sensors-logging'
 import { useMainVehicleStore } from '@/stores/mainVehicle'
 
 const store = useMainVehicleStore()

src/components/mini-widgets/MiniVideoRecorder.vue

@@ -57,14 +57,13 @@ import { useMouseInElement, useTimestamp } from '@vueuse/core'
 import { format, intervalToDuration } from 'date-fns'
 import { saveAs } from 'file-saver'
 import fixWebmDuration from 'fix-webm-duration'
-import localforage from 'localforage'
 import { storeToRefs } from 'pinia'
 import Swal, { type SweetAlertResult } from 'sweetalert2'
 import { computed, onBeforeMount, onBeforeUnmount, ref, toRefs, watch } from 'vue'
 import adapter from 'webrtc-adapter'
 
 import { WebRTCManager } from '@/composables/webRTC'
-import { datalogger } from '@/libs/logging'
+import { datalogger } from '@/libs/sensors-logging'
 import type { Stream } from '@/libs/webrtc/signalling_protocol'
 import { useMainVehicleStore } from '@/stores/mainVehicle'
 import { useMissionStore } from '@/stores/mission'
@@ -103,14 +102,6 @@ const isRecording = computed(() => {
   return mediaRecorder.value !== undefined && mediaRecorder.value.state === 'recording'
 })
 
-const cockpitVideoDB = localforage.createInstance({
-  driver: localforage.INDEXEDDB,
-  name: 'CockpitVideoDB',
-  storeName: 'cockpit-video-db',
-  version: 1.0,
-  description: 'Local backups of Cockpit video recordings to be retrieved in case of failure.',
-})
-
 onBeforeMount(async () => {
   // Set initial widget options if they don't exist
   if (Object.keys(miniWidget.value.options).length === 0) {
@@ -205,7 +196,7 @@ const startRecording = async (): Promise<SweetAlertResult | void> => {
   let chunks: Blob[] = []
   mediaRecorder.value.ondataavailable = async (e) => {
     chunks.push(e.data)
-    await cockpitVideoDB.setItem(fileName, chunks)
+    await videoStore.videoRecoveryDB.setItem(fileName, chunks)
   }
 
   mediaRecorder.value.onstop = () => {
@@ -216,7 +207,7 @@ const startRecording = async (): Promise<SweetAlertResult | void> => {
     fixWebmDuration(blob, Date.now() - timeRecordingStart.value.getTime()).then((fixedBlob) => {
       saveAs(fixedBlob, `${fileName}.webm`)
       saveAs(logBlob, `${fileName}.ass`)
-      cockpitVideoDB.removeItem(fileName)
+      videoStore.videoRecoveryDB.removeItem(fileName)
     })
     chunks = []
     mediaRecorder.value = undefined

src/components/mini-widgets/ModeSelector.vue

@@ -7,7 +7,7 @@
 <script setup lang="ts">
 import { onMounted, onUnmounted, ref, watch } from 'vue'
 
-import { datalogger, DatalogVariable } from '@/libs/logging'
+import { datalogger, DatalogVariable } from '@/libs/sensors-logging'
 import { useMainVehicleStore } from '@/stores/mainVehicle'
 
 import Dropdown from '../Dropdown.vue'

src/components/mini-widgets/SatelliteIndicator.vue

@@ -9,7 +9,7 @@
 </template>
 
 <script setup lang="ts">
-import { datalogger, DatalogVariable } from '@/libs/logging'
+import { datalogger, DatalogVariable } from '@/libs/sensors-logging'
 import { useMainVehicleStore } from '@/stores/mainVehicle'
 
 datalogger.registerUsage(DatalogVariable.gpsFixType)

src/components/widgets/Attitude.vue

@@ -64,7 +64,7 @@ import { useWindowSize } from '@vueuse/core'
 import gsap from 'gsap'
 import { computed, nextTick, onBeforeMount, onMounted, reactive, ref, toRefs, watch } from 'vue'
 
-import { datalogger, DatalogVariable } from '@/libs/logging'
+import { datalogger, DatalogVariable } from '@/libs/sensors-logging'
 import { constrain, degrees, radians, resetCanvas, round } from '@/libs/utils'
 import { useMainVehicleStore } from '@/stores/mainVehicle'
 import type { Widget } from '@/types/widgets'

src/components/widgets/Compass.vue

@@ -26,7 +26,7 @@ import { computed, onBeforeMount, ref, toRefs } from 'vue'
 
 import Dialog from '@/components/Dialog.vue'
 import Dropdown from '@/components/Dropdown.vue'
-import { datalogger, DatalogVariable } from '@/libs/logging'
+import { datalogger, DatalogVariable } from '@/libs/sensors-logging'
 import { degrees, radians, resetCanvas, sequentialArray } from '@/libs/utils'
 import { useMainVehicleStore } from '@/stores/mainVehicle'
 import type { Widget } from '@/types/widgets'

src/components/widgets/CompassHUD.vue

@@ -41,7 +41,7 @@ import { colord } from 'colord'
 import gsap from 'gsap'
 import { computed, nextTick, onBeforeMount, onMounted, reactive, ref, toRefs, watch } from 'vue'
 
-import { datalogger, DatalogVariable } from '@/libs/logging'
+import { datalogger, DatalogVariable } from '@/libs/sensors-logging'
 import { degrees, radians, resetCanvas } from '@/libs/utils'
 import { useMainVehicleStore } from '@/stores/mainVehicle'
 import type { Widget } from '@/types/widgets'

src/components/widgets/DepthHUD.vue

@@ -33,7 +33,7 @@ import { colord } from 'colord'
 import gsap from 'gsap'
 import { computed, nextTick, onBeforeMount, onMounted, reactive, ref, toRefs, watch } from 'vue'
 
-import { datalogger, DatalogVariable } from '@/libs/logging'
+import { datalogger, DatalogVariable } from '@/libs/sensors-logging'
 import { constrain, range, resetCanvas, round } from '@/libs/utils'
 import { useMainVehicleStore } from '@/stores/mainVehicle'
 import type { Widget } from '@/types/widgets'

src/components/widgets/Map.vue

@@ -116,7 +116,7 @@ import type { Map } from 'leaflet'
 import Swal from 'sweetalert2'
 import { type Ref, computed, nextTick, onBeforeMount, onBeforeUnmount, ref, toRefs, watch } from 'vue'
 
-import { datalogger, DatalogVariable } from '@/libs/logging'
+import { datalogger, DatalogVariable } from '@/libs/sensors-logging'
 import { degrees } from '@/libs/utils'
 import { useMainVehicleStore } from '@/stores/mainVehicle'
 import { useMissionStore } from '@/stores/mission'

src/components/widgets/VirtualHorizon.vue

@@ -14,7 +14,7 @@ import { useElementSize } from '@vueuse/core'
 import gsap from 'gsap'
 import { computed, ref } from 'vue'
 
-import { datalogger, DatalogVariable } from '@/libs/logging'
+import { datalogger, DatalogVariable } from '@/libs/sensors-logging'
 import { degrees, radians, resetCanvas } from '@/libs/utils'
 import { useMainVehicleStore } from '@/stores/mainVehicle'
 

src/libs/logging.ts → src/libs/sensors-logging.ts

@@ -88,10 +88,10 @@ class DataLogger {
     const vehicleStore = useMainVehicleStore()
     const cockpitLogsDB = localforage.createInstance({
       driver: localforage.INDEXEDDB,
-      name: 'cockpitLogsDB',
-      storeName: 'cockpit-logs-db',
+      name: 'Cockpit - Sensor Logs',
+      storeName: 'cockpit-sensor-logs-db',
       version: 1.0,
-      description: 'Local backups of Cockpit logs to be retrieved in case of failure.',
+      description: 'Local backups of Cockpit sensor logs, to be retrieved in case of failure.',
     })
 
     const initialTime = new Date()

src/libs/system-logging.ts

@@ -0,0 +1,75 @@
+import { format } from 'date-fns'
+import localforage from 'localforage'
+
+export const cockpitSytemLogsDB = localforage.createInstance({
+  driver: localforage.INDEXEDDB,
+  name: 'Cockpit - System Logs',
+  storeName: 'cockpit-system-logs-db',
+  version: 1.0,
+  description: 'Local backups of Cockpit system logs, to be retrieved in case of failure.',
+})
+
+const initialTime = new Date()
+const fileName = `Cockpit (${format(initialTime, 'LLL dd, yyyy - HH꞉mm꞉ss O')}).syslog`
+
+/* eslint-disable jsdoc/require-jsdoc */
+type LogEvent = {
+  epoch: number
+  level: string
+  msg: string
+}
+
+const initialDatetime = new Date()
+export interface SystemLog {
+  initialDate: string
+  initialTime: string
+  events: LogEvent[]
+}
+
+const currentSystemLog: SystemLog = {
+  initialDate: format(initialDatetime, 'LLL dd, yyyy'),
+  initialTime: format(initialDatetime, 'HH꞉mm꞉ss O'),
+  events: [],
+}
+/* eslint-enable jsdoc/require-jsdoc */
+
+const saveLogEventInDB = (event: LogEvent): void => {
+  currentSystemLog.events.push(event)
+  cockpitSytemLogsDB.setItem(fileName, currentSystemLog)
+}
+
+const oldConsoleError = window.console.error
+window.console.error = (o) => {
+  oldConsoleError(o)
+  saveLogEventInDB({ epoch: new Date().getTime(), level: 'error', msg: o })
+}
+
+const oldConsoleWarn = window.console.warn
+window.console.warn = (o) => {
+  oldConsoleWarn(o)
+  saveLogEventInDB({ epoch: new Date().getTime(), level: 'warn', msg: o })
+}
+
+const oldConsoleInfo = window.console.info
+window.console.info = (o) => {
+  oldConsoleInfo(o)
+  saveLogEventInDB({ epoch: new Date().getTime(), level: 'info', msg: o })
+}
+
+const oldConsoleDebug = window.console.debug
+window.console.debug = (o) => {
+  oldConsoleDebug(o)
+  saveLogEventInDB({ epoch: new Date().getTime(), level: 'debug', msg: o })
+}
+
+const oldConsoleTrace = window.console.trace
+window.console.trace = (o) => {
+  oldConsoleTrace(o)
+  saveLogEventInDB({ epoch: new Date().getTime(), level: 'trace', msg: o })
+}
+
+const oldConsoleLog = window.console.log
+window.console.log = (o) => {
+  oldConsoleLog(o)
+  saveLogEventInDB({ epoch: new Date().getTime(), level: 'Log', msg: o })
+}

src/main.ts

@@ -1,5 +1,6 @@
 import 'floating-vue/dist/style.css'
 import 'vue-virtual-scroller/dist/vue-virtual-scroller.css'
+import '@/libs/system-logging'
 
 import { library } from '@fortawesome/fontawesome-svg-core'
 import { far } from '@fortawesome/free-regular-svg-icons'

src/stores/video.ts

@@ -10,15 +10,15 @@ export const useVideoStore = defineStore('video', () => {
   const allowedIceIps = useStorage<string[]>('cockpit-allowed-stream-ips', [])
 
   // Offer download of backuped videos
-  const cockpitVideoDB = localforage.createInstance({
+  const videoRecoveryDB = localforage.createInstance({
     driver: localforage.INDEXEDDB,
-    name: 'CockpitVideoDB',
-    storeName: 'cockpit-video-db',
+    name: 'Cockpit - Video Recovery',
+    storeName: 'cockpit-video-recovery-db',
     version: 1.0,
     description: 'Local backups of Cockpit video recordings to be retrieved in case of failure.',
   })
 
-  cockpitVideoDB.length().then((len) => {
+  videoRecoveryDB.length().then((len) => {
     if (len === 0) return
 
     Swal.fire({
@@ -37,13 +37,13 @@ export const useVideoStore = defineStore('video', () => {
     }).then((decision) => {
       if (decision.isDismissed) return
       if (decision.isDenied) {
-        cockpitVideoDB.iterate((_, videoName) => cockpitVideoDB.removeItem(videoName))
+        videoRecoveryDB.iterate((_, videoName) => videoRecoveryDB.removeItem(videoName))
       } else if (decision.isConfirmed) {
-        cockpitVideoDB.iterate((videoFile, videoName) => {
+        videoRecoveryDB.iterate((videoFile, videoName) => {
           const blob = (videoFile as Blob[]).reduce((a, b) => new Blob([a, b], { type: 'video/webm' }))
           saveAs(blob, videoName)
         })
-        cockpitVideoDB.iterate((_, videoName) => cockpitVideoDB.removeItem(videoName))
+        videoRecoveryDB.iterate((_, videoName) => videoRecoveryDB.removeItem(videoName))
       }
     })
   })
@@ -58,7 +58,7 @@ export const useVideoStore = defineStore('video', () => {
     if (availableIceIps.value.length >= 1) {
       Swal.fire({
         html: `
-          <p>Cockpit detected more than one IP address being used to route the video streaming. This often 
+          <p>Cockpit detected more than one IP address being used to route the video streaming. This often
           leads to video stuttering, especially if one of the IPs is from a non-wired connection.</p>
           </br>
           <p>To prevent issues and achieve an optimal streaming experience, please:</p>
@@ -76,5 +76,5 @@ export const useVideoStore = defineStore('video', () => {
     }
   }, 5000)
 
-  return { availableIceIps, allowedIceIps }
+  return { availableIceIps, allowedIceIps, videoRecoveryDB }
 })

src/views/ConfigurationDevelopmentView.vue

@@ -13,14 +13,63 @@
         step="1"
         thumb-label="always"
       />
+      <v-data-table :items="systemLogsData" :headers="headers" class="max-w-[80%] max-h-[60%]">
+        <template #item.actions="{ item }">
+          <div class="text-center cursor-pointer icon-btn mdi mdi-download" @click="downloadLog(item.name)" />
+        </template>
+      </v-data-table>
     </template>
   </BaseConfigurationView>
 </template>
 
 <script setup lang="ts">
+// @ts-nocheck
+// TODO:  As of now Vuetify does not export the necessary types for VDataTable, so we can't fix the type error.
+
+import { saveAs } from 'file-saver'
+import { onBeforeMount } from 'vue'
+import { ref } from 'vue'
+
+import { type SystemLog, cockpitSytemLogsDB } from '@/libs/system-logging'
 import { useDevelopmentStore } from '@/stores/development'
 
 import BaseConfigurationView from './BaseConfigurationView.vue'
-
 const devStore = useDevelopmentStore()
+
+/* eslint-disable jsdoc/require-jsdoc */
+interface SystemLogsData {
+  name: string
+  initialTime: string
+  initialDate: string
+  nEvents: number
+}
+/* eslint-enable jsdoc/require-jsdoc */
+
+const systemLogsData = ref<SystemLogsData[]>([])
+
+const headers = [
+  { title: 'Name', value: 'name' },
+  { title: 'Time (initial)', value: 'initialTime' },
+  { title: 'Date (initial)', value: 'initialDate' },
+  { title: 'N. events', value: 'nEvents' },
+  { title: 'Download', value: 'actions' },
+]
+
+onBeforeMount(async () => {
+  await cockpitSytemLogsDB.iterate((log: SystemLog, logName) => {
+    systemLogsData.value.push({
+      name: logName,
+      initialTime: log.initialTime,
+      initialDate: log.initialDate,
+      nEvents: log.events.length,
+    })
+  })
+})
+
+const downloadLog = async (logName: string): Promise<void> => {
+  const log = await cockpitSytemLogsDB.getItem(logName)
+  const logParts = JSON.stringify(log, null, 2)
+  const logBlob = new Blob([logParts], { type: 'application/json' })
+  saveAs(logBlob, logName)
+}
 </script>

src/views/ConfigurationLogsView.vue

@@ -17,7 +17,7 @@
 </template>
 
 <script setup lang="ts">
-import { datalogger, DatalogVariable } from '@/libs/logging'
+import { datalogger, DatalogVariable } from '@/libs/sensors-logging'
 
 import BaseConfigurationView from './BaseConfigurationView.vue'
 </script>