config-dev-view: Allow user to download system logs

Author: rafaellehmkuhl

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>