From 2384e4ea1f31a4bfe543b268fcf73589dc3e0740 Mon Sep 17 00:00:00 2001
From: unclegedd <gedd@defenseunicorns.com>
Date: Tue, 29 Oct 2024 10:18:35 -0500
Subject: [PATCH 01/45] WIP

---
 src/pkg/api/handlers.go                       |  33 ++++++
 src/pkg/api/rest/filter.go                    |   1 +
 src/pkg/api/start.go                          |   1 +
 ui/src/app.postcss                            |   2 +-
 .../components/k8s/DataTable/component.svelte |   6 +-
 .../components/k8s/Drawer/component.svelte    |  16 ++-
 .../workloads/pods/logs/+page.svelte          | 112 ++++++++++++++++++
 ui/src/routes/+layout.svelte                  |   2 +-
 ui/src/routes/+layout.ts                      |   5 +-
 ui/src/routes/auth.test.ts                    |  15 +++
 10 files changed, 187 insertions(+), 6 deletions(-)
 create mode 100644 ui/src/routes/(resources)/workloads/pods/logs/+page.svelte

diff --git a/src/pkg/api/handlers.go b/src/pkg/api/handlers.go
index 58709b86d..d12c3f967 100644
--- a/src/pkg/api/handlers.go
+++ b/src/pkg/api/handlers.go
@@ -136,6 +136,39 @@ func getPod(cache *resources.Cache) func(w http.ResponseWriter, r *http.Request)
 	return rest.Bind(cache.Pods)
 }
 
+// @Description Get Pod logs
+// @Tags workloads
+// @Accept  html
+// @Produce  json
+// @Success 200
+// @Router /api/v1/resources/workloads/pods/logs [get]
+// @Param pod query string true "Pod name"
+// @Param namespace query string true "Namespace"
+func getPodLogs(k8sSession *session.K8sSession) func(w http.ResponseWriter, r *http.Request) {
+	return func(w http.ResponseWriter, r *http.Request) {
+		// todo: guard against accessing logs for pods that shouldn't be accessed?
+		// todo: test back/forward button, etc
+		pod := r.URL.Query().Get("pod")
+		namespace := r.URL.Query().Get("namespace")
+		if pod == "" || namespace == "" {
+			http.Error(w, "Pod and Namespace are required", http.StatusBadRequest)
+			return
+		}
+
+		// return fake logs for now
+		logs := []string{
+			"2024-01-01T00:00:00Z [INFO] This is a log message",
+		}
+
+		w.Header().Set("Content-Type", "application/json")
+		w.WriteHeader(http.StatusOK)
+		err := json.NewEncoder(w).Encode(logs)
+		if err != nil {
+			return
+		}
+	}
+}
+
 // @Description Get Deployments
 // @Tags workloads
 // @Accept  html
diff --git a/src/pkg/api/rest/filter.go b/src/pkg/api/rest/filter.go
index d12c2f6ce..25fdc0304 100644
--- a/src/pkg/api/rest/filter.go
+++ b/src/pkg/api/rest/filter.go
@@ -28,6 +28,7 @@ func jsonMarshal(payload any, fieldsList []string) ([]byte, error) {
 		// Handle multiple resources
 		case []unstructured.Unstructured:
 			filteredItems := filterItemsByFields(payload, fieldsList)
+			// todo: this line fails sometimes with: fatal error: concurrent map iteration and map write
 			data, err = json.Marshal(filteredItems)
 
 		default:
diff --git a/src/pkg/api/start.go b/src/pkg/api/start.go
index 72999f00d..18444a6cc 100644
--- a/src/pkg/api/start.go
+++ b/src/pkg/api/start.go
@@ -93,6 +93,7 @@ func Setup(assets *embed.FS) (*chi.Mux, bool, error) {
 			r.Route("/workloads", func(r chi.Router) {
 				r.Get("/pods", withLatestCache(k8sSession, getPods))
 				r.Get("/pods/{uid}", withLatestCache(k8sSession, getPod))
+				r.Get("/pods/logs", getPodLogs(k8sSession))
 
 				r.Get("/deployments", withLatestCache(k8sSession, getDeployments))
 				r.Get("/deployments/{uid}", withLatestCache(k8sSession, getDeployment))
diff --git a/ui/src/app.postcss b/ui/src/app.postcss
index b29389486..50f712429 100644
--- a/ui/src/app.postcss
+++ b/ui/src/app.postcss
@@ -58,7 +58,7 @@
   }
 
   .table-section {
-    @apply flex h-full flex-col bg-gray-50 dark:bg-gray-900;
+    @apply flex flex-grow h-[65%] flex-shrink-0 flex-col bg-gray-50 dark:bg-gray-900;
 
     .table-container {
       @apply flex h-full w-full flex-col;
diff --git a/ui/src/lib/components/k8s/DataTable/component.svelte b/ui/src/lib/components/k8s/DataTable/component.svelte
index 2f57e210e..0cc9f95ed 100644
--- a/ui/src/lib/components/k8s/DataTable/component.svelte
+++ b/ui/src/lib/components/k8s/DataTable/component.svelte
@@ -271,7 +271,11 @@
                 <tr
                   id={row.resource.metadata?.uid}
                   on:click={() =>
-                    !disableRowClick && row.resource.metadata?.uid && goto(`${baseURL}/${row.resource.metadata?.uid}`)}
+                    !disableRowClick &&
+                    row.resource.metadata?.uid &&
+                    goto(
+                      `${baseURL.includes('/logs') ? baseURL.replace('/logs', '') : baseURL}/${row.resource.metadata?.uid}`,
+                    )}
                   class:active={row.resource.metadata?.uid && pathName.includes(row.resource.metadata?.uid ?? '')}
                   class:cursor-pointer={!disableRowClick}
                 >
diff --git a/ui/src/lib/components/k8s/Drawer/component.svelte b/ui/src/lib/components/k8s/Drawer/component.svelte
index 8d9d159e4..f63242ca5 100644
--- a/ui/src/lib/components/k8s/Drawer/component.svelte
+++ b/ui/src/lib/components/k8s/Drawer/component.svelte
@@ -18,7 +18,7 @@
   export let resource: KubernetesObject
   export let baseURL: string
 
-  type Tab = 'metadata' | 'yaml' | 'events'
+  type Tab = 'metadata' | 'yaml' | 'events' | 'logs'
 
   let events: CoreV1Event[] = []
 
@@ -128,6 +128,9 @@
           <li class="flex-1">
             <button id="yaml" class:active={activeTab === 'yaml'} on:click={setActiveTab}>YAML</button>
           </li>
+          <li class="flex-1">
+            <button id="logs" class:active={activeTab === 'logs'} on:click={setActiveTab}>Logs</button>
+          </li>
         </ul>
       </div>
     </div>
@@ -184,6 +187,17 @@
             {@html DOMPurify.sanitize(hljs.highlight(YAML.stringify(resource), { language: 'yaml' }).value)}
           </code>
         </div>
+      {:else if activeTab === 'logs'}
+        <!-- show a Logs button -->
+        <button
+          class="hover:text-primary-700 flex items-center justify-center rounded-lg border border-gray-200 bg-white px-4 py-2 text-sm font-medium text-gray-900 hover:bg-gray-100 focus:z-10 focus:outline-none focus:ring-4 focus:ring-gray-200 md:w-auto dark:border-gray-600 dark:bg-gray-800 dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-white dark:focus:ring-gray-700"
+          type="button"
+          data-testid="datatable-filter-dropdown"
+          on:click={() =>
+            goto(`${baseURL}/logs?pod=${resource.metadata?.name}&namespace=${resource.metadata?.namespace}`)}
+        >
+          Logs
+        </button>
       {/if}
     </div>
   </div>
diff --git a/ui/src/routes/(resources)/workloads/pods/logs/+page.svelte b/ui/src/routes/(resources)/workloads/pods/logs/+page.svelte
new file mode 100644
index 000000000..9cf7acbc6
--- /dev/null
+++ b/ui/src/routes/(resources)/workloads/pods/logs/+page.svelte
@@ -0,0 +1,112 @@
+<!-- Copyright 2024 Defense Unicorns -->
+<!-- SPDX-License-Identifier: AGPL-3.0-or-later OR LicenseRef-Defense-Unicorns-Commercial -->
+
+<script lang="ts">
+  import { onDestroy } from 'svelte'
+
+  import { page } from '$app/stores'
+  import { PodTable } from '$features/k8s'
+  import { Copy, Download, Terminal } from 'carbon-icons-svelte'
+
+  // todo: esc exits log view (change url)
+
+  let unsubscribePage: () => void
+  let autoScroll = true
+
+  // Example pods - will replace with actual data
+  const pods = [
+    { uid: '1', name: 'nginx' },
+    { uid: '2', name: 'redis' },
+    { uid: '3', name: 'postgres' },
+  ]
+
+  // example containers - will replace with actual data
+  const containers = [{ name: 'nginx' }, { name: 'redis' }, { name: 'postgres' }]
+
+  // Toggle auto-scroll
+  function toggleAutoScroll() {
+    autoScroll = !autoScroll
+  }
+
+  let selectedContainer = containers[0]?.name ?? ''
+
+  // todo: start here
+  // you've gotten the selected pod using a global context
+  // now you need a list of pods (to include their containers)
+  // option 1: new SSE stream here
+  // option 2: global pod store
+  let selectedPod = pods[0]?.uid ?? ''
+
+  unsubscribePage = page.subscribe(async ({ params, data, url }) => {
+    console.log('page changed', data.pods.$resources)
+  })
+
+  onDestroy(() => {
+    unsubscribePage()
+  })
+</script>
+
+<div class="flex h-full flex-col">
+  <PodTable />
+
+  <section class="h-[35%] flex-shrink-0 mt-2">
+    <div class="flex h-full w-full flex-col overflow-hidden bg-gray-800 rounded-lg">
+      <div class="flex flex-col px-4 py-2">
+        <!-- Header -->
+        <div class="flex items-center justify-between px-4 py-2 border-b border-gray-700">
+          <div class="flex items-center space-x-4">
+            <div class="flex items-center">
+              <Terminal class="w-4 h-4 text-gray-200" />
+              <span class="text-sm font-medium text-gray-200 text-nowrap ml-1">Pod Logs</span>
+            </div>
+
+            <!-- Pod selector -->
+            <select
+              bind:value={selectedPod}
+              class="bg-gray-800 text-sm text-gray-300 rounded-md border border-gray-700 px-2 py-1 focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
+            >
+              {#each pods as pod}
+                <option value={pod.uid}>{pod.name}</option>
+              {/each}
+            </select>
+            <!-- Container selector -->
+            <select
+              bind:value={selectedContainer}
+              class="bg-gray-800 text-sm text-gray-300 rounded-md border border-gray-700 px-2 py-1 focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
+            >
+              {#each containers as container}
+                <option value={container.name}>{container.name}</option>
+              {/each}
+            </select>
+          </div>
+
+          <!-- Controls -->
+          <div class="flex items-center space-x-3">
+            <!-- Auto-scroll toggle -->
+            <div class="flex items-center">
+              <label class="relative inline-flex items-center cursor-pointer">
+                <input type="checkbox" bind:checked={autoScroll} class="sr-only peer" />
+                <div
+                  class="w-9 h-5 bg-gray-700 peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-blue-800 rounded-full peer peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-4 after:w-4 after:transition-all peer-checked:bg-blue-600"
+                ></div>
+                <span class="ml-2 text-sm font-medium text-gray-300">Auto-scroll</span>
+              </label>
+            </div>
+
+            <!-- Action buttons -->
+            <button class="p-1.5 text-gray-400 hover:text-gray-200 rounded-lg hover:bg-gray-800">
+              <Copy class="w-4 h-4" />
+            </button>
+            <button class="p-1.5 text-gray-400 hover:text-gray-200 rounded-lg hover:bg-gray-800">
+              <Download class="w-4 h-4" />
+            </button>
+          </div>
+        </div>
+        <!-- Logs content area -->
+        <div class="flex-1 overflow-auto bg-gray-900 p-4 font-mono text-sm text-white">
+          <!-- Example log entries; will replace with AnsiDisplay? -->
+        </div>
+      </div>
+    </div>
+  </section>
+</div>
diff --git a/ui/src/routes/+layout.svelte b/ui/src/routes/+layout.svelte
index d1c0f500e..51ebf88e8 100644
--- a/ui/src/routes/+layout.svelte
+++ b/ui/src/routes/+layout.svelte
@@ -56,7 +56,7 @@
     ? 'md:ml-64'
     : 'md:ml-16'}"
 >
-  <div class="flex-grow {currRoute !== '/' ? 'overflow-hidden' : ''} p-4 pt-6">
+  <div class="flex flex-grow flex-col {currRoute !== '/' ? 'overflow-hidden' : ''} p-4 pt-6">
     <ToastPanel />
     <slot />
   </div>
diff --git a/ui/src/routes/+layout.ts b/ui/src/routes/+layout.ts
index d8699d6fa..20523d975 100644
--- a/ui/src/routes/+layout.ts
+++ b/ui/src/routes/+layout.ts
@@ -2,7 +2,7 @@
 // SPDX-License-Identifier: AGPL-3.0-or-later OR LicenseRef-Defense-Unicorns-Commercial
 
 import { authenticated } from '$features/auth/store'
-import { createStore } from '$features/k8s/namespaces/store'
+import { createStore as createNamespaceStore } from '$features/k8s/namespaces/store'
 import type { UserData } from '$features/navigation/types'
 
 export const ssr = false
@@ -55,7 +55,8 @@ async function auth(token: string): Promise<AuthResponse> {
 
 // load namespace and auth data before rendering the app
 export const load = async () => {
-  const namespaces = createStore()
+  const namespaces = createNamespaceStore()
+
   const url = new URL(window.location.href)
   const localAuthToken = url.searchParams.get('token') || ''
   let userData: UserData = {
diff --git a/ui/src/routes/auth.test.ts b/ui/src/routes/auth.test.ts
index 53e4bcf12..11b325429 100644
--- a/ui/src/routes/auth.test.ts
+++ b/ui/src/routes/auth.test.ts
@@ -12,6 +12,11 @@ vi.mock('$features/k8s/namespaces/store', () => ({
     start: vi.fn(),
   })),
 }))
+vi.mock('$features/k8s/workloads/pods/store', () => ({
+  createStore: vi.fn(() => ({
+    start: vi.fn(),
+  })),
+}))
 vi.mock('$features/auth/store', () => ({
   authenticated: {
     set: vi.fn(),
@@ -71,11 +76,13 @@ describe('load function', () => {
 
     // Verify store operations
     expect(result.namespaces.start).toHaveBeenCalled()
+    expect(result.pods.start).toHaveBeenCalled()
     expect(authenticated.set).toHaveBeenCalledWith(true)
 
     // Verify return value
     expect(result).toEqual({
       namespaces: expect.any(Object),
+      pods: expect.any(Object),
       userData: {
         name: '',
         preferredUsername: '',
@@ -111,11 +118,14 @@ describe('load function', () => {
 
     // Verify namespaces was called
     expect(result.namespaces.start).toHaveBeenCalled()
+    expect(result.pods.start).toHaveBeenCalled()
+
     expect(authenticated.set).toHaveBeenCalledWith(true)
 
     // Verify return value
     expect(result).toEqual({
       namespaces: expect.any(Object),
+      pods: expect.any(Object),
       userData: {
         name: 'Doug Unicorn',
         preferredUsername: 'doug@defenseunicorns.com',
@@ -136,11 +146,13 @@ describe('load function', () => {
 
     // Verify namespaces wasn't started and authenticated state was set to false
     expect(result.namespaces.start).not.toHaveBeenCalled()
+    expect(result.pods.start).not.toHaveBeenCalled()
     expect(authenticated.set).toHaveBeenCalledWith(false)
 
     // Verify return value
     expect(result).toEqual({
       namespaces: expect.any(Object),
+      pods: expect.any(Object),
       userData: {
         name: '',
         preferredUsername: '',
@@ -163,11 +175,13 @@ describe('load function', () => {
 
     // Verify namespaces wasn't started authenticated state was set to false
     expect(result.namespaces.start).not.toHaveBeenCalled()
+    expect(result.pods.start).not.toHaveBeenCalled()
     expect(authenticated.set).toHaveBeenCalledWith(false)
 
     // Verify return value
     expect(result).toEqual({
       namespaces: expect.any(Object),
+      pods: expect.any(Object),
       userData: {
         name: '',
         preferredUsername: '',
@@ -193,6 +207,7 @@ describe('load function', () => {
     // Verify return value
     expect(result).toEqual({
       namespaces: expect.any(Object),
+      pods: expect.any(Object),
       userData: {
         name: '',
         preferredUsername: '',

From b2502bed3e462c9c512b03874b7212d8d335e578 Mon Sep 17 00:00:00 2001
From: UncleGedd <42304551+UncleGedd@users.noreply.github.com>
Date: Tue, 29 Oct 2024 12:46:57 -0500
Subject: [PATCH 02/45] Update src/pkg/api/handlers.go

Co-authored-by: Clint <catsby@users.noreply.github.com>
---
 src/pkg/api/handlers.go | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/src/pkg/api/handlers.go b/src/pkg/api/handlers.go
index d12c3f967..d80f54704 100644
--- a/src/pkg/api/handlers.go
+++ b/src/pkg/api/handlers.go
@@ -161,9 +161,10 @@ func getPodLogs(k8sSession *session.K8sSession) func(w http.ResponseWriter, r *h
 		}
 
 		w.Header().Set("Content-Type", "application/json")
-		w.WriteHeader(http.StatusOK)
 		err := json.NewEncoder(w).Encode(logs)
 		if err != nil {
+                        slog.Error("failed to encode getPodLog response", "error", err)
+		        http.Error(w, "Internal Server Error", http.StatusInternalServerError)
 			return
 		}
 	}

From 92ca73ce5dda9d3f28cf397859b7b9d1c1008627 Mon Sep 17 00:00:00 2001
From: unclegedd <gedd@defenseunicorns.com>
Date: Tue, 29 Oct 2024 17:12:03 -0500
Subject: [PATCH 03/45] WIP: making progress on dropdown

---
 .../workloads/pods/logs/+page.svelte          | 120 ++++++++++++++----
 1 file changed, 92 insertions(+), 28 deletions(-)

diff --git a/ui/src/routes/(resources)/workloads/pods/logs/+page.svelte b/ui/src/routes/(resources)/workloads/pods/logs/+page.svelte
index 9cf7acbc6..4bb1f92e8 100644
--- a/ui/src/routes/(resources)/workloads/pods/logs/+page.svelte
+++ b/ui/src/routes/(resources)/workloads/pods/logs/+page.svelte
@@ -2,47 +2,100 @@
 <!-- SPDX-License-Identifier: AGPL-3.0-or-later OR LicenseRef-Defense-Unicorns-Commercial -->
 
 <script lang="ts">
-  import { onDestroy } from 'svelte'
+  import { onMount } from 'svelte'
 
-  import { page } from '$app/stores'
   import { PodTable } from '$features/k8s'
   import { Copy, Download, Terminal } from 'carbon-icons-svelte'
 
   // todo: esc exits log view (change url)
 
-  let unsubscribePage: () => void
   let autoScroll = true
 
-  // Example pods - will replace with actual data
-  const pods = [
-    { uid: '1', name: 'nginx' },
-    { uid: '2', name: 'redis' },
-    { uid: '3', name: 'postgres' },
-  ]
-
-  // example containers - will replace with actual data
-  const containers = [{ name: 'nginx' }, { name: 'redis' }, { name: 'postgres' }]
-
   // Toggle auto-scroll
   function toggleAutoScroll() {
     autoScroll = !autoScroll
   }
 
-  let selectedContainer = containers[0]?.name ?? ''
+  // interfaces for pod data
+  interface Container {
+    name: string
+  }
+  interface Pod {
+    metadata: {
+      name: string
+      namespace: string
+    }
+    spec: {
+      containers: Container[]
+    }
+  }
 
-  // todo: start here
-  // you've gotten the selected pod using a global context
-  // now you need a list of pods (to include their containers)
-  // option 1: new SSE stream here
-  // option 2: global pod store
-  let selectedPod = pods[0]?.uid ?? ''
+  let rawPods: Pod[] = []
+
+  // Derive unique namespaces from pods
+  $: namespaces = [...new Set(rawPods.map((pod) => pod.metadata.namespace))].map((ns) => ({ name: ns }))
+
+  // Derive pods for selected namespace
+  $: pods = rawPods
+    .filter((pod) => pod.metadata.namespace === selectedNamespace)
+    .map((pod) => ({ name: pod.metadata.name, uid: pod.metadata.name }))
+
+  // Derive containers for selected pod
+  $: containers = rawPods.find((pod) => pod.metadata.name === selectedPod)?.spec.containers ?? []
+
+  let selectedNamespace = ''
+  let selectedPod = ''
+  let selectedContainer = ''
+
+  // Function to handle namespace selection
+  const handleNamespaceChange = () => {
+    const podsInNamespace = pods
+    if (podsInNamespace.length > 0) {
+      selectedPod = podsInNamespace[0].uid
+      // Get containers for the newly selected pod
+      const containersInPod = rawPods.find((pod) => pod.metadata.name === selectedPod)?.spec.containers ?? []
+      selectedContainer = containersInPod[0]?.name ?? ''
+    } else {
+      selectedPod = ''
+      selectedContainer = ''
+    }
+  }
 
-  unsubscribePage = page.subscribe(async ({ params, data, url }) => {
-    console.log('page changed', data.pods.$resources)
-  })
+  // Function to handle pod selection
+  const handlePodChange = () => {
+    const containersInPod = rawPods.find((pod) => pod.metadata.name === selectedPod)?.spec.containers ?? []
+    selectedContainer = containersInPod[0]?.name ?? ''
+  }
+
+  const updateDropdowns = (data: Pod[]) => {
+    rawPods = data
+
+    // Set initial selections if not already set
+    if (!selectedNamespace && namespaces.length > 0) {
+      selectedNamespace = namespaces[0].name
+      handleNamespaceChange()
+    }
+  }
 
-  onDestroy(() => {
-    unsubscribePage()
+  onMount(() => {
+    // set up sse stream for pods
+    const fieldSelectors = 'metadata.name,metadata.namespace,spec.containers[].name'
+    const url = `/api/v1/resources/workloads/pods?fields=${fieldSelectors}`
+    const eventSource = new EventSource(url)
+
+    eventSource.onmessage = (event) => {
+      const data = JSON.parse(event.data)
+      updateDropdowns(data)
+    }
+
+    eventSource.onerror = (event) => {
+      console.error('EventSource failed:', event)
+    }
+
+    return () => {
+      console.log('closing event source')
+      eventSource.close()
+    }
   })
 </script>
 
@@ -54,21 +107,33 @@
       <div class="flex flex-col px-4 py-2">
         <!-- Header -->
         <div class="flex items-center justify-between px-4 py-2 border-b border-gray-700">
-          <div class="flex items-center space-x-4">
+          <div class="flex items-center space-x-2">
             <div class="flex items-center">
               <Terminal class="w-4 h-4 text-gray-200" />
-              <span class="text-sm font-medium text-gray-200 text-nowrap ml-1">Pod Logs</span>
+              <span class="text-sm font-medium text-gray-200 text-nowrap ml-1">Logs</span>
             </div>
 
+            <!-- Namespace selector -->
+            <select
+              bind:value={selectedNamespace}
+              class="bg-gray-800 text-sm text-gray-300 rounded-md border border-gray-700 px-2 py-1 focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
+            >
+              {#each namespaces as ns}
+                <option value={ns.name}>{ns.name}</option>
+              {/each}
+            </select>
+
             <!-- Pod selector -->
             <select
               bind:value={selectedPod}
+              on:change={handlePodChange}
               class="bg-gray-800 text-sm text-gray-300 rounded-md border border-gray-700 px-2 py-1 focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
             >
               {#each pods as pod}
                 <option value={pod.uid}>{pod.name}</option>
               {/each}
             </select>
+
             <!-- Container selector -->
             <select
               bind:value={selectedContainer}
@@ -79,7 +144,6 @@
               {/each}
             </select>
           </div>
-
           <!-- Controls -->
           <div class="flex items-center space-x-3">
             <!-- Auto-scroll toggle -->

From c435c422d961c9a3c68e512a9dbd35e06a9557c5 Mon Sep 17 00:00:00 2001
From: unclegedd <gedd@defenseunicorns.com>
Date: Wed, 30 Oct 2024 17:14:31 -0500
Subject: [PATCH 04/45] WIP: this dropdown...

---
 .../lib/components/Dropdown/component.svelte  | 106 +++++++++++++
 ui/src/lib/components/index.ts                |   3 +-
 .../workloads/pods/logs/+page.svelte          | 146 +++++++++---------
 3 files changed, 178 insertions(+), 77 deletions(-)
 create mode 100644 ui/src/lib/components/Dropdown/component.svelte

diff --git a/ui/src/lib/components/Dropdown/component.svelte b/ui/src/lib/components/Dropdown/component.svelte
new file mode 100644
index 000000000..7804824db
--- /dev/null
+++ b/ui/src/lib/components/Dropdown/component.svelte
@@ -0,0 +1,106 @@
+<!-- Copyright 2024 Defense Unicorns -->
+<!-- SPDX-License-Identifier: AGPL-3.0-or-later OR LicenseRef-Defense-Unicorns-Commercial -->
+
+<script lang="ts">
+  export let items: string[]
+  export let selectedValue: string
+  export let width: string = 'w-32' // must be a tailwind class
+  export let maxHeight: string = 'max-h-32' // must be a tailwind class
+
+  // let isOpen = false;
+
+  console.log('items:', items)
+
+  function handleSelect(item: string) {
+    selectedValue = item
+    // isOpen = false;
+  }
+  // function toggleDropdown() {
+  //   console.log('dropdown is open:', !isOpen);
+  //   isOpen = !isOpen;
+  // }
+
+  // function handleClickOutside(event: MouseEvent) {
+  //   const dropdown = document.getElementById(dropdownId);
+  //   const button = document.getElementById("dropdownBgHoverButton");
+  //
+  //   if (isOpen && !dropdown?.contains(event.target as Node) && !button?.contains(event.target as Node)) {
+  //     isOpen = false;
+  //   }
+  // }
+</script>
+
+<!--<svelte:window on:click={handleClickOutside} />-->
+
+<div>
+  <button
+    id="dropdownDefaultButton"
+    data-dropdown-toggle="foobar"
+    class="{width} justify-between truncate bg-gray-800 text-gray-300 hover:bg-gray-700 border border-gray-700 text-sm px-2 py-1 rounded-md inline-flex items-center h-7"
+    type="button"
+  >
+    <span class="truncate mr-1 text-gray-300">{selectedValue || items[0]}</span>
+    <svg
+      class="w-2.5 h-2.5 flex-shrink-0"
+      aria-hidden="true"
+      xmlns="http://www.w3.org/2000/svg"
+      fill="none"
+      viewBox="0 0 10 6"
+    >
+      <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m1 1 4 4 4-4" />
+    </svg>
+  </button>
+
+  <!-- Dropdown Menu -->
+  <div id="foobar" class="z-50 hidden mt-1 absolute truncate bg-gray-800 rounded-md border border-gray-700 shadow-lg">
+    <ul class="{maxHeight} overflow-y-auto py-1 text-sm text-gray-300" aria-labelledby="dropdownDefaultButton">
+      {#each items as item}
+        <li>
+          <button
+            on:click={() => handleSelect(item)}
+            class="w-full px-3 py-1 text-left hover:bg-gray-700 {selectedValue === item
+              ? 'bg-gray-700'
+              : ''} whitespace-nowrap"
+          >
+            {item}
+          </button>
+        </li>
+      {/each}
+    </ul>
+  </div>
+
+  <button
+    id="dropdownDefaultButton"
+    data-dropdown-toggle="dropdown"
+    class="text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium rounded-lg text-sm px-5 py-2.5 text-center inline-flex items-center dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800"
+    type="button"
+  >
+    Dropdown button <svg
+      class="w-2.5 h-2.5 ms-3"
+      aria-hidden="true"
+      xmlns="http://www.w3.org/2000/svg"
+      fill="none"
+      viewBox="0 0 10 6"
+    >
+      <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m1 1 4 4 4-4" />
+    </svg>
+  </button>
+
+  <!-- Dropdown menu -->
+  <div id="dropdown" class="z-10 hidden bg-white divide-y divide-gray-100 rounded-lg shadow w-44 dark:bg-gray-700">
+    <ul class="py-2 text-sm text-gray-700 dark:text-gray-200" aria-labelledby="dropdownDefaultButton">
+      <li>
+        <a href="#" class="block px-4 py-2 hover:bg-gray-100 dark:hover:bg-gray-600 dark:hover:text-white">Dashboard</a>
+      </li>
+      <li>
+        <a href="#" class="block px-4 py-2 hover:bg-gray-100 dark:hover:bg-gray-600 dark:hover:text-white">Settings</a>
+      </li>
+      <li>
+        <a href="#" class="block px-4 py-2 hover:bg-gray-100 dark:hover:bg-gray-600 dark:hover:text-white">Earnings</a>
+      </li>
+      <li>
+        <a href="#" class="block px-4 py-2 hover:bg-gray-100 dark:hover:bg-gray-600 dark:hover:text-white">Sign out</a>
+      </li>
+    </ul>
+  </div>
+</div>
diff --git a/ui/src/lib/components/index.ts b/ui/src/lib/components/index.ts
index 84aab1857..5142a39f6 100644
--- a/ui/src/lib/components/index.ts
+++ b/ui/src/lib/components/index.ts
@@ -1,17 +1,16 @@
 // Copyright 2024 Defense Unicorns
 // SPDX-License-Identifier: AGPL-3.0-or-later OR LicenseRef-Defense-Unicorns-Commercial
 
-export { default as AnsiDisplay } from './AnsiDisplay/component.svelte'
 export { default as CoreServicesWidget } from './CoreServicesWidget/component.svelte'
 export { default as Card } from './k8s/Card/component.svelte'
 export { default as DataTable } from './k8s/DataTable/component.svelte'
 export { default as Drawer } from './k8s/Drawer/component.svelte'
 export { default as Event } from './k8s/Event/component.svelte'
 export { default as EventList } from './k8s/Event/EventList.svelte'
-export { default as EventsOverviewWidget } from './k8s/Event/EventsOverviewWidget.svelte'
 export { default as InactiveBadge } from './k8s/InactiveBadge/component.svelte'
 export { default as Link } from './Link/component.svelte'
 export { default as ProgressBar } from './ProgressBar/component.svelte'
 export { default as ProgressBarWidget } from './StatsWidget/ProgressBarWidget.svelte'
 export { default as WithRightIconWidget } from './StatsWidget/WithRightIconWidget.svelte'
 export { default as Tooltip } from './Tooltip/component.svelte'
+export { default as Dropdown } from './Dropdown/component.svelte'
diff --git a/ui/src/routes/(resources)/workloads/pods/logs/+page.svelte b/ui/src/routes/(resources)/workloads/pods/logs/+page.svelte
index 4bb1f92e8..e8078e5fb 100644
--- a/ui/src/routes/(resources)/workloads/pods/logs/+page.svelte
+++ b/ui/src/routes/(resources)/workloads/pods/logs/+page.svelte
@@ -4,6 +4,7 @@
 <script lang="ts">
   import { onMount } from 'svelte'
 
+  import { Dropdown } from '$components'
   import { PodTable } from '$features/k8s'
   import { Copy, Download, Terminal } from 'carbon-icons-svelte'
 
@@ -20,6 +21,7 @@
   interface Container {
     name: string
   }
+
   interface Pod {
     metadata: {
       name: string
@@ -30,52 +32,41 @@
     }
   }
 
-  let rawPods: Pod[] = []
-
-  // Derive unique namespaces from pods
-  $: namespaces = [...new Set(rawPods.map((pod) => pod.metadata.namespace))].map((ns) => ({ name: ns }))
-
-  // Derive pods for selected namespace
-  $: pods = rawPods
-    .filter((pod) => pod.metadata.namespace === selectedNamespace)
-    .map((pod) => ({ name: pod.metadata.name, uid: pod.metadata.name }))
-
-  // Derive containers for selected pod
-  $: containers = rawPods.find((pod) => pod.metadata.name === selectedPod)?.spec.containers ?? []
-
-  let selectedNamespace = ''
-  let selectedPod = ''
-  let selectedContainer = ''
-
-  // Function to handle namespace selection
-  const handleNamespaceChange = () => {
-    const podsInNamespace = pods
-    if (podsInNamespace.length > 0) {
-      selectedPod = podsInNamespace[0].uid
-      // Get containers for the newly selected pod
-      const containersInPod = rawPods.find((pod) => pod.metadata.name === selectedPod)?.spec.containers ?? []
-      selectedContainer = containersInPod[0]?.name ?? ''
-    } else {
-      selectedPod = ''
-      selectedContainer = ''
+  // raw data
+  let namespaces: Set<string> = new Set()
+  let pods: Pod[] = []
+
+  // filtered data for dropdowns
+  let filteredPods: Pod[] = []
+  let filteredContainers: Container[] = []
+
+  // Selected values
+  let selectedPod: Pod
+  let selectedPodName: string
+  let selectedNamespace: string
+  let selectedContainer: Container
+  let selectedContainerName: string
+  let dataRendered = false
+
+  // reactivity for dropdowns to filter selected values from other dropdowns
+  $: {
+    if (selectedNamespace) {
+      console.log('selectedNamespace:', selectedNamespace)
+      // filteredPods = Array.from(pods).filter(p => p.metadata.namespace === selectedNamespace);
+      // selectedPod = filteredPods[0];
+      // filteredContainers = selectedPod.spec.containers;
+      // selectedContainer = filteredContainers[0];
     }
   }
+  // $: {
+  //   if (selectedPod) {
+  //     console.log('selectedPod:', selectedPod);
+  //     filteredContainers = selectedPod.spec.containers;
+  //     selectedContainer = filteredContainers[0];
+  //   }
+  // }
 
-  // Function to handle pod selection
-  const handlePodChange = () => {
-    const containersInPod = rawPods.find((pod) => pod.metadata.name === selectedPod)?.spec.containers ?? []
-    selectedContainer = containersInPod[0]?.name ?? ''
-  }
-
-  const updateDropdowns = (data: Pod[]) => {
-    rawPods = data
-
-    // Set initial selections if not already set
-    if (!selectedNamespace && namespaces.length > 0) {
-      selectedNamespace = namespaces[0].name
-      handleNamespaceChange()
-    }
-  }
+  $: dataRendered = namespaces.size > 0
 
   onMount(() => {
     // set up sse stream for pods
@@ -85,7 +76,28 @@
 
     eventSource.onmessage = (event) => {
       const data = JSON.parse(event.data)
-      updateDropdowns(data)
+
+      // Process each item in the data array
+      data.forEach((p: Pod) => {
+        namespaces.add(p.metadata.namespace)
+        pods.push(p)
+      })
+
+      // Trigger reactivity by reassigning the sets (todo: kind of weird)
+      namespaces = new Set(Array.from(namespaces).sort())
+      pods = pods
+
+      // set default values
+      if (!selectedNamespace) {
+        selectedNamespace = pods[0].metadata.namespace
+        // selectedPod = filteredPods[0]
+        // selectedPodName = selectedPod.metadata.name
+        // selectedContainer = filteredPods[0].spec.containers[0];
+        // selectedContainerName = selectedContainer.name
+        //
+        // filteredPods = pods.filter(p => p.metadata.namespace === selectedNamespace);
+        // filteredContainers = selectedPod.spec.containers;
+      }
     }
 
     eventSource.onerror = (event) => {
@@ -112,37 +124,21 @@
               <Terminal class="w-4 h-4 text-gray-200" />
               <span class="text-sm font-medium text-gray-200 text-nowrap ml-1">Logs</span>
             </div>
-
-            <!-- Namespace selector -->
-            <select
-              bind:value={selectedNamespace}
-              class="bg-gray-800 text-sm text-gray-300 rounded-md border border-gray-700 px-2 py-1 focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
-            >
-              {#each namespaces as ns}
-                <option value={ns.name}>{ns.name}</option>
-              {/each}
-            </select>
-
-            <!-- Pod selector -->
-            <select
-              bind:value={selectedPod}
-              on:change={handlePodChange}
-              class="bg-gray-800 text-sm text-gray-300 rounded-md border border-gray-700 px-2 py-1 focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
-            >
-              {#each pods as pod}
-                <option value={pod.uid}>{pod.name}</option>
-              {/each}
-            </select>
-
-            <!-- Container selector -->
-            <select
-              bind:value={selectedContainer}
-              class="bg-gray-800 text-sm text-gray-300 rounded-md border border-gray-700 px-2 py-1 focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
-            >
-              {#each containers as container}
-                <option value={container.name}>{container.name}</option>
-              {/each}
-            </select>
+            {#if dataRendered}
+              <!-- Namespace selector -->
+              <Dropdown bind:selectedValue={selectedNamespace} items={Array.from(namespaces)} />
+
+              <!-- Pod selector -->
+              <!--              <Dropdown-->
+              <!--                bind:selectedValue={selectedPodName}-->
+              <!--                items={filteredPods.map(p => p.metadata.name)}-->
+              <!--              />-->
+              <!-- Container selector -->
+              <!--              <Dropdown-->
+              <!--                bind:selectedValue={selectedContainerName}-->
+              <!--                items={filteredContainers.map(c => c.name)}-->
+              <!--              />-->
+            {/if}
           </div>
           <!-- Controls -->
           <div class="flex items-center space-x-3">

From cb47f5577abcf42ce27e5df0297726086de91be3 Mon Sep 17 00:00:00 2001
From: unclegedd <gedd@defenseunicorns.com>
Date: Wed, 30 Oct 2024 17:40:40 -0500
Subject: [PATCH 05/45] dropdowns working as expected

---
 .../lib/components/Dropdown/component.svelte  | 73 ++++---------------
 .../workloads/pods/logs/+page.svelte          | 71 +++++++++---------
 2 files changed, 50 insertions(+), 94 deletions(-)

diff --git a/ui/src/lib/components/Dropdown/component.svelte b/ui/src/lib/components/Dropdown/component.svelte
index 7804824db..c51113933 100644
--- a/ui/src/lib/components/Dropdown/component.svelte
+++ b/ui/src/lib/components/Dropdown/component.svelte
@@ -2,40 +2,29 @@
 <!-- SPDX-License-Identifier: AGPL-3.0-or-later OR LicenseRef-Defense-Unicorns-Commercial -->
 
 <script lang="ts">
+  import { Dropdown } from 'flowbite'
+
   export let items: string[]
   export let selectedValue: string
   export let width: string = 'w-32' // must be a tailwind class
   export let maxHeight: string = 'max-h-32' // must be a tailwind class
-
-  // let isOpen = false;
-
-  console.log('items:', items)
+  export let id: string
 
   function handleSelect(item: string) {
     selectedValue = item
-    // isOpen = false;
-  }
-  // function toggleDropdown() {
-  //   console.log('dropdown is open:', !isOpen);
-  //   isOpen = !isOpen;
-  // }
 
-  // function handleClickOutside(event: MouseEvent) {
-  //   const dropdown = document.getElementById(dropdownId);
-  //   const button = document.getElementById("dropdownBgHoverButton");
-  //
-  //   if (isOpen && !dropdown?.contains(event.target as Node) && !button?.contains(event.target as Node)) {
-  //     isOpen = false;
-  //   }
-  // }
+    // hide flowbite dropdown because it won't do it for us
+    const dropdownButton = document.getElementById(id)
+    const dropDownMenu = document.getElementById(`${id}-menu`)
+    const dropdown = new Dropdown(dropDownMenu, dropdownButton)
+    dropdown.hide()
+  }
 </script>
 
-<!--<svelte:window on:click={handleClickOutside} />-->
-
 <div>
   <button
-    id="dropdownDefaultButton"
-    data-dropdown-toggle="foobar"
+    {id}
+    data-dropdown-toggle="{id}-menu"
     class="{width} justify-between truncate bg-gray-800 text-gray-300 hover:bg-gray-700 border border-gray-700 text-sm px-2 py-1 rounded-md inline-flex items-center h-7"
     type="button"
   >
@@ -52,7 +41,10 @@
   </button>
 
   <!-- Dropdown Menu -->
-  <div id="foobar" class="z-50 hidden mt-1 absolute truncate bg-gray-800 rounded-md border border-gray-700 shadow-lg">
+  <div
+    id="{id}-menu"
+    class="z-50 hidden mt-1 absolute truncate bg-gray-800 rounded-md border border-gray-700 shadow-lg"
+  >
     <ul class="{maxHeight} overflow-y-auto py-1 text-sm text-gray-300" aria-labelledby="dropdownDefaultButton">
       {#each items as item}
         <li>
@@ -68,39 +60,4 @@
       {/each}
     </ul>
   </div>
-
-  <button
-    id="dropdownDefaultButton"
-    data-dropdown-toggle="dropdown"
-    class="text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium rounded-lg text-sm px-5 py-2.5 text-center inline-flex items-center dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800"
-    type="button"
-  >
-    Dropdown button <svg
-      class="w-2.5 h-2.5 ms-3"
-      aria-hidden="true"
-      xmlns="http://www.w3.org/2000/svg"
-      fill="none"
-      viewBox="0 0 10 6"
-    >
-      <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m1 1 4 4 4-4" />
-    </svg>
-  </button>
-
-  <!-- Dropdown menu -->
-  <div id="dropdown" class="z-10 hidden bg-white divide-y divide-gray-100 rounded-lg shadow w-44 dark:bg-gray-700">
-    <ul class="py-2 text-sm text-gray-700 dark:text-gray-200" aria-labelledby="dropdownDefaultButton">
-      <li>
-        <a href="#" class="block px-4 py-2 hover:bg-gray-100 dark:hover:bg-gray-600 dark:hover:text-white">Dashboard</a>
-      </li>
-      <li>
-        <a href="#" class="block px-4 py-2 hover:bg-gray-100 dark:hover:bg-gray-600 dark:hover:text-white">Settings</a>
-      </li>
-      <li>
-        <a href="#" class="block px-4 py-2 hover:bg-gray-100 dark:hover:bg-gray-600 dark:hover:text-white">Earnings</a>
-      </li>
-      <li>
-        <a href="#" class="block px-4 py-2 hover:bg-gray-100 dark:hover:bg-gray-600 dark:hover:text-white">Sign out</a>
-      </li>
-    </ul>
-  </div>
 </div>
diff --git a/ui/src/routes/(resources)/workloads/pods/logs/+page.svelte b/ui/src/routes/(resources)/workloads/pods/logs/+page.svelte
index e8078e5fb..56b9145b5 100644
--- a/ui/src/routes/(resources)/workloads/pods/logs/+page.svelte
+++ b/ui/src/routes/(resources)/workloads/pods/logs/+page.svelte
@@ -46,27 +46,27 @@
   let selectedNamespace: string
   let selectedContainer: Container
   let selectedContainerName: string
-  let dataRendered = false
 
   // reactivity for dropdowns to filter selected values from other dropdowns
   $: {
     if (selectedNamespace) {
       console.log('selectedNamespace:', selectedNamespace)
-      // filteredPods = Array.from(pods).filter(p => p.metadata.namespace === selectedNamespace);
-      // selectedPod = filteredPods[0];
-      // filteredContainers = selectedPod.spec.containers;
-      // selectedContainer = filteredContainers[0];
+      filteredPods = Array.from(pods).filter((p) => p.metadata.namespace === selectedNamespace)
+      selectedPod = filteredPods[0]
+      filteredContainers = selectedPod.spec.containers
+      selectedContainer = filteredContainers[0]
+    }
+  }
+  $: {
+    if (selectedPodName) {
+      console.log('selectedPodName:', selectedPodName)
+      // set selectedPod to the pod with the selected name
+      selectedPod = pods.find((p) => p.metadata.name === selectedPodName) ?? selectedPod
+      filteredContainers = selectedPod.spec.containers
+      selectedContainer = filteredContainers[0]
+      selectedContainerName = selectedContainer.name
     }
   }
-  // $: {
-  //   if (selectedPod) {
-  //     console.log('selectedPod:', selectedPod);
-  //     filteredContainers = selectedPod.spec.containers;
-  //     selectedContainer = filteredContainers[0];
-  //   }
-  // }
-
-  $: dataRendered = namespaces.size > 0
 
   onMount(() => {
     // set up sse stream for pods
@@ -90,13 +90,13 @@
       // set default values
       if (!selectedNamespace) {
         selectedNamespace = pods[0].metadata.namespace
-        // selectedPod = filteredPods[0]
-        // selectedPodName = selectedPod.metadata.name
-        // selectedContainer = filteredPods[0].spec.containers[0];
-        // selectedContainerName = selectedContainer.name
-        //
-        // filteredPods = pods.filter(p => p.metadata.namespace === selectedNamespace);
-        // filteredContainers = selectedPod.spec.containers;
+        selectedPod = filteredPods[0]
+        selectedPodName = selectedPod.metadata.name
+        selectedContainer = filteredPods[0].spec.containers[0]
+        selectedContainerName = selectedContainer.name
+
+        filteredPods = pods.filter((p) => p.metadata.namespace === selectedNamespace)
+        filteredContainers = selectedPod.spec.containers
       }
     }
 
@@ -124,21 +124,20 @@
               <Terminal class="w-4 h-4 text-gray-200" />
               <span class="text-sm font-medium text-gray-200 text-nowrap ml-1">Logs</span>
             </div>
-            {#if dataRendered}
-              <!-- Namespace selector -->
-              <Dropdown bind:selectedValue={selectedNamespace} items={Array.from(namespaces)} />
-
-              <!-- Pod selector -->
-              <!--              <Dropdown-->
-              <!--                bind:selectedValue={selectedPodName}-->
-              <!--                items={filteredPods.map(p => p.metadata.name)}-->
-              <!--              />-->
-              <!-- Container selector -->
-              <!--              <Dropdown-->
-              <!--                bind:selectedValue={selectedContainerName}-->
-              <!--                items={filteredContainers.map(c => c.name)}-->
-              <!--              />-->
-            {/if}
+            <!-- Namespace selector -->
+            <Dropdown bind:selectedValue={selectedNamespace} items={Array.from(namespaces)} id="ns-dropdown" />
+            <!-- Pod selector -->
+            <Dropdown
+              bind:selectedValue={selectedPodName}
+              items={filteredPods.map((p) => p.metadata.name)}
+              id="pod-dropdown"
+            />
+            <!-- Container selector -->
+            <Dropdown
+              bind:selectedValue={selectedContainerName}
+              items={filteredContainers.map((c) => c.name)}
+              id="container-dropdown"
+            />
           </div>
           <!-- Controls -->
           <div class="flex items-center space-x-3">

From 0c1af081ed6ec50ad12a2300a5c652537c6bd1dc Mon Sep 17 00:00:00 2001
From: unclegedd <gedd@defenseunicorns.com>
Date: Wed, 30 Oct 2024 21:32:54 -0500
Subject: [PATCH 06/45] log view looking good

---
 ui/src/app.postcss                            |   2 +-
 .../lib/components/Dropdown/component.svelte  |   4 +-
 .../workloads/pods/logs/+page.svelte          | 116 +++++++++++-------
 3 files changed, 72 insertions(+), 50 deletions(-)

diff --git a/ui/src/app.postcss b/ui/src/app.postcss
index 50f712429..514892162 100644
--- a/ui/src/app.postcss
+++ b/ui/src/app.postcss
@@ -67,7 +67,7 @@
         @apply relative flex h-full w-full flex-col overflow-hidden dark:bg-gray-800 sm:rounded-lg;
 
         .table-header {
-          @apply flex items-center py-3 space-y-3 border-b dark:border-gray-700 mx-4 space-y-0;
+          @apply flex items-center py-3 border-b dark:border-gray-700 mx-4 space-y-0;
         }
 
         .table-filter-section {
diff --git a/ui/src/lib/components/Dropdown/component.svelte b/ui/src/lib/components/Dropdown/component.svelte
index c51113933..4025c2258 100644
--- a/ui/src/lib/components/Dropdown/component.svelte
+++ b/ui/src/lib/components/Dropdown/component.svelte
@@ -50,9 +50,7 @@
         <li>
           <button
             on:click={() => handleSelect(item)}
-            class="w-full px-3 py-1 text-left hover:bg-gray-700 {selectedValue === item
-              ? 'bg-gray-700'
-              : ''} whitespace-nowrap"
+            class="w-full px-3 py-1 text-left hover:bg-gray-700 whitespace-nowrap"
           >
             {item}
           </button>
diff --git a/ui/src/routes/(resources)/workloads/pods/logs/+page.svelte b/ui/src/routes/(resources)/workloads/pods/logs/+page.svelte
index 56b9145b5..1e4b25805 100644
--- a/ui/src/routes/(resources)/workloads/pods/logs/+page.svelte
+++ b/ui/src/routes/(resources)/workloads/pods/logs/+page.svelte
@@ -6,7 +6,7 @@
 
   import { Dropdown } from '$components'
   import { PodTable } from '$features/k8s'
-  import { Copy, Download, Terminal } from 'carbon-icons-svelte'
+  import { Copy, Download, Search, Terminal } from 'carbon-icons-svelte'
 
   // todo: esc exits log view (change url)
 
@@ -32,6 +32,9 @@
     }
   }
 
+  // Search term
+  let search = ''
+
   // raw data
   let namespaces: Set<string> = new Set()
   let pods: Pod[] = []
@@ -50,7 +53,6 @@
   // reactivity for dropdowns to filter selected values from other dropdowns
   $: {
     if (selectedNamespace) {
-      console.log('selectedNamespace:', selectedNamespace)
       filteredPods = Array.from(pods).filter((p) => p.metadata.namespace === selectedNamespace)
       selectedPod = filteredPods[0]
       filteredContainers = selectedPod.spec.containers
@@ -59,7 +61,6 @@
   }
   $: {
     if (selectedPodName) {
-      console.log('selectedPodName:', selectedPodName)
       // set selectedPod to the pod with the selected name
       selectedPod = pods.find((p) => p.metadata.name === selectedPodName) ?? selectedPod
       filteredContainers = selectedPod.spec.containers
@@ -115,55 +116,78 @@
   <PodTable />
 
   <section class="h-[35%] flex-shrink-0 mt-2">
-    <div class="flex h-full w-full flex-col overflow-hidden bg-gray-800 rounded-lg">
-      <div class="flex flex-col px-4 py-2">
-        <!-- Header -->
-        <div class="flex items-center justify-between px-4 py-2 border-b border-gray-700">
-          <div class="flex items-center space-x-2">
-            <div class="flex items-center">
-              <Terminal class="w-4 h-4 text-gray-200" />
-              <span class="text-sm font-medium text-gray-200 text-nowrap ml-1">Logs</span>
+    <div class="flex h-full w-full flex-col bg-gray-800 rounded-lg">
+      <!-- Header -->
+      <div class="flex items-center justify-between py-2 border-b border-gray-700 mx-4">
+        <!-- Left section: Title, search, and log controls -->
+        <div class="flex items-center space-x-6">
+          <!-- Logo and title -->
+          <div class="flex items-center">
+            <Terminal class="w-4 h-4 text-gray-200" />
+            <span class="text-sm font-medium text-gray-200 text-nowrap ml-1">Logs</span>
+          </div>
+
+          <!-- Search -->
+          <div class="relative w-48">
+            <div class="pointer-events-none absolute inset-y-0 left-0 flex items-center pl-3">
+              <Search class="text-gray-400" />
             </div>
-            <!-- Namespace selector -->
-            <Dropdown bind:selectedValue={selectedNamespace} items={Array.from(namespaces)} id="ns-dropdown" />
-            <!-- Pod selector -->
-            <Dropdown
-              bind:selectedValue={selectedPodName}
-              items={filteredPods.map((p) => p.metadata.name)}
-              id="pod-dropdown"
-            />
-            <!-- Container selector -->
-            <Dropdown
-              bind:selectedValue={selectedContainerName}
-              items={filteredContainers.map((c) => c.name)}
-              id="container-dropdown"
+            <input
+              type="text"
+              name="input-search"
+              autocomplete="off"
+              class="focus:ring-primary-500 h-5 focus:border-primary-500 dark:focus:ring-primary-500 dark:focus:border-primary-500 block w-full rounded-md border border-gray-300 bg-gray-50 p-2.5 pl-9 text-gray-900 sm:text-sm dark:border-gray-600 dark:bg-gray-700 dark:text-white dark:placeholder-gray-400"
+              placeholder="Search"
+              data-testid="datatable-search"
+              bind:value={search}
             />
           </div>
-          <!-- Controls -->
-          <div class="flex items-center space-x-3">
-            <!-- Auto-scroll toggle -->
-            <div class="flex items-center">
-              <label class="relative inline-flex items-center cursor-pointer">
-                <input type="checkbox" bind:checked={autoScroll} class="sr-only peer" />
-                <div
-                  class="w-9 h-5 bg-gray-700 peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-blue-800 rounded-full peer peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-4 after:w-4 after:transition-all peer-checked:bg-blue-600"
-                ></div>
-                <span class="ml-2 text-sm font-medium text-gray-300">Auto-scroll</span>
-              </label>
-            </div>
 
-            <!-- Action buttons -->
-            <button class="p-1.5 text-gray-400 hover:text-gray-200 rounded-lg hover:bg-gray-800">
-              <Copy class="w-4 h-4" />
-            </button>
-            <button class="p-1.5 text-gray-400 hover:text-gray-200 rounded-lg hover:bg-gray-800">
-              <Download class="w-4 h-4" />
-            </button>
+          <!-- Auto-scroll toggle -->
+          <div class="flex items-center">
+            <label class="relative inline-flex items-center cursor-pointer">
+              <input type="checkbox" bind:checked={autoScroll} class="sr-only peer" />
+              <div
+                class="w-9 h-5 bg-gray-700 peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-blue-800 rounded-full peer peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-4 after:w-4 after:transition-all peer-checked:bg-blue-600"
+              ></div>
+              <span class="ml-2 text-sm font-medium text-gray-300">Auto-scroll</span>
+            </label>
           </div>
         </div>
-        <!-- Logs content area -->
-        <div class="flex-1 overflow-auto bg-gray-900 p-4 font-mono text-sm text-white">
-          <!-- Example log entries; will replace with AnsiDisplay? -->
+
+        <!-- Right section: Action buttons -->
+        <div class="flex items-center space-x-2">
+          <button class="p-1.5 text-gray-400 hover:text-gray-200 rounded-lg hover:bg-gray-800">
+            <Copy class="w-4 h-4" />
+          </button>
+          <button class="p-1.5 text-gray-400 hover:text-gray-200 rounded-lg hover:bg-gray-800">
+            <Download class="w-4 h-4" />
+          </button>
+        </div>
+      </div>
+
+      <!-- Dropdowns -->
+      <div class="flex space-x-4 p-4">
+        <Dropdown bind:selectedValue={selectedNamespace} items={Array.from(namespaces)} id="ns-dropdown" width="w-48" />
+        <Dropdown
+          bind:selectedValue={selectedPodName}
+          items={filteredPods.map((p) => p.metadata.name)}
+          id="pod-dropdown"
+          width="w-48"
+        />
+        <Dropdown
+          bind:selectedValue={selectedContainerName}
+          items={filteredContainers.map((c) => c.name)}
+          id="container-dropdown"
+          width="w-48"
+        />
+      </div>
+      <!-- Logs content area -->
+      <div class="flex-1 min-h-0 m-1">
+        <div class="h-full bg-gray-900 rounded-md overflow-y-auto p-1">
+          {#each Array.from({ length: 100 }) as _, i}
+            <pre class="text-gray-300 text-sm font-mono">[2021-10-01T12:00:00Z] Log line {i}</pre>
+          {/each}
         </div>
       </div>
     </div>

From 03263ad5a40f0347b3105afc927d69b8eb998350 Mon Sep 17 00:00:00 2001
From: unclegedd <gedd@defenseunicorns.com>
Date: Thu, 31 Oct 2024 15:46:15 -0500
Subject: [PATCH 07/45] WIP: ugly code but working pretty well

---
 src/pkg/api/handlers.go                       | 112 ++++++++++++++++--
 src/pkg/api/rest/filter.go                    |   6 +-
 .../components/AnsiDisplay/component.svelte   |  53 +++++++--
 ui/src/lib/components/index.ts                |   1 +
 .../workloads/pods/logs/+page.svelte          |  70 ++++++++---
 5 files changed, 201 insertions(+), 41 deletions(-)

diff --git a/src/pkg/api/handlers.go b/src/pkg/api/handlers.go
index d80f54704..72a735aab 100644
--- a/src/pkg/api/handlers.go
+++ b/src/pkg/api/handlers.go
@@ -4,9 +4,15 @@
 package api
 
 import (
+	"bufio"
+	"context"
 	"encoding/json"
+	"errors"
+	"fmt"
+	"io"
 	"log/slog"
 	"net/http"
+	"strings"
 	"time"
 
 	"github.com/defenseunicorns/uds-runtime/src/pkg/api/auth"
@@ -14,6 +20,8 @@ import (
 	"github.com/defenseunicorns/uds-runtime/src/pkg/api/resources"
 	"github.com/defenseunicorns/uds-runtime/src/pkg/api/rest"
 	"github.com/defenseunicorns/uds-runtime/src/pkg/k8s/session"
+	v1 "k8s.io/api/core/v1"
+	metav1 "k8s.io/apimachinery/pkg/apis/meta/v1"
 )
 
 // @Description Get Nodes
@@ -144,29 +152,113 @@ func getPod(cache *resources.Cache) func(w http.ResponseWriter, r *http.Request)
 // @Router /api/v1/resources/workloads/pods/logs [get]
 // @Param pod query string true "Pod name"
 // @Param namespace query string true "Namespace"
+// todo: guard against accessing logs for pods that shouldn't be accessed?
+// todo: test back/forward button, etc
+// todo: rate limiting?
+// todo: error retry logic?
 func getPodLogs(k8sSession *session.K8sSession) func(w http.ResponseWriter, r *http.Request) {
 	return func(w http.ResponseWriter, r *http.Request) {
-		// todo: guard against accessing logs for pods that shouldn't be accessed?
-		// todo: test back/forward button, etc
+		// Get query parameters
 		pod := r.URL.Query().Get("pod")
 		namespace := r.URL.Query().Get("namespace")
-		if pod == "" || namespace == "" {
+		container := r.URL.Query().Get("container")
+		if pod == "" || namespace == "" || container == "" {
 			http.Error(w, "Pod and Namespace are required", http.StatusBadRequest)
 			return
 		}
 
-		// return fake logs for now
-		logs := []string{
-			"2024-01-01T00:00:00Z [INFO] This is a log message",
+		// Set headers for SSE
+		w.Header().Set("Content-Type", "text/event-stream")
+		w.Header().Set("Cache-Control", "no-cache")
+		w.Header().Set("Connection", "keep-alive")
+		w.Header().Set("Access-Control-Allow-Origin", "*")
+
+		ctx := r.Context()
+
+		flusher, ok := w.(http.Flusher)
+
+		// Get existing logs first without following
+		numLines := int64(100)
+		existingLogs := k8sSession.Clients.Clientset.CoreV1().Pods(namespace).GetLogs(pod, &v1.PodLogOptions{
+			Container: container,
+			TailLines: &numLines, // limit the lines so we don't send too much data to the client
+		})
+
+		// Read existing logs
+		lastReadTime := time.Now()
+		existingLogsStream, err := existingLogs.Stream(ctx)
+		if err != nil {
+			http.Error(w, fmt.Sprintf("Failed to get existing logs: %v", err), http.StatusInternalServerError)
+			return
+		}
+
+		defer existingLogsStream.Close()
+
+		// Send existing logs to client
+		scanner := bufio.NewScanner(existingLogsStream)
+		for scanner.Scan() {
+			fmt.Fprintf(w, "data: %s\n\n", scanner.Text())
 		}
+		flusher.Flush()
 
-		w.Header().Set("Content-Type", "application/json")
-		err := json.NewEncoder(w).Encode(logs)
+		if err := scanner.Err(); err != nil {
+			http.Error(w, fmt.Sprintf("Error reading existing logs: %v", err), http.StatusInternalServerError)
+			return
+		}
+
+		// after sending existing logs, continue to stream new logs
+		podLogs := k8sSession.Clients.Clientset.CoreV1().Pods(namespace).GetLogs(pod, &v1.PodLogOptions{
+			Container: container,
+			Follow:    true,
+			SinceTime: &metav1.Time{Time: lastReadTime},
+		})
+
+		logStream, err := podLogs.Stream(ctx)
 		if err != nil {
-                        slog.Error("failed to encode getPodLog response", "error", err)
-		        http.Error(w, "Internal Server Error", http.StatusInternalServerError)
+			http.Error(w, fmt.Sprintf("Failed to open log stream: %v", err), http.StatusInternalServerError)
 			return
 		}
+		defer logStream.Close()
+
+		reader := bufio.NewReader(logStream)
+		if !ok {
+			http.Error(w, "Streaming unsupported", http.StatusInternalServerError)
+			return
+		}
+
+		// Buffer for batching log lines
+		var buffer strings.Builder
+		ticker := time.NewTicker(500 * time.Millisecond) // Batch window
+		defer ticker.Stop()
+
+		for {
+			select {
+			case <-ctx.Done():
+				slog.Debug("Log stream closed")
+				return
+			case <-ticker.C:
+				// check for data
+				line, err := reader.ReadBytes('\n')
+				if err != nil {
+					if err != io.EOF && !errors.Is(err, context.Canceled) {
+						// todo: named error event?
+						fmt.Fprintf(w, "data: %v\n\n", err)
+						flusher.Flush()
+					}
+					return
+				}
+
+				// Add to batch
+				buffer.Write(line)
+
+				// Flush batch if we have any data
+				if buffer.Len() > 0 {
+					fmt.Fprintf(w, "data: %s\n\n", buffer.String())
+					buffer.Reset()
+					flusher.Flush()
+				}
+			}
+		}
 	}
 }
 
diff --git a/src/pkg/api/rest/filter.go b/src/pkg/api/rest/filter.go
index 25fdc0304..a2a688552 100644
--- a/src/pkg/api/rest/filter.go
+++ b/src/pkg/api/rest/filter.go
@@ -97,7 +97,11 @@ func filterItemsByFields(items []unstructured.Unstructured, fieldPaths []string)
 //	value, found := getNestedValueFromUnstructured(data, []string{"user", "addresses[]", "city"})
 //	// value will be []interface{}{"New York", "Los Angeles"}, found will be true
 func getNestedValueFromUnstructured(obj map[string]interface{}, keys []string) (interface{}, bool) {
-	current := obj
+	// make copy of obj
+	current := make(map[string]interface{}, len(obj))
+	for k, v := range obj {
+		current[k] = v
+	}
 
 	// Iterate over each key in the keys slice
 	for i, key := range keys {
diff --git a/ui/src/lib/components/AnsiDisplay/component.svelte b/ui/src/lib/components/AnsiDisplay/component.svelte
index 5266691b7..9532ab8fa 100644
--- a/ui/src/lib/components/AnsiDisplay/component.svelte
+++ b/ui/src/lib/components/AnsiDisplay/component.svelte
@@ -9,23 +9,54 @@
   const convert = new Convert({
     newline: true,
     stream: true,
+    colors: {
+      0: '#374151',
+      1: '#F3F4F6',
+      2: '#D1D5DB',
+    },
   })
-  let termElement: HTMLElement | null
-  let scrollAnchor: Element | null | undefined
 
-  // exported in parent component to handle incoming SSE messages
+  let container: HTMLDivElement
+  let scrollAnchor: HTMLDivElement
+
+  // Debounce scroll updates to prevent performance issues
+  let scrollTimeout: number
+  const debouncedScroll = () => {
+    if (scrollTimeout) {
+      window.clearTimeout(scrollTimeout)
+    }
+    scrollTimeout = window.setTimeout(() => {
+      scrollAnchor?.scrollIntoView({ behavior: 'auto' })
+    }, 100)
+  }
+
   export const addMessage = (message: string) => {
-    let html = convert.toHtml(message)
-    // Print the html or a non-breaking space if the message is empty to preserve line breaks
-    html = `<div class="zarf-terminal-line">${html || '&nbsp;'}</div>`
-    scrollAnchor?.insertAdjacentHTML('beforebegin', html)
-    scrollAnchor?.scrollIntoView()
+    if (!message || !scrollAnchor?.parentElement) return
+
+    console.log('message:', message)
+
+    const html = convert.toHtml(message)
+    const lineElement = document.createElement('div')
+    lineElement.className = 'log-line text-gray-300 text-sm font-mono py-0.5'
+    lineElement.innerHTML = html
+
+    // Use requestAnimationFrame for DOM updates
+    window.requestAnimationFrame(() => {
+      scrollAnchor.parentElement?.insertBefore(lineElement, scrollAnchor)
+      debouncedScroll()
+    })
   }
 
+  // Clean up on destroy
   onMount(() => {
-    termElement = document.getElementById('terminal')
-    scrollAnchor = termElement?.lastElementChild
+    return () => {
+      if (scrollTimeout) {
+        window.clearTimeout(scrollTimeout)
+      }
+    }
   })
 </script>
 
-<div class="scroll-anchor" />
+<div bind:this={container} class="h-full">
+  <div bind:this={scrollAnchor} class="scroll-anchor h-px" />
+</div>
diff --git a/ui/src/lib/components/index.ts b/ui/src/lib/components/index.ts
index 5142a39f6..2925994fa 100644
--- a/ui/src/lib/components/index.ts
+++ b/ui/src/lib/components/index.ts
@@ -1,6 +1,7 @@
 // Copyright 2024 Defense Unicorns
 // SPDX-License-Identifier: AGPL-3.0-or-later OR LicenseRef-Defense-Unicorns-Commercial
 
+export { default as AnsiDisplay } from './AnsiDisplay/component.svelte'
 export { default as CoreServicesWidget } from './CoreServicesWidget/component.svelte'
 export { default as Card } from './k8s/Card/component.svelte'
 export { default as DataTable } from './k8s/DataTable/component.svelte'
diff --git a/ui/src/routes/(resources)/workloads/pods/logs/+page.svelte b/ui/src/routes/(resources)/workloads/pods/logs/+page.svelte
index 1e4b25805..5abe5c55d 100644
--- a/ui/src/routes/(resources)/workloads/pods/logs/+page.svelte
+++ b/ui/src/routes/(resources)/workloads/pods/logs/+page.svelte
@@ -4,13 +4,15 @@
 <script lang="ts">
   import { onMount } from 'svelte'
 
-  import { Dropdown } from '$components'
+  import { AnsiDisplay, Dropdown } from '$components'
   import { PodTable } from '$features/k8s'
   import { Copy, Download, Search, Terminal } from 'carbon-icons-svelte'
 
   // todo: esc exits log view (change url)
+  // todo: memory leak? time out after 30 minutes or so? what about large data volume?
 
   let autoScroll = true
+  let addMessage: (message: string) => void
 
   // Toggle auto-scroll
   function toggleAutoScroll() {
@@ -50,34 +52,64 @@
   let selectedContainer: Container
   let selectedContainerName: string
 
+  // handle event source for logs and updating based on selected container
+  let logEventSource: EventSource
+
   // reactivity for dropdowns to filter selected values from other dropdowns
   $: {
     if (selectedNamespace) {
+      console.log('reactive selected namespace:', selectedNamespace)
       filteredPods = Array.from(pods).filter((p) => p.metadata.namespace === selectedNamespace)
-      selectedPod = filteredPods[0]
       filteredContainers = selectedPod.spec.containers
-      selectedContainer = filteredContainers[0]
     }
-  }
-  $: {
+
     if (selectedPodName) {
       // set selectedPod to the pod with the selected name
+      console.log('reactive selected pod:', selectedPodName)
       selectedPod = pods.find((p) => p.metadata.name === selectedPodName) ?? selectedPod
       filteredContainers = selectedPod.spec.containers
-      selectedContainer = filteredContainers[0]
+    }
+
+    if (selectedContainerName) {
+      selectedContainer = filteredContainers.find((c) => c.name === selectedContainerName) ?? selectedContainer
       selectedContainerName = selectedContainer.name
+      console.log('reactive selected container:', selectedContainerName)
+      // close existing event source and remove old logs
+      if (logEventSource) {
+        console.log('closing existing event source')
+        logEventSource.close()
+        // remove all divs with log-line class
+        const logLines = document.querySelectorAll('.log-line')
+        logLines.forEach((line) => line.remove())
+      }
+
+      // set up sse stream for logs
+      const logsURL = `/api/v1/resources/workloads/pods/logs?namespace=${selectedNamespace}&pod=${selectedPodName}&container=${selectedContainerName}`
+      logEventSource = new EventSource(logsURL)
+
+      logEventSource.onmessage = (event) => {
+        addMessage(event.data)
+      }
+
+      logEventSource.onerror = (event) => {
+        console.error('EventSource failed:', event)
+      }
     }
   }
 
   onMount(() => {
     // set up sse stream for pods
     const fieldSelectors = 'metadata.name,metadata.namespace,spec.containers[].name'
-    const url = `/api/v1/resources/workloads/pods?fields=${fieldSelectors}`
-    const eventSource = new EventSource(url)
+    const podURL = `/api/v1/resources/workloads/pods?fields=${fieldSelectors}`
+    const podEventSource = new EventSource(podURL)
 
-    eventSource.onmessage = (event) => {
+    podEventSource.onmessage = (event) => {
       const data = JSON.parse(event.data)
 
+      // clear existing data
+      namespaces.clear()
+      pods = []
+
       // Process each item in the data array
       data.forEach((p: Pod) => {
         namespaces.add(p.metadata.namespace)
@@ -91,23 +123,25 @@
       // set default values
       if (!selectedNamespace) {
         selectedNamespace = pods[0].metadata.namespace
-        selectedPod = filteredPods[0]
-        selectedPodName = selectedPod.metadata.name
-        selectedContainer = filteredPods[0].spec.containers[0]
-        selectedContainerName = selectedContainer.name
+        selectedPod = pods[0]
+        selectedPodName = pods[0].metadata.name
+        selectedContainer = pods[0].spec.containers[0]
+        selectedContainerName = pods[0].spec.containers[0].name
 
         filteredPods = pods.filter((p) => p.metadata.namespace === selectedNamespace)
         filteredContainers = selectedPod.spec.containers
       }
     }
 
-    eventSource.onerror = (event) => {
+    podEventSource.onerror = (event) => {
       console.error('EventSource failed:', event)
     }
 
     return () => {
-      console.log('closing event source')
-      eventSource.close()
+      podEventSource.close()
+      if (logEventSource) {
+        logEventSource.close()
+      }
     }
   })
 </script>
@@ -185,9 +219,7 @@
       <!-- Logs content area -->
       <div class="flex-1 min-h-0 m-1">
         <div class="h-full bg-gray-900 rounded-md overflow-y-auto p-1">
-          {#each Array.from({ length: 100 }) as _, i}
-            <pre class="text-gray-300 text-sm font-mono">[2021-10-01T12:00:00Z] Log line {i}</pre>
-          {/each}
+          <AnsiDisplay bind:addMessage />
         </div>
       </div>
     </div>

From 7d3b68df5c9434a6c662ce8f2dca2a0b04b2a06d Mon Sep 17 00:00:00 2001
From: unclegedd <gedd@defenseunicorns.com>
Date: Thu, 31 Oct 2024 16:08:03 -0500
Subject: [PATCH 08/45] WIP: dont miss logs

---
 src/pkg/api/handlers.go | 57 ++++++++++++++++++++++++++++-------------
 1 file changed, 39 insertions(+), 18 deletions(-)

diff --git a/src/pkg/api/handlers.go b/src/pkg/api/handlers.go
index 72a735aab..d73c8ccdf 100644
--- a/src/pkg/api/handlers.go
+++ b/src/pkg/api/handlers.go
@@ -174,7 +174,6 @@ func getPodLogs(k8sSession *session.K8sSession) func(w http.ResponseWriter, r *h
 		w.Header().Set("Access-Control-Allow-Origin", "*")
 
 		ctx := r.Context()
-
 		flusher, ok := w.(http.Flusher)
 
 		// Get existing logs first without following
@@ -200,7 +199,6 @@ func getPodLogs(k8sSession *session.K8sSession) func(w http.ResponseWriter, r *h
 			fmt.Fprintf(w, "data: %s\n\n", scanner.Text())
 		}
 		flusher.Flush()
-
 		if err := scanner.Err(); err != nil {
 			http.Error(w, fmt.Sprintf("Error reading existing logs: %v", err), http.StatusInternalServerError)
 			return
@@ -231,32 +229,55 @@ func getPodLogs(k8sSession *session.K8sSession) func(w http.ResponseWriter, r *h
 		ticker := time.NewTicker(500 * time.Millisecond) // Batch window
 		defer ticker.Stop()
 
-		for {
-			select {
-			case <-ctx.Done():
-				slog.Debug("Log stream closed")
-				return
-			case <-ticker.C:
-				// check for data
+		// Create a channel to signal when we should flush
+		shouldFlush := make(chan struct{}, 1)
+
+		// Start a goroutine to continuously read logs
+		go func() {
+			for {
+				// block until a complete log line is read
 				line, err := reader.ReadBytes('\n')
 				if err != nil {
 					if err != io.EOF && !errors.Is(err, context.Canceled) {
-						// todo: named error event?
-						fmt.Fprintf(w, "data: %v\n\n", err)
-						flusher.Flush()
+						buffer.WriteString(fmt.Sprintf("ERROR: %v\n", err))
 					}
+					close(shouldFlush)
 					return
 				}
 
-				// Add to batch
 				buffer.Write(line)
 
-				// Flush batch if we have any data
-				if buffer.Len() > 0 {
-					fmt.Fprintf(w, "data: %s\n\n", buffer.String())
-					buffer.Reset()
-					flusher.Flush()
+				// non-blocking channel send to shouldFlush
+				select {
+				case shouldFlush <- struct{}{}:
+				default:
+				}
+			}
+		}()
+
+		// Main loop to handle flushes
+		for {
+			var shouldTryFlush bool
+
+			select {
+			case <-ctx.Done():
+				slog.Debug("Log stream closed")
+				return
+
+			case _, ok := <-shouldFlush:
+				if !ok {
+					return
 				}
+				shouldTryFlush = true
+
+			case <-ticker.C:
+				shouldTryFlush = true
+			}
+
+			if shouldTryFlush && buffer.Len() > 0 {
+				fmt.Fprintf(w, "data: %s\n\n", buffer.String())
+				buffer.Reset()
+				flusher.Flush()
 			}
 		}
 	}

From 5d145b18dcde608bbb0e84409062754e2c45523c Mon Sep 17 00:00:00 2001
From: unclegedd <gedd@defenseunicorns.com>
Date: Thu, 31 Oct 2024 16:11:38 -0500
Subject: [PATCH 09/45] WIP: remove ticker

---
 src/pkg/api/handlers.go | 5 -----
 1 file changed, 5 deletions(-)

diff --git a/src/pkg/api/handlers.go b/src/pkg/api/handlers.go
index d73c8ccdf..edf2f82fe 100644
--- a/src/pkg/api/handlers.go
+++ b/src/pkg/api/handlers.go
@@ -226,8 +226,6 @@ func getPodLogs(k8sSession *session.K8sSession) func(w http.ResponseWriter, r *h
 
 		// Buffer for batching log lines
 		var buffer strings.Builder
-		ticker := time.NewTicker(500 * time.Millisecond) // Batch window
-		defer ticker.Stop()
 
 		// Create a channel to signal when we should flush
 		shouldFlush := make(chan struct{}, 1)
@@ -269,9 +267,6 @@ func getPodLogs(k8sSession *session.K8sSession) func(w http.ResponseWriter, r *h
 					return
 				}
 				shouldTryFlush = true
-
-			case <-ticker.C:
-				shouldTryFlush = true
 			}
 
 			if shouldTryFlush && buffer.Len() > 0 {

From f57b039b7c266383d350d2f697e9040e0ee8554d Mon Sep 17 00:00:00 2001
From: unclegedd <gedd@defenseunicorns.com>
Date: Thu, 31 Oct 2024 21:07:52 -0500
Subject: [PATCH 10/45] WIP: tiny issue with container dropdown

---
 src/pkg/api/handlers.go                       |   3 +-
 .../lib/components/Dropdown/component.svelte  |  13 ++-
 .../workloads/pods/logs/+page.svelte          | 104 ++++++++++--------
 3 files changed, 69 insertions(+), 51 deletions(-)

diff --git a/src/pkg/api/handlers.go b/src/pkg/api/handlers.go
index edf2f82fe..e4a24e75b 100644
--- a/src/pkg/api/handlers.go
+++ b/src/pkg/api/handlers.go
@@ -152,8 +152,6 @@ func getPod(cache *resources.Cache) func(w http.ResponseWriter, r *http.Request)
 // @Router /api/v1/resources/workloads/pods/logs [get]
 // @Param pod query string true "Pod name"
 // @Param namespace query string true "Namespace"
-// todo: guard against accessing logs for pods that shouldn't be accessed?
-// todo: test back/forward button, etc
 // todo: rate limiting?
 // todo: error retry logic?
 func getPodLogs(k8sSession *session.K8sSession) func(w http.ResponseWriter, r *http.Request) {
@@ -191,6 +189,7 @@ func getPodLogs(k8sSession *session.K8sSession) func(w http.ResponseWriter, r *h
 			return
 		}
 
+		// close existing logs stream when done
 		defer existingLogsStream.Close()
 
 		// Send existing logs to client
diff --git a/ui/src/lib/components/Dropdown/component.svelte b/ui/src/lib/components/Dropdown/component.svelte
index 4025c2258..a54556189 100644
--- a/ui/src/lib/components/Dropdown/component.svelte
+++ b/ui/src/lib/components/Dropdown/component.svelte
@@ -5,10 +5,12 @@
   import { Dropdown } from 'flowbite'
 
   export let items: string[]
-  export let selectedValue: string
+  export let selectedValue: string | null = null
   export let width: string = 'w-32' // must be a tailwind class
   export let maxHeight: string = 'max-h-32' // must be a tailwind class
   export let id: string
+  export let placeholder: string = 'Select an option' // new placeholder prop
+  export let disabled: boolean = false
 
   function handleSelect(item: string) {
     selectedValue = item
@@ -19,6 +21,10 @@
     const dropdown = new Dropdown(dropDownMenu, dropdownButton)
     dropdown.hide()
   }
+
+  // Helper to determine what text to display
+  $: displayText = selectedValue || placeholder
+  $: isPlaceholderShown = !selectedValue
 </script>
 
 <div>
@@ -27,8 +33,11 @@
     data-dropdown-toggle="{id}-menu"
     class="{width} justify-between truncate bg-gray-800 text-gray-300 hover:bg-gray-700 border border-gray-700 text-sm px-2 py-1 rounded-md inline-flex items-center h-7"
     type="button"
+    {disabled}
   >
-    <span class="truncate mr-1 text-gray-300">{selectedValue || items[0]}</span>
+    <span class="truncate mr-1" class:text-gray-500={isPlaceholderShown} class:text-gray-300={!isPlaceholderShown}>
+      {displayText}
+    </span>
     <svg
       class="w-2.5 h-2.5 flex-shrink-0"
       aria-hidden="true"
diff --git a/ui/src/routes/(resources)/workloads/pods/logs/+page.svelte b/ui/src/routes/(resources)/workloads/pods/logs/+page.svelte
index 5abe5c55d..dcfefc388 100644
--- a/ui/src/routes/(resources)/workloads/pods/logs/+page.svelte
+++ b/ui/src/routes/(resources)/workloads/pods/logs/+page.svelte
@@ -46,54 +46,61 @@
   let filteredContainers: Container[] = []
 
   // Selected values
-  let selectedPod: Pod
-  let selectedPodName: string
-  let selectedNamespace: string
-  let selectedContainer: Container
-  let selectedContainerName: string
+  let selectedPod: Pod | null
+  let selectedPodName: string | null
+  let selectedNamespace: string | null
+  let selectedContainerName: string | null
+
+  // todo: test back/forward button, etc
 
-  // handle event source for logs and updating based on selected container
   let logEventSource: EventSource
 
-  // reactivity for dropdowns to filter selected values from other dropdowns
-  $: {
-    if (selectedNamespace) {
-      console.log('reactive selected namespace:', selectedNamespace)
-      filteredPods = Array.from(pods).filter((p) => p.metadata.namespace === selectedNamespace)
-      filteredContainers = selectedPod.spec.containers
+  // todo: BUG when you change pods it should also update the containers
+  function cleanupLogs() {
+    if (logEventSource) {
+      logEventSource.close()
+      const logLines = document.querySelectorAll('.log-line')
+      logLines.forEach((line) => line.remove())
     }
+  }
 
-    if (selectedPodName) {
-      // set selectedPod to the pod with the selected name
-      console.log('reactive selected pod:', selectedPodName)
-      selectedPod = pods.find((p) => p.metadata.name === selectedPodName) ?? selectedPod
-      filteredContainers = selectedPod.spec.containers
-    }
+  // update filtered pods for dropdown
+  $: filteredPods = selectedNamespace ? Array.from(pods).filter((p) => p.metadata.namespace === selectedNamespace) : []
 
-    if (selectedContainerName) {
-      selectedContainer = filteredContainers.find((c) => c.name === selectedContainerName) ?? selectedContainer
-      selectedContainerName = selectedContainer.name
-      console.log('reactive selected container:', selectedContainerName)
-      // close existing event source and remove old logs
-      if (logEventSource) {
-        console.log('closing existing event source')
-        logEventSource.close()
-        // remove all divs with log-line class
-        const logLines = document.querySelectorAll('.log-line')
-        logLines.forEach((line) => line.remove())
-      }
+  // update filtered containers for dropdown
+  $: filteredContainers = selectedPod?.spec.containers ?? []
 
-      // set up sse stream for logs
-      const logsURL = `/api/v1/resources/workloads/pods/logs?namespace=${selectedNamespace}&pod=${selectedPodName}&container=${selectedContainerName}`
-      logEventSource = new EventSource(logsURL)
+  // Handle namespace changes
+  $: if (selectedNamespace) {
+    cleanupLogs()
+    selectedPod = null
+    selectedPodName = null
+    selectedContainerName = null
+  }
 
-      logEventSource.onmessage = (event) => {
-        addMessage(event.data)
-      }
+  // Handle pod selection independently
+  $: if (selectedPodName) {
+    console.log('Pod selected:', selectedPodName)
+    cleanupLogs()
+    selectedPod = filteredPods.find((p) => p.metadata.name === selectedPodName) ?? null
+    // selectedContainerName = null
+  }
 
-      logEventSource.onerror = (event) => {
-        console.error('EventSource failed:', event)
-      }
+  // Handle container selection independently
+  $: if (selectedContainerName) {
+    console.log('Container selected:', selectedContainerName)
+    cleanupLogs()
+
+    // Set up new event source
+    const logsURL = `/api/v1/resources/workloads/pods/logs?namespace=${selectedNamespace}&pod=${selectedPodName}&container=${selectedContainerName}`
+    logEventSource = new EventSource(logsURL)
+
+    logEventSource.onmessage = (event) => {
+      addMessage(event.data)
+    }
+
+    logEventSource.onerror = (event) => {
+      console.error('EventSource failed:', event)
     }
   }
 
@@ -123,13 +130,6 @@
       // set default values
       if (!selectedNamespace) {
         selectedNamespace = pods[0].metadata.namespace
-        selectedPod = pods[0]
-        selectedPodName = pods[0].metadata.name
-        selectedContainer = pods[0].spec.containers[0]
-        selectedContainerName = pods[0].spec.containers[0].name
-
-        filteredPods = pods.filter((p) => p.metadata.namespace === selectedNamespace)
-        filteredContainers = selectedPod.spec.containers
       }
     }
 
@@ -202,18 +202,28 @@
 
       <!-- Dropdowns -->
       <div class="flex space-x-4 p-4">
-        <Dropdown bind:selectedValue={selectedNamespace} items={Array.from(namespaces)} id="ns-dropdown" width="w-48" />
+        <Dropdown
+          bind:selectedValue={selectedNamespace}
+          items={Array.from(namespaces)}
+          id="ns-dropdown"
+          width="w-48"
+          placeholder="Select namespace"
+        />
         <Dropdown
           bind:selectedValue={selectedPodName}
           items={filteredPods.map((p) => p.metadata.name)}
           id="pod-dropdown"
           width="w-48"
+          placeholder="Select pod"
+          disabled={!selectedNamespace}
         />
         <Dropdown
           bind:selectedValue={selectedContainerName}
           items={filteredContainers.map((c) => c.name)}
           id="container-dropdown"
           width="w-48"
+          placeholder="Select container"
+          disabled={!selectedPodName}
         />
       </div>
       <!-- Logs content area -->

From 795577c48c2ef5acb0631a020e965809b58ed53a Mon Sep 17 00:00:00 2001
From: unclegedd <gedd@defenseunicorns.com>
Date: Thu, 31 Oct 2024 21:25:21 -0500
Subject: [PATCH 11/45] WIP: swap reactive statements for stores

---
 .../components/AnsiDisplay/component.svelte   |   2 -
 .../workloads/pods/logs/+page.svelte          | 140 +++++++++---------
 2 files changed, 67 insertions(+), 75 deletions(-)

diff --git a/ui/src/lib/components/AnsiDisplay/component.svelte b/ui/src/lib/components/AnsiDisplay/component.svelte
index 9532ab8fa..5735fabdb 100644
--- a/ui/src/lib/components/AnsiDisplay/component.svelte
+++ b/ui/src/lib/components/AnsiDisplay/component.svelte
@@ -33,8 +33,6 @@
   export const addMessage = (message: string) => {
     if (!message || !scrollAnchor?.parentElement) return
 
-    console.log('message:', message)
-
     const html = convert.toHtml(message)
     const lineElement = document.createElement('div')
     lineElement.className = 'log-line text-gray-300 text-sm font-mono py-0.5'
diff --git a/ui/src/routes/(resources)/workloads/pods/logs/+page.svelte b/ui/src/routes/(resources)/workloads/pods/logs/+page.svelte
index dcfefc388..dac434cd9 100644
--- a/ui/src/routes/(resources)/workloads/pods/logs/+page.svelte
+++ b/ui/src/routes/(resources)/workloads/pods/logs/+page.svelte
@@ -3,6 +3,7 @@
 
 <script lang="ts">
   import { onMount } from 'svelte'
+  import { derived, writable } from 'svelte/store'
 
   import { AnsiDisplay, Dropdown } from '$components'
   import { PodTable } from '$features/k8s'
@@ -34,28 +35,11 @@
     }
   }
 
-  // Search term
+  let logEventSource: EventSource
   let search = ''
 
-  // raw data
-  let namespaces: Set<string> = new Set()
-  let pods: Pod[] = []
-
-  // filtered data for dropdowns
-  let filteredPods: Pod[] = []
-  let filteredContainers: Container[] = []
-
-  // Selected values
-  let selectedPod: Pod | null
-  let selectedPodName: string | null
-  let selectedNamespace: string | null
-  let selectedContainerName: string | null
-
   // todo: test back/forward button, etc
 
-  let logEventSource: EventSource
-
-  // todo: BUG when you change pods it should also update the containers
   function cleanupLogs() {
     if (logEventSource) {
       logEventSource.close()
@@ -64,45 +48,57 @@
     }
   }
 
-  // update filtered pods for dropdown
-  $: filteredPods = selectedNamespace ? Array.from(pods).filter((p) => p.metadata.namespace === selectedNamespace) : []
-
-  // update filtered containers for dropdown
-  $: filteredContainers = selectedPod?.spec.containers ?? []
-
-  // Handle namespace changes
-  $: if (selectedNamespace) {
-    cleanupLogs()
-    selectedPod = null
-    selectedPodName = null
-    selectedContainerName = null
-  }
+  // Create base stores
+  const pods = writable<Pod[]>([])
+  const namespaces = writable<Set<string>>(new Set())
+  const namespace = writable<string | null>(null)
+  const podName = writable<string | null>(null)
+  const containerName = writable<string | null>(null)
+  const selectedPod = writable<Pod | null>(null)
+
+  // Derive filtered lists
+  const filteredPods = derived([namespace], () =>
+    $namespace ? Array.from($pods).filter((p) => p.metadata.namespace === $namespace) : [],
+  )
+
+  const filteredContainers = derived([selectedPod], () => $selectedPod?.spec.containers ?? [])
+
+  // Subscribe to changes
+  namespace.subscribe((newNamespace) => {
+    if (newNamespace) {
+      cleanupLogs()
+      podName.set(null)
+      selectedPod.set(null)
+      containerName.set(null)
+    }
+  })
 
-  // Handle pod selection independently
-  $: if (selectedPodName) {
-    console.log('Pod selected:', selectedPodName)
-    cleanupLogs()
-    selectedPod = filteredPods.find((p) => p.metadata.name === selectedPodName) ?? null
-    // selectedContainerName = null
-  }
+  podName.subscribe((newPodName) => {
+    if (newPodName) {
+      cleanupLogs()
+      containerName.set(null)
+      const pod = $filteredPods.find((p) => p.metadata.name === newPodName)
+      selectedPod.set(pod ?? null)
+    }
+  })
 
-  // Handle container selection independently
-  $: if (selectedContainerName) {
-    console.log('Container selected:', selectedContainerName)
-    cleanupLogs()
+  containerName.subscribe((newContainerName) => {
+    if (newContainerName) {
+      cleanupLogs()
 
-    // Set up new event source
-    const logsURL = `/api/v1/resources/workloads/pods/logs?namespace=${selectedNamespace}&pod=${selectedPodName}&container=${selectedContainerName}`
-    logEventSource = new EventSource(logsURL)
+      // create new SSE stream
+      const logsURL = `/api/v1/resources/workloads/pods/logs?namespace=${$namespace}&pod=${$podName}&container=${newContainerName}`
+      logEventSource = new EventSource(logsURL)
 
-    logEventSource.onmessage = (event) => {
-      addMessage(event.data)
-    }
+      logEventSource.onmessage = (event) => {
+        addMessage(event.data)
+      }
 
-    logEventSource.onerror = (event) => {
-      console.error('EventSource failed:', event)
+      logEventSource.onerror = (event) => {
+        console.error('EventSource failed:', event)
+      }
     }
-  }
+  })
 
   onMount(() => {
     // set up sse stream for pods
@@ -112,25 +108,23 @@
 
     podEventSource.onmessage = (event) => {
       const data = JSON.parse(event.data)
-
-      // clear existing data
-      namespaces.clear()
-      pods = []
+      const newNamespaces = new Set<string>()
 
       // Process each item in the data array
       data.forEach((p: Pod) => {
-        namespaces.add(p.metadata.namespace)
-        pods.push(p)
+        newNamespaces.add(p.metadata.namespace)
       })
 
-      // Trigger reactivity by reassigning the sets (todo: kind of weird)
-      namespaces = new Set(Array.from(namespaces).sort())
-      pods = pods
+      // Update stores
+      pods.set(data)
+      namespaces.set(new Set(Array.from(newNamespaces).sort()))
 
-      // set default values
-      if (!selectedNamespace) {
-        selectedNamespace = pods[0].metadata.namespace
-      }
+      // Set default namespace if none selected
+      namespace.subscribe((currentNamespace) => {
+        if (!currentNamespace && data.length > 0) {
+          namespace.set(data[0].metadata.namespace)
+        }
+      })() // Immediately unsubscribe after first run
     }
 
     podEventSource.onerror = (event) => {
@@ -153,7 +147,7 @@
     <div class="flex h-full w-full flex-col bg-gray-800 rounded-lg">
       <!-- Header -->
       <div class="flex items-center justify-between py-2 border-b border-gray-700 mx-4">
-        <!-- Left section: Title, search, and log controls -->
+        <!-- Left section: title, search, and log controls -->
         <div class="flex items-center space-x-6">
           <!-- Logo and title -->
           <div class="flex items-center">
@@ -203,27 +197,27 @@
       <!-- Dropdowns -->
       <div class="flex space-x-4 p-4">
         <Dropdown
-          bind:selectedValue={selectedNamespace}
-          items={Array.from(namespaces)}
+          bind:selectedValue={$namespace}
+          items={Array.from($namespaces)}
           id="ns-dropdown"
           width="w-48"
           placeholder="Select namespace"
         />
         <Dropdown
-          bind:selectedValue={selectedPodName}
-          items={filteredPods.map((p) => p.metadata.name)}
+          bind:selectedValue={$podName}
+          items={$filteredPods.map((p) => p.metadata.name)}
           id="pod-dropdown"
           width="w-48"
           placeholder="Select pod"
-          disabled={!selectedNamespace}
+          disabled={!$namespace}
         />
         <Dropdown
-          bind:selectedValue={selectedContainerName}
-          items={filteredContainers.map((c) => c.name)}
+          bind:selectedValue={$containerName}
+          items={$filteredContainers.map((c) => c.name)}
           id="container-dropdown"
           width="w-48"
           placeholder="Select container"
-          disabled={!selectedPodName}
+          disabled={!$podName}
         />
       </div>
       <!-- Logs content area -->

From efb78447ab8f6d720b5bd55f7dcf11e1d618c5ea Mon Sep 17 00:00:00 2001
From: unclegedd <gedd@defenseunicorns.com>
Date: Thu, 31 Oct 2024 21:44:55 -0500
Subject: [PATCH 12/45] WIP: can pass query params

---
 ui/src/lib/components/index.ts                |   3 +-
 .../{ => k8s/Logs}/Dropdown/component.svelte  |   0
 .../lib/components/k8s/Logs/component.svelte  | 230 ++++++++++++++++++
 .../workloads/pods/logs/+page.svelte          | 223 +----------------
 4 files changed, 234 insertions(+), 222 deletions(-)
 rename ui/src/lib/components/{ => k8s/Logs}/Dropdown/component.svelte (100%)
 create mode 100644 ui/src/lib/components/k8s/Logs/component.svelte

diff --git a/ui/src/lib/components/index.ts b/ui/src/lib/components/index.ts
index 2925994fa..adde30970 100644
--- a/ui/src/lib/components/index.ts
+++ b/ui/src/lib/components/index.ts
@@ -14,4 +14,5 @@ export { default as ProgressBar } from './ProgressBar/component.svelte'
 export { default as ProgressBarWidget } from './StatsWidget/ProgressBarWidget.svelte'
 export { default as WithRightIconWidget } from './StatsWidget/WithRightIconWidget.svelte'
 export { default as Tooltip } from './Tooltip/component.svelte'
-export { default as Dropdown } from './Dropdown/component.svelte'
+export { default as Dropdown } from './k8s/Logs/Dropdown/component.svelte'
+export { default as Logs } from './k8s/Logs/component.svelte'
diff --git a/ui/src/lib/components/Dropdown/component.svelte b/ui/src/lib/components/k8s/Logs/Dropdown/component.svelte
similarity index 100%
rename from ui/src/lib/components/Dropdown/component.svelte
rename to ui/src/lib/components/k8s/Logs/Dropdown/component.svelte
diff --git a/ui/src/lib/components/k8s/Logs/component.svelte b/ui/src/lib/components/k8s/Logs/component.svelte
new file mode 100644
index 000000000..08b9be19c
--- /dev/null
+++ b/ui/src/lib/components/k8s/Logs/component.svelte
@@ -0,0 +1,230 @@
+<!-- Copyright 2024 Defense Unicorns -->
+<!-- SPDX-License-Identifier: AGPL-3.0-or-later OR LicenseRef-Defense-Unicorns-Commercial -->
+
+<script lang="ts">
+  import { onMount } from 'svelte'
+  import { derived, writable } from 'svelte/store'
+
+  import { AnsiDisplay, Dropdown } from '$components'
+  import { Copy, Download, Search, Terminal } from 'carbon-icons-svelte'
+
+  // todo: esc exits log view (change url)
+  // todo: memory leak? time out after 30 minutes or so? what about large data volume?
+
+  let autoScroll = true
+  let addMessage: (message: string) => void
+
+  // Toggle auto-scroll
+  function toggleAutoScroll() {
+    autoScroll = !autoScroll
+  }
+
+  // interfaces for pod data
+  interface Container {
+    name: string
+  }
+
+  interface Pod {
+    metadata: {
+      name: string
+      namespace: string
+    }
+    spec: {
+      containers: Container[]
+    }
+  }
+
+  let logEventSource: EventSource
+  let search = ''
+
+  // todo: test back/forward button, etc
+
+  function cleanupLogs() {
+    if (logEventSource) {
+      logEventSource.close()
+      const logLines = document.querySelectorAll('.log-line')
+      logLines.forEach((line) => line.remove())
+    }
+  }
+
+  // Create base stores
+  const pods = writable<Pod[]>([])
+  const namespaces = writable<Set<string>>(new Set())
+  const namespace = writable<string | null>(null)
+  const podName = writable<string | null>(null)
+  const containerName = writable<string | null>(null)
+  const selectedPod = writable<Pod | null>(null)
+
+  // Derive filtered lists
+  const filteredPods = derived([namespace], () =>
+    $namespace ? Array.from($pods).filter((p) => p.metadata.namespace === $namespace) : [],
+  )
+
+  const filteredContainers = derived([selectedPod], () => $selectedPod?.spec.containers ?? [])
+
+  // Subscribe to changes
+  namespace.subscribe((newNamespace) => {
+    if (newNamespace) {
+      cleanupLogs()
+      podName.set(null)
+      selectedPod.set(null)
+      containerName.set(null)
+    }
+  })
+
+  podName.subscribe((newPodName) => {
+    if (newPodName) {
+      cleanupLogs()
+      containerName.set(null)
+      const pod = $filteredPods.find((p) => p.metadata.name === newPodName)
+      selectedPod.set(pod ?? null)
+    }
+  })
+
+  containerName.subscribe((newContainerName) => {
+    if (newContainerName) {
+      cleanupLogs()
+
+      // create new SSE stream
+      const logsURL = `/api/v1/resources/workloads/pods/logs?namespace=${$namespace}&pod=${$podName}&container=${newContainerName}`
+      logEventSource = new EventSource(logsURL)
+
+      logEventSource.onmessage = (event) => {
+        addMessage(event.data)
+      }
+
+      logEventSource.onerror = (event) => {
+        console.error('EventSource failed:', event)
+      }
+    }
+  })
+
+  onMount(() => {
+    // check url query params for name and namespace
+    const urlParams = new URLSearchParams(window.location.search)
+    const podParam = urlParams.get('pod')
+    const nsParam = urlParams.get('namespace')
+
+    // set up sse stream for pods
+    const fieldSelectors = 'metadata.name,metadata.namespace,spec.containers[].name'
+    const podURL = `/api/v1/resources/workloads/pods?fields=${fieldSelectors}`
+    const podEventSource = new EventSource(podURL)
+
+    podEventSource.onmessage = (event) => {
+      const data = JSON.parse(event.data)
+      const newNamespaces = new Set<string>()
+
+      // Process each item in the data array
+      data.forEach((p: Pod) => {
+        newNamespaces.add(p.metadata.namespace)
+      })
+
+      // Update stores
+      pods.set(data)
+      namespaces.set(new Set(Array.from(newNamespaces).sort()))
+
+      // Set from URL params after data is loaded
+      if (podParam && nsParam) {
+        namespace.set(nsParam)
+        podName.set(podParam)
+      }
+    }
+
+    podEventSource.onerror = (event) => {
+      console.error('EventSource failed:', event)
+    }
+
+    return () => {
+      podEventSource.close()
+      if (logEventSource) {
+        logEventSource.close()
+      }
+    }
+  })
+</script>
+
+<section class="h-[35%] flex-shrink-0 mt-2">
+  <div class="flex h-full w-full flex-col bg-gray-800 rounded-lg">
+    <!-- Header -->
+    <div class="flex items-center justify-between py-2 border-b border-gray-700 mx-4">
+      <!-- Left section: title, search, and log controls -->
+      <div class="flex items-center space-x-6">
+        <!-- Logo and title -->
+        <div class="flex items-center">
+          <Terminal class="w-4 h-4 text-gray-200" />
+          <span class="text-sm font-medium text-gray-200 text-nowrap ml-1">Logs</span>
+        </div>
+
+        <!-- Search -->
+        <div class="relative w-48">
+          <div class="pointer-events-none absolute inset-y-0 left-0 flex items-center pl-3">
+            <Search class="text-gray-400" />
+          </div>
+          <input
+            type="text"
+            name="input-search"
+            autocomplete="off"
+            class="focus:ring-primary-500 h-5 focus:border-primary-500 dark:focus:ring-primary-500 dark:focus:border-primary-500 block w-full rounded-md border border-gray-300 bg-gray-50 p-2.5 pl-9 text-gray-900 sm:text-sm dark:border-gray-600 dark:bg-gray-700 dark:text-white dark:placeholder-gray-400"
+            placeholder="Search"
+            data-testid="datatable-search"
+            bind:value={search}
+          />
+        </div>
+
+        <!-- Auto-scroll toggle -->
+        <div class="flex items-center">
+          <label class="relative inline-flex items-center cursor-pointer">
+            <input type="checkbox" bind:checked={autoScroll} class="sr-only peer" />
+            <div
+              class="w-9 h-5 bg-gray-700 peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-blue-800 rounded-full peer peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-4 after:w-4 after:transition-all peer-checked:bg-blue-600"
+            ></div>
+            <span class="ml-2 text-sm font-medium text-gray-300">Auto-scroll</span>
+          </label>
+        </div>
+      </div>
+
+      <!-- Right section: Action buttons -->
+      <div class="flex items-center space-x-2">
+        <button class="p-1.5 text-gray-400 hover:text-gray-200 rounded-lg hover:bg-gray-800">
+          <Copy class="w-4 h-4" />
+        </button>
+        <button class="p-1.5 text-gray-400 hover:text-gray-200 rounded-lg hover:bg-gray-800">
+          <Download class="w-4 h-4" />
+        </button>
+      </div>
+    </div>
+
+    <!-- Dropdowns -->
+    <div class="flex space-x-4 p-4">
+      <Dropdown
+        bind:selectedValue={$namespace}
+        items={Array.from($namespaces)}
+        id="ns-dropdown"
+        width="w-48"
+        placeholder="Select namespace"
+      />
+      <Dropdown
+        bind:selectedValue={$podName}
+        items={$filteredPods.map((p) => p.metadata.name)}
+        id="pod-dropdown"
+        width="w-48"
+        placeholder="Select pod"
+        disabled={!$namespace}
+      />
+      <Dropdown
+        bind:selectedValue={$containerName}
+        items={$filteredContainers.map((c) => c.name)}
+        id="container-dropdown"
+        width="w-48"
+        placeholder="Select container"
+        disabled={!$podName}
+      />
+    </div>
+    <!-- Logs content area -->
+    <div class="flex-1 min-h-0 m-1">
+      <div class="h-full bg-gray-900 rounded-md overflow-y-auto p-1">
+        <AnsiDisplay bind:addMessage />
+      </div>
+    </div>
+  </div>
+</section>
diff --git a/ui/src/routes/(resources)/workloads/pods/logs/+page.svelte b/ui/src/routes/(resources)/workloads/pods/logs/+page.svelte
index dac434cd9..639138cf3 100644
--- a/ui/src/routes/(resources)/workloads/pods/logs/+page.svelte
+++ b/ui/src/routes/(resources)/workloads/pods/logs/+page.svelte
@@ -2,230 +2,11 @@
 <!-- SPDX-License-Identifier: AGPL-3.0-or-later OR LicenseRef-Defense-Unicorns-Commercial -->
 
 <script lang="ts">
-  import { onMount } from 'svelte'
-  import { derived, writable } from 'svelte/store'
-
-  import { AnsiDisplay, Dropdown } from '$components'
+  import { Logs } from '$components'
   import { PodTable } from '$features/k8s'
-  import { Copy, Download, Search, Terminal } from 'carbon-icons-svelte'
-
-  // todo: esc exits log view (change url)
-  // todo: memory leak? time out after 30 minutes or so? what about large data volume?
-
-  let autoScroll = true
-  let addMessage: (message: string) => void
-
-  // Toggle auto-scroll
-  function toggleAutoScroll() {
-    autoScroll = !autoScroll
-  }
-
-  // interfaces for pod data
-  interface Container {
-    name: string
-  }
-
-  interface Pod {
-    metadata: {
-      name: string
-      namespace: string
-    }
-    spec: {
-      containers: Container[]
-    }
-  }
-
-  let logEventSource: EventSource
-  let search = ''
-
-  // todo: test back/forward button, etc
-
-  function cleanupLogs() {
-    if (logEventSource) {
-      logEventSource.close()
-      const logLines = document.querySelectorAll('.log-line')
-      logLines.forEach((line) => line.remove())
-    }
-  }
-
-  // Create base stores
-  const pods = writable<Pod[]>([])
-  const namespaces = writable<Set<string>>(new Set())
-  const namespace = writable<string | null>(null)
-  const podName = writable<string | null>(null)
-  const containerName = writable<string | null>(null)
-  const selectedPod = writable<Pod | null>(null)
-
-  // Derive filtered lists
-  const filteredPods = derived([namespace], () =>
-    $namespace ? Array.from($pods).filter((p) => p.metadata.namespace === $namespace) : [],
-  )
-
-  const filteredContainers = derived([selectedPod], () => $selectedPod?.spec.containers ?? [])
-
-  // Subscribe to changes
-  namespace.subscribe((newNamespace) => {
-    if (newNamespace) {
-      cleanupLogs()
-      podName.set(null)
-      selectedPod.set(null)
-      containerName.set(null)
-    }
-  })
-
-  podName.subscribe((newPodName) => {
-    if (newPodName) {
-      cleanupLogs()
-      containerName.set(null)
-      const pod = $filteredPods.find((p) => p.metadata.name === newPodName)
-      selectedPod.set(pod ?? null)
-    }
-  })
-
-  containerName.subscribe((newContainerName) => {
-    if (newContainerName) {
-      cleanupLogs()
-
-      // create new SSE stream
-      const logsURL = `/api/v1/resources/workloads/pods/logs?namespace=${$namespace}&pod=${$podName}&container=${newContainerName}`
-      logEventSource = new EventSource(logsURL)
-
-      logEventSource.onmessage = (event) => {
-        addMessage(event.data)
-      }
-
-      logEventSource.onerror = (event) => {
-        console.error('EventSource failed:', event)
-      }
-    }
-  })
-
-  onMount(() => {
-    // set up sse stream for pods
-    const fieldSelectors = 'metadata.name,metadata.namespace,spec.containers[].name'
-    const podURL = `/api/v1/resources/workloads/pods?fields=${fieldSelectors}`
-    const podEventSource = new EventSource(podURL)
-
-    podEventSource.onmessage = (event) => {
-      const data = JSON.parse(event.data)
-      const newNamespaces = new Set<string>()
-
-      // Process each item in the data array
-      data.forEach((p: Pod) => {
-        newNamespaces.add(p.metadata.namespace)
-      })
-
-      // Update stores
-      pods.set(data)
-      namespaces.set(new Set(Array.from(newNamespaces).sort()))
-
-      // Set default namespace if none selected
-      namespace.subscribe((currentNamespace) => {
-        if (!currentNamespace && data.length > 0) {
-          namespace.set(data[0].metadata.namespace)
-        }
-      })() // Immediately unsubscribe after first run
-    }
-
-    podEventSource.onerror = (event) => {
-      console.error('EventSource failed:', event)
-    }
-
-    return () => {
-      podEventSource.close()
-      if (logEventSource) {
-        logEventSource.close()
-      }
-    }
-  })
 </script>
 
 <div class="flex h-full flex-col">
   <PodTable />
-
-  <section class="h-[35%] flex-shrink-0 mt-2">
-    <div class="flex h-full w-full flex-col bg-gray-800 rounded-lg">
-      <!-- Header -->
-      <div class="flex items-center justify-between py-2 border-b border-gray-700 mx-4">
-        <!-- Left section: title, search, and log controls -->
-        <div class="flex items-center space-x-6">
-          <!-- Logo and title -->
-          <div class="flex items-center">
-            <Terminal class="w-4 h-4 text-gray-200" />
-            <span class="text-sm font-medium text-gray-200 text-nowrap ml-1">Logs</span>
-          </div>
-
-          <!-- Search -->
-          <div class="relative w-48">
-            <div class="pointer-events-none absolute inset-y-0 left-0 flex items-center pl-3">
-              <Search class="text-gray-400" />
-            </div>
-            <input
-              type="text"
-              name="input-search"
-              autocomplete="off"
-              class="focus:ring-primary-500 h-5 focus:border-primary-500 dark:focus:ring-primary-500 dark:focus:border-primary-500 block w-full rounded-md border border-gray-300 bg-gray-50 p-2.5 pl-9 text-gray-900 sm:text-sm dark:border-gray-600 dark:bg-gray-700 dark:text-white dark:placeholder-gray-400"
-              placeholder="Search"
-              data-testid="datatable-search"
-              bind:value={search}
-            />
-          </div>
-
-          <!-- Auto-scroll toggle -->
-          <div class="flex items-center">
-            <label class="relative inline-flex items-center cursor-pointer">
-              <input type="checkbox" bind:checked={autoScroll} class="sr-only peer" />
-              <div
-                class="w-9 h-5 bg-gray-700 peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-blue-800 rounded-full peer peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-4 after:w-4 after:transition-all peer-checked:bg-blue-600"
-              ></div>
-              <span class="ml-2 text-sm font-medium text-gray-300">Auto-scroll</span>
-            </label>
-          </div>
-        </div>
-
-        <!-- Right section: Action buttons -->
-        <div class="flex items-center space-x-2">
-          <button class="p-1.5 text-gray-400 hover:text-gray-200 rounded-lg hover:bg-gray-800">
-            <Copy class="w-4 h-4" />
-          </button>
-          <button class="p-1.5 text-gray-400 hover:text-gray-200 rounded-lg hover:bg-gray-800">
-            <Download class="w-4 h-4" />
-          </button>
-        </div>
-      </div>
-
-      <!-- Dropdowns -->
-      <div class="flex space-x-4 p-4">
-        <Dropdown
-          bind:selectedValue={$namespace}
-          items={Array.from($namespaces)}
-          id="ns-dropdown"
-          width="w-48"
-          placeholder="Select namespace"
-        />
-        <Dropdown
-          bind:selectedValue={$podName}
-          items={$filteredPods.map((p) => p.metadata.name)}
-          id="pod-dropdown"
-          width="w-48"
-          placeholder="Select pod"
-          disabled={!$namespace}
-        />
-        <Dropdown
-          bind:selectedValue={$containerName}
-          items={$filteredContainers.map((c) => c.name)}
-          id="container-dropdown"
-          width="w-48"
-          placeholder="Select container"
-          disabled={!$podName}
-        />
-      </div>
-      <!-- Logs content area -->
-      <div class="flex-1 min-h-0 m-1">
-        <div class="h-full bg-gray-900 rounded-md overflow-y-auto p-1">
-          <AnsiDisplay bind:addMessage />
-        </div>
-      </div>
-    </div>
-  </section>
+  <Logs />
 </div>

From 3ac79763c3db71b248277cbce5f640997a02e56a Mon Sep 17 00:00:00 2001
From: unclegedd <gedd@defenseunicorns.com>
Date: Thu, 31 Oct 2024 22:21:21 -0500
Subject: [PATCH 13/45] autoscroll working

---
 .../components/AnsiDisplay/component.svelte   | 29 +++++++--
 .../lib/components/k8s/Logs/component.svelte  | 59 ++++++-------------
 ui/src/lib/types.ts                           | 14 +++++
 ui/src/routes/auth.test.ts                    |  5 --
 4 files changed, 57 insertions(+), 50 deletions(-)

diff --git a/ui/src/lib/components/AnsiDisplay/component.svelte b/ui/src/lib/components/AnsiDisplay/component.svelte
index 5735fabdb..32ad21271 100644
--- a/ui/src/lib/components/AnsiDisplay/component.svelte
+++ b/ui/src/lib/components/AnsiDisplay/component.svelte
@@ -18,10 +18,15 @@
 
   let container: HTMLDivElement
   let scrollAnchor: HTMLDivElement
-
-  // Debounce scroll updates to prevent performance issues
   let scrollTimeout: number
+
+  // Two-way binding for autoScroll
+  export let autoScroll = true
+  let lastScrollTop = 0
+
   const debouncedScroll = () => {
+    if (!autoScroll) return
+
     if (scrollTimeout) {
       window.clearTimeout(scrollTimeout)
     }
@@ -30,6 +35,22 @@
     }, 100)
   }
 
+  // Handle manual scrolling
+  const handleScroll = (event: Event) => {
+    const target = event.target as HTMLDivElement
+    const isScrollingUp = target.scrollTop < lastScrollTop
+    const isAtBottom = Math.abs(target.scrollHeight - target.clientHeight - target.scrollTop) < 50
+
+    // Update autoScroll based on scroll behavior
+    autoScroll = !isScrollingUp && isAtBottom
+    lastScrollTop = target.scrollTop
+  }
+
+  // Watch autoScroll changes
+  $: if (autoScroll) {
+    debouncedScroll()
+  }
+
   export const addMessage = (message: string) => {
     if (!message || !scrollAnchor?.parentElement) return
 
@@ -38,14 +59,12 @@
     lineElement.className = 'log-line text-gray-300 text-sm font-mono py-0.5'
     lineElement.innerHTML = html
 
-    // Use requestAnimationFrame for DOM updates
     window.requestAnimationFrame(() => {
       scrollAnchor.parentElement?.insertBefore(lineElement, scrollAnchor)
       debouncedScroll()
     })
   }
 
-  // Clean up on destroy
   onMount(() => {
     return () => {
       if (scrollTimeout) {
@@ -55,6 +74,6 @@
   })
 </script>
 
-<div bind:this={container} class="h-full">
+<div bind:this={container} class="h-full overflow-y-auto" on:scroll={handleScroll}>
   <div bind:this={scrollAnchor} class="scroll-anchor h-px" />
 </div>
diff --git a/ui/src/lib/components/k8s/Logs/component.svelte b/ui/src/lib/components/k8s/Logs/component.svelte
index 08b9be19c..647e2518b 100644
--- a/ui/src/lib/components/k8s/Logs/component.svelte
+++ b/ui/src/lib/components/k8s/Logs/component.svelte
@@ -6,39 +6,21 @@
   import { derived, writable } from 'svelte/store'
 
   import { AnsiDisplay, Dropdown } from '$components'
+  import type { Pod } from '$lib/types'
   import { Copy, Download, Search, Terminal } from 'carbon-icons-svelte'
 
   // todo: esc exits log view (change url)
   // todo: memory leak? time out after 30 minutes or so? what about large data volume?
 
+  // track auto scroll state
   let autoScroll = true
-  let addMessage: (message: string) => void
-
-  // Toggle auto-scroll
-  function toggleAutoScroll() {
-    autoScroll = !autoScroll
-  }
 
-  // interfaces for pod data
-  interface Container {
-    name: string
-  }
-
-  interface Pod {
-    metadata: {
-      name: string
-      namespace: string
-    }
-    spec: {
-      containers: Container[]
-    }
-  }
+  // used in AnsiDisplay
+  let addMessage: (message: string) => void
 
   let logEventSource: EventSource
   let search = ''
 
-  // todo: test back/forward button, etc
-
   function cleanupLogs() {
     if (logEventSource) {
       logEventSource.close()
@@ -48,22 +30,21 @@
   }
 
   // Create base stores
-  const pods = writable<Pod[]>([])
-  const namespaces = writable<Set<string>>(new Set())
-  const namespace = writable<string | null>(null)
+  const pods = writable<Pod[]>([]) // raw pod data
+  const selectedNamespace = writable<string | null>(null)
+  const namespaces = writable<Set<string>>(new Set()) // derived from pods
   const podName = writable<string | null>(null)
+  const selectedPod = writable<Pod | null>(null) // used to derive containers
   const containerName = writable<string | null>(null)
-  const selectedPod = writable<Pod | null>(null)
 
-  // Derive filtered lists
-  const filteredPods = derived([namespace], () =>
-    $namespace ? Array.from($pods).filter((p) => p.metadata.namespace === $namespace) : [],
+  // Derive filtered lists for dropdowns
+  const filteredPods = derived([selectedNamespace], () =>
+    $selectedNamespace ? Array.from($pods).filter((p) => p.metadata.namespace === $selectedNamespace) : [],
   )
-
   const filteredContainers = derived([selectedPod], () => $selectedPod?.spec.containers ?? [])
 
-  // Subscribe to changes
-  namespace.subscribe((newNamespace) => {
+  // Subscribe to dropdown changes
+  selectedNamespace.subscribe((newNamespace) => {
     if (newNamespace) {
       cleanupLogs()
       podName.set(null)
@@ -71,7 +52,6 @@
       containerName.set(null)
     }
   })
-
   podName.subscribe((newPodName) => {
     if (newPodName) {
       cleanupLogs()
@@ -80,13 +60,12 @@
       selectedPod.set(pod ?? null)
     }
   })
-
   containerName.subscribe((newContainerName) => {
     if (newContainerName) {
       cleanupLogs()
 
       // create new SSE stream
-      const logsURL = `/api/v1/resources/workloads/pods/logs?namespace=${$namespace}&pod=${$podName}&container=${newContainerName}`
+      const logsURL = `/api/v1/resources/workloads/pods/logs?namespace=${$selectedNamespace}&pod=${$podName}&container=${newContainerName}`
       logEventSource = new EventSource(logsURL)
 
       logEventSource.onmessage = (event) => {
@@ -125,7 +104,7 @@
 
       // Set from URL params after data is loaded
       if (podParam && nsParam) {
-        namespace.set(nsParam)
+        selectedNamespace.set(nsParam)
         podName.set(podParam)
       }
     }
@@ -177,7 +156,7 @@
             <input type="checkbox" bind:checked={autoScroll} class="sr-only peer" />
             <div
               class="w-9 h-5 bg-gray-700 peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-blue-800 rounded-full peer peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-4 after:w-4 after:transition-all peer-checked:bg-blue-600"
-            ></div>
+            />
             <span class="ml-2 text-sm font-medium text-gray-300">Auto-scroll</span>
           </label>
         </div>
@@ -197,7 +176,7 @@
     <!-- Dropdowns -->
     <div class="flex space-x-4 p-4">
       <Dropdown
-        bind:selectedValue={$namespace}
+        bind:selectedValue={$selectedNamespace}
         items={Array.from($namespaces)}
         id="ns-dropdown"
         width="w-48"
@@ -209,7 +188,7 @@
         id="pod-dropdown"
         width="w-48"
         placeholder="Select pod"
-        disabled={!$namespace}
+        disabled={!$selectedNamespace}
       />
       <Dropdown
         bind:selectedValue={$containerName}
@@ -223,7 +202,7 @@
     <!-- Logs content area -->
     <div class="flex-1 min-h-0 m-1">
       <div class="h-full bg-gray-900 rounded-md overflow-y-auto p-1">
-        <AnsiDisplay bind:addMessage />
+        <AnsiDisplay bind:addMessage bind:autoScroll />
       </div>
     </div>
   </div>
diff --git a/ui/src/lib/types.ts b/ui/src/lib/types.ts
index e4fcd78c3..bf20a94ec 100644
--- a/ui/src/lib/types.ts
+++ b/ui/src/lib/types.ts
@@ -39,3 +39,17 @@ export type CoreServiceType = {
     phase: UDSPackageStatus
   }
 }
+
+// types for pod data loaded for the logs view
+type Container = {
+  name: string
+}
+export type Pod = {
+  metadata: {
+    name: string
+    namespace: string
+  }
+  spec: {
+    containers: Container[]
+  }
+}
diff --git a/ui/src/routes/auth.test.ts b/ui/src/routes/auth.test.ts
index 11b325429..bc8f740a7 100644
--- a/ui/src/routes/auth.test.ts
+++ b/ui/src/routes/auth.test.ts
@@ -76,7 +76,6 @@ describe('load function', () => {
 
     // Verify store operations
     expect(result.namespaces.start).toHaveBeenCalled()
-    expect(result.pods.start).toHaveBeenCalled()
     expect(authenticated.set).toHaveBeenCalledWith(true)
 
     // Verify return value
@@ -118,8 +117,6 @@ describe('load function', () => {
 
     // Verify namespaces was called
     expect(result.namespaces.start).toHaveBeenCalled()
-    expect(result.pods.start).toHaveBeenCalled()
-
     expect(authenticated.set).toHaveBeenCalledWith(true)
 
     // Verify return value
@@ -146,7 +143,6 @@ describe('load function', () => {
 
     // Verify namespaces wasn't started and authenticated state was set to false
     expect(result.namespaces.start).not.toHaveBeenCalled()
-    expect(result.pods.start).not.toHaveBeenCalled()
     expect(authenticated.set).toHaveBeenCalledWith(false)
 
     // Verify return value
@@ -175,7 +171,6 @@ describe('load function', () => {
 
     // Verify namespaces wasn't started authenticated state was set to false
     expect(result.namespaces.start).not.toHaveBeenCalled()
-    expect(result.pods.start).not.toHaveBeenCalled()
     expect(authenticated.set).toHaveBeenCalledWith(false)
 
     // Verify return value

From 33f819dd8e16d356e5f6b9472023410e2d02a246 Mon Sep 17 00:00:00 2001
From: unclegedd <gedd@defenseunicorns.com>
Date: Thu, 31 Oct 2024 22:47:48 -0500
Subject: [PATCH 14/45] copy working

---
 .../components/AnsiDisplay/component.svelte   | 29 +++++++++-
 .../lib/components/k8s/Logs/component.svelte  | 57 +++++++++++++++++--
 2 files changed, 78 insertions(+), 8 deletions(-)

diff --git a/ui/src/lib/components/AnsiDisplay/component.svelte b/ui/src/lib/components/AnsiDisplay/component.svelte
index 32ad21271..54176359b 100644
--- a/ui/src/lib/components/AnsiDisplay/component.svelte
+++ b/ui/src/lib/components/AnsiDisplay/component.svelte
@@ -16,17 +16,24 @@
     },
   })
 
+  // refs to rendered elements
   let container: HTMLDivElement
   let scrollAnchor: HTMLDivElement
+
   let scrollTimeout: number
 
-  // Two-way binding for autoScroll
+  // Track log elements
+  let logElements: HTMLDivElement[] = []
+
   export let autoScroll = true
   let lastScrollTop = 0
 
+  // Debounce auto-scrolling, if many logs come in at once, this creates a smooth scroll UX
   const debouncedScroll = () => {
     if (!autoScroll) return
 
+    // if a new log arrives during the timeout, clear it and start over
+    // this prevents the scroll from jumping around
     if (scrollTimeout) {
       window.clearTimeout(scrollTimeout)
     }
@@ -41,7 +48,7 @@
     const isScrollingUp = target.scrollTop < lastScrollTop
     const isAtBottom = Math.abs(target.scrollHeight - target.clientHeight - target.scrollTop) < 50
 
-    // Update autoScroll based on scroll behavior
+    // enable autoscroll if user is at the bottom, else disable it
     autoScroll = !isScrollingUp && isAtBottom
     lastScrollTop = target.scrollTop
   }
@@ -51,6 +58,7 @@
     debouncedScroll()
   }
 
+  // used by parent component to add messages
   export const addMessage = (message: string) => {
     if (!message || !scrollAnchor?.parentElement) return
 
@@ -61,10 +69,27 @@
 
     window.requestAnimationFrame(() => {
       scrollAnchor.parentElement?.insertBefore(lineElement, scrollAnchor)
+      logElements.push(lineElement)
+      // Keep only last 1000 lines in memory to prevent memory leaks
+      if (logElements.length > 1000) {
+        logElements.shift()
+      }
       debouncedScroll()
     })
   }
 
+  // Function to get last N lines of logs
+  export const getLastNLines = (n: number): string => {
+    const lastN = logElements.slice(-n)
+    return lastN
+      .map((el) => {
+        // Convert HTML back to plain text and remove ANSI codes
+        const text = el.textContent || ''
+        return text.replace(/\n$/, '') // Remove trailing newline if present
+      })
+      .join('\n')
+  }
+
   onMount(() => {
     return () => {
       if (scrollTimeout) {
diff --git a/ui/src/lib/components/k8s/Logs/component.svelte b/ui/src/lib/components/k8s/Logs/component.svelte
index 647e2518b..fcecf0281 100644
--- a/ui/src/lib/components/k8s/Logs/component.svelte
+++ b/ui/src/lib/components/k8s/Logs/component.svelte
@@ -2,12 +2,13 @@
 <!-- SPDX-License-Identifier: AGPL-3.0-or-later OR LicenseRef-Defense-Unicorns-Commercial -->
 
 <script lang="ts">
-  import { onMount } from 'svelte'
+  import { onDestroy, onMount } from 'svelte'
   import { derived, writable } from 'svelte/store'
+  import { fade } from 'svelte/transition'
 
   import { AnsiDisplay, Dropdown } from '$components'
   import type { Pod } from '$lib/types'
-  import { Copy, Download, Search, Terminal } from 'carbon-icons-svelte'
+  import { CheckmarkOutline, Copy, Download, Search, Terminal } from 'carbon-icons-svelte'
 
   // todo: esc exits log view (change url)
   // todo: memory leak? time out after 30 minutes or so? what about large data volume?
@@ -15,6 +16,39 @@
   // track auto scroll state
   let autoScroll = true
 
+  // copy logs helpers
+  let getLastNLines: (n: number) => string
+  let showNotification = false
+  let notificationTimeout: ReturnType<typeof setTimeout>
+
+  const handleCopy = async () => {
+    console.log('Copying logs')
+    const lastLines = getLastNLines(100)
+    try {
+      await navigator.clipboard.writeText(lastLines)
+      showNotification = true
+
+      // Clear existing timeout if there is one
+      if (notificationTimeout) {
+        clearTimeout(notificationTimeout)
+      }
+
+      // Hide notification after 2 seconds
+      notificationTimeout = setTimeout(() => {
+        showNotification = false
+      }, 2000)
+    } catch (err) {
+      console.error('Failed to copy logs:', err)
+    }
+  }
+
+  // clear copy notification timeout on destroy
+  onDestroy(() => {
+    if (notificationTimeout) {
+      clearTimeout(notificationTimeout)
+    }
+  })
+
   // used in AnsiDisplay
   let addMessage: (message: string) => void
 
@@ -164,9 +198,20 @@
 
       <!-- Right section: Action buttons -->
       <div class="flex items-center space-x-2">
-        <button class="p-1.5 text-gray-400 hover:text-gray-200 rounded-lg hover:bg-gray-800">
-          <Copy class="w-4 h-4" />
-        </button>
+        <div class="relative">
+          <button class="p-1.5 text-gray-400 hover:text-gray-200 rounded-lg hover:bg-gray-800" on:click={handleCopy}>
+            <Copy class="w-4 h-4" />
+          </button>
+          {#if showNotification}
+            <div
+              transition:fade={{ duration: 200 }}
+              class="absolute left-1/2 -translate-x-1/2 top-full mt-2 z-50 flex items-center gap-2 px-3 py-2 text-sm text-white bg-gray-900 rounded-lg shadow-lg border border-gray-800 whitespace-nowrap"
+            >
+              <CheckmarkOutline class="w-4 h-4" />
+              <span>Copied!</span>
+            </div>
+          {/if}
+        </div>
         <button class="p-1.5 text-gray-400 hover:text-gray-200 rounded-lg hover:bg-gray-800">
           <Download class="w-4 h-4" />
         </button>
@@ -202,7 +247,7 @@
     <!-- Logs content area -->
     <div class="flex-1 min-h-0 m-1">
       <div class="h-full bg-gray-900 rounded-md overflow-y-auto p-1">
-        <AnsiDisplay bind:addMessage bind:autoScroll />
+        <AnsiDisplay bind:addMessage bind:autoScroll bind:getLastNLines />
       </div>
     </div>
   </div>

From 05960a3375f7f1de5ab66566fe76d7cd1cfa4a8d Mon Sep 17 00:00:00 2001
From: unclegedd <gedd@defenseunicorns.com>
Date: Thu, 31 Oct 2024 23:11:25 -0500
Subject: [PATCH 15/45] copy and download working

---
 .../components/AnsiDisplay/component.svelte   | 18 +++++-
 .../lib/components/k8s/Logs/component.svelte  | 56 ++++++++++++++++---
 2 files changed, 65 insertions(+), 9 deletions(-)

diff --git a/ui/src/lib/components/AnsiDisplay/component.svelte b/ui/src/lib/components/AnsiDisplay/component.svelte
index 54176359b..bf80821c3 100644
--- a/ui/src/lib/components/AnsiDisplay/component.svelte
+++ b/ui/src/lib/components/AnsiDisplay/component.svelte
@@ -25,6 +25,12 @@
   // Track log elements
   let logElements: HTMLDivElement[] = []
 
+  // Function to reset logs list in this component (called by parent)
+  export const resetLogs = () => {
+    logElements.forEach((el) => el.remove())
+    logElements = []
+  }
+
   export let autoScroll = true
   let lastScrollTop = 0
 
@@ -78,7 +84,7 @@
     })
   }
 
-  // Function to get last N lines of logs
+  // Function to get last N lines of logs (called by parent)
   export const getLastNLines = (n: number): string => {
     const lastN = logElements.slice(-n)
     return lastN
@@ -90,6 +96,16 @@
       .join('\n')
   }
 
+  // Function to get all logs for downloading (called by parent)
+  export const getAllLogs = (): string => {
+    return logElements
+      .map((el) => {
+        const text = el.textContent || ''
+        return text.replace(/\n$/, '')
+      })
+      .join('\n')
+  }
+
   onMount(() => {
     return () => {
       if (scrollTimeout) {
diff --git a/ui/src/lib/components/k8s/Logs/component.svelte b/ui/src/lib/components/k8s/Logs/component.svelte
index fcecf0281..3f28f3d22 100644
--- a/ui/src/lib/components/k8s/Logs/component.svelte
+++ b/ui/src/lib/components/k8s/Logs/component.svelte
@@ -11,21 +11,22 @@
   import { CheckmarkOutline, Copy, Download, Search, Terminal } from 'carbon-icons-svelte'
 
   // todo: esc exits log view (change url)
-  // todo: memory leak? time out after 30 minutes or so? what about large data volume?
 
   // track auto scroll state
   let autoScroll = true
 
   // copy logs helpers
   let getLastNLines: (n: number) => string
+  let resetLogs = () => {}
   let showNotification = false
   let notificationTimeout: ReturnType<typeof setTimeout>
+  let notificationMessage = ''
 
   const handleCopy = async () => {
-    console.log('Copying logs')
     const lastLines = getLastNLines(100)
     try {
       await navigator.clipboard.writeText(lastLines)
+      notificationMessage = 'Copied!'
       showNotification = true
 
       // Clear existing timeout if there is one
@@ -49,7 +50,40 @@
     }
   })
 
-  // used in AnsiDisplay
+  // download logs helpers
+  let getAllLogs: () => string
+  const handleDownload = () => {
+    try {
+      const logs = getAllLogs()
+      const blob = new Blob([logs], { type: 'text/plain' })
+      const url = URL.createObjectURL(blob)
+
+      const link = document.createElement('a')
+      link.href = url
+      link.download = `logs-${$podName}-${new Date().toISOString().slice(0, 19).replace(/[:]/g, '-')}.txt`
+
+      document.body.appendChild(link)
+      link.click()
+      document.body.removeChild(link)
+
+      URL.revokeObjectURL(url)
+
+      notificationMessage = 'Downloading'
+      showNotification = true
+
+      if (notificationTimeout) {
+        clearTimeout(notificationTimeout)
+      }
+
+      notificationTimeout = setTimeout(() => {
+        showNotification = false
+      }, 2000)
+    } catch (err) {
+      console.error('Failed to download logs:', err)
+    }
+  }
+
+  // used to add messages to the AnsiDisplay component
   let addMessage: (message: string) => void
 
   let logEventSource: EventSource
@@ -60,6 +94,7 @@
       logEventSource.close()
       const logLines = document.querySelectorAll('.log-line')
       logLines.forEach((line) => line.remove())
+      resetLogs() // clear logs in AnsiDisplay memory
     }
   }
 
@@ -208,13 +243,18 @@
               class="absolute left-1/2 -translate-x-1/2 top-full mt-2 z-50 flex items-center gap-2 px-3 py-2 text-sm text-white bg-gray-900 rounded-lg shadow-lg border border-gray-800 whitespace-nowrap"
             >
               <CheckmarkOutline class="w-4 h-4" />
-              <span>Copied!</span>
+              <span>{notificationMessage}</span>
             </div>
           {/if}
         </div>
-        <button class="p-1.5 text-gray-400 hover:text-gray-200 rounded-lg hover:bg-gray-800">
-          <Download class="w-4 h-4" />
-        </button>
+        <div class="relative">
+          <button
+            class="p-1.5 text-gray-400 hover:text-gray-200 rounded-lg hover:bg-gray-800"
+            on:click={handleDownload}
+          >
+            <Download class="w-4 h-4" />
+          </button>
+        </div>
       </div>
     </div>
 
@@ -247,7 +287,7 @@
     <!-- Logs content area -->
     <div class="flex-1 min-h-0 m-1">
       <div class="h-full bg-gray-900 rounded-md overflow-y-auto p-1">
-        <AnsiDisplay bind:addMessage bind:autoScroll bind:getLastNLines />
+        <AnsiDisplay bind:addMessage bind:autoScroll bind:getLastNLines bind:getAllLogs bind:resetLogs />
       </div>
     </div>
   </div>

From 84ac247ae2b8d3350308a0acad8c602b49373a97 Mon Sep 17 00:00:00 2001
From: unclegedd <gedd@defenseunicorns.com>
Date: Fri, 1 Nov 2024 09:12:23 -0500
Subject: [PATCH 16/45] search works

---
 .../components/AnsiDisplay/component.svelte   | 35 +++++++++++++++++++
 .../lib/components/k8s/Logs/component.svelte  |  9 +++--
 2 files changed, 39 insertions(+), 5 deletions(-)

diff --git a/ui/src/lib/components/AnsiDisplay/component.svelte b/ui/src/lib/components/AnsiDisplay/component.svelte
index bf80821c3..d74d7ec1e 100644
--- a/ui/src/lib/components/AnsiDisplay/component.svelte
+++ b/ui/src/lib/components/AnsiDisplay/component.svelte
@@ -25,6 +25,36 @@
   // Track log elements
   let logElements: HTMLDivElement[] = []
 
+  // highlight when searching + match, and reset when search term is empty
+  export let searchTerm = ''
+  $: if (searchTerm) {
+    highlightMatches(searchTerm)
+  } else {
+    resetHighlights()
+  }
+  const resetHighlights = () => {
+    logElements.forEach((element) => {
+      if (element.dataset.originalContent) {
+        element.innerHTML = element.dataset.originalContent
+      }
+    })
+  }
+  const highlightMatches = (term: string) => {
+    if (!term.trim()) return
+
+    logElements.forEach((element) => {
+      // Store original content in a data attribute if not already stored
+      if (!element.dataset.originalContent) {
+        element.dataset.originalContent = element.innerHTML
+      }
+
+      element.innerHTML = element.dataset.originalContent.replace(
+        new RegExp(term, 'gi'),
+        (match) => `<mark class="bg-yellow-500 text-gray-900 px-0.5 rounded">${match}</mark>`,
+      )
+    })
+  }
+
   // Function to reset logs list in this component (called by parent)
   export const resetLogs = () => {
     logElements.forEach((el) => el.remove())
@@ -80,6 +110,11 @@
       if (logElements.length > 1000) {
         logElements.shift()
       }
+
+      if (searchTerm) {
+        highlightMatches(searchTerm)
+      }
+
       debouncedScroll()
     })
   }
diff --git a/ui/src/lib/components/k8s/Logs/component.svelte b/ui/src/lib/components/k8s/Logs/component.svelte
index 3f28f3d22..c9645c54a 100644
--- a/ui/src/lib/components/k8s/Logs/component.svelte
+++ b/ui/src/lib/components/k8s/Logs/component.svelte
@@ -87,7 +87,7 @@
   let addMessage: (message: string) => void
 
   let logEventSource: EventSource
-  let search = ''
+  let searchTerm = ''
 
   function cleanupLogs() {
     if (logEventSource) {
@@ -212,10 +212,9 @@
             type="text"
             name="input-search"
             autocomplete="off"
-            class="focus:ring-primary-500 h-5 focus:border-primary-500 dark:focus:ring-primary-500 dark:focus:border-primary-500 block w-full rounded-md border border-gray-300 bg-gray-50 p-2.5 pl-9 text-gray-900 sm:text-sm dark:border-gray-600 dark:bg-gray-700 dark:text-white dark:placeholder-gray-400"
+            class="h-9 block w-full rounded-md border border-gray-600 bg-gray-700 p-2.5 pl-9 text-white placeholder-gray-400 focus:border-blue-500 focus:ring-blue-500 text-sm"
             placeholder="Search"
-            data-testid="datatable-search"
-            bind:value={search}
+            bind:value={searchTerm}
           />
         </div>
 
@@ -287,7 +286,7 @@
     <!-- Logs content area -->
     <div class="flex-1 min-h-0 m-1">
       <div class="h-full bg-gray-900 rounded-md overflow-y-auto p-1">
-        <AnsiDisplay bind:addMessage bind:autoScroll bind:getLastNLines bind:getAllLogs bind:resetLogs />
+        <AnsiDisplay bind:addMessage bind:autoScroll bind:getLastNLines bind:getAllLogs bind:resetLogs {searchTerm} />
       </div>
     </div>
   </div>

From 4a3253f9532bbbc902b06aeb81a71f80bbeec9d9 Mon Sep 17 00:00:00 2001
From: unclegedd <gedd@defenseunicorns.com>
Date: Sat, 2 Nov 2024 16:36:58 -0500
Subject: [PATCH 17/45] refactor search

---
 .../components/AnsiDisplay/component.svelte   | 21 +++++-----
 .../components/k8s/Drawer/component.svelte    | 39 ++++++++-----------
 .../k8s/Logs/Dropdown/component.svelte        |  3 ++
 .../lib/components/k8s/Logs/component.svelte  | 18 +++++++--
 4 files changed, 46 insertions(+), 35 deletions(-)

diff --git a/ui/src/lib/components/AnsiDisplay/component.svelte b/ui/src/lib/components/AnsiDisplay/component.svelte
index d74d7ec1e..751a83f33 100644
--- a/ui/src/lib/components/AnsiDisplay/component.svelte
+++ b/ui/src/lib/components/AnsiDisplay/component.svelte
@@ -9,6 +9,7 @@
   const convert = new Convert({
     newline: true,
     stream: true,
+    escapeXML: true,
     colors: {
       0: '#374151',
       1: '#F3F4F6',
@@ -32,24 +33,24 @@
   } else {
     resetHighlights()
   }
+
   const resetHighlights = () => {
     logElements.forEach((element) => {
-      if (element.dataset.originalContent) {
-        element.innerHTML = element.dataset.originalContent
-      }
+      // Remove all <mark> tags and restore their content
+      element.innerHTML = element.innerHTML.replace(/<mark class="[^"]*">(.*?)<\/mark>/g, '$1')
     })
   }
+
   const highlightMatches = (term: string) => {
     if (!term.trim()) return
 
-    logElements.forEach((element) => {
-      // Store original content in a data attribute if not already stored
-      if (!element.dataset.originalContent) {
-        element.dataset.originalContent = element.innerHTML
-      }
+    // First remove any existing highlights
+    resetHighlights()
 
-      element.innerHTML = element.dataset.originalContent.replace(
-        new RegExp(term, 'gi'),
+    // Then add new highlights
+    logElements.forEach((element) => {
+      element.innerHTML = element.innerHTML.replace(
+        new RegExp(term, 'gi'), // global and case-insensitive
         (match) => `<mark class="bg-yellow-500 text-gray-900 px-0.5 rounded">${match}</mark>`,
       )
     })
diff --git a/ui/src/lib/components/k8s/Drawer/component.svelte b/ui/src/lib/components/k8s/Drawer/component.svelte
index f63242ca5..1604fe823 100644
--- a/ui/src/lib/components/k8s/Drawer/component.svelte
+++ b/ui/src/lib/components/k8s/Drawer/component.svelte
@@ -18,7 +18,7 @@
   export let resource: KubernetesObject
   export let baseURL: string
 
-  type Tab = 'metadata' | 'yaml' | 'events' | 'logs'
+  type Tab = 'details' | 'yaml' | 'events'
 
   let events: CoreV1Event[] = []
 
@@ -34,7 +34,7 @@
     }
 
     const handleKeydown = (e: KeyboardEvent) => {
-      const tabList: Tab[] = ['metadata', 'events', 'yaml']
+      const tabList: Tab[] = ['details', 'events', 'yaml']
       let targetTab: string | undefined
 
       switch (e.key) {
@@ -87,7 +87,7 @@
     })
   }
 
-  let activeTab: Tab = 'metadata'
+  let activeTab: Tab = 'details'
 
   function setActiveTab(evt: MouseEvent) {
     const target = evt.target as HTMLButtonElement
@@ -120,7 +120,7 @@
       <div class="flex font-medium pt-3">
         <ul class="flex w-full" id="drawer-tabs">
           <li class="flex-1">
-            <button id="metadata" class:active={activeTab === 'metadata'} on:click={setActiveTab}>Metadata</button>
+            <button id="details" class:active={activeTab === 'details'} on:click={setActiveTab}>Details</button>
           </li>
           <li class="flex-1">
             <button id="events" class:active={activeTab === 'events'} on:click={setActiveTab}>Events</button>
@@ -128,20 +128,26 @@
           <li class="flex-1">
             <button id="yaml" class:active={activeTab === 'yaml'} on:click={setActiveTab}>YAML</button>
           </li>
-          <li class="flex-1">
-            <button id="logs" class:active={activeTab === 'logs'} on:click={setActiveTab}>Logs</button>
-          </li>
         </ul>
       </div>
     </div>
 
     <!-- Content -->
-
     <div class="flex-grow overflow-y-auto dark:text-gray-300 pb-20">
-      {#if activeTab === 'metadata'}
-        <!-- Metadata tab -->
+      {#if activeTab === 'details'}
+        <!-- Details tab -->
         <div class="bg-gray-800 text-gray-200 p-6 rounded-lg">
-          <dl class="space-y-4">
+          <!-- show a Logs button -->
+          <button
+            class="hover:text-primary-700 flex items-center justify-center rounded-lg border border-gray-200 bg-white px-4 py-2 text-sm font-medium text-gray-900 hover:bg-gray-100 focus:z-10 focus:outline-none focus:ring-4 focus:ring-gray-200 md:w-auto dark:border-gray-600 dark:bg-gray-800 dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-white dark:focus:ring-gray-700"
+            type="button"
+            data-testid="datatable-filter-dropdown"
+            on:click={() =>
+              goto(`${baseURL}/logs?pod=${resource.metadata?.name}&namespace=${resource.metadata?.namespace}`)}
+          >
+            View Logs
+          </button>
+          <dl class="mt-6 space-y-4">
             {#each details as { label, value }}
               <div class="flex flex-col sm:flex-row gap-9 border-b border-gray-700 pb-2">
                 <dt class="font-bold text-sm flex-none w-[180px]">{label}</dt>
@@ -187,17 +193,6 @@
             {@html DOMPurify.sanitize(hljs.highlight(YAML.stringify(resource), { language: 'yaml' }).value)}
           </code>
         </div>
-      {:else if activeTab === 'logs'}
-        <!-- show a Logs button -->
-        <button
-          class="hover:text-primary-700 flex items-center justify-center rounded-lg border border-gray-200 bg-white px-4 py-2 text-sm font-medium text-gray-900 hover:bg-gray-100 focus:z-10 focus:outline-none focus:ring-4 focus:ring-gray-200 md:w-auto dark:border-gray-600 dark:bg-gray-800 dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-white dark:focus:ring-gray-700"
-          type="button"
-          data-testid="datatable-filter-dropdown"
-          on:click={() =>
-            goto(`${baseURL}/logs?pod=${resource.metadata?.name}&namespace=${resource.metadata?.namespace}`)}
-        >
-          Logs
-        </button>
       {/if}
     </div>
   </div>
diff --git a/ui/src/lib/components/k8s/Logs/Dropdown/component.svelte b/ui/src/lib/components/k8s/Logs/Dropdown/component.svelte
index a54556189..174574c29 100644
--- a/ui/src/lib/components/k8s/Logs/Dropdown/component.svelte
+++ b/ui/src/lib/components/k8s/Logs/Dropdown/component.svelte
@@ -4,6 +4,9 @@
 <script lang="ts">
   import { Dropdown } from 'flowbite'
 
+  // todo: start here! update this per Mads' request
+  // https://flowbite.com/docs/forms/floating-label/ (also in Figma?)
+
   export let items: string[]
   export let selectedValue: string | null = null
   export let width: string = 'w-32' // must be a tailwind class
diff --git a/ui/src/lib/components/k8s/Logs/component.svelte b/ui/src/lib/components/k8s/Logs/component.svelte
index c9645c54a..139e69352 100644
--- a/ui/src/lib/components/k8s/Logs/component.svelte
+++ b/ui/src/lib/components/k8s/Logs/component.svelte
@@ -6,12 +6,11 @@
   import { derived, writable } from 'svelte/store'
   import { fade } from 'svelte/transition'
 
+  import { goto } from '$app/navigation'
   import { AnsiDisplay, Dropdown } from '$components'
   import type { Pod } from '$lib/types'
   import { CheckmarkOutline, Copy, Download, Search, Terminal } from 'carbon-icons-svelte'
 
-  // todo: esc exits log view (change url)
-
   // track auto scroll state
   let autoScroll = true
 
@@ -96,6 +95,7 @@
       logLines.forEach((line) => line.remove())
       resetLogs() // clear logs in AnsiDisplay memory
     }
+    autoScroll = true
   }
 
   // Create base stores
@@ -182,16 +182,28 @@
       console.error('EventSource failed:', event)
     }
 
+    // add window event handler for keydown (used to track esc)
+    const handleKeydown = (e: KeyboardEvent) => {
+      switch (e.key) {
+        // If the Escape key is pressed, close the Logs view
+        case 'Escape':
+          goto('/workloads/pods')
+          return
+      }
+    }
+    window.addEventListener('keydown', handleKeydown)
+
     return () => {
       podEventSource.close()
       if (logEventSource) {
         logEventSource.close()
       }
+      window.removeEventListener('keydown', handleKeydown)
     }
   })
 </script>
 
-<section class="h-[35%] flex-shrink-0 mt-2">
+<section class="h-[35%] flex-shrink-0 mt-6">
   <div class="flex h-full w-full flex-col bg-gray-800 rounded-lg">
     <!-- Header -->
     <div class="flex items-center justify-between py-2 border-b border-gray-700 mx-4">

From 5b7b09bc7d11643206298867a2bba3a4cd481f6d Mon Sep 17 00:00:00 2001
From: unclegedd <gedd@defenseunicorns.com>
Date: Sat, 2 Nov 2024 18:00:03 -0500
Subject: [PATCH 18/45] labeled dropdown

---
 ui/src/lib/components/k8s/Logs/Dropdown/component.svelte | 8 ++++++--
 ui/src/lib/components/k8s/Logs/component.svelte          | 7 +++++--
 2 files changed, 11 insertions(+), 4 deletions(-)

diff --git a/ui/src/lib/components/k8s/Logs/Dropdown/component.svelte b/ui/src/lib/components/k8s/Logs/Dropdown/component.svelte
index 174574c29..4a82d5685 100644
--- a/ui/src/lib/components/k8s/Logs/Dropdown/component.svelte
+++ b/ui/src/lib/components/k8s/Logs/Dropdown/component.svelte
@@ -14,6 +14,7 @@
   export let id: string
   export let placeholder: string = 'Select an option' // new placeholder prop
   export let disabled: boolean = false
+  export let label: string = ''
 
   function handleSelect(item: string) {
     selectedValue = item
@@ -30,11 +31,14 @@
   $: isPlaceholderShown = !selectedValue
 </script>
 
-<div>
+<div class="relative">
+  <span class="absolute -top-2 left-1 px-1 text-xs text-gray-400 bg-gray-800 rounded-md">
+    {label}
+  </span>
   <button
     {id}
     data-dropdown-toggle="{id}-menu"
-    class="{width} justify-between truncate bg-gray-800 text-gray-300 hover:bg-gray-700 border border-gray-700 text-sm px-2 py-1 rounded-md inline-flex items-center h-7"
+    class="{width} justify-between truncate bg-gray-800 text-gray-300 hover:border-gray-500 border border-gray-700 text-sm px-2 py-1 rounded-md inline-flex items-center h-10 dark:focus:border-blue-500 focus:outline-none focus:ring-0 focus:border-blue-500"
     type="button"
     {disabled}
   >
diff --git a/ui/src/lib/components/k8s/Logs/component.svelte b/ui/src/lib/components/k8s/Logs/component.svelte
index 139e69352..92c2099ee 100644
--- a/ui/src/lib/components/k8s/Logs/component.svelte
+++ b/ui/src/lib/components/k8s/Logs/component.svelte
@@ -204,7 +204,7 @@
 </script>
 
 <section class="h-[35%] flex-shrink-0 mt-6">
-  <div class="flex h-full w-full flex-col bg-gray-800 rounded-lg">
+  <div class="flex h-full w-full flex-col bg-gray-800 rounded-lg overflow-y-auto">
     <!-- Header -->
     <div class="flex items-center justify-between py-2 border-b border-gray-700 mx-4">
       <!-- Left section: title, search, and log controls -->
@@ -277,6 +277,7 @@
         id="ns-dropdown"
         width="w-48"
         placeholder="Select namespace"
+        label="Namespace"
       />
       <Dropdown
         bind:selectedValue={$podName}
@@ -285,6 +286,7 @@
         width="w-48"
         placeholder="Select pod"
         disabled={!$selectedNamespace}
+        label="Pod"
       />
       <Dropdown
         bind:selectedValue={$containerName}
@@ -293,10 +295,11 @@
         width="w-48"
         placeholder="Select container"
         disabled={!$podName}
+        label="Container"
       />
     </div>
     <!-- Logs content area -->
-    <div class="flex-1 min-h-0 m-1">
+    <div class="flex-1 m-1 min-h-12">
       <div class="h-full bg-gray-900 rounded-md overflow-y-auto p-1">
         <AnsiDisplay bind:addMessage bind:autoScroll bind:getLastNLines bind:getAllLogs bind:resetLogs {searchTerm} />
       </div>

From 63a1c817e80d52368d6203cd6e43e36e860beb22 Mon Sep 17 00:00:00 2001
From: unclegedd <gedd@defenseunicorns.com>
Date: Mon, 4 Nov 2024 08:44:50 -0600
Subject: [PATCH 19/45] css

---
 ui/src/lib/components/k8s/Logs/component.svelte | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/ui/src/lib/components/k8s/Logs/component.svelte b/ui/src/lib/components/k8s/Logs/component.svelte
index 92c2099ee..af5f8c83b 100644
--- a/ui/src/lib/components/k8s/Logs/component.svelte
+++ b/ui/src/lib/components/k8s/Logs/component.svelte
@@ -224,7 +224,7 @@
             type="text"
             name="input-search"
             autocomplete="off"
-            class="h-9 block w-full rounded-md border border-gray-600 bg-gray-700 p-2.5 pl-9 text-white placeholder-gray-400 focus:border-blue-500 focus:ring-blue-500 text-sm"
+            class="h-9 block w-full rounded-md border border-gray-600 bg-gray-700 p-2.5 pl-9 text-white placeholder-gray-400 focus:ring-primary-500 focus:border-primary-500 focus:ring-blue-500 text-sm"
             placeholder="Search"
             bind:value={searchTerm}
           />

From 49707ee79d912555af0c4e49bee71dbdefd627f4 Mon Sep 17 00:00:00 2001
From: unclegedd <gedd@defenseunicorns.com>
Date: Mon, 4 Nov 2024 14:34:32 -0600
Subject: [PATCH 20/45] css

---
 .../lib/components/k8s/Logs/Dropdown/component.svelte  | 10 ++--------
 1 file changed, 2 insertions(+), 8 deletions(-)

diff --git a/ui/src/lib/components/k8s/Logs/Dropdown/component.svelte b/ui/src/lib/components/k8s/Logs/Dropdown/component.svelte
index 4a82d5685..e2e86839e 100644
--- a/ui/src/lib/components/k8s/Logs/Dropdown/component.svelte
+++ b/ui/src/lib/components/k8s/Logs/Dropdown/component.svelte
@@ -4,9 +4,6 @@
 <script lang="ts">
   import { Dropdown } from 'flowbite'
 
-  // todo: start here! update this per Mads' request
-  // https://flowbite.com/docs/forms/floating-label/ (also in Figma?)
-
   export let items: string[]
   export let selectedValue: string | null = null
   export let width: string = 'w-32' // must be a tailwind class
@@ -57,11 +54,8 @@
   </button>
 
   <!-- Dropdown Menu -->
-  <div
-    id="{id}-menu"
-    class="z-50 hidden mt-1 absolute truncate bg-gray-800 rounded-md border border-gray-700 shadow-lg"
-  >
-    <ul class="{maxHeight} overflow-y-auto py-1 text-sm text-gray-300" aria-labelledby="dropdownDefaultButton">
+  <div id="{id}-menu" class="z-50 hidden absolute truncate bg-gray-800 rounded-md border border-gray-700 shadow-lg">
+    <ul class="{maxHeight} {width} overflow-y-auto text-sm text-gray-300" aria-labelledby={id}>
       {#each items as item}
         <li>
           <button

From 1bf08d859b10d31feef5e7a53b7644ae2fbb8d75 Mon Sep 17 00:00:00 2001
From: unclegedd <gedd@defenseunicorns.com>
Date: Tue, 5 Nov 2024 09:54:40 -0600
Subject: [PATCH 21/45] refactors backend and adds tests

---
 src/pkg/api/handlers.go                       | 130 +-----------
 src/pkg/api/logs/logs.go                      | 152 ++++++++++++++
 src/pkg/api/logs/logs_test.go                 | 185 ++++++++++++++++++
 src/test/e2e/api_test.go                      |  34 ++++
 .../lib/components/k8s/Logs/component.svelte  |   4 +-
 5 files changed, 376 insertions(+), 129 deletions(-)
 create mode 100644 src/pkg/api/logs/logs.go
 create mode 100644 src/pkg/api/logs/logs_test.go

diff --git a/src/pkg/api/handlers.go b/src/pkg/api/handlers.go
index 3e31f6c75..f08411454 100644
--- a/src/pkg/api/handlers.go
+++ b/src/pkg/api/handlers.go
@@ -4,24 +4,17 @@
 package api
 
 import (
-	"bufio"
-	"context"
 	"encoding/json"
-	"errors"
-	"fmt"
-	"io"
 	"log/slog"
 	"net/http"
-	"strings"
 	"time"
 
 	"github.com/defenseunicorns/uds-runtime/src/pkg/api/auth"
 	_ "github.com/defenseunicorns/uds-runtime/src/pkg/api/docs" //nolint:staticcheck
+	"github.com/defenseunicorns/uds-runtime/src/pkg/api/logs"
 	"github.com/defenseunicorns/uds-runtime/src/pkg/api/resources"
 	"github.com/defenseunicorns/uds-runtime/src/pkg/api/rest"
 	"github.com/defenseunicorns/uds-runtime/src/pkg/k8s/session"
-	v1 "k8s.io/api/core/v1"
-	metav1 "k8s.io/apimachinery/pkg/apis/meta/v1"
 )
 
 // @Description Get Nodes
@@ -152,128 +145,9 @@ func getPod(cache *resources.Cache) func(w http.ResponseWriter, r *http.Request)
 // @Router /api/v1/resources/workloads/pods/logs [get]
 // @Param pod query string true "Pod name"
 // @Param namespace query string true "Namespace"
-// todo: rate limiting?
-// todo: error retry logic?
 func getPodLogs(k8sSession *session.K8sSession) func(w http.ResponseWriter, r *http.Request) {
 	return func(w http.ResponseWriter, r *http.Request) {
-		// Get query parameters
-		pod := r.URL.Query().Get("pod")
-		namespace := r.URL.Query().Get("namespace")
-		container := r.URL.Query().Get("container")
-		if pod == "" || namespace == "" || container == "" {
-			http.Error(w, "Pod and Namespace are required", http.StatusBadRequest)
-			return
-		}
-
-		// Set headers for SSE
-		w.Header().Set("Content-Type", "text/event-stream")
-		w.Header().Set("Cache-Control", "no-cache")
-		w.Header().Set("Connection", "keep-alive")
-		w.Header().Set("Access-Control-Allow-Origin", "*")
-
-		ctx := r.Context()
-		flusher, ok := w.(http.Flusher)
-
-		// Get existing logs first without following
-		numLines := int64(100)
-		existingLogs := k8sSession.Clients.Clientset.CoreV1().Pods(namespace).GetLogs(pod, &v1.PodLogOptions{
-			Container: container,
-			TailLines: &numLines, // limit the lines so we don't send too much data to the client
-		})
-
-		// Read existing logs
-		lastReadTime := time.Now()
-		existingLogsStream, err := existingLogs.Stream(ctx)
-		if err != nil {
-			http.Error(w, fmt.Sprintf("Failed to get existing logs: %v", err), http.StatusInternalServerError)
-			return
-		}
-
-		// close existing logs stream when done
-		defer existingLogsStream.Close()
-
-		// Send existing logs to client
-		scanner := bufio.NewScanner(existingLogsStream)
-		for scanner.Scan() {
-			fmt.Fprintf(w, "data: %s\n\n", scanner.Text())
-		}
-		flusher.Flush()
-		if err := scanner.Err(); err != nil {
-			http.Error(w, fmt.Sprintf("Error reading existing logs: %v", err), http.StatusInternalServerError)
-			return
-		}
-
-		// after sending existing logs, continue to stream new logs
-		podLogs := k8sSession.Clients.Clientset.CoreV1().Pods(namespace).GetLogs(pod, &v1.PodLogOptions{
-			Container: container,
-			Follow:    true,
-			SinceTime: &metav1.Time{Time: lastReadTime},
-		})
-
-		logStream, err := podLogs.Stream(ctx)
-		if err != nil {
-			http.Error(w, fmt.Sprintf("Failed to open log stream: %v", err), http.StatusInternalServerError)
-			return
-		}
-		defer logStream.Close()
-
-		reader := bufio.NewReader(logStream)
-		if !ok {
-			http.Error(w, "Streaming unsupported", http.StatusInternalServerError)
-			return
-		}
-
-		// Buffer for batching log lines
-		var buffer strings.Builder
-
-		// Create a channel to signal when we should flush
-		shouldFlush := make(chan struct{}, 1)
-
-		// Start a goroutine to continuously read logs
-		go func() {
-			for {
-				// block until a complete log line is read
-				line, err := reader.ReadBytes('\n')
-				if err != nil {
-					if err != io.EOF && !errors.Is(err, context.Canceled) {
-						buffer.WriteString(fmt.Sprintf("ERROR: %v\n", err))
-					}
-					close(shouldFlush)
-					return
-				}
-
-				buffer.Write(line)
-
-				// non-blocking channel send to shouldFlush
-				select {
-				case shouldFlush <- struct{}{}:
-				default:
-				}
-			}
-		}()
-
-		// Main loop to handle flushes
-		for {
-			var shouldTryFlush bool
-
-			select {
-			case <-ctx.Done():
-				slog.Debug("Log stream closed")
-				return
-
-			case _, ok := <-shouldFlush:
-				if !ok {
-					return
-				}
-				shouldTryFlush = true
-			}
-
-			if shouldTryFlush && buffer.Len() > 0 {
-				fmt.Fprintf(w, "data: %s\n\n", buffer.String())
-				buffer.Reset()
-				flusher.Flush()
-			}
-		}
+		logs.GetLogs(k8sSession.Clients.Clientset, w, r)
 	}
 }
 
diff --git a/src/pkg/api/logs/logs.go b/src/pkg/api/logs/logs.go
new file mode 100644
index 000000000..95d4fa901
--- /dev/null
+++ b/src/pkg/api/logs/logs.go
@@ -0,0 +1,152 @@
+// Copyright 2024 Defense Unicorns
+// SPDX-License-Identifier: AGPL-3.0-or-later OR LicenseRef-Defense-Unicorns-Commercial
+
+package logs
+
+import (
+	"bufio"
+	"context"
+	"errors"
+	"fmt"
+	"io"
+	"log/slog"
+	"net/http"
+	"strings"
+	"time"
+
+	"github.com/defenseunicorns/uds-runtime/src/pkg/api/rest"
+	v1 "k8s.io/api/core/v1"
+	metav1 "k8s.io/apimachinery/pkg/apis/meta/v1"
+	"k8s.io/client-go/kubernetes"
+)
+
+// validateParams checks if all required parameters are present
+func validateParams(pod, namespace, container string) error {
+	if pod == "" || namespace == "" || container == "" {
+		return errors.New("pod, namespace, and container are required")
+	}
+	return nil
+}
+
+// streamExistingLogs fetches and streams existing logs
+func streamExistingLogs(ctx context.Context, clientSet kubernetes.Interface, w http.ResponseWriter,
+	pod, namespace, container string, numLines int64) (time.Time, error) {
+	logStream, err := clientSet.CoreV1().Pods(namespace).GetLogs(pod, &v1.PodLogOptions{
+		Container: container,
+		TailLines: &numLines,
+	}).Stream(ctx)
+	if err != nil {
+		return time.Time{}, fmt.Errorf("failed to get existing logs: %w", err)
+	}
+	defer logStream.Close()
+
+	flusher := w.(http.Flusher)
+	scanner := bufio.NewScanner(logStream)
+	for scanner.Scan() {
+		fmt.Fprintf(w, "data: %s\n\n", scanner.Text())
+	}
+	flusher.Flush()
+
+	if err := scanner.Err(); err != nil {
+		return time.Time{}, fmt.Errorf("error reading existing logs: %w", err)
+	}
+
+	return time.Now(), nil
+}
+
+// handleLogStream manages the continuous streaming of new logs
+func handleLogStream(ctx context.Context, logStream io.ReadCloser, w http.ResponseWriter) error {
+	defer logStream.Close()
+
+	buffer := &strings.Builder{}
+	shouldFlush := make(chan struct{}, 1)
+	reader := bufio.NewReader(logStream)
+	flusher := w.(http.Flusher)
+
+	// Start log reading goroutine
+	go func() {
+		for {
+			line, err := reader.ReadBytes('\n')
+			if err != nil {
+				if err != io.EOF && !errors.Is(err, context.Canceled) {
+					buffer.WriteString(fmt.Sprintf("ERROR: %v\n", err))
+				}
+				close(shouldFlush)
+				return
+			}
+
+			buffer.Write(line)
+
+			select {
+			case shouldFlush <- struct{}{}:
+			default:
+			}
+		}
+	}()
+
+	// Main flush loop
+	for {
+		select {
+		case <-ctx.Done():
+			slog.Debug("Log stream closed")
+			return nil
+		case _, ok := <-shouldFlush:
+			if !ok {
+				return nil
+			}
+			if buffer.Len() > 0 {
+				fmt.Fprintf(w, "data: %s\n\n", buffer.String())
+				buffer.Reset()
+				flusher.Flush()
+			}
+		}
+	}
+}
+
+// GetLogs streams logs from a pod
+func GetLogs(clientSet kubernetes.Interface, w http.ResponseWriter, r *http.Request) {
+	// Get and validate query parameters
+	pod := r.URL.Query().Get("pod")
+	namespace := r.URL.Query().Get("namespace")
+	container := r.URL.Query().Get("container")
+
+	if err := validateParams(pod, namespace, container); err != nil {
+		http.Error(w, err.Error(), http.StatusBadRequest)
+		return
+	}
+
+	rest.WriteHeaders(w)
+	ctx := r.Context()
+
+	// Verify streaming is supported
+	_, ok := w.(http.Flusher)
+	if !ok {
+		http.Error(w, "Streaming unsupported", http.StatusInternalServerError)
+		return
+	}
+
+	// Stream existing logs first
+	lastReadTime, err := streamExistingLogs(ctx, clientSet, w, pod, namespace, container, 100)
+	if err != nil {
+		http.Error(w, err.Error(), http.StatusInternalServerError)
+		return
+	}
+
+	// Set up streaming for new logs
+	podLogs := clientSet.CoreV1().Pods(namespace).GetLogs(pod, &v1.PodLogOptions{
+		Container: container,
+		Follow:    true,
+		SinceTime: &metav1.Time{Time: lastReadTime},
+	})
+
+	logStream, err := podLogs.Stream(ctx)
+	if err != nil {
+		http.Error(w, fmt.Sprintf("Failed to open log stream: %v", err), http.StatusInternalServerError)
+		return
+	}
+
+	if err := handleLogStream(ctx, logStream, w); err != nil {
+		http.Error(w, err.Error(), http.StatusInternalServerError)
+		return
+	}
+}
diff --git a/src/pkg/api/logs/logs_test.go b/src/pkg/api/logs/logs_test.go
new file mode 100644
index 000000000..53b814107
--- /dev/null
+++ b/src/pkg/api/logs/logs_test.go
@@ -0,0 +1,185 @@
+// Copyright 2024 Defense Unicorns
+// SPDX-License-Identifier: AGPL-3.0-or-later OR LicenseRef-Defense-Unicorns-Commercial
+
+package logs
+
+import (
+	"context"
+	"io"
+	"net/http"
+	"net/http/httptest"
+	"strings"
+	"testing"
+	"time"
+
+	"github.com/stretchr/testify/require"
+	v1 "k8s.io/api/core/v1"
+	metav1 "k8s.io/apimachinery/pkg/apis/meta/v1"
+	"k8s.io/client-go/kubernetes/fake"
+)
+
+// mockReadCloser implements io.ReadCloser for testing
+type mockReadCloser struct {
+	io.Reader
+	closeFunc func() error
+}
+
+func (m mockReadCloser) Close() error {
+	if m.closeFunc != nil {
+		return m.closeFunc()
+	}
+	return nil
+}
+
+// mockPodLogStream creates a mock log stream with predefined logs
+func mockPodLogStream(logs []string) io.ReadCloser {
+	return mockReadCloser{
+		Reader:    strings.NewReader(strings.Join(logs, "\n") + "\n"),
+		closeFunc: func() error { return nil },
+	}
+}
+
+// setupTest creates a test environment with fake clientset and request
+func setupTest(t *testing.T, pod, namespace, container string) (*fake.Clientset, *http.Request, *httptest.ResponseRecorder) {
+	t.Helper()
+
+	// Create test pod
+	mockPod := &v1.Pod{
+		ObjectMeta: metav1.ObjectMeta{
+			Name:      pod,
+			Namespace: namespace,
+		},
+		Spec: v1.PodSpec{
+			Containers: []v1.Container{
+				{
+					Name: container,
+				},
+			},
+		},
+	}
+	// Create fake clientset
+	clientset := fake.NewClientset()
+	_, err := clientset.CoreV1().Pods(namespace).Create(context.Background(), mockPod, metav1.CreateOptions{})
+	require.NoError(t, err, "Failed to create test pod")
+
+	// Create HTTP request
+	req := httptest.NewRequest("GET", "/logs?pod="+pod+"&namespace="+namespace+"&container="+container, nil)
+	w := httptest.NewRecorder()
+
+	return clientset, req, w
+}
+
+func TestStreamExistingLogs(t *testing.T) {
+	// Setup test environment
+	clientset, _, w := setupTest(t, "test-pod", "test-ns", "test-container")
+
+	ctx := context.Background()
+	timestamp, err := streamExistingLogs(ctx, clientset, w, "test-pod", "test-ns", "test-container", 100)
+	require.NoError(t, err, "streamExistingLogs() should not return an error")
+	require.False(t, timestamp.IsZero(), "timestamp should not be zero")
+
+	// Verify the response contains the expected logs
+	response := w.Body.String()
+	require.Equal(t, response, "data: fake logs\n\n", "Response should contain log line")
+}
+
+func TestGetLogsQueryParams(t *testing.T) {
+	tests := []struct {
+		name       string
+		pod        string
+		namespace  string
+		container  string
+		wantStatus int
+	}{
+		{
+			name:       "missing all parameters",
+			wantStatus: http.StatusBadRequest,
+		},
+		{
+			name:       "missing namespace and container",
+			pod:        "test-pod",
+			wantStatus: http.StatusBadRequest,
+		},
+		{
+			name:       "missing container",
+			pod:        "test-pod",
+			namespace:  "test-ns",
+			wantStatus: http.StatusBadRequest,
+		},
+		{
+			name:       "valid parameters",
+			pod:        "test-pod",
+			namespace:  "test-ns",
+			container:  "test-container",
+			wantStatus: http.StatusOK,
+		},
+	}
+
+	for _, tt := range tests {
+		t.Run(tt.name, func(t *testing.T) {
+			clientset := fake.NewClientset()
+			url := "/logs"
+			params := make([]string, 0)
+			if tt.pod != "" {
+				params = append(params, "pod="+tt.pod)
+			}
+			if tt.namespace != "" {
+				params = append(params, "namespace="+tt.namespace)
+			}
+			if tt.container != "" {
+				params = append(params, "container="+tt.container)
+			}
+			if len(params) > 0 {
+				url += "?" + strings.Join(params, "&")
+			}
+
+			req := httptest.NewRequest("GET", url, nil)
+			w := httptest.NewRecorder()
+
+			GetLogs(clientset, w, req)
+
+			require.Equal(t, tt.wantStatus, w.Code, "GetLogs() should return correct status code")
+		})
+	}
+}
+
+func TestHandleLogStream(t *testing.T) {
+	logs := []string{"log1", "log2", "log3"}
+	mockStream := mockPodLogStream(logs)
+
+	w := httptest.NewRecorder()
+	ctx, cancel := context.WithTimeout(context.Background(), 100*time.Millisecond)
+	defer cancel()
+
+	err := handleLogStream(ctx, mockStream, w)
+	require.NoError(t, err, "handleLogStream() should not return an error")
+
+	response := w.Body.String()
+	expected := "data: log1\nlog2\nlog3\n\n\n" // extra \n at end to account for the \n at the end of the final log line
+	require.Equal(t, expected, response, "Response should contain all logs")
+}
+
+func TestGetLogs(t *testing.T) {
+	clientset, req, w := setupTest(t, "test-pod", "test-ns", "test-container")
+
+	// Create a cancel context to stop the streaming after a short time
+	ctx, cancel := context.WithTimeout(context.Background(), 100*time.Millisecond)
+	defer cancel()
+	req = req.WithContext(ctx)
+
+	GetLogs(clientset, w, req)
+
+	require.Equal(t, http.StatusOK, w.Code, "GetLogs() should return OK status")
+	require.Equal(t, "data: fake logs\n\n", w.Body.String())
+
+	// Verify headers
+	expectedHeaders := map[string]string{
+		"Content-Type":  "text/event-stream; charset=utf-8",
+		"Cache-Control": "no-cache",
+		"Connection":    "keep-alive",
+	}
+
+	for key, expected := range expectedHeaders {
+		require.Equal(t, expected, w.Header().Get(key), "Header %s should be set correctly", key)
+	}
+}
diff --git a/src/test/e2e/api_test.go b/src/test/e2e/api_test.go
index 228de84f6..45c3eea65 100644
--- a/src/test/e2e/api_test.go
+++ b/src/test/e2e/api_test.go
@@ -4,6 +4,7 @@
 package e2e
 
 import (
+	"context"
 	"encoding/json"
 	"fmt"
 	"net/http"
@@ -16,8 +17,10 @@ import (
 	"github.com/defenseunicorns/uds-runtime/src/pkg/api"
 	"github.com/defenseunicorns/uds-runtime/src/pkg/api/auth"
 	"github.com/defenseunicorns/uds-runtime/src/pkg/config"
+	"github.com/defenseunicorns/uds-runtime/src/pkg/k8s/client"
 	"github.com/go-chi/chi/v5"
 	"github.com/stretchr/testify/require"
+	metav1 "k8s.io/apimachinery/pkg/apis/meta/v1"
 )
 
 type TestRoute struct {
@@ -257,6 +260,37 @@ func TestClusterOverview(t *testing.T) {
 	})
 }
 
+func TestLogs(t *testing.T) {
+	r, err := setup()
+	require.NoError(t, err)
+
+	// get podinfo pod name using k8s client
+	k8sClient, err := client.NewClient()
+	require.NoError(t, err)
+	pods, err := k8sClient.Clientset.CoreV1().Pods("podinfo").List(context.TODO(), metav1.ListOptions{})
+	require.NoError(t, err)
+	podinfoPodName := pods.Items[0].Name
+
+	t.Run("logs", func(t *testing.T) {
+		rr := httptest.NewRecorder()
+		target := fmt.Sprintf("/api/v1/resources/workloads/pods/logs?namespace=podinfo&pod=%s&container=podinfo", podinfoPodName)
+		req := httptest.NewRequest("GET", target, nil)
+
+		go func() {
+			r.ServeHTTP(rr, req)
+		}()
+
+		// sleep a small amount to ensure the ServeHTTP invocation in the
+		// go-routine has enough time to actually run and provide a value
+		time.Sleep(1 * time.Second)
+
+		require.Equal(t, http.StatusOK, rr.Code)
+
+		// Check if the response body contains the expected log message
+		require.Contains(t, rr.Body.String(), "Starting podinfo")
+	})
+}
+
 // processResponseBody removes potential second occurrence of "data: [...]" from the response body when making SSE calls
 // these occurrences are intermittent and happen most likely because of network latency allowing a second sendData() event
 func processResponseBody(body string) []byte {
diff --git a/ui/src/lib/components/k8s/Logs/component.svelte b/ui/src/lib/components/k8s/Logs/component.svelte
index af5f8c83b..6d64b63e1 100644
--- a/ui/src/lib/components/k8s/Logs/component.svelte
+++ b/ui/src/lib/components/k8s/Logs/component.svelte
@@ -95,7 +95,6 @@
       logLines.forEach((line) => line.remove())
       resetLogs() // clear logs in AnsiDisplay memory
     }
-    autoScroll = true
   }
 
   // Create base stores
@@ -120,6 +119,7 @@
       selectedPod.set(null)
       containerName.set(null)
     }
+    autoScroll = true
   })
   podName.subscribe((newPodName) => {
     if (newPodName) {
@@ -128,6 +128,7 @@
       const pod = $filteredPods.find((p) => p.metadata.name === newPodName)
       selectedPod.set(pod ?? null)
     }
+    autoScroll = true
   })
   containerName.subscribe((newContainerName) => {
     if (newContainerName) {
@@ -145,6 +146,7 @@
         console.error('EventSource failed:', event)
       }
     }
+    autoScroll = true
   })
 
   onMount(() => {

From 8fe2148c0f6e364418bd214b1b079c82e0c30627 Mon Sep 17 00:00:00 2001
From: unclegedd <gedd@defenseunicorns.com>
Date: Tue, 5 Nov 2024 09:57:07 -0600
Subject: [PATCH 22/45] update swagger

---
 src/pkg/api/docs/docs.go      | 42 +++++++++++++++++++++++++++++++++++
 src/pkg/api/docs/swagger.json | 42 +++++++++++++++++++++++++++++++++++
 src/pkg/api/docs/swagger.yaml | 28 +++++++++++++++++++++++
 src/pkg/api/handlers.go       |  5 +++--
 4 files changed, 115 insertions(+), 2 deletions(-)

diff --git a/src/pkg/api/docs/docs.go b/src/pkg/api/docs/docs.go
index 39527315c..10506311a 100644
--- a/src/pkg/api/docs/docs.go
+++ b/src/pkg/api/docs/docs.go
@@ -2991,6 +2991,48 @@ const docTemplate = `{
                 }
             }
         },
+        "/api/v1/resources/workloads/pods/logs": {
+            "get": {
+                "description": "Get Pod logs",
+                "consumes": [
+                    "text/html"
+                ],
+                "produces": [
+                    "application/json"
+                ],
+                "tags": [
+                    "workloads"
+                ],
+                "parameters": [
+                    {
+                        "type": "string",
+                        "description": "pod",
+                        "name": "pod",
+                        "in": "query",
+                        "required": true
+                    },
+                    {
+                        "type": "string",
+                        "description": "namespace",
+                        "name": "namespace",
+                        "in": "query",
+                        "required": true
+                    },
+                    {
+                        "type": "string",
+                        "description": "container",
+                        "name": "container",
+                        "in": "query",
+                        "required": true
+                    }
+                ],
+                "responses": {
+                    "200": {
+                        "description": "OK"
+                    }
+                }
+            }
+        },
         "/api/v1/resources/workloads/pods/{uid}": {
             "get": {
                 "description": "Get Pod by UID",
diff --git a/src/pkg/api/docs/swagger.json b/src/pkg/api/docs/swagger.json
index 7cdb68b81..21a2d1663 100644
--- a/src/pkg/api/docs/swagger.json
+++ b/src/pkg/api/docs/swagger.json
@@ -2980,6 +2980,48 @@
                 }
             }
         },
+        "/api/v1/resources/workloads/pods/logs": {
+            "get": {
+                "description": "Get Pod logs",
+                "consumes": [
+                    "text/html"
+                ],
+                "produces": [
+                    "application/json"
+                ],
+                "tags": [
+                    "workloads"
+                ],
+                "parameters": [
+                    {
+                        "type": "string",
+                        "description": "pod",
+                        "name": "pod",
+                        "in": "query",
+                        "required": true
+                    },
+                    {
+                        "type": "string",
+                        "description": "namespace",
+                        "name": "namespace",
+                        "in": "query",
+                        "required": true
+                    },
+                    {
+                        "type": "string",
+                        "description": "container",
+                        "name": "container",
+                        "in": "query",
+                        "required": true
+                    }
+                ],
+                "responses": {
+                    "200": {
+                        "description": "OK"
+                    }
+                }
+            }
+        },
         "/api/v1/resources/workloads/pods/{uid}": {
             "get": {
                 "description": "Get Pod by UID",
diff --git a/src/pkg/api/docs/swagger.yaml b/src/pkg/api/docs/swagger.yaml
index dcdbf11d9..4a5a45ff2 100644
--- a/src/pkg/api/docs/swagger.yaml
+++ b/src/pkg/api/docs/swagger.yaml
@@ -2031,6 +2031,34 @@ paths:
           description: OK
       tags:
       - workloads
+  /api/v1/resources/workloads/pods/logs:
+    get:
+      consumes:
+      - text/html
+      description: Get Pod logs
+      parameters:
+      - description: pod
+        in: query
+        name: pod
+        required: true
+        type: string
+      - description: namespace
+        in: query
+        name: namespace
+        required: true
+        type: string
+      - description: container
+        in: query
+        name: container
+        required: true
+        type: string
+      produces:
+      - application/json
+      responses:
+        "200":
+          description: OK
+      tags:
+      - workloads
   /api/v1/resources/workloads/statefulsets:
     get:
       consumes:
diff --git a/src/pkg/api/handlers.go b/src/pkg/api/handlers.go
index f08411454..551f8c6a3 100644
--- a/src/pkg/api/handlers.go
+++ b/src/pkg/api/handlers.go
@@ -143,8 +143,9 @@ func getPod(cache *resources.Cache) func(w http.ResponseWriter, r *http.Request)
 // @Produce  json
 // @Success 200
 // @Router /api/v1/resources/workloads/pods/logs [get]
-// @Param pod query string true "Pod name"
-// @Param namespace query string true "Namespace"
+// @Param pod query string true "pod"
+// @Param namespace query string true "namespace"
+// @Param container query string true "container"
 func getPodLogs(k8sSession *session.K8sSession) func(w http.ResponseWriter, r *http.Request) {
 	return func(w http.ResponseWriter, r *http.Request) {
 		logs.GetLogs(k8sSession.Clients.Clientset, w, r)

From 1c4a7d01890f258383031fc2d5f510b9cb2d705e Mon Sep 17 00:00:00 2001
From: unclegedd <gedd@defenseunicorns.com>
Date: Tue, 5 Nov 2024 15:00:07 -0600
Subject: [PATCH 23/45] cleans up frontend

---
 .../components/AnsiDisplay/component.svelte   | 152 ++----------------
 .../lib/components/k8s/Logs/component.svelte  | 130 ++++++---------
 ui/src/lib/components/k8s/Logs/logs.ts        | 134 +++++++++++++++
 ui/src/lib/components/k8s/Logs/store.ts       |  99 ++++++++++++
 4 files changed, 291 insertions(+), 224 deletions(-)
 create mode 100644 ui/src/lib/components/k8s/Logs/logs.ts
 create mode 100644 ui/src/lib/components/k8s/Logs/store.ts

diff --git a/ui/src/lib/components/AnsiDisplay/component.svelte b/ui/src/lib/components/AnsiDisplay/component.svelte
index 751a83f33..bd94bfb02 100644
--- a/ui/src/lib/components/AnsiDisplay/component.svelte
+++ b/ui/src/lib/components/AnsiDisplay/component.svelte
@@ -2,155 +2,29 @@
 <!-- SPDX-License-Identifier: AGPL-3.0-or-later OR LicenseRef-Defense-Unicorns-Commercial -->
 
 <script lang="ts">
-  import { onMount } from 'svelte'
+  import { autoScroll } from '$components/k8s/Logs/store'
 
-  import Convert from 'ansi-to-html'
-
-  const convert = new Convert({
-    newline: true,
-    stream: true,
-    escapeXML: true,
-    colors: {
-      0: '#374151',
-      1: '#F3F4F6',
-      2: '#D1D5DB',
-    },
-  })
-
-  // refs to rendered elements
-  let container: HTMLDivElement
-  let scrollAnchor: HTMLDivElement
-
-  let scrollTimeout: number
-
-  // Track log elements
-  let logElements: HTMLDivElement[] = []
-
-  // highlight when searching + match, and reset when search term is empty
-  export let searchTerm = ''
-  $: if (searchTerm) {
-    highlightMatches(searchTerm)
-  } else {
-    resetHighlights()
-  }
-
-  const resetHighlights = () => {
-    logElements.forEach((element) => {
-      // Remove all <mark> tags and restore their content
-      element.innerHTML = element.innerHTML.replace(/<mark class="[^"]*">(.*?)<\/mark>/g, '$1')
-    })
-  }
-
-  const highlightMatches = (term: string) => {
-    if (!term.trim()) return
-
-    // First remove any existing highlights
-    resetHighlights()
-
-    // Then add new highlights
-    logElements.forEach((element) => {
-      element.innerHTML = element.innerHTML.replace(
-        new RegExp(term, 'gi'), // global and case-insensitive
-        (match) => `<mark class="bg-yellow-500 text-gray-900 px-0.5 rounded">${match}</mark>`,
-      )
-    })
-  }
-
-  // Function to reset logs list in this component (called by parent)
-  export const resetLogs = () => {
-    logElements.forEach((el) => el.remove())
-    logElements = []
-  }
-
-  export let autoScroll = true
   let lastScrollTop = 0
 
-  // Debounce auto-scrolling, if many logs come in at once, this creates a smooth scroll UX
-  const debouncedScroll = () => {
-    if (!autoScroll) return
-
-    // if a new log arrives during the timeout, clear it and start over
-    // this prevents the scroll from jumping around
-    if (scrollTimeout) {
-      window.clearTimeout(scrollTimeout)
-    }
-    scrollTimeout = window.setTimeout(() => {
-      scrollAnchor?.scrollIntoView({ behavior: 'auto' })
-    }, 100)
-  }
-
-  // Handle manual scrolling
+  // handle user scrolling
   const handleScroll = (event: Event) => {
     const target = event.target as HTMLDivElement
     const isScrollingUp = target.scrollTop < lastScrollTop
     const isAtBottom = Math.abs(target.scrollHeight - target.clientHeight - target.scrollTop) < 50
 
-    // enable autoscroll if user is at the bottom, else disable it
-    autoScroll = !isScrollingUp && isAtBottom
-    lastScrollTop = target.scrollTop
-  }
-
-  // Watch autoScroll changes
-  $: if (autoScroll) {
-    debouncedScroll()
-  }
-
-  // used by parent component to add messages
-  export const addMessage = (message: string) => {
-    if (!message || !scrollAnchor?.parentElement) return
-
-    const html = convert.toHtml(message)
-    const lineElement = document.createElement('div')
-    lineElement.className = 'log-line text-gray-300 text-sm font-mono py-0.5'
-    lineElement.innerHTML = html
-
-    window.requestAnimationFrame(() => {
-      scrollAnchor.parentElement?.insertBefore(lineElement, scrollAnchor)
-      logElements.push(lineElement)
-      // Keep only last 1000 lines in memory to prevent memory leaks
-      if (logElements.length > 1000) {
-        logElements.shift()
-      }
-
-      if (searchTerm) {
-        highlightMatches(searchTerm)
-      }
-
-      debouncedScroll()
-    })
-  }
-
-  // Function to get last N lines of logs (called by parent)
-  export const getLastNLines = (n: number): string => {
-    const lastN = logElements.slice(-n)
-    return lastN
-      .map((el) => {
-        // Convert HTML back to plain text and remove ANSI codes
-        const text = el.textContent || ''
-        return text.replace(/\n$/, '') // Remove trailing newline if present
-      })
-      .join('\n')
-  }
+    // Only update autoScroll if we're either:
+    // 1. Scrolling up (turn off autoscroll)
+    // 2. At the bottom (turn on autoscroll)
+    if (isScrollingUp) {
+      autoScroll.set(false)
+    } else if (isAtBottom) {
+      autoScroll.set(true)
+    }
 
-  // Function to get all logs for downloading (called by parent)
-  export const getAllLogs = (): string => {
-    return logElements
-      .map((el) => {
-        const text = el.textContent || ''
-        return text.replace(/\n$/, '')
-      })
-      .join('\n')
+    lastScrollTop = target.scrollTop
   }
-
-  onMount(() => {
-    return () => {
-      if (scrollTimeout) {
-        window.clearTimeout(scrollTimeout)
-      }
-    }
-  })
 </script>
 
-<div bind:this={container} class="h-full overflow-y-auto" on:scroll={handleScroll}>
-  <div bind:this={scrollAnchor} class="scroll-anchor h-px" />
+<div class="h-full overflow-y-auto" on:scroll={handleScroll}>
+  <div id="scroll-anchor" class="h-px" />
 </div>
diff --git a/ui/src/lib/components/k8s/Logs/component.svelte b/ui/src/lib/components/k8s/Logs/component.svelte
index 6d64b63e1..f3e5713ed 100644
--- a/ui/src/lib/components/k8s/Logs/component.svelte
+++ b/ui/src/lib/components/k8s/Logs/component.svelte
@@ -3,20 +3,34 @@
 
 <script lang="ts">
   import { onDestroy, onMount } from 'svelte'
-  import { derived, writable } from 'svelte/store'
+  import { get } from 'svelte/store'
   import { fade } from 'svelte/transition'
 
   import { goto } from '$app/navigation'
   import { AnsiDisplay, Dropdown } from '$components'
+  import { addLog, getAllLogs, getLastNLines, resetLogs } from '$components/k8s/Logs/logs'
+  import {
+    autoScroll,
+    containerName,
+    filteredContainers,
+    filteredPods,
+    handleAutoscroll,
+    handleContainer,
+    handleNamespace,
+    handlePod,
+    handleSearch,
+    logEventSource,
+    namespaces,
+    podName,
+    pods,
+    scrollTimeout,
+    searchTerm,
+    selectedNamespace,
+  } from '$components/k8s/Logs/store'
   import type { Pod } from '$lib/types'
   import { CheckmarkOutline, Copy, Download, Search, Terminal } from 'carbon-icons-svelte'
 
-  // track auto scroll state
-  let autoScroll = true
-
-  // copy logs helpers
-  let getLastNLines: (n: number) => string
-  let resetLogs = () => {}
+  // manage notifications
   let showNotification = false
   let notificationTimeout: ReturnType<typeof setTimeout>
   let notificationMessage = ''
@@ -42,24 +56,16 @@
     }
   }
 
-  // clear copy notification timeout on destroy
-  onDestroy(() => {
-    if (notificationTimeout) {
-      clearTimeout(notificationTimeout)
-    }
-  })
-
-  // download logs helpers
-  let getAllLogs: () => string
-  const handleDownload = () => {
+  export const handleDownload = () => {
     try {
       const logs = getAllLogs()
       const blob = new Blob([logs], { type: 'text/plain' })
       const url = URL.createObjectURL(blob)
 
       const link = document.createElement('a')
+      const pod = get(podName)
       link.href = url
-      link.download = `logs-${$podName}-${new Date().toISOString().slice(0, 19).replace(/[:]/g, '-')}.txt`
+      link.download = `logs-${pod}-${new Date().toISOString().slice(0, 19).replace(/[:]/g, '-')}.txt`
 
       document.body.appendChild(link)
       link.click()
@@ -82,72 +88,24 @@
     }
   }
 
-  // used to add messages to the AnsiDisplay component
-  let addMessage: (message: string) => void
-
-  let logEventSource: EventSource
-  let searchTerm = ''
-
-  function cleanupLogs() {
-    if (logEventSource) {
-      logEventSource.close()
-      const logLines = document.querySelectorAll('.log-line')
-      logLines.forEach((line) => line.remove())
-      resetLogs() // clear logs in AnsiDisplay memory
-    }
-  }
-
-  // Create base stores
-  const pods = writable<Pod[]>([]) // raw pod data
-  const selectedNamespace = writable<string | null>(null)
-  const namespaces = writable<Set<string>>(new Set()) // derived from pods
-  const podName = writable<string | null>(null)
-  const selectedPod = writable<Pod | null>(null) // used to derive containers
-  const containerName = writable<string | null>(null)
-
-  // Derive filtered lists for dropdowns
-  const filteredPods = derived([selectedNamespace], () =>
-    $selectedNamespace ? Array.from($pods).filter((p) => p.metadata.namespace === $selectedNamespace) : [],
-  )
-  const filteredContainers = derived([selectedPod], () => $selectedPod?.spec.containers ?? [])
-
-  // Subscribe to dropdown changes
-  selectedNamespace.subscribe((newNamespace) => {
-    if (newNamespace) {
-      cleanupLogs()
-      podName.set(null)
-      selectedPod.set(null)
-      containerName.set(null)
+  // clear timeouts on destroy
+  onDestroy(() => {
+    if (notificationTimeout) {
+      clearTimeout(notificationTimeout)
     }
-    autoScroll = true
-  })
-  podName.subscribe((newPodName) => {
-    if (newPodName) {
-      cleanupLogs()
-      containerName.set(null)
-      const pod = $filteredPods.find((p) => p.metadata.name === newPodName)
-      selectedPod.set(pod ?? null)
+    const st = get(scrollTimeout)
+    if (st) {
+      clearTimeout(st)
+      scrollTimeout.set(null)
     }
-    autoScroll = true
   })
-  containerName.subscribe((newContainerName) => {
-    if (newContainerName) {
-      cleanupLogs()
 
-      // create new SSE stream
-      const logsURL = `/api/v1/resources/workloads/pods/logs?namespace=${$selectedNamespace}&pod=${$podName}&container=${newContainerName}`
-      logEventSource = new EventSource(logsURL)
-
-      logEventSource.onmessage = (event) => {
-        addMessage(event.data)
-      }
-
-      logEventSource.onerror = (event) => {
-        console.error('EventSource failed:', event)
-      }
-    }
-    autoScroll = true
-  })
+  // set up store handlers
+  handleNamespace(resetLogs)
+  handlePod(resetLogs)
+  handleContainer(addLog, resetLogs)
+  handleSearch()
+  handleAutoscroll()
 
   onMount(() => {
     // check url query params for name and namespace
@@ -197,8 +155,10 @@
 
     return () => {
       podEventSource.close()
-      if (logEventSource) {
-        logEventSource.close()
+      const logES = get(logEventSource)
+      if (logES) {
+        logES.close()
+        logEventSource.set(null)
       }
       window.removeEventListener('keydown', handleKeydown)
     }
@@ -228,14 +188,14 @@
             autocomplete="off"
             class="h-9 block w-full rounded-md border border-gray-600 bg-gray-700 p-2.5 pl-9 text-white placeholder-gray-400 focus:ring-primary-500 focus:border-primary-500 focus:ring-blue-500 text-sm"
             placeholder="Search"
-            bind:value={searchTerm}
+            bind:value={$searchTerm}
           />
         </div>
 
         <!-- Auto-scroll toggle -->
         <div class="flex items-center">
           <label class="relative inline-flex items-center cursor-pointer">
-            <input type="checkbox" bind:checked={autoScroll} class="sr-only peer" />
+            <input type="checkbox" bind:checked={$autoScroll} class="sr-only peer" />
             <div
               class="w-9 h-5 bg-gray-700 peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-blue-800 rounded-full peer peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-4 after:w-4 after:transition-all peer-checked:bg-blue-600"
             />
@@ -303,7 +263,7 @@
     <!-- Logs content area -->
     <div class="flex-1 m-1 min-h-12">
       <div class="h-full bg-gray-900 rounded-md overflow-y-auto p-1">
-        <AnsiDisplay bind:addMessage bind:autoScroll bind:getLastNLines bind:getAllLogs bind:resetLogs {searchTerm} />
+        <AnsiDisplay />
       </div>
     </div>
   </div>
diff --git a/ui/src/lib/components/k8s/Logs/logs.ts b/ui/src/lib/components/k8s/Logs/logs.ts
new file mode 100644
index 000000000..a4d0986e7
--- /dev/null
+++ b/ui/src/lib/components/k8s/Logs/logs.ts
@@ -0,0 +1,134 @@
+// Copyright 2024 Defense Unicorns
+// SPDX-License-Identifier: AGPL-3.0-or-later OR LicenseRef-Defense-Unicorns-Commercial
+
+import { get } from 'svelte/store'
+
+import { autoScroll, logElements, logEventSource, scrollTimeout, searchTerm } from '$components/k8s/Logs/store'
+import Convert from 'ansi-to-html'
+
+const convert = new Convert({
+  newline: true,
+  stream: true,
+  escapeXML: true,
+  colors: {
+    0: '#374151',
+    1: '#F3F4F6',
+    2: '#D1D5DB',
+  },
+})
+
+// empties logs store
+export const resetLogs = () => {
+  logElements.set([])
+}
+
+// removes highlights from logs and resets to plain text
+export const resetHighlights = () => {
+  const logEls = get(logElements)
+  logEls.forEach((element) => {
+    // Remove all <mark> tags and restore their content
+    element.innerHTML = element.innerHTML.replace(/<mark class="[^"]*">(.*?)<\/mark>/g, '$1')
+  })
+  logElements.set(logEls)
+}
+
+// removes log lines from DOM and resets logs store
+export const cleanupLogs = (resetLogs: () => void) => {
+  const logES = get(logEventSource)
+  if (logES) {
+    logES.close()
+    logEventSource.set(null)
+    const logLines = document.querySelectorAll('.log-line')
+    logLines.forEach((line) => line.remove())
+    resetLogs() // clear logs in AnsiDisplay memory
+  }
+  autoScroll.set(true)
+}
+
+// highlights search term matches in logs
+export const highlightMatches = (term: string) => {
+  if (!term.trim()) return
+
+  // First remove any existing highlights
+  resetHighlights()
+
+  // Then add new highlights
+  const logEls = get(logElements)
+  logEls.forEach((element) => {
+    element.innerHTML = element.innerHTML.replace(
+      new RegExp(term, 'gi'), // global and case-insensitive
+      (match) => `<mark class="bg-yellow-500 text-gray-900 px-0.5 rounded">${match}</mark>`,
+    )
+  })
+  logElements.set(logEls)
+}
+
+// used to add logs to the DOM
+export const addLog = (message: string) => {
+  const scrollAnchor = document.getElementById('scroll-anchor')
+  if (!message || !scrollAnchor?.parentElement) return
+
+  const html = convert.toHtml(message)
+  const lineElement = document.createElement('div')
+  lineElement.className = 'log-line text-gray-300 text-sm font-mono py-0.5'
+  lineElement.innerHTML = html
+
+  const logEls = get(logElements)
+  window.requestAnimationFrame(() => {
+    scrollAnchor.parentElement?.insertBefore(lineElement, scrollAnchor)
+    logEls.push(lineElement)
+    // Keep only last 1000 lines in memory to prevent memory leaks
+    if (logEls.length > 1000) {
+      logEls.shift()
+    }
+    logElements.set(logEls)
+
+    // get search term and highlight matches in new log
+    const search = get(searchTerm)
+    if (search) {
+      highlightMatches(search)
+    }
+
+    debounceScroll()
+  })
+}
+
+// Debounce auto-scrolling, if many logs come in at once, this creates a smooth scroll UX
+export const debounceScroll = () => {
+  if (!get(autoScroll)) return
+
+  // if a new log arrives during the timeout, clear it and start over
+  // this prevents the scroll from jumping around
+  let timeout = get(scrollTimeout)
+  if (timeout) {
+    window.clearTimeout(timeout)
+  }
+  timeout = window.setTimeout(() => {
+    const scrollAnchor = document.getElementById('scroll-anchor')
+    scrollAnchor?.scrollIntoView({ behavior: 'auto' })
+  }, 100)
+  scrollTimeout.set(timeout)
+}
+
+// Get last N lines of logs (used for getting logs in plaintext for copying)
+export const getLastNLines = (n: number): string => {
+  const logEls = get(logElements)
+  const lastN = logEls.slice(-n)
+  return lastN
+    .map((el) => {
+      // Convert HTML back to plain text and remove ANSI codes
+      const text = el.textContent || ''
+      return text.replace(/\n$/, '') // Remove trailing newline if present
+    })
+    .join('\n')
+}
+
+// Function to get all logs for downloading
+export const getAllLogs = (): string => {
+  return get(logElements)
+    .map((el) => {
+      const text = el.textContent || ''
+      return text.replace(/\n$/, '')
+    })
+    .join('\n')
+}
diff --git a/ui/src/lib/components/k8s/Logs/store.ts b/ui/src/lib/components/k8s/Logs/store.ts
new file mode 100644
index 000000000..aa0a73ab8
--- /dev/null
+++ b/ui/src/lib/components/k8s/Logs/store.ts
@@ -0,0 +1,99 @@
+// Copyright 2024 Defense Unicorns
+// SPDX-License-Identifier: AGPL-3.0-or-later OR LicenseRef-Defense-Unicorns-Commercial
+
+import { derived, get, writable } from 'svelte/store'
+
+import { cleanupLogs, debounceScroll, highlightMatches, resetHighlights } from '$components/k8s/Logs/logs'
+import type { Pod } from '$lib/types'
+
+// stores for pod data
+export const pods = writable<Pod[]>([]) // raw pod data
+export const selectedNamespace = writable<string | null>(null)
+export const namespaces = writable<Set<string>>(new Set()) // derived from pods
+export const podName = writable<string | null>(null)
+export const selectedPod = writable<Pod | null>(null) // used to derive containers
+export const containerName = writable<string | null>(null)
+
+// scroll and search stores
+export const autoScroll = writable(true)
+export const scrollTimeout = writable<number | null>(null) // used for smooth scroll debouncing
+export const searchTerm = writable('')
+
+// log store
+export const logElements = writable<HTMLDivElement[]>([])
+
+// Derive filtered lists for pod and container dropdowns
+export const filteredPods = derived([selectedNamespace, pods], ([$selectedNamespace, $pods]) =>
+  $selectedNamespace ? Array.from($pods).filter((p) => p.metadata.namespace === $selectedNamespace) : [],
+)
+export const filteredContainers = derived([selectedPod], ($selectedPod) => $selectedPod[0]?.spec.containers ?? [])
+
+// EventSource store for logs
+export const logEventSource = writable<EventSource | null>()
+
+// handle search term changes
+export function handleSearch() {
+  searchTerm.subscribe((term) => {
+    if (!term) {
+      resetHighlights()
+      return
+    }
+    highlightMatches(term)
+  })
+}
+
+// handle autoscroll button toggles
+export function handleAutoscroll() {
+  autoScroll.subscribe((scroll) => {
+    // scroll down when the button is toggled on
+    if (scroll) {
+      debounceScroll()
+    }
+  })
+}
+
+export function handleNamespace(resetLogs: () => void) {
+  selectedNamespace.subscribe((newNamespace) => {
+    if (newNamespace) {
+      cleanupLogs(resetLogs)
+      podName.set(null)
+      selectedPod.set(null)
+      containerName.set(null)
+    }
+  })
+}
+
+export function handlePod(resetLogs: () => void) {
+  podName.subscribe((newPodName) => {
+    if (newPodName) {
+      cleanupLogs(resetLogs)
+      containerName.set(null)
+      const pods = get(filteredPods)
+      const pod = pods.find((p) => p.metadata.name === newPodName)
+      selectedPod.set(pod ?? null)
+    }
+  })
+}
+
+export function handleContainer(addMessage: (message: string) => void, resetLogs: () => void) {
+  containerName.subscribe((newContainerName) => {
+    if (newContainerName) {
+      cleanupLogs(resetLogs)
+      const ns = get(selectedNamespace)
+      const pod = get(podName)
+
+      // create new SSE stream for logs
+      const logsURL = `/api/v1/resources/workloads/pods/logs?namespace=${ns}&pod=${pod}&container=${newContainerName}`
+      const es = new EventSource(logsURL)
+
+      es.onmessage = (event) => {
+        addMessage(event.data)
+      }
+
+      es.onerror = (event) => {
+        console.error('EventSource failed:', event)
+      }
+      logEventSource.set(es)
+    }
+  })
+}

From 4c9b26e1563b722324019507ce854525ae009a85 Mon Sep 17 00:00:00 2001
From: unclegedd <gedd@defenseunicorns.com>
Date: Tue, 5 Nov 2024 15:16:14 -0600
Subject: [PATCH 24/45] more frontend cleanup

---
 .../lib/components/k8s/Logs/component.svelte  |  8 ++++----
 ui/src/lib/components/k8s/Logs/logs.ts        | 11 +++--------
 ui/src/lib/components/k8s/Logs/store.ts       | 19 +++++++++++--------
 3 files changed, 18 insertions(+), 20 deletions(-)

diff --git a/ui/src/lib/components/k8s/Logs/component.svelte b/ui/src/lib/components/k8s/Logs/component.svelte
index f3e5713ed..18f1cb5c7 100644
--- a/ui/src/lib/components/k8s/Logs/component.svelte
+++ b/ui/src/lib/components/k8s/Logs/component.svelte
@@ -8,7 +8,7 @@
 
   import { goto } from '$app/navigation'
   import { AnsiDisplay, Dropdown } from '$components'
-  import { addLog, getAllLogs, getLastNLines, resetLogs } from '$components/k8s/Logs/logs'
+  import { addLog, getAllLogs, getLastNLines } from '$components/k8s/Logs/logs'
   import {
     autoScroll,
     containerName,
@@ -101,9 +101,9 @@
   })
 
   // set up store handlers
-  handleNamespace(resetLogs)
-  handlePod(resetLogs)
-  handleContainer(addLog, resetLogs)
+  handleNamespace()
+  handlePod()
+  handleContainer()
   handleSearch()
   handleAutoscroll()
 
diff --git a/ui/src/lib/components/k8s/Logs/logs.ts b/ui/src/lib/components/k8s/Logs/logs.ts
index a4d0986e7..467c1b574 100644
--- a/ui/src/lib/components/k8s/Logs/logs.ts
+++ b/ui/src/lib/components/k8s/Logs/logs.ts
@@ -17,11 +17,6 @@ const convert = new Convert({
   },
 })
 
-// empties logs store
-export const resetLogs = () => {
-  logElements.set([])
-}
-
 // removes highlights from logs and resets to plain text
 export const resetHighlights = () => {
   const logEls = get(logElements)
@@ -33,14 +28,14 @@ export const resetHighlights = () => {
 }
 
 // removes log lines from DOM and resets logs store
-export const cleanupLogs = (resetLogs: () => void) => {
+export const cleanupLogs = () => {
   const logES = get(logEventSource)
   if (logES) {
     logES.close()
     logEventSource.set(null)
     const logLines = document.querySelectorAll('.log-line')
     logLines.forEach((line) => line.remove())
-    resetLogs() // clear logs in AnsiDisplay memory
+    logElements.set([])
   }
   autoScroll.set(true)
 }
@@ -63,7 +58,7 @@ export const highlightMatches = (term: string) => {
   logElements.set(logEls)
 }
 
-// used to add logs to the DOM
+// adds logs to the DOM
 export const addLog = (message: string) => {
   const scrollAnchor = document.getElementById('scroll-anchor')
   if (!message || !scrollAnchor?.parentElement) return
diff --git a/ui/src/lib/components/k8s/Logs/store.ts b/ui/src/lib/components/k8s/Logs/store.ts
index aa0a73ab8..9878099bf 100644
--- a/ui/src/lib/components/k8s/Logs/store.ts
+++ b/ui/src/lib/components/k8s/Logs/store.ts
@@ -3,7 +3,7 @@
 
 import { derived, get, writable } from 'svelte/store'
 
-import { cleanupLogs, debounceScroll, highlightMatches, resetHighlights } from '$components/k8s/Logs/logs'
+import { addLog, cleanupLogs, debounceScroll, highlightMatches, resetHighlights } from '$components/k8s/Logs/logs'
 import type { Pod } from '$lib/types'
 
 // stores for pod data
@@ -52,10 +52,11 @@ export function handleAutoscroll() {
   })
 }
 
-export function handleNamespace(resetLogs: () => void) {
+// handle namespace updats
+export function handleNamespace() {
   selectedNamespace.subscribe((newNamespace) => {
     if (newNamespace) {
-      cleanupLogs(resetLogs)
+      cleanupLogs()
       podName.set(null)
       selectedPod.set(null)
       containerName.set(null)
@@ -63,10 +64,11 @@ export function handleNamespace(resetLogs: () => void) {
   })
 }
 
-export function handlePod(resetLogs: () => void) {
+// handle pod updates
+export function handlePod() {
   podName.subscribe((newPodName) => {
     if (newPodName) {
-      cleanupLogs(resetLogs)
+      cleanupLogs()
       containerName.set(null)
       const pods = get(filteredPods)
       const pod = pods.find((p) => p.metadata.name === newPodName)
@@ -75,10 +77,11 @@ export function handlePod(resetLogs: () => void) {
   })
 }
 
-export function handleContainer(addMessage: (message: string) => void, resetLogs: () => void) {
+// handle container updates, sets up logs SSE stream
+export function handleContainer() {
   containerName.subscribe((newContainerName) => {
     if (newContainerName) {
-      cleanupLogs(resetLogs)
+      cleanupLogs()
       const ns = get(selectedNamespace)
       const pod = get(podName)
 
@@ -87,7 +90,7 @@ export function handleContainer(addMessage: (message: string) => void, resetLogs
       const es = new EventSource(logsURL)
 
       es.onmessage = (event) => {
-        addMessage(event.data)
+        addLog(event.data)
       }
 
       es.onerror = (event) => {

From 8a551c7fcf146a577c6db6062d6827d36d2d2566 Mon Sep 17 00:00:00 2001
From: unclegedd <gedd@defenseunicorns.com>
Date: Tue, 5 Nov 2024 16:41:12 -0600
Subject: [PATCH 25/45] WIP: adding FE tests

---
 .../lib/components/k8s/Logs/component.svelte  |  15 ++-
 ui/tests/logs.spec.ts                         | 112 ++++++++++++++++++
 2 files changed, 123 insertions(+), 4 deletions(-)
 create mode 100644 ui/tests/logs.spec.ts

diff --git a/ui/src/lib/components/k8s/Logs/component.svelte b/ui/src/lib/components/k8s/Logs/component.svelte
index 18f1cb5c7..812e47515 100644
--- a/ui/src/lib/components/k8s/Logs/component.svelte
+++ b/ui/src/lib/components/k8s/Logs/component.svelte
@@ -8,7 +8,7 @@
 
   import { goto } from '$app/navigation'
   import { AnsiDisplay, Dropdown } from '$components'
-  import { addLog, getAllLogs, getLastNLines } from '$components/k8s/Logs/logs'
+  import { getAllLogs, getLastNLines } from '$components/k8s/Logs/logs'
   import {
     autoScroll,
     containerName,
@@ -185,6 +185,7 @@
           <input
             type="text"
             name="input-search"
+            data-testid="logs-search"
             autocomplete="off"
             class="h-9 block w-full rounded-md border border-gray-600 bg-gray-700 p-2.5 pl-9 text-white placeholder-gray-400 focus:ring-primary-500 focus:border-primary-500 focus:ring-blue-500 text-sm"
             placeholder="Search"
@@ -192,10 +193,10 @@
           />
         </div>
 
-        <!-- Auto-scroll toggle -->
+        <!-- Autoscroll toggle -->
         <div class="flex items-center">
           <label class="relative inline-flex items-center cursor-pointer">
-            <input type="checkbox" bind:checked={$autoScroll} class="sr-only peer" />
+            <input type="checkbox" bind:checked={$autoScroll} data-testid="autoscroll-btn" class="sr-only peer" />
             <div
               class="w-9 h-5 bg-gray-700 peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-blue-800 rounded-full peer peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-4 after:w-4 after:transition-all peer-checked:bg-blue-600"
             />
@@ -207,12 +208,17 @@
       <!-- Right section: Action buttons -->
       <div class="flex items-center space-x-2">
         <div class="relative">
-          <button class="p-1.5 text-gray-400 hover:text-gray-200 rounded-lg hover:bg-gray-800" on:click={handleCopy}>
+          <button
+            class="p-1.5 text-gray-400 hover:text-gray-200 rounded-lg hover:bg-gray-800"
+            data-testid="copy-logs-btn"
+            on:click={handleCopy}
+          >
             <Copy class="w-4 h-4" />
           </button>
           {#if showNotification}
             <div
               transition:fade={{ duration: 200 }}
+              data-testid="logs-notification"
               class="absolute left-1/2 -translate-x-1/2 top-full mt-2 z-50 flex items-center gap-2 px-3 py-2 text-sm text-white bg-gray-900 rounded-lg shadow-lg border border-gray-800 whitespace-nowrap"
             >
               <CheckmarkOutline class="w-4 h-4" />
@@ -223,6 +229,7 @@
         <div class="relative">
           <button
             class="p-1.5 text-gray-400 hover:text-gray-200 rounded-lg hover:bg-gray-800"
+            data-testid="download-logs-btn"
             on:click={handleDownload}
           >
             <Download class="w-4 h-4" />
diff --git a/ui/tests/logs.spec.ts b/ui/tests/logs.spec.ts
new file mode 100644
index 000000000..ee0030096
--- /dev/null
+++ b/ui/tests/logs.spec.ts
@@ -0,0 +1,112 @@
+// Copyright 2024 Defense Unicorns
+// SPDX-License-Identifier: AGPL-3.0-or-later OR LicenseRef-Defense-Unicorns-Commercial
+
+import { expect, test } from '@playwright/test'
+
+test.describe('Logs', async () => {
+  // open logs view and load logs
+  test.beforeEach(async ({ page }) => {
+    await page.goto('/workloads/pods')
+
+    // click on pod row
+    await page.getByRole('cell', { name: 'podinfo-' }).first().click()
+
+    // click on logs button
+    const logsButton = page.getByText('View Logs')
+    await expect(logsButton).toBeVisible()
+    await logsButton.click()
+
+    // select podinfo container
+    await page.locator('#container-dropdown').click()
+    await page.locator('text=podinfo').last().click()
+
+    // wait for logs to load
+    await page.waitForSelector('.log-line')
+  })
+
+  test('changing namespace, pod, and container to update logs', async ({ page }) => {
+    // assert logs are visible
+    let logLines = await page.locator('.log-line').count()
+    expect(logLines).toBeGreaterThan(0)
+
+    // click on namespace dropdown
+    await page.locator('#ns-dropdown').click()
+    await page.locator('text=kube-system').last().click()
+
+    await page.waitForTimeout(200)
+
+    // wait for logs to load
+    logLines = await page.locator('.log-line').count()
+    expect(logLines).toBe(0)
+
+    // select a new pod
+    await page.locator('#pod-dropdown').click()
+    await page.locator('text=coredns').last().click()
+    logLines = await page.locator('.log-line').count()
+    expect(logLines).toBe(0)
+
+    // select a new container and wait for new logs to load
+    await page.locator('#container-dropdown').click()
+    await page.locator('text=coredns').last().click()
+    await page.waitForTimeout(200)
+    logLines = await page.locator('.log-line').count()
+    expect(logLines).toBeGreaterThan(0)
+
+    // select another pod from the same namespace
+    await page.locator('#pod-dropdown').click()
+    await page.locator('text=metrics-server').last().click()
+    logLines = await page.locator('.log-line').count()
+    expect(logLines).toBe(0)
+
+    // select container and wait for new logs to load
+    await page.locator('#container-dropdown').click()
+    await page.locator('text=metrics-server').last().click()
+    await page.waitForTimeout(200)
+    logLines = await page.locator('.log-line').count()
+    expect(logLines).toBeGreaterThan(0)
+  })
+
+  test('highlighted search term matches log and resets when empty', async ({ page }) => {
+    const searchTerm = 'Starting HTTP Server'
+    await page.getByTestId('logs-search').fill(searchTerm)
+
+    await page.waitForSelector('.log-line')
+    const logLines = page.getByText(searchTerm)
+    await expect(logLines).toBeVisible()
+
+    // expect a mark tag on the log line that we searched for
+    const highlighted = page.locator('div.log-line mark').first()
+    expect(await highlighted.textContent()).toBe(searchTerm)
+
+    // reset search term and assert that the mark tag is gone
+    await page.getByTestId('logs-search').fill('')
+    await page.waitForSelector('.log-line')
+    const numHighlights = page.locator('div.log-line mark').count()
+    expect(await numHighlights).toBe(0)
+  })
+
+  test('copy logs to clipboard', async ({ page, context }) => {
+    await context.grantPermissions(['clipboard-read', 'clipboard-write']) // need this to copy to clipboard
+    const copyButton = page.getByTestId('copy-logs-btn')
+    await expect(copyButton).toBeVisible()
+    await copyButton.click()
+
+    const copied = await page.getByTestId('logs-notification')
+    await expect(copied).toHaveText('Copied!')
+  })
+
+  test('download logs', async ({ page }) => {
+    const downloadButton = page.getByTestId('download-logs-btn')
+    await expect(downloadButton).toBeVisible()
+    await downloadButton.click()
+
+    const copied = await page.getByTestId('logs-notification')
+    await expect(copied).toHaveText('Downloading')
+  })
+
+  test('auto scroll behavior', async ({ page }) => {
+    // check that button is enabled
+    await expect(page.getByTestId('autoscroll-btn')).toBeChecked()
+    // todo: start here, and finish test
+  })
+})

From 0cf5112d0f3f78ea3c0cbeedfa70a8291ba67ae2 Mon Sep 17 00:00:00 2001
From: unclegedd <gedd@defenseunicorns.com>
Date: Tue, 5 Nov 2024 18:09:05 -0600
Subject: [PATCH 26/45] adds FE e2e tests

---
 ui/package.json                               |  2 +-
 .../components/AnsiDisplay/component.svelte   |  2 +-
 .../lib/components/k8s/Logs/component.svelte  |  4 +-
 ui/tests/logs.spec.ts                         | 77 +++++++++++++++++--
 4 files changed, 73 insertions(+), 12 deletions(-)

diff --git a/ui/package.json b/ui/package.json
index 7a1e19776..c1e50a750 100644
--- a/ui/package.json
+++ b/ui/package.json
@@ -14,7 +14,7 @@
     "format": "prettier --write .",
     "test:local-auth": "TEST_CFG=localAuth playwright test",
     "test:reconnect": "TEST_CFG=reconnect playwright test",
-    "test:e2e": "TEST_CFG=default playwright test",
+    "test:e2e": "TEST_CFG=default playwright test --ui",
     "test:e2e-in-cluster": "TEST_CFG=inCluster playwright test",
     "test:install": "playwright install",
     "test:unit": "vitest run"
diff --git a/ui/src/lib/components/AnsiDisplay/component.svelte b/ui/src/lib/components/AnsiDisplay/component.svelte
index bd94bfb02..6c5b2fa1c 100644
--- a/ui/src/lib/components/AnsiDisplay/component.svelte
+++ b/ui/src/lib/components/AnsiDisplay/component.svelte
@@ -25,6 +25,6 @@
   }
 </script>
 
-<div class="h-full overflow-y-auto" on:scroll={handleScroll}>
+<div class="h-full overflow-y-auto" data-testid="ansi-display" on:scroll={handleScroll}>
   <div id="scroll-anchor" class="h-px" />
 </div>
diff --git a/ui/src/lib/components/k8s/Logs/component.svelte b/ui/src/lib/components/k8s/Logs/component.svelte
index 812e47515..cd4b7c04a 100644
--- a/ui/src/lib/components/k8s/Logs/component.svelte
+++ b/ui/src/lib/components/k8s/Logs/component.svelte
@@ -165,7 +165,7 @@
   })
 </script>
 
-<section class="h-[35%] flex-shrink-0 mt-6">
+<section class="h-[35%] flex-shrink-0 mt-6" data-testid="logs-view">
   <div class="flex h-full w-full flex-col bg-gray-800 rounded-lg overflow-y-auto">
     <!-- Header -->
     <div class="flex items-center justify-between py-2 border-b border-gray-700 mx-4">
@@ -269,7 +269,7 @@
     </div>
     <!-- Logs content area -->
     <div class="flex-1 m-1 min-h-12">
-      <div class="h-full bg-gray-900 rounded-md overflow-y-auto p-1">
+      <div class="h-full bg-gray-900 rounded-md p-1">
         <AnsiDisplay />
       </div>
     </div>
diff --git a/ui/tests/logs.spec.ts b/ui/tests/logs.spec.ts
index ee0030096..1bd8a6f33 100644
--- a/ui/tests/logs.spec.ts
+++ b/ui/tests/logs.spec.ts
@@ -1,6 +1,8 @@
 // Copyright 2024 Defense Unicorns
 // SPDX-License-Identifier: AGPL-3.0-or-later OR LicenseRef-Defense-Unicorns-Commercial
 
+import fs from 'node:fs'
+
 import { expect, test } from '@playwright/test'
 
 test.describe('Logs', async () => {
@@ -91,22 +93,81 @@ test.describe('Logs', async () => {
     await expect(copyButton).toBeVisible()
     await copyButton.click()
 
-    const copied = await page.getByTestId('logs-notification')
-    await expect(copied).toHaveText('Copied!')
+    const notification = await page.getByTestId('logs-notification')
+    await expect(notification).toHaveText('Copied!')
+
+    // assert on clipboard contents
+    const clipboardText = await page.evaluate(() => navigator.clipboard.readText())
+    expect(clipboardText).toContain('Starting HTTP Server')
   })
 
   test('download logs', async ({ page }) => {
     const downloadButton = page.getByTestId('download-logs-btn')
     await expect(downloadButton).toBeVisible()
-    await downloadButton.click()
-
-    const copied = await page.getByTestId('logs-notification')
-    await expect(copied).toHaveText('Downloading')
+    const [download] = await Promise.all([page.waitForEvent('download'), downloadButton.click()])
+
+    const notification = await page.getByTestId('logs-notification')
+    await expect(notification).toHaveText('Downloading')
+
+    // assert on downloaded file contents
+    const path = await download.path()
+    await download.saveAs(path)
+    fs.readFile(path, 'utf8', (err, data) => {
+      if (err) {
+        console.error('Error reading the file:', err)
+        return
+      }
+      // assert on file contents
+      expect(data).toContain('Starting HTTP Server')
+    })
   })
 
   test('auto scroll behavior', async ({ page }) => {
-    // check that button is enabled
+    // check that button is enabled by default
     await expect(page.getByTestId('autoscroll-btn')).toBeChecked()
-    // todo: start here, and finish test
+
+    // load coredns pod logs because they are large and we can test scrolling
+    await page.locator('#ns-dropdown').click()
+    await page.locator('text=kube-system').last().click()
+    await page.waitForTimeout(200)
+    await page.locator('#pod-dropdown').click()
+    await page.locator('text=coredns').last().click()
+    await page.locator('#container-dropdown').click()
+    await page.locator('text=coredns').last().click()
+    await page.waitForTimeout(200)
+    expect(await page.locator('.log-line').count()).toBeGreaterThan(0)
+
+    // scroll up a bit to disable autoscroll
+    await page.locator('.log-line').first().scrollIntoViewIfNeeded()
+    await expect(page.getByTestId('autoscroll-btn')).not.toBeChecked()
+
+    // click autoscroll button to enable it
+    await page.getByTestId('autoscroll-btn').click({ force: true })
+
+    // ensure we autoscrolled down the bottom of the logs view
+    await page.waitForTimeout(200)
+    const ansiDisplay = page.getByTestId('ansi-display')
+
+    const scrolledToBottom = await ansiDisplay.evaluate((el) => {
+      // scrollTop + clientHeight equals scrollHeight when at bottom
+      // Using small threshold for floating point precision
+      return Math.abs(el.scrollHeight - el.scrollTop - el.clientHeight) < 1
+    })
+
+    expect(scrolledToBottom).toBe(true)
+
+    // scroll up again to disable autoscroll
+    await page.locator('.log-line').first().scrollIntoViewIfNeeded()
+    await expect(page.getByTestId('autoscroll-btn')).not.toBeChecked()
+
+    // manually scroll down and to automatically re-enable autoscroll
+    await page.locator('.log-line').last().scrollIntoViewIfNeeded()
+    await expect(page.getByTestId('autoscroll-btn')).toBeChecked()
+  })
+
+  test('escape key closes logs view', async ({ page }) => {
+    await expect(page.getByTestId('logs-view')).toBeVisible()
+    await page.keyboard.press('Escape')
+    await expect(page.getByTestId('logs-view')).not.toBeVisible()
   })
 })

From 9cc5b808fd7770d753ddc790a5cfc5bf07f986b7 Mon Sep 17 00:00:00 2001
From: unclegedd <gedd@defenseunicorns.com>
Date: Tue, 5 Nov 2024 19:27:52 -0600
Subject: [PATCH 27/45] fix unit tests

---
 ui/package.json            |  2 +-
 ui/src/routes/auth.test.ts | 10 ----------
 2 files changed, 1 insertion(+), 11 deletions(-)

diff --git a/ui/package.json b/ui/package.json
index c1e50a750..7a1e19776 100644
--- a/ui/package.json
+++ b/ui/package.json
@@ -14,7 +14,7 @@
     "format": "prettier --write .",
     "test:local-auth": "TEST_CFG=localAuth playwright test",
     "test:reconnect": "TEST_CFG=reconnect playwright test",
-    "test:e2e": "TEST_CFG=default playwright test --ui",
+    "test:e2e": "TEST_CFG=default playwright test",
     "test:e2e-in-cluster": "TEST_CFG=inCluster playwright test",
     "test:install": "playwright install",
     "test:unit": "vitest run"
diff --git a/ui/src/routes/auth.test.ts b/ui/src/routes/auth.test.ts
index bc8f740a7..53e4bcf12 100644
--- a/ui/src/routes/auth.test.ts
+++ b/ui/src/routes/auth.test.ts
@@ -12,11 +12,6 @@ vi.mock('$features/k8s/namespaces/store', () => ({
     start: vi.fn(),
   })),
 }))
-vi.mock('$features/k8s/workloads/pods/store', () => ({
-  createStore: vi.fn(() => ({
-    start: vi.fn(),
-  })),
-}))
 vi.mock('$features/auth/store', () => ({
   authenticated: {
     set: vi.fn(),
@@ -81,7 +76,6 @@ describe('load function', () => {
     // Verify return value
     expect(result).toEqual({
       namespaces: expect.any(Object),
-      pods: expect.any(Object),
       userData: {
         name: '',
         preferredUsername: '',
@@ -122,7 +116,6 @@ describe('load function', () => {
     // Verify return value
     expect(result).toEqual({
       namespaces: expect.any(Object),
-      pods: expect.any(Object),
       userData: {
         name: 'Doug Unicorn',
         preferredUsername: 'doug@defenseunicorns.com',
@@ -148,7 +141,6 @@ describe('load function', () => {
     // Verify return value
     expect(result).toEqual({
       namespaces: expect.any(Object),
-      pods: expect.any(Object),
       userData: {
         name: '',
         preferredUsername: '',
@@ -176,7 +168,6 @@ describe('load function', () => {
     // Verify return value
     expect(result).toEqual({
       namespaces: expect.any(Object),
-      pods: expect.any(Object),
       userData: {
         name: '',
         preferredUsername: '',
@@ -202,7 +193,6 @@ describe('load function', () => {
     // Verify return value
     expect(result).toEqual({
       namespaces: expect.any(Object),
-      pods: expect.any(Object),
       userData: {
         name: '',
         preferredUsername: '',

From 761fb5eeddc4f9761dd30e7654a6295ac4946bab Mon Sep 17 00:00:00 2001
From: unclegedd <gedd@defenseunicorns.com>
Date: Tue, 5 Nov 2024 21:38:49 -0600
Subject: [PATCH 28/45] fix autoscroll bug when changing containers

---
 .../components/AnsiDisplay/component.svelte   | 30 ++++++++++++++-----
 .../lib/components/k8s/Logs/component.svelte  |  2 +-
 2 files changed, 24 insertions(+), 8 deletions(-)

diff --git a/ui/src/lib/components/AnsiDisplay/component.svelte b/ui/src/lib/components/AnsiDisplay/component.svelte
index 6c5b2fa1c..7424459ea 100644
--- a/ui/src/lib/components/AnsiDisplay/component.svelte
+++ b/ui/src/lib/components/AnsiDisplay/component.svelte
@@ -5,6 +5,17 @@
   import { autoScroll } from '$components/k8s/Logs/store'
 
   let lastScrollTop = 0
+  let lastScrollHeight = 0
+
+  export let containerName: string
+
+  // reset tracking whenever container name changes
+  $: {
+    if (containerName) {
+      lastScrollTop = 0
+      lastScrollHeight = 0
+    }
+  }
 
   // handle user scrolling
   const handleScroll = (event: Event) => {
@@ -12,16 +23,21 @@
     const isScrollingUp = target.scrollTop < lastScrollTop
     const isAtBottom = Math.abs(target.scrollHeight - target.clientHeight - target.scrollTop) < 50
 
-    // Only update autoScroll if we're either:
-    // 1. Scrolling up (turn off autoscroll)
-    // 2. At the bottom (turn on autoscroll)
-    if (isScrollingUp) {
-      autoScroll.set(false)
-    } else if (isAtBottom) {
-      autoScroll.set(true)
+    // Detect if this scroll event was caused by content overflow
+    const isOverflowScroll = target.scrollHeight > lastScrollHeight
+
+    if (!isOverflowScroll) {
+      // Only handle manual scroll events
+      if (isScrollingUp) {
+        autoScroll.set(false)
+      } else if (isAtBottom) {
+        autoScroll.set(true)
+      }
     }
 
+    // Update our tracking variables
     lastScrollTop = target.scrollTop
+    lastScrollHeight = target.scrollHeight
   }
 </script>
 
diff --git a/ui/src/lib/components/k8s/Logs/component.svelte b/ui/src/lib/components/k8s/Logs/component.svelte
index cd4b7c04a..871df1f76 100644
--- a/ui/src/lib/components/k8s/Logs/component.svelte
+++ b/ui/src/lib/components/k8s/Logs/component.svelte
@@ -270,7 +270,7 @@
     <!-- Logs content area -->
     <div class="flex-1 m-1 min-h-12">
       <div class="h-full bg-gray-900 rounded-md p-1">
-        <AnsiDisplay />
+        <AnsiDisplay containerName={$containerName ?? ''} />
       </div>
     </div>
   </div>

From 136720ca841e4babf2546a266b4d84e5abb55288 Mon Sep 17 00:00:00 2001
From: unclegedd <gedd@defenseunicorns.com>
Date: Tue, 5 Nov 2024 21:48:49 -0600
Subject: [PATCH 29/45] deploy metrics-server in e2e-in-cluster test

---
 tasks/test.yaml | 7 +++++++
 1 file changed, 7 insertions(+)

diff --git a/tasks/test.yaml b/tasks/test.yaml
index f2384a9c1..0b6d2e19a 100644
--- a/tasks/test.yaml
+++ b/tasks/test.yaml
@@ -101,16 +101,23 @@ tasks:
   - name: e2e-in-cluster
     description: "run end-to-end tests against runtime in the cluster"
     actions:
+      - task: setup:clone-core
       - task: build:ui
       - cmd: npm run test:install # install playwright
         dir: ui
       - cmd: uds deploy k3d-core-slim-dev:latest --confirm
+      - task: deploy-metrics-server
       - task: deploy-podinfo
       - task: create-test-keycloak-user
       - task: install-runtime-in-cluster
       - cmd: npm run test:e2e-in-cluster
         dir: ui
 
+  - name: deploy-metrics-server
+    description: "deploy metrics server to the cluster"
+    actions:
+      - cmd: uds zarf package deploy oci://ghcr.io/defenseunicorns/packages/uds/core-metrics-server:0.30.0-upstream --confirm
+
   - name: go-unit
     description: "run api server unit tests"
     actions:

From 5c1726f2e89a06352ae787b2aac305884a19f361 Mon Sep 17 00:00:00 2001
From: unclegedd <gedd@defenseunicorns.com>
Date: Wed, 6 Nov 2024 08:16:19 -0600
Subject: [PATCH 30/45] ensure we use latest client and update e2e test

---
 src/pkg/api/start.go  |  9 ++++++++-
 ui/tests/logs.spec.ts | 14 +++++++-------
 2 files changed, 15 insertions(+), 8 deletions(-)

diff --git a/src/pkg/api/start.go b/src/pkg/api/start.go
index 353daf9a7..509a6bca8 100644
--- a/src/pkg/api/start.go
+++ b/src/pkg/api/start.go
@@ -89,7 +89,7 @@ func Setup(assets *embed.FS) (*chi.Mux, bool, error) {
 			r.Route("/workloads", func(r chi.Router) {
 				r.Get("/pods", withLatestCache(k8sSession, getPods))
 				r.Get("/pods/{uid}", withLatestCache(k8sSession, getPod))
-				r.Get("/pods/logs", getPodLogs(k8sSession))
+				r.Get("/pods/logs", withLatestClient(k8sSession, getPodLogs))
 
 				r.Get("/deployments", withLatestCache(k8sSession, getDeployments))
 				r.Get("/deployments/{uid}", withLatestCache(k8sSession, getDeployment))
@@ -308,3 +308,10 @@ func withLatestCache(k8sSession *session.K8sSession, handler func(cache *resourc
 		handler(k8sSession.Cache)(w, r)
 	}
 }
+
+// withLatestClient returns a wrapper lambda function, creating a closure that can dynamically access the latest client
+func withLatestClient(k8sSession *session.K8sSession, handler func(k8sSession *session.K8sSession) func(w http.ResponseWriter, r *http.Request)) http.HandlerFunc {
+	return func(w http.ResponseWriter, r *http.Request) {
+		handler(k8sSession)(w, r)
+	}
+}
diff --git a/ui/tests/logs.spec.ts b/ui/tests/logs.spec.ts
index 1bd8a6f33..b65b477de 100644
--- a/ui/tests/logs.spec.ts
+++ b/ui/tests/logs.spec.ts
@@ -33,7 +33,7 @@ test.describe('Logs', async () => {
 
     // click on namespace dropdown
     await page.locator('#ns-dropdown').click()
-    await page.locator('text=kube-system').last().click()
+    await page.locator('text=pepr-system').last().click()
 
     await page.waitForTimeout(200)
 
@@ -43,27 +43,27 @@ test.describe('Logs', async () => {
 
     // select a new pod
     await page.locator('#pod-dropdown').click()
-    await page.locator('text=coredns').last().click()
+    await page.locator('text=pepr-uds-core-').last().click()
     logLines = await page.locator('.log-line').count()
     expect(logLines).toBe(0)
 
     // select a new container and wait for new logs to load
     await page.locator('#container-dropdown').click()
-    await page.locator('text=coredns').last().click()
-    await page.waitForTimeout(200)
+    await page.locator('text=server').last().click()
+    await page.waitForTimeout(500)
     logLines = await page.locator('.log-line').count()
     expect(logLines).toBeGreaterThan(0)
 
     // select another pod from the same namespace
     await page.locator('#pod-dropdown').click()
-    await page.locator('text=metrics-server').last().click()
+    await page.locator('text=pepr-uds-core-watcher-').last().click()
     logLines = await page.locator('.log-line').count()
     expect(logLines).toBe(0)
 
     // select container and wait for new logs to load
     await page.locator('#container-dropdown').click()
-    await page.locator('text=metrics-server').last().click()
-    await page.waitForTimeout(200)
+    await page.locator('text=watcher').last().click()
+    await page.waitForTimeout(500)
     logLines = await page.locator('.log-line').count()
     expect(logLines).toBeGreaterThan(0)
   })

From e6287a3783eda91928a3783445150a2167ada2a3 Mon Sep 17 00:00:00 2001
From: UncleGedd <42304551+UncleGedd@users.noreply.github.com>
Date: Wed, 6 Nov 2024 08:27:03 -0600
Subject: [PATCH 31/45] Update src/pkg/api/logs/logs.go

Co-authored-by: Clint <catsby@users.noreply.github.com>
---
 src/pkg/api/logs/logs.go | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/pkg/api/logs/logs.go b/src/pkg/api/logs/logs.go
index 95d4fa901..16b94e4fa 100644
--- a/src/pkg/api/logs/logs.go
+++ b/src/pkg/api/logs/logs.go
@@ -69,7 +69,7 @@ func handleLogStream(ctx context.Context, logStream io.ReadCloser, w http.Respon
 			line, err := reader.ReadBytes('\n')
 			if err != nil {
 				if err != io.EOF && !errors.Is(err, context.Canceled) {
-					buffer.WriteString(fmt.Sprintf("ERROR: %v\n", err))
+					fmt.Fprintf(buffer, "ERROR: %v\n", err)
 				}
 				close(shouldFlush)
 				return

From da154c4fbbe4fef36387f95cb52ec045113a56c4 Mon Sep 17 00:00:00 2001
From: unclegedd <gedd@defenseunicorns.com>
Date: Wed, 6 Nov 2024 08:39:01 -0600
Subject: [PATCH 32/45] minor edits

---
 src/pkg/api/logs/logs.go | 2 +-
 ui/playwright.config.ts  | 4 ++--
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/pkg/api/logs/logs.go b/src/pkg/api/logs/logs.go
index 16b94e4fa..267c36c67 100644
--- a/src/pkg/api/logs/logs.go
+++ b/src/pkg/api/logs/logs.go
@@ -68,7 +68,7 @@ func handleLogStream(ctx context.Context, logStream io.ReadCloser, w http.Respon
 		for {
 			line, err := reader.ReadBytes('\n')
 			if err != nil {
-				if err != io.EOF && !errors.Is(err, context.Canceled) {
+				if err != io.EOF {
 					fmt.Fprintf(buffer, "ERROR: %v\n", err)
 				}
 				close(shouldFlush)
diff --git a/ui/playwright.config.ts b/ui/playwright.config.ts
index 0fbab79b5..9eea23fcd 100644
--- a/ui/playwright.config.ts
+++ b/ui/playwright.config.ts
@@ -27,7 +27,7 @@ const defaultConfig: PlaywrightTestConfig = {
   testDir: 'tests',
   /* Run tests in files in parallel */
   fullyParallel: true,
-  retries: process.env.CI ? 2 : 1,
+  retries: process.env.CI ? 3 : 1,
   testMatch: /^(?!.*local-auth|.*reconnect|.*in-cluster)(.+\.)?(test|spec)\.[jt]s$/,
   use: {
     baseURL: `${protocol}://${host}:${port}/`,
@@ -74,7 +74,7 @@ const inCluster: PlaywrightTestConfig = {
   testDir: 'tests',
   /* Run tests in files in parallel */
   fullyParallel: true,
-  retries: process.env.CI ? 2 : 1,
+  retries: process.env.CI ? 3 : 1,
   testMatch: /^(?!.*local-auth|.*reconnect)(.+\.)?(test|spec)\.[jt]s$/,
   use: {
     baseURL: `${protocol}://runtime.admin.uds.dev/`,

From 8eabe03930f0a42cfb2728c8946a2c7fd8e3a9a8 Mon Sep 17 00:00:00 2001
From: unclegedd <gedd@defenseunicorns.com>
Date: Wed, 6 Nov 2024 09:35:32 -0600
Subject: [PATCH 33/45] refactor Go code to remove race condition and ensure
 cleanup

---
 src/pkg/api/logs/logs.go | 48 +++++++++++++++++++++++++++++++---------
 1 file changed, 38 insertions(+), 10 deletions(-)

diff --git a/src/pkg/api/logs/logs.go b/src/pkg/api/logs/logs.go
index 267c36c67..ff827fd6d 100644
--- a/src/pkg/api/logs/logs.go
+++ b/src/pkg/api/logs/logs.go
@@ -58,42 +58,70 @@ func streamExistingLogs(ctx context.Context, clientSet kubernetes.Interface, w h
 func handleLogStream(ctx context.Context, logStream io.ReadCloser, w http.ResponseWriter) error {
 	defer logStream.Close()
 
-	buffer := &strings.Builder{}
-	shouldFlush := make(chan struct{}, 1)
+	lines := make(chan []byte, 100) // Buffer some lines to reduce blocking
 	reader := bufio.NewReader(logStream)
 	flusher := w.(http.Flusher)
 
+	// Start log reading goroutine
+	writerCtx, cancelWriter := context.WithCancel(ctx)
+	defer cancelWriter()
 	// Start log reading goroutine
 	go func() {
+		defer func() {
+			close(lines)
+			slog.Debug("Writer goroutine and channel closed")
+		}()
+
 		for {
+			select {
+			case <-writerCtx.Done():
+				return
+			default:
+			}
+
 			line, err := reader.ReadBytes('\n')
 			if err != nil {
-				if err != io.EOF {
-					fmt.Fprintf(buffer, "ERROR: %v\n", err)
+				if err == io.EOF || errors.Is(err, context.Canceled) {
+					// no error, just end of stream
+					return
 				}
-				close(shouldFlush)
+				slog.Debug("Writer returned error", "error", err)
 				return
 			}
 
-			buffer.Write(line)
-
+			// Send line to channel or exit if context is cancelled
 			select {
-			case shouldFlush <- struct{}{}:
-			default:
+			case lines <- line:
+			case <-writerCtx.Done():
+				slog.Debug("Writer context cancelled while sending line")
+				return
 			}
 		}
 	}()
 
 	// Main flush loop
+	buffer := &strings.Builder{}
+	ticker := time.NewTicker(500 * time.Millisecond) // Batch flushes
+	defer ticker.Stop()
+
 	for {
 		select {
 		case <-ctx.Done():
 			slog.Debug("Log stream closed")
+			cancelWriter()
 			return nil
-		case _, ok := <-shouldFlush:
+		case line, ok := <-lines:
 			if !ok {
+				// Flush any remaining content
+				if buffer.Len() > 0 {
+					fmt.Fprintf(w, "data: %s\n\n", buffer.String())
+					flusher.Flush()
+				}
+				cancelWriter()
 				return nil
 			}
+			buffer.Write(line)
+		case <-ticker.C:
 			if buffer.Len() > 0 {
 				fmt.Fprintf(w, "data: %s\n\n", buffer.String())
 				buffer.Reset()

From b7c486c4920bc93cd8505697bfe1c47386d00e60 Mon Sep 17 00:00:00 2001
From: unclegedd <gedd@defenseunicorns.com>
Date: Wed, 6 Nov 2024 10:43:17 -0600
Subject: [PATCH 34/45] remove goroutine

---
 src/pkg/api/logs/logs.go | 73 +++++++++++-----------------------------
 1 file changed, 20 insertions(+), 53 deletions(-)

diff --git a/src/pkg/api/logs/logs.go b/src/pkg/api/logs/logs.go
index ff827fd6d..8ad1dd687 100644
--- a/src/pkg/api/logs/logs.go
+++ b/src/pkg/api/logs/logs.go
@@ -57,76 +57,43 @@ func streamExistingLogs(ctx context.Context, clientSet kubernetes.Interface, w h
 // handleLogStream manages the continuous streaming of new logs
 func handleLogStream(ctx context.Context, logStream io.ReadCloser, w http.ResponseWriter) error {
 	defer logStream.Close()
+	defer slog.Debug("handleLogStream finished")
 
-	lines := make(chan []byte, 100) // Buffer some lines to reduce blocking
 	reader := bufio.NewReader(logStream)
 	flusher := w.(http.Flusher)
-
-	// Start log reading goroutine
-	writerCtx, cancelWriter := context.WithCancel(ctx)
-	defer cancelWriter()
-	// Start log reading goroutine
-	go func() {
-		defer func() {
-			close(lines)
-			slog.Debug("Writer goroutine and channel closed")
-		}()
-
-		for {
-			select {
-			case <-writerCtx.Done():
-				return
-			default:
-			}
-
-			line, err := reader.ReadBytes('\n')
-			if err != nil {
-				if err == io.EOF || errors.Is(err, context.Canceled) {
-					// no error, just end of stream
-					return
-				}
-				slog.Debug("Writer returned error", "error", err)
-				return
-			}
-
-			// Send line to channel or exit if context is cancelled
-			select {
-			case lines <- line:
-			case <-writerCtx.Done():
-				slog.Debug("Writer context cancelled while sending line")
-				return
-			}
-		}
-	}()
-
-	// Main flush loop
 	buffer := &strings.Builder{}
-	ticker := time.NewTicker(500 * time.Millisecond) // Batch flushes
+	ticker := time.NewTicker(500 * time.Millisecond)
 	defer ticker.Stop()
 
 	for {
 		select {
 		case <-ctx.Done():
 			slog.Debug("Log stream closed")
-			cancelWriter()
 			return nil
-		case line, ok := <-lines:
-			if !ok {
-				// Flush any remaining content
-				if buffer.Len() > 0 {
-					fmt.Fprintf(w, "data: %s\n\n", buffer.String())
-					flusher.Flush()
-				}
-				cancelWriter()
-				return nil
-			}
-			buffer.Write(line)
+
 		case <-ticker.C:
 			if buffer.Len() > 0 {
 				fmt.Fprintf(w, "data: %s\n\n", buffer.String())
 				buffer.Reset()
 				flusher.Flush()
 			}
+
+		default:
+			// Try to read a line
+			line, err := reader.ReadBytes('\n')
+			if err != nil {
+				if err == io.EOF || errors.Is(err, context.Canceled) {
+					// Final flush if needed
+					if buffer.Len() > 0 {
+						fmt.Fprintf(w, "data: %s\n\n", buffer.String())
+						flusher.Flush()
+					}
+					return nil
+				}
+				slog.Debug("Reader returned error", "error", err)
+				return err
+			}
+			buffer.Write(line)
 		}
 	}
 }

From 97ff055e18c5d6c6ffecd29748533126a0d54ca4 Mon Sep 17 00:00:00 2001
From: unclegedd <gedd@defenseunicorns.com>
Date: Wed, 6 Nov 2024 10:45:56 -0600
Subject: [PATCH 35/45] cleanup logs

---
 src/pkg/api/logs/logs.go | 2 --
 1 file changed, 2 deletions(-)

diff --git a/src/pkg/api/logs/logs.go b/src/pkg/api/logs/logs.go
index 8ad1dd687..d85466058 100644
--- a/src/pkg/api/logs/logs.go
+++ b/src/pkg/api/logs/logs.go
@@ -57,7 +57,6 @@ func streamExistingLogs(ctx context.Context, clientSet kubernetes.Interface, w h
 // handleLogStream manages the continuous streaming of new logs
 func handleLogStream(ctx context.Context, logStream io.ReadCloser, w http.ResponseWriter) error {
 	defer logStream.Close()
-	defer slog.Debug("handleLogStream finished")
 
 	reader := bufio.NewReader(logStream)
 	flusher := w.(http.Flusher)
@@ -68,7 +67,6 @@ func handleLogStream(ctx context.Context, logStream io.ReadCloser, w http.Respon
 	for {
 		select {
 		case <-ctx.Done():
-			slog.Debug("Log stream closed")
 			return nil
 
 		case <-ticker.C:

From 76bc0098f9800445e60315269638400eb7ba2e96 Mon Sep 17 00:00:00 2001
From: unclegedd <gedd@defenseunicorns.com>
Date: Wed, 6 Nov 2024 11:45:43 -0600
Subject: [PATCH 36/45] fix e2e test

---
 src/pkg/api/start.go  |  6 +++---
 ui/tests/logs.spec.ts | 12 ++++++++++--
 2 files changed, 13 insertions(+), 5 deletions(-)

diff --git a/src/pkg/api/start.go b/src/pkg/api/start.go
index 509a6bca8..6bea864e5 100644
--- a/src/pkg/api/start.go
+++ b/src/pkg/api/start.go
@@ -89,7 +89,7 @@ func Setup(assets *embed.FS) (*chi.Mux, bool, error) {
 			r.Route("/workloads", func(r chi.Router) {
 				r.Get("/pods", withLatestCache(k8sSession, getPods))
 				r.Get("/pods/{uid}", withLatestCache(k8sSession, getPod))
-				r.Get("/pods/logs", withLatestClient(k8sSession, getPodLogs))
+				r.Get("/pods/logs", withLatestSession(k8sSession, getPodLogs))
 
 				r.Get("/deployments", withLatestCache(k8sSession, getDeployments))
 				r.Get("/deployments/{uid}", withLatestCache(k8sSession, getDeployment))
@@ -309,8 +309,8 @@ func withLatestCache(k8sSession *session.K8sSession, handler func(cache *resourc
 	}
 }
 
-// withLatestClient returns a wrapper lambda function, creating a closure that can dynamically access the latest client
-func withLatestClient(k8sSession *session.K8sSession, handler func(k8sSession *session.K8sSession) func(w http.ResponseWriter, r *http.Request)) http.HandlerFunc {
+// withLatestSession returns a wrapper lambda function, creating a closure that can dynamically access the latest K8s session
+func withLatestSession(k8sSession *session.K8sSession, handler func(k8sSession *session.K8sSession) func(w http.ResponseWriter, r *http.Request)) http.HandlerFunc {
 	return func(w http.ResponseWriter, r *http.Request) {
 		handler(k8sSession)(w, r)
 	}
diff --git a/ui/tests/logs.spec.ts b/ui/tests/logs.spec.ts
index b65b477de..70a1b948c 100644
--- a/ui/tests/logs.spec.ts
+++ b/ui/tests/logs.spec.ts
@@ -31,6 +31,11 @@ test.describe('Logs', async () => {
     let logLines = await page.locator('.log-line').count()
     expect(logLines).toBeGreaterThan(0)
 
+    // get Pepr pod names so we can easily select them later
+    const peprPods = await page.locator('text=pepr-uds-core-').all()
+    const peprPodNames = await Promise.all(peprPods.map(async (el) => el.textContent()))
+    peprPodNames.sort()
+
     // click on namespace dropdown
     await page.locator('#ns-dropdown').click()
     await page.locator('text=pepr-system').last().click()
@@ -43,7 +48,7 @@ test.describe('Logs', async () => {
 
     // select a new pod
     await page.locator('#pod-dropdown').click()
-    await page.locator('text=pepr-uds-core-').last().click()
+    await page.locator(`text=${peprPodNames[0]}`).last().click()
     logLines = await page.locator('.log-line').count()
     expect(logLines).toBe(0)
 
@@ -56,7 +61,10 @@ test.describe('Logs', async () => {
 
     // select another pod from the same namespace
     await page.locator('#pod-dropdown').click()
-    await page.locator('text=pepr-uds-core-watcher-').last().click()
+    await page
+      .locator(`text=${peprPodNames.at(-1)}`)
+      .last()
+      .click() // should be watcher pod because we sorted the names
     logLines = await page.locator('.log-line').count()
     expect(logLines).toBe(0)
 

From 117c050a1240df414281943bfe3faa66a97ae8ce Mon Sep 17 00:00:00 2001
From: unclegedd <gedd@defenseunicorns.com>
Date: Wed, 6 Nov 2024 11:54:35 -0600
Subject: [PATCH 37/45] make logs header match datatable

---
 ui/src/lib/components/k8s/Logs/component.svelte | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/ui/src/lib/components/k8s/Logs/component.svelte b/ui/src/lib/components/k8s/Logs/component.svelte
index 871df1f76..68afbec60 100644
--- a/ui/src/lib/components/k8s/Logs/component.svelte
+++ b/ui/src/lib/components/k8s/Logs/component.svelte
@@ -168,7 +168,7 @@
 <section class="h-[35%] flex-shrink-0 mt-6" data-testid="logs-view">
   <div class="flex h-full w-full flex-col bg-gray-800 rounded-lg overflow-y-auto">
     <!-- Header -->
-    <div class="flex items-center justify-between py-2 border-b border-gray-700 mx-4">
+    <div class="flex items-center justify-between py-3 border-b border-gray-700 mx-4">
       <!-- Left section: title, search, and log controls -->
       <div class="flex items-center space-x-6">
         <!-- Logo and title -->

From 7265dff46cf31ec5812889a80c329fcf70bbf547 Mon Sep 17 00:00:00 2001
From: unclegedd <gedd@defenseunicorns.com>
Date: Wed, 6 Nov 2024 12:08:42 -0600
Subject: [PATCH 38/45] rename file and ensure refactor cleanup

---
 .../lib/components/k8s/Logs/component.svelte  | 46 +++++++++++--------
 .../k8s/Logs/{logs.ts => helpers.ts}          |  0
 ui/src/lib/components/k8s/Logs/store.ts       |  2 +-
 3 files changed, 28 insertions(+), 20 deletions(-)
 rename ui/src/lib/components/k8s/Logs/{logs.ts => helpers.ts} (100%)

diff --git a/ui/src/lib/components/k8s/Logs/component.svelte b/ui/src/lib/components/k8s/Logs/component.svelte
index 68afbec60..4de94fa46 100644
--- a/ui/src/lib/components/k8s/Logs/component.svelte
+++ b/ui/src/lib/components/k8s/Logs/component.svelte
@@ -8,7 +8,7 @@
 
   import { goto } from '$app/navigation'
   import { AnsiDisplay, Dropdown } from '$components'
-  import { getAllLogs, getLastNLines } from '$components/k8s/Logs/logs'
+  import { getAllLogs, getLastNLines } from '$components/k8s/Logs/helpers'
   import {
     autoScroll,
     containerName,
@@ -30,6 +30,8 @@
   import type { Pod } from '$lib/types'
   import { CheckmarkOutline, Copy, Download, Search, Terminal } from 'carbon-icons-svelte'
 
+  let podEventSource: EventSource
+
   // manage notifications
   let showNotification = false
   let notificationTimeout: ReturnType<typeof setTimeout>
@@ -88,17 +90,7 @@
     }
   }
 
-  // clear timeouts on destroy
-  onDestroy(() => {
-    if (notificationTimeout) {
-      clearTimeout(notificationTimeout)
-    }
-    const st = get(scrollTimeout)
-    if (st) {
-      clearTimeout(st)
-      scrollTimeout.set(null)
-    }
-  })
+  onDestroy(cleanupPage)
 
   // set up store handlers
   handleNamespace()
@@ -116,7 +108,7 @@
     // set up sse stream for pods
     const fieldSelectors = 'metadata.name,metadata.namespace,spec.containers[].name'
     const podURL = `/api/v1/resources/workloads/pods?fields=${fieldSelectors}`
-    const podEventSource = new EventSource(podURL)
+    podEventSource = new EventSource(podURL)
 
     podEventSource.onmessage = (event) => {
       const data = JSON.parse(event.data)
@@ -154,15 +146,31 @@
     window.addEventListener('keydown', handleKeydown)
 
     return () => {
-      podEventSource.close()
-      const logES = get(logEventSource)
-      if (logES) {
-        logES.close()
-        logEventSource.set(null)
-      }
       window.removeEventListener('keydown', handleKeydown)
     }
   })
+
+  function cleanupPage() {
+    // clean up event sources
+    if (podEventSource) {
+      podEventSource.close()
+    }
+    const logES = get(logEventSource)
+    if (logES) {
+      logES.close()
+      logEventSource.set(null)
+    }
+
+    // clean up timeouts
+    if (notificationTimeout) {
+      clearTimeout(notificationTimeout)
+    }
+    const st = get(scrollTimeout)
+    if (st) {
+      clearTimeout(st)
+      scrollTimeout.set(null)
+    }
+  }
 </script>
 
 <section class="h-[35%] flex-shrink-0 mt-6" data-testid="logs-view">
diff --git a/ui/src/lib/components/k8s/Logs/logs.ts b/ui/src/lib/components/k8s/Logs/helpers.ts
similarity index 100%
rename from ui/src/lib/components/k8s/Logs/logs.ts
rename to ui/src/lib/components/k8s/Logs/helpers.ts
diff --git a/ui/src/lib/components/k8s/Logs/store.ts b/ui/src/lib/components/k8s/Logs/store.ts
index 9878099bf..c5afdeb64 100644
--- a/ui/src/lib/components/k8s/Logs/store.ts
+++ b/ui/src/lib/components/k8s/Logs/store.ts
@@ -3,7 +3,7 @@
 
 import { derived, get, writable } from 'svelte/store'
 
-import { addLog, cleanupLogs, debounceScroll, highlightMatches, resetHighlights } from '$components/k8s/Logs/logs'
+import { addLog, cleanupLogs, debounceScroll, highlightMatches, resetHighlights } from '$components/k8s/Logs/helpers'
 import type { Pod } from '$lib/types'
 
 // stores for pod data

From 5b27740530f958bac0a0a378cc96988710537017 Mon Sep 17 00:00:00 2001
From: unclegedd <gedd@defenseunicorns.com>
Date: Wed, 6 Nov 2024 14:18:08 -0600
Subject: [PATCH 39/45] more fixes

---
 src/pkg/api/logs/logs.go                      |  1 +
 tasks/test.yaml                               |  6 -----
 .../components/k8s/Drawer/component.svelte    | 22 ++++++++++---------
 .../lib/components/k8s/Logs/component.svelte  |  2 +-
 ui/src/lib/components/k8s/Logs/store.ts       |  2 +-
 ui/src/lib/features/k8s/types.ts              | 14 ++++++++++++
 ui/src/lib/types.ts                           | 14 ------------
 ui/tests/drawer.spec.ts                       | 12 +++++++++-
 8 files changed, 40 insertions(+), 33 deletions(-)

diff --git a/src/pkg/api/logs/logs.go b/src/pkg/api/logs/logs.go
index d85466058..fdca94e7d 100644
--- a/src/pkg/api/logs/logs.go
+++ b/src/pkg/api/logs/logs.go
@@ -67,6 +67,7 @@ func handleLogStream(ctx context.Context, logStream io.ReadCloser, w http.Respon
 	for {
 		select {
 		case <-ctx.Done():
+			slog.Debug("Logs streaming stopped")
 			return nil
 
 		case <-ticker.C:
diff --git a/tasks/test.yaml b/tasks/test.yaml
index 0b6d2e19a..ed501b52a 100644
--- a/tasks/test.yaml
+++ b/tasks/test.yaml
@@ -106,18 +106,12 @@ tasks:
       - cmd: npm run test:install # install playwright
         dir: ui
       - cmd: uds deploy k3d-core-slim-dev:latest --confirm
-      - task: deploy-metrics-server
       - task: deploy-podinfo
       - task: create-test-keycloak-user
       - task: install-runtime-in-cluster
       - cmd: npm run test:e2e-in-cluster
         dir: ui
 
-  - name: deploy-metrics-server
-    description: "deploy metrics server to the cluster"
-    actions:
-      - cmd: uds zarf package deploy oci://ghcr.io/defenseunicorns/packages/uds/core-metrics-server:0.30.0-upstream --confirm
-
   - name: go-unit
     description: "run api server unit tests"
     actions:
diff --git a/ui/src/lib/components/k8s/Drawer/component.svelte b/ui/src/lib/components/k8s/Drawer/component.svelte
index 6515a1323..7b6114bdb 100644
--- a/ui/src/lib/components/k8s/Drawer/component.svelte
+++ b/ui/src/lib/components/k8s/Drawer/component.svelte
@@ -137,16 +137,18 @@
       {#if activeTab === 'details'}
         <!-- Details tab -->
         <div class="bg-gray-800 text-gray-200 p-6 rounded-lg">
-          <!-- show a Logs button -->
-          <button
-            class="hover:text-primary-700 flex items-center justify-center rounded-lg border border-gray-200 bg-white px-4 py-2 text-sm font-medium text-gray-900 hover:bg-gray-100 focus:z-10 focus:outline-none focus:ring-4 focus:ring-gray-200 md:w-auto dark:border-gray-600 dark:bg-gray-800 dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-white dark:focus:ring-gray-700"
-            type="button"
-            data-testid="datatable-filter-dropdown"
-            on:click={() =>
-              goto(`${baseURL}/logs?pod=${resource.metadata?.name}&namespace=${resource.metadata?.namespace}`)}
-          >
-            View Logs
-          </button>
+          <!-- show a logs button for pods only -->
+          {#if resource.kind === 'Pod'}
+            <button
+              class="hover:text-primary-700 flex items-center justify-center rounded-lg border border-gray-200 bg-white px-4 py-2 text-sm font-medium text-gray-900 hover:bg-gray-100 focus:z-10 focus:outline-none focus:ring-4 focus:ring-gray-200 md:w-auto dark:border-gray-600 dark:bg-gray-800 dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-white dark:focus:ring-gray-700"
+              type="button"
+              data-testid="datatable-filter-dropdown"
+              on:click={() =>
+                goto(`${baseURL}/logs?pod=${resource.metadata?.name}&namespace=${resource.metadata?.namespace}`)}
+            >
+              View Logs
+            </button>
+          {/if}
           <dl class="mt-6 space-y-4">
             {#each details as { label, value }}
               <div class="flex flex-col sm:flex-row gap-9 border-b border-gray-700 pb-2">
diff --git a/ui/src/lib/components/k8s/Logs/component.svelte b/ui/src/lib/components/k8s/Logs/component.svelte
index 4de94fa46..203ed9cf3 100644
--- a/ui/src/lib/components/k8s/Logs/component.svelte
+++ b/ui/src/lib/components/k8s/Logs/component.svelte
@@ -27,7 +27,7 @@
     searchTerm,
     selectedNamespace,
   } from '$components/k8s/Logs/store'
-  import type { Pod } from '$lib/types'
+  import type { Pod } from '$features/k8s/types'
   import { CheckmarkOutline, Copy, Download, Search, Terminal } from 'carbon-icons-svelte'
 
   let podEventSource: EventSource
diff --git a/ui/src/lib/components/k8s/Logs/store.ts b/ui/src/lib/components/k8s/Logs/store.ts
index c5afdeb64..efd3d3a77 100644
--- a/ui/src/lib/components/k8s/Logs/store.ts
+++ b/ui/src/lib/components/k8s/Logs/store.ts
@@ -4,7 +4,7 @@
 import { derived, get, writable } from 'svelte/store'
 
 import { addLog, cleanupLogs, debounceScroll, highlightMatches, resetHighlights } from '$components/k8s/Logs/helpers'
-import type { Pod } from '$lib/types'
+import type { Pod } from '$features/k8s/types'
 
 // stores for pod data
 export const pods = writable<Pod[]>([]) // raw pod data
diff --git a/ui/src/lib/features/k8s/types.ts b/ui/src/lib/features/k8s/types.ts
index c6494a449..6d4a62474 100644
--- a/ui/src/lib/features/k8s/types.ts
+++ b/ui/src/lib/features/k8s/types.ts
@@ -121,3 +121,17 @@ export type ClusterData = {
     }
   }[]
 }
+
+// types for pod data loaded for the logs view
+type Container = {
+  name: string
+}
+export type Pod = {
+  metadata: {
+    name: string
+    namespace: string
+  }
+  spec: {
+    containers: Container[]
+  }
+}
diff --git a/ui/src/lib/types.ts b/ui/src/lib/types.ts
index e72be6f24..3dcaf3f0e 100644
--- a/ui/src/lib/types.ts
+++ b/ui/src/lib/types.ts
@@ -39,17 +39,3 @@ export type ClusterOverviewUDSPackageType = {
     endpoints: string[]
   }
 }
-
-// types for pod data loaded for the logs view
-type Container = {
-  name: string
-}
-export type Pod = {
-  metadata: {
-    name: string
-    namespace: string
-  }
-  spec: {
-    containers: Container[]
-  }
-}
diff --git a/ui/tests/drawer.spec.ts b/ui/tests/drawer.spec.ts
index e20949dcf..ac3eb2425 100644
--- a/ui/tests/drawer.spec.ts
+++ b/ui/tests/drawer.spec.ts
@@ -11,7 +11,7 @@ test.describe('Drawer', async () => {
   })
 
   test.describe('is opened when clicking on a table row and', async () => {
-    test('will display Metadata details', async ({ page }) => {
+    test('will display Details', async ({ page }) => {
       const drawerEl = page.getByTestId('drawer')
 
       await expect(drawerEl).toBeVisible()
@@ -19,6 +19,7 @@ test.describe('Drawer', async () => {
       await expect(drawerEl.getByText('Name', { exact: true })).toBeVisible()
       await expect(drawerEl.getByText('Annotations')).toBeVisible()
       await expect(drawerEl.getByText('podinfo', { exact: true })).toBeVisible()
+      await expect(drawerEl.getByText('View Logs')).toBeVisible()
     })
 
     test('will display Events details', async ({ page }) => {
@@ -43,5 +44,14 @@ test.describe('Drawer', async () => {
       // Ensure metadata:uid matches url pod:id
       await expect(drawerEl.locator(`:text("uid: ${podID}")`)).toBeVisible()
     })
+
+    test("don't display logs button for non-pods", async ({ page }) => {
+      await page.goto('/workloads/deployments')
+      await page.getByRole('cell', { name: 'podinfo-' }).click()
+
+      const drawerEl = page.getByTestId('drawer')
+      await expect(drawerEl).toBeVisible()
+      await expect(drawerEl.getByText('View Logs')).not.toBeVisible()
+    })
   })
 })

From ee3c4afb7797b83c778c1d01992a3a6a83c7cf64 Mon Sep 17 00:00:00 2001
From: unclegedd <gedd@defenseunicorns.com>
Date: Wed, 6 Nov 2024 14:25:24 -0600
Subject: [PATCH 40/45] add space to bottom of logs view

---
 ui/src/lib/components/k8s/Logs/component.svelte | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/ui/src/lib/components/k8s/Logs/component.svelte b/ui/src/lib/components/k8s/Logs/component.svelte
index 203ed9cf3..b3279e24d 100644
--- a/ui/src/lib/components/k8s/Logs/component.svelte
+++ b/ui/src/lib/components/k8s/Logs/component.svelte
@@ -173,7 +173,7 @@
   }
 </script>
 
-<section class="h-[35%] flex-shrink-0 mt-6" data-testid="logs-view">
+<section class="h-[33%] flex-shrink-0 mt-6" data-testid="logs-view">
   <div class="flex h-full w-full flex-col bg-gray-800 rounded-lg overflow-y-auto">
     <!-- Header -->
     <div class="flex items-center justify-between py-3 border-b border-gray-700 mx-4">

From bf99260471668925ec7393f6fa907ff60cbe3e31 Mon Sep 17 00:00:00 2001
From: unclegedd <gedd@defenseunicorns.com>
Date: Wed, 6 Nov 2024 14:34:44 -0600
Subject: [PATCH 41/45] fix

---
 ui/src/lib/components/k8s/Logs/component.svelte | 6 +++---
 ui/src/routes/+layout.ts                        | 2 +-
 2 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/ui/src/lib/components/k8s/Logs/component.svelte b/ui/src/lib/components/k8s/Logs/component.svelte
index b3279e24d..fbe94c744 100644
--- a/ui/src/lib/components/k8s/Logs/component.svelte
+++ b/ui/src/lib/components/k8s/Logs/component.svelte
@@ -252,7 +252,7 @@
         bind:selectedValue={$selectedNamespace}
         items={Array.from($namespaces)}
         id="ns-dropdown"
-        width="w-48"
+        width="w-56"
         placeholder="Select namespace"
         label="Namespace"
       />
@@ -260,7 +260,7 @@
         bind:selectedValue={$podName}
         items={$filteredPods.map((p) => p.metadata.name)}
         id="pod-dropdown"
-        width="w-48"
+        width="w-56"
         placeholder="Select pod"
         disabled={!$selectedNamespace}
         label="Pod"
@@ -269,7 +269,7 @@
         bind:selectedValue={$containerName}
         items={$filteredContainers.map((c) => c.name)}
         id="container-dropdown"
-        width="w-48"
+        width="w-56"
         placeholder="Select container"
         disabled={!$podName}
         label="Container"
diff --git a/ui/src/routes/+layout.ts b/ui/src/routes/+layout.ts
index e72d35dcd..8f3e802c4 100644
--- a/ui/src/routes/+layout.ts
+++ b/ui/src/routes/+layout.ts
@@ -56,7 +56,7 @@ async function auth(token: string): Promise<AuthResponse> {
 
 // load namespace and auth data before rendering the app
 export const load = async () => {
-  const namespaces = createNamespaceStore()
+  const namespaces = createStore()
 
   const url = new URL(window.location.href)
   const localAuthToken = url.searchParams.get('token') || ''

From b342efcd1321c2d68f89990ec479b74d80aa4c48 Mon Sep 17 00:00:00 2001
From: unclegedd <gedd@defenseunicorns.com>
Date: Wed, 6 Nov 2024 14:43:29 -0600
Subject: [PATCH 42/45] fix api test

---
 src/test/e2e/api_test.go | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/src/test/e2e/api_test.go b/src/test/e2e/api_test.go
index fb4dd08e0..be8ab3d89 100644
--- a/src/test/e2e/api_test.go
+++ b/src/test/e2e/api_test.go
@@ -21,6 +21,7 @@ import (
 	"github.com/go-chi/chi/v5"
 	"github.com/stretchr/testify/require"
 	metav1 "k8s.io/apimachinery/pkg/apis/meta/v1"
+	"k8s.io/client-go/tools/clientcmd"
 )
 
 type TestRoute struct {
@@ -265,7 +266,7 @@ func TestLogs(t *testing.T) {
 	require.NoError(t, err)
 
 	// get podinfo pod name using k8s client
-	k8sClient, err := client.NewClient()
+	k8sClient, err := client.New(&clientcmd.ConfigOverrides{})
 	require.NoError(t, err)
 	pods, err := k8sClient.Clientset.CoreV1().Pods("podinfo").List(context.TODO(), metav1.ListOptions{})
 	require.NoError(t, err)

From 5f0723d5ec826519014f2d22f52dd7c65791e5a1 Mon Sep 17 00:00:00 2001
From: unclegedd <gedd@defenseunicorns.com>
Date: Wed, 6 Nov 2024 15:03:15 -0600
Subject: [PATCH 43/45] fix test and refactor cluster dropdown

---
 .../navbar/clustermenu/component.svelte       | 29 ++++++++++++-------
 ui/tests/drawer.spec.ts                       |  2 +-
 2 files changed, 20 insertions(+), 11 deletions(-)

diff --git a/ui/src/lib/features/navigation/navbar/clustermenu/component.svelte b/ui/src/lib/features/navigation/navbar/clustermenu/component.svelte
index 71f64b619..5d34fe3d0 100644
--- a/ui/src/lib/features/navigation/navbar/clustermenu/component.svelte
+++ b/ui/src/lib/features/navigation/navbar/clustermenu/component.svelte
@@ -67,7 +67,7 @@
   $: availableClusters = $clusters.filter((cluster) => !cluster.selected).sort((a, b) => a.name.localeCompare(b.name))
 </script>
 
-<div class="w-full md:block md:w-auto">
+<div class="relative w-64">
   <button
     id="clusterDropdownButton"
     data-dropdown-toggle="clusterDropdown"
@@ -76,28 +76,37 @@
         await fetchClusters()
       }
     }}
-    class={`flex items-center justify-between w-full py-2 px-3 text-sm text-gray-700 rounded hover:bg-gray-100 md:hover:bg-transparent md:border-0 md:hover:text-blue-700 md:p-0 md:w-auto dark:border-gray-700 dark:hover:bg-gray-700 md:dark:hover:bg-transparent ${
+    class={`group flex items-center justify-between w-full px-4 py-2.5 text-sm font-medium bg-white dark:bg-gray-800 border ${
       switchErr
-        ? 'text-red-500 dark:hover:text-white'
-        : 'dark:text-gray-400 dark:hover:text-white dark:focus:text-white'
-    }`}
+        ? 'border-red-500 text-red-500 hover:bg-red-50 dark:border-red-500 dark:text-red-400 dark:hover:bg-red-900/10'
+        : 'border-gray-200 text-gray-700 hover:bg-gray-50 dark:border-gray-700 dark:text-gray-200 dark:hover:bg-gray-700'
+    } rounded-lg transition-all duration-200 ease-in-out`}
   >
-    {selected}
-    <ChevronDown class="ml-1 expanded-only h-5 w-5 transition duration-200" />
+    <div class="flex items-center space-x-2">
+      <div class={`w-2 h-2 rounded-full ${switchErr ? 'bg-red-500' : 'bg-green-400'}`}></div>
+      <span>
+        {selected}
+      </span>
+    </div>
+    <ChevronDown class="ml-1 h-4 w-4 text-gray-500 transition-transform duration-200" />
   </button>
+
   <ul
     id="clusterDropdown"
     aria-labelledby="clusterDropdownButton"
     bind:this={dropdown}
-    class="z-10 hidden font-normal bg-white rounded-lg shadow m-w-48 max-w-72 dark:bg-gray-700 dark:divide-gray-600 py-2 text-sm dark:text-gray-300"
+    class="absolute w-full mt-2 hidden font-normal bg-white rounded-lg shadow-lg z-10 dark:bg-gray-700 py-1 text-sm dark:text-gray-300 ring-1 ring-black ring-opacity-5"
   >
     {#each availableClusters as cluster}
       <li>
         <button
-          class="w-full px-4 py-2 text-left hover:bg-gray-100 dark:hover:bg-gray-600 dark:hover:text-white truncate"
+          class="flex rounded-md items-center w-full px-4 py-2.5 text-left hover:bg-gray-50 dark:hover:bg-gray-600 dark:hover:text-white transition-colors duration-150"
           on:click={() => switchCluster(cluster)}
         >
-          {cluster.context}.{cluster.name}
+          <div class="flex items-center space-x-2">
+            <div class="w-2 h-2 rounded-full bg-gray-300"></div>
+            <span class="truncate">{cluster.context}.{cluster.name}</span>
+          </div>
         </button>
       </li>
     {/each}
diff --git a/ui/tests/drawer.spec.ts b/ui/tests/drawer.spec.ts
index ac3eb2425..0154be4e6 100644
--- a/ui/tests/drawer.spec.ts
+++ b/ui/tests/drawer.spec.ts
@@ -47,7 +47,7 @@ test.describe('Drawer', async () => {
 
     test("don't display logs button for non-pods", async ({ page }) => {
       await page.goto('/workloads/deployments')
-      await page.getByRole('cell', { name: 'podinfo-' }).click()
+      await page.getByRole('cell', { name: 'podinfo' }).click()
 
       const drawerEl = page.getByTestId('drawer')
       await expect(drawerEl).toBeVisible()

From 5987dd656578ccd75924dee70a0ec9dd2681f69c Mon Sep 17 00:00:00 2001
From: unclegedd <gedd@defenseunicorns.com>
Date: Wed, 6 Nov 2024 16:04:29 -0600
Subject: [PATCH 44/45] fix

---
 ui/tests/drawer.spec.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/ui/tests/drawer.spec.ts b/ui/tests/drawer.spec.ts
index 0154be4e6..8aa67ad1b 100644
--- a/ui/tests/drawer.spec.ts
+++ b/ui/tests/drawer.spec.ts
@@ -47,7 +47,7 @@ test.describe('Drawer', async () => {
 
     test("don't display logs button for non-pods", async ({ page }) => {
       await page.goto('/workloads/deployments')
-      await page.getByRole('cell', { name: 'podinfo' }).click()
+      await page.getByRole('cell', { name: 'podinfo' }).first().click()
 
       const drawerEl = page.getByTestId('drawer')
       await expect(drawerEl).toBeVisible()

From d4ba8f19f9d4167cc3eeb75821f6c6ac42eb796f Mon Sep 17 00:00:00 2001
From: unclegedd <gedd@defenseunicorns.com>
Date: Wed, 6 Nov 2024 16:06:16 -0600
Subject: [PATCH 45/45] revert cluster menu dropdown

---
 .../navbar/clustermenu/component.svelte       | 29 +++++++------------
 1 file changed, 10 insertions(+), 19 deletions(-)

diff --git a/ui/src/lib/features/navigation/navbar/clustermenu/component.svelte b/ui/src/lib/features/navigation/navbar/clustermenu/component.svelte
index 5d34fe3d0..71f64b619 100644
--- a/ui/src/lib/features/navigation/navbar/clustermenu/component.svelte
+++ b/ui/src/lib/features/navigation/navbar/clustermenu/component.svelte
@@ -67,7 +67,7 @@
   $: availableClusters = $clusters.filter((cluster) => !cluster.selected).sort((a, b) => a.name.localeCompare(b.name))
 </script>
 
-<div class="relative w-64">
+<div class="w-full md:block md:w-auto">
   <button
     id="clusterDropdownButton"
     data-dropdown-toggle="clusterDropdown"
@@ -76,37 +76,28 @@
         await fetchClusters()
       }
     }}
-    class={`group flex items-center justify-between w-full px-4 py-2.5 text-sm font-medium bg-white dark:bg-gray-800 border ${
+    class={`flex items-center justify-between w-full py-2 px-3 text-sm text-gray-700 rounded hover:bg-gray-100 md:hover:bg-transparent md:border-0 md:hover:text-blue-700 md:p-0 md:w-auto dark:border-gray-700 dark:hover:bg-gray-700 md:dark:hover:bg-transparent ${
       switchErr
-        ? 'border-red-500 text-red-500 hover:bg-red-50 dark:border-red-500 dark:text-red-400 dark:hover:bg-red-900/10'
-        : 'border-gray-200 text-gray-700 hover:bg-gray-50 dark:border-gray-700 dark:text-gray-200 dark:hover:bg-gray-700'
-    } rounded-lg transition-all duration-200 ease-in-out`}
+        ? 'text-red-500 dark:hover:text-white'
+        : 'dark:text-gray-400 dark:hover:text-white dark:focus:text-white'
+    }`}
   >
-    <div class="flex items-center space-x-2">
-      <div class={`w-2 h-2 rounded-full ${switchErr ? 'bg-red-500' : 'bg-green-400'}`}></div>
-      <span>
-        {selected}
-      </span>
-    </div>
-    <ChevronDown class="ml-1 h-4 w-4 text-gray-500 transition-transform duration-200" />
+    {selected}
+    <ChevronDown class="ml-1 expanded-only h-5 w-5 transition duration-200" />
   </button>
-
   <ul
     id="clusterDropdown"
     aria-labelledby="clusterDropdownButton"
     bind:this={dropdown}
-    class="absolute w-full mt-2 hidden font-normal bg-white rounded-lg shadow-lg z-10 dark:bg-gray-700 py-1 text-sm dark:text-gray-300 ring-1 ring-black ring-opacity-5"
+    class="z-10 hidden font-normal bg-white rounded-lg shadow m-w-48 max-w-72 dark:bg-gray-700 dark:divide-gray-600 py-2 text-sm dark:text-gray-300"
   >
     {#each availableClusters as cluster}
       <li>
         <button
-          class="flex rounded-md items-center w-full px-4 py-2.5 text-left hover:bg-gray-50 dark:hover:bg-gray-600 dark:hover:text-white transition-colors duration-150"
+          class="w-full px-4 py-2 text-left hover:bg-gray-100 dark:hover:bg-gray-600 dark:hover:text-white truncate"
           on:click={() => switchCluster(cluster)}
         >
-          <div class="flex items-center space-x-2">
-            <div class="w-2 h-2 rounded-full bg-gray-300"></div>
-            <span class="truncate">{cluster.context}.{cluster.name}</span>
-          </div>
+          {cluster.context}.{cluster.name}
         </button>
       </li>
     {/each}