diff --git a/ui/src/app/components/badge-menu-button/badge-menu.component.module.ts b/ui/src/app/components/badge-menu-button/badge-menu.component.module.ts index 0a2c247fc..d417a457f 100644 --- a/ui/src/app/components/badge-menu-button/badge-menu.component.module.ts +++ b/ui/src/app/components/badge-menu-button/badge-menu.component.module.ts @@ -2,7 +2,6 @@ import { NgModule } from '@angular/core' import { CommonModule } from '@angular/common' import { BadgeMenuComponent } from './badge-menu.component' import { IonicModule } from '@ionic/angular' -import { RouterModule } from '@angular/router' import { SharingModule } from 'src/app/modules/sharing.module' @NgModule({ @@ -12,7 +11,6 @@ import { SharingModule } from 'src/app/modules/sharing.module' imports: [ CommonModule, IonicModule, - RouterModule.forChild([]), SharingModule, ], exports: [BadgeMenuComponent], diff --git a/ui/src/app/components/logs/logs.module.ts b/ui/src/app/components/logs/logs.module.ts new file mode 100644 index 000000000..d68a287ce --- /dev/null +++ b/ui/src/app/components/logs/logs.module.ts @@ -0,0 +1,16 @@ +import { NgModule } from '@angular/core' +import { CommonModule } from '@angular/common' +import { IonicModule } from '@ionic/angular' +import { LogsPage } from './logs.page' +import { SharingModule } from 'src/app/modules/sharing.module' + +@NgModule({ + declarations: [LogsPage], + imports: [ + CommonModule, + IonicModule, + SharingModule, + ], + exports: [LogsPage], +}) +export class LogsPageModule { } diff --git a/ui/src/app/components/logs/logs.page.html b/ui/src/app/components/logs/logs.page.html new file mode 100644 index 000000000..640826f1a --- /dev/null +++ b/ui/src/app/components/logs/logs.page.html @@ -0,0 +1,42 @@ + + + + + + + + +
+
+
+
+ + Load More + + + +
+ +
+ + + +
+ + diff --git a/ui/src/app/components/logs/logs.page.scss b/ui/src/app/components/logs/logs.page.scss new file mode 100644 index 000000000..e69de29bb diff --git a/ui/src/app/components/logs/logs.page.ts b/ui/src/app/components/logs/logs.page.ts new file mode 100644 index 000000000..119ba22e3 --- /dev/null +++ b/ui/src/app/components/logs/logs.page.ts @@ -0,0 +1,95 @@ +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' + +@Component({ + selector: 'logs', + templateUrl: './logs.page.html', + styleUrls: ['./logs.page.scss'], +}) +export class LogsPage { + @ViewChild(IonContent) private content: IonContent + @Input() fetchLogs: (params: { before?: string, after?: string, limit: number }) => Promise + loading = true + loadingMore = false + logs: string + needInfinite = true + before: string + after: string + limit = 200 + scrollToBottomButton = false + isOnBottom = true + + constructor ( + private readonly errToast: ErrorToastService, + ) { } + + ngOnInit () { + this.getLogs() + } + + async fetch (isBefore: boolean = true) { + const logs = await this.fetchLogs({ + before: isBefore ? this.before : undefined, + after: !isBefore ? this.after : undefined, + limit: this.limit, + }) + this.before = logs[0]?.timestamp + this.after = logs[logs.length - 1]?.timestamp + this.loading = false + + return logs + } + + async getLogs () { + 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 + newLogs.innerHTML = logs.map(l => `${l.timestamp} ${l.log}`).join('\n\n') + (logs.length ? '\n\n' : '') + container.prepend(newLogs) + const afterContainerHeight = container.scrollHeight + + // scroll down + scrollBy(0, afterContainerHeight - beforeContainerHeight) + this.content.scrollToPoint(0, afterContainerHeight - beforeContainerHeight) + + if (logs.length < this.limit) { + this.needInfinite = false + } + + } catch (e) { + this.errToast.present(e) + } + } + + async loadMore () { + this.loadingMore = true + const logs = await this.fetch(false) + const container = document.getElementById('container') + const newLogs = document.getElementById('template').cloneNode(true) as HTMLElement + newLogs.innerHTML = logs.map(l => `${l.timestamp} ${l.log}`).join('\n\n') + (logs.length ? '\n\n' : '') + container.append(newLogs) + this.loadingMore = false + this.scrollEvent() + } + + scrollEvent () { + const buttonDiv = document.getElementById('button-div') + this.isOnBottom = buttonDiv.getBoundingClientRect().top < window.innerHeight + } + + scrollToBottom () { + this.content.scrollToBottom(500) + } + + async loadData (e: any): Promise { + await this.getLogs() + e.target.complete() + } +} diff --git a/ui/src/app/pages/apps-routes/app-logs/app-logs.module.ts b/ui/src/app/pages/apps-routes/app-logs/app-logs.module.ts index 5bbab85a2..7128ecd66 100644 --- a/ui/src/app/pages/apps-routes/app-logs/app-logs.module.ts +++ b/ui/src/app/pages/apps-routes/app-logs/app-logs.module.ts @@ -4,6 +4,7 @@ import { Routes, RouterModule } from '@angular/router' import { IonicModule } from '@ionic/angular' import { AppLogsPage } from './app-logs.page' import { SharingModule } from 'src/app/modules/sharing.module' +import { LogsPageModule } from 'src/app/components/logs/logs.module' const routes: Routes = [ { @@ -18,6 +19,7 @@ const routes: Routes = [ IonicModule, RouterModule.forChild(routes), SharingModule, + LogsPageModule, ], declarations: [AppLogsPage], }) 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 e89b73e9a..26a46af2e 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 @@ -4,24 +4,9 @@ Logs - - - - Refresh - - - - - - - - - - -
- - \ No newline at end of file +
+ +
\ 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 48a1f61c4..b68841f4a 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 @@ -1,8 +1,5 @@ -import { Component, ViewChild } from '@angular/core' -import { ActivatedRoute } from '@angular/router' +import { Component } from '@angular/core' import { ApiService } from 'src/app/services/api/embassy-api.service' -import { IonContent } from '@ionic/angular' -import { ErrorToastService } from 'src/app/services/error-toast.service' @Component({ selector: 'app-logs', @@ -10,68 +7,24 @@ import { ErrorToastService } from 'src/app/services/error-toast.service' styleUrls: ['./app-logs.page.scss'], }) export class AppLogsPage { - @ViewChild(IonContent, { static: false }) private content: IonContent pkgId: string loading = true needInfinite = true before: string constructor ( - private readonly route: ActivatedRoute, - private readonly errToast: ErrorToastService, private readonly embassyApi: ApiService, ) { } - async ngOnInit () { - this.pkgId = this.route.snapshot.paramMap.get('pkgId') - this.getLogs() - } - - async refresh () { - this.before = undefined - this.loading = true - const container = document.getElementById('container') - const newLogs = document.getElementById('template').cloneNode(true) as HTMLElement - while (container.firstChild) { container.removeChild(container.firstChild) } - container.append(newLogs) - this.getLogs() - } - - async getLogs () { - const limit = 200 - try { - // get logs - const logs = await this.embassyApi.getPackageLogs({ - id: this.pkgId, - before: this.before, - limit, + fetchFetchLogs (): Function { + return async (params: { after?: string, before?: string, limit: number }) => { + const pkgId = this.pkgId + return this.embassyApi.getPackageLogs({ + id: pkgId, + after: params.after, + before: params.before, + limit: params.limit, }) - - this.before = logs[0].timestamp - - 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') + (logs.length ? '\n\n' : '') - container.prepend(newLogs) - const afterContainerHeight = container.scrollHeight - - // scroll down - scrollBy(0, afterContainerHeight - beforeContainerHeight) - this.content.scrollToPoint(0, afterContainerHeight - beforeContainerHeight) - - if (logs.length < limit) { - this.needInfinite = false - } - } catch (e) { - this.errToast.present(e) - } finally { - this.loading = false } } - - async loadData (e: any): Promise { - await this.getLogs() - e.target.complete() - } } diff --git a/ui/src/app/pages/server-routes/server-logs/server-logs.module.ts b/ui/src/app/pages/server-routes/server-logs/server-logs.module.ts index 25408d076..d8c95bf02 100644 --- a/ui/src/app/pages/server-routes/server-logs/server-logs.module.ts +++ b/ui/src/app/pages/server-routes/server-logs/server-logs.module.ts @@ -4,6 +4,7 @@ import { Routes, RouterModule } from '@angular/router' import { IonicModule } from '@ionic/angular' import { ServerLogsPage } from './server-logs.page' import { SharingModule } from 'src/app/modules/sharing.module' +import { LogsPageModule } from 'src/app/components/logs/logs.module' const routes: Routes = [ { @@ -18,6 +19,7 @@ const routes: Routes = [ IonicModule, RouterModule.forChild(routes), SharingModule, + LogsPageModule, ], declarations: [ServerLogsPage], }) diff --git a/ui/src/app/pages/server-routes/server-logs/server-logs.page.html b/ui/src/app/pages/server-routes/server-logs/server-logs.page.html index 0c56333f3..26a46af2e 100644 --- a/ui/src/app/pages/server-routes/server-logs/server-logs.page.html +++ b/ui/src/app/pages/server-routes/server-logs/server-logs.page.html @@ -4,24 +4,9 @@ Logs - - - - Refresh - - - - - - - - - - -
- - +
+ +
\ No newline at end of file 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 8c0680ddb..2fe2826c8 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 @@ -1,7 +1,5 @@ -import { Component, ViewChild } from '@angular/core' +import { Component } from '@angular/core' import { ApiService } from 'src/app/services/api/embassy-api.service' -import { IonContent } from '@ionic/angular' -import { ErrorToastService } from 'src/app/services/error-toast.service' @Component({ selector: 'server-logs', @@ -9,53 +7,22 @@ import { ErrorToastService } from 'src/app/services/error-toast.service' styleUrls: ['./server-logs.page.scss'], }) export class ServerLogsPage { - @ViewChild(IonContent, { static: false }) private content: IonContent + pkgId: string loading = true - logs: string needInfinite = true - firstTimeLoaded = false before: string constructor ( - private readonly errToast: ErrorToastService, private readonly embassyApi: ApiService, ) { } - ngOnInit () { - this.getLogs() - } - - async getLogs () { - const limit = 200 - try { - // get logs - const logs = await this.embassyApi.getServerLogs({ before: this.before, limit }) - this.before = logs[0].timestamp - - 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') + (logs.length ? '\n\n' : '') - container.prepend(newLogs) - const afterContainerHeight = container.scrollHeight - - // scroll down - scrollBy(0, afterContainerHeight - beforeContainerHeight) - this.content.scrollToPoint(0, afterContainerHeight - beforeContainerHeight) - - if (logs.length < limit) { - this.needInfinite = false - } - - } catch (e) { - this.errToast.present(e) + fetchFetchLogs (): Function { + return async (params: { before?: string, after?: string, limit: number }) => { + return this.embassyApi.getServerLogs({ + after: params.after, + before: params.before, + limit: params.limit, + }) } } - - async loadData (e: any): Promise { - await this.getLogs() - e.target.complete() - } } diff --git a/ui/src/app/services/api/api.types.ts b/ui/src/app/services/api/api.types.ts index 14f81e85c..4c87c6240 100644 --- a/ui/src/app/services/api/api.types.ts +++ b/ui/src/app/services/api/api.types.ts @@ -27,7 +27,7 @@ export module RR { export type SetShareStatsReq = WithExpire<{ value: any }> // server.config.share-stats export type SetShareStatsRes = WithRevision - export type GetServerLogsReq = { before?: string, limit?: number } // server.logs + export type GetServerLogsReq = { before?: string, after?: string, limit?: number } // server.logs export type GetServerLogsRes = Log[] export type GetServerMetricsReq = { } // server.metrics @@ -137,7 +137,7 @@ export module RR { export type GetPackagePropertiesReq = { id: string } // package.properties export type GetPackagePropertiesRes = PackagePropertiesVersioned - export type GetPackageLogsReq = { id: string, limit?: number, before?: string } // package.logs + export type GetPackageLogsReq = { id: string, limit?: number, before?: string, after?: string } // package.logs export type GetPackageLogsRes = Log[] export type GetPackageMetricsReq = { id: string } // package.metrics