Improve eventlog source handling

dashboard/src/views/EventlogView.vue

@@ -2,7 +2,7 @@
 
 import { ref, reactive, onMounted, watch } from 'vue';
 import { Button, TextInput, MultiSelect } from 'pankow';
-import { useDebouncedRef, prettyDate, prettyLongDate } from 'pankow/utils';
+import { useDebouncedRef, prettyDate, prettyLongDate, copyToClipboard } from 'pankow/utils';
 import AppsModel from '../models/AppsModel.js';
 import EventlogsModel from '../models/EventlogsModel.js';
 import { eventlogDetails, eventlogSource } from '../utils.js';
@@ -110,11 +110,6 @@ async function onRefresh() {
   refreshBusy.value = false;
 }
 
-function onEventLogDetails(id) {
-  if (activeId.value === id) activeId.value = null;
-  else activeId.value = id;
-}
-
 async function onScroll(event) {
   if (event.target.scrollTop + event.target.clientHeight >= event.target.scrollHeight) {
     page.value++;
@@ -132,6 +127,11 @@ async function onScroll(event) {
   }
 }
 
+function onCopySource(eventlog) {
+  copyToClipboard(eventlog.raw.source.ip);
+  window.pankow.notify({ type: 'success', text: 'Copied' });
+}
+
 watch(actions, onRefresh);
 watch(search, onRefresh);
 
@@ -168,14 +168,14 @@ onMounted(async () => {
           </thead>
           <tbody>
             <template v-for="eventlog in eventlogs" :key="eventlog.id">
-              <tr @click="onEventLogDetails(eventlog.id)" :class="{ 'active': activeId === eventlog.id }" >
+              <tr @click="eventlog.isOpen = !eventlog.isOpen" :class="{ 'active': eventlog.isOpen }" >
                 <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">
+              <tr v-show="eventlog.isOpen">
                 <td colspan="4" class="eventlog-details">
-                  <p v-show="eventlog.raw.source.ip">Source IP: <code>{{ eventlog.raw.source.ip }}</code></p>
+                  <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>
@@ -234,6 +234,13 @@ onMounted(async () => {
 .eventlog-details {
   background-color: var(--pankow-color-background-hover);
   cursor: auto;
+  position: relative;
+}
+
+.eventlog-source {
+  position: absolute;
+  right: 10px;
+  cursor: copy;
 }
 
 .eventlog-details pre {