logs for server as well

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')

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>

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()
+  }
 }