jjkiers/cloudron-box
1
0
Fork 0
Code Issues Pull Requests 1 Actions Packages Projects Releases Wiki Activity

Always fetch enough event logs to fill the screen

Browse Source
This commit is contained in:
Johannes Zellner
2025-11-19 16:08:22 +01:00
parent ede93323af
commit b53da61e7c
2 changed files with 44 additions and 28 deletions
Download Patch File Download Diff File Expand all files Collapse all files

43
dashboard/src/views/EventlogView.vue
View File

@@ -1,6 +1,6 @@
<script setup>
import { ref, reactive, onMounted, onUnmounted, watch } from 'vue';
import { ref, reactive, onMounted, onUnmounted, watch, useTemplateRef } from 'vue';
import { Button, TextInput, MultiSelect } from '@cloudron/pankow';
import { useDebouncedRef, copyToClipboard, prettyLongDate } from '@cloudron/pankow/utils';
import AppsModel from '../models/AppsModel.js';
@@ -90,6 +90,7 @@ const search = useDebouncedRef('');
const page = ref(1);
const perPage = ref(40);
const actions = reactive([]);
const eventlogContainer = useTemplateRef('eventlogContainer');
async function onRefresh() {
refreshBusy.value = true;
@@ -110,21 +111,23 @@ async function onRefresh() {
refreshBusy.value = false;
}
async function onScroll(event) {
if (event.target.scrollTop + event.target.clientHeight >= event.target.scrollHeight) {
page.value++;
const [error, result] = await eventlogsModel.search(actions.join(','), search.value, page.value, perPage.value);
if (error) return console.error(error);
async function fetchMore() {
page.value++;
const [error, result] = await eventlogsModel.search(actions.join(','), search.value, page.value, perPage.value);
if (error) return console.error(error);
eventlogs.value = eventlogs.value.concat(result.map(e => {
return {
id: Symbol(),
raw: e,
details: eventlogDetails(e, e.appId ? getApp(e.appId) : null),
source: eventlogSource(e, e.appId ? getApp(e.appId) : null)
};
}));
}
eventlogs.value = eventlogs.value.concat(result.map(e => {
return {
id: Symbol(),
raw: e,
details: eventlogDetails(e, e.appId ? getApp(e.appId) : null),
source: eventlogSource(e, e.appId ? getApp(e.appId) : null)
};
}));
}
async function onScroll(event) {
if (event.target.scrollTop + event.target.clientHeight >= event.target.scrollHeight) await fetchMore();
}
function onCopySource(eventlog) {
@@ -147,7 +150,13 @@ onMounted(async () => {
window.addEventListener('hashchange', onHashChange);
onHashChange();
if (!search.value) onRefresh();
if (!search.value) {
onRefresh();
while (eventlogContainer.value.scrollHeight <= eventlogContainer.value.offsetHeight) {
await fetchMore();
}
}
});
onUnmounted(() => {
@@ -168,7 +177,7 @@ onUnmounted(() => {
<Button tool secondary @click="onRefresh()" :loading="refreshBusy" icon="fa-solid fa-sync-alt" />
</div>
</h1>
<div class="section-body" style="overflow: auto; margin-top: 10px; padding-top: 0px" @scroll="onScroll">
<div class="section-body" ref="eventlogContainer" style="overflow: auto; margin-top: 10px; padding-top: 0px" @scroll="onScroll">
<table class="eventlog-table">
<thead>
<tr>