fix: fixes flushing race bug where container events were not show on page (#3445)

Author: amir20

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;

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();
     });