feat: logs page v2 #2701
feat: logs page v2 #2701
Conversation
Add virtual list to table to prevent rendering lots of items at once. Since we store items in the memory as we fetch more item, list might get big enough to slow the page down, thats why we have to partially show them.
Add debounce to combobox filters and add shortcut del/backspace to remove combobox filters when focused
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 0
🧹 Outside diff range and nitpick comments (1)
apps/dashboard/lib/trpc/routers/workspace/optIntoBeta.ts (1)
48-51: Consider improving type safety and audit loggingTwo suggestions for improvement:
- Consider defining an explicit type for
betaFeaturesto ensure type safety:interface BetaFeatures { rbac: boolean; identities: boolean; ratelimit: boolean; logsPage: boolean; }
- The audit log description could be more specific about the feature being enabled:
- description: `Opted ${workspace.id} into beta: ${input.feature}`, + description: `Enabled beta feature "${input.feature}" for workspace ${workspace.id}`,Also applies to: 65-71
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
📒 Files selected for processing (1)
apps/dashboard/lib/trpc/routers/workspace/optIntoBeta.ts(2 hunks)
🔇 Additional comments (3)
apps/dashboard/lib/trpc/routers/workspace/optIntoBeta.ts (3)
48-51: LGTM! Implementation follows existing patterns
The new case for "logsPage" is well-structured and consistent with the existing implementation pattern.
11-11: Verify workspace schema compatibility
The AI summary mentions changes to internal/db/src/schema/workspaces.ts. Let's verify that the schema properly supports the new logsPage beta feature.
Also applies to: 48-51
✅ Verification successful
Schema compatibility confirmed
The workspace schema properly supports the logsPage beta feature. The schema in internal/db/src/schema/workspaces.ts includes logsPage as an optional boolean field within the betaFeatures JSON column, which aligns with its usage in the opt-in router.
🏁 Scripts executed
The following scripts were executed for the analysis:
Script:
#!/bin/bash
# Check if the workspace schema includes the logsPage feature
rg -t typescript "logsPage" internal/db/src/schema/workspaces.ts
# Check for any database migrations related to this change
fd -t f -e sql . db/migrations/
Length of output: 235
Script:
#!/bin/bash
# Let's try different approaches to locate the workspace schema and migrations
# Search for workspace schema files
fd workspace.*schema
# Search for workspace-related TypeScript files
fd -e ts workspace
# Search for migrations directory
fd migrations
# Search for logsPage feature across all files
rg "logsPage"
Length of output: 1224
Script:
#!/bin/bash
# Let's examine the workspace schema implementation
cat internal/db/src/schema/workspaces.ts
# Also check for any recent changes to the schema
rg -B3 -A3 "logsPage" internal/db/src/schema/workspaces.ts
Length of output: 4670
11-11: Verify frontend compatibility with the new feature enum
The addition of "logsPage" to the feature enum is a breaking change that requires corresponding updates in the frontend code.
✅ Verification successful
Frontend is properly integrated with the new feature enum
The codebase analysis shows that the logsPage feature is properly integrated in the frontend:
- Used in opt-in component (
components/opt-in.tsx) - Properly gated in navigation (
workspace-navigations.tsx) - Correctly checked in logs page (
logs/page.tsx) - Complete logs functionality implementation exists (
logs/directory)
🏁 Scripts executed
The following scripts were executed for the analysis:
Script:
#!/bin/bash
# Search for any frontend components or hooks that use this procedure
rg -t typescript -t tsx "optWorkspaceIntoBeta" apps/dashboard/
Length of output: 97
Script:
#!/bin/bash
# Search for any frontend components or hooks that use this procedure with correct file extensions
rg "optWorkspaceIntoBeta" apps/dashboard/ --type-add 'ts:*.{ts,tsx}' -t ts
Length of output: 364
Script:
#!/bin/bash
# Search for usage of the beta feature enum or opt-in functionality in frontend code
rg -A 3 "logsPage|optIntoBeta" apps/dashboard/ --type-add 'ts:*.{ts,tsx}' -t ts
# Also check for any components or pages related to logs functionality
fd -e tsx -e ts . apps/dashboard/ -x rg -l "logs?"
Length of output: 5838
There was a problem hiding this comment.
Actionable comments posted: 5
🧹 Outside diff range and nitpick comments (11)
apps/dashboard/styles/tailwind/base.css (2)
14-19: LGTM! Consider adding color documentation.The chart color variables are well-structured using HSL format. The semantic naming and color choices provide good visual distinction for data visualization.
Consider adding a comment block above these variables documenting their intended usage in charts (e.g., which chart types or data series should use which colors).
136-150: Consider using CSS variables for color values.The code block styling implementation is clean, but the line number color is hardcoded using rgba. Consider using a CSS variable for better theme consistency.
code .line::before { content: counter(step); counter-increment: step; width: 1rem; margin-right: 1.5rem; display: inline-block; text-align: right; - color: rgba(115, 138, 148, 0.4); + color: var(--content-subtle); }apps/dashboard/app/(app)/logs/query-state.ts (3)
13-13: Consider reordering status codes logically.The status codes array mixes success (200) and error codes (400, 500). Consider reordering them for better readability:
-export const STATUSES = [400, 500, 200] as const; +export const STATUSES = [200, 400, 500] as const;
12-12: Consider exporting TIMELINE_OPTIONS constant.Since TIMELINE_OPTIONS is used in the Timeline type definition, it should be exported for consistency and potential reuse.
-const TIMELINE_OPTIONS = ["1h", "3h", "6h", "12h", "24h"] as const; +export const TIMELINE_OPTIONS = ["1h", "3h", "6h", "12h", "24h"] as const;
17-25: Add JSDoc comments for better type documentation.Consider adding JSDoc comments to document the purpose and constraints of each field in the QuerySearchParams type.
+/** + * Search parameters for filtering logs + */ export type QuerySearchParams = { + /** Host to filter logs by */ host: string; + /** Specific request ID to search for */ requestId: string; + /** HTTP method to filter by */ method: string; + /** URL path pattern to match */ path: string; + /** Array of HTTP status codes to filter by */ responseStatuses: ResponseStatus[]; + /** Start timestamp in milliseconds */ startTime: number; + /** Optional end timestamp in milliseconds */ endTime?: number; };apps/dashboard/app/(app)/logs/components/filters/components/response-status.tsx (1)
14-18: Consider expanding HTTP status code coverageThe current implementation has several limitations:
- Missing 3XX (Redirection) status codes
- Using string IDs that are later converted to numbers
- Oversimplified grouping of status codes
Consider this improved implementation:
const checkboxItems = [ - { id: "500", label: "Error", description: "5XX error codes" }, - { id: "200", label: "Success", description: "2XX success codes" }, - { id: "400", label: "Warning", description: "4XX warning codes" }, + { id: 500, label: "Server Error", description: "5XX server error codes" }, + { id: 200, label: "Success", description: "2XX success codes" }, + { id: 400, label: "Client Error", description: "4XX client error codes" }, + { id: 300, label: "Redirection", description: "3XX redirection codes" }, ];apps/dashboard/app/(app)/logs/page.tsx (1)
28-30: Enhance the error message for better user experienceConsider providing a more user-friendly error message when workspace is not found.
- return <div>Workspace with tenantId: {tenantId} not found</div>; + return <div className="text-center p-4"> + <h2 className="text-lg font-semibold">Workspace Not Found</h2> + <p className="text-gray-600">The requested workspace could not be found. Please check your access permissions.</p> + </div>;apps/dashboard/app/(app)/logs/components/logs-table-loading-row.tsx (1)
1-16: Consider extracting grid layout configurationThe grid column sizes are currently hardcoded and duplicated from the parent table. Consider extracting these values into shared constants to maintain consistency and prevent synchronization issues.
+const GRID_LAYOUT = "grid-cols-[166px_72px_20%_1fr]"; + export const LoadingRow = () => ( - <div className="absolute w-full font-mono grid grid-cols-[166px_72px_20%_1fr] text-[13px] leading-[14px] mb-[1px] h-[26px]"> + <div className={`absolute w-full font-mono grid ${GRID_LAYOUT} text-[13px] leading-[14px] mb-[1px] h-[26px]`}>apps/dashboard/app/(app)/logs/components/logs-table.tsx (3)
12-14: Consider moving constants to a shared configuration fileThese table-related constants might be needed by other components (like LoadingRow). Consider moving them to a shared configuration file to maintain consistency across components.
27-32: Consider optimizing virtualizer configurationThe current configuration works but could be enhanced:
- Consider adjusting overscan based on viewport size for better performance
- Memoize the estimateSize callback to prevent unnecessary recalculations
+const estimateSize = () => ROW_HEIGHT; + const virtualizer = useVirtualizer({ count: isLoading ? SKELETON_ROWS : logs?.length ?? 0, getScrollElement: () => parentRef.current, - estimateSize: () => ROW_HEIGHT, + estimateSize, - overscan: 5, + overscan: Math.ceil(window.innerHeight / ROW_HEIGHT), });
66-182: Optimize rendering performanceConsider the following performance optimizations:
- Memoize complex className calculations
- Extract inline styles to constants
- Use CSS Grid template areas for layout
+const VIRTUAL_ITEM_STYLE = (start: number) => ({ + position: 'absolute', + top: `${start}px`, + width: '100%', +}); + +const useLogStyles = (log: Log, selectedLog: Log | null) => { + return useMemo(() => ({ + className: cn( + "font-mono grid grid-cols-[166px_72px_20%_1fr]", + "text-[13px] leading-[14px] mb-[1px] rounded-[5px]", + "h-[26px] cursor-pointer absolute top-0 left-0 w-full", + "hover:bg-background-subtle/90 pl-1", + STATUS_STYLES[getStatusClass(log.response_status)], + selectedLog && { + "opacity-50": selectedLog.request_id !== log.request_id, + "opacity-100": selectedLog.request_id === log.request_id, + } + ), + style: VIRTUAL_ITEM_STYLE(virtualRow.start), + }), [log, selectedLog]); +};
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
📒 Files selected for processing (11)
apps/dashboard/app/(app)/logs/components/chart.tsx(1 hunks)apps/dashboard/app/(app)/logs/components/filters/components/response-status.tsx(1 hunks)apps/dashboard/app/(app)/logs/components/log-details/components/log-footer.tsx(1 hunks)apps/dashboard/app/(app)/logs/components/logs-table-loading-row.tsx(1 hunks)apps/dashboard/app/(app)/logs/components/logs-table.tsx(1 hunks)apps/dashboard/app/(app)/logs/logs-page.tsx(1 hunks)apps/dashboard/app/(app)/logs/page.tsx(1 hunks)apps/dashboard/app/(app)/logs/query-state.ts(1 hunks)apps/dashboard/components/timestamp-info.tsx(1 hunks)apps/dashboard/styles/tailwind/base.css(3 hunks)apps/dashboard/styles/tailwind/typography.css(1 hunks)
🚧 Files skipped from review as they are similar to previous changes (4)
- apps/dashboard/app/(app)/logs/components/log-details/components/log-footer.tsx
- apps/dashboard/app/(app)/logs/logs-page.tsx
- apps/dashboard/components/timestamp-info.tsx
- apps/dashboard/app/(app)/logs/components/chart.tsx
🧰 Additional context used
📓 Learnings (1)
apps/dashboard/app/(app)/logs/components/logs-table.tsx (1)
Learnt from: ogzhanolguncu
PR: unkeyed/unkey#2143
File: apps/dashboard/app/(app)/logs/logs-page.tsx:77-83
Timestamp: 2024-12-03T14:17:08.016Z
Learning: The `<LogsTable />` component already implements virtualization to handle large datasets efficiently.
🔇 Additional comments (14)
apps/dashboard/styles/tailwind/base.css (1)
66-71: LGTM! Dark mode colors are well-balanced.
The dark mode chart colors maintain good visibility while preserving the semantic relationship with their light mode counterparts.
apps/dashboard/styles/tailwind/typography.css (1)
149-149: LGTM! Backtick is more appropriate for code snippets.
The change from single quote to backtick is more semantically correct for code snippets.
apps/dashboard/app/(app)/logs/query-state.ts (3)
33-34: Consider timezone handling for date ranges.
Using Date.now() directly might lead to timezone-related issues. Consider using a more robust date handling approach.
37-41: Add time range validation.
The current implementation doesn't validate if startTime is before endTime.
10-10: Verify usage of PickKeys type.
The PickKeys utility type appears to be unused in the current file.
apps/dashboard/app/(app)/logs/components/filters/components/response-status.tsx (4)
1-13: LGTM! Clean imports and well-defined interface.
The imports are appropriate and the CheckboxItemProps interface is well-typed with clear property names.
25-35: Fix state update race condition in handleItemChange
The function uses stale state when updating search params.
50-69: Enhance accessibility for the filter popover
The popover needs proper ARIA attributes and keyboard navigation.
73-86: LGTM! Well-structured checkbox component.
The CheckboxItem component follows good practices:
- Proper HTML semantics with labels
- Good accessibility support
- Clear visual hierarchy
apps/dashboard/app/(app)/logs/page.tsx (5)
1-12: LGTM: Clean initialization with proper imports
The imports are well-organized and the searchParamsCache initialization follows the nuqs library pattern correctly.
14-19: Remove unused params type annotation
The params property is defined in the type annotation but not used in the function.
48-50: Avoid exposing internal error details to users
The error message still includes internal details that should not be exposed to users.
52-52: LGTM: Clean component rendering
The LogsPage component is rendered with appropriate props for initial data and workspace identification.
36-46: Verify log fetching parameters handling
The log fetching includes multiple optional parameters. Let's verify the parameter handling in the clickhouse API.
apps/dashboard/app/(app)/logs/components/filters/components/response-status.tsx
Show resolved
Hide resolved
|
|
|
|
There was a problem hiding this comment.
We should not parse the body into key-values, and more importantly we should't uppercase their keys, it loses the information that this was actually json, and while we always expect json, the user might mess up and send us something invalid.
I'm good with optimistically calling JSON.stringify(JSON.parse(body), null, 2) in a try catch to try and format it nicely but falling back to displaying the raw string
| <div className="p-2 flex items-center">Time</div> | ||
| <div className="p-2 flex items-center">Status</div> | ||
| <div className="p-2 flex items-center">Request</div> | ||
| <div className="p-2 flex items-center">Message</div> |
There was a problem hiding this comment.
| <div className="p-2 flex items-center">Message</div> | |
| <div className="p-2 flex items-center">Response Body</div> |
| <div className="grid grid-cols-[166px_72px_20%_1fr] text-sm font-medium text-[#666666]"> | ||
| <div className="p-2 flex items-center">Time</div> | ||
| <div className="p-2 flex items-center">Status</div> | ||
| <div className="p-2 flex items-center">Request</div> |
There was a problem hiding this comment.
| <div className="p-2 flex items-center">Request</div> | |
| <div className="p-2 flex items-center">Path</div> |
I agree, yeah. Let's do this. |
Those are actually padded from left on purpose, but we can change that if we are not happy. |
It looks a bit off and unintentional, but maybe that's just me let's keep it as is for now to move quickly |
What does this PR do?
Fixes # (issue)
If there is not an issue for this, please create one first. This is used to tracking purposes and also helps use understand why this PR exists
Type of change
How should this be tested?
Checklist
Required
pnpm buildpnpm fmtconsole.logsgit pull origin mainAppreciated
Summary by CodeRabbit
Release Notes
New Features
LogsChartcomponent for visualizing log data with a bar chart.DatePickerWithRangecomponent for selecting custom date ranges.ResponseStatusfilter component for managing HTTP response status filters.SearchComboboxfor enhanced log search capabilities.Timelinecomponent for selecting time ranges for log filtering.LogsFilterscomponent to streamline log entry filtering.LogFooter,LogHeader,LogMetaSection, andLogSectioncomponents for detailed log entry views.LoadingRowcomponent to display loading states in the logs table.Improvements
ResizablePanelfor log details.LogsTablefor better performance with large datasets.TimestampInfocomponent.Bug Fixes
Documentation