From 40f5cb1301b9a6dd61c867c889deedfd87215a78 Mon Sep 17 00:00:00 2001
From: Amir Raminfar <findamir@gmail.com>
Date: Wed, 17 Aug 2022 10:39:22 -0700
Subject: [PATCH] Simplifies schema

---
 assets/components/JSONPayload.vue             |  2 +-
 assets/components/LogViewer.vue               |  4 +--
 .../__snapshots__/LogEventSource.spec.ts.snap | 29 ++++++++++-----
 assets/composables/eventsource.ts             |  4 +--
 assets/composables/search.ts                  |  9 ++---
 assets/types/LogEntry.d.ts                    |  9 ++---
 assets/types/VisibleLogEntry.ts               | 35 ++++++++++---------
 docker/types.go                               |  7 ++--
 web/logs.go                                   | 14 +++-----
 9 files changed, 63 insertions(+), 50 deletions(-)

diff --git a/assets/components/JSONPayload.vue b/assets/components/JSONPayload.vue
index 3bfc137a..500cf536 100644
--- a/assets/components/JSONPayload.vue
+++ b/assets/components/JSONPayload.vue
@@ -1,6 +1,6 @@
 <template>
   <ul class="fields" @click="expanded = !expanded">
-    <li v-for="(value, name) in logEntry.payload">
+    <li v-for="(value, name) in logEntry.message">
       <template v-if="value">
         <span class="has-text-grey">{{ name }}=</span>
         <span class="has-text-weight-bold" v-html="markSearch(value)"></span>
diff --git a/assets/components/LogViewer.vue b/assets/components/LogViewer.vue
index 68c8c23c..9725851e 100644
--- a/assets/components/LogViewer.vue
+++ b/assets/components/LogViewer.vue
@@ -25,8 +25,8 @@
       </div>
       <div class="line">
         <span class="date" v-if="showTimestamp"> <relative-time :date="item.date"></relative-time></span>
-        <JSONPayload :log-entry="item" :visible-keys="visibleKeys.value" v-if="item.hasPayload()"></JSONPayload>
-        <span class="text" v-html="colorize(item.message)" v-else-if="item.message"></span>
+        <JSONPayload :log-entry="item" :visible-keys="visibleKeys.value" v-if="item.isComplex()"></JSONPayload>
+        <span class="text" v-html="colorize(item.message)" v-if="item.isSimple()"></span>
       </div>
     </li>
   </ul>
diff --git a/assets/components/__snapshots__/LogEventSource.spec.ts.snap b/assets/components/__snapshots__/LogEventSource.spec.ts.snap
index 66276a6c..1af0f3a2 100644
--- a/assets/components/__snapshots__/LogEventSource.spec.ts.snap
+++ b/assets/components/__snapshots__/LogEventSource.spec.ts.snap
@@ -23,7 +23,9 @@ exports[`<LogEventSource /> > render html correctly > should render dates with 1
         </div>
       </div>
     </div>
-    <div class=\\"line\\" data-v-cce5b553=\\"\\"><span class=\\"date\\" data-v-cce5b553=\\"\\"><time datetime=\\"2019-06-12T10:55:42.459Z\\" data-v-cce5b553=\\"\\">today at 10:55:42 AM</time></span><span class=\\"text\\" data-v-cce5b553=\\"\\">&lt;test&gt;foo bar&lt;/test&gt;</span></div>
+    <div class=\\"line\\" data-v-cce5b553=\\"\\"><span class=\\"date\\" data-v-cce5b553=\\"\\"><time datetime=\\"2019-06-12T10:55:42.459Z\\" data-v-cce5b553=\\"\\">today at 10:55:42 AM</time></span>
+      <!--v-if--><span class=\\"text\\" data-v-cce5b553=\\"\\">&lt;test&gt;foo bar&lt;/test&gt;</span>
+    </div>
   </li>
 </ul>"
 `;
@@ -51,7 +53,9 @@ exports[`<LogEventSource /> > render html correctly > should render dates with 2
         </div>
       </div>
     </div>
-    <div class=\\"line\\" data-v-cce5b553=\\"\\"><span class=\\"date\\" data-v-cce5b553=\\"\\"><time datetime=\\"2019-06-12T10:55:42.459Z\\" data-v-cce5b553=\\"\\">today at 10:55:42</time></span><span class=\\"text\\" data-v-cce5b553=\\"\\">&lt;test&gt;foo bar&lt;/test&gt;</span></div>
+    <div class=\\"line\\" data-v-cce5b553=\\"\\"><span class=\\"date\\" data-v-cce5b553=\\"\\"><time datetime=\\"2019-06-12T10:55:42.459Z\\" data-v-cce5b553=\\"\\">today at 10:55:42</time></span>
+      <!--v-if--><span class=\\"text\\" data-v-cce5b553=\\"\\">&lt;test&gt;foo bar&lt;/test&gt;</span>
+    </div>
   </li>
 </ul>"
 `;
@@ -79,7 +83,9 @@ exports[`<LogEventSource /> > render html correctly > should render messages 1`]
         </div>
       </div>
     </div>
-    <div class=\\"line\\" data-v-cce5b553=\\"\\"><span class=\\"date\\" data-v-cce5b553=\\"\\"><time datetime=\\"2019-06-12T10:55:42.459Z\\" data-v-cce5b553=\\"\\">today at 10:55:42 AM</time></span><span class=\\"text\\" data-v-cce5b553=\\"\\">This is a message.</span></div>
+    <div class=\\"line\\" data-v-cce5b553=\\"\\"><span class=\\"date\\" data-v-cce5b553=\\"\\"><time datetime=\\"2019-06-12T10:55:42.459Z\\" data-v-cce5b553=\\"\\">today at 10:55:42 AM</time></span>
+      <!--v-if--><span class=\\"text\\" data-v-cce5b553=\\"\\">This is a message.</span>
+    </div>
   </li>
 </ul>"
 `;
@@ -107,7 +113,9 @@ exports[`<LogEventSource /> > render html correctly > should render messages wit
         </div>
       </div>
     </div>
-    <div class=\\"line\\" data-v-cce5b553=\\"\\"><span class=\\"date\\" data-v-cce5b553=\\"\\"><time datetime=\\"2019-06-12T10:55:42.459Z\\" data-v-cce5b553=\\"\\">today at 10:55:42 AM</time></span><span class=\\"text\\" data-v-cce5b553=\\"\\"><span style=\\"color:#000\\">black<span style=\\"color:#AAA\\">white</span></span></span></div>
+    <div class=\\"line\\" data-v-cce5b553=\\"\\"><span class=\\"date\\" data-v-cce5b553=\\"\\"><time datetime=\\"2019-06-12T10:55:42.459Z\\" data-v-cce5b553=\\"\\">today at 10:55:42 AM</time></span>
+      <!--v-if--><span class=\\"text\\" data-v-cce5b553=\\"\\"><span style=\\"color:#000\\">black<span style=\\"color:#AAA\\">white</span></span></span>
+    </div>
   </li>
 </ul>"
 `;
@@ -135,7 +143,9 @@ exports[`<LogEventSource /> > render html correctly > should render messages wit
         </div>
       </div>
     </div>
-    <div class=\\"line\\" data-v-cce5b553=\\"\\"><span class=\\"date\\" data-v-cce5b553=\\"\\"><time datetime=\\"2019-06-12T10:55:42.459Z\\" data-v-cce5b553=\\"\\">today at 10:55:42 AM</time></span><span class=\\"text\\" data-v-cce5b553=\\"\\">&lt;<mark>test</mark>&gt;foo bar&lt;/test&gt;</span></div>
+    <div class=\\"line\\" data-v-cce5b553=\\"\\"><span class=\\"date\\" data-v-cce5b553=\\"\\"><time datetime=\\"2019-06-12T10:55:42.459Z\\" data-v-cce5b553=\\"\\">today at 10:55:42 AM</time></span>
+      <!--v-if--><span class=\\"text\\" data-v-cce5b553=\\"\\">&lt;<mark>test</mark>&gt;foo bar&lt;/test&gt;</span>
+    </div>
   </li>
   <li data-key=\\"1\\" class=\\"\\" data-v-cce5b553=\\"\\">
     <div class=\\"line-options\\" data-v-cce5b553=\\"\\" style=\\"display: none;\\">
@@ -158,7 +168,9 @@ exports[`<LogEventSource /> > render html correctly > should render messages wit
         </div>
       </div>
     </div>
-    <div class=\\"line\\" data-v-cce5b553=\\"\\"><span class=\\"date\\" data-v-cce5b553=\\"\\"><time datetime=\\"2019-06-12T10:55:42.459Z\\" data-v-cce5b553=\\"\\">today at 10:55:42 AM</time></span><span class=\\"text\\" data-v-cce5b553=\\"\\">&lt;<mark>test</mark>&gt;test bar&lt;/test&gt;</span></div>
+    <div class=\\"line\\" data-v-cce5b553=\\"\\"><span class=\\"date\\" data-v-cce5b553=\\"\\"><time datetime=\\"2019-06-12T10:55:42.459Z\\" data-v-cce5b553=\\"\\">today at 10:55:42 AM</time></span>
+      <!--v-if--><span class=\\"text\\" data-v-cce5b553=\\"\\">&lt;<mark>test</mark>&gt;test bar&lt;/test&gt;</span>
+    </div>
   </li>
 </ul>"
 `;
@@ -186,7 +198,9 @@ exports[`<LogEventSource /> > render html correctly > should render messages wit
         </div>
       </div>
     </div>
-    <div class=\\"line\\" data-v-cce5b553=\\"\\"><span class=\\"date\\" data-v-cce5b553=\\"\\"><time datetime=\\"2019-06-12T10:55:42.459Z\\" data-v-cce5b553=\\"\\">today at 10:55:42 AM</time></span><span class=\\"text\\" data-v-cce5b553=\\"\\">&lt;test&gt;foo bar&lt;/test&gt;</span></div>
+    <div class=\\"line\\" data-v-cce5b553=\\"\\"><span class=\\"date\\" data-v-cce5b553=\\"\\"><time datetime=\\"2019-06-12T10:55:42.459Z\\" data-v-cce5b553=\\"\\">today at 10:55:42 AM</time></span>
+      <!--v-if--><span class=\\"text\\" data-v-cce5b553=\\"\\">&lt;test&gt;foo bar&lt;/test&gt;</span>
+    </div>
   </li>
 </ul>"
 `;
@@ -207,6 +221,5 @@ exports[`<LogEventSource /> > should parse messages 1`] = `
   "date": 2019-06-12T10:55:42.459Z,
   "id": 1,
   "message": "This is a message.",
-  "payload": undefined,
 }
 `;
diff --git a/assets/composables/eventsource.ts b/assets/composables/eventsource.ts
index 34f0d615..9de7a239 100644
--- a/assets/composables/eventsource.ts
+++ b/assets/composables/eventsource.ts
@@ -1,7 +1,7 @@
 import { ref, watch, onUnmounted, ComputedRef } from "vue";
 import debounce from "lodash.debounce";
 
-import { LogEntry, LogEvent } from "@/types/LogEntry";
+import type { LogEntry, LogEvent } from "@/types/LogEntry";
 
 import config from "@/stores/config";
 import { Container } from "@/types/Container";
@@ -11,7 +11,7 @@ function parseMessage(data: string): LogEntry {
 
   const id = e.id;
   const date = new Date(e.ts * 1000);
-  return { id, date, message: e.m, payload: e.d };
+  return { id, date, message: e.m };
 }
 
 export function useEventSource(container: ComputedRef<Container>) {
diff --git a/assets/composables/search.ts b/assets/composables/search.ts
index ef67ed76..85552925 100644
--- a/assets/composables/search.ts
+++ b/assets/composables/search.ts
@@ -29,11 +29,12 @@ export function useSearchFilter() {
       if (searchFilter.value) {
         try {
           return messages.value.filter((d) => {
-            if (d.hasPayload()) {
-              return matchRecord(d.payload, regex.value);
-            } else {
-              return regex.value.test(d.message ?? "");
+            if (d.isSimple()) {
+              return regex.value.test(d.message);
+            } else if (d.isComplex()) {
+              return matchRecord(d.message, regex.value);
             }
+            throw new Error("Unknown message type");
           });
         } catch (e) {
           if (e instanceof SyntaxError) {
diff --git a/assets/types/LogEntry.d.ts b/assets/types/LogEntry.d.ts
index fc1e1a96..a1748342 100644
--- a/assets/types/LogEntry.d.ts
+++ b/assets/types/LogEntry.d.ts
@@ -1,15 +1,16 @@
 export interface LogEntry {
   readonly date: Date;
-  readonly message?: string;
-  readonly payload?: Record<string, any>;
+  readonly message: string | JSONObject;
   readonly id: number;
   event?: string;
   selected?: boolean;
 }
 
 export interface LogEvent {
-  readonly m?: string;
+  readonly m: string | JSONObject;
   readonly ts: number;
-  readonly d?: Record<string, any>;
   readonly id: number;
 }
+
+export type JSONValue = string | number | boolean | JSONObject | Array<JSONValue>;
+export type JSONObject = { [x: string]: JSONValue };
diff --git a/assets/types/VisibleLogEntry.ts b/assets/types/VisibleLogEntry.ts
index 3e252d09..b293669b 100644
--- a/assets/types/VisibleLogEntry.ts
+++ b/assets/types/VisibleLogEntry.ts
@@ -1,44 +1,47 @@
 import { computed, ComputedRef, Ref } from "vue";
-import { LogEntry } from "./LogEntry";
 import { flattenJSON, getDeep } from "@/utils";
+import type { JSONObject, LogEntry } from "./LogEntry";
 
 export class VisibleLogEntry implements LogEntry {
   private readonly entry: LogEntry;
-  filteredPayload: undefined | ComputedRef<Record<string, any>>;
+  filteredMessage: undefined | ComputedRef<Record<string, any>>;
 
   constructor(entry: LogEntry, visibleKeys: Ref<string[][]>) {
     this.entry = entry;
-    this.filteredPayload = undefined;
-    if (this.entry.payload) {
-      const payload = this.entry.payload;
-      this.filteredPayload = computed(() => {
+    this.filteredMessage = undefined;
+    if (this.isComplex()) {
+      const message = this.message;
+      this.filteredMessage = computed(() => {
         if (!visibleKeys.value.length) {
-          return flattenJSON(payload);
+          return flattenJSON(message);
         } else {
-          return visibleKeys.value.reduce((acc, attr) => ({ ...acc, [attr.join(".")]: getDeep(payload, attr) }), {});
+          return visibleKeys.value.reduce((acc, attr) => ({ ...acc, [attr.join(".")]: getDeep(message, attr) }), {});
         }
       });
     }
   }
 
-  public hasPayload(): this is { payload: Record<string, any> } {
-    return this.entry.payload !== undefined;
+  public isComplex(): this is { message: JSONObject } {
+    return typeof this.entry.message === "object";
   }
 
-  public get unfilteredPayload(): Record<string, any> | undefined {
-    return this.entry.payload;
+  public isSimple(): this is { message: string } {
+    return !this.isComplex();
   }
 
-  public get payload(): Record<string, any> | undefined {
-    return this.filteredPayload?.value;
+  public get unfilteredPayload(): JSONObject {
+    if (typeof this.entry.message === "string") {
+      throw new Error("Cannot get unfiltered payload of a simple message");
+    }
+    return this.entry.message;
   }
 
   public get date(): Date {
     return this.entry.date;
   }
 
-  public get message(): string | undefined {
-    return this.entry.message;
+  public get message(): string | JSONObject {
+    return this.filteredMessage?.value ?? this.entry.message;
   }
 
   public get id(): number {
diff --git a/docker/types.go b/docker/types.go
index b3962ce4..441d1e69 100644
--- a/docker/types.go
+++ b/docker/types.go
@@ -28,8 +28,7 @@ type ContainerEvent struct {
 }
 
 type LogEvent struct {
-	Message   string                 `json:"m,omitempty"`
-	Timestamp int64                  `json:"ts"`
-	Data      map[string]interface{} `json:"d,omitempty"`
-	Id        uint32                  `json:"id,omitempty"`
+	Message   any    `json:"m,omitempty"`
+	Timestamp int64  `json:"ts"`
+	Id        uint32 `json:"id,omitempty"`
 }
diff --git a/web/logs.go b/web/logs.go
index 0cabe6ed..9ee4a210 100644
--- a/web/logs.go
+++ b/web/logs.go
@@ -51,33 +51,29 @@ func (h *handler) downloadLogs(w http.ResponseWriter, r *http.Request) {
 func logEventIterator(reader *bufio.Reader) func() (docker.LogEvent, error) {
 	return func() (docker.LogEvent, error) {
 		message, readerError := reader.ReadString('\n')
+
 		h := fnv.New32a()
 		h.Write([]byte(message))
-		logEvent := docker.LogEvent{Id: h.Sum32()}
+
+		logEvent := docker.LogEvent{Id: h.Sum32(), Message: message}
 
 		if index := strings.IndexAny(message, " "); index != -1 {
 			logId := message[:index]
 			if timestamp, err := time.Parse(time.RFC3339Nano, logId); err == nil {
 				logEvent.Timestamp = timestamp.Unix()
 				message = strings.TrimSuffix(message[index+1:], "\n")
+				logEvent.Message = message
 				if strings.HasPrefix(message, "{") && strings.HasSuffix(message, "}") {
 					var data map[string]interface{}
 					if err := json.Unmarshal([]byte(message), &data); err != nil {
 						log.Errorf("json unmarshal error while streaming %v", err.Error())
 					}
-					logEvent.Data = data
-				} else {
-					logEvent.Message = message
+					logEvent.Message = data
 				}
-			} else {
-				logEvent.Message = message
 			}
-		} else {
-			logEvent.Message = message
 		}
 
 		return logEvent, readerError
-
 	}
 }