From 3d5ac47a82995f1f17594442c72d5f89ebbe2e0f Mon Sep 17 00:00:00 2001
From: Drew Ansbacher <drew.ansbacher@spiredigital.com>
Date: Sun, 22 Aug 2021 12:39:12 -0600
Subject: [PATCH] logs for server as well

---
 .../apps-routes/app-logs/app-logs.page.ts     |   7 +-
 .../server-logs/server-logs.page.html         |  15 ++-
 .../server-logs/server-logs.page.ts           |  38 ++++--
 ui/src/app/services/api/api.fixures.ts        | 108 ++++++++++++++++++
 ui/src/app/services/api/api.types.ts          |   4 +-
 .../services/api/embassy-mock-api.service.ts  |   9 +-
 6 files changed, 162 insertions(+), 19 deletions(-)

diff --git a/ui/src/app/pages/apps-routes/app-logs/app-logs.page.ts b/ui/src/app/pages/apps-routes/app-logs/app-logs.page.ts
index 619448d00..dcd600428 100644
--- a/ui/src/app/pages/apps-routes/app-logs/app-logs.page.ts
+++ b/ui/src/app/pages/apps-routes/app-logs/app-logs.page.ts
@@ -30,9 +30,12 @@ export class AppLogsPage {
 
   async getLogs () {
     try {
-
       // get logs
-      const logs = await this.embassyApi.getPackageLogs({ id: this.pkgId, pageLength: this.pageLength, page: this.page })
+      const logs = await this.embassyApi.getPackageLogs({
+        id: this.pkgId,
+        limit: this.pageLength,
+        page: this.page,
+      })
       this.firstTimeLoaded = true
 
       const container = document.getElementById('container')
diff --git a/ui/src/app/pages/server-routes/server-logs/server-logs.page.html b/ui/src/app/pages/server-routes/server-logs/server-logs.page.html
index 91bac3a84..0c56333f3 100644
--- a/ui/src/app/pages/server-routes/server-logs/server-logs.page.html
+++ b/ui/src/app/pages/server-routes/server-logs/server-logs.page.html
@@ -13,10 +13,15 @@
   </ion-toolbar>
 </ion-header>
 
-<ion-content class="ion-padding">
-  <text-spinner *ngIf="loading; else loaded" text="Loading Logs"></text-spinner>
+<ion-content id="ion-content" class="ion-padding">
+  <ion-infinite-scroll id="scroller" *ngIf="firstTimeLoaded && needInfinite" position="top" threshold="0" (ionInfinite)="loadData($event)">
+    <ion-infinite-scroll-content
+      loadingSpinner="bubbles">
+    </ion-infinite-scroll-content>
+  </ion-infinite-scroll>
+
+  <text-spinner *ngIf="!firstTimeLoaded" text="Loading Logs"></text-spinner>
+
+  <div id="container"><div id="template" style="white-space: pre-line;"></div></div>
 
-  <ng-template #loaded>
-    <p style="white-space: pre-line;">{{ logs }}</p>
-  </ng-template>
 </ion-content>
diff --git a/ui/src/app/pages/server-routes/server-logs/server-logs.page.ts b/ui/src/app/pages/server-routes/server-logs/server-logs.page.ts
index f844e78a1..cacfadeb7 100644
--- a/ui/src/app/pages/server-routes/server-logs/server-logs.page.ts
+++ b/ui/src/app/pages/server-routes/server-logs/server-logs.page.ts
@@ -12,6 +12,10 @@ export class ServerLogsPage {
   @ViewChild(IonContent, { static: false }) private content: IonContent
   loading = true
   logs: string
+  needInfinite = false
+  firstTimeLoaded = false
+  page = 1
+  pageLength = 20
 
   constructor (
     private readonly errToast: ErrorToastService,
@@ -23,16 +27,36 @@ export class ServerLogsPage {
   }
 
   async getLogs () {
-    this.logs = ''
-    this.loading = true
     try {
-      const logs = await this.embassyApi.getServerLogs({ })
-      this.logs = logs.map(l => `${l.timestamp} ${l.log}`).join('\n\n')
-      setTimeout(async () => await this.content.scrollToBottom(100), 200)
+      // get logs
+      const logs = await this.embassyApi.getServerLogs({
+        limit: this.pageLength,
+        page: this.page,
+      })
+
+      this.firstTimeLoaded = true
+
+      const container = document.getElementById('container')
+      const beforeContainerHeight = container.scrollHeight
+      const newLogs = document.getElementById('template').cloneNode(true) as HTMLElement
+      newLogs.innerHTML = logs.map(l => `${l.timestamp} ${l.log}`).join('\n\n') + '\n\n'
+      container.prepend(newLogs)
+      const afterContainerHeight = container.scrollHeight
+
+      // scroll down
+      scrollBy(0, afterContainerHeight - beforeContainerHeight)
+      this.content.scrollToPoint(0, afterContainerHeight - beforeContainerHeight)
+
+      const wrapper = document.getElementById('ion-content')
+      this.needInfinite = logs.length === this.pageLength
     } catch (e) {
       this.errToast.present(e)
-    } finally {
-      this.loading = false
     }
   }
+
+  async loadData (e: any): Promise<void> {
+    await this.getLogs()
+    this.page++
+    e.target.complete()
+  }
 }
diff --git a/ui/src/app/services/api/api.fixures.ts b/ui/src/app/services/api/api.fixures.ts
index 4172c81b6..39860c1d2 100644
--- a/ui/src/app/services/api/api.fixures.ts
+++ b/ui/src/app/services/api/api.fixures.ts
@@ -793,6 +793,114 @@ export module Mock {
       timestamp: '2019-12-26T14:22:30.872Z',
       log: '****** FINISH *****',
     },
+    {
+      timestamp: '2019-12-26T14:20:30.872Z',
+      log: '****** START *****',
+    },
+    {
+      timestamp: '2019-12-26T14:21:30.872Z',
+      log: 'ServerLogs ServerLogs ServerLogs ServerLogs ServerLogs',
+    },
+    {
+      timestamp: '2019-12-26T14:22:30.872Z',
+      log: '****** FINISH *****',
+    },
+    {
+      timestamp: '2019-12-26T14:20:30.872Z',
+      log: '****** START *****',
+    },
+    {
+      timestamp: '2019-12-26T14:21:30.872Z',
+      log: 'ServerLogs ServerLogs ServerLogs ServerLogs ServerLogs',
+    },
+    {
+      timestamp: '2019-12-26T14:22:30.872Z',
+      log: '****** FINISH *****',
+    },
+    {
+      timestamp: '2019-12-26T14:20:30.872Z',
+      log: '****** START *****',
+    },
+    {
+      timestamp: '2019-12-26T14:21:30.872Z',
+      log: 'ServerLogs ServerLogs ServerLogs ServerLogs ServerLogs',
+    },
+    {
+      timestamp: '2019-12-26T14:22:30.872Z',
+      log: '****** FINISH *****',
+    },
+    {
+      timestamp: '2019-12-26T14:20:30.872Z',
+      log: '****** START *****',
+    },
+    {
+      timestamp: '2019-12-26T14:21:30.872Z',
+      log: 'ServerLogs ServerLogs ServerLogs ServerLogs ServerLogs',
+    },
+    {
+      timestamp: '2019-12-26T14:22:30.872Z',
+      log: '****** FINISH *****',
+    },
+    {
+      timestamp: '2019-12-26T14:20:30.872Z',
+      log: '****** START *****',
+    },
+    {
+      timestamp: '2019-12-26T14:21:30.872Z',
+      log: 'ServerLogs ServerLogs ServerLogs ServerLogs ServerLogs',
+    },
+    {
+      timestamp: '2019-12-26T14:22:30.872Z',
+      log: '****** FINISH *****',
+    },
+    {
+      timestamp: '2019-12-26T14:20:30.872Z',
+      log: '****** START *****',
+    },
+    {
+      timestamp: '2019-12-26T14:21:30.872Z',
+      log: 'ServerLogs ServerLogs ServerLogs ServerLogs ServerLogs',
+    },
+    {
+      timestamp: '2019-12-26T14:22:30.872Z',
+      log: '****** FINISH *****',
+    },
+    {
+      timestamp: '2019-12-26T14:20:30.872Z',
+      log: '****** START *****',
+    },
+    {
+      timestamp: '2019-12-26T14:21:30.872Z',
+      log: 'ServerLogs ServerLogs ServerLogs ServerLogs ServerLogs',
+    },
+    {
+      timestamp: '2019-12-26T14:22:30.872Z',
+      log: '****** FINISH *****',
+    },
+    {
+      timestamp: '2019-12-26T14:20:30.872Z',
+      log: '****** START *****',
+    },
+    {
+      timestamp: '2019-12-26T14:21:30.872Z',
+      log: 'ServerLogs ServerLogs ServerLogs ServerLogs ServerLogs',
+    },
+    {
+      timestamp: '2019-12-26T14:22:30.872Z',
+      log: '****** FINISH *****',
+    },
+    {
+      timestamp: '2019-12-26T14:20:30.872Z',
+      log: '****** START *****',
+    },
+    {
+      timestamp: '2019-12-26T14:21:30.872Z',
+      log: 'ServerLogs ServerLogs ServerLogs ServerLogs ServerLogs',
+    },
+    {
+      timestamp: '2019-12-26T14:22:30.872Z',
+      log: '****** FINISH *****',
+    },
   ]
 
   export const PackageLogs: RR.GetPackageLogsRes = [
diff --git a/ui/src/app/services/api/api.types.ts b/ui/src/app/services/api/api.types.ts
index 4a0883087..898368c89 100644
--- a/ui/src/app/services/api/api.types.ts
+++ b/ui/src/app/services/api/api.types.ts
@@ -27,7 +27,7 @@ export module RR {
   export type SetShareStatsReq = WithExpire<{ value: any }> // server.config.share-stats
   export type SetShareStatsRes = WithRevision<null>
 
-  export type GetServerLogsReq = { before?: string } // server.logs
+  export type GetServerLogsReq = { before?: string, limit: number, page: number } // server.logs
   export type GetServerLogsRes = Log[]
 
   export type GetServerMetricsReq = { } // server.metrics
@@ -137,7 +137,7 @@ export module RR {
   export type GetPackagePropertiesReq = { id: string } // package.properties
   export type GetPackagePropertiesRes<T extends number> = PackagePropertiesVersioned<T>
 
-  export type GetPackageLogsReq = { page: number, pageLength: number, id: string, before?: string } // package.logs
+  export type GetPackageLogsReq = { page: number, limit: number, id: string, before?: string } // package.logs
   export type GetPackageLogsRes = Log[]
 
   export type GetPackageMetricsReq = { id: string } // package.metrics
diff --git a/ui/src/app/services/api/embassy-mock-api.service.ts b/ui/src/app/services/api/embassy-mock-api.service.ts
index 507f97cf9..a1ecaeb84 100644
--- a/ui/src/app/services/api/embassy-mock-api.service.ts
+++ b/ui/src/app/services/api/embassy-mock-api.service.ts
@@ -75,7 +75,10 @@ export class MockApiService extends ApiService {
 
   async getServerLogs (params: RR.GetServerLogsReq): Promise<RR.GetServerLogsRes> {
     await pauseFor(2000)
-    return Mock.ServerLogs
+    if (params.page === 4) {
+      return (Mock.ServerLogs as []).slice(0, params.limit - 3)
+    }
+    return Mock.ServerLogs.slice(0, params.limit)
   }
 
   async getServerMetrics (params: RR.GetServerMetricsReq): Promise<RR.GetServerMetricsRes> {
@@ -311,9 +314,9 @@ export class MockApiService extends ApiService {
   async getPackageLogs (params: RR.GetPackageLogsReq): Promise<RR.GetPackageLogsRes> {
     await pauseFor(2000)
     if (params.page === 4) {
-      return (Mock.PackageLogs as []).slice(0, 2)
+      return (Mock.PackageLogs as []).slice(0, params.limit - 5)
     }
-    return Mock.PackageLogs.slice(0, params.pageLength)
+    return Mock.PackageLogs.slice(0, params.limit)
   }
 
   async installPackageRaw (params: RR.InstallPackageReq): Promise<RR.InstallPackageRes> {