Make eventlog and email eventlog table layouts a lot more predictable

This commit is contained in:
Johannes Zellner
2025-10-16 23:26:58 +02:00
parent 8dcb3f2f85
commit 229863d7ff
3 changed files with 19 additions and 13 deletions
+8 -8
View File
@@ -76,17 +76,17 @@ onMounted(async () => {
<table class="eventlog-table">
<thead>
<tr>
<th style="width: 5%"><!-- Icon --></th>
<th style="width: 14%">{{ $t('emails.eventlog.time') }}</th>
<th style="width: 26%">{{ $t('emails.eventlog.mailFrom') }}</th>
<th style="width: 25%">{{ $t('emails.eventlog.rcptTo') }}</th>
<th style="width: 30%">{{ $t('emails.eventlog.details') }}</th>
<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 class="no-wrap">
<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>
@@ -98,7 +98,7 @@ onMounted(async () => {
<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">{{ prettyLongDate(eventlog.ts) }}</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>
+5 -5
View File
@@ -172,10 +172,10 @@ onUnmounted(() => {
<table class="eventlog-table">
<thead>
<tr>
<th>{{ $t('eventlog.time') }}</th>
<th>{{ $t('eventlog.source') }}</th>
<th style="width: 160px">{{ $t('eventlog.time') }}</th>
<th style="width: 100px">{{ $t('eventlog.source') }}</th>
<th>{{ $t('eventlog.details') }}</th>
<th></th>
<th style="width: 50px"></th>
</tr>
</thead>
<tbody>
@@ -183,11 +183,11 @@ onUnmounted(() => {
<tr @click="eventlog.isOpen = !eventlog.isOpen" :class="{ 'active': eventlog.isOpen }" >
<td style="white-space: nowrap;">{{ prettyLongDate(eventlog.raw.creationTime) }}</td>
<td>{{ eventlog.source }}</td>
<td v-html="eventlog.details"></td>
<td class="elide-table-cell" v-html="eventlog.details"></td>
<td><Button v-if="eventlog.raw.data.taskId" @click.stop plain small tool :href="`/logs.html?taskId=${eventlog.raw.data.taskId}`" target="_blank">Logs</Button></td>
</tr>
<tr v-show="eventlog.isOpen">
<td colspan="5" class="eventlog-details">
<td colspan="4" class="eventlog-details">
<div v-if="eventlog.raw.source.ip" class="eventlog-source">Source IP: <span @click="onCopySource(eventlog)">{{ eventlog.raw.source.ip }}</span></div>
<pre>{{ JSON.stringify(eventlog.raw.data, null, 4) }}</pre>
</td>