feat: actions on log messages

assets/components.d.ts

@@ -10,10 +10,13 @@ declare module 'vue' {
     BarChart: typeof import('./components/BarChart.vue')['default']
     'Carbon:caretDown': typeof import('~icons/carbon/caret-down')['default']
     'Carbon:circleSolid': typeof import('~icons/carbon/circle-solid')['default']
+    'Carbon:copyFile': typeof import('~icons/carbon/copy-file')['default']
     'Carbon:information': typeof import('~icons/carbon/information')['default']
     'Carbon:macShift': typeof import('~icons/carbon/mac-shift')['default']
     'Carbon:play': typeof import('~icons/carbon/play')['default']
     'Carbon:restart': typeof import('~icons/carbon/restart')['default']
+    'Carbon:rowCollapse': typeof import('~icons/carbon/row-collapse')['default']
+    'Carbon:rowExpand': typeof import('~icons/carbon/row-expand')['default']
     'Carbon:star': typeof import('~icons/carbon/star')['default']
     'Carbon:starFilled': typeof import('~icons/carbon/star-filled')['default']
     'Carbon:stopFilledAlt': typeof import('~icons/carbon/stop-filled-alt')['default']
@@ -28,6 +31,7 @@ declare module 'vue' {
     ContainerStat: typeof import('./components/LogViewer/ContainerStat.vue')['default']
     ContainerTable: typeof import('./components/ContainerTable.vue')['default']
     ContainerTitle: typeof import('./components/LogViewer/ContainerTitle.vue')['default']
+    CopyLogMessage: typeof import('./components/LogViewer/CopyLogMessage.vue')['default']
     DateTime: typeof import('./components/common/DateTime.vue')['default']
     DistanceTime: typeof import('./components/common/DistanceTime.vue')['default']
     DockerEventLogItem: typeof import('./components/LogViewer/DockerEventLogItem.vue')['default']

assets/components/LogViewer/ComplexLogItem.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="flex gap-x-2">
+  <div class="relative flex gap-x-2">
     <div v-if="showStd">
       <log-std :std="logEntry.std"></log-std>
     </div>
@@ -22,6 +22,7 @@
       </ul>
       <field-list :fields="logEntry.unfilteredMessage" :expanded="expanded" :visible-keys="visibleKeys"></field-list>
     </div>
+    <copy-log-message :message="JSON.stringify(logEntry.message)" />
   </div>
 </template>
 <script lang="ts" setup>
@@ -45,6 +46,7 @@ const validValues = computed(() => {
 .text-light {
   @apply text-base-content/70;
 }
+
 .fields {
   &:hover {
     &::after {

assets/components/LogViewer/CopyLogMessage.vue

@@ -0,0 +1,35 @@
+<template>
+  <div
+    class="absolute -right-1 flex min-w-[0.98rem] items-start justify-end align-bottom hover:cursor-pointer"
+    v-if="message.trim() != ''"
+    title="Copy Log"
+  >
+    <span
+      class="rounded bg-slate-800/60 px-1.5 py-1 text-primary opacity-0 transition-opacity delay-500 duration-1000 hover:bg-slate-700 group-hover/entry:opacity-100"
+      @click="copyLogMessageToClipBoard()"
+    >
+      <carbon:copy-file />
+    </span>
+  </div>
+</template>
+
+<script lang="ts" setup>
+const { message } = defineProps<{
+  message: string;
+}>();
+
+const { showToast } = useToast();
+
+function copyLogMessageToClipBoard() {
+  navigator.clipboard.writeText(message);
+
+  showToast(
+    {
+      title: "Copied",
+      message: "Log message copied to clipboard",
+      type: "info",
+    },
+    { expire: 2000 },
+  );
+}
+</script>

assets/components/LogViewer/LogViewer.vue

@@ -5,6 +5,7 @@
       :key="item.id"
       :data-key="item.id"
       :class="{ 'border border-secondary': toRaw(item) === toRaw(lastSelectedItem) }"
+      class="group/entry"
     >
       <a
         class="jump-context tooltip tooltip-right tooltip-primary"

assets/components/LogViewer/SimpleLogItem.vue

@@ -1,9 +1,10 @@
 <template>
-  <div class="flex items-start gap-x-2">
+  <div class="relative flex w-full items-start gap-x-2">
     <log-std :std="logEntry.std" v-if="showStd" />
     <log-date :date="logEntry.date" v-if="showTimestamp" />
     <log-level class="flex" :level="logEntry.level" :position="logEntry.position" />
     <div class="whitespace-pre-wrap group-[.disable-wrap]:whitespace-nowrap" v-html="colorize(logEntry.message)"></div>
+    <copy-log-message :message="logEntry.message" />
   </div>
 </template>
 <script lang="ts" setup>