feat: Query logs component #2879
Conversation
|
|
The latest updates on your projects. Learn more about Vercel for Git ↗︎
|
📝 WalkthroughWalkthroughThis pull request introduces a comprehensive update to the dashboard’s query management and icon libraries. New components such as LogsQueries, EmptyQueries, ListGroup, QueriesPopover, QueriesTabs, QueriesToast, and QueriesItemRow have been added, along with a new context and utility functions to format and manage query filters. Existing control layouts have been refactored to use modular components ( Changes
Sequence Diagram(s)sequenceDiagram
participant U as User
participant LQ as LogsQueries
participant QP as QueriesPopover
participant UF as useFilters / useBookmarkedFilters
participant LS as localStorage
U->>LQ: Click query toggle button
LQ->>QP: Open popover with filter props
QP->>UF: Retrieve & update filter state
UF->>LS: Persist filter changes
LS-->>UF: Return saved filters
QP-->>LQ: Render updated queries
Possibly related PRs
Suggested labels
Suggested reviewers
📜 Recent review detailsConfiguration used: CodeRabbit UI 📒 Files selected for processing (1)
🚧 Files skipped from review as they are similar to previous changes (1)
🪧 TipsChatThere are 3 ways to chat with CodeRabbit:
Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments. CodeRabbit Commands (Invoked using PR comments)
Other keywords and placeholders
CodeRabbit Configuration File (
|
|
Thank you for following the naming conventions for pull request titles! 🙏 |
… into query-logs-component
![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
🧹 Nitpick comments (6)
apps/dashboard/app/(app)/audit/components/controls/components/logs-queries/utils.ts (6)
48-48: Remove the accidentally mixed comment with code.There appears to be a leftover comment that includes what looks like old code definition for the
transformedvariable. This could cause confusion during maintenance.- // Handle special cases for different field types const transformed: Record<string, { operator: string; values: { value: string; color: string | null }[], icon: React.ReactNode }> = {}; + // Handle special cases for different field types
70-72: Simplify return statement in forEach callback.The callback is returning an empty array
[], but since this is inside aforEachloop, the return value is ignored. For better clarity, use a simplereturnstatement instead.if (field === "startTime" || field === "endTime" || field === "since" || field === "time") { - return []; + return; }
110-110: Remove debug console.log statement.Debug console.log statements should be removed before merging to production.
- console.log("field", field);
15-26: Consider a more flexible approach for status code handling.The current implementation only handles specific status codes (200, 400, 500). For better flexibility and maintenance, consider a more general approach that handles ranges (2xx, 4xx, 5xx).
case "status": return { - value: - value === "200" ? "2xx" : value === "400" ? "4xx" : value === "500" ? "5xx" : value, - color: - value === "200" - ? "bg-success-9" - : value === "400" - ? "bg-warning-9" - : value === "500" - ? "bg-error-9" - : null, + value: getStatusCodeLabel(value), + color: getStatusCodeColor(value), }; // Add these helper functions outside the main function function getStatusCodeLabel(statusCode: string): string { const code = parseInt(statusCode, 10); if (code >= 200 && code < 300) return "2xx"; if (code >= 400 && code < 500) return "4xx"; if (code >= 500 && code < 600) return "5xx"; return statusCode; } function getStatusCodeColor(statusCode: string): string | null { const code = parseInt(statusCode, 10); if (code >= 200 && code < 300) return "bg-success-9"; if (code >= 400 && code < 500) return "bg-warning-9"; if (code >= 500 && code < 600) return "bg-error-9"; return null; }
112-112: Improve type safety in shouldTruncateRow function.The function casts the input parameter to a specific type without validation. This could potentially cause issues if an invalid field is passed. Consider adding validation or using a more type-safe approach.
export function shouldTruncateRow(field: string): boolean { - return FieldsToTruncate.includes(field as (typeof FieldsToTruncate)[number]); + return FieldsToTruncate.includes(field as any); }Alternatively, for even better type safety:
export function shouldTruncateRow(field: string): boolean { - return FieldsToTruncate.includes(field as (typeof FieldsToTruncate)[number]); + // Check if the field is one of the values in FieldsToTruncate + return FieldsToTruncate.some(truncateField => truncateField === field); }
94-97: Consider adding error handling for iconsPerField access.The function directly accesses the
iconsPerFieldobject without checking if the field exists. While the fallback toChartActivity2handles undefined cases, explicit null/undefined checking would make the code more robust.export function getFilterFieldIcon(field: string): JSX.Element { - const Icon = iconsPerField[field] || ChartActivity2; + const Icon = field && iconsPerField[field] ? iconsPerField[field] : ChartActivity2; return React.createElement(Icon, { size: "md-regular", className: "justify-center" }); }
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (2)
apps/dashboard/app/(app)/audit/components/controls/components/logs-queries/index.tsx(1 hunks)apps/dashboard/app/(app)/audit/components/controls/components/logs-queries/utils.ts(1 hunks)
🚧 Files skipped from review as they are similar to previous changes (1)
- apps/dashboard/app/(app)/audit/components/controls/components/logs-queries/index.tsx
🧰 Additional context used
🧬 Code Definitions (1)
apps/dashboard/app/(app)/audit/components/controls/components/logs-queries/utils.ts (1)
apps/dashboard/app/(app)/ratelimits/[namespaceId]/logs/components/controls/components/logs-queries/utils.ts (4)
formatFilterValues(7-83)getFilterFieldIcon(85-88)FieldsToTruncate(90-97)shouldTruncateRow(99-101)
⏰ Context from checks skipped due to timeout of 90000ms (17)
- GitHub Check: Test Agent Local / test_agent_local
- GitHub Check: Test Packages / Test ./internal/clickhouse
- GitHub Check: Test Go API Local / Test (Shard 7/8)
- GitHub Check: Test Go API Local / Test (Shard 8/8)
- GitHub Check: Test Go API Local / Test (Shard 6/8)
- GitHub Check: Test Go API Local / Test (Shard 5/8)
- GitHub Check: Test Go API Local / Test (Shard 1/8)
- GitHub Check: Test Go API Local / Test (Shard 3/8)
- GitHub Check: Test Go API Local / Test (Shard 4/8)
- GitHub Check: Test Packages / Test ./packages/hono
- GitHub Check: Test Go API Local / Test (Shard 2/8)
- GitHub Check: Test Packages / Test ./packages/rbac
- GitHub Check: Test Packages / Test ./internal/id
- GitHub Check: Test Packages / Test ./internal/encryption
- GitHub Check: Test Packages / Test ./packages/api
- GitHub Check: Build / Build
- GitHub Check: Analyze (javascript-typescript)
🔇 Additional comments (1)
apps/dashboard/app/(app)/audit/components/controls/components/logs-queries/utils.ts (1)
1-114:❓ Verification inconclusive
Consider extracting shared logic to avoid duplication with ratelimits version.
There is significant code duplication between this file and the similar utility in
apps/dashboard/app/(app)/ratelimits/[namespaceId]/logs/components/controls/components/logs-queries/utils.ts. Consider extracting the common logic into a shared utility to improve maintainability.
🏁 Script executed:
#!/bin/bash # Find similar utility files to identify potential duplication echo "Searching for similar utility files..." fd utils.ts --full-path "**/logs-queries/" --exec echo "{}" | sortLength of output: 259
Extract Shared Logic to Eliminate Duplication
It appears that a similar implementation exists in both the audit and the ratelimits logs query utility files (i.e., in
apps/dashboard/app/(app)/audit/components/controls/components/logs-queries/utils.tsand
apps/dashboard/app/(app)/ratelimits/[namespaceId]/logs/components/controls/components/logs-queries/utils.ts). To improve maintainability, please refactor the duplicated logic—especially around the transformation functions likeformatFilterValues—into a shared utility module. This change should help avoid inconsistencies and reduce the future maintenance overhead.Before proceeding, please verify that the ratelimits version indeed contains similar logic and that the proposed consolidation will not affect any specialized behavior in either context.
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
New Features
Launched a comprehensive query management interface in the dashboard logs, featuring a popover with “Recent” and “Saved” tabs. Users can view query details including user info, timestamps, paths, methods, and status indicators, with interactive bookmark toggling and toast notifications.
Expanded the icon library with new visuals and an extra "2xl" size option for improved UI clarity.
Tests
Style
Summary by CodeRabbit
New Features
Added an interactive queries interface in the logs dashboard that lets users toggle query visibility, switch between recent and saved views, and quickly manage query filters.
Introduced intuitive empty state screens to guide users when no queries or filters are available.
New components for displaying query filters, including
ListGroup,StatusRow,MethodRow, and others to enhance user interaction.Enhancements
Improved filter management with flexible bookmarking and sorting.
Refined control layouts and spacing for a cleaner, more cohesive user experience.
Expanded the icon set for consistent visual feedback.
Tests
Summary by CodeRabbit
New Features
LogsQueriescomponent for managing audit log queries with filter states and a popover interface.QueriesPopoverfor selecting and managing saved queries with keyboard navigation support.Book2,Bookmark,Bucket, and more.ControlsContainer,ControlsLeft, andControlsRight.Tests