147 lines
7.5 KiB
Vue
147 lines
7.5 KiB
Vue
<script setup>
|
|
|
|
import { ref, reactive, onMounted, watch, useTemplateRef, nextTick } from 'vue';
|
|
import { Button, TextInput, MultiSelect } from '@cloudron/pankow';
|
|
import { useDebouncedRef, prettyEmailAddresses, prettyLongDate } from '@cloudron/pankow/utils';
|
|
import MailModel from '../models/MailModel.js';
|
|
|
|
const mailModel = MailModel.create();
|
|
|
|
const availableTypes = [
|
|
{ id: 'bounce', name: 'Bounce' },
|
|
{ id: 'deferred', name: 'Deferred' },
|
|
{ id: 'denied', name: 'Denied' },
|
|
{ id: 'queued', name: 'Queued' },
|
|
{ id: 'quota', name: 'Quota' },
|
|
{ id: 'saved', name: 'Saved' },
|
|
{ id: 'sent', name: 'Sent' },
|
|
{ id: 'spam', name: 'Spam' },
|
|
{ id: 'spam-learn', name: 'Spam Training' },
|
|
];
|
|
|
|
const refreshBusy = ref(false);
|
|
const eventlogs = ref([]);
|
|
const search = useDebouncedRef('');
|
|
const page = ref(1);
|
|
const perPage = ref(10);
|
|
const types = reactive([]);
|
|
const eventlogContainer = useTemplateRef('eventlogContainer');
|
|
|
|
async function onRefresh() {
|
|
refreshBusy.value = true;
|
|
page.value = 1;
|
|
|
|
const [error, result] = await mailModel.eventlog(types.join(','), search.value, page.value, perPage.value);
|
|
if (error) return console.error(error);
|
|
|
|
eventlogs.value = result;
|
|
|
|
await nextTick();
|
|
|
|
while (eventlogContainer.value && eventlogContainer.value.scrollHeight <= eventlogContainer.value.offsetHeight) {
|
|
await fetchMore();
|
|
}
|
|
|
|
refreshBusy.value = false;
|
|
}
|
|
|
|
async function fetchMore() {
|
|
page.value++;
|
|
|
|
const [error, result] = await mailModel.eventlog(types.join(','), search.value, page.value, perPage.value);
|
|
if (error) return console.error(error);
|
|
|
|
eventlogs.value = eventlogs.value.concat(result);
|
|
}
|
|
|
|
async function onScroll(event) {
|
|
if (event.target.scrollTop + event.target.clientHeight >= event.target.scrollHeight) await fetchMore();
|
|
}
|
|
|
|
watch(perPage, onRefresh);
|
|
watch(types, onRefresh);
|
|
watch(search, onRefresh);
|
|
|
|
onMounted(async () => {
|
|
await onRefresh();
|
|
|
|
while (eventlogContainer.value && eventlogContainer.value.scrollHeight <= eventlogContainer.value.offsetHeight) {
|
|
await fetchMore();
|
|
}
|
|
});
|
|
|
|
</script>
|
|
|
|
<template>
|
|
|
|
<div class="content-large" 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 href="/logs.html?id=mail" target="_blank">{{ $t('main.action.logs') }}</Button>
|
|
</div>
|
|
</h2>
|
|
<div class="section-body" ref="eventlogContainer" style="margin-top: 16px; overflow: auto; padding-top: 0" @scroll="onScroll">
|
|
<table class="eventlog-table">
|
|
<thead>
|
|
<tr>
|
|
<th style="width: 25px"><!-- Icon --></th>
|
|
<th style="width:160px">{{ $t('emails.eventlog.time') }}</th>
|
|
<th style="width: 20%">{{ $t('emails.eventlog.mailFrom') }}</th>
|
|
<th style="width: 20%">{{ $t('emails.eventlog.rcptTo') }}</th>
|
|
<th>{{ $t('emails.eventlog.details') }}</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<template v-for="eventlog in eventlogs" :key="eventlog._id">
|
|
<tr @click="eventlog.isOpen = !eventlog.isOpen" :class="{ 'active': eventlog.isOpen }" >
|
|
<td>
|
|
<i class="fas fa-arrow-circle-left" v-if="eventlog.type === 'sent'" 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 === 'saved'" v-tooltip="$t('emails.eventlog.type.incoming')"></i>
|
|
<i class="fas fa-align-justify" v-if="eventlog.type === 'queued' && !eventlog.spamStatus" v-tooltip="$t('emails.eventlog.type.queued')"></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>{{ prettyLongDate(eventlog.ts) }}</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 === 'saved'">{{ $t('emails.eventlog.type.savedInfo') }}</span>
|
|
<span v-if="eventlog.type === 'sent'">{{ $t('emails.eventlog.type.sentInfo') }}</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="eventlog.isOpen">
|
|
<td colspan="5" class="eventlog-details">
|
|
<pre>{{ JSON.stringify(eventlog, null, 4) }}</pre>
|
|
</td>
|
|
</tr>
|
|
</template>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|