Add kernel output in system-information

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

@@ -0,0 +1,79 @@
+<template>
+  <v-container fluid>
+    <v-row>
+      <v-col>
+        <v-sheet
+          min-height="70vh"
+          rounded="lg"
+        >
+          <v-card>
+            <v-virtual-scroll
+              :item-height="20"
+              :items="messages"
+              height="700px"
+            >
+              <template #default="{ item }">
+                <v-list-item>
+                  <!--
+                    TODO: text-wrap is not possible until https://github.com/vuetifyjs/vuetify/issues/11755 gets fixed
+                  -->
+                  <v-list-item-title
+                    class="pa-0"
+                    :class="getClass(item)"
+                  >
+                    {{ item.sequence_number }}
+                    [{{ item.facility }}]
+                    ({{ (item.timestamp_from_system_start_ns/1e9).toFixed(6) }}):
+                    {{ item.message }}
+                  </v-list-item-title>
+                </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 from '@/store/system-information'
+import { Dictionary } from '@/types/common'
+import { KernelMessage } from '@/types/system-information/kernel'
+
+export default Vue.extend({
+  name: 'Processes',
+  data() {
+    return {
+    }
+  },
+  computed: {
+    messages() {
+      return system_information?.kernel_message
+    },
+  },
+  methods: {
+    getClass(message: KernelMessage): string {
+      const level_color = {
+        Emergency: 'red darken-1 white--text',
+        Alert: 'deep-orange darken-4 white--text',
+        Critical: 'red darken-4 white--text',
+        Error: 'red',
+        Warning: 'deep-orange white--text',
+        Notice: 'blue-grey darken-1',
+        Info: 'indigo lighten-5',
+        Debug: 'green darken-4 white--text',
+      } as Dictionary<string>
+
+      if (level_color[message.level]) {
+        const color = level_color[message.level]
+        return color
+      }
+
+      return ''
+    },
+  },
+})
+</script>

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

@@ -37,8 +37,15 @@ class SystemInformationStore extends VuexModule {
 
   platform: Platform | null = null;
 
+  socket: WebSocket | null = null;
+
   system: System | null = null;
 
+  @Mutation
+  appendKernelMessage(kernel_message: KernelMessage): void {
+    this.kernel_message.push(kernel_message)
+  }
+
   @Mutation
   updateKernelMessage(kernel_message: KernelMessage[]): void {
     this.kernel_message = kernel_message
@@ -119,4 +126,13 @@ const system_information: SystemInformationStore = getModule(SystemInformationSt
 callPeriodically(system_information.fetchSystem, 5000)
 callPeriodically(system_information.fetchPlatform, 5000)
 
+// It appears that the store is incompatible with websockets or callbacks.
+// Right now the only way to have it working is to have the websocket definition outside the store
+const protocol = window.location.protocol === 'https:' ? 'wss' : 'ws'
+const websocketUrl = `${protocol}://${window.location.host}${system_information.API_URL}/ws/kernel_buffer?start=0`
+const socket = new WebSocket(websocketUrl)
+socket.onmessage = (message) => {
+  system_information.appendKernelMessage(JSON.parse(message.data))
+}
+
 export default system_information

core/frontend/src/views/SystemInformationView.vue

@@ -21,7 +21,7 @@
               rounded
             >
               <v-list-item
-                v-for="item in items"
+                v-for="item in pages"
                 :key="item.title"
                 link
                 :input-value="item.value == page_selected"
@@ -47,6 +47,7 @@
         <processes v-if="page_selected == 'process'" />
         <system-condition v-if="page_selected == 'system_condition'" />
         <network v-if="page_selected == 'network'" />
+        <kernel v-if="page_selected == 'kernel'" />
         <about-this-system v-if="page_selected == 'about'" />
       </v-col>
     </v-row>
@@ -57,28 +58,48 @@
 import Vue from 'vue'
 
 import AboutThisSystem from '@/components/system-information/AboutThisSystem.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'
 import SystemCondition from '@/components/system-information/SystemCondition.vue'
+import settings from '@/libs/settings'
+
+export interface Item {
+    title: string,
+    icon: string,
+    value: string,
+    is_pirate?: boolean,
+}
 
 export default Vue.extend({
   name: 'SystemInformationView',
   components: {
     AboutThisSystem,
+    Kernel,
     Network,
     Processes,
     SystemCondition,
   },
   data() {
     return {
+      settings,
       items: [
         { title: 'Processes', icon: 'mdi-view-dashboard', value: 'process' },
         { title: 'System Condition', icon: 'mdi-speedometer', value: 'system_condition' },
         { title: 'Network', icon: 'mdi-ip-network-outline', value: 'network' },
+        {
+          title: 'Kernel', icon: 'mdi-text-subject', value: 'kernel', is_pirate: true,
+        },
         { title: 'About', icon: 'mdi-information', value: 'about' },
-      ],
+      ] as Item[],
       page_selected: 'process',
     }
   },
+  computed: {
+    pages(): Item[] {
+      return this.items
+        .filter((item: Item) => item?.is_pirate !== true || this.settings.is_pirate_mode)
+    },
+  },
 })
 </script>