From 5ad0747e8568e62420e9106debd3dae3f60c4310 Mon Sep 17 00:00:00 2001
From: Amir Raminfar <findamir@gmail.com>
Date: Fri, 3 Jan 2025 10:45:04 -0800
Subject: [PATCH] feat: handles container exit and finished at

---
 assets/components/ContainerPopup.vue | 18 ++++++++++++++----
 assets/components/HostMenu.vue       |  2 +-
 assets/composable/eventStreams.ts    |  3 ++-
 assets/models/Container.ts           |  2 ++
 assets/stores/container.ts           | 16 +++++++++++++++-
 assets/types/Container.d.ts          |  4 +++-
 internal/docker/container_store.go   | 28 ++++++++++++++++++++++++++++
 internal/web/events.go               |  8 ++++++++
 internal/web/logs.go                 |  1 +
 vite.config.ts                       | 10 +++++-----
 10 files changed, 79 insertions(+), 13 deletions(-)

diff --git a/assets/components/ContainerPopup.vue b/assets/components/ContainerPopup.vue
index c65d07058da8..5ba3836797dc 100644
--- a/assets/components/ContainerPopup.vue
+++ b/assets/components/ContainerPopup.vue
@@ -1,15 +1,25 @@
 <template>
   <div>
-    <span class="font-light capitalize"> RUNNING </span>
+    <span class="font-light capitalize"> STATE </span>
+    <span class="font-semibold uppercase"> {{ container.state }} </span>
+  </div>
+  <div v-if="container.startedAt.getFullYear() > 0">
+    <span class="font-light capitalize"> STARTED </span>
     <span class="font-semibold">
-      <DistanceTime :date="container.created" strict :suffix="false" />
+      <DistanceTime :date="container.startedAt" strict />
     </span>
   </div>
-  <div>
+  <div v-if="container.state != 'running' && container.finishedAt.getFullYear() > 0">
+    <span class="font-light capitalize"> Finished </span>
+    <span class="font-semibold">
+      <DistanceTime :date="container.finishedAt" strict />
+    </span>
+  </div>
+  <div v-if="container.state == 'running'">
     <span class="font-light capitalize"> Load </span>
     <span class="font-semibold"> {{ container.stat.cpu.toFixed(2) }}% </span>
   </div>
-  <div>
+  <div v-if="container.state == 'running'">
     <span class="font-light capitalize"> MEM </span>
     <span class="font-semibold"> {{ formatBytes(container.stat.memoryUsage) }} </span>
   </div>
diff --git a/assets/components/HostMenu.vue b/assets/components/HostMenu.vue
index 161e7b764108..6ce0af48fd14 100644
--- a/assets/components/HostMenu.vue
+++ b/assets/components/HostMenu.vue
@@ -96,7 +96,7 @@
                     </span>
                   </router-link>
                   <template #content>
-                    <ContainerPopup :container="item as Container" />
+                    <ContainerPopup :container="item" />
                   </template>
                 </Popup>
               </li>
diff --git a/assets/composable/eventStreams.ts b/assets/composable/eventStreams.ts
index c7555edb90f7..491287e1d9a7 100644
--- a/assets/composable/eventStreams.ts
+++ b/assets/composable/eventStreams.ts
@@ -137,11 +137,12 @@ function useLogStream(url: Ref<string>, loadMoreUrl?: Ref<string>) {
       const event = JSON.parse((e as MessageEvent).data) as {
         actorId: string;
         name: "container-stopped" | "container-started";
+        time: string;
       };
       const containerEvent = new ContainerEventLogEntry(
         event.name == "container-started" ? "Container started" : "Container stopped",
         event.actorId,
-        new Date(),
+        new Date(event.time),
         event.name,
       );
 
diff --git a/assets/models/Container.ts b/assets/models/Container.ts
index ab853e2f3398..ff701563bb29 100644
--- a/assets/models/Container.ts
+++ b/assets/models/Container.ts
@@ -30,6 +30,8 @@ export class Container {
   constructor(
     public readonly id: string,
     public readonly created: Date,
+    public startedAt: Date,
+    public finishedAt: Date,
     public readonly image: string,
     name: string,
     public readonly command: string,
diff --git a/assets/stores/container.ts b/assets/stores/container.ts
index e02913dbfb19..2f5f4321147e 100644
--- a/assets/stores/container.ts
+++ b/assets/stores/container.ts
@@ -61,7 +61,7 @@ export const useContainerStore = defineStore("container", () => {
       }
     });
     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: string; time: string };
       const container = allContainersById.value[event.actorId];
       if (container) {
         switch (event.name) {
@@ -75,6 +75,18 @@ export const useContainerStore = defineStore("container", () => {
       }
     });
 
+    es.addEventListener("container-updated", (e) => {
+      const container = JSON.parse((e as MessageEvent).data) as ContainerJson;
+      const existing = allContainersById.value[container.id];
+      if (existing) {
+        existing.state = container.state;
+        existing.health = container.health;
+        existing.name = container.name;
+        existing.startedAt = new Date(container.startedAt);
+        existing.finishedAt = new Date(container.finishedAt);
+      }
+    });
+
     es.addEventListener("update-host", (e) => {
       const host = JSON.parse((e as MessageEvent).data) as Host;
       updateHost(host);
@@ -133,6 +145,8 @@ export const useContainerStore = defineStore("container", () => {
         return new Container(
           c.id,
           new Date(c.created),
+          new Date(c.startedAt),
+          new Date(c.finishedAt),
           c.image,
           c.name,
           c.command,
diff --git a/assets/types/Container.d.ts b/assets/types/Container.d.ts
index 568a782fbf3f..4639e69aaad0 100644
--- a/assets/types/Container.d.ts
+++ b/assets/types/Container.d.ts
@@ -7,7 +7,9 @@ export interface ContainerStat {
 
 export type ContainerJson = {
   readonly id: string;
-  readonly created: number;
+  readonly created: string;
+  readonly startedAt: string;
+  readonly finishedAt: string;
   readonly image: string;
   readonly name: string;
   readonly command: string;
diff --git a/internal/docker/container_store.go b/internal/docker/container_store.go
index 40b5d0639f75..1f0f11d00196 100644
--- a/internal/docker/container_store.go
+++ b/internal/docker/container_store.go
@@ -154,6 +154,34 @@ func (s *ContainerStore) FindContainer(id string, filter ContainerFilter) (Conta
 	}
 
 	if container, ok := s.containers.Load(id); ok {
+		if container.StartedAt.IsZero() {
+			log.Debug().Str("id", id).Msg("container doesn't have detailed information, fetching it")
+			if newContainer, ok := s.containers.Compute(id, func(c *Container, loaded bool) (*Container, bool) {
+				if loaded {
+					ctx, cancel := context.WithTimeout(context.Background(), 3*time.Second)
+					defer cancel()
+					if newContainer, err := s.client.FindContainer(ctx, id); err == nil {
+						return &newContainer, false
+					}
+				}
+				return c, false
+			}); ok {
+				event := ContainerEvent{
+					Name:    "update",
+					Host:    s.client.Host().ID,
+					ActorID: id,
+				}
+				s.subscribers.Range(func(c context.Context, events chan<- ContainerEvent) bool {
+					select {
+					case events <- event:
+					case <-c.Done():
+						s.subscribers.Delete(c)
+					}
+					return true
+				})
+				return *newContainer, nil
+			}
+		}
 		return *container, nil
 	} else {
 		log.Warn().Str("id", id).Msg("container not found")
diff --git a/internal/web/events.go b/internal/web/events.go
index 2ee1b9f22fcb..97d2557cbfaa 100644
--- a/internal/web/events.go
+++ b/internal/web/events.go
@@ -86,6 +86,14 @@ func (h *handler) streamEvents(w http.ResponseWriter, r *http.Request) {
 					return
 				}
 
+			case "update":
+				log.Debug().Str("id", event.ActorID).Msg("container updated")
+				if containerService, err := h.multiHostService.FindContainer(event.Host, event.ActorID, usersFilter); err == nil {
+					if err := sseWriter.Event("container-updated", containerService.Container); err != nil {
+						log.Error().Err(err).Msg("error writing event to event stream")
+						return
+					}
+				}
 			case "health_status: healthy", "health_status: unhealthy":
 				log.Debug().Str("container", event.ActorID).Str("health", event.Name).Msg("container health status")
 				healthy := "unhealthy"
diff --git a/internal/web/logs.go b/internal/web/logs.go
index e4c4b630402a..8ad967292e22 100644
--- a/internal/web/logs.go
+++ b/internal/web/logs.go
@@ -342,6 +342,7 @@ func (h *handler) streamLogsForContainers(w http.ResponseWriter, r *http.Request
 			log.Error().Err(err).Msg("error while finding container")
 			return
 		}
+		container = containerService.Container
 		start := utils.Max(absoluteTime, container.StartedAt)
 		err = containerService.StreamLogs(r.Context(), start, stdTypes, liveLogs)
 		if err != nil {
diff --git a/vite.config.ts b/vite.config.ts
index eb55302ff8ae..9bf3b30f876a 100644
--- a/vite.config.ts
+++ b/vite.config.ts
@@ -30,11 +30,6 @@ export default defineConfig(() => ({
     target: "esnext",
   },
   plugins: [
-    VueMacros({
-      plugins: {
-        vue: Vue(),
-      },
-    }),
     VueRouter({
       routesFolder: {
         src: "./assets/pages",
@@ -42,6 +37,11 @@ export default defineConfig(() => ({
       dts: "./assets/typed-router.d.ts",
       importMode: "sync",
     }),
+    VueMacros({
+      plugins: {
+        vue: Vue(),
+      },
+    }),
     Icons({
       autoInstall: true,
     }),