frontend: Add integration with linux2rest journal

Signed-off-by: Patrick José Pereira <[email protected]>

Author: patrickelectric

core/frontend/src/components/system-information/Journal.vue

@@ -0,0 +1,106 @@
+<template>
+  <v-container fluid>
+    <v-row>
+      <v-col>
+        <v-sheet
+          min-height="70vh"
+          rounded="lg"
+        >
+          <v-card elevation="0">
+            <v-virtual-scroll
+              :item-height="20"
+              :items="entries"
+              height="700px"
+            >
+              <template #default="{ item }">
+                <v-list-item>
+                  <v-list-item-content>
+                    <v-list-item-title
+                      class="pa-0"
+                      :class="priorityClass(item.priority)"
+                    >
+                      {{ formatTimestamp(item.timestamp) }}
+                      [{{ priorityLabel(item.priority) }}]
+                      <span v-if="sourceLabel(item)">{{ sourceLabel(item) }}:</span>
+                      {{ item.message }}
+                    </v-list-item-title>
+                  </v-list-item-content>
+                </v-list-item>
+              </template>
+            </v-virtual-scroll>
+          </v-card>
+        </v-sheet>
+      </v-col>
+    </v-row>
+  </v-container>
+</template>
+
+<script lang="ts">
+import Vue from 'vue'
+
+import system_information, { FetchType } from '@/store/system-information'
+import { JournalEntry } from '@/types/system-information/journal'
+
+export default Vue.extend({
+  name: 'Journal',
+  computed: {
+    entries(): JournalEntry[] {
+      return system_information?.journal_entries ?? []
+    },
+  },
+  created() {
+    system_information.fetchSystemInformation(FetchType.JournalType)
+  },
+  methods: {
+    formatTimestamp(value?: string): string {
+      if (!value) {
+        return 'Unknown time'
+      }
+      const date = new Date(value)
+      if (Number.isNaN(date.getTime())) {
+        return value
+      }
+      return date.toLocaleString()
+    },
+    sourceLabel(entry: JournalEntry): string | null {
+      if (entry.identifier) {
+        return entry.identifier
+      }
+      return null
+    },
+    priorityLabel(priority?: number): string {
+      const map: Record<number, string> = {
+        0: 'Emergency',
+        1: 'Alert',
+        2: 'Critical',
+        3: 'Error',
+        4: 'Warning',
+        5: 'Notice',
+        6: 'Info',
+        7: 'Debug',
+      }
+      if (priority === undefined || priority === null) {
+        return map[6]
+      }
+      return map[priority] ?? map[6]
+    },
+    priorityClass(priority?: number): string {
+      const priorityColors: Record<number, string> = {
+        0: 'red darken-4 white--text',
+        1: 'deep-orange darken-3 white--text',
+        2: 'pink darken-2 white--text',
+        3: 'red darken-1 white--text',
+        4: 'amber darken-2 black--text',
+        5: 'cyan darken-1 white--text',
+        6: 'indigo lighten-5 black--text',
+        7: 'green darken-3 white--text',
+      }
+      // eslint-disable-next-line eqeqeq
+      if (priority == undefined) {
+        return priorityColors[6]
+      }
+      return priorityColors[priority] ?? priorityColors[6]
+    },
+  },
+})
+</script>

core/frontend/src/store/system-information.ts

@@ -11,6 +11,7 @@ import { OneMoreTime } from '@/one-more-time'
 import store from '@/store'
 import { system_information_service } from '@/types/frontend_services'
 import { KernelMessage } from '@/types/system-information/kernel'
+import { JournalEntry, JournalResponse } from '@/types/system-information/journal'
 import { Model } from '@/types/system-information/model'
 import { Netstat } from '@/types/system-information/netstat'
 import { Platform } from '@/types/system-information/platform'
@@ -22,6 +23,7 @@ import back_axios, { isBackendOffline } from '@/utils/api'
 
 export enum FetchType {
     KernelType = 'kernel_buffer',
+    JournalType = 'journal',
     ModelType = 'model',
     NetstatType = 'netstat',
     PlatformType = 'platform',
@@ -49,6 +51,8 @@ class SystemInformationStore extends VuexModule {
 
   kernel_message: KernelMessage[] = []
 
+  journal_entries: JournalEntry[] = []
+
   model: Model | null = null
 
   netstat: Netstat | null = null
@@ -78,6 +82,11 @@ class SystemInformationStore extends VuexModule {
     this.kernel_message = this.kernel_message.concat(kernel_message)
   }
 
+  @Mutation
+  appendJournalEntries(response: JournalResponse): void {
+    this.journal_entries = this.journal_entries.concat(response.entries)
+  }
+
   @Mutation
   updateModel(model: Model): void {
     this.model = model
@@ -88,6 +97,11 @@ class SystemInformationStore extends VuexModule {
     this.kernel_message = kernel_message
   }
 
+  @Mutation
+  updateJournalEntries(response: JournalResponse): void {
+    this.journal_entries = response.entries
+  }
+
   @Mutation
   updateNetstat(netstat: Netstat): void {
     this.netstat = netstat
@@ -269,6 +283,10 @@ class SystemInformationStore extends VuexModule {
           case FetchType.KernelType:
             this.updateKernelMessage(response.data)
             break
+          case FetchType.JournalType: {
+            this.updateJournalEntries(response.data)
+            break
+          }
           case FetchType.ModelType:
             this.updateModel(response.data)
             break
@@ -339,4 +357,13 @@ socket.onmessage = (message) => {
   system_information.appendKernelMessage(JSON.parse(message.data))
 }
 
+const journalWebsocketUrl = `${protocol}://${window.location.host}${system_information.API_URL}/ws/journal`
+const journalSocket = new WebSocket(journalWebsocketUrl)
+journalSocket.onmessage = (message) => {
+  const payload = JSON.parse(message.data)
+  system_information.appendJournalEntries(payload)
+}
+
+system_information.fetchSystemInformation(FetchType.JournalType)
+
 export default system_information

core/frontend/src/types/system-information/journal.ts

@@ -0,0 +1,10 @@
+export interface JournalEntry {
+    cursor?: string,
+    timestamp?: string,
+    priority?: number,
+    identifier?: string,
+    unit?: string,
+    pid?: number,
+    hostname?: string,
+    message: string,
+}

core/frontend/src/views/SystemInformationView.vue

@@ -26,6 +26,7 @@
         <system-condition v-else-if="page.value === 'system_condition'" />
         <network v-else-if="page.value === 'network'" />
         <kernel v-else-if="page.value === 'kernel'" />
+        <journal v-else-if="page.value === 'journal'" />
         <firmware v-else-if="page.value === 'firmware'" />
         <about-this-system v-else-if="page.value === 'about'" />
       </v-tab-item>
@@ -38,6 +39,7 @@ import Vue from 'vue'
 
 import AboutThisSystem from '@/components/system-information/AboutThisSystem.vue'
 import Firmware from '@/components/system-information/Firmware.vue'
+import Journal from '@/components/system-information/Journal.vue'
 import Kernel from '@/components/system-information/Kernel.vue'
 import Network from '@/components/system-information/Network.vue'
 import Processes from '@/components/system-information/Processes.vue'
@@ -56,6 +58,7 @@ export default Vue.extend({
   components: {
     AboutThisSystem,
     Firmware,
+    Journal,
     Kernel,
     Network,
     Processes,
@@ -71,6 +74,9 @@ export default Vue.extend({
         {
           title: 'Kernel', icon: 'mdi-text-long', value: 'kernel', is_pirate: true,
         },
+        {
+          title: 'Journal', icon: 'mdi-notebook-outline', value: 'journal', is_pirate: true,
+        },
         {
           title: 'Firmware', icon: 'mdi-raspberry-pi', value: 'firmware', is_pirate: true,
         },