feat: handles container exits better and uses the real time when container has exited

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>

assets/components/FuzzySearchModal.spec.ts

@@ -31,9 +31,45 @@ function createFuzzySearchModal() {
           initialState: {
             container: {
               containers: [
-                new Container("123", new Date(), "image", "test", "command", "host", {}, "running", []),
-                new Container("345", new Date(), "image", "foo bar", "command", "host", {}, "running", []),
-                new Container("567", new Date(), "image", "baz", "command", "host", {}, "running", []),
+                new Container(
+                  "123",
+                  new Date(),
+                  new Date(),
+                  new Date(),
+                  "image",
+                  "test",
+                  "command",
+                  "host",
+                  {},
+                  "running",
+                  [],
+                ),
+                new Container(
+                  "345",
+                  new Date(),
+                  new Date(),
+                  new Date(),
+                  "image",
+                  "foo bar",
+                  "command",
+                  "host",
+                  {},
+                  "running",
+                  [],
+                ),
+                new Container(
+                  "567",
+                  new Date(),
+                  new Date(),
+                  new Date(),
+                  "image",
+                  "baz",
+                  "command",
+                  "host",
+                  {},
+                  "running",
+                  [],
+                ),
               ],
             },
           },

assets/components/HostMenu.vue

@@ -96,7 +96,7 @@
                     </span>
                   </router-link>
                   <template #content>
-                    <ContainerPopup :container="item as Container" />
+                    <ContainerPopup :container="item" />
                   </template>
                 </Popup>
               </li>

assets/components/LogViewer/EventSource.spec.ts

@@ -94,7 +94,19 @@ describe("<ContainerEventSource />", () => {
       },
       props: {
         streamSource: useContainerStream,
-        entity: new Container("abc", new Date(), "image", "name", "command", "localhost", {}, "created", []),
+        entity: new Container(
+          "abc",
+          new Date(), // created
+          new Date(), // started
+          new Date(), // finished
+          "image",
+          "name",
+          "command",
+          "localhost",
+          {},
+          "created",
+          [],
+        ),
       },
     });
   }

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,
       );
 

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,

assets/stores/container.ts

@@ -61,12 +61,13 @@ 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) {
           case "die":
             container.state = "exited";
+            container.finishedAt = new Date(event.time);
             break;
           case "destroy":
             container.state = "deleted";
@@ -75,6 +76,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.name = container.name;
+        existing.state = container.state;
+        existing.health = container.health;
+        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 +146,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,

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;

internal/docker/client.go

@@ -385,12 +385,16 @@ func newContainerFromJSON(c types.ContainerJSON, host string) Container {
 		Tty:     c.Config.Tty,
 	}
 
+	if createdAt, err := time.Parse(time.RFC3339Nano, c.Created); err == nil {
+		container.Created = createdAt.UTC()
+	}
+
 	if startedAt, err := time.Parse(time.RFC3339Nano, c.State.StartedAt); err == nil {
 		container.StartedAt = startedAt.UTC()
 	}
 
-	if createdAt, err := time.Parse(time.RFC3339Nano, c.Created); err == nil {
-		container.Created = createdAt.UTC()
+	if stoppedAt, err := time.Parse(time.RFC3339Nano, c.State.FinishedAt); err == nil {
+		container.FinishedAt = stoppedAt.UTC()
 	}
 
 	if c.State.Health != nil {

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")

internal/docker/types.go

@@ -12,19 +12,20 @@ import (
 
 // Container represents an internal representation of docker containers
 type Container struct {
-	ID        string                           `json:"id"`
-	Name      string                           `json:"name"`
-	Image     string                           `json:"image"`
-	Command   string                           `json:"command"`
-	Created   time.Time                        `json:"created"`
-	StartedAt time.Time                        `json:"startedAt,omitempty"`
-	State     string                           `json:"state"`
-	Health    string                           `json:"health,omitempty"`
-	Host      string                           `json:"host,omitempty"`
-	Tty       bool                             `json:"-"`
-	Labels    map[string]string                `json:"labels,omitempty"`
-	Stats     *utils.RingBuffer[ContainerStat] `json:"stats,omitempty"`
-	Group     string                           `json:"group,omitempty"`
+	ID         string                           `json:"id"`
+	Name       string                           `json:"name"`
+	Image      string                           `json:"image"`
+	Command    string                           `json:"command"`
+	Created    time.Time                        `json:"created"`
+	StartedAt  time.Time                        `json:"startedAt"`
+	FinishedAt time.Time                        `json:"finishedAt"`
+	State      string                           `json:"state"`
+	Health     string                           `json:"health,omitempty"`
+	Host       string                           `json:"host,omitempty"`
+	Tty        bool                             `json:"-"`
+	Labels     map[string]string                `json:"labels,omitempty"`
+	Stats      *utils.RingBuffer[ContainerStat] `json:"stats,omitempty"`
+	Group      string                           `json:"group,omitempty"`
 }
 
 // ContainerStat represent stats instant for a container
@@ -41,6 +42,7 @@ type ContainerEvent struct {
 	Host            string            `json:"host"`
 	ActorID         string            `json:"actorId"`
 	ActorAttributes map[string]string `json:"actorAttributes,omitempty"`
+	Time            time.Time         `json:"time"`
 }
 
 type ContainerFilter map[string][]string