From 370e7b238ec5da34541ad18c4d2d7d7de7a00cff Mon Sep 17 00:00:00 2001
From: Amir Raminfar <findamir@gmail.com>
Date: Fri, 5 May 2023 14:54:37 -0700
Subject: [PATCH] fix: shows a message when all keys in json logs are hidden.
 see #2122 (#2174)

---
 assets/auto-imports.d.ts                       |  4 ++--
 assets/components/LogViewer/ComplexLogItem.vue | 17 +++++++++--------
 2 files changed, 11 insertions(+), 10 deletions(-)

diff --git a/assets/auto-imports.d.ts b/assets/auto-imports.d.ts
index bca945cb..6c83d6de 100644
--- a/assets/auto-imports.d.ts
+++ b/assets/auto-imports.d.ts
@@ -51,6 +51,7 @@ declare global {
   const getCurrentInstance: typeof import('vue')['getCurrentInstance']
   const getCurrentScope: typeof import('vue')['getCurrentScope']
   const getDeep: typeof import('./utils/index')['getDeep']
+  const globalShowPopup: typeof import('./composables/popup')['globalShowPopup']
   const h: typeof import('vue')['h']
   const hourStyle: typeof import('./composables/settings')['hourStyle']
   const ignorableWatch: typeof import('@vueuse/core')['ignorableWatch']
@@ -120,7 +121,6 @@ declare global {
   const shallowReadonly: typeof import('vue')['shallowReadonly']
   const shallowRef: typeof import('vue')['shallowRef']
   const showAllContainers: typeof import('./composables/settings')['showAllContainers']
-  const showPopup: typeof import('./composables/popup')['showPopup']
   const showTimestamp: typeof import('./composables/settings')['showTimestamp']
   const size: typeof import('./composables/settings')['size']
   const smallerScrollbars: typeof import('./composables/settings')['smallerScrollbars']
@@ -385,6 +385,7 @@ declare module 'vue' {
     readonly getCurrentInstance: UnwrapRef<typeof import('vue')['getCurrentInstance']>
     readonly getCurrentScope: UnwrapRef<typeof import('vue')['getCurrentScope']>
     readonly getDeep: UnwrapRef<typeof import('./utils/index')['getDeep']>
+    readonly globalShowPopup: UnwrapRef<typeof import('./composables/popup')['globalShowPopup']>
     readonly h: UnwrapRef<typeof import('vue')['h']>
     readonly hourStyle: UnwrapRef<typeof import('./composables/settings')['hourStyle']>
     readonly ignorableWatch: UnwrapRef<typeof import('@vueuse/core')['ignorableWatch']>
@@ -454,7 +455,6 @@ declare module 'vue' {
     readonly shallowReadonly: UnwrapRef<typeof import('vue')['shallowReadonly']>
     readonly shallowRef: UnwrapRef<typeof import('vue')['shallowRef']>
     readonly showAllContainers: UnwrapRef<typeof import('./composables/settings')['showAllContainers']>
-    readonly showPopup: UnwrapRef<typeof import('./composables/popup')['showPopup']>
     readonly showTimestamp: UnwrapRef<typeof import('./composables/settings')['showTimestamp']>
     readonly size: UnwrapRef<typeof import('./composables/settings')['size']>
     readonly smallerScrollbars: UnwrapRef<typeof import('./composables/settings')['smallerScrollbars']>
diff --git a/assets/components/LogViewer/ComplexLogItem.vue b/assets/components/LogViewer/ComplexLogItem.vue
index 3e37504f..01b74593 100644
--- a/assets/components/LogViewer/ComplexLogItem.vue
+++ b/assets/components/LogViewer/ComplexLogItem.vue
@@ -7,11 +7,12 @@
       <log-level :level="logEntry.level"></log-level>
     </div>
     <div class="column">
-      <ul class="fields" :class="{ expanded }" @click="expanded = !expanded">
-        <li v-for="(value, name) in validValues(logEntry.message)">
-          <span class="has-text-grey">{{ name }}=</span>
-          <span class="has-text-weight-bold" v-html="markSearch(value)"></span>
+      <ul class="fields" :class="{ expanded }" @click="expandToggle()">
+        <li v-for="(value, name) in validValues">
+          <span class="has-text-grey">{{ name }}=</span
+          ><span class="has-text-weight-bold" v-html="markSearch(value)"></span>
         </li>
+        <li class="has-text-grey" v-if="Object.keys(validValues).length === 0">all values are hidden</li>
       </ul>
       <field-list :fields="logEntry.unfilteredMessage" :expanded="expanded" :visible-keys="visibleKeys"></field-list>
     </div>
@@ -27,11 +28,11 @@ const { logEntry } = defineProps<{
   visibleKeys: string[][];
 }>();
 
-let expanded = $ref(false);
+const [expanded, expandToggle] = useToggle();
 
-function validValues(obj: Record<string, any>) {
-  return Object.fromEntries(Object.entries(obj).filter(([_, value]) => value !== undefined));
-}
+const validValues = computed(() => {
+  return Object.fromEntries(Object.entries(logEntry.message).filter(([_, value]) => value !== undefined));
+});
 </script>
 
 <style lang="scss" scoped>