Johannes Zellner
120 lines
2.7 KiB
Vue
120 lines
2.7 KiB
Vue
<script setup>
|
|
|
|
import moment from 'moment';
|
|
import { ref, onMounted } from 'vue';
|
|
import { eventlogSource, eventlogDetails } from '../../utils.js';
|
|
import AppsModel from '../../models/AppsModel.js';
|
|
|
|
const appsModel = AppsModel.create();
|
|
|
|
const props = defineProps([ 'app' ]);
|
|
const busy = ref(true);
|
|
|
|
const eventlogs = ref([]);
|
|
|
|
onMounted(async () => {
|
|
const [error, result] = await appsModel.getEvents(props.app.id);
|
|
if (error) return console.error(error);
|
|
|
|
eventlogs.value = result.map(e => {
|
|
return {
|
|
id: Symbol(),
|
|
raw: e,
|
|
details: eventlogDetails(e, props.app),
|
|
source: eventlogSource(e, props.app),
|
|
};
|
|
});
|
|
|
|
busy.value = false;
|
|
});
|
|
|
|
</script>
|
|
|
|
<template>
|
|
<div>
|
|
<table class="eventlog-table">
|
|
<thead>
|
|
<tr>
|
|
<th>{{ $t('eventlog.time') }}</th>
|
|
<th></th>
|
|
<th>{{ $t('eventlog.source') }}</th>
|
|
<th>{{ $t('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 style="white-space: nowrap;">{{ moment(eventlog.raw.creationTime).format('DD.MM.YYYY') }}</td>
|
|
<td style="white-space: nowrap;">{{ moment(eventlog.raw.creationTime).format('HH:mm:SS') }}</td>
|
|
<td>{{ eventlog.source }}</td>
|
|
<td v-html="eventlog.details"></td>
|
|
</tr>
|
|
<tr v-show="eventlog.isOpen">
|
|
<td colspan="4" class="eventlog-details">
|
|
<div v-if="eventlog.raw.source.ip" class="eventlog-source" @click="onCopySource(eventlog)">{{ eventlog.raw.source.ip }}</div>
|
|
<pre>{{ JSON.stringify(eventlog.raw.data, null, 4) }}</pre>
|
|
</td>
|
|
</tr>
|
|
</template>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</template>
|
|
|
|
<style scoped>
|
|
|
|
.eventlog-table {
|
|
width: 100%;
|
|
overflow: auto;
|
|
border-spacing: 0px;
|
|
}
|
|
|
|
.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 th,
|
|
.eventlog-table td {
|
|
padding: 10px 6px;
|
|
}
|
|
|
|
.eventlog-filter {
|
|
display: flex;
|
|
gap: 5px;
|
|
flex-wrap: wrap;
|
|
margin: 20px 0;
|
|
}
|
|
|
|
.eventlog-details {
|
|
background-color: color-mix(in oklab, var(--pankow-color-background-hover), black 5%);
|
|
cursor: auto;
|
|
position: relative;
|
|
}
|
|
|
|
.eventlog-source {
|
|
position: absolute;
|
|
right: 10px;
|
|
cursor: copy;
|
|
}
|
|
|
|
.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>
|