From b7bd763b540cb16240c1e481c88326522f7b8a6b Mon Sep 17 00:00:00 2001
From: Amir Raminfar <findamir@gmail.com>
Date: Tue, 10 Dec 2024 12:25:19 -0800
Subject: [PATCH] fix: fixes flushing race bug where container events were not
 show on page

---
 assets/components/LogViewer/ContainerEventLogItem.vue | 6 +++++-
 assets/composable/eventStreams.ts                     | 9 ++++++---
 2 files changed, 11 insertions(+), 4 deletions(-)

diff --git a/assets/components/LogViewer/ContainerEventLogItem.vue b/assets/components/LogViewer/ContainerEventLogItem.vue
index 794ff4b8..06bdf2ad 100644
--- a/assets/components/LogViewer/ContainerEventLogItem.vue
+++ b/assets/components/LogViewer/ContainerEventLogItem.vue
@@ -1,7 +1,7 @@
 <template>
   <div class="flex w-full flex-col">
     <div class="relative flex items-start gap-x-2">
-      <ContainerName class="flex-none" :id="logEntry.containerID" v-if="showContainerName" />
+      <RandomColorTag class="flex-none" :value="container.name" v-if="showContainerName" />
       <LogDate :date="logEntry.date" v-if="showTimestamp" />
       <LogLevel class="flex" />
       <div class="whitespace-pre-wrap" :data-event="logEntry.event" v-html="logEntry.message"></div>
@@ -33,6 +33,10 @@ const router = useRouter();
 const { showToast } = useToast();
 const { t } = useI18n();
 
+const { currentContainer } = useContainerStore();
+
+const container = currentContainer(toRef(() => logEntry.containerID));
+
 const { logEntry } = defineProps<{
   logEntry: ContainerEventLogEntry;
   showContainerName?: boolean;
diff --git a/assets/composable/eventStreams.ts b/assets/composable/eventStreams.ts
index 4a216a23..ab336c6c 100644
--- a/assets/composable/eventStreams.ts
+++ b/assets/composable/eventStreams.ts
@@ -130,16 +130,19 @@ function useLogStream(url: Ref<string>, loadMoreUrl?: Ref<string>) {
     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 };
+      const event = JSON.parse((e as MessageEvent).data) as {
+        actorId: string;
+        name: "container-stopped" | "container-started";
+      };
       const containerEvent = new ContainerEventLogEntry(
         event.name == "container-started" ? "Container started" : "Container stopped",
         event.actorId,
         new Date(),
-        event.name as "container-stopped" | "container-started",
+        event.name,
       );
 
       buffer.value = [...buffer.value, containerEvent];
-
+      flushBuffer();
       flushBuffer.flush();
     });