From 197ab6d4da6c850ec7a415b2c1af13bafcf18adc Mon Sep 17 00:00:00 2001
From: Amir Raminfar <findamir@gmail.com>
Date: Fri, 15 Nov 2024 07:41:44 -0800
Subject: [PATCH] feat: show loader while opening event source (#3388)

---
 assets/components/LogViewer/EventSource.vue            |  5 ++++-
 assets/components/LogViewer/LogList.vue                |  6 +-----
 .../LogViewer/__snapshots__/EventSource.spec.ts.snap   |  3 ++-
 assets/components/ScrollableView.vue                   |  3 ---
 assets/composable/eventStreams.ts                      |  7 ++++++-
 internal/web/__snapshots__/web.snapshot                | 10 +++++++++-
 internal/web/logs.go                                   |  1 +
 7 files changed, 23 insertions(+), 12 deletions(-)

diff --git a/assets/components/LogViewer/EventSource.vue b/assets/components/LogViewer/EventSource.vue
index 1f82045d..6b98bcde 100644
--- a/assets/components/LogViewer/EventSource.vue
+++ b/assets/components/LogViewer/EventSource.vue
@@ -1,5 +1,8 @@
 <template>
   <InfiniteLoader :onLoadMore="fetchMore" :enabled="!loadingMore && messages.length > 10" />
+  <div v-if="!opened" class="m-4 text-center">
+    <span class="loading loading-ring loading-md text-primary"></span>
+  </div>
   <slot :messages="messages"></slot>
 </template>
 
@@ -11,7 +14,7 @@ const { entity, streamSource } = $defineProps<{
   entity: T;
 }>();
 
-const { messages, loadOlderLogs, isLoadingMore } = streamSource($$(entity));
+const { messages, loadOlderLogs, isLoadingMore, opened } = streamSource($$(entity));
 const { loadingMore } = useLoggingContext();
 
 const enabled = ref(true);
diff --git a/assets/components/LogViewer/LogList.vue b/assets/components/LogViewer/LogList.vue
index 9c285db9..6be89b49 100644
--- a/assets/components/LogViewer/LogList.vue
+++ b/assets/components/LogViewer/LogList.vue
@@ -1,9 +1,5 @@
 <template>
-  <ul
-    class="events group pt-4"
-    :class="{ 'disable-wrap': !softWrap, [size]: true, compact }"
-    v-if="messages.length > 0"
-  >
+  <ul class="events group pt-4" :class="{ 'disable-wrap': !softWrap, [size]: true, compact }">
     <li
       v-for="item in messages"
       ref="list"
diff --git a/assets/components/LogViewer/__snapshots__/EventSource.spec.ts.snap b/assets/components/LogViewer/__snapshots__/EventSource.spec.ts.snap
index 718015db..b5608d53 100644
--- a/assets/components/LogViewer/__snapshots__/EventSource.spec.ts.snap
+++ b/assets/components/LogViewer/__snapshots__/EventSource.spec.ts.snap
@@ -59,7 +59,8 @@ exports[`<ContainerEventSource /> > render html correctly > should render messag
 
 exports[`<ContainerEventSource /> > renders loading correctly 1`] = `
 "<div class="flex min-h-[1px] justify-center"><span class="loading loading-bars loading-md mt-4 text-primary" style="display: none;"></span></div>
-<!--v-if-->"
+<div class="m-4 text-center"><span class="loading loading-ring loading-md text-primary"></span></div>
+<ul data-v-cf9ff940="" class="events group pt-4 medium"></ul>"
 `;
 
 exports[`<ContainerEventSource /> > should parse messages 1`] = `
diff --git a/assets/components/ScrollableView.vue b/assets/components/ScrollableView.vue
index 79cc52af..7ced5c66 100644
--- a/assets/components/ScrollableView.vue
+++ b/assets/components/ScrollableView.vue
@@ -20,9 +20,6 @@
       </div>
       <div ref="scrollableContent">
         <slot></slot>
-        <div v-if="scrollContext.loading" class="m-4 text-center">
-          <span class="loading loading-ring loading-md text-primary"></span>
-        </div>
       </div>
       <div
         class="animate-background h-1 w-1/2 bg-gradient-radial from-primary to-transparent to-75%"
diff --git a/assets/composable/eventStreams.ts b/assets/composable/eventStreams.ts
index 3c223283..f72966f1 100644
--- a/assets/composable/eventStreams.ts
+++ b/assets/composable/eventStreams.ts
@@ -52,6 +52,7 @@ export type LogStreamSource = ReturnType<typeof useLogStream>;
 function useLogStream(url: Ref<string>, loadMoreUrl?: Ref<string>) {
   const messages: ShallowRef<LogEntry<string | JSONObject>[]> = shallowRef([]);
   const buffer: ShallowRef<LogEntry<string | JSONObject>[]> = shallowRef([]);
+  const opened = ref(false);
   const { paused: scrollingPaused } = useScrollContext();
 
   function flushNow() {
@@ -122,6 +123,7 @@ function useLogStream(url: Ref<string>, loadMoreUrl?: Ref<string>) {
   function connect({ clear } = { clear: true }) {
     close();
     if (clear) clearMessages();
+    opened.value = false;
     es = new EventSource(urlWithParams.value);
     es.addEventListener("container-event", (e) => {
       const event = JSON.parse((e as MessageEvent).data) as { actorId: string; name: string };
@@ -150,6 +152,9 @@ function useLogStream(url: Ref<string>, loadMoreUrl?: Ref<string>) {
       }
     };
     es.onerror = () => clearMessages();
+    es.onopen = () => {
+      opened.value = true;
+    };
   }
 
   watch(urlWithParams, () => connect(), { immediate: true });
@@ -205,5 +210,5 @@ function useLogStream(url: Ref<string>, loadMoreUrl?: Ref<string>) {
     }
   });
 
-  return { messages, loadOlderLogs, isLoadingMore, hasComplexLogs };
+  return { messages, loadOlderLogs, isLoadingMore, hasComplexLogs, opened };
 }
diff --git a/internal/web/__snapshots__/web.snapshot b/internal/web/__snapshots__/web.snapshot
index 6a92e61f..e14ab130 100644
--- a/internal/web/__snapshots__/web.snapshot
+++ b/internal/web/__snapshots__/web.snapshot
@@ -164,7 +164,9 @@ Cache-Control: no-cache
 Connection: keep-alive
 Content-Security-Policy: default-src 'self' 'wasm-unsafe-eval' blob: https://cdn.jsdelivr.net https://*.duckdb.org; style-src 'self' 'unsafe-inline'; img-src 'self' data:;
 Content-Type: text/event-stream
-X-Accel-Buffering: no
+X-Accel-Buffering: no
+
+:ping
 
 /* snapshot: Test_handler_streamLogs_error_std */
 HTTP/1.1 400 Bad Request
@@ -185,6 +187,8 @@ Content-Security-Policy: default-src 'self' 'wasm-unsafe-eval' blob: https://cdn
 Content-Type: text/event-stream
 X-Accel-Buffering: no
 
+:ping 
+
 data: {"m":"INFO Testing logs...","ts":0,"id":4256192898,"l":"info","s":"stdout","c":"123456"}
 
 
@@ -201,6 +205,8 @@ Content-Security-Policy: default-src 'self' 'wasm-unsafe-eval' blob: https://cdn
 Content-Type: text/event-stream
 X-Accel-Buffering: no
 
+:ping 
+
 event: container-event
 data: {"name":"container-stopped","host":"localhost","actorId":"123456"}
 
@@ -214,6 +220,8 @@ Content-Security-Policy: default-src 'self' 'wasm-unsafe-eval' blob: https://cdn
 Content-Type: text/event-stream
 X-Accel-Buffering: no
 
+:ping 
+
 data: {"m":"INFO Testing logs...","ts":1589396137772,"id":1469707724,"l":"info","s":"stdout","c":"123456"}
 id: 1589396137772
 
diff --git a/internal/web/logs.go b/internal/web/logs.go
index 681aa75d..d108d72a 100644
--- a/internal/web/logs.go
+++ b/internal/web/logs.go
@@ -395,6 +395,7 @@ func streamLogsForContainers(w http.ResponseWriter, r *http.Request, multiHostCl
 	multiHostClient.SubscribeContainersStarted(r.Context(), newContainers, filter)
 
 	ticker := time.NewTicker(5 * time.Second)
+	sseWriter.Ping()
 loop:
 	for {
 		select {