feat: adds show hostname and container name to dropdown in mutli log mode (#3406)

Author: amir20

assets/components.d.ts

@@ -95,6 +95,7 @@ declare module 'vue' {
     'Ph:stack': typeof import('~icons/ph/stack')['default']
     'Ph:stackSimple': typeof import('~icons/ph/stack-simple')['default']
     Popup: typeof import('./components/Popup.vue')['default']
+    RandomColorTag: typeof import('./components/LogViewer/RandomColorTag.vue')['default']
     Releases: typeof import('./components/Releases.vue')['default']
     RouterLink: typeof import('vue-router')['RouterLink']
     RouterView: typeof import('vue-router')['RouterView']

assets/components/ContainerViewer/ContainerLog.vue

@@ -17,7 +17,6 @@
         :stream-source="useContainerStream"
         :entity="container"
         :visible-keys="visibleKeys"
-        :show-container-name="false"
       />
     </template>
   </ScrollableView>
@@ -46,5 +45,8 @@ const container = store.currentContainer(toRef(() => id));
 const visibleKeys = persistentVisibleKeysForContainer(container);
 const viewer = useTemplateRef<ComponentExposed<typeof ViewerWithSource>>("viewer");
 
-provideLoggingContext(toRef(() => [container.value]));
+provideLoggingContext(
+  toRef(() => [container.value]),
+  { showContainerName: false, showHostname: false },
+);
 </script>

assets/components/GroupedViewer/GroupedLog.vue

@@ -17,7 +17,6 @@
         :stream-source="useGroupedStream"
         :entity="group"
         :visible-keys="new Map<string[], boolean>()"
-        :show-container-name="true"
       />
     </template>
   </ScrollableView>
@@ -43,5 +42,8 @@ const { customGroups } = storeToRefs(swarmStore);
 
 const group = computed(() => customGroups.value.find((g) => g.name === name) ?? new GroupedContainers("", []));
 
-provideLoggingContext(toRef(() => group.value.containers));
+provideLoggingContext(
+  toRef(() => group.value.containers),
+  { showContainerName: true, showHostname: false },
+);
 </script>

assets/components/LogViewer/ComplexLogItem.vue

@@ -1,5 +1,5 @@
 <template>
-  <LogItem :logEntry :showContainerName @click="showDrawer(LogDetails, { entry: logEntry })" class="clickable">
+  <LogItem :logEntry @click="showDrawer(LogDetails, { entry: logEntry })" class="clickable">
     <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>
@@ -17,7 +17,7 @@ import stripAnsi from "strip-ansi";
 import { type ComplexLogEntry } from "@/models/LogEntry";
 import LogDetails from "./LogDetails.vue";
 
-const { logEntry, showContainerName = false } = defineProps<{
+const { logEntry } = defineProps<{
   logEntry: ComplexLogEntry;
   showContainerName?: boolean;
 }>();

assets/components/LogViewer/LogItem.vue

@@ -1,8 +1,9 @@
 <template>
   <div class="relative flex w-full items-start gap-x-2 group-[.compact]:items-stretch">
-    <LogStd :std="logEntry.std" class="select-none" v-if="showStd" />
-    <ContainerName class="shrink-0 select-none" :id="logEntry.containerID" v-if="showContainerName" />
-    <LogDate :date="logEntry.date" v-if="showTimestamp" class="select-none" />
+    <LogStd :std="logEntry.std" class="shrink-0 select-none" v-if="showStd" />
+    <RandomColorTag class="shrink-0 select-none" :value="host.name" v-if="showHostname" />
+    <RandomColorTag class="shrink-0 select-none" :value="container.name" v-if="showContainerName" />
+    <LogDate :date="logEntry.date" v-if="showTimestamp" class="shrink-0 select-none" />
     <LogLevel
       class="flex select-none"
       :level="logEntry.level"
@@ -14,10 +15,16 @@
 <script lang="ts" setup>
 import { LogEntry, SimpleLogEntry } from "@/models/LogEntry";
 
-const { showContainerName = false, logEntry } = defineProps<{
+const { logEntry } = defineProps<{
   logEntry: LogEntry<any>;
-  showContainerName?: boolean;
 }>();
+const { showHostname, showContainerName } = useLoggingContext();
+
+const { currentContainer } = useContainerStore();
+const { hosts } = useHosts();
+
+const container = currentContainer(toRef(() => logEntry.containerID));
+const host = computed(() => hosts.value[container.value.host]);
 </script>
 <style scoped lang="postcss">
 .log-wrapper :deep(a) {

assets/components/LogViewer/LogList.vue

@@ -8,7 +8,7 @@
       :data-time="item.date.getTime()"
       class="group/entry"
     >
-      <component :is="item.getComponent()" :log-entry="item" :show-container-name="showContainerName" />
+      <component :is="item.getComponent()" :log-entry="item" />
     </li>
   </ul>
 </template>
@@ -20,7 +20,6 @@ const { loading, progress, currentDate } = useScrollContext();
 
 const { messages } = defineProps<{
   messages: LogEntry<string | JSONObject>[];
-  showContainerName: boolean;
 }>();
 
 watchEffect(() => {

assets/components/LogViewer/LogViewer.vue

@@ -1,5 +1,5 @@
 <template>
-  <LogList :messages="visibleMessages" :show-container-name="showContainerName" />
+  <LogList :messages="visibleMessages" />
 </template>
 
 <script lang="ts" setup>
@@ -8,7 +8,6 @@ import { type JSONObject, LogEntry } from "@/models/LogEntry";
 const props = defineProps<{
   messages: LogEntry<string | JSONObject>[];
   visibleKeys: Map<string[], boolean>;
-  showContainerName: boolean;
 }>();
 
 const { messages, visibleKeys } = toRefs(props);

assets/components/LogViewer/MultiContainerActionToolbar.vue

@@ -60,6 +60,21 @@
           {{ $t("toolbar.show", { std: "STDERR" }) }}
         </a>
       </li>
+      <li class="line"></li>
+      <li>
+        <a @click="showHostname = !showHostname">
+          <mdi:check class="w-4" v-if="showHostname" />
+          <div v-else class="w-4"></div>
+          {{ $t("toolbar.show-hostname") }}
+        </a>
+      </li>
+      <li>
+        <a @click="showContainerName = !showContainerName">
+          <mdi:check class="w-4" v-if="showContainerName" />
+          <div v-else class="w-4"></div>
+          {{ $t("toolbar.show-container-name") }}
+        </a>
+      </li>
     </ul>
   </div>
 </template>
@@ -69,7 +84,7 @@ const { showSearch } = useSearchFilter();
 
 const clear = defineEmit();
 
-const { streamConfig } = useLoggingContext();
+const { streamConfig, showHostname, showContainerName } = useLoggingContext();
 </script>
 
 <style scoped lang="postcss">

assets/components/LogViewer/ContainerName.vue renamed to assets/components/LogViewer/RandomColorTag.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="tag grid w-40 overflow-hidden rounded text-center text-sm text-white">
     <div class="random-color col-start-1 row-start-1 brightness-75"></div>
-    <div class="col-start-1 row-start-1 truncate px-2 brightness-100 [direction:rtl]">{{ containerNames[id] }}</div>
+    <div class="col-start-1 row-start-1 truncate px-2 brightness-100 [direction:rtl]">{{ value }}</div>
   </div>
 </template>
 <script lang="ts">
@@ -24,14 +24,11 @@ const colors = [
 ] as const;
 </script>
 <script lang="ts" setup>
-const containerStore = useContainerStore();
-const { containerNames } = storeToRefs(containerStore);
-
-const { id } = defineProps<{
-  id: string;
+const { value } = defineProps<{
+  value: string;
 }>();
 
-const color = computed(() => colors[Math.abs(hashCode(id)) % colors.length]);
+const color = computed(() => colors[Math.abs(hashCode(value)) % colors.length]);
 </script>
 
 <style lang="postcss" scoped>

assets/components/LogViewer/SimpleLogItem.vue

@@ -1,5 +1,5 @@
 <template>
-  <LogItem :logEntry :showContainerName>
+  <LogItem :logEntry>
     <div
       class="log-wrapper whitespace-pre-wrap [word-break:break-word] group-[.disable-wrap]:whitespace-nowrap"
       v-html="linkify(colorize(logEntry.message))"
@@ -23,9 +23,8 @@ const ansiConvertor = new AnsiConvertor({
   bg: "oklch(var(--base-color))",
 });
 
-const { showContainerName = false } = defineProps<{
+defineProps<{
   logEntry: SimpleLogEntry;
-  showContainerName?: boolean;
 }>();
 
 const colorize = (value: string) => ansiConvertor.toHtml(value);