From 1e5264a00b96783c1da310b04482a579ac8b8269 Mon Sep 17 00:00:00 2001
From: Amir Raminfar <findamir@gmail.com>
Date: Fri, 4 Oct 2024 13:47:12 -0700
Subject: [PATCH] feat: adds support for levels (#3306)

---
 assets/auto-imports.d.ts                      |   2 +
 assets/components.d.ts                        |   1 +
 .../ContainerActionsToolbar.vue               | 115 ++++++++++++------
 .../components/LogViewer/EventSource.spec.ts  |   4 +-
 assets/composable/eventStreams.ts             |  10 +-
 assets/composable/logContext.ts               |  16 +++
 assets/models/LogEntry.ts                     |  12 +-
 internal/docker/level_guesser.go              |  23 ++--
 internal/docker/level_guesser_test.go         |   7 +-
 internal/web/logs.go                          |  60 ++++++---
 locales/en.yml                                |   4 +-
 11 files changed, 182 insertions(+), 72 deletions(-)

diff --git a/assets/auto-imports.d.ts b/assets/auto-imports.d.ts
index d5a19bef..610953d2 100644
--- a/assets/auto-imports.d.ts
+++ b/assets/auto-imports.d.ts
@@ -16,6 +16,7 @@ declare global {
   const DEFAULT_SETTINGS: typeof import('./stores/settings')['DEFAULT_SETTINGS']
   const EffectScope: typeof import('vue')['EffectScope']
   const acceptHMRUpdate: typeof import('pinia')['acceptHMRUpdate']
+  const allLevels: typeof import('./composable/logContext')['allLevels']
   const arrayEquals: typeof import('./utils/index')['arrayEquals']
   const asyncComputed: typeof import('@vueuse/core')['asyncComputed']
   const autoResetRef: typeof import('@vueuse/core')['autoResetRef']
@@ -392,6 +393,7 @@ declare module 'vue' {
     readonly DEFAULT_SETTINGS: UnwrapRef<typeof import('./stores/settings')['DEFAULT_SETTINGS']>
     readonly EffectScope: UnwrapRef<typeof import('vue')['EffectScope']>
     readonly acceptHMRUpdate: UnwrapRef<typeof import('pinia')['acceptHMRUpdate']>
+    readonly allLevels: UnwrapRef<typeof import('./composable/logContext')['allLevels']>
     readonly arrayEquals: UnwrapRef<typeof import('./utils/index')['arrayEquals']>
     readonly asyncComputed: UnwrapRef<typeof import('@vueuse/core')['asyncComputed']>
     readonly autoResetRef: UnwrapRef<typeof import('@vueuse/core')['autoResetRef']>
diff --git a/assets/components.d.ts b/assets/components.d.ts
index 3b40ba7a..a3add375 100644
--- a/assets/components.d.ts
+++ b/assets/components.d.ts
@@ -65,6 +65,7 @@ declare module 'vue' {
     '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:gauge': typeof import('~icons/mdi/gauge')['default']
     'Mdi:hamburgerMenu': typeof import('~icons/mdi/hamburger-menu')['default']
     'Mdi:hexagonMultiple': typeof import('~icons/mdi/hexagon-multiple')['default']
     'Mdi:key': typeof import('~icons/mdi/key')['default']
diff --git a/assets/components/ContainerViewer/ContainerActionsToolbar.vue b/assets/components/ContainerViewer/ContainerActionsToolbar.vue
index 1714546f..8e0eeb8c 100644
--- a/assets/components/ContainerViewer/ContainerActionsToolbar.vue
+++ b/assets/components/ContainerViewer/ContainerActionsToolbar.vue
@@ -1,6 +1,6 @@
 <template>
   <div class="dropdown dropdown-end dropdown-hover">
-    <label tabindex="0" class="btn btn-ghost btn-sm gap-0.5 px-2">
+    <label tabindex="0" class="btn btn-ghost btn-sm w-10 gap-0.5 px-2">
       <carbon:circle-solid class="w-2.5 text-red" v-if="streamConfig.stderr" />
       <carbon:circle-solid class="w-2.5 text-blue" v-if="streamConfig.stdout" />
     </label>
@@ -28,46 +28,73 @@
       </li>
       <li class="line"></li>
       <li>
-        <a
-          @click="
-            streamConfig.stdout = true;
-            streamConfig.stderr = true;
-          "
-        >
-          <div class="flex size-4 gap-0.5">
-            <template v-if="streamConfig.stderr && streamConfig.stdout">
-              <carbon:circle-solid class="w-2 text-red" />
-              <carbon:circle-solid class="w-2 text-blue" />
-            </template>
-          </div>
-          {{ $t("toolbar.show-all") }}
-        </a>
+        <details>
+          <summary>
+            <div class="flex w-4">
+              <carbon:circle-solid class="w-2.5 text-red" v-if="streamConfig.stderr" />
+              <carbon:circle-solid class="w-2.5 text-blue" v-if="streamConfig.stdout" />
+            </div>
+            Streams
+          </summary>
+          <ul class="menu">
+            <li>
+              <a
+                @click="
+                  streamConfig.stdout = true;
+                  streamConfig.stderr = true;
+                "
+              >
+                <mdi:check class="w-4" v-if="streamConfig.stdout == true && streamConfig.stderr == true" />
+                <div v-else class="w-4"></div>
+                {{ $t("toolbar.show-all") }}
+              </a>
+            </li>
+            <li>
+              <a
+                @click="
+                  streamConfig.stdout = true;
+                  streamConfig.stderr = false;
+                "
+              >
+                <mdi:check class="w-4" v-if="streamConfig.stdout == true && streamConfig.stderr == false" />
+                <div v-else class="w-4"></div>
+                {{ $t("toolbar.show", { std: "STDOUT" }) }}
+              </a>
+            </li>
+            <li>
+              <a
+                @click="
+                  streamConfig.stdout = false;
+                  streamConfig.stderr = true;
+                "
+              >
+                <mdi:check class="w-4" v-if="streamConfig.stdout == false && streamConfig.stderr == true" />
+                <div v-else class="w-4"></div>
+                {{ $t("toolbar.show", { std: "STDERR" }) }}
+              </a>
+            </li>
+          </ul>
+        </details>
       </li>
       <li>
-        <a
-          @click="
-            streamConfig.stdout = true;
-            streamConfig.stderr = false;
-          "
-        >
-          <div class="flex size-4 flex-col gap-1">
-            <carbon:circle-solid class="w-2 text-blue" v-if="!streamConfig.stderr && streamConfig.stdout" />
-          </div>
-          {{ $t("toolbar.show", { std: "STDOUT" }) }}
-        </a>
-      </li>
-      <li>
-        <a
-          @click="
-            streamConfig.stdout = false;
-            streamConfig.stderr = true;
-          "
-        >
-          <div class="flex size-4 flex-col gap-1">
-            <carbon:circle-solid class="w-2 text-red" v-if="streamConfig.stderr && !streamConfig.stdout" />
-          </div>
-          {{ $t("toolbar.show", { std: "STDERR" }) }}
-        </a>
+        <details>
+          <summary>
+            <mdi:gauge />
+            Levels
+          </summary>
+          <ul class="menu">
+            <li v-for="level in allLevels">
+              <a class="capitalize" @click="levels.has(level) ? levels.delete(level) : levels.add(level)">
+                <mdi:check class="w-4" v-if="levels.has(level)" />
+                <div v-else class="w-4"></div>
+
+                <div class="flex">
+                  <div class="badge" :data-level="level">{{ level }}</div>
+                </div>
+              </a>
+            </li>
+          </ul>
+        </details>
       </li>
 
       <!-- Container Actions (Enabled via config) -->
@@ -108,11 +135,12 @@
 
 <script lang="ts" setup>
 import { Container } from "@/models/Container";
+import { allLevels } from "@/composable/logContext";
 import LogAnalytics from "../LogViewer/LogAnalytics.vue";
 
 const { showSearch } = useSearchFilter();
 const { enableActions } = config;
-const { streamConfig, hasComplexLogs } = useLoggingContext();
+const { streamConfig, hasComplexLogs, levels } = useLoggingContext();
 const showDrawer = useDrawer();
 
 const { container } = defineProps<{ container: Container }>();
@@ -151,4 +179,11 @@ li.line {
 a {
   @apply whitespace-nowrap;
 }
+
+.menu li ul {
+  margin-inline-start: 0;
+  &:before {
+    display: none;
+  }
+}
 </style>
diff --git a/assets/components/LogViewer/EventSource.spec.ts b/assets/components/LogViewer/EventSource.spec.ts
index a74dd59c..41d5a2f9 100644
--- a/assets/components/LogViewer/EventSource.spec.ts
+++ b/assets/components/LogViewer/EventSource.spec.ts
@@ -11,6 +11,7 @@ import { createRouter, createWebHistory } from "vue-router";
 import { default as Component } from "./EventSource.vue";
 import LogViewer from "@/components/LogViewer/LogViewer.vue";
 import { Container } from "@/models/Container";
+import { Level } from "@/models/LogEntry";
 
 vi.mock("@/stores/config", () => ({
   __esModule: true,
@@ -82,6 +83,7 @@ describe("<ContainerEventSource />", () => {
             containers: computed(() => [{ id: "abc", image: "test:v123", host: "localhost" }]),
             streamConfig: reactive({ stdout: true, stderr: true }),
             hasComplexLogs: ref(false),
+            levels: new Set<Level>(["info"]),
           },
         },
       },
@@ -97,7 +99,7 @@ describe("<ContainerEventSource />", () => {
     });
   }
 
-  const sourceUrl = "/api/hosts/localhost/containers/abc/logs/stream?stdout=1&stderr=1";
+  const sourceUrl = "/api/hosts/localhost/containers/abc/logs/stream?stdout=1&stderr=1&levels=info";
 
   test("renders loading correctly", async () => {
     const wrapper = createLogEventSource();
diff --git a/assets/composable/eventStreams.ts b/assets/composable/eventStreams.ts
index 784f9edc..2e676347 100644
--- a/assets/composable/eventStreams.ts
+++ b/assets/composable/eventStreams.ts
@@ -104,7 +104,7 @@ function useLogStream(url: Ref<string>, loadMoreUrl?: Ref<string>) {
     buffer.value = [];
   }
 
-  const { streamConfig, hasComplexLogs } = useLoggingContext();
+  const { streamConfig, hasComplexLogs, levels } = useLoggingContext();
 
   const params = computed(() => {
     const params = Object.entries(toValue(streamConfig))
@@ -115,6 +115,8 @@ function useLogStream(url: Ref<string>, loadMoreUrl?: Ref<string>) {
       params["filter"] = debouncedSearchFilter.value;
     }
 
+    params["levels"] = [...levels.value].join(",");
+
     return params;
   });
 
@@ -194,7 +196,11 @@ function useLogStream(url: Ref<string>, loadMoreUrl?: Ref<string>) {
 
   onScopeDispose(() => close());
 
-  watch(messages, () => (hasComplexLogs.value = messages.value.some((m) => m instanceof ComplexLogEntry)));
+  watch(messages, () => {
+    if (messages.value.length > 1) {
+      hasComplexLogs.value = messages.value.some((m) => m instanceof ComplexLogEntry);
+    }
+  });
 
   return { messages, loadOlderLogs, isLoadingMore, hasComplexLogs };
 }
diff --git a/assets/composable/logContext.ts b/assets/composable/logContext.ts
index c6192961..20f5901d 100644
--- a/assets/composable/logContext.ts
+++ b/assets/composable/logContext.ts
@@ -1,12 +1,26 @@
 import { Container } from "@/models/Container";
+import { Level } from "@/models/LogEntry";
 
 type LogContext = {
   streamConfig: { stdout: boolean; stderr: boolean };
   containers: Container[];
   loadingMore: boolean;
   hasComplexLogs: boolean;
+  levels: Set<Level>;
 };
 
+export const allLevels: Level[] = [
+  "info",
+  "debug",
+  "warn",
+  "error",
+  "fatal",
+  "trace",
+  "warning",
+  "critical",
+  "unknown",
+];
+
 // export for testing
 export const loggingContextKey = Symbol("loggingContext") as InjectionKey<LogContext>;
 const searchParams = new URLSearchParams(window.location.search);
@@ -21,6 +35,7 @@ export const provideLoggingContext = (containers: Ref<Container[]>) => {
       containers,
       loadingMore: false,
       hasComplexLogs: false,
+      levels: new Set<Level>(allLevels),
     }),
   );
 };
@@ -33,6 +48,7 @@ export const useLoggingContext = () => {
       containers: [],
       loadingMore: false,
       hasComplexLogs: false,
+      levels: new Set<Level>(allLevels),
     }),
   );
 
diff --git a/assets/models/LogEntry.ts b/assets/models/LogEntry.ts
index 754ccb53..bffd8031 100644
--- a/assets/models/LogEntry.ts
+++ b/assets/models/LogEntry.ts
@@ -9,7 +9,17 @@ export type JSONValue = string | number | boolean | JSONObject | Array<JSONValue
 export type JSONObject = { [x: string]: JSONValue };
 export type Position = "start" | "end" | "middle" | undefined;
 export type Std = "stdout" | "stderr";
-export type Level = "debug" | "info" | "warn" | "error" | "fatal" | "trace" | "unknown";
+export type Level =
+  | "error"
+  | "warn"
+  | "warning"
+  | "info"
+  | "debug"
+  | "trace"
+  | "severe"
+  | "critical"
+  | "fatal"
+  | "unknown";
 export interface LogEvent {
   readonly m: string | JSONObject;
   readonly ts: number;
diff --git a/internal/docker/level_guesser.go b/internal/docker/level_guesser.go
index 45900e51..137c468c 100644
--- a/internal/docker/level_guesser.go
+++ b/internal/docker/level_guesser.go
@@ -8,7 +8,9 @@ import (
 	orderedmap "github.com/wk8/go-ordered-map/v2"
 )
 
-var keyValueRegex = regexp.MustCompile(`level=(\w+)`)
+var SupportedLogLevels map[string]struct{}
+
+// Changing this also needs to change the logContext.ts file
 var logLevels = []string{"error", "warn", "warning", "info", "debug", "trace", "severe", "critical", "fatal"}
 var plainLevels = map[string]*regexp.Regexp{}
 var bracketLevels = map[string]*regexp.Regexp{}
@@ -21,6 +23,12 @@ func init() {
 	for _, level := range logLevels {
 		bracketLevels[level] = regexp.MustCompile("(?i)\\[ ?" + level + " ?\\]")
 	}
+
+	SupportedLogLevels = make(map[string]struct{}, len(logLevels)+1)
+	for _, level := range logLevels {
+		SupportedLogLevels[level] = struct{}{}
+	}
+	SupportedLogLevels["unknown"] = struct{}{}
 }
 
 func guessLogLevel(logEvent *LogEvent) string {
@@ -28,26 +36,27 @@ func guessLogLevel(logEvent *LogEvent) string {
 	case string:
 		value = stripANSI(value)
 		for _, level := range logLevels {
+			// Look for the level at the beginning of the message
 			if plainLevels[level].MatchString(value) {
 				return level
 			}
 
+			// Look for the level in brackets
 			if bracketLevels[level].MatchString(value) {
 				return level
 			}
 
+			// Look for the level in the middle of the message that are uppercase
 			if strings.Contains(value, " "+strings.ToUpper(level)+" ") {
 				return level
 			}
 		}
 
-		if matches := keyValueRegex.FindStringSubmatch(value); matches != nil {
-			return matches[1]
-		}
+		return "unknown"
 
 	case *orderedmap.OrderedMap[string, any]:
 		if value == nil {
-			return ""
+			return "unknown"
 		}
 		if level, ok := value.Get("level"); ok {
 			if level, ok := level.(string); ok {
@@ -61,7 +70,7 @@ func guessLogLevel(logEvent *LogEvent) string {
 
 	case *orderedmap.OrderedMap[string, string]:
 		if value == nil {
-			return ""
+			return "unknown"
 		}
 		if level, ok := value.Get("level"); ok {
 			return strings.ToLower(level)
@@ -79,5 +88,5 @@ func guessLogLevel(logEvent *LogEvent) string {
 		log.Debug().Type("type", value).Msg("unknown logEvent type")
 	}
 
-	return ""
+	return "unknown"
 }
diff --git a/internal/docker/level_guesser_test.go b/internal/docker/level_guesser_test.go
index 71517537..91102751 100644
--- a/internal/docker/level_guesser_test.go
+++ b/internal/docker/level_guesser_test.go
@@ -20,7 +20,6 @@ func TestGuessLogLevel(t *testing.T) {
 		{"debug Something happened", "debug"},
 		{"TRACE: Something happened", "trace"},
 		{"FATAL: Something happened", "fatal"},
-		{"level=error Something went wrong", "error"},
 		{"[ERROR] Something went wrong", "error"},
 		{"[error] Something went wrong", "error"},
 		{"[ ERROR ] Something went wrong", "error"},
@@ -28,7 +27,7 @@ func TestGuessLogLevel(t *testing.T) {
 		{"[test] [error] Something went wrong", "error"},
 		{"[foo] [ ERROR] Something went wrong", "error"},
 		{"123 ERROR Something went wrong", "error"},
-		{"123 Something went wrong", ""},
+		{"123 Something went wrong", "unknown"},
 		{orderedmap.New[string, string](
 			orderedmap.WithInitialData(
 				orderedmap.Pair[string, string]{Key: "key", Value: "value"},
@@ -53,8 +52,8 @@ func TestGuessLogLevel(t *testing.T) {
 				orderedmap.Pair[string, any]{Key: "severity", Value: "info"},
 			),
 		), "info"},
-		{nilOrderedMap, ""},
-		{nil, ""},
+		{nilOrderedMap, "unknown"},
+		{nil, "unknown"},
 	}
 
 	for _, test := range tests {
diff --git a/internal/web/logs.go b/internal/web/logs.go
index 99aabdd8..ddad15c8 100644
--- a/internal/web/logs.go
+++ b/internal/web/logs.go
@@ -141,6 +141,15 @@ func (h *handler) fetchLogsBetweenDates(w http.ResponseWriter, r *http.Request)
 		}
 	}
 
+	levels := make(map[string]struct{})
+	if r.URL.Query().Has("levels") {
+		for _, level := range strings.Split(r.URL.Query().Get("levels"), ",") {
+			levels[level] = struct{}{}
+		}
+	} else {
+		levels = docker.SupportedLogLevels
+	}
+
 	encoder := json.NewEncoder(w)
 	for {
 		if buffer.Len() > minimum {
@@ -157,25 +166,30 @@ func (h *handler) fetchLogsBetweenDates(w http.ResponseWriter, r *http.Request)
 		}
 
 		for event := range events {
-			if regex != nil {
-				if search.Search(regex, event) {
-					buffer.Push(event)
-				}
-			} else {
-				if onlyComplex {
-					if _, ok := event.Message.(string); ok {
-						continue
-					}
+			if everything {
+				if err := encoder.Encode(event); err != nil {
+					log.Error().Err(err).Msg("error encoding log event")
 				}
+				continue
+			}
 
-				if everything {
-					if err := encoder.Encode(event); err != nil {
-						log.Error().Err(err).Msg("error encoding log event")
-					}
-				} else {
-					buffer.Push(event)
+			if onlyComplex {
+				if _, ok := event.Message.(string); ok {
+					continue
 				}
 			}
+
+			if regex != nil {
+				if !search.Search(regex, event) {
+					continue
+				}
+			}
+
+			if _, ok := levels[event.Level]; !ok {
+				continue
+			}
+
+			buffer.Push(event)
 		}
 
 		if everything || from.Before(containerService.Container.Created) {
@@ -272,6 +286,15 @@ func streamLogsForContainers(w http.ResponseWriter, r *http.Request, multiHostCl
 	events := make(chan *docker.ContainerEvent, 1)
 	backfill := make(chan []*docker.LogEvent)
 
+	levels := make(map[string]struct{})
+	if r.URL.Query().Has("levels") {
+		for _, level := range strings.Split(r.URL.Query().Get("levels"), ",") {
+			levels[level] = struct{}{}
+		}
+	} else {
+		levels = docker.SupportedLogLevels
+	}
+
 	if r.URL.Query().Has("filter") {
 		var err error
 		regex, err = search.ParseRegex(r.URL.Query().Get("filter"))
@@ -309,6 +332,9 @@ func streamLogsForContainers(w http.ResponseWriter, r *http.Request, multiHostCl
 					}
 
 					for log := range logs {
+						if _, ok := levels[log.Level]; !ok {
+							continue
+						}
 						if search.Search(regex, log) {
 							events = append(events, log)
 						}
@@ -369,6 +395,10 @@ loop:
 					continue
 				}
 			}
+
+			if _, ok := levels[logEvent.Level]; !ok {
+				continue
+			}
 			sseWriter.Message(logEvent)
 		case container := <-newContainers:
 			events <- &docker.ContainerEvent{ActorID: container.ID, Name: "container-started", Host: container.Host}
diff --git a/locales/en.yml b/locales/en.yml
index a174fc7d..2442b2cb 100644
--- a/locales/en.yml
+++ b/locales/en.yml
@@ -2,8 +2,8 @@ toolbar:
   clear: Clear
   download: Download
   search: Search
-  show: Show only {std}
-  show-all: Show all streams
+  show: Show {std}
+  show-all: Show all
   stop: Stop
   start: Start
   restart: Restart