Skip to content

Feat: Sandbox details events table#300

Open
sarimrmalik wants to merge 25 commits intomainfrom
feat/sandbox-details-events-table
Open

Feat: Sandbox details events table#300
sarimrmalik wants to merge 25 commits intomainfrom
feat/sandbox-details-events-table

Conversation

@sarimrmalik
Copy link
Copy Markdown
Collaborator

@sarimrmalik sarimrmalik commented Apr 21, 2026

Ticket

Summary

  • Add a new "Events" tab to the sandbox details page that lists lifecycle events for the sandbox in a sortable table.
  • Introduce SandboxEventsPage, SandboxEventsTable, and supporting cells (timestamp with centisecond precision + inline copy, event-type badge with per-type icon, ID badge with copy) built on the shared Table primitives for consistency with the rest of the dashboard.
  • Add an EventTypeFilter so users can narrow events by lifecycle type, plus a clear empty state when no events match.
  • Wire up routing in urls.ts and the dashboard layout tabs so the new page is reachable from the sandbox details view.

Test plan

  • Manually verified the events tab on the sandbox details page: sorting by timestamp, filtering by event type, copy buttons for timestamp and event ID, and the empty state when no events are returned.
  • Confirmed the page renders correctly against the live sandbox events API on the Vercel preview deployment.

Images

image

- Introduced a new `SandboxEventsPage` component to display lifecycle events for sandboxes.
- Created `SandboxEventsTable` to present event data in a structured format with sorting capabilities.
- Updated routing in `urls.ts` to include a new endpoint for sandbox events.
- Enhanced the dashboard layout to include a new tab for events, improving navigation for users.

This implementation provides a comprehensive view of sandbox lifecycle events, enhancing user experience and data accessibility.
- Implemented sorting functionality for the events table based on timestamp.
- Added an empty state component to display a message when no events are available.
- Refactored the table rendering logic to improve readability and maintainability.
- Updated the SandboxEventsView to remove the previous empty frame and integrate the new empty state.

These changes improve the user experience by providing clear feedback when no events are present and allowing users to sort events effectively.
- Updated the timestamp formatting in the SandboxEventsTable to include centiseconds for improved precision.
- Introduced a new `CopyButtonInline` component to allow users to easily copy the formatted timestamp.
- Refactored the `formatLocalLogStyleTimestamp` function to support the new centisecond formatting option.

These changes enhance the user experience by providing more detailed timestamp information and improving usability with the copy functionality.
- Updated the layout of the EventTypeCell component to enhance visual clarity by removing unnecessary elements.
- Adjusted the styling to center the badge and improve overall alignment.

These changes streamline the component's presentation, contributing to a cleaner user interface.
- Introduced a new `types` query parameter in the OpenAPI specification for filtering sandbox lifecycle events by type.
- Implemented `listSandboxLifecycleEvents` method in the repository to support fetching events based on specified types.
- Created `EventTypeFilter` and `SandboxEventTypeBadge` components for filtering and displaying lifecycle event types in the UI.
- Updated `SandboxEventsView` to integrate the new filtering functionality, enhancing user experience by allowing users to filter events by type.

These changes improve the usability of the sandbox events feature by providing more control over the displayed data.
- Adjusted the styling of `DataTableCell` and `TimestampCell` components to improve visual consistency and alignment.
- Changed classes to center items and enhance layout, ensuring a more polished user interface.

These updates contribute to a cleaner and more user-friendly presentation of the events table.
- Switched from using `DataTable` to a new `Table` component for rendering the events table, enhancing consistency with the UI library.
- Introduced column width constants and improved cell rendering logic for better layout control.
- Updated the empty state presentation to align with the new table structure, ensuring a cohesive user experience.

These changes streamline the table implementation and improve the overall visual presentation of sandbox events.
…ndboxEventsTable

- Added a new `IdBadge` component to enhance the presentation of event IDs, providing a copy functionality and a more user-friendly display format.
- Updated `SandboxEventsTable` to utilize the `IdBadge`, improving the layout and styling of the ID column.
- Adjusted column widths and cell styles for better alignment and visual consistency across the table.

These changes enhance the user experience by making event IDs more accessible and visually appealing.
- Updated the styling of header cells in the SandboxEventsTable to include consistent padding and height adjustments.
- Improved visual alignment and consistency across the table headers, contributing to a more polished user interface.

These changes enhance the overall presentation of the events table, ensuring a better user experience.
@vercel
Copy link
Copy Markdown

vercel Bot commented Apr 21, 2026

The latest updates on your projects. Learn more about Vercel for GitHub.

Project Deployment Actions Updated (UTC)
web Ready Ready Preview, Comment Apr 29, 2026 8:02pm
web-juliett Ready Ready Preview, Comment Apr 29, 2026 8:02pm

Request Review

Copy link
Copy Markdown

@chatgpt-codex-connector chatgpt-codex-connector Bot left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

💡 Codex Review

Here are some automated review suggestions for this pull request.

Reviewed commit: 600ed23339

ℹ️ About Codex in GitHub

Codex has been enabled to automatically review pull requests in this repo. Reviews are triggered when you

  • Open a pull request for review
  • Mark a draft as ready
  • Comment "@codex review".

If Codex has suggestions, it will comment; otherwise it will react with 👍.

When you sign up for Codex through ChatGPT, Codex can also answer questions or update the PR, like "@codex address that feedback".

Comment thread src/core/modules/sandboxes/repository.server.ts Outdated
return <LoadingLayout />
}

const events = data?.events ?? []
Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

P2 Badge Render query failures instead of empty events state

The view treats missing data as [] and never checks isError/error, so failed sandbox.events requests are displayed as “No events found.” In failure scenarios (API 5xx/4xx or network issues), users get a misleading empty-state UI and no indication that loading actually failed, which makes troubleshooting and recovery difficult.

Useful? React with 👍 / 👎.

Comment thread src/features/dashboard/sandbox/events/view.tsx Outdated
Comment thread src/core/server/api/routers/sandbox.ts Outdated
Comment thread src/core/modules/sandboxes/repository.server.ts Outdated
…logic

- Eliminated the `listSandboxLifecycleEvents` method from the `SandboxesRepository` interface and its implementation, streamlining the repository structure.
- Updated the `sandboxRouter` to remove the associated query logic for listing sandbox lifecycle events, simplifying the API.
- Refactored the event filters in the `useSandboxEventFilters` hook to remove offset handling, enhancing clarity and reducing complexity.
- Adjusted the `SandboxEventsView` component to utilize the updated context for lifecycle events, improving data handling and presentation.

These changes enhance the overall codebase by reducing redundancy and improving the maintainability of the sandbox events feature.
- Removed unused lifecycle event variant logic from the SandboxEventTypeBadge component, defaulting to a single badge variant for clarity.
- Updated the SandboxEventsTable to reduce cell height and padding, enhancing the overall layout and visual consistency.
- Streamlined the EventTypeCell and EventIdCell components for improved alignment and presentation.

These changes improve the maintainability of the badge component and enhance the user interface of the events table.
…yling

- Expanded the SandboxEventTypeBadge component to include a mapping of lifecycle event types to icons, improving visual representation.
- Implemented schema validation for event types to ensure accurate icon rendering.
- Updated the EventTypeFilter button to use a secondary variant for better alignment with design standards.

These changes enhance the user interface and maintainability of the event components.
- Modified the EventTypeFilter button label for improved clarity and consistency with design standards.
- Adjusted column widths in the SandboxEventsTable to better fit content and enhance layout.
- Updated the CopyButtonInline component to use a button element for better accessibility and styling.

These changes enhance the user interface and improve the overall presentation of the events dashboard.
- Removed the MetadataIcon from the JsonPopover for a cleaner presentation.
- Introduced a new EventDetailsJsonCell component to encapsulate JSON rendering logic, improving code organization and readability.
- Updated the JsonPopover to display the JSON data more effectively, enhancing the user interface.

These changes improve the maintainability of the event details display and streamline the presentation of JSON data.
@sarimrmalik sarimrmalik changed the title Sandbox details events table Feat: Sandbox details events table Apr 23, 2026
@sarimrmalik sarimrmalik changed the title Feat: Sandbox details events table Feat/Sandbox details events table Apr 23, 2026
…d code

- Eliminated the 'types' query parameter from the OpenAPI specifications for sandbox events, simplifying the API.
- Updated the SandboxesRepository and related interfaces to reflect the removal of the 'types' option, enhancing clarity.
- Adjusted the sandbox events filter parameters to streamline the codebase.

These changes improve the maintainability of the API and related components by reducing complexity.
- Removed unused constants and functions related to sandbox lifecycle events, simplifying the codebase.
- Introduced a new event type mapping for icons and labels, enhancing clarity and maintainability.
- Updated components to utilize the new mapping and schema validation, improving the user interface and consistency across the dashboard.

These changes enhance the overall structure and readability of the event handling logic, making it easier to manage and extend in the future.
- Updated the variable name for the sandbox event data schema to follow PascalCase convention, enhancing code readability and consistency.
- Adjusted the usage of the renamed schema in the EventDetailsCell component to ensure proper parsing of event data.

These changes improve the clarity of the code and maintain a consistent naming convention across the project.
- Adjusted column widths in the SandboxEventsTable for improved layout and readability.
- Removed the EventDetailsCell and related JSON rendering logic, streamlining the event display.
- Updated the table structure to enhance clarity and maintainability.

These changes improve the overall presentation and organization of the events dashboard.
@sarimrmalik sarimrmalik changed the title Feat/Sandbox details events table Feat: Sandbox details events table Apr 29, 2026
- Replaced IconButton with Button for the copy action in the ID badge component.
- Adjusted button properties for improved styling and accessibility.
- Enhanced ID display with wider tracking for better readability.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant