Feat: Sandbox details events table

src/app/dashboard/[teamSlug]/sandboxes/[sandboxId]/events/page.tsx

@@ -0,0 +1,5 @@
+import { SandboxEventsView } from '@/features/dashboard/sandbox/events'
+
+export default function SandboxEventsPage() {
+  return <SandboxEventsView />
+}

src/configs/urls.ts

@@ -32,6 +32,8 @@ export const PROTECTED_URLS = {
     `/dashboard/${teamSlug}/sandboxes/${sandboxId}/monitoring`,
   SANDBOX_MONITORING: (teamSlug: string, sandboxId: string) =>
     `/dashboard/${teamSlug}/sandboxes/${sandboxId}/monitoring`,
+  SANDBOX_EVENTS: (teamSlug: string, sandboxId: string) =>
+    `/dashboard/${teamSlug}/sandboxes/${sandboxId}/events`,
   SANDBOX_LOGS: (teamSlug: string, sandboxId: string) =>
     `/dashboard/${teamSlug}/sandboxes/${sandboxId}/logs`,
   SANDBOX_FILESYSTEM: (teamSlug: string, sandboxId: string) =>

src/core/modules/sandboxes/lifecycle-event-types.ts

@@ -0,0 +1,19 @@
+import { z } from 'zod'
+
+const SANDBOX_LIFECYCLE_EVENT_TYPE_PREFIX = 'sandbox.lifecycle.'
+
+const SandboxLifecycleEventTypeSchema = z.enum([
+  `${SANDBOX_LIFECYCLE_EVENT_TYPE_PREFIX}created`,
+  `${SANDBOX_LIFECYCLE_EVENT_TYPE_PREFIX}updated`,
+  `${SANDBOX_LIFECYCLE_EVENT_TYPE_PREFIX}paused`,
+  `${SANDBOX_LIFECYCLE_EVENT_TYPE_PREFIX}resumed`,
+  `${SANDBOX_LIFECYCLE_EVENT_TYPE_PREFIX}killed`,
+])
+
+type SandboxLifecycleEventType = z.infer<typeof SandboxLifecycleEventTypeSchema>
+
+export {
+  SANDBOX_LIFECYCLE_EVENT_TYPE_PREFIX,
+  SandboxLifecycleEventTypeSchema,
+  type SandboxLifecycleEventType,
+}

src/features/dashboard/build/logs.tsx

@@ -18,10 +18,12 @@ import { LogLevelFilter } from '@/features/dashboard/common/log-level-filter'
 import {
   LogStatusCell,
   LogsEmptyBody,
-  LogsLoaderBody,
   LogsTableHeader,
-  LogVirtualRow,
 } from '@/features/dashboard/common/log-viewer-ui'
+import {
+  VirtualizedTableLoaderBody,
+  VirtualizedTableRow,
+} from '@/features/dashboard/common/virtualized-table-ui'
 import { cn } from '@/lib/utils'
 import { Loader } from '@/ui/primitives/loader'
 import { Table, TableBody, TableCell } from '@/ui/primitives/table'
@@ -70,7 +72,7 @@ export default function Logs({
               levelWidth={COLUMN_WIDTHS_PX.level}
               timestampSortDirection="asc"
             />
-            <LogsLoaderBody />
+            <VirtualizedTableLoaderBody />
           </Table>
         </div>
       </div>
@@ -172,7 +174,7 @@ function LogsContent({
             timestampSortDirection="asc"
           />
 
-          {showLoader && <LogsLoaderBody />}
+          {showLoader && <VirtualizedTableLoaderBody />}
           {showEmpty && (
             <EmptyBody hasRetainedLogs={buildDetails.hasRetainedLogs} />
           )}
@@ -514,7 +516,7 @@ function LogRow({
   const millisAfterStart = log.timestampUnix - startedAt
 
   return (
-    <LogVirtualRow
+    <VirtualizedTableRow
       virtualRow={virtualRow}
       virtualizer={virtualizer}
       height={ROW_HEIGHT_PX}
@@ -551,7 +553,7 @@ function LogRow({
       >
         <Message message={log.message} />
       </TableCell>
-    </LogVirtualRow>
+    </VirtualizedTableRow>
   )
 }
 
@@ -567,7 +569,7 @@ function StatusRow({
   isFetchingNextPage,
 }: StatusRowProps) {
   return (
-    <LogVirtualRow
+    <VirtualizedTableRow
       virtualRow={virtualRow}
       virtualizer={virtualizer}
       height={ROW_HEIGHT_PX}
@@ -587,7 +589,7 @@ function StatusRow({
           )}
         </span>
       </LogStatusCell>
-    </LogVirtualRow>
+    </VirtualizedTableRow>
   )
 }
 
@@ -603,7 +605,7 @@ function LiveStatusRow({
   isBuilding,
 }: LiveStatusRowProps) {
   return (
-    <LogVirtualRow
+    <VirtualizedTableRow
       virtualRow={virtualRow}
       virtualizer={virtualizer}
       height={LIVE_STATUS_ROW_HEIGHT_PX}
@@ -628,6 +630,6 @@ function LiveStatusRow({
           </span>
         </span>
       </LogStatusCell>
-    </LogVirtualRow>
+    </VirtualizedTableRow>
   )
 }

src/features/dashboard/common/log-viewer-ui.tsx

@@ -1,8 +1,6 @@
-import type { VirtualItem, Virtualizer } from '@tanstack/react-virtual'
 import type { CSSProperties, ReactNode } from 'react'
 import { cn } from '@/lib/utils'
 import { ArrowDownIcon, ListIcon } from '@/ui/primitives/icons'
-import { Loader } from '@/ui/primitives/loader'
 import {
   TableBody,
   TableCell,
@@ -57,20 +55,6 @@ export function LogsTableHeader({
   )
 }
 
-export function LogsLoaderBody() {
-  return (
-    <TableBody style={{ display: 'grid' }}>
-      <TableRow style={{ display: 'flex', minWidth: '100%', marginTop: 8 }}>
-        <TableCell className="flex-1">
-          <div className="h-[35svh] w-full flex justify-center items-center">
-            <Loader variant="slash" size="lg" />
-          </div>
-        </TableCell>
-      </TableRow>
-    </TableBody>
-  )
-}
-
 interface LogsEmptyBodyProps {
   description?: ReactNode
 }
@@ -95,47 +79,6 @@ export function LogsEmptyBody({ description }: LogsEmptyBodyProps) {
   )
 }
 
-export function getLogVirtualRowStyle(
-  virtualRow: VirtualItem,
-  height: number
-): CSSProperties {
-  return {
-    display: 'flex',
-    position: 'absolute',
-    left: 0,
-    transform: `translateY(${virtualRow.start}px)`,
-    minWidth: '100%',
-    height,
-  }
-}
-
-interface LogVirtualRowProps {
-  virtualRow: VirtualItem
-  virtualizer: Virtualizer<HTMLDivElement, Element>
-  height: number
-  className?: string
-  children: ReactNode
-}
-
-export function LogVirtualRow({
-  virtualRow,
-  virtualizer,
-  height,
-  className,
-  children,
-}: LogVirtualRowProps) {
-  return (
-    <TableRow
-      data-index={virtualRow.index}
-      ref={(node) => virtualizer.measureElement(node)}
-      className={className}
-      style={getLogVirtualRowStyle(virtualRow, height)}
-    >
-      {children}
-    </TableRow>
-  )
-}
-
 const STATUS_ROW_CELL_STYLE: CSSProperties = {
   display: 'flex',
   alignItems: 'center',

src/features/dashboard/common/virtualized-table-ui.tsx

@@ -0,0 +1,53 @@
+import type { VirtualItem, Virtualizer } from '@tanstack/react-virtual'
+import type { CSSProperties, ReactNode } from 'react'
+import { Loader } from '@/ui/primitives/loader'
+import { TableBody, TableCell, TableRow } from '@/ui/primitives/table'
+
+export const getVirtualizedRowStyle = (
+  virtualRow: VirtualItem,
+  height: number
+): CSSProperties => ({
+  display: 'flex',
+  position: 'absolute',
+  left: 0,
+  transform: `translateY(${virtualRow.start}px)`,
+  minWidth: '100%',
+  height,
+})
+
+interface VirtualizedTableRowProps {
+  virtualRow: VirtualItem
+  virtualizer: Virtualizer<HTMLDivElement, Element>
+  height: number
+  className?: string
+  children: ReactNode
+}
+
+export const VirtualizedTableRow = ({
+  virtualRow,
+  virtualizer,
+  height,
+  className,
+  children,
+}: VirtualizedTableRowProps) => (
+  <TableRow
+    data-index={virtualRow.index}
+    ref={(node) => virtualizer.measureElement(node)}
+    className={className}
+    style={getVirtualizedRowStyle(virtualRow, height)}
+  >
+    {children}
+  </TableRow>
+)
+
+export const VirtualizedTableLoaderBody = () => (
+  <TableBody className="grid">
+    <TableRow className="flex min-w-full mt-2">
+      <TableCell className="flex-1">
+        <div className="h-[35svh] w-full flex justify-center items-center">
+          <Loader variant="slash" size="lg" />
+        </div>
+      </TableCell>
+    </TableRow>
+  </TableBody>
+)

src/features/dashboard/sandbox/events/event-type-badge.tsx

@@ -0,0 +1,24 @@
+import { SandboxLifecycleEventTypeSchema } from '@/core/modules/sandboxes/lifecycle-event-types'
+import { Badge } from '@/ui/primitives/badge'
+import { SANDBOX_EVENT_TYPE_MAP } from './event-type-map'
+
+export const SandboxEventTypeBadge = ({ type }: { type: string }) => {
+  const parsed = SandboxLifecycleEventTypeSchema.safeParse(type)
+
+  if (!parsed.success) {
+    return (
+      <Badge variant="default" size="sm" className="align-middle uppercase">
+        {type}
+      </Badge>
+    )
+  }
+
+  const { icon: IconComponent, label } = SANDBOX_EVENT_TYPE_MAP[parsed.data]
+
+  return (
+    <Badge variant="default" size="sm" className="align-middle uppercase">
+      <IconComponent />
+      {label}
+    </Badge>
+  )
+}

src/features/dashboard/sandbox/events/event-type-filter.tsx

@@ -0,0 +1,79 @@
+'use client'
+
+import {
+  type SandboxLifecycleEventType,
+  SandboxLifecycleEventTypeSchema,
+} from '@/core/modules/sandboxes/lifecycle-event-types'
+import { Button } from '@/ui/primitives/button'
+import {
+  DropdownMenu,
+  DropdownMenuCheckboxItem,
+  DropdownMenuContent,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger,
+} from '@/ui/primitives/dropdown-menu'
+import { SandboxEventTypeBadge } from './event-type-badge'
+import { SANDBOX_EVENT_TYPE_MAP } from './event-type-map'
+
+const getTriggerLabel = (selected: SandboxLifecycleEventType[]) => {
+  if (selected.length === SandboxLifecycleEventTypeSchema.options.length)
+    return 'All'
+  if (selected.length === 0) return 'None'
+  const [first] = selected
+  if (selected.length === 1 && first) return SANDBOX_EVENT_TYPE_MAP[first].label
+  return `${selected.length}/${SandboxLifecycleEventTypeSchema.options.length}`
+}
+
+interface EventTypeFilterProps {
+  types: SandboxLifecycleEventType[]
+  onTypesChange: (types: SandboxLifecycleEventType[]) => void
+}
+
+export const EventTypeFilter = ({
+  types,
+  onTypesChange,
+}: EventTypeFilterProps) => {
+  const isAllSelected =
+    types.length === SandboxLifecycleEventTypeSchema.options.length
+
+  const toggleType = (type: SandboxLifecycleEventType) => {
+    const next = types.includes(type)
+      ? types.filter((t) => t !== type)
+      : [...types, type]
+    onTypesChange(next)
+  }
+
+  const toggleAll = (checked: boolean) => {
+    onTypesChange(checked ? [...SandboxLifecycleEventTypeSchema.options] : [])
+  }
+
+  return (
+    <DropdownMenu>
+      <DropdownMenuTrigger asChild>
+        <Button variant="secondary" className="font-sans w-min normal-case">
+          Events · {getTriggerLabel(types)}
+        </Button>
+      </DropdownMenuTrigger>
+      <DropdownMenuContent align="start">
+        <DropdownMenuCheckboxItem
+          checked={isAllSelected}
+          onCheckedChange={toggleAll}
+          onSelect={(e) => e.preventDefault()}
+        >
+          All events
+        </DropdownMenuCheckboxItem>
+        <DropdownMenuSeparator />
+        {SandboxLifecycleEventTypeSchema.options.map((type) => (
+          <DropdownMenuCheckboxItem
+            key={type}
+            checked={types.includes(type)}
+            onCheckedChange={() => toggleType(type)}
+            onSelect={(e) => e.preventDefault()}
+          >
+            <SandboxEventTypeBadge type={type} />
+          </DropdownMenuCheckboxItem>
+        ))}
+      </DropdownMenuContent>
+    </DropdownMenu>
+  )
+}

src/features/dashboard/sandbox/events/event-type-map.ts

@@ -0,0 +1,22 @@
+import type { SandboxLifecycleEventType } from '@/core/modules/sandboxes/lifecycle-event-types'
+import {
+  BlockIcon,
+  CheckIcon,
+  type Icon,
+  PausedIcon,
+  RefreshIcon,
+  RunningIcon,
+} from '@/ui/primitives/icons'
+
+const SANDBOX_EVENT_TYPE_MAP: Record<
+  SandboxLifecycleEventType,
+  { icon: Icon; label: string }
+> = {
+  'sandbox.lifecycle.created': { icon: CheckIcon, label: 'Created' },
+  'sandbox.lifecycle.updated': { icon: RefreshIcon, label: 'Updated' },
+  'sandbox.lifecycle.paused': { icon: PausedIcon, label: 'Paused' },
+  'sandbox.lifecycle.resumed': { icon: RunningIcon, label: 'Resumed' },
+  'sandbox.lifecycle.killed': { icon: BlockIcon, label: 'Killed' },
+}
+
+export { SANDBOX_EVENT_TYPE_MAP }