🎈 perf: event log

easytier-gui/src/components/HumanEvent.vue

@@ -0,0 +1,32 @@
+<script setup lang="ts">
+import { EventType } from '~/types/network'
+
+const props = defineProps<{
+  event: {
+    [key: string]: any
+  }
+}>()
+const { t } = useI18n()
+
+const eventKey = computed(() => {
+  const key = Object.keys(props.event)[0]
+  return Object.keys(EventType).includes(key) ? key : 'Unknown'
+})
+
+const eventValue = computed(() => {
+  const value = props.event[eventKey.value]
+  return typeof value === 'object' ? value : value
+})
+</script>
+
+<template>
+  <Fieldset :legend="t(`event.${eventKey}`)">
+    <template v-if="eventKey !== 'Unknown'">
+      <div v-if="event.DhcpIpv4Changed">
+        {{ `${eventValue[0]} -> ${eventValue[1]}` }}
+      </div>
+      <pre v-else>{{ eventValue }}</pre>
+    </template>
+    <pre v-else>{{ eventValue }}</pre>
+  </Fieldset>
+</template>

easytier-gui/src/components/Status.vue

@@ -325,7 +325,7 @@ function showEventLogs() {
           <small class="text-surface-500 dark:text-surface-400">{{ useTimeAgo(Date.parse(slotProps.item[0])) }}</small>
         </template>
         <template #content="slotProps">
-          {{ slotProps.item[1] }}
+          <HumanEvent :event="slotProps.item[1]" />
         </template>
       </Timeline>
     </Dialog>
@@ -433,3 +433,9 @@ function showEventLogs() {
     </template>
   </div>
 </template>
+
+<style lang="postcss" scoped>
+.p-timeline :deep(.p-timeline-event-opposite) {
+  @apply flex-none;
+}
+</style>