Feat: Sandbox details events table#300
Open
sarimrmalik wants to merge 41 commits intomainfrom
Open
Conversation
- 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.
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
![chatgpt-codex-connector[bot]](https://avatars.githubusercontent.com/in/1144995?s=60&v=4){kind=small}
There was a problem hiding this comment.
💡 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".
![claude[bot]](https://avatars.githubusercontent.com/in/1236702?s=60&v=4){kind=small}
…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
changed the title
sarimrmalik
changed the title
…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.
|
We require contributors to sign our Contributor License Agreement, and we don't have @sarimrmalik on file. You can sign our CLA at https://e2b.dev/docs/cla . Once you've signed, post a comment here that says '@cla-bot check' |
- Updated the event type change handler to use safe parsing with SandboxLifecycleEventTypeSchema. - Added error handling to set the event type to null if parsing fails, ensuring robustness in user input handling. This change enhances the reliability of the EventTypeFilter component by preventing invalid event types from being processed.
|
We require contributors to sign our Contributor License Agreement, and we don't have @sarimrmalik on file. You can sign our CLA at https://e2b.dev/docs/cla . Once you've signed, post a comment here that says '@cla-bot check' |
- Removed hardcoded column width constants and replaced them with Tailwind CSS classes for improved styling flexibility. - This change enhances the responsiveness and maintainability of the SandboxEventsTable component.
|
We require contributors to sign our Contributor License Agreement, and we don't have @sarimrmalik on file. You can sign our CLA at https://e2b.dev/docs/cla . Once you've signed, post a comment here that says '@cla-bot check' |
- Updated the timestamp sorting button to use the new Button component for consistency in styling and improved accessibility. - Adjusted class names to align with the new component's design specifications, enhancing the overall appearance of the table header. This change aims to standardize UI components across the dashboard for better maintainability.
|
We require contributors to sign our Contributor License Agreement, and we don't have @sarimrmalik on file. You can sign our CLA at https://e2b.dev/docs/cla . Once you've signed, post a comment here that says '@cla-bot check' |
- Replaced the custom EventsEmptyState component with a direct implementation of TableEmptyState for improved clarity and reduced complexity. - This change enhances the maintainability of the SandboxEventsTable by streamlining the rendering logic for the empty state.
|
We require contributors to sign our Contributor License Agreement, and we don't have @sarimrmalik on file. You can sign our CLA at https://e2b.dev/docs/cla . Once you've signed, post a comment here that says '@cla-bot check' |
- Introduced useMemo for optimized parsing of event types, ensuring efficient updates based on filter changes. - Added useEffect to reset filters when parsing fails, improving error handling and robustness. - This change enhances the maintainability and reliability of the useSandboxEventFilters hook.
- Added a comment to clarify that sandbox lifecycle events are derived in ascending timestamp order. - This change improves code readability and understanding of the event ordering logic.
… options - Updated the WebhookAddEditDialog and its steps to utilize SandboxLifecycleEventTypeSchema for event handling instead of the deprecated WEBHOOK_EVENTS constant. - This change enhances maintainability by centralizing event definitions and ensuring consistency across the webhook configuration components.
ben-fornefeld
requested changes
May 6, 2026
Member
ben-fornefeld
left a comment
ben-fornefeld
left a comment
There was a problem hiding this comment.
a few general issues:
- we should have virtualization by default. check out the sandbox/template logs components and re-use where possible
- i cannot scroll the table right now if there is elements overflowing at the bottom. virtualization should address this
- Updated the Logs and SandboxLogs components to utilize VirtualizedTableLoaderBody and VirtualizedTableRow for improved performance and rendering efficiency. - Removed deprecated LogsLoaderBody and LogVirtualRow components, streamlining the codebase and enhancing maintainability. - This change aims to optimize the log viewing experience by leveraging virtualization techniques.
ben-fornefeld
requested changes
May 7, 2026
Member
ben-fornefeld
left a comment
ben-fornefeld
left a comment
There was a problem hiding this comment.
can you check and address these concerns:
- for the timestamp column width, it be determined based on the formatted string of now(). currently it appears to be truncated which is not ideal. it can change depending on which month / date is currently formatted.
- we should include the event data as a column. for visualization, we can show it the same way as metadata in the sandboxes list table.
- the filtering should be multi-checkboxable, meaning i can inspect multiple filtered event types not only select one event type or all
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
2 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Ticket
Summary
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 sharedTableprimitives for consistency with the rest of the dashboard.EventTypeFilterso users can narrow events by lifecycle type, plus a clear empty state when no events match.urls.tsand the dashboard layout tabs so the new page is reachable from the sandbox details view.Test plan
Images