fix: unfound fields are shown by default instead of hidden (#3342)

Author: amir20

assets/components/LogViewer/LogDetails.vue

@@ -48,7 +48,9 @@
         <tr>
           <th class="w-60">Field</th>
           <th class="mobile-hidden">Value</th>
-          <th class="w-20"><input type="checkbox" class="toggle toggle-primary" @change="toggleAll($event)" /></th>
+          <th class="w-20">
+            <input type="checkbox" class="toggle toggle-primary" v-model="toggleAllFields" title="Toggle all" />
+          </th>
         </tr>
       </thead>
       <tbody ref="list">
@@ -85,19 +87,9 @@ function toggleField(key: string[]) {
     visibleKeys.value = new Map<string[], boolean>(fields.value.map(({ key }) => [key, true]));
   }
 
-  const enabled = visibleKeys.value.get(key);
-  visibleKeys.value.set(key, !enabled);
-}
-
-function toggleAll(e: Event) {
-  if (visibleKeys.value.size === 0) {
-    visibleKeys.value = new Map<string[], boolean>(fields.value.map(({ key }) => [key, true]));
-  }
+  const enabled = visibleKeys.value.get(key) ?? true;
 
-  const enabled = e.target instanceof HTMLInputElement && e.target.checked;
-  for (const key of visibleKeys.value.keys()) {
-    visibleKeys.value.set(key, enabled);
-  }
+  visibleKeys.value.set(key, !enabled);
 }
 
 const fields = computed({
@@ -116,7 +108,7 @@ const fields = computed({
 
       for (const [key, value] of allFields) {
         if ([...visibleKeys.value.keys()].findIndex((k) => arrayEquals(k, key)) === -1) {
-          fieldsWithValue.push({ key, value, enabled: false });
+          fieldsWithValue.push({ key, value, enabled: true });
         }
       }
     }
@@ -132,6 +124,18 @@ const fields = computed({
   },
 });
 
+const toggleAllFields = computed({
+  get: () => fields.value.every(({ enabled }) => enabled),
+  set(value) {
+    if (visibleKeys.value.size === 0) {
+      visibleKeys.value = new Map<string[], boolean>(fields.value.map(({ key }) => [key, true]));
+    }
+    for (const key of visibleKeys.value.keys()) {
+      visibleKeys.value.set(key, value);
+    }
+  },
+});
+
 function syntaxHighlight(json: any) {
   json = JSON.stringify(json, null, 2);
   return json.replace(
@@ -149,7 +153,7 @@ function syntaxHighlight(json: any) {
       } else if (/null/.test(match)) {
         cls = "json-null";
       }
-      return '<span class="' + cls + '">' + match + "</span>";
+      return `<span class="${cls}">${match}</span>`;
     },
   );
 }

assets/models/LogEntry.ts

@@ -1,5 +1,5 @@
 import { Component, ComputedRef, Ref } from "vue";
-import { flattenJSON, getDeep } from "@/utils";
+import { flattenJSON } from "@/utils";
 import ComplexLogItem from "@/components/LogViewer/ComplexLogItem.vue";
 import SimpleLogItem from "@/components/LogViewer/SimpleLogItem.vue";
 import ContainerEventLogItem from "@/components/LogViewer/ContainerEventLogItem.vue";
@@ -85,10 +85,14 @@ export class ComplexLogEntry extends LogEntry<JSONObject> {
         if (visibleKeys.value.size === 0) {
           return flattenJSON(message);
         } else {
-          const keys = Array.from(visibleKeys.value.entries())
-            .filter(([, value]) => value)
-            .map(([key]) => key);
-          return keys.reduce((acc, attr) => ({ ...acc, [attr.join(".")]: getDeep(message, attr) }), {});
+          const flatJSON = flattenJSON(message);
+          for (const [keys, enabled] of visibleKeys.value.entries()) {
+            const key = keys.join(".");
+            if (!enabled) {
+              delete flatJSON[key];
+            }
+          }
+          return flatJSON;
         }
       });
     } else {