diff --git a/ui/src/app/components/logs/logs.page.ts b/ui/src/app/components/logs/logs.page.ts index 9e097363b..1e2bf2429 100644 --- a/ui/src/app/components/logs/logs.page.ts +++ b/ui/src/app/components/logs/logs.page.ts @@ -1,7 +1,7 @@ import { Component, Input, ViewChild } from '@angular/core' import { IonContent } from '@ionic/angular' import { ErrorToastService } from 'src/app/services/error-toast.service' -import { Log } from 'src/app/services/api/api.types' +import { RR } from 'src/app/services/api/api.types' @Component({ selector: 'logs', @@ -10,13 +10,13 @@ import { Log } from 'src/app/services/api/api.types' }) export class LogsPage { @ViewChild(IonContent) private content: IonContent - @Input() fetchLogs: (params: { before?: string, after?: string, limit: number }) => Promise + @Input() fetchLogs: (params: { before_flag?: boolean, limit?: number, cursor?: string }) => Promise loading = true loadingMore = false logs: string needInfinite = true - before: string - after: string + startCursor: string + endCursor: string limit = 200 scrollToBottomButton = false isOnBottom = true @@ -31,16 +31,22 @@ export class LogsPage { async fetch (isBefore: boolean = true) { try { - const logs = await this.fetchLogs({ - before: isBefore ? this.before : undefined, - after: !isBefore ? this.after : undefined, + const cursor = isBefore ? this.startCursor : this.endCursor + const logsRes = await this.fetchLogs({ + cursor, + before_flag: !!cursor ? isBefore : undefined, limit: this.limit, }) - this.before = logs[0]?.timestamp - this.after = logs[logs.length - 1]?.timestamp + + if (isBefore && logsRes.startCursor) { + this.startCursor = logsRes.startCursor + } + if (!isBefore && logsRes.endCursor) { + this.endCursor = logsRes.endCursor + } this.loading = false - return logs + return logsRes.logs } catch (e) { this.errToast.present(e) } @@ -50,8 +56,6 @@ export class LogsPage { try { // get logs const logs = await this.fetch() - this.before = logs[0].timestamp - const container = document.getElementById('container') const beforeContainerHeight = container.scrollHeight const newLogs = document.getElementById('template').cloneNode(true) as HTMLElement 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 b68841f4a..b7f6d4305 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 @@ -17,12 +17,12 @@ export class AppLogsPage { ) { } fetchFetchLogs (): Function { - return async (params: { after?: string, before?: string, limit: number }) => { + return async (params: { before_flag?: boolean, limit?: number, cursor?: string }) => { const pkgId = this.pkgId return this.embassyApi.getPackageLogs({ id: pkgId, - after: params.after, - before: params.before, + before_flag: params.before_flag, + cursor: params.cursor, limit: params.limit, }) } 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 2fe2826c8..f5c7132b0 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 @@ -17,10 +17,10 @@ export class ServerLogsPage { ) { } fetchFetchLogs (): Function { - return async (params: { before?: string, after?: string, limit: number }) => { + return async (params: { before_flag?: boolean, limit?: number, cursor?: string }) => { return this.embassyApi.getServerLogs({ - after: params.after, - before: params.before, + before_flag: params.before_flag, + cursor: params.cursor, limit: params.limit, }) } diff --git a/ui/src/app/services/api/api.fixures.ts b/ui/src/app/services/api/api.fixures.ts index 9bd69a8f5..b4e523794 100644 --- a/ui/src/app/services/api/api.fixures.ts +++ b/ui/src/app/services/api/api.fixures.ts @@ -1,5 +1,5 @@ import { DependencyErrorType, DockerIoFormat, Manifest, PackageDataEntry, PackageMainStatus, PackageState } from 'src/app/services/patch-db/data-model' -import { MarketplacePkg, Metric, NotificationLevel, RR, ServerNotifications } from './api.types' +import { Log, MarketplacePkg, Metric, NotificationLevel, RR, ServerNotifications } from './api.types' export module Mock { @@ -782,7 +782,7 @@ export module Mock { return metr } - export const ServerLogs: RR.GetServerLogsRes = [ + export const ServerLogs: Log[] = [ { timestamp: '2019-12-26T14:20:30.872Z', log: '****** START *****', @@ -797,7 +797,7 @@ export module Mock { }, ] - export const PackageLogs: RR.GetPackageLogsRes = [ + export const PackageLogs: Log[] = [ { timestamp: '2019-12-26T14:20:30.872Z', log: '****** START *****', diff --git a/ui/src/app/services/api/api.types.ts b/ui/src/app/services/api/api.types.ts index 4c87c6240..6386ec236 100644 --- a/ui/src/app/services/api/api.types.ts +++ b/ui/src/app/services/api/api.types.ts @@ -27,8 +27,8 @@ export module RR { export type SetShareStatsReq = WithExpire<{ value: any }> // server.config.share-stats export type SetShareStatsRes = WithRevision - export type GetServerLogsReq = { before?: string, after?: string, limit?: number } // server.logs - export type GetServerLogsRes = Log[] + export type GetServerLogsReq = { cursor?: string, before_flag?: boolean, limit?: number } + export type GetServerLogsRes = LogsRes export type GetServerMetricsReq = { } // server.metrics export type GetServerMetricsRes = Metrics @@ -137,8 +137,10 @@ export module RR { export type GetPackagePropertiesReq = { id: string } // package.properties export type GetPackagePropertiesRes = PackagePropertiesVersioned - export type GetPackageLogsReq = { id: string, limit?: number, before?: string, after?: string } // package.logs - export type GetPackageLogsRes = Log[] + export type LogsRes = { logs: Log[], startCursor?: string, endCursor?: string } + + export type GetPackageLogsReq = { id: string, cursor?: string, before_flag?: boolean, limit?: number } // package.logs + export type GetPackageLogsRes = LogsRes export type GetPackageMetricsReq = { id: string } // package.metrics export type GetPackageMetricsRes = Metric 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 b79f6feb2..3a9fbdfd6 100644 --- a/ui/src/app/services/api/embassy-mock-api.service.ts +++ b/ui/src/app/services/api/embassy-mock-api.service.ts @@ -75,12 +75,19 @@ export class MockApiService extends ApiService { async getServerLogs (params: RR.GetServerLogsReq): Promise { await pauseFor(2000) + let logArr if (Math.random() < .2) { console.log('last page') - return Mock.ServerLogs + logArr = Mock.ServerLogs + } else { + const arrLength = params.limit ? Math.ceil(params.limit / Mock.ServerLogs.length) : 10 + logArr = new Array(arrLength).fill(Mock.ServerLogs).reduce((acc, val) => acc.concat(val), []) + } + return { + logs: logArr, + startCursor: 'startCursor', + endCursor: 'endCursor', } - const arrLength = params.limit ? Math.ceil(params.limit / Mock.ServerLogs.length) : 10 - return new Array(arrLength).fill(Mock.ServerLogs).reduce((acc, val) => acc.concat(val), []) } async getServerMetrics (params: RR.GetServerMetricsReq): Promise { @@ -315,12 +322,19 @@ export class MockApiService extends ApiService { async getPackageLogs (params: RR.GetPackageLogsReq): Promise { await pauseFor(2000) + let logArr if (Math.random() < .2) { console.log('last page') - return Mock.PackageLogs + logArr = Mock.PackageLogs + } else { + const arrLength = params.limit ? Math.ceil(params.limit / Mock.PackageLogs.length) : 10 + logArr = new Array(arrLength).fill(Mock.PackageLogs).reduce((acc, val) => acc.concat(val), []) + } + return { + logs: logArr, + startCursor: 'startCursor', + endCursor: 'endCursor', } - const arrLength = params.limit ? Math.ceil(params.limit / Mock.PackageLogs.length) : 10 - return new Array(arrLength).fill(Mock.PackageLogs).reduce((acc, val) => acc.concat(val), []) } async installPackageRaw (params: RR.InstallPackageReq): Promise {