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

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/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);

assets/components/LogViewer/ViewerWithSource.vue

@@ -1,6 +1,6 @@
 <template>
   <EventSource ref="source" #default="{ messages }" :stream-source="streamSource" :entity="entity">
-    <LogViewer :messages="messages" :visible-keys="visibleKeys" :show-container-name="showContainerName" />
+    <LogViewer :messages="messages" :visible-keys="visibleKeys" />
   </EventSource>
 </template>
 
@@ -9,10 +9,9 @@ import EventSource from "@/components/LogViewer/EventSource.vue";
 import { LogStreamSource } from "@/composable/eventStreams";
 import { ComponentExposed } from "vue-component-type-helpers";
 
-const { streamSource, visibleKeys, showContainerName, entity } = defineProps<{
+const { streamSource, visibleKeys, entity } = defineProps<{
   streamSource: (t: Ref<T>) => LogStreamSource;
   visibleKeys: Map<string[], boolean>;
-  showContainerName: boolean;
   entity: T;
 }>();
 

assets/components/LogViewer/__snapshots__/EventSource.spec.ts.snap

@@ -1,12 +1,13 @@
 // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
 exports[`<ContainerEventSource /> > render html correctly > should render dates with 12 hour style 1`] = `
-"<ul data-v-cf9ff940="" class="events group pt-4 medium">
+"<ul data-v-cf9ff940="" class="events group pt-4 medium" show-container-name="false">
   <li data-v-cf9ff940="" data-key="1" data-time="1560336942459" class="group/entry">
     <div data-v-1344ff3d="" data-v-cf9ff940="" class="relative flex w-full items-start gap-x-2 group-[.compact]:items-stretch">
       <!--v-if-->
       <!--v-if-->
-      <div data-v-961504e7="" data-v-1344ff3d="" class="tag inline-flex items-center justify-center rounded bg-base-lighter px-2 py-[0.2em] !items-start select-none" size="small">
+      <!--v-if-->
+      <div data-v-961504e7="" data-v-1344ff3d="" class="tag inline-flex items-center justify-center rounded bg-base-lighter px-2 py-[0.2em] !items-start shrink-0 select-none" size="small">
         <div class="inline-flex gap-2 whitespace-nowrap text-blue"><time datetime="2019-06-12T10:55:42.459Z" class="mobile-hidden">06/12/2019</time><time datetime="2019-06-12T10:55:42.459Z">10:55:42 AM</time></div>
       </div>
       <div data-v-e625cddd="" data-v-1344ff3d="" class="mt-1.5 size-2.5 flex-none rounded-lg flex select-none"></div>
@@ -20,12 +21,13 @@ exports[`<ContainerEventSource /> > render html correctly > should render dates
 `;
 
 exports[`<ContainerEventSource /> > render html correctly > should render dates with 24 hour style 1`] = `
-"<ul data-v-cf9ff940="" class="events group pt-4 medium">
+"<ul data-v-cf9ff940="" class="events group pt-4 medium" show-container-name="false">
   <li data-v-cf9ff940="" data-key="1" data-time="1560336942459" class="group/entry">
     <div data-v-1344ff3d="" data-v-cf9ff940="" class="relative flex w-full items-start gap-x-2 group-[.compact]:items-stretch">
       <!--v-if-->
       <!--v-if-->
-      <div data-v-961504e7="" data-v-1344ff3d="" class="tag inline-flex items-center justify-center rounded bg-base-lighter px-2 py-[0.2em] !items-start select-none" size="small">
+      <!--v-if-->
+      <div data-v-961504e7="" data-v-1344ff3d="" class="tag inline-flex items-center justify-center rounded bg-base-lighter px-2 py-[0.2em] !items-start shrink-0 select-none" size="small">
         <div class="inline-flex gap-2 whitespace-nowrap text-blue"><time datetime="2019-06-12T10:55:42.459Z" class="mobile-hidden">06/12/2019</time><time datetime="2019-06-12T10:55:42.459Z">10:55:42</time></div>
       </div>
       <div data-v-e625cddd="" data-v-1344ff3d="" class="mt-1.5 size-2.5 flex-none rounded-lg flex select-none"></div>
@@ -39,12 +41,13 @@ exports[`<ContainerEventSource /> > render html correctly > should render dates
 `;
 
 exports[`<ContainerEventSource /> > render html correctly > should render messages 1`] = `
-"<ul data-v-cf9ff940="" class="events group pt-4 medium">
+"<ul data-v-cf9ff940="" class="events group pt-4 medium" show-container-name="false">
   <li data-v-cf9ff940="" data-key="1" data-time="1560336942459" class="group/entry">
     <div data-v-1344ff3d="" data-v-cf9ff940="" class="relative flex w-full items-start gap-x-2 group-[.compact]:items-stretch">
       <!--v-if-->
       <!--v-if-->
-      <div data-v-961504e7="" data-v-1344ff3d="" class="tag inline-flex items-center justify-center rounded bg-base-lighter px-2 py-[0.2em] !items-start select-none" size="small">
+      <!--v-if-->
+      <div data-v-961504e7="" data-v-1344ff3d="" class="tag inline-flex items-center justify-center rounded bg-base-lighter px-2 py-[0.2em] !items-start shrink-0 select-none" size="small">
         <div class="inline-flex gap-2 whitespace-nowrap text-blue"><time datetime="2019-06-12T10:55:42.459Z" class="mobile-hidden">06/12/2019</time><time datetime="2019-06-12T10:55:42.459Z">10:55:42 AM</time></div>
       </div>
       <div data-v-e625cddd="" data-v-1344ff3d="" class="mt-1.5 size-2.5 flex-none rounded-lg flex select-none"></div>

assets/components/MultiContainerViewer/MultiContainerLog.vue

@@ -17,7 +17,6 @@
         :stream-source="useMergedStream"
         :entity="containers"
         :visible-keys="new Map<string[], boolean>()"
-        :show-container-name="true"
       />
     </template>
   </ScrollableView>
@@ -37,5 +36,5 @@ const viewer = ref<ComponentExposed<typeof ViewerWithSource>>();
 const { allContainersById, ready } = storeToRefs(containerStore);
 const containers = computed(() => ids.map((id) => allContainersById.value[id]));
 
-provideLoggingContext(containers);
+provideLoggingContext(containers, { showContainerName: true, showHostname: false });
 </script>

assets/components/ServiceViewer/ServiceLog.vue

@@ -20,7 +20,6 @@
         :stream-source="useServiceStream"
         :entity="service"
         :visible-keys="new Map<string[], boolean>()"
-        :show-container-name="true"
       />
     </template>
   </ScrollableView>
@@ -41,5 +40,8 @@ const store = useSwarmStore();
 const { services } = storeToRefs(store) as unknown as { services: Ref<Service[]> };
 const service = computed(() => services.value.find((s) => s.name === name) ?? new Service("", []));
 
-provideLoggingContext(toRef(() => service.value.containers));
+provideLoggingContext(
+  toRef(() => service.value.containers),
+  { showContainerName: true, showHostname: false },
+);
 </script>

assets/components/StackViewer/StackLog.vue

@@ -23,7 +23,6 @@
         :stream-source="useStackStream"
         :entity="stack"
         :visible-keys="new Map<string[], boolean>()"
-        :show-container-name="true"
       />
     </template>
   </ScrollableView>
@@ -42,5 +41,8 @@ const viewer = ref<ComponentExposed<typeof ViewerWithSource>>();
 const store = useSwarmStore();
 const { stacks } = storeToRefs(store) as unknown as { stacks: Ref<Stack[]> };
 const stack = computed(() => stacks.value.find((s) => s.name === name) ?? new Stack("", [], []));
-provideLoggingContext(toRef(() => stack.value.containers));
+provideLoggingContext(
+  toRef(() => stack.value.containers),
+  { showContainerName: true, showHostname: false },
+);
 </script>

assets/composable/logContext.ts

@@ -7,6 +7,8 @@ type LogContext = {
   loadingMore: boolean;
   hasComplexLogs: boolean;
   levels: Set<Level>;
+  showContainerName: boolean;
+  showHostname: boolean;
 };
 
 export const allLevels: Level[] = [
@@ -27,7 +29,10 @@ const searchParams = new URLSearchParams(window.location.search);
 const stdout = searchParams.has("stdout") ? searchParams.get("stdout") === "true" : true;
 const stderr = searchParams.has("stderr") ? searchParams.get("stderr") === "true" : true;
 
-export const provideLoggingContext = (containers: Ref<Container[]>) => {
+export const provideLoggingContext = (
+  containers: Ref<Container[]>,
+  { showContainerName = false, showHostname = false } = {},
+) => {
   provide(
     loggingContextKey,
     reactive({
@@ -36,6 +41,8 @@ export const provideLoggingContext = (containers: Ref<Container[]>) => {
       loadingMore: false,
       hasComplexLogs: false,
       levels: new Set<Level>(allLevels),
+      showContainerName,
+      showHostname,
     }),
   );
 };
@@ -49,6 +56,8 @@ export const useLoggingContext = () => {
       loadingMore: false,
       hasComplexLogs: false,
       levels: new Set<Level>(allLevels),
+      showContainerName: false,
+      showHostname: false,
     }),
   );
 

locales/en.yml

@@ -7,6 +7,8 @@ toolbar:
   stop: Stop
   start: Start
   restart: Restart
+  show-hostname: Show hostname
+  show-container-name: Show container name
 label:
   containers: Containers
   container: No containers | 1 container | {count} containers