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

Replace table in eventlog with custom elements

Browse Source
This commit is contained in:
Johannes Zellner
2025-11-20 15:43:31 +01:00
parent 89f5e87601
commit fb2ce06621
2 changed files with 38 additions and 33 deletions
Download Patch File Download Diff File Expand all files Collapse all files

64
dashboard/src/views/EventlogView.vue
View File

@@ -2,7 +2,7 @@
import { ref, reactive, onMounted, onUnmounted, watch, useTemplateRef } from 'vue';
import { Button, TextInput, MultiSelect } from '@cloudron/pankow';
import { useDebouncedRef, copyToClipboard, prettyLongDate } from '@cloudron/pankow/utils';
import { useDebouncedRef, copyToClipboard, prettyLongDate, prettyShortDate } from '@cloudron/pankow/utils';
import AppsModel from '../models/AppsModel.js';
import EventlogsModel from '../models/EventlogsModel.js';
import { eventlogDetails, eventlogSource } from '../utils.js';
@@ -189,32 +189,19 @@ onUnmounted(() => {
</div>
</h1>
<div class="section-body" ref="eventlogContainer" style="overflow: auto; margin-top: 10px; padding-top: 0px" @scroll="onScroll">
<table class="eventlog-table">
<thead>
<tr>
<th style="width: 160px">{{ $t('eventlog.time') }}</th>
<th style="width: 100px">{{ $t('eventlog.source') }}</th>
<th>{{ $t('eventlog.details') }}</th>
<th style="width: 50px"></th>
</tr>
</thead>
<tbody>
<template v-for="eventlog in eventlogs" :key="eventlog.id">
<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 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="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>
</tr>
</template>
</tbody>
</table>
<div class="eventlog-item" v-for="eventlog in eventlogs" :key="eventlog.id" :class="{ 'active': eventlog.isOpen }" @click="eventlog.isOpen = !eventlog.isOpen">
<div class="eventlog-summary">
<div style="width: 160px; flex-shrink: 0;" class="pankow-no-mobile">{{ prettyLongDate(eventlog.raw.creationTime) }}</div>
<div style="width: 80px; flex-shrink: 0;" class="pankow-no-desktop">{{ prettyShortDate(eventlog.raw.creationTime) }}</div>
<div style="width: 160px; flex-shrink: 0; font-weight: bold; overflow: hidden; text-overflow: ellipsis;" class="pankow-no-mobile">{{ eventlog.source }}</div>
<div style="flex-grow: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;" v-html="eventlog.details"></div>
<!-- <div style="width: 160px; flex-shrink: 0; cursor: copy; overflow: hidden; text-overflow: ellipsis;" v-if="eventlog.raw.source.ip" @click="onCopySource(eventlog)">{{ eventlog.raw.source.ip }}</div> -->
<div style="width: 40px; flex-shrink: 0;"><Button v-if="eventlog.raw.data.taskId" @click.stop plain small tool :href="`/logs.html?taskId=${eventlog.raw.data.taskId}`" target="_blank">Logs</Button></div>
</div>
<div v-show="eventlog.isOpen" class="eventlog-details" @click.stop>
<pre>{{ JSON.stringify(eventlog.raw.data, null, 4) }}</pre>
</div>
</div>
</div>
</div>
</div>
@@ -222,5 +209,28 @@ onUnmounted(() => {
<style scoped>
.eventlog-item {
border-radius: var(--pankow-border-radius);
cursor: pointer;
/*padding: 5px 10px;*/
}
.eventlog-item.active,
.eventlog-item:hover {
background-color: var(--pankow-color-background-hover);
}
.eventlog-summary {
display: flex;
padding: 5px 10px;
}
.eventlog-details {
background-color: color-mix(in oklab, var(--pankow-color-background-hover), black 5%);
cursor: auto;
position: relative;
border-radius: var(--pankow-border-radius);
padding: 5px 0;
}
</style>