Add app event log view

dashboard/src/components/app/Eventlog.vue

@@ -0,0 +1,53 @@
+<script setup>
+
+import { useI18n } from 'vue-i18n';
+const i18n = useI18n();
+const t = i18n.t;
+
+import { ref, onMounted } from 'vue';
+import { TableView } from 'pankow';
+import { prettyDate, prettyLongDate } from 'pankow/utils';
+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 columns = ref({
+  time: {
+    label: t('eventlog.time'),
+    width: '100px',
+    sort: false,
+  },
+  source: {
+    label: t('eventlog.source'),
+    sort: false,
+  },
+  details: {
+    label: t('eventlog.details'),
+    sort: false,
+  }
+});
+
+const events = ref([]);
+
+onMounted(async () => {
+  const [error, result] = await appsModel.getEvents(props.app.id);
+  if (error) return console.error(error);
+
+  events.value = result;
+  busy.value = false;
+});
+
+</script>
+
+<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>
+  </div>
+</template>