chore: cleans up logging context (#3136)

assets/components/ContainerViewer/ContainerActionsToolbar.vue

@@ -115,7 +115,7 @@ const { container } = defineProps<{ container: Container }>();
 const { actionStates, start, stop, restart } = useContainerActions(toRef(() => container));
 
 const downloadParams = computed(() =>
-  Object.entries(streamConfig)
+  Object.entries(toValue(streamConfig))
     .filter(([, value]) => value)
     .reduce((acc, [key]) => ({ ...acc, [key]: "1" }), {}),
 );

assets/components/ContainerViewer/ContainerLog.vue

@@ -11,10 +11,9 @@
         </a>
       </div>
     </template>
-    <template #default="{ setLoading }">
+    <template #default>
       <ViewerWithSource
         ref="viewer"
-        @loading-more="setLoading($event)"
         :stream-source="useContainerStream"
         :entity="container"
         :visible-keys="visibleKeys"

assets/components/GroupedViewer/GroupedLog.vue

@@ -10,10 +10,9 @@
         <MultiContainerStat class="ml-auto" :containers="group.containers" />
       </div>
     </template>
-    <template #default="{ setLoading }">
+    <template #default>
       <ViewerWithSource
         ref="viewer"
-        @loading-more="setLoading($event)"
         :stream-source="useGroupedStream"
         :entity="group"
         :visible-keys="visibleKeys"

assets/components/LogViewer/EventSource.vue

@@ -1,22 +1,19 @@
 <template>
-  <InfiniteLoader :onLoadMore="fetchMore" :enabled="enabled && messages.length > 50" />
+  <InfiniteLoader :onLoadMore="fetchMore" :enabled="!loadingMore && messages.length > 50" />
   <slot :messages="messages"></slot>
 </template>
 
 <script lang="ts" setup generic="T">
 import { LogStreamSource } from "@/composable/eventStreams";
 
-const loadingMore = defineEmit<[value: boolean]>();
-
 const { entity, streamSource } = $defineProps<{
   streamSource: (t: Ref<T>) => LogStreamSource;
   entity: T;
 }>();
 
 const { messages, loadOlderLogs, isLoadingMore } = streamSource($$(entity));
+const { loadingMore } = useLoggingContext();
 
-const beforeLoading = () => loadingMore(true);
-const afterLoading = () => loadingMore(false);
 const enabled = ref(true);
 
 defineExpose({
@@ -25,10 +22,10 @@ defineExpose({
 
 const fetchMore = async () => {
   if (!isLoadingMore()) {
-    beforeLoading();
+    loadingMore.value = true;
     enabled.value = false;
     await loadOlderLogs();
-    afterLoading();
+    loadingMore.value = false;
     enabled.value = true;
   }
 };

assets/components/LogViewer/ViewerWithSource.vue

@@ -1,11 +1,5 @@
 <template>
-  <EventSource
-    ref="source"
-    #default="{ messages }"
-    @loading-more="loadingMore($event)"
-    :stream-source="streamSource"
-    :entity="entity"
-  >
+  <EventSource ref="source" #default="{ messages }" :stream-source="streamSource" :entity="entity">
     <LogViewer :messages="messages" :visible-keys="visibleKeys" :show-container-name="showContainerName" />
   </EventSource>
 </template>
@@ -21,8 +15,6 @@ const { streamSource, visibleKeys, showContainerName, entity } = defineProps<{
   entity: T;
 }>();
 
-const loadingMore = defineEmit<[value: boolean]>();
-
 const source = $ref<InstanceType<typeof LogEventSource>>();
 
 defineExpose({

assets/components/MultiContainerViewer/MultiContainerLog.vue

@@ -10,10 +10,9 @@
         <MultiContainerStat class="ml-auto" :containers="containers" />
       </div>
     </template>
-    <template #default="{ setLoading }">
+    <template #default>
       <ViewerWithSource
         ref="viewer"
-        @loading-more="setLoading($event)"
         :stream-source="useMergedStream"
         :entity="containers"
         :visible-keys="visibleKeys"

assets/components/ScrollableView.vue

@@ -8,12 +8,11 @@
     </header>
     <main :data-scrolling="scrollable ? true : undefined" class="snap-y overflow-auto">
       <div class="invisible mr-28 text-right md:visible" v-show="paused">
-        <ScrollProgress :indeterminate="loading" :auto-hide="!loading" class="!fixed top-16 z-10" />
+        <ScrollProgress :indeterminate="loadingMore" :auto-hide="!loadingMore" class="!fixed top-16 z-10" />
       </div>
       <div ref="scrollableContent">
-        <slot :setLoading="setLoading"></slot>
+        <slot></slot>
       </div>
-
       <div ref="scrollObserver" class="h-px"></div>
     </main>
 
@@ -37,12 +36,13 @@ const { scrollable = false } = defineProps<{ scrollable?: boolean }>();
 
 let paused = $ref(false);
 let hasMore = $ref(false);
-let loading = $ref(false);
 const scrollObserver = ref<HTMLElement>();
 const scrollableContent = ref<HTMLElement>();
 
 provide("scrollingPaused", $$(paused));
 
+const { loadingMore } = useLoggingContext();
+
 const mutationObserver = new MutationObserver((e) => {
   if (!paused) {
     scrollToBottom();
@@ -69,10 +69,6 @@ function scrollToBottom(behavior: "auto" | "smooth" = "auto") {
   scrollObserver.value?.scrollIntoView({ behavior });
   hasMore = false;
 }
-
-function setLoading(value: boolean) {
-  loading = value;
-}
 </script>
 <style scoped lang="postcss">
 .fade-enter-active,

assets/components/ServiceViewer/ServiceLog.vue

@@ -13,10 +13,9 @@
         <MultiContainerStat class="ml-auto" :containers="service.containers" />
       </div>
     </template>
-    <template #default="{ setLoading }">
+    <template #default>
       <ViewerWithSource
         ref="viewer"
-        @loading-more="setLoading($event)"
         :stream-source="useServiceStream"
         :entity="service"
         :visible-keys="visibleKeys"

assets/components/StackViewer/StackLog.vue

@@ -16,10 +16,9 @@
         <MultiContainerStat class="ml-auto" :containers="stack.containers" />
       </div>
     </template>
-    <template #default="{ setLoading }">
+    <template #default>
       <ViewerWithSource
         ref="viewer"
-        @loading-more="setLoading($event)"
         :stream-source="useStackStream"
         :entity="stack"
         :visible-keys="visibleKeys"

assets/composable/eventStreams.ts

@@ -26,7 +26,7 @@ export function useContainerStream(container: Ref<Container>): LogStreamSource {
   const { streamConfig } = useLoggingContext();
 
   const url = computed(() => {
-    const params = Object.entries(streamConfig)
+    const params = Object.entries(toValue(streamConfig))
       .filter(([, value]) => value)
       .reduce((acc, [key]) => ({ ...acc, [key]: "1" }), {});
     return withBase(
@@ -35,7 +35,7 @@ export function useContainerStream(container: Ref<Container>): LogStreamSource {
   });
 
   const loadMoreUrl = computed(() => {
-    const params = Object.entries(streamConfig)
+    const params = Object.entries(toValue(streamConfig))
       .filter(([, value]) => value)
       .reduce((acc, [key]) => ({ ...acc, [key]: "1" }), {});
     return withBase(
@@ -50,7 +50,7 @@ export function useStackStream(stack: Ref<Stack>): LogStreamSource {
   const { streamConfig } = useLoggingContext();
 
   const url = computed(() => {
-    const params = Object.entries(streamConfig)
+    const params = Object.entries(toValue(streamConfig))
       .filter(([, value]) => value)
       .reduce((acc, [key]) => ({ ...acc, [key]: "1" }), {});
     return withBase(`/api/stacks/${stack.value.name}/logs/stream?${new URLSearchParams(params).toString()}`);
@@ -63,7 +63,7 @@ export function useGroupedStream(group: Ref<GroupedContainers>): LogStreamSource
   const { streamConfig } = useLoggingContext();
 
   const url = computed(() => {
-    const params = Object.entries(streamConfig)
+    const params = Object.entries(toValue(streamConfig))
       .filter(([, value]) => value)
       .reduce((acc, [key]) => ({ ...acc, [key]: "1" }), {});
     return withBase(`/api/groups/${group.value.name}/logs/stream?${new URLSearchParams(params).toString()}`);
@@ -77,7 +77,7 @@ export function useMergedStream(containers: Ref<Container[]>): LogStreamSource {
 
   const url = computed(() => {
     const params = [
-      ...Object.entries(streamConfig).map(([key, value]) => [key, value ? "1" : "0"]),
+      ...Object.entries(toValue(streamConfig)).map(([key, value]) => [key, value ? "1" : "0"]),
       ...containers.value.map((c) => ["id", c.id]),
     ];
 
@@ -93,7 +93,7 @@ export function useServiceStream(service: Ref<Service>): LogStreamSource {
   const { streamConfig } = useLoggingContext();
 
   const url = computed(() => {
-    const params = Object.entries(streamConfig)
+    const params = Object.entries(toValue(streamConfig))
       .filter(([, value]) => value)
       .reduce((acc, [key]) => ({ ...acc, [key]: "1" }), {});
     return withBase(`/api/services/${service.value.name}/logs/stream?${new URLSearchParams(params).toString()}`);

assets/composable/logContext.ts

@@ -2,16 +2,21 @@ import { Container } from "@/models/Container";
 
 type LogContext = {
   streamConfig: { stdout: boolean; stderr: boolean };
-  containers: Ref<Container[]>;
+  containers: Container[];
+  loadingMore: boolean;
 };
 
 export const loggingContextKey = Symbol("loggingContext") as InjectionKey<LogContext>;
 
 export const provideLoggingContext = (containers: Ref<Container[]>) => {
-  provide(loggingContextKey, {
-    streamConfig: reactive({ stdout: true, stderr: true }),
-    containers,
-  });
+  provide(
+    loggingContextKey,
+    reactive({
+      streamConfig: { stdout: true, stderr: true },
+      containers,
+      loadingMore: false,
+    }),
+  );
 };
 
 export const useLoggingContext = () => {
@@ -19,5 +24,5 @@ export const useLoggingContext = () => {
   if (!context) {
     throw new Error("No logging context provided");
   }
-  return context;
+  return toRefs(context);
 };