Replace emails eventlog as vuejs view

dashboard/src/views/EmailsEventlogView.vue

@@ -0,0 +1,171 @@
+<script setup>
+
+import { useI18n } from 'vue-i18n';
+const i18n = useI18n();
+const t = i18n.t;
+
+import { ref, reactive, onMounted, watch } from 'vue';
+import { Button, ButtonGroup, Dropdown, Spinner, 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 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('');
+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 onPrevPage() {
+  if (page.value > 1) page.value--;
+  else page.value = 1;
+  await onRefresh();
+}
+
+async function onNextPage() {
+  page.value++;
+  await onRefresh();
+}
+
+watch(perPage, onRefresh);
+watch(types, onRefresh);
+watch(search, onRefresh);
+
+onMounted(async () => {
+  busy.value = true;
+
+  await onRefresh();
+
+  busy.value = false;
+});
+
+</script>
+
+<template>
+  <div class="content">
+    <h1>{{ $t('emails.eventlog.title') }}</h1>
+
+    <div class="eventlog-filter">
+      <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')"/>
+      <Dropdown v-model="perPage" :options="perPageOptions" option-key="value" option-label="name"/>
+
+      <ButtonGroup>
+        <Button tool @click="onPrevPage()" :disabled="busy || page <= 1" icon="fa-solid fa-angle-double-left" v-tooltip="$t('main.pagination.prev')" />
+        <Button tool @click="onRefresh()" :loading="refreshBusy" icon="fa-solid fa-sync-alt" />
+        <Button tool @click="onNextPage()" :disabled="busy || perPage > eventlogs.length" icon="fa-solid fa-angle-double-right" v-tooltip="$t('main.pagination.next')" />
+      </ButtonGroup>
+    </div>
+
+    <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>
+  </div>
+</template>
+
+<style scoped>
+
+.eventlog-filter {
+  display: flex;
+  gap: 5px;
+  flex-wrap: wrap;
+  margin: 20px 0;
+}
+
+.eventlog-details {
+  white-space: pre-wrap;
+  color: var(--pankow-text-color);
+  background-color: var(--pankow-input-background-color);
+  border: none;
+  border-radius: var(--pankow-border-radius);
+}
+
+</style>

dashboard/src/views/EventlogView.vue

@@ -104,7 +104,7 @@ const actions = reactive([]);
 
 async function onRefresh() {
   refreshBusy.value = true;
-  const [error, result] = await eventlogsModel.search(actions.map(a => a.id).join(','), search.value, page.value, perPage.value);
+  const [error, result] = await eventlogsModel.search(actions.join(','), search.value, page.value, perPage.value);
   if (error) return console.error(error);
 
   eventlogs.value = result.map(e => {