add kernel log display to server show page

frontend/projects/ui/src/app/pages/server-routes/kernel-logs/kernel-logs.module.ts

@@ -0,0 +1,26 @@
+import { NgModule } from '@angular/core'
+import { CommonModule } from '@angular/common'
+import { Routes, RouterModule } from '@angular/router'
+import { IonicModule } from '@ionic/angular'
+import { KernelLogsPage } from './kernel-logs.page'
+import { SharedPipesModule } from '@start9labs/shared'
+import { LogsPageModule } from 'src/app/components/logs/logs.module'
+
+const routes: Routes = [
+  {
+    path: '',
+    component: KernelLogsPage,
+  },
+]
+
+@NgModule({
+  imports: [
+    CommonModule,
+    IonicModule,
+    RouterModule.forChild(routes),
+    SharedPipesModule,
+    LogsPageModule,
+  ],
+  declarations: [KernelLogsPage],
+})
+export class KernelLogsPageModule {}

frontend/projects/ui/src/app/pages/server-routes/kernel-logs/kernel-logs.page.html

@@ -0,0 +1,12 @@
+<ion-header>
+  <ion-toolbar>
+    <ion-buttons slot="start">
+      <ion-back-button defaultHref="embassy"></ion-back-button>
+    </ion-buttons>
+    <ion-title>Kernel Logs</ion-title>
+  </ion-toolbar>
+</ion-header>
+
+<div style="height: 100%">
+  <logs [fetchLogs]="fetchFetchLogs()"></logs>
+</div>

frontend/projects/ui/src/app/pages/server-routes/kernel-logs/kernel-logs.page.ts

@@ -0,0 +1,30 @@
+import { Component } from '@angular/core'
+import { ApiService } from 'src/app/services/api/embassy-api.service'
+
+@Component({
+  selector: 'kernel-logs',
+  templateUrl: './kernel-logs.page.html',
+  styleUrls: ['./kernel-logs.page.scss'],
+})
+export class KernelLogsPage {
+  pkgId: string
+  loading = true
+  needInfinite = true
+  before: string
+
+  constructor(private readonly embassyApi: ApiService) {}
+
+  fetchFetchLogs() {
+    return async (params: {
+      before_flag?: boolean
+      limit?: number
+      cursor?: string
+    }) => {
+      return this.embassyApi.getKernelLogs({
+        before_flag: params.before_flag,
+        cursor: params.cursor,
+        limit: params.limit,
+      })
+    }
+  }
+}

frontend/projects/ui/src/app/pages/server-routes/server-logs/server-logs.page.html

@@ -3,10 +3,10 @@
     <ion-buttons slot="start">
       <ion-back-button defaultHref="embassy"></ion-back-button>
     </ion-buttons>
-    <ion-title>Logs</ion-title>
+    <ion-title>OS Logs</ion-title>
   </ion-toolbar>
 </ion-header>
 
 <div style="height: 100%">
   <logs [fetchLogs]="fetchFetchLogs()"></logs>
-</div>
+</div>

frontend/projects/ui/src/app/pages/server-routes/server-routing.module.ts

@@ -27,6 +27,13 @@ const routes: Routes = [
         m => m.ServerLogsPageModule,
       ),
   },
+  {
+    path: 'kernel-logs',
+    loadChildren: () =>
+      import('./kernel-logs/kernel-logs.module').then(
+        m => m.KernelLogsPageModule,
+      ),
+  },
   {
     path: 'marketplaces',
     loadChildren: () =>

frontend/projects/ui/src/app/pages/server-routes/server-show/server-show.page.ts

@@ -345,14 +345,25 @@ export class ServerShowPage {
         disabled: of(false),
       },
       {
-        title: 'Logs',
-        description: 'Raw, unfiltered device logs',
+        title: 'OS Logs',
+        description: 'Raw, unfiltered operating system logs',
         icon: 'newspaper-outline',
         action: () =>
           this.navCtrl.navigateForward(['logs'], { relativeTo: this.route }),
         detail: true,
         disabled: of(false),
       },
+      {
+        title: 'Kernel Logs',
+        description: 'Diagnostic log stream for device drivers',
+        icon: 'receipt-outline',
+        action: () =>
+          this.navCtrl.navigateForward(['kernel-logs'], {
+            relativeTo: this.route,
+          }),
+        detail: true,
+        disabled: of(false),
+      },
     ],
     Support: [
       {

frontend/projects/ui/src/app/services/api/embassy-api.service.ts

@@ -56,6 +56,10 @@ export abstract class ApiService
     params: RR.GetServerLogsReq,
   ): Promise<RR.GetServerLogsRes>
 
+  abstract getKernelLogs(
+    params: RR.GetServerLogsReq,
+  ): Promise<RR.GetServerLogsRes>
+
   abstract getServerMetrics(
     params: RR.GetServerMetricsReq,
   ): Promise<RR.GetServerMetricsRes>

frontend/projects/ui/src/app/services/api/embassy-live-api.service.ts

@@ -63,6 +63,12 @@ export class LiveApiService extends ApiService {
     return this.http.rpcRequest({ method: 'server.logs', params })
   }
 
+  async getKernelLogs(
+    params: RR.GetServerLogsReq,
+  ): Promise<RR.GetServerLogsRes> {
+    return this.http.rpcRequest({ method: 'server.kernel-logs', params })
+  }
+
   async getServerMetrics(
     params: RR.GetServerMetricsReq,
   ): Promise<RR.GetServerMetricsRes> {

frontend/projects/ui/src/app/services/api/embassy-mock-api.service.ts

@@ -112,6 +112,28 @@ export class MockApiService extends ApiService {
     }
   }
 
+  async getKernelLogs(
+    params: RR.GetServerLogsReq,
+  ): Promise<RR.GetServerLogsRes> {
+    await pauseFor(2000)
+    let entries: Log[]
+    if (Math.random() < 0.2) {
+      entries = Mock.ServerLogs
+    } else {
+      const arrLength = params.limit
+        ? Math.ceil(params.limit / Mock.ServerLogs.length)
+        : 10
+      entries = new Array(arrLength)
+        .fill(Mock.ServerLogs)
+        .reduce((acc, val) => acc.concat(val), [])
+    }
+    return {
+      entries,
+      'start-cursor': 'startCursor',
+      'end-cursor': 'endCursor',
+    }
+  }
+
   async getServerMetrics(
     params: RR.GetServerMetricsReq,
   ): Promise<RR.GetServerMetricsRes> {