feat: improves the loader for logs

amir20 · Nov 18, 2024 · be2600a · be2600a
1 parent 7ccc312
commit be2600a
Show file tree

Hide file tree

Showing 4 changed files with 23 additions and 28 deletions.
diff --git a/assets/components.d.ts b/assets/components.d.ts
@@ -42,6 +42,7 @@ declare module 'vue' {
     HostList: typeof import('./components/HostList.vue')['default']
     HostMenu: typeof import('./components/HostMenu.vue')['default']
     'Ic:sharpKeyboardReturn': typeof import('~icons/ic/sharp-keyboard-return')['default']
+    IndeterminateBar: typeof import('./components/common/IndeterminateBar.vue')['default']
     InfiniteLoader: typeof import('./components/InfiniteLoader.vue')['default']
     KeyShortcut: typeof import('./components/common/KeyShortcut.vue')['default']
     LabeledInput: typeof import('./components/common/LabeledInput.vue')['default']

diff --git a/assets/components/LogViewer/EventSource.vue b/assets/components/LogViewer/EventSource.vue
@@ -1,9 +1,9 @@
 <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 :class="{ 'flex h-[calc(100vh-200px)] flex-col justify-center': loading || noLogs }">
+    <InfiniteLoader :onLoadMore="fetchMore" :enabled="!loadingMore && messages.length > 10" />
+    <slot :messages="messages"></slot>
+    <IndeterminateBar :color />
   </div>
-  <slot :messages="messages"></slot>
 </template>
 
 <script lang="ts" setup generic="T">
@@ -14,10 +14,16 @@ const { entity, streamSource } = $defineProps<{
   entity: T;
 }>();
 
-const { messages, loadOlderLogs, isLoadingMore, opened } = streamSource($$(entity));
+const { messages, loadOlderLogs, isLoadingMore, opened, loading, error } = streamSource($$(entity));
 const { loadingMore } = useLoggingContext();
+const color = computed(() => {
+  if (error.value) return "error";
+  if (loading.value) return "secondary";
+  if (opened.value) return "primary";
+  return "error";
+});
 
-const enabled = ref(true);
+const noLogs = computed(() => messages.value.length === 0);
 
 defineExpose({
   clear: () => (messages.value = []),
@@ -26,10 +32,8 @@ defineExpose({
 const fetchMore = async () => {
   if (!isLoadingMore.value) {
     loadingMore.value = true;
-    enabled.value = false;
     await loadOlderLogs();
     loadingMore.value = false;
-    enabled.value = true;
   }
 };
 </script>
diff --git a/assets/components/ScrollableView.vue b/assets/components/ScrollableView.vue
@@ -21,10 +21,7 @@
       <div ref="scrollableContent">
         <slot></slot>
       </div>
-      <div
-        class="animate-background h-1 w-1/2 bg-gradient-radial from-primary to-transparent to-75%"
-        v-show="!scrollContext.paused"
-      ></div>
+
       <div ref="scrollObserver" class="h-px"></div>
     </main>
 
@@ -90,20 +87,6 @@ function scrollToBottom(behavior: "auto" | "smooth" = "auto") {
 .fade-leave-to {
   @apply opacity-0;
 }
-
-.animate-background {
-  animation: gradient-animation 3s ease-out infinite;
-}
-
-@keyframes gradient-animation {
-  0%,
-  100% {
-    transform: translateX(0%);
-  }
-  50% {
-    transform: translateX(100%);
-  }
-}
 </style>
 
 <style>

diff --git a/assets/composable/eventStreams.ts b/assets/composable/eventStreams.ts
@@ -53,6 +53,8 @@ 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 loading = ref(true);
+  const error = ref(false);
   const { paused: scrollingPaused } = useScrollContext();
 
   function flushNow() {
@@ -124,6 +126,8 @@ function useLogStream(url: Ref<string>, loadMoreUrl?: Ref<string>) {
     close();
     if (clear) clearMessages();
     opened.value = false;
+    loading.value = true;
+    error.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 };
@@ -151,8 +155,11 @@ function useLogStream(url: Ref<string>, loadMoreUrl?: Ref<string>) {
         flushBuffer();
       }
     };
-    es.onerror = () => clearMessages();
+    es.onerror = () => {
+      error.value = true;
+    };
     es.onopen = () => {
+      loading.value = false;
       opened.value = true;
     };
   }
@@ -210,5 +217,5 @@ function useLogStream(url: Ref<string>, loadMoreUrl?: Ref<string>) {
     }
   });
 
-  return { messages, loadOlderLogs, isLoadingMore, hasComplexLogs, opened };
+  return { messages, loadOlderLogs, isLoadingMore, hasComplexLogs, opened, error, loading };
 }