From 0adead02980c7cce014a12bbec2981b3d0510a1d Mon Sep 17 00:00:00 2001
From: Drew Ansbacher <drew.ansbacher@spiredigital.com>
Date: Sat, 21 Aug 2021 16:45:40 -0600
Subject: [PATCH] inf scroll up

---
 .../apps-routes/app-logs/app-logs.page.html   | 12 ++-
 .../apps-routes/app-logs/app-logs.page.ts     | 34 ++++++--
 ui/src/app/services/api/api.fixures.ts        | 84 +++++++++++++++++++
 ui/src/app/services/api/api.types.ts          |  2 +-
 .../services/api/embassy-mock-api.service.ts  |  5 +-
 5 files changed, 126 insertions(+), 11 deletions(-)

diff --git a/ui/src/app/pages/apps-routes/app-logs/app-logs.page.html b/ui/src/app/pages/apps-routes/app-logs/app-logs.page.html
index c0ac91722..59193bdaa 100644
--- a/ui/src/app/pages/apps-routes/app-logs/app-logs.page.html
+++ b/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>
\ No newline at end of file
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 f899702c6..619448d00 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
@@ -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()
+  }
 }
diff --git a/ui/src/app/services/api/api.fixures.ts b/ui/src/app/services/api/api.fixures.ts
index 55835bcc5..4172c81b6 100644
--- a/ui/src/app/services/api/api.fixures.ts
+++ b/ui/src/app/services/api/api.fixures.ts
@@ -808,6 +808,90 @@ 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: 'PackageLogs PackageLogs PackageLogs PackageLogs PackageLogs',
+    },
+    {
+      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: 'PackageLogs PackageLogs PackageLogs PackageLogs PackageLogs',
+    },
+    {
+      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: 'PackageLogs PackageLogs PackageLogs PackageLogs PackageLogs',
+    },
+    {
+      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: 'PackageLogs PackageLogs PackageLogs PackageLogs PackageLogs',
+    },
+    {
+      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: 'PackageLogs PackageLogs PackageLogs PackageLogs PackageLogs',
+    },
+    {
+      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: 'PackageLogs PackageLogs PackageLogs PackageLogs PackageLogs',
+    },
+    {
+      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: 'PackageLogs PackageLogs PackageLogs PackageLogs PackageLogs',
+    },
+    {
+      timestamp: '2019-12-26T14:22:30.872Z',
+      log: '****** FINISH *****',
+    },
   ]
 
   export const Sessions: RR.GetSessionsRes = {
diff --git a/ui/src/app/services/api/api.types.ts b/ui/src/app/services/api/api.types.ts
index 25ae6cb8b..4a0883087 100644
--- a/ui/src/app/services/api/api.types.ts
+++ b/ui/src/app/services/api/api.types.ts
@@ -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 = { id: string, before?: string } // package.logs
+  export type GetPackageLogsReq = { page: number, pageLength: 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 bf1b0c861..507f97cf9 100644
--- a/ui/src/app/services/api/embassy-mock-api.service.ts
+++ b/ui/src/app/services/api/embassy-mock-api.service.ts
@@ -310,7 +310,10 @@ export class MockApiService extends ApiService {
 
   async getPackageLogs (params: RR.GetPackageLogsReq): Promise<RR.GetPackageLogsRes> {
     await pauseFor(2000)
-    return Mock.PackageLogs
+    if (params.page === 4) {
+      return (Mock.PackageLogs as []).slice(0, 2)
+    }
+    return Mock.PackageLogs.slice(0, params.pageLength)
   }
 
   async installPackageRaw (params: RR.InstallPackageReq): Promise<RR.InstallPackageRes> {