inf scroll up

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

@@ -13,9 +13,15 @@
   </ion-toolbar>
 </ion-header>
 
-<ion-content class="ion-padding">
+<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="!logs" text="Loading Logs"></text-spinner>
+  <text-spinner *ngIf="!firstTimeLoaded" text="Loading Logs"></text-spinner>
+
+  <div id="container"><div id="template" style="white-space: pre-line;"></div></div>
 
-  <div style="white-space: pre-line;">{{ logs }}</div>
 </ion-content>

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

@@ -11,8 +11,11 @@ import { ErrorToastService } from 'src/app/services/error-toast.service'
 })
 export class AppLogsPage {
   @ViewChild(IonContent, { static: false }) private content: IonContent
+  page = 1
   pkgId: string
-  logs = ''
+  firstTimeLoaded = false
+  needInfinite = false
+  pageLength = 20
 
   constructor (
     private readonly route: ActivatedRoute,
@@ -26,14 +29,33 @@ export class AppLogsPage {
   }
 
   async getLogs () {
-    this.logs = ''
-
     try {
-      const logs = await this.embassyApi.getPackageLogs({ id: this.pkgId })
-      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.getPackageLogs({ id: this.pkgId, pageLength: 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)
     }
   }
+
+  async loadData (e: any): Promise<void> {
+    await this.getLogs()
+    this.page++
+    e.target.complete()
+  }
 }