chore: creates a container context (#2388)

* chore: creates a container context

* fixes tests

* fixes tests

assets/auto-imports.d.ts

@@ -25,6 +25,7 @@ declare global {
   const computedInject: typeof import('@vueuse/core')['computedInject']
   const computedWithControl: typeof import('@vueuse/core')['computedWithControl']
   const config: typeof import('./stores/config')['default']
+  const containerContext: typeof import('./composables/containerContext')['containerContext']
   const controlledComputed: typeof import('@vueuse/core')['controlledComputed']
   const controlledRef: typeof import('@vueuse/core')['controlledRef']
   const createApp: typeof import('vue')['createApp']
@@ -102,6 +103,7 @@ declare global {
   const persistentVisibleKeys: typeof import('./composables/storage')['persistentVisibleKeys']
   const pinnedContainers: typeof import('./composables/storage')['pinnedContainers']
   const provide: typeof import('vue')['provide']
+  const provideContainerContext: typeof import('./composables/containerContext')['provideContainerContext']
   const reactify: typeof import('@vueuse/core')['reactify']
   const reactifyObject: typeof import('@vueuse/core')['reactifyObject']
   const reactive: typeof import('vue')['reactive']
@@ -186,6 +188,7 @@ declare global {
   const useCloned: typeof import('@vueuse/core')['useCloned']
   const useColorMode: typeof import('@vueuse/core')['useColorMode']
   const useConfirmDialog: typeof import('@vueuse/core')['useConfirmDialog']
+  const useContainerContext: typeof import('./composables/containerContext')['useContainerContext']
   const useContainerStore: typeof import('./stores/container')['useContainerStore']
   const useCounter: typeof import('@vueuse/core')['useCounter']
   const useCssModule: typeof import('vue')['useCssModule']
@@ -453,6 +456,7 @@ declare module 'vue' {
     readonly persistentVisibleKeys: UnwrapRef<typeof import('./composables/storage')['persistentVisibleKeys']>
     readonly pinnedContainers: UnwrapRef<typeof import('./composables/storage')['pinnedContainers']>
     readonly provide: UnwrapRef<typeof import('vue')['provide']>
+    readonly provideContainerContext: UnwrapRef<typeof import('./composables/containerContext')['provideContainerContext']>
     readonly reactify: UnwrapRef<typeof import('@vueuse/core')['reactify']>
     readonly reactifyObject: UnwrapRef<typeof import('@vueuse/core')['reactifyObject']>
     readonly reactive: UnwrapRef<typeof import('vue')['reactive']>
@@ -533,6 +537,7 @@ declare module 'vue' {
     readonly useCloned: UnwrapRef<typeof import('@vueuse/core')['useCloned']>
     readonly useColorMode: UnwrapRef<typeof import('@vueuse/core')['useColorMode']>
     readonly useConfirmDialog: UnwrapRef<typeof import('@vueuse/core')['useConfirmDialog']>
+    readonly useContainerContext: UnwrapRef<typeof import('./composables/containerContext')['useContainerContext']>
     readonly useContainerStore: UnwrapRef<typeof import('./stores/container')['useContainerStore']>
     readonly useCounter: UnwrapRef<typeof import('@vueuse/core')['useCounter']>
     readonly useCssModule: UnwrapRef<typeof import('vue')['useCssModule']>
@@ -785,6 +790,7 @@ declare module '@vue/runtime-core' {
     readonly persistentVisibleKeys: UnwrapRef<typeof import('./composables/storage')['persistentVisibleKeys']>
     readonly pinnedContainers: UnwrapRef<typeof import('./composables/storage')['pinnedContainers']>
     readonly provide: UnwrapRef<typeof import('vue')['provide']>
+    readonly provideContainerContext: UnwrapRef<typeof import('./composables/containerContext')['provideContainerContext']>
     readonly reactify: UnwrapRef<typeof import('@vueuse/core')['reactify']>
     readonly reactifyObject: UnwrapRef<typeof import('@vueuse/core')['reactifyObject']>
     readonly reactive: UnwrapRef<typeof import('vue')['reactive']>
@@ -865,6 +871,7 @@ declare module '@vue/runtime-core' {
     readonly useCloned: UnwrapRef<typeof import('@vueuse/core')['useCloned']>
     readonly useColorMode: UnwrapRef<typeof import('@vueuse/core')['useColorMode']>
     readonly useConfirmDialog: UnwrapRef<typeof import('@vueuse/core')['useConfirmDialog']>
+    readonly useContainerContext: UnwrapRef<typeof import('./composables/containerContext')['useContainerContext']>
     readonly useContainerStore: UnwrapRef<typeof import('./stores/container')['useContainerStore']>
     readonly useCounter: UnwrapRef<typeof import('@vueuse/core')['useCounter']>
     readonly useCssModule: UnwrapRef<typeof import('vue')['useCssModule']>

assets/components/LogViewer/ContainerStat.vue

@@ -6,10 +6,7 @@
 </template>
 
 <script lang="ts" setup>
-import { Container } from "@/models/Container";
-import { type ComputedRef } from "vue";
-
-const container = inject("container") as ComputedRef<Container>;
+const { container } = useContainerContext();
 
 const cpuData = computedWithControl(
   () => container.value.stat,

assets/components/LogViewer/ContainerTitle.vue

@@ -23,10 +23,7 @@
 </template>
 
 <script lang="ts" setup>
-import { Container } from "@/models/Container";
-import { type ComputedRef } from "vue";
-
-const container = inject("container") as ComputedRef<Container>;
+const { container } = useContainerContext();
 const pinned = computed({
   get: () => pinnedContainers.value.has(container.value.storageKey),
   set: (value) => {

assets/components/LogViewer/LogActionsToolbar.vue

@@ -70,16 +70,12 @@
 </template>
 
 <script lang="ts" setup>
-import { type ComputedRef } from "vue";
-import { Container } from "@/models/Container";
-
 const { showSearch } = useSearchFilter();
 const { base } = config;
 
 const clear = defineEmit();
 
-const container = inject("container") as ComputedRef<Container>;
-const streamConfig = inject("stream-config") as { stdout: boolean; stderr: boolean };
+const { container, streamConfig } = useContainerContext();
 </script>
 
 <style scoped lang="postcss">

assets/components/LogViewer/LogContainer.vue

@@ -35,12 +35,8 @@ const {
 const close = defineEmit();
 
 const store = useContainerStore();
-
 const container = store.currentContainer($$(id));
-const config = reactive({ stdout: true, stderr: true });
-
-provide("container", container);
-provide("stream-config", config);
+provideContainerContext(container);
 
 const viewer = ref<InstanceType<typeof LogViewerWithSource>>();
 

assets/components/LogViewer/LogEventSource.spec.ts

@@ -4,11 +4,12 @@ import { createTestingPinia } from "@pinia/testing";
 import EventSource, { sources } from "eventsourcemock";
 import LogEventSource from "./LogEventSource.vue";
 import LogViewer from "./LogViewer.vue";
-import { settings } from "../../composables/settings";
+import { settings } from "@/composables/settings";
 import { useSearchFilter } from "@/composables/search";
 import { vi, describe, expect, beforeEach, test, afterEach } from "vitest";
 import { computed, nextTick } from "vue";
 import { createRouter, createWebHistory } from "vue-router";
+import { containerContext } from "@/composables/containerContext";
 
 vi.mock("@/stores/config", () => ({
   __esModule: true,
@@ -71,8 +72,10 @@ describe("<LogEventSource />", () => {
           LogViewer,
         },
         provide: {
-          container: computed(() => ({ id: "abc", image: "test:v123", host: "localhost" })),
-          "stream-config": reactive({ stdout: true, stderr: true }),
+          [containerContext as symbol]: {
+            container: computed(() => ({ id: "abc", image: "test:v123", host: "localhost" })),
+            streamConfig: reactive({ stdout: true, stderr: true }),
+          },
           scrollingPaused: computed(() => false),
         },
       },

assets/components/LogViewer/LogEventSource.vue

@@ -4,14 +4,10 @@
 </template>
 
 <script lang="ts" setup>
-import { Container } from "@/models/Container";
-import { type ComputedRef } from "vue";
-
 const loadingMore = defineEmit<[value: boolean]>();
 
-const container = inject("container") as ComputedRef<Container>;
-const config = inject("stream-config") as { stdout: boolean; stderr: boolean };
-const { messages, loadOlderLogs } = useLogStream(container, config);
+const { container, streamConfig } = useContainerContext();
+const { messages, loadOlderLogs } = useLogStream(container, streamConfig);
 
 const beforeLoading = () => loadingMore(true);
 const afterLoading = () => loadingMore(false);

assets/components/LogViewer/LogViewer.vue

@@ -22,16 +22,18 @@
 </template>
 
 <script lang="ts" setup>
-import { type ComputedRef, toRaw } from "vue";
+import { toRaw } from "vue";
 import { useRouteHash } from "@vueuse/router";
-import { Container } from "@/models/Container";
+
 import { type JSONObject, LogEntry } from "@/models/LogEntry";
 
 const props = defineProps<{
   messages: LogEntry<string | JSONObject>[];
 }>();
 
-let visibleKeys = persistentVisibleKeys(inject("container") as ComputedRef<Container>);
+const { container } = useContainerContext();
+
+let visibleKeys = persistentVisibleKeys(container);
 
 const { filteredPayload } = useVisibleFilter(visibleKeys);
 const { filteredMessages, resetSearch, isSearching } = useSearchFilter();

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

@@ -2,7 +2,7 @@
 
 exports[`<LogEventSource /> > render html correctly > should render dates with 12 hour style 1`] = `
 "<ul data-v-2e92daca=\\"\\" class=\\"events group py-4 medium\\">
-  <li data-v-2e92daca=\\"\\" data-key=\\"1\\" class=\\"flex break-words px-4 py-1 last:snap-end odd:bg-base-lighter/30\\"><a data-v-2e92daca=\\"\\" class=\\"btn btn-ghost tooltip-primary tooltip btn-sm tooltip-right mr-4 flex self-start font-sans font-normal normal-case text-secondary hover:text-secondary-focus\\" data-tip=\\"Jump to Context\\" href=\\"#1\\" style=\\"display: none;\\"><svg data-v-2e92daca=\\"\\" viewBox=\\"0 0 24 24\\" width=\\"1.2em\\" height=\\"1.2em\\">
+  <li data-v-2e92daca=\\"\\" data-key=\\"1\\" class=\\"flex break-words px-4 py-1 last:snap-end odd:bg-gray-400/[0.07]\\"><a data-v-2e92daca=\\"\\" class=\\"btn btn-ghost tooltip-primary tooltip btn-sm tooltip-right mr-4 flex self-start font-sans font-normal normal-case text-secondary hover:text-secondary-focus\\" data-tip=\\"Jump to Context\\" href=\\"#1\\" style=\\"display: none;\\"><svg data-v-2e92daca=\\"\\" viewBox=\\"0 0 24 24\\" width=\\"1.2em\\" height=\\"1.2em\\">
         <path fill=\\"currentColor\\" d=\\"M20 19.59V8l-6-6H4v20l15.57-.02l-4.81-4.81c-.8.52-1.74.83-2.76.83c-2.76 0-5-2.24-5-5s2.24-5 5-5s5 2.24 5 5c0 1.02-.31 1.96-.83 2.75L20 19.59zM9 13c0 1.66 1.34 3 3 3s3-1.34 3-3s-1.34-3-3-3s-3 1.34-3 3z\\"></path>
       </svg></a>
     <div data-v-2e92daca=\\"\\" class=\\"flex items-start gap-x-2\\" visible-keys=\\"\\">
@@ -19,7 +19,7 @@ exports[`<LogEventSource /> > render html correctly > should render dates with 1
 
 exports[`<LogEventSource /> > render html correctly > should render dates with 24 hour style 1`] = `
 "<ul data-v-2e92daca=\\"\\" class=\\"events group py-4 medium\\">
-  <li data-v-2e92daca=\\"\\" data-key=\\"1\\" class=\\"flex break-words px-4 py-1 last:snap-end odd:bg-base-lighter/30\\"><a data-v-2e92daca=\\"\\" class=\\"btn btn-ghost tooltip-primary tooltip btn-sm tooltip-right mr-4 flex self-start font-sans font-normal normal-case text-secondary hover:text-secondary-focus\\" data-tip=\\"Jump to Context\\" href=\\"#1\\" style=\\"display: none;\\"><svg data-v-2e92daca=\\"\\" viewBox=\\"0 0 24 24\\" width=\\"1.2em\\" height=\\"1.2em\\">
+  <li data-v-2e92daca=\\"\\" data-key=\\"1\\" class=\\"flex break-words px-4 py-1 last:snap-end odd:bg-gray-400/[0.07]\\"><a data-v-2e92daca=\\"\\" class=\\"btn btn-ghost tooltip-primary tooltip btn-sm tooltip-right mr-4 flex self-start font-sans font-normal normal-case text-secondary hover:text-secondary-focus\\" data-tip=\\"Jump to Context\\" href=\\"#1\\" style=\\"display: none;\\"><svg data-v-2e92daca=\\"\\" viewBox=\\"0 0 24 24\\" width=\\"1.2em\\" height=\\"1.2em\\">
         <path fill=\\"currentColor\\" d=\\"M20 19.59V8l-6-6H4v20l15.57-.02l-4.81-4.81c-.8.52-1.74.83-2.76.83c-2.76 0-5-2.24-5-5s2.24-5 5-5s5 2.24 5 5c0 1.02-.31 1.96-.83 2.75L20 19.59zM9 13c0 1.66 1.34 3 3 3s3-1.34 3-3s-1.34-3-3-3s-3 1.34-3 3z\\"></path>
       </svg></a>
     <div data-v-2e92daca=\\"\\" class=\\"flex items-start gap-x-2\\" visible-keys=\\"\\">
@@ -36,7 +36,7 @@ exports[`<LogEventSource /> > render html correctly > should render dates with 2
 
 exports[`<LogEventSource /> > render html correctly > should render messages 1`] = `
 "<ul data-v-2e92daca=\\"\\" class=\\"events group py-4 medium\\">
-  <li data-v-2e92daca=\\"\\" data-key=\\"1\\" class=\\"flex break-words px-4 py-1 last:snap-end odd:bg-base-lighter/30\\"><a data-v-2e92daca=\\"\\" class=\\"btn btn-ghost tooltip-primary tooltip btn-sm tooltip-right mr-4 flex self-start font-sans font-normal normal-case text-secondary hover:text-secondary-focus\\" data-tip=\\"Jump to Context\\" href=\\"#1\\" style=\\"display: none;\\"><svg data-v-2e92daca=\\"\\" viewBox=\\"0 0 24 24\\" width=\\"1.2em\\" height=\\"1.2em\\">
+  <li data-v-2e92daca=\\"\\" data-key=\\"1\\" class=\\"flex break-words px-4 py-1 last:snap-end odd:bg-gray-400/[0.07]\\"><a data-v-2e92daca=\\"\\" class=\\"btn btn-ghost tooltip-primary tooltip btn-sm tooltip-right mr-4 flex self-start font-sans font-normal normal-case text-secondary hover:text-secondary-focus\\" data-tip=\\"Jump to Context\\" href=\\"#1\\" style=\\"display: none;\\"><svg data-v-2e92daca=\\"\\" viewBox=\\"0 0 24 24\\" width=\\"1.2em\\" height=\\"1.2em\\">
         <path fill=\\"currentColor\\" d=\\"M20 19.59V8l-6-6H4v20l15.57-.02l-4.81-4.81c-.8.52-1.74.83-2.76.83c-2.76 0-5-2.24-5-5s2.24-5 5-5s5 2.24 5 5c0 1.02-.31 1.96-.83 2.75L20 19.59zM9 13c0 1.66 1.34 3 3 3s3-1.34 3-3s-1.34-3-3-3s-3 1.34-3 3z\\"></path>
       </svg></a>
     <div data-v-2e92daca=\\"\\" class=\\"flex items-start gap-x-2\\" visible-keys=\\"\\">
@@ -53,7 +53,7 @@ exports[`<LogEventSource /> > render html correctly > should render messages 1`]
 
 exports[`<LogEventSource /> > render html correctly > should render messages with color 1`] = `
 "<ul data-v-2e92daca=\\"\\" class=\\"events group py-4 medium\\">
-  <li data-v-2e92daca=\\"\\" data-key=\\"1\\" class=\\"flex break-words px-4 py-1 last:snap-end odd:bg-base-lighter/30\\"><a data-v-2e92daca=\\"\\" class=\\"btn btn-ghost tooltip-primary tooltip btn-sm tooltip-right mr-4 flex self-start font-sans font-normal normal-case text-secondary hover:text-secondary-focus\\" data-tip=\\"Jump to Context\\" href=\\"#1\\" style=\\"display: none;\\"><svg data-v-2e92daca=\\"\\" viewBox=\\"0 0 24 24\\" width=\\"1.2em\\" height=\\"1.2em\\">
+  <li data-v-2e92daca=\\"\\" data-key=\\"1\\" class=\\"flex break-words px-4 py-1 last:snap-end odd:bg-gray-400/[0.07]\\"><a data-v-2e92daca=\\"\\" class=\\"btn btn-ghost tooltip-primary tooltip btn-sm tooltip-right mr-4 flex self-start font-sans font-normal normal-case text-secondary hover:text-secondary-focus\\" data-tip=\\"Jump to Context\\" href=\\"#1\\" style=\\"display: none;\\"><svg data-v-2e92daca=\\"\\" viewBox=\\"0 0 24 24\\" width=\\"1.2em\\" height=\\"1.2em\\">
         <path fill=\\"currentColor\\" d=\\"M20 19.59V8l-6-6H4v20l15.57-.02l-4.81-4.81c-.8.52-1.74.83-2.76.83c-2.76 0-5-2.24-5-5s2.24-5 5-5s5 2.24 5 5c0 1.02-.31 1.96-.83 2.75L20 19.59zM9 13c0 1.66 1.34 3 3 3s3-1.34 3-3s-1.34-3-3-3s-3 1.34-3 3z\\"></path>
       </svg></a>
     <div data-v-2e92daca=\\"\\" class=\\"flex items-start gap-x-2\\" visible-keys=\\"\\">
@@ -70,7 +70,7 @@ exports[`<LogEventSource /> > render html correctly > should render messages wit
 
 exports[`<LogEventSource /> > render html correctly > should render messages with filter 1`] = `
 "<ul data-v-2e92daca=\\"\\" class=\\"events group py-4 medium\\">
-  <li data-v-2e92daca=\\"\\" data-key=\\"2\\" class=\\"flex break-words px-4 py-1 last:snap-end odd:bg-base-lighter/30\\"><a data-v-2e92daca=\\"\\" class=\\"btn btn-ghost tooltip-primary tooltip btn-sm tooltip-right mr-4 flex self-start font-sans font-normal normal-case text-secondary hover:text-secondary-focus\\" data-tip=\\"Jump to Context\\" href=\\"#2\\"><svg data-v-2e92daca=\\"\\" viewBox=\\"0 0 24 24\\" width=\\"1.2em\\" height=\\"1.2em\\">
+  <li data-v-2e92daca=\\"\\" data-key=\\"2\\" class=\\"flex break-words px-4 py-1 last:snap-end odd:bg-gray-400/[0.07]\\"><a data-v-2e92daca=\\"\\" class=\\"btn btn-ghost tooltip-primary tooltip btn-sm tooltip-right mr-4 flex self-start font-sans font-normal normal-case text-secondary hover:text-secondary-focus\\" data-tip=\\"Jump to Context\\" href=\\"#2\\"><svg data-v-2e92daca=\\"\\" viewBox=\\"0 0 24 24\\" width=\\"1.2em\\" height=\\"1.2em\\">
         <path fill=\\"currentColor\\" d=\\"M20 19.59V8l-6-6H4v20l15.57-.02l-4.81-4.81c-.8.52-1.74.83-2.76.83c-2.76 0-5-2.24-5-5s2.24-5 5-5s5 2.24 5 5c0 1.02-.31 1.96-.83 2.75L20 19.59zM9 13c0 1.66 1.34 3 3 3s3-1.34 3-3s-1.34-3-3-3s-3 1.34-3 3z\\"></path>
       </svg></a>
     <div data-v-2e92daca=\\"\\" class=\\"flex items-start gap-x-2\\" visible-keys=\\"\\">
@@ -87,7 +87,7 @@ exports[`<LogEventSource /> > render html correctly > should render messages wit
 
 exports[`<LogEventSource /> > render html correctly > should render messages with html entities 1`] = `
 "<ul data-v-2e92daca=\\"\\" class=\\"events group py-4 medium\\">
-  <li data-v-2e92daca=\\"\\" data-key=\\"1\\" class=\\"flex break-words px-4 py-1 last:snap-end odd:bg-base-lighter/30\\"><a data-v-2e92daca=\\"\\" class=\\"btn btn-ghost tooltip-primary tooltip btn-sm tooltip-right mr-4 flex self-start font-sans font-normal normal-case text-secondary hover:text-secondary-focus\\" data-tip=\\"Jump to Context\\" href=\\"#1\\" style=\\"display: none;\\"><svg data-v-2e92daca=\\"\\" viewBox=\\"0 0 24 24\\" width=\\"1.2em\\" height=\\"1.2em\\">
+  <li data-v-2e92daca=\\"\\" data-key=\\"1\\" class=\\"flex break-words px-4 py-1 last:snap-end odd:bg-gray-400/[0.07]\\"><a data-v-2e92daca=\\"\\" class=\\"btn btn-ghost tooltip-primary tooltip btn-sm tooltip-right mr-4 flex self-start font-sans font-normal normal-case text-secondary hover:text-secondary-focus\\" data-tip=\\"Jump to Context\\" href=\\"#1\\" style=\\"display: none;\\"><svg data-v-2e92daca=\\"\\" viewBox=\\"0 0 24 24\\" width=\\"1.2em\\" height=\\"1.2em\\">
         <path fill=\\"currentColor\\" d=\\"M20 19.59V8l-6-6H4v20l15.57-.02l-4.81-4.81c-.8.52-1.74.83-2.76.83c-2.76 0-5-2.24-5-5s2.24-5 5-5s5 2.24 5 5c0 1.02-.31 1.96-.83 2.75L20 19.59zM9 13c0 1.66 1.34 3 3 3s3-1.34 3-3s-1.34-3-3-3s-3 1.34-3 3z\\"></path>
       </svg></a>
     <div data-v-2e92daca=\\"\\" class=\\"flex items-start gap-x-2\\" visible-keys=\\"\\">

assets/composables/containerContext.ts

@@ -0,0 +1,23 @@
+import { Container } from "@/models/Container";
+
+type ContainerContext = {
+  container: Ref<Container>;
+  streamConfig: { stdout: boolean; stderr: boolean };
+};
+
+export const containerContext = Symbol("containerContext") as InjectionKey<ContainerContext>;
+
+export const provideContainerContext = (container: Ref<Container>) => {
+  provide(containerContext, {
+    container,
+    streamConfig: reactive({ stdout: true, stderr: true }),
+  });
+};
+
+export const useContainerContext = () => {
+  const context = inject(containerContext);
+  if (!context) {
+    throw new Error("No container context provided");
+  }
+  return context;
+};

assets/composables/eventsource.ts

@@ -1,4 +1,4 @@
-import { type ComputedRef, type Ref } from "vue";
+import { type Ref } from "vue";
 import { encodeXML } from "entities";
 import debounce from "lodash.debounce";
 import {
@@ -26,7 +26,7 @@ type LogStreamConfig = {
   stderr: boolean;
 };
 
-export function useLogStream(container: ComputedRef<Container>, streamConfig: LogStreamConfig) {
+export function useLogStream(container: Ref<Container>, streamConfig: LogStreamConfig) {
   let messages: LogEntry<string | JSONObject>[] = $ref([]);
   let buffer: LogEntry<string | JSONObject>[] = $ref([]);
   const scrollingPaused = $ref(inject("scrollingPaused") as Ref<boolean>);

assets/composables/storage.ts

@@ -7,7 +7,7 @@ if (config.hosts.length === 1 && !sessionHost.value) {
   sessionHost.value = config.hosts[0].id;
 }
 
-export function persistentVisibleKeys(container: ComputedRef<Container>) {
+export function persistentVisibleKeys(container: Ref<Container>) {
   return computed(() => useStorage(container.value.storageKey, []));
 }