ui: adds agent logs page in server show

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

@@ -0,0 +1,28 @@
+import { NgModule } from '@angular/core'
+import { CommonModule } from '@angular/common'
+import { Routes, RouterModule } from '@angular/router'
+
+import { IonicModule } from '@ionic/angular'
+
+import { ServerLogsPage } from './server-logs.page'
+import { PwaBackComponentModule } from 'src/app/components/pwa-back-button/pwa-back.component.module'
+import { BadgeMenuComponentModule } from 'src/app/components/badge-menu-button/badge-menu.component.module'
+
+const routes: Routes = [
+  {
+    path: '',
+    component: ServerLogsPage,
+  },
+]
+
+@NgModule({
+  imports: [
+    CommonModule,
+    IonicModule,
+    RouterModule.forChild(routes),
+    PwaBackComponentModule,
+    BadgeMenuComponentModule,
+  ],
+  declarations: [ServerLogsPage],
+})
+export class ServerLogsPageModule { }

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

@@ -0,0 +1,22 @@
+<ion-header>
+  <ion-toolbar>
+    <ion-buttons slot="start">
+      <pwa-back-button></pwa-back-button>
+    </ion-buttons>
+    <ion-title>Logs</ion-title>
+    <ion-buttons slot="end" class="ion-padding-end">
+      <ion-button (click)="getLogs()" color="primary">
+        <ion-icon name="refresh-outline"></ion-icon>
+      </ion-button>
+      <badge-menu-button></badge-menu-button>
+    </ion-buttons>
+  </ion-toolbar>
+</ion-header>
+
+<ion-content class="ion-padding" color="light">
+  <ion-item *ngIf="error" style="margin-bottom: 16px;">
+    <ion-text class="ion-text-wrap" color="danger">{{ error }}</ion-text>
+  </ion-item>
+  <ion-spinner *ngIf="$loading$ | async" class="center" name="lines" color="warning"></ion-spinner>
+  <p style="white-space: pre-line;">{{ logs }}</p>
+</ion-content>

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

@@ -0,0 +1,45 @@
+import { Component, ViewChild } from '@angular/core'
+import { ActivatedRoute } from '@angular/router'
+import { ApiService } from 'src/app/services/api/api.service'
+import { IonContent } from '@ionic/angular'
+import { pauseFor } from 'src/app/util/misc.util'
+import { markAsLoadingDuringP } from 'src/app/services/loader.service'
+import { BehaviorSubject } from 'rxjs'
+
+@Component({
+  selector: 'server-logs',
+  templateUrl: './server-logs.page.html',
+  styleUrls: ['./server-logs.page.scss'],
+})
+export class ServerLogsPage {
+  @ViewChild(IonContent, { static: false }) private content: IonContent
+  $loading$ = new BehaviorSubject(true)
+  error = ''
+  logs: string
+
+  constructor (
+    private readonly apiService: ApiService,
+  ) { }
+
+  async ngOnInit () {
+    markAsLoadingDuringP(this.$loading$, Promise.all([
+      this.getLogs(),
+      pauseFor(600),
+    ]))
+  }
+
+  async getLogs () {
+    this.logs = ''
+    this.$loading$.next(true)
+    try {
+      this.logs = await this.apiService.getServerLogs()
+      this.error = ''
+      setTimeout(async () => await this.content.scrollToBottom(100), 200)
+    } catch (e) {
+      console.error(e)
+      this.error = e.message
+    } finally {
+      this.$loading$.next(false)
+    }
+  }
+}

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

@@ -18,6 +18,11 @@ const routes: Routes = [
     canActivate: [AuthGuard],
     loadChildren: () => import('./server-metrics/server-metrics.module').then(m => m.ServerMetricsPageModule),
   },
+  {
+    path: 'logs',
+    canActivate: [AuthGuard],
+    loadChildren: () => import('./server-logs/server-logs.module').then(m => m.ServerLogsPageModule),
+  },
   {
     path: 'config',
     canActivate: [AuthGuard],

ui/src/app/pages/server-routes/server-show/server-show.page.html

@@ -47,6 +47,11 @@
         <ion-label><ion-text color="primary">Monitor</ion-text></ion-label>
       </ion-item>
 
+      <ion-item [routerLink]="['logs']">
+        <ion-icon slot="start" name="newspaper-outline" color="primary"></ion-icon>
+        <ion-label><ion-text color="primary">Logs</ion-text></ion-label>
+      </ion-item>
+
       <ion-item lines="none" [routerLink]="['config']">
         <ion-icon slot="start" name="cog-outline" color="primary"></ion-icon>
         <ion-label><ion-text color="primary">Config</ion-text></ion-label>