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

Unify most view titles and move more into a Section component

Browse Source
This commit is contained in:
Johannes Zellner
2025-03-25 19:11:40 +01:00
parent 0cffd76296
commit 42456bac0f
8 changed files with 115 additions and 128 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -3,6 +3,7 @@
import { ref, reactive, onMounted, watch } from 'vue';
import { Button, Spinner, TextInput, MultiSelect } from 'pankow';
import { useDebouncedRef, prettyDate, prettyLongDate } from 'pankow/utils';
import Section from '../components/Section.vue';
import AppsModel from '../models/AppsModel.js';
import EventlogsModel from '../models/EventlogsModel.js';
import { eventlogDetails, eventlogSource } from '../utils.js';
@@ -149,42 +150,41 @@ onMounted(async () => {
<template>
<div class="content" style="overflow: hidden; display: flex; flex-direction: column;">
<h1 class="view-header">
{{ $t('eventlog.title') }}
<div style="">
<Section :title="$t('eventlog.title')">
<template #header-buttons>
<TextInput :placeholder="$t('main.searchPlaceholder')" style="flex-grow: 1;" v-model="search"/>
<MultiSelect v-model="actions" :options="availableActions" option-label="id" :selected-label="actions.length ? $t('main.multiselect.selected', { n: actions.length }) : $t('eventlog.filterAllEvents')"/>
<Button tool secondary @click="onRefresh()" :loading="refreshBusy" icon="fa-solid fa-sync-alt" />
</div>
</h1>
</template>
<center v-show="busy"><Spinner class="pankow-spinner-large" /></center>
<div style="overflow: auto; position: relative; margin-bottom: 10px;" @scroll="onScroll">
<table v-show="!busy" class="eventlog-table">
<thead>
<tr>
<th>{{ $t('eventlog.time') }}</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="onEventLogDetails(eventlog.id)" :class="{ 'active': activeId === eventlog.id }" >
<td style="white-space: nowrap;"><span v-tooltip="prettyLongDate(eventlog.raw.creationTime)" class="arrow">{{ prettyDate(eventlog.raw.creationTime) }}</span></td>
<td>{{ eventlog.source }}</td>
<td v-html="eventlog.details"></td>
<center v-show="busy"><Spinner class="pankow-spinner-large" /></center>
<div style="overflow: auto; position: relative; margin-bottom: 10px;" @scroll="onScroll">
<table v-show="!busy" class="eventlog-table">
<thead>
<tr>
<th>{{ $t('eventlog.time') }}</th>
<th>{{ $t('eventlog.source') }}</th>
<th>{{ $t('eventlog.details') }}</th>
</tr>
<tr v-show="activeId === eventlog.id">
<td colspan="4" class="eventlog-details">
<p v-show="eventlog.raw.source.ip">Source IP: <code>{{ eventlog.raw.source.ip }}</code></p>
<pre>{{ JSON.stringify(eventlog.raw.data, null, 4) }}</pre>
</td>
</tr>
</template>
</tbody>
</table>
</div>
</thead>
<tbody>
<template v-for="eventlog in eventlogs" :key="eventlog.id">
<tr @click="onEventLogDetails(eventlog.id)" :class="{ 'active': activeId === eventlog.id }" >
<td style="white-space: nowrap;"><span v-tooltip="prettyLongDate(eventlog.raw.creationTime)" class="arrow">{{ prettyDate(eventlog.raw.creationTime) }}</span></td>
<td>{{ eventlog.source }}</td>
<td v-html="eventlog.details"></td>
</tr>
<tr v-show="activeId === eventlog.id">
<td colspan="4" class="eventlog-details">
<p v-show="eventlog.raw.source.ip">Source IP: <code>{{ eventlog.raw.source.ip }}</code></p>
<pre>{{ JSON.stringify(eventlog.raw.data, null, 4) }}</pre>
</td>
</tr>
</template>
</tbody>
</table>
</div>
</Section>
</div>
</template>