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')
+      // get logs
-      setTimeout(async () => await this.content.scrollToBottom(100), 200)
+      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()
+  }
 }

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 = {

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

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> {