Feat: Sandbox details events table#300
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.
|
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".
| return <LoadingLayout /> | ||
| } | ||
|
|
||
| const events = data?.events ?? [] |
There was a problem hiding this comment.
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 👍 / 👎.
…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.
…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.
- 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.
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