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

Fix up email event log view to use fetch on scroll instead of pagination

Browse Source
This commit is contained in:
Johannes Zellner
2025-04-11 18:34:52 +02:00
parent 0b9b0e7f13
commit da7934555c
6 changed files with 216 additions and 132 deletions
Download Patch File Download Diff File Expand all files Collapse all files
dashboard/src/views/EmailsEventlogView.vue
+117 -98
View File
@@ -1,13 +1,8 @@
<script setup>
import { useI18n } from 'vue-i18n';
const i18n = useI18n();
const t = i18n.t;
import { ref, reactive, onMounted, watch } from 'vue';
import { Button, ButtonGroup, SingleSelect, Spinner, TextInput, MultiSelect } from 'pankow';
import { Button, TextInput, MultiSelect } from 'pankow';
import { useDebouncedRef, prettyDate, prettyLongDate, prettyEmailAddresses } from 'pankow/utils';
import Section from '../components/Section.vue';
import MailModel from '../models/MailModel.js';
const mailModel = MailModel.create();
@@ -23,13 +18,6 @@ const availableTypes = [
{ id: 'spam', name: 'Spam' },
];
const perPageOptions = [
{ name: t('main.pagination.perPageSelector', { n: 20 }), value: 20 },
{ name: t('main.pagination.perPageSelector', { n: 50 }), value: 50 },
{ name: t('main.pagination.perPageSelector', { n: 100 }), value: 100 }
];
const busy = ref(false);
const refreshBusy = ref(false);
const eventlogs = ref([]);
const activeId = ref('');
@@ -54,15 +42,15 @@ function onEventLogDetails(id) {
else activeId.value = id;
}
async function onPrevPage() {
if (page.value > 1) page.value--;
else page.value = 1;
await onRefresh();
}
async function onScroll(event) {
if (event.target.scrollTop + event.target.clientHeight >= event.target.scrollHeight) {
page.value++;
async function onNextPage() {
page.value++;
await onRefresh();
const [error, result] = await mailModel.eventlog(types.join(','), search.value, page.value, perPage.value);
if (error) return console.error(error);
eventlogs.value = result;
}
}
watch(perPage, onRefresh);
@@ -70,96 +58,120 @@ watch(types, onRefresh);
watch(search, onRefresh);
onMounted(async () => {
busy.value = true;
await onRefresh();
busy.value = false;
});
</script>
<template>
<div class="content">
<Section :title="$t('emails.eventlog.title')">
<template #header-buttons>
<TextInput :placeholder="$t('main.searchPlaceholder')" style="flex-grow: 1;" v-model="search"/>
<MultiSelect v-model="types" :options="availableTypes" option-key="id" option-label="name" :selected-label="types.length ? $t('main.multiselect.selected', { n: types.length }) : $t('emails.typeFilterHeader')"/>
<Button href="/logs.html?id=mail" target="_blank">{{ $t('main.action.logs') }}</Button>
</template>
<!-- TODO replace with fetch more on scroll -->
<div class="eventlog-filter">
<SingleSelect v-model="perPage" :options="perPageOptions" option-key="value" option-label="name"/>
<ButtonGroup>
<Button tool secondary @click="onPrevPage()" :disabled="busy || page <= 1" icon="fa-solid fa-angle-double-left" v-tooltip="$t('main.pagination.prev')" />
<div class="content" style="height: 100%; overflow: hidden; display: flex; flex-direction: column;">
<!-- cant use Section component as we need control over vertical scrolling -->
<div class="section" style="overflow: hidden; display: flex; flex-direction: column;">
<h2 class="section-header">
{{ $t('emails.eventlog.title') }}
<div>
<TextInput :placeholder="$t('main.searchPlaceholder')" style="flex-grow: 1;" v-model="search"/>
<MultiSelect v-model="types" :options="availableTypes" option-key="id" option-label="name" :selected-label="types.length ? $t('main.multiselect.selected', { n: types.length }) : $t('emails.typeFilterHeader')"/>
<Button tool secondary @click="onRefresh()" :loading="refreshBusy" icon="fa-solid fa-sync-alt" />
<Button tool secondary @click="onNextPage()" :disabled="busy || perPage > eventlogs.length" icon="fa-solid fa-angle-double-right" v-tooltip="$t('main.pagination.next')" />
</ButtonGroup>
<Button href="/logs.html?id=mail" target="_blank">{{ $t('main.action.logs') }}</Button>
</div>
</h2>
<div class="section-body" style="overflow: auto; padding-top: 0" @scroll="onScroll">
<table class="eventlog-table">
<thead>
<tr>
<th style="width: 5%"><!-- Icon --></th>
<th style="width: 15%">{{ $t('emails.eventlog.time') }}</th>
<th style="width: 25%">{{ $t('emails.eventlog.mailFrom') }}</th>
<th style="width: 25%">{{ $t('emails.eventlog.rcptTo') }}</th>
<th style="width: 30%">{{ $t('emails.eventlog.details') }}</th>
</tr>
</thead>
<tbody>
<template v-for="eventlog in eventlogs" :key="eventlog._id">
<tr @click="onEventLogDetails(eventlog._id)" :class="{ 'active': activeId === eventlog._id }" >
<td class="no-wrap">
<i class="fas fa-arrow-circle-left" v-if="eventlog.type === 'delivered'" v-tooltip="$t('emails.eventlog.type.outgoing')"></i>
<i class="fas fa-history" v-if="eventlog.type === 'deferred'" v-tooltip="$t('emails.eventlog.type.deferred')"></i>
<i class="fas fa-arrow-circle-right" v-if="eventlog.type === 'received'" v-tooltip="$t('emails.eventlog.type.incoming')"></i>
<i class="fas fa-align-justify" v-if="eventlog.type === 'queued' && eventlog.spamStatus && eventlog.spamStatus.indexOf('Yes,') !== 0" v-tooltip="$t('emails.eventlog.type.queued')"></i>
<i class="fas fa-trash" v-if="eventlog.type === 'queued' && eventlog.spamStatus && eventlog.spamStatus.indexOf('Yes,') === 0" v-tooltip="$t('emails.eventlog.type.queued')"></i>
<i class="fas fa-minus-circle" v-if="eventlog.type === 'denied'" v-tooltip="$t('emails.eventlog.type.denied')"></i>
<i class="fas fa-hand-paper" v-if="eventlog.type === 'bounce'" v-tooltip="$t('emails.eventlog.type.bounce')"></i>
<i class="fas fa-filter" v-if="eventlog.type === 'spam-learn'" v-tooltip="$t('emails.eventlog.type.spamFilterTrained')"></i>
<i class="fas fa-fill-drip" v-if="eventlog.type === 'quota'" v-tooltip="$t('emails.eventlog.type.quota')"></i>
</td>
<td class="no-wrap"><span v-tooltip="prettyLongDate(eventlog.ts)" class="arrow">{{ prettyDate(eventlog.ts) }}</span></td>
<td class="elide-table-cell">{{ prettyEmailAddresses(eventlog.mailFrom) || '-' }}</td>
<td class="elide-table-cell">{{ prettyEmailAddresses(eventlog.rcptTo) || eventlog.mailbox || '-' }}</td>
<td>
<span v-if="eventlog.type === 'bounce'">{{ $t('emails.eventlog.type.bounceInfo') }}. {{ eventlog.message || eventlog.reason }}</span>
<span v-if="eventlog.type === 'deferred'">{{ $t('emails.eventlog.type.deferredInfo', { delay:eventlog.delay }) }}. {{ eventlog.message || eventlog.reason }} </span>
<span v-if="eventlog.type === 'queued'">
<span v-if="eventlog.direction === 'inbound'">{{ $t('emails.eventlog.type.inboundInfo') }}</span>
<span v-if="eventlog.direction === 'outbound'">{{ $t('emails.eventlog.type.outboundInfo') }}</span>
</span>
<span v-if="eventlog.type === 'received'">{{ $t('emails.eventlog.type.receivedInfo') }}</span>
<span v-if="eventlog.type === 'delivered'">{{ $t('emails.eventlog.type.deliveredInfo') }}</span>
<span v-if="eventlog.type === 'denied'">{{ $t('emails.eventlog.type.deniedInfo') }}. {{ eventlog.message || eventlog.reason }} </span>
<span v-if="eventlog.type === 'spam-learn'">{{ $t('emails.eventlog.type.spamFilterTrainedInfo') }}</span>
<span v-if="eventlog.type === 'quota'">
<span v-if="eventlog.quotaPercent > 0">{{ $t('emails.eventlog.type.overQuotaInfo', { mailbox: eventlog.mailbox, quotaPercent: eventlog.quotaPercent }) }}</span>
<span v-if="eventlog.quotaPercent < 0">{{ $t('emails.eventlog.type.underQuotaInfo', { mailbox: eventlog.mailbox, quotaPercent: -eventlog.quotaPercent }) }}</span>
</span>
</td>
</tr>
<tr v-if="activeId === eventlog._id">
<td colspan="6" class="eventlog-details">
<pre>{{ JSON.stringify(eventlog, null, 4) }}</pre>
</td>
</tr>
</template>
</tbody>
</table>
</div>
<!-- TODO style table -->
<center v-show="busy"><Spinner class="pankow-spinner-large" /></center>
<table v-show="!busy" class="table table-condensed table-hover">
<thead>
<tr>
<th style="width: 5%"><!-- Icon --></th>
<th style="width: 15%">{{ $t('emails.eventlog.time') }}</th>
<th style="width: 25%">{{ $t('emails.eventlog.mailFrom') }}</th>
<th style="width: 25%">{{ $t('emails.eventlog.rcptTo') }}</th>
<th style="width: 30%">{{ $t('emails.eventlog.details') }}</th>
</tr>
</thead>
<tbody>
<template v-for="eventlog in eventlogs" :key="eventlog.uuid">
<tr @click="onEventLogDetails(eventlog.uuid)" class="hand" >
<td class="no-wrap">
<i class="fas fa-arrow-circle-left" v-if="eventlog.type === 'delivered'" v-tooltip="$t('emails.eventlog.type.outgoing')"></i>
<i class="fas fa-history" v-if="eventlog.type === 'deferred'" v-tooltip="$t('emails.eventlog.type.deferred')"></i>
<i class="fas fa-arrow-circle-right" v-if="eventlog.type === 'received'" v-tooltip="$t('emails.eventlog.type.incoming')"></i>
<i class="fas fa-align-justify" v-if="eventlog.type === 'queued' && eventlog.spamStatus && eventlog.spamStatus.indexOf('Yes,') !== 0" v-tooltip="$t('emails.eventlog.type.queued')"></i>
<i class="fas fa-trash" v-if="eventlog.type === 'queued' && eventlog.spamStatus && eventlog.spamStatus.indexOf('Yes,') === 0" v-tooltip="$t('emails.eventlog.type.queued')"></i>
<i class="fas fa-minus-circle" v-if="eventlog.type === 'denied'" v-tooltip="$t('emails.eventlog.type.denied')"></i>
<i class="fas fa-hand-paper" v-if="eventlog.type === 'bounce'" v-tooltip="$t('emails.eventlog.type.bounce')"></i>
<i class="fas fa-filter" v-if="eventlog.type === 'spam-learn'" v-tooltip="$t('emails.eventlog.type.spamFilterTrained')"></i>
<i class="fas fa-fill-drip" v-if="eventlog.type === 'quota'" v-tooltip="$t('emails.eventlog.type.quota')"></i>
</td>
<td class="no-wrap"><span v-tooltip="prettyLongDate(eventlog.ts)" class="arrow">{{ prettyDate(eventlog.ts) }}</span></td>
<td class="elide-table-cell">{{ prettyEmailAddresses(eventlog.mailFrom) || '-' }}</td>
<td class="elide-table-cell">{{ prettyEmailAddresses(eventlog.rcptTo) || eventlog.mailbox || '-' }}</td>
<td>
<span v-if="eventlog.type === 'bounce'">{{ $t('emails.eventlog.type.bounceInfo') }}. {{ eventlog.message || eventlog.reason }}</span>
<span v-if="eventlog.type === 'deferred'">{{ $t('emails.eventlog.type.deferredInfo', { delay:eventlog.delay }) }}. {{ eventlog.message || eventlog.reason }} </span>
<span v-if="eventlog.type === 'queued'">
<span v-if="eventlog.direction === 'inbound'">{{ $t('emails.eventlog.type.inboundInfo') }}</span>
<span v-if="eventlog.direction === 'outbound'">{{ $t('emails.eventlog.type.outboundInfo') }}</span>
</span>
<span v-if="eventlog.type === 'received'">{{ $t('emails.eventlog.type.receivedInfo') }}</span>
<span v-if="eventlog.type === 'delivered'">{{ $t('emails.eventlog.type.deliveredInfo') }}</span>
<span v-if="eventlog.type === 'denied'">{{ $t('emails.eventlog.type.deniedInfo') }}. {{ eventlog.message || eventlog.reason }} </span>
<span v-if="eventlog.type === 'spam-learn'">{{ $t('emails.eventlog.type.spamFilterTrainedInfo') }}</span>
<span v-if="eventlog.type === 'quota'">
<span v-if="eventlog.quotaPercent > 0">{{ $t('emails.eventlog.type.overQuotaInfo', { mailbox: eventlog.mailbox, quotaPercent: eventlog.quotaPercent }) }}</span>
<span v-if="eventlog.quotaPercent < 0">{{ $t('emails.eventlog.type.underQuotaInfo', { mailbox: eventlog.mailbox, quotaPercent: -eventlog.quotaPercent }) }}</span>
</span>
</td>
</tr>
<tr v-if="activeId === eventlog.uuid">
<td colspan="6">
<pre class="eventlog-details">{{ JSON.stringify(eventlog, null, 4) }}</pre>
</td>
</tr>
</template>
</tbody>
</table>
</Section>
</div>
</div>
</template>
<style scoped>
.eventlog-table {
width: 100%;
overflow: auto;
border-spacing: 0px;
}
.eventlog-table thead {
background-color: var(--pankow-body-background-color);
top: 0;
position: sticky;
z-index: 1; /* avoids see-through table headers if items in the table have opacity set */
}
.eventlog-table th {
text-align: left;
}
.eventlog-table tbody tr {
cursor: pointer;
}
.eventlog-table tbody tr.active,
.eventlog-table tbody tr:hover {
background-color: var(--pankow-color-background-hover);
}
.eventlog-table tbody tr.active {
font-weight: bold;
}
.eventlog-table th,
.eventlog-table td {
padding: 5px;
}
.eventlog-filter {
display: flex;
gap: 5px;
@@ -168,9 +180,16 @@ onMounted(async () => {
}
.eventlog-details {
background-color: var(--pankow-color-background-hover);
cursor: auto;
}
.eventlog-details pre {
white-space: pre-wrap;
color: var(--pankow-text-color);
background-color: var(--pankow-input-background-color);
font-size: 13px;
padding: 6px;
margin: 0;
border: none;
border-radius: var(--pankow-border-radius);
}
dashboard/src/views/EventlogView.vue
+1 -6
View File
@@ -83,7 +83,6 @@ const availableActions = [
{ id: 'volume.remove' },
];
const busy = ref(false);
const refreshBusy = ref(false);
const apps = ref([]);
const eventlogs = ref([]);
@@ -136,14 +135,11 @@ watch(actions, onRefresh);
watch(search, onRefresh);
onMounted(async () => {
busy.value = true;
const [error, result] = await appsModel.list();
if (error) console.error(error);
else apps.value = result;
await onRefresh();
busy.value = false;
});
</script>
@@ -161,8 +157,7 @@ onMounted(async () => {
</div>
</h2>
<div class="section-body" style="overflow: auto; padding-top: 0" @scroll="onScroll">
<center v-show="busy"><Spinner class="pankow-spinner-large" /></center>
<table v-show="!busy" class="eventlog-table">
<table class="eventlog-table">
<thead>
<tr>
<th>{{ $t('eventlog.time') }}</th>