From 368646a7a382ed1763dd782bce69484760b02db7 Mon Sep 17 00:00:00 2001
From: Amir Raminfar <findamir@gmail.com>
Date: Mon, 13 Jan 2025 11:16:17 -0800
Subject: [PATCH] feat: improves toasts for mobile (#3547)

---
 .../LogViewer/ContainerEventLogItem.vue       |  66 -----------
 assets/components/common/ToastModal.vue       |  18 ++-
 assets/composable/toast.ts                    |  33 ++++--
 assets/pages/container/[id].vue               |  49 +++++++-
 internal/agent/client.go                      |   1 +
 internal/agent/pb/rpc.pb.go                   |   2 +-
 internal/agent/pb/rpc_grpc.pb.go              |   2 +-
 internal/agent/pb/types.pb.go                 | 109 ++++++++++--------
 internal/agent/server.go                      |   7 +-
 internal/docker/client.go                     |   1 +
 protos/types.proto                            |   1 +
 11 files changed, 159 insertions(+), 130 deletions(-)

diff --git a/assets/components/LogViewer/ContainerEventLogItem.vue b/assets/components/LogViewer/ContainerEventLogItem.vue
index c933b6d3..614cab99 100644
--- a/assets/components/LogViewer/ContainerEventLogItem.vue
+++ b/assets/components/LogViewer/ContainerEventLogItem.vue
@@ -2,80 +2,14 @@
   <LogItem :logEntry>
     <div class="whitespace-pre-wrap" :data-event="logEntry.event" v-html="logEntry.message"></div>
   </LogItem>
-
-  <div
-    class="alert alert-info my-4 w-auto flex-none font-sans text-[1rem] md:mx-auto md:w-1/2"
-    v-if="followEligible && showCard"
-  >
-    <carbon:information class="size-6 shrink-0 stroke-current" />
-    <div>
-      <h3 class="text-lg font-bold">{{ $t("alert.similar-container-found.title") }}</h3>
-      {{ $t("alert.similar-container-found.message", { containerId: nextContainer.id }) }}
-    </div>
-    <div>
-      <TimedButton
-        v-if="automaticRedirect"
-        class="btn-primary btn-sm"
-        @finished="redirectNow()"
-        @click="showCard = false"
-      >
-        {{ $t("button.cancel") }}
-      </TimedButton>
-      <router-link
-        :to="{ name: '/container/[id]', params: { id: nextContainer.id } }"
-        class="btn btn-primary btn-sm"
-        v-else
-      >
-        {{ $t("button.redirect") }}
-      </router-link>
-    </div>
-  </div>
 </template>
 <script lang="ts" setup>
 import { ContainerEventLogEntry } from "@/models/LogEntry";
-const router = useRouter();
-const { showToast } = useToast();
-const { t } = useI18n();
 
 const { logEntry } = defineProps<{
   logEntry: ContainerEventLogEntry;
   showContainerName?: boolean;
 }>();
-
-const showCard = ref(true);
-const { containers } = useLoggingContext();
-const store = useContainerStore();
-const { containers: allContainers } = storeToRefs(store);
-
-const nextContainer = computed(
-  () =>
-    [
-      ...allContainers.value.filter(
-        (c) => c.created > containers.value[0].created && c.name === containers.value[0].name,
-      ),
-    ].sort((a, b) => +a.created - +b.created)[0],
-);
-
-const followEligible = computed(
-  () =>
-    router.currentRoute.value.name === "/container/[id]" && // we are on a container page
-    logEntry.event === "container-stopped" && // container was stopped
-    containers.value.length === 1 && // only one container
-    Date.now() - +logEntry.date < 5 * 60 * 1000 && // was stopped in the last 5 minutes
-    nextContainer.value !== undefined, // there is a next container
-);
-
-function redirectNow() {
-  showToast(
-    {
-      title: t("alert.redirected.title"),
-      message: t("alert.redirected.message", { containerId: nextContainer.value?.id }),
-      type: "info",
-    },
-    { expire: 5000 },
-  );
-  router.push({ name: "/container/[id]", params: { id: nextContainer.value?.id } });
-}
 </script>
 
 <style scoped>
diff --git a/assets/components/common/ToastModal.vue b/assets/components/common/ToastModal.vue
index 07198f12..758b7b16 100644
--- a/assets/components/common/ToastModal.vue
+++ b/assets/components/common/ToastModal.vue
@@ -2,7 +2,7 @@
   <div class="toast toast-end whitespace-normal max-md:m-0 max-md:w-full">
     <div
       class="alert max-w-xl max-md:rounded-none"
-      v-for="toast in toasts"
+      v-for="{ toast, options: { timed } } in toasts"
       :key="toast.id"
       :class="{
         'alert-error': toast.type === 'error',
@@ -18,7 +18,21 @@
         <div v-html="toast.message" class="[&>a]:underline"></div>
       </div>
       <div>
-        <button class="btn btn-circle btn-xs" @click="removeToast(toast.id)"><mdi:close /></button>
+        <TimedButton
+          v-if="timed"
+          class="btn-primary btn-sm"
+          :duration="timed"
+          @finished="
+            removeToast(toast.id);
+            toast.action?.handler();
+          "
+          @cancelled="removeToast(toast.id)"
+        >
+          {{ toast.action?.label }}
+        </TimedButton>
+        <button class="btn btn-circle btn-xs" @click="removeToast(toast.id)" v-else>
+          <mdi:close />
+        </button>
       </div>
     </div>
   </div>
diff --git a/assets/composable/toast.ts b/assets/composable/toast.ts
index 1252f7e0..5a02edec 100644
--- a/assets/composable/toast.ts
+++ b/assets/composable/toast.ts
@@ -4,36 +4,55 @@ type Toast = {
   title?: string;
   message: string;
   type: "success" | "error" | "warning" | "info";
+  action?: {
+    label: string;
+    handler: () => void;
+  };
 };
 
 type ToastOptions = {
   expire?: number;
   once?: boolean;
+  timed?: number;
 };
 
-const toasts = ref<Toast[]>([]);
+const toasts = ref<
+  {
+    toast: Toast;
+    options: ToastOptions;
+  }[]
+>([]);
 
 const showToast = (
   toast: Omit<Toast, "id" | "createdAt"> & { id?: string },
-  { expire = -1, once = false }: ToastOptions = { expire: -1, once: false },
+  { expire = -1, once = false, timed }: ToastOptions = { expire: -1, once: false },
 ) => {
-  if (once && toasts.value.some((t) => t.id === toast.id)) {
+  if (once && !toast.id) {
+    throw new Error("Toast id is required when once is true");
+  }
+  if (once && toasts.value.some((t) => t.toast.id === toast.id)) {
     return;
   }
-  toasts.value.push({
+
+  const toastWithId = {
     id: Date.now().toString(),
-    createdAt: new Date(),
     ...toast,
+    createdAt: new Date(),
+  };
+  toasts.value.push({
+    toast: toastWithId,
+    options: { expire, once, timed },
   });
+
   if (expire > 0) {
     setTimeout(() => {
-      removeToast(toasts.value[0].id);
+      removeToast(toastWithId.id);
     }, expire);
   }
 };
 
 const removeToast = (id: Toast["id"]) => {
-  toasts.value = toasts.value.filter((toast) => toast.id !== id);
+  toasts.value = toasts.value.filter((instance) => instance.toast.id !== id);
 };
 
 export const useToast = () => {
diff --git a/assets/pages/container/[id].vue b/assets/pages/container/[id].vue
index 445d68cc..d1f2864c 100644
--- a/assets/pages/container/[id].vue
+++ b/assets/pages/container/[id].vue
@@ -11,15 +11,18 @@
 </template>
 
 <script lang="ts" setup>
+import { type Container } from "@/models/Container";
 const route = useRoute("/container/[id]");
 const id = toRef(() => route.params.id);
-
 const containerStore = useContainerStore();
 const currentContainer = containerStore.currentContainer(id);
 const { ready } = storeToRefs(containerStore);
-
 const pinnedLogsStore = usePinnedLogsStore();
 const { pinnedLogs } = storeToRefs(pinnedLogsStore);
+const { containers: allContainers } = storeToRefs(containerStore) as unknown as { containers: Ref<Container[]> };
+const { showToast } = useToast();
+const { t } = useI18n();
+const router = useRouter();
 
 watchEffect(() => {
   if (ready.value) {
@@ -30,6 +33,48 @@ watchEffect(() => {
     }
   }
 });
+
+const redirectTrigger = ref(false);
+watch(currentContainer, () => (redirectTrigger.value = false));
+
+watchEffect(() => {
+  if (redirectTrigger.value) return;
+  if (!currentContainer.value) return;
+  if (currentContainer.value.state === "running") return;
+  if (Date.now() - +currentContainer.value.finishedAt > 5 * 60 * 1000) return;
+
+  const nextContainer = allContainers.value
+    .filter((c) => c.startedAt > currentContainer.value.startedAt && c.name === currentContainer.value.name)
+    .sort((a, b) => +a.created - +b.created)[0];
+
+  if (!nextContainer) return;
+
+  if (automaticRedirect.value) {
+    redirectTrigger.value = true;
+    showToast(
+      {
+        title: t("alert.similar-container-found.title"),
+        message: t("alert.similar-container-found.message", { containerId: nextContainer.id }),
+        type: "info",
+        action: {
+          label: t("button.cancel"),
+          handler: () => {
+            showToast(
+              {
+                title: t("alert.redirected.title"),
+                message: t("alert.redirected.message", { containerId: nextContainer.id }),
+                type: "info",
+              },
+              { expire: 5000 },
+            );
+            router.push({ name: "/container/[id]", params: { id: nextContainer.id } });
+          },
+        },
+      },
+      { timed: 4000 },
+    );
+  }
+});
 </script>
 <route lang="yaml">
 meta:
diff --git a/internal/agent/client.go b/internal/agent/client.go
index 99d09ca6..eb02b1e9 100644
--- a/internal/agent/client.go
+++ b/internal/agent/client.go
@@ -236,6 +236,7 @@ func (c *Client) StreamEvents(ctx context.Context, events chan<- docker.Containe
 			ActorID: resp.Event.ActorId,
 			Name:    resp.Event.Name,
 			Host:    resp.Event.Host,
+			Time:    resp.Event.Timestamp.AsTime(),
 		}
 	}
 }
diff --git a/internal/agent/pb/rpc.pb.go b/internal/agent/pb/rpc.pb.go
index ac091c7b..f3874489 100644
--- a/internal/agent/pb/rpc.pb.go
+++ b/internal/agent/pb/rpc.pb.go
@@ -1,7 +1,7 @@
 // Code generated by protoc-gen-go. DO NOT EDIT.
 // versions:
 // 	protoc-gen-go v1.35.1
-// 	protoc        v5.29.2
+// 	protoc        v5.29.3
 // source: rpc.proto
 
 package pb
diff --git a/internal/agent/pb/rpc_grpc.pb.go b/internal/agent/pb/rpc_grpc.pb.go
index e7b03ed8..791d9109 100644
--- a/internal/agent/pb/rpc_grpc.pb.go
+++ b/internal/agent/pb/rpc_grpc.pb.go
@@ -1,7 +1,7 @@
 // Code generated by protoc-gen-go-grpc. DO NOT EDIT.
 // versions:
 // - protoc-gen-go-grpc v1.5.1
-// - protoc             v5.29.2
+// - protoc             v5.29.3
 // source: rpc.proto
 
 package pb
diff --git a/internal/agent/pb/types.pb.go b/internal/agent/pb/types.pb.go
index c2a560c3..99fcc0e1 100644
--- a/internal/agent/pb/types.pb.go
+++ b/internal/agent/pb/types.pb.go
@@ -1,7 +1,7 @@
 // Code generated by protoc-gen-go. DO NOT EDIT.
 // versions:
 // 	protoc-gen-go v1.35.1
-// 	protoc        v5.29.2
+// 	protoc        v5.29.3
 // source: types.proto
 
 package pb
@@ -493,9 +493,10 @@ type ContainerEvent struct {
 	sizeCache     protoimpl.SizeCache
 	unknownFields protoimpl.UnknownFields
 
-	ActorId string `protobuf:"bytes,1,opt,name=actorId,proto3" json:"actorId,omitempty"`
-	Name    string `protobuf:"bytes,2,opt,name=name,proto3" json:"name,omitempty"`
-	Host    string `protobuf:"bytes,3,opt,name=host,proto3" json:"host,omitempty"`
+	ActorId   string                 `protobuf:"bytes,1,opt,name=actorId,proto3" json:"actorId,omitempty"`
+	Name      string                 `protobuf:"bytes,2,opt,name=name,proto3" json:"name,omitempty"`
+	Host      string                 `protobuf:"bytes,3,opt,name=host,proto3" json:"host,omitempty"`
+	Timestamp *timestamppb.Timestamp `protobuf:"bytes,4,opt,name=timestamp,proto3" json:"timestamp,omitempty"`
 }
 
 func (x *ContainerEvent) Reset() {
@@ -549,6 +550,13 @@ func (x *ContainerEvent) GetHost() string {
 	return ""
 }
 
+func (x *ContainerEvent) GetTimestamp() *timestamppb.Timestamp {
+	if x != nil {
+		return x.Timestamp
+	}
+	return nil
+}
+
 type Host struct {
 	state         protoimpl.MessageState
 	sizeCache     protoimpl.SizeCache
@@ -755,44 +763,48 @@ var file_types_proto_rawDesc = []byte{
 	0x65, 0x18, 0x01, 0x20, 0x01, 0x28, 0x09, 0x52, 0x07, 0x6d, 0x65, 0x73, 0x73, 0x61, 0x67, 0x65,
 	0x22, 0x24, 0x0a, 0x0e, 0x43, 0x6f, 0x6d, 0x70, 0x6c, 0x65, 0x78, 0x4d, 0x65, 0x73, 0x73, 0x61,
 	0x67, 0x65, 0x12, 0x12, 0x0a, 0x04, 0x64, 0x61, 0x74, 0x61, 0x18, 0x01, 0x20, 0x01, 0x28, 0x0c,
-	0x52, 0x04, 0x64, 0x61, 0x74, 0x61, 0x22, 0x52, 0x0a, 0x0e, 0x43, 0x6f, 0x6e, 0x74, 0x61, 0x69,
-	0x6e, 0x65, 0x72, 0x45, 0x76, 0x65, 0x6e, 0x74, 0x12, 0x18, 0x0a, 0x07, 0x61, 0x63, 0x74, 0x6f,
-	0x72, 0x49, 0x64, 0x18, 0x01, 0x20, 0x01, 0x28, 0x09, 0x52, 0x07, 0x61, 0x63, 0x74, 0x6f, 0x72,
-	0x49, 0x64, 0x12, 0x12, 0x0a, 0x04, 0x6e, 0x61, 0x6d, 0x65, 0x18, 0x02, 0x20, 0x01, 0x28, 0x09,
-	0x52, 0x04, 0x6e, 0x61, 0x6d, 0x65, 0x12, 0x12, 0x0a, 0x04, 0x68, 0x6f, 0x73, 0x74, 0x18, 0x03,
-	0x20, 0x01, 0x28, 0x09, 0x52, 0x04, 0x68, 0x6f, 0x73, 0x74, 0x22, 0xaf, 0x03, 0x0a, 0x04, 0x48,
-	0x6f, 0x73, 0x74, 0x12, 0x0e, 0x0a, 0x02, 0x69, 0x64, 0x18, 0x01, 0x20, 0x01, 0x28, 0x09, 0x52,
-	0x02, 0x69, 0x64, 0x12, 0x12, 0x0a, 0x04, 0x6e, 0x61, 0x6d, 0x65, 0x18, 0x02, 0x20, 0x01, 0x28,
-	0x09, 0x52, 0x04, 0x6e, 0x61, 0x6d, 0x65, 0x12, 0x20, 0x0a, 0x0b, 0x6e, 0x6f, 0x64, 0x65, 0x41,
-	0x64, 0x64, 0x72, 0x65, 0x73, 0x73, 0x18, 0x03, 0x20, 0x01, 0x28, 0x09, 0x52, 0x0b, 0x6e, 0x6f,
-	0x64, 0x65, 0x41, 0x64, 0x64, 0x72, 0x65, 0x73, 0x73, 0x12, 0x14, 0x0a, 0x05, 0x73, 0x77, 0x61,
-	0x72, 0x6d, 0x18, 0x04, 0x20, 0x01, 0x28, 0x08, 0x52, 0x05, 0x73, 0x77, 0x61, 0x72, 0x6d, 0x12,
-	0x32, 0x0a, 0x06, 0x6c, 0x61, 0x62, 0x65, 0x6c, 0x73, 0x18, 0x05, 0x20, 0x03, 0x28, 0x0b, 0x32,
-	0x1a, 0x2e, 0x70, 0x72, 0x6f, 0x74, 0x6f, 0x62, 0x75, 0x66, 0x2e, 0x48, 0x6f, 0x73, 0x74, 0x2e,
-	0x4c, 0x61, 0x62, 0x65, 0x6c, 0x73, 0x45, 0x6e, 0x74, 0x72, 0x79, 0x52, 0x06, 0x6c, 0x61, 0x62,
-	0x65, 0x6c, 0x73, 0x12, 0x28, 0x0a, 0x0f, 0x6f, 0x70, 0x65, 0x72, 0x61, 0x74, 0x69, 0x6e, 0x67,
-	0x53, 0x79, 0x73, 0x74, 0x65, 0x6d, 0x18, 0x06, 0x20, 0x01, 0x28, 0x09, 0x52, 0x0f, 0x6f, 0x70,
-	0x65, 0x72, 0x61, 0x74, 0x69, 0x6e, 0x67, 0x53, 0x79, 0x73, 0x74, 0x65, 0x6d, 0x12, 0x1c, 0x0a,
-	0x09, 0x6f, 0x73, 0x56, 0x65, 0x72, 0x73, 0x69, 0x6f, 0x6e, 0x18, 0x07, 0x20, 0x01, 0x28, 0x09,
-	0x52, 0x09, 0x6f, 0x73, 0x56, 0x65, 0x72, 0x73, 0x69, 0x6f, 0x6e, 0x12, 0x16, 0x0a, 0x06, 0x6f,
-	0x73, 0x54, 0x79, 0x70, 0x65, 0x18, 0x08, 0x20, 0x01, 0x28, 0x09, 0x52, 0x06, 0x6f, 0x73, 0x54,
-	0x79, 0x70, 0x65, 0x12, 0x1a, 0x0a, 0x08, 0x63, 0x70, 0x75, 0x43, 0x6f, 0x72, 0x65, 0x73, 0x18,
-	0x09, 0x20, 0x01, 0x28, 0x0d, 0x52, 0x08, 0x63, 0x70, 0x75, 0x43, 0x6f, 0x72, 0x65, 0x73, 0x12,
-	0x16, 0x0a, 0x06, 0x6d, 0x65, 0x6d, 0x6f, 0x72, 0x79, 0x18, 0x0a, 0x20, 0x01, 0x28, 0x04, 0x52,
-	0x06, 0x6d, 0x65, 0x6d, 0x6f, 0x72, 0x79, 0x12, 0x22, 0x0a, 0x0c, 0x61, 0x67, 0x65, 0x6e, 0x74,
-	0x56, 0x65, 0x72, 0x73, 0x69, 0x6f, 0x6e, 0x18, 0x0b, 0x20, 0x01, 0x28, 0x09, 0x52, 0x0c, 0x61,
-	0x67, 0x65, 0x6e, 0x74, 0x56, 0x65, 0x72, 0x73, 0x69, 0x6f, 0x6e, 0x12, 0x24, 0x0a, 0x0d, 0x64,
-	0x6f, 0x63, 0x6b, 0x65, 0x72, 0x56, 0x65, 0x72, 0x73, 0x69, 0x6f, 0x6e, 0x18, 0x0c, 0x20, 0x01,
-	0x28, 0x09, 0x52, 0x0d, 0x64, 0x6f, 0x63, 0x6b, 0x65, 0x72, 0x56, 0x65, 0x72, 0x73, 0x69, 0x6f,
-	0x6e, 0x1a, 0x39, 0x0a, 0x0b, 0x4c, 0x61, 0x62, 0x65, 0x6c, 0x73, 0x45, 0x6e, 0x74, 0x72, 0x79,
-	0x12, 0x10, 0x0a, 0x03, 0x6b, 0x65, 0x79, 0x18, 0x01, 0x20, 0x01, 0x28, 0x09, 0x52, 0x03, 0x6b,
-	0x65, 0x79, 0x12, 0x14, 0x0a, 0x05, 0x76, 0x61, 0x6c, 0x75, 0x65, 0x18, 0x02, 0x20, 0x01, 0x28,
-	0x09, 0x52, 0x05, 0x76, 0x61, 0x6c, 0x75, 0x65, 0x3a, 0x02, 0x38, 0x01, 0x2a, 0x33, 0x0a, 0x0f,
-	0x43, 0x6f, 0x6e, 0x74, 0x61, 0x69, 0x6e, 0x65, 0x72, 0x41, 0x63, 0x74, 0x69, 0x6f, 0x6e, 0x12,
-	0x09, 0x0a, 0x05, 0x53, 0x74, 0x61, 0x72, 0x74, 0x10, 0x00, 0x12, 0x08, 0x0a, 0x04, 0x53, 0x74,
-	0x6f, 0x70, 0x10, 0x01, 0x12, 0x0b, 0x0a, 0x07, 0x52, 0x65, 0x73, 0x74, 0x61, 0x72, 0x74, 0x10,
-	0x02, 0x42, 0x13, 0x5a, 0x11, 0x69, 0x6e, 0x74, 0x65, 0x72, 0x6e, 0x61, 0x6c, 0x2f, 0x61, 0x67,
-	0x65, 0x6e, 0x74, 0x2f, 0x70, 0x62, 0x62, 0x06, 0x70, 0x72, 0x6f, 0x74, 0x6f, 0x33,
+	0x52, 0x04, 0x64, 0x61, 0x74, 0x61, 0x22, 0x8c, 0x01, 0x0a, 0x0e, 0x43, 0x6f, 0x6e, 0x74, 0x61,
+	0x69, 0x6e, 0x65, 0x72, 0x45, 0x76, 0x65, 0x6e, 0x74, 0x12, 0x18, 0x0a, 0x07, 0x61, 0x63, 0x74,
+	0x6f, 0x72, 0x49, 0x64, 0x18, 0x01, 0x20, 0x01, 0x28, 0x09, 0x52, 0x07, 0x61, 0x63, 0x74, 0x6f,
+	0x72, 0x49, 0x64, 0x12, 0x12, 0x0a, 0x04, 0x6e, 0x61, 0x6d, 0x65, 0x18, 0x02, 0x20, 0x01, 0x28,
+	0x09, 0x52, 0x04, 0x6e, 0x61, 0x6d, 0x65, 0x12, 0x12, 0x0a, 0x04, 0x68, 0x6f, 0x73, 0x74, 0x18,
+	0x03, 0x20, 0x01, 0x28, 0x09, 0x52, 0x04, 0x68, 0x6f, 0x73, 0x74, 0x12, 0x38, 0x0a, 0x09, 0x74,
+	0x69, 0x6d, 0x65, 0x73, 0x74, 0x61, 0x6d, 0x70, 0x18, 0x04, 0x20, 0x01, 0x28, 0x0b, 0x32, 0x1a,
+	0x2e, 0x67, 0x6f, 0x6f, 0x67, 0x6c, 0x65, 0x2e, 0x70, 0x72, 0x6f, 0x74, 0x6f, 0x62, 0x75, 0x66,
+	0x2e, 0x54, 0x69, 0x6d, 0x65, 0x73, 0x74, 0x61, 0x6d, 0x70, 0x52, 0x09, 0x74, 0x69, 0x6d, 0x65,
+	0x73, 0x74, 0x61, 0x6d, 0x70, 0x22, 0xaf, 0x03, 0x0a, 0x04, 0x48, 0x6f, 0x73, 0x74, 0x12, 0x0e,
+	0x0a, 0x02, 0x69, 0x64, 0x18, 0x01, 0x20, 0x01, 0x28, 0x09, 0x52, 0x02, 0x69, 0x64, 0x12, 0x12,
+	0x0a, 0x04, 0x6e, 0x61, 0x6d, 0x65, 0x18, 0x02, 0x20, 0x01, 0x28, 0x09, 0x52, 0x04, 0x6e, 0x61,
+	0x6d, 0x65, 0x12, 0x20, 0x0a, 0x0b, 0x6e, 0x6f, 0x64, 0x65, 0x41, 0x64, 0x64, 0x72, 0x65, 0x73,
+	0x73, 0x18, 0x03, 0x20, 0x01, 0x28, 0x09, 0x52, 0x0b, 0x6e, 0x6f, 0x64, 0x65, 0x41, 0x64, 0x64,
+	0x72, 0x65, 0x73, 0x73, 0x12, 0x14, 0x0a, 0x05, 0x73, 0x77, 0x61, 0x72, 0x6d, 0x18, 0x04, 0x20,
+	0x01, 0x28, 0x08, 0x52, 0x05, 0x73, 0x77, 0x61, 0x72, 0x6d, 0x12, 0x32, 0x0a, 0x06, 0x6c, 0x61,
+	0x62, 0x65, 0x6c, 0x73, 0x18, 0x05, 0x20, 0x03, 0x28, 0x0b, 0x32, 0x1a, 0x2e, 0x70, 0x72, 0x6f,
+	0x74, 0x6f, 0x62, 0x75, 0x66, 0x2e, 0x48, 0x6f, 0x73, 0x74, 0x2e, 0x4c, 0x61, 0x62, 0x65, 0x6c,
+	0x73, 0x45, 0x6e, 0x74, 0x72, 0x79, 0x52, 0x06, 0x6c, 0x61, 0x62, 0x65, 0x6c, 0x73, 0x12, 0x28,
+	0x0a, 0x0f, 0x6f, 0x70, 0x65, 0x72, 0x61, 0x74, 0x69, 0x6e, 0x67, 0x53, 0x79, 0x73, 0x74, 0x65,
+	0x6d, 0x18, 0x06, 0x20, 0x01, 0x28, 0x09, 0x52, 0x0f, 0x6f, 0x70, 0x65, 0x72, 0x61, 0x74, 0x69,
+	0x6e, 0x67, 0x53, 0x79, 0x73, 0x74, 0x65, 0x6d, 0x12, 0x1c, 0x0a, 0x09, 0x6f, 0x73, 0x56, 0x65,
+	0x72, 0x73, 0x69, 0x6f, 0x6e, 0x18, 0x07, 0x20, 0x01, 0x28, 0x09, 0x52, 0x09, 0x6f, 0x73, 0x56,
+	0x65, 0x72, 0x73, 0x69, 0x6f, 0x6e, 0x12, 0x16, 0x0a, 0x06, 0x6f, 0x73, 0x54, 0x79, 0x70, 0x65,
+	0x18, 0x08, 0x20, 0x01, 0x28, 0x09, 0x52, 0x06, 0x6f, 0x73, 0x54, 0x79, 0x70, 0x65, 0x12, 0x1a,
+	0x0a, 0x08, 0x63, 0x70, 0x75, 0x43, 0x6f, 0x72, 0x65, 0x73, 0x18, 0x09, 0x20, 0x01, 0x28, 0x0d,
+	0x52, 0x08, 0x63, 0x70, 0x75, 0x43, 0x6f, 0x72, 0x65, 0x73, 0x12, 0x16, 0x0a, 0x06, 0x6d, 0x65,
+	0x6d, 0x6f, 0x72, 0x79, 0x18, 0x0a, 0x20, 0x01, 0x28, 0x04, 0x52, 0x06, 0x6d, 0x65, 0x6d, 0x6f,
+	0x72, 0x79, 0x12, 0x22, 0x0a, 0x0c, 0x61, 0x67, 0x65, 0x6e, 0x74, 0x56, 0x65, 0x72, 0x73, 0x69,
+	0x6f, 0x6e, 0x18, 0x0b, 0x20, 0x01, 0x28, 0x09, 0x52, 0x0c, 0x61, 0x67, 0x65, 0x6e, 0x74, 0x56,
+	0x65, 0x72, 0x73, 0x69, 0x6f, 0x6e, 0x12, 0x24, 0x0a, 0x0d, 0x64, 0x6f, 0x63, 0x6b, 0x65, 0x72,
+	0x56, 0x65, 0x72, 0x73, 0x69, 0x6f, 0x6e, 0x18, 0x0c, 0x20, 0x01, 0x28, 0x09, 0x52, 0x0d, 0x64,
+	0x6f, 0x63, 0x6b, 0x65, 0x72, 0x56, 0x65, 0x72, 0x73, 0x69, 0x6f, 0x6e, 0x1a, 0x39, 0x0a, 0x0b,
+	0x4c, 0x61, 0x62, 0x65, 0x6c, 0x73, 0x45, 0x6e, 0x74, 0x72, 0x79, 0x12, 0x10, 0x0a, 0x03, 0x6b,
+	0x65, 0x79, 0x18, 0x01, 0x20, 0x01, 0x28, 0x09, 0x52, 0x03, 0x6b, 0x65, 0x79, 0x12, 0x14, 0x0a,
+	0x05, 0x76, 0x61, 0x6c, 0x75, 0x65, 0x18, 0x02, 0x20, 0x01, 0x28, 0x09, 0x52, 0x05, 0x76, 0x61,
+	0x6c, 0x75, 0x65, 0x3a, 0x02, 0x38, 0x01, 0x2a, 0x33, 0x0a, 0x0f, 0x43, 0x6f, 0x6e, 0x74, 0x61,
+	0x69, 0x6e, 0x65, 0x72, 0x41, 0x63, 0x74, 0x69, 0x6f, 0x6e, 0x12, 0x09, 0x0a, 0x05, 0x53, 0x74,
+	0x61, 0x72, 0x74, 0x10, 0x00, 0x12, 0x08, 0x0a, 0x04, 0x53, 0x74, 0x6f, 0x70, 0x10, 0x01, 0x12,
+	0x0b, 0x0a, 0x07, 0x52, 0x65, 0x73, 0x74, 0x61, 0x72, 0x74, 0x10, 0x02, 0x42, 0x13, 0x5a, 0x11,
+	0x69, 0x6e, 0x74, 0x65, 0x72, 0x6e, 0x61, 0x6c, 0x2f, 0x61, 0x67, 0x65, 0x6e, 0x74, 0x2f, 0x70,
+	0x62, 0x62, 0x06, 0x70, 0x72, 0x6f, 0x74, 0x6f, 0x33,
 }
 
 var (
@@ -831,12 +843,13 @@ var file_types_proto_depIdxs = []int32{
 	10, // 4: protobuf.Container.finished:type_name -> google.protobuf.Timestamp
 	11, // 5: protobuf.LogEvent.message:type_name -> google.protobuf.Any
 	10, // 6: protobuf.LogEvent.timestamp:type_name -> google.protobuf.Timestamp
-	9,  // 7: protobuf.Host.labels:type_name -> protobuf.Host.LabelsEntry
-	8,  // [8:8] is the sub-list for method output_type
-	8,  // [8:8] is the sub-list for method input_type
-	8,  // [8:8] is the sub-list for extension type_name
-	8,  // [8:8] is the sub-list for extension extendee
-	0,  // [0:8] is the sub-list for field type_name
+	10, // 7: protobuf.ContainerEvent.timestamp:type_name -> google.protobuf.Timestamp
+	9,  // 8: protobuf.Host.labels:type_name -> protobuf.Host.LabelsEntry
+	9,  // [9:9] is the sub-list for method output_type
+	9,  // [9:9] is the sub-list for method input_type
+	9,  // [9:9] is the sub-list for extension type_name
+	9,  // [9:9] is the sub-list for extension extendee
+	0,  // [0:9] is the sub-list for field type_name
 }
 
 func init() { file_types_proto_init() }
diff --git a/internal/agent/server.go b/internal/agent/server.go
index d47bc372..bfaaefaf 100644
--- a/internal/agent/server.go
+++ b/internal/agent/server.go
@@ -138,9 +138,10 @@ func (s *server) StreamEvents(in *pb.StreamEventsRequest, out pb.AgentService_St
 		case event := <-events:
 			out.Send(&pb.StreamEventsResponse{
 				Event: &pb.ContainerEvent{
-					ActorId: event.ActorID,
-					Name:    event.Name,
-					Host:    event.Host,
+					ActorId:   event.ActorID,
+					Name:      event.Name,
+					Host:      event.Host,
+					Timestamp: timestamppb.New(event.Time),
 				},
 			})
 		case <-out.Context().Done():
diff --git a/internal/docker/client.go b/internal/docker/client.go
index 9f6f8a5c..551f627f 100644
--- a/internal/docker/client.go
+++ b/internal/docker/client.go
@@ -292,6 +292,7 @@ func (d *httpClient) ContainerEvents(ctx context.Context, messages chan<- Contai
 					Name:            string(message.Action),
 					Host:            d.host.ID,
 					ActorAttributes: message.Actor.Attributes,
+					Time:            time.Now(),
 				}
 			}
 		}
diff --git a/protos/types.proto b/protos/types.proto
index 34c75544..c5b888f3 100644
--- a/protos/types.proto
+++ b/protos/types.proto
@@ -50,6 +50,7 @@ message ContainerEvent {
   string actorId = 1;
   string name = 2;
   string host = 3;
+  google.protobuf.Timestamp timestamp = 4;
 }
 
 message Host {