Start9/start-os
2
0
Fork 0
mirror of https://github.com/Start9Labs/start-os.git synced 2026-03-30 12:11:56 +00:00
Code Issues Packages Projects Releases Wiki Activity

inf scroll up

Browse Source
This commit is contained in:
Drew Ansbacher
2021-08-21 16:45:40 -06:00
committed by Matt Hill
parent 9c723dba3c
commit 69db42959d
5 changed files with 126 additions and 11 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

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

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

@@ -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()
}
}

84
ui/src/app/services/api/api.fixures.ts
View File

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

2
ui/src/app/services/api/api.types.ts
View File

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

5
ui/src/app/services/api/embassy-mock-api.service.ts
View File

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