From 9ddbe6fbb0efc85b45e52cd52950936f8ffcccfe Mon Sep 17 00:00:00 2001
From: Amir Raminfar <findamir@gmail.com>
Date: Wed, 4 Sep 2024 08:53:40 -0700
Subject: [PATCH] feat: shows raw json in complex logs with option to copy
 (#3251)

---
 assets/components.d.ts                        |  1 +
 .../components/LogViewer/ComplexLogItem.vue   | 12 ++--
 assets/components/LogViewer/LogDetails.vue    | 57 +++++++++++++++++++
 3 files changed, 63 insertions(+), 7 deletions(-)

diff --git a/assets/components.d.ts b/assets/components.d.ts
index 6192f103..302d6d74 100644
--- a/assets/components.d.ts
+++ b/assets/components.d.ts
@@ -61,6 +61,7 @@ declare module 'vue' {
     'Mdi:chevronRight': typeof import('~icons/mdi/chevron-right')['default']
     'Mdi:close': typeof import('~icons/mdi/close')['default']
     'Mdi:cog': typeof import('~icons/mdi/cog')['default']
+    'Mdi:contentCopy': typeof import('~icons/mdi/content-copy')['default']
     'Mdi:docker': typeof import('~icons/mdi/docker')['default']
     'Mdi:hamburgerMenu': typeof import('~icons/mdi/hamburger-menu')['default']
     'Mdi:hexagonMultiple': typeof import('~icons/mdi/hexagon-multiple')['default']
diff --git a/assets/components/LogViewer/ComplexLogItem.vue b/assets/components/LogViewer/ComplexLogItem.vue
index bb40c3d5..908a17f6 100644
--- a/assets/components/LogViewer/ComplexLogItem.vue
+++ b/assets/components/LogViewer/ComplexLogItem.vue
@@ -1,5 +1,8 @@
 <template>
-  <div class="group/item relative flex w-full gap-x-2 hover:bg-secondary/10" @click="showLogDetails(logEntry)">
+  <div
+    class="group/item relative flex w-full cursor-pointer gap-x-2 hover:bg-secondary/10"
+    @click="showLogDetails(logEntry)"
+  >
     <div v-if="showContainerName">
       <ContainerName :id="logEntry.containerID" />
     </div>
@@ -13,7 +16,7 @@
       <LogLevel :level="logEntry.level" />
     </div>
     <div>
-      <ul class="fields cursor-pointer space-x-4">
+      <ul class="fields space-x-4">
         <li v-for="(value, name) in validValues" :key="name">
           <span class="text-light">{{ name }}=</span><span class="font-bold" v-if="value === null">&lt;null&gt;</span>
           <template v-else-if="Array.isArray(value)">
@@ -24,11 +27,6 @@
         <li class="text-light" v-if="Object.keys(validValues).length === 0">all values are hidden</li>
       </ul>
     </div>
-    <LogMessageActions
-      class="duration-250 absolute -right-1 opacity-0 transition-opacity delay-150 group-hover/entry:opacity-100"
-      :message="() => JSON.stringify(logEntry.message)"
-      :log-entry="logEntry"
-    />
   </div>
 </template>
 <script lang="ts" setup>
diff --git a/assets/components/LogViewer/LogDetails.vue b/assets/components/LogViewer/LogDetails.vue
index f62fc8c0..490b5fc1 100644
--- a/assets/components/LogViewer/LogDetails.vue
+++ b/assets/components/LogViewer/LogDetails.vue
@@ -24,6 +24,22 @@
         <div class="truncate text-lg font-bold">{{ container.image }}</div>
       </div>
     </section>
+
+    <section class="flex flex-col gap-2">
+      <div class="flex gap-2 font-thin">
+        Raw JSON
+
+        <UseClipboard v-slot="{ copy, copied }" :source="JSON.stringify(entry.unfilteredMessage)">
+          <button class="swap swap-flip outline-none" @click="copy()" :class="{ 'hover:swap-active': copied }">
+            <mdi:check class="swap-on" />
+            <mdi:content-copy class="swap-off" />
+          </button>
+        </UseClipboard>
+      </div>
+      <div class="max-h-48 overflow-scroll rounded border border-base-lighter bg-base-darker p-2">
+        <pre v-html="syntaxHighlight(entry.unfilteredMessage)"></pre>
+      </div>
+    </section>
     <table class="table table-pin-rows table-fixed" v-if="entry instanceof ComplexLogEntry">
       <caption class="caption-bottom">
         Fields are sortable by dragging and dropping.
@@ -55,6 +71,7 @@
 <script setup lang="ts">
 import { ComplexLogEntry } from "@/models/LogEntry";
 import { useSortable } from "@vueuse/integrations/useSortable";
+import { UseClipboard } from "@vueuse/components";
 
 const { entry } = defineProps<{ entry: ComplexLogEntry }>();
 const { currentContainer } = useContainerStore();
@@ -115,6 +132,28 @@ const fields = computed({
   },
 });
 
+function syntaxHighlight(json: any) {
+  json = JSON.stringify(json, null, 2);
+  return json.replace(
+    /("(\\u[a-zA-Z0-9]{4}|\\[^u]|[^\\"])*"(\s*:)?|\b(true|false|null)\b|\b\d+\b)/g,
+    function (match: string) {
+      var cls = "json-number";
+      if (/^"/.test(match)) {
+        if (/:$/.test(match)) {
+          cls = "json-key";
+        } else {
+          cls = "json-string";
+        }
+      } else if (/true|false/.test(match)) {
+        cls = "json-boolean";
+      } else if (/null/.test(match)) {
+        cls = "json-null";
+      }
+      return '<span class="' + cls + '">' + match + "</span>";
+    },
+  );
+}
+
 useSortable(list, fields);
 </script>
 <style lang="postcss" scoped>
@@ -129,4 +168,22 @@ useSortable(list, fields);
     Menlo,
     monospace;
 }
+
+pre {
+  :deep(.json-key) {
+    @apply text-blue;
+  }
+  :deep(.json-string) {
+    @apply text-green;
+  }
+  :deep(.json-number) {
+    @apply text-orange;
+  }
+  :deep(.json-boolean) {
+    @apply text-purple;
+  }
+  :deep(.json-null) {
+    @apply text-red;
+  }
+}
 </style>