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

Split up Email views

Browse Source
This commit is contained in:
Johannes Zellner
2025-04-16 17:59:03 +02:00
parent ec20fb453b
commit 024d057e03
7 changed files with 265 additions and 211 deletions
Download Patch File Download Diff File Expand all files Collapse all files

197
dashboard/src/views/EmailEventlogView.vue Normal file
View File

@@ -0,0 +1,197 @@
<script setup>
import { ref, reactive, onMounted, watch } from 'vue';
import { Button, TextInput, MultiSelect } from 'pankow';
import { useDebouncedRef, prettyDate, prettyLongDate, prettyEmailAddresses } from 'pankow/utils';
import MailModel from '../models/MailModel.js';
const mailModel = MailModel.create();
const availableTypes = [
{ id: 'bounce', name: 'Bounce' },
{ id: 'deferred', name: 'Deferred' },
{ id: 'delivered', name: 'Delivered' },
{ id: 'denied', name: 'Denied' },
{ id: 'queued', name: 'Queued' },
{ id: 'quota', name: 'Quota' },
{ id: 'received', name: 'Received' },
{ id: 'spam', name: 'Spam' },
];
const refreshBusy = ref(false);
const eventlogs = ref([]);
const activeId = ref('');
const search = useDebouncedRef('');
const page = ref(1);
const perPage = ref(20);
const types = reactive([]);
async function onRefresh() {
refreshBusy.value = true;
const [error, result] = await mailModel.eventlog(types.join(','), search.value, page.value, perPage.value);
if (error) return console.error(error);
eventlogs.value = result;
refreshBusy.value = false;
}
function onEventLogDetails(id) {
if (activeId.value === id) activeId.value = '';
else activeId.value = id;
}
async function onScroll(event) {
if (event.target.scrollTop + event.target.clientHeight >= event.target.scrollHeight) {
page.value++;
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);
watch(types, onRefresh);
watch(search, onRefresh);
onMounted(async () => {
await onRefresh();
});
</script>
<template>
<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 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>
</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;
flex-wrap: wrap;
margin: 20px 0;
}
.eventlog-details {
background-color: var(--pankow-color-background-hover);
cursor: auto;
}
.eventlog-details pre {
white-space: pre-wrap;
color: var(--pankow-text-color);
font-size: 13px;
padding: 6px;
margin: 0;
border: none;
border-radius: var(--pankow-border-radius);
}
</style>