Sync UI for eventlogs in both system and app views

dashboard/src/components/app/Eventlog.vue

@@ -1,12 +1,7 @@
 <script setup>
 
-import { useI18n } from 'vue-i18n';
-const i18n = useI18n();
-const t = i18n.t;
-
+import moment from 'moment';
 import { ref, onMounted } from 'vue';
-import { TableView } from '@cloudron/pankow';
-import { prettyDate, prettyLongDate } from '@cloudron/pankow/utils';
 import { eventlogSource, eventlogDetails } from '../../utils.js';
 import AppsModel from '../../models/AppsModel.js';
 
@@ -14,29 +9,22 @@ const appsModel = AppsModel.create();
 
 const props = defineProps([ 'app' ]);
 const busy = ref(true);
-const columns = ref({
-  time: {
-    label: t('eventlog.time'),
-    width: '120px',
-    sort: false,
-  },
-  source: {
-    label: t('eventlog.source'),
-    sort: false,
-  },
-  details: {
-    label: t('eventlog.details'),
-    sort: false,
-  }
-});
 
-const events = ref([]);
+const eventlogs = ref([]);
 
 onMounted(async () => {
   const [error, result] = await appsModel.getEvents(props.app.id);
   if (error) return console.error(error);
 
-  events.value = result;
+  eventlogs.value = result.map(e => {
+    return {
+      id: Symbol(),
+      raw: e,
+      details: eventlogDetails(e, props.app),
+      source: eventlogSource(e, props.app),
+    };
+  });
+
   busy.value = false;
 });
 
@@ -44,10 +32,92 @@ onMounted(async () => {
 
 <template>
   <div>
-    <TableView :columns="columns" :model="events" :busy="busy">
-      <template #time="event"><span v-tooltip="prettyLongDate(event.creationTime)">{{ prettyDate(event.creationTime) }}</span></template>
-      <template #source="event">{{ eventlogSource(event, app) }}</template>
-      <template #details="event"><div v-html="eventlogDetails(event)"></div></template>
-    </TableView>
+    <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 tbody tr.active {
+  font-weight: bold;
+}
+
+.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: var(--pankow-color-background-hover);
+  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>