Conversation
📝 WalkthroughWalkthroughThis PR introduces a new admin-only System Status page accessible at Changes
Estimated code review effort🎯 3 (Moderate) | ⏱️ ~25 minutes Possibly related PRs
🚥 Pre-merge checks | ✅ 2 | ❌ 1❌ Failed checks (1 warning)
✅ Passed checks (2 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. ✨ Finishing touches
📜 Recent review detailsConfiguration used: Organization UI Review profile: CHILL Plan: Pro 📒 Files selected for processing (5)
🧰 Additional context used📓 Path-based instructions (2)ui/**/*.{ts,tsx,jsx,js}📄 CodeRabbit inference engine (ui/CLAUDE.md)
Files:
ui/**/*.{ts,tsx}📄 CodeRabbit inference engine (AGENTS.md)
Files:
🧠 Learnings (2)📚 Learning: 2025-12-04T10:34:01.045ZApplied to files:
📚 Learning: 2025-12-04T10:34:01.045ZApplied to files:
🧬 Code graph analysis (3)ui/src/App.tsx (1)
ui/src/pages/system-status/index.tsx (1)
ui/src/features/system-status/components/ServiceCard.tsx (2)
⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (1)
🔇 Additional comments (8)
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Comment |
There was a problem hiding this comment.
Actionable comments posted: 0
Caution
Some comments are outside the diff and can’t be posted inline due to platform limitations.
⚠️ Outside diff range comments (1)
ui/src/pages/system-status/index.tsx (1)
248-255: Footer text misleading about refresh frequency.Line 252 states "Refreshing every 5 seconds" but the workers data source refreshes every 1 second (line 106). This creates user confusion about the actual refresh behavior.
Consider either:
- Updating the text to reflect multiple refresh intervals: "Refreshing every 1-5 seconds"
- Aligning all refresh intervals to 5 seconds (see previous comment)
- Removing the specific timing from the footer text
📝 Suggested text update
<div> Last updated: {lastUpdateTime.toLocaleTimeString()} - {autoRefresh && ' • Refreshing every 5 seconds'} + {autoRefresh && ' • Auto-refresh enabled'} </div>
📜 Review details
Configuration used: Organization UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (5)
ui/src/App.tsxui/src/features/system-status/components/ServiceCard.tsxui/src/menu.tsxui/src/pages/index.tsxui/src/pages/system-status/index.tsx
🧰 Additional context used
📓 Path-based instructions (2)
ui/**/*.{ts,tsx,jsx,js}
📄 CodeRabbit inference engine (ui/CLAUDE.md)
ui/**/*.{ts,tsx,jsx,js}: Use developer-centric UI design with high information density, minimal whitespace, compact components, and no unnecessary decorations
Support both light and dark modes for all UI components using Tailwind CSS class pairs likedark:bg-slate-700
NEVER use full-page loading overlays or LoadingIndicator components that hide content - show stale data while fetching updates instead
Use compact modal design with small headers, minimal padding (p-2 or p-3), tight spacing, and support keyboard navigation (arrows, enter, escape)
Use small heights for form elements: select boxes h-7 or smaller, buttons h-7 or h-8, inputs with compact padding (py-0.5 or py-1)
Minimize row heights in tables and lists while maintaining readability, merge related columns, and always handle long text withwhitespace-normal break-words
Use consistent metadata styling withbg-slate-200 dark:bg-slate-700backgrounds and maintain text hierarchy with primary/secondary/muted text colors
Use flexbox-first layouts withmin-h-0andoverflow-hiddento prevent layout breaks, account for fixed elements when setting heights
Maintain keyboard navigation support in all interactive components with appropriate focus indicators and ARIA labels
Files:
ui/src/App.tsxui/src/pages/system-status/index.tsxui/src/features/system-status/components/ServiceCard.tsxui/src/menu.tsxui/src/pages/index.tsx
ui/**/*.{ts,tsx}
📄 CodeRabbit inference engine (AGENTS.md)
ui/**/*.{ts,tsx}: The React + TypeScript frontend resides inui/, with production bundles copied tointernal/service/frontend/assetsbymake ui
UI code follows ESLint + Prettier (2-space indent) and Tailwind utilities; name React components in PascalCase (JobList.tsx) and hooks withuse*(useJobs.ts)
Files:
ui/src/App.tsxui/src/pages/system-status/index.tsxui/src/features/system-status/components/ServiceCard.tsxui/src/menu.tsxui/src/pages/index.tsx
🧠 Learnings (2)
📚 Learning: 2025-12-04T10:34:01.045Z
Learnt from: CR
Repo: dagu-org/dagu PR: 0
File: ui/CLAUDE.md:0-0
Timestamp: 2025-12-04T10:34:01.045Z
Learning: Applies to ui/**/*.{ts,tsx,jsx,js} : Minimize row heights in tables and lists while maintaining readability, merge related columns, and always handle long text with `whitespace-normal break-words`
Applied to files:
ui/src/pages/index.tsx
📚 Learning: 2025-12-04T10:34:01.045Z
Learnt from: CR
Repo: dagu-org/dagu PR: 0
File: ui/CLAUDE.md:0-0
Timestamp: 2025-12-04T10:34:01.045Z
Learning: Applies to ui/**/*.{ts,tsx,jsx,js} : Use developer-centric UI design with high information density, minimal whitespace, compact components, and no unnecessary decorations
Applied to files:
ui/src/pages/index.tsx
🧬 Code graph analysis (3)
ui/src/App.tsx (1)
ui/src/components/ProtectedRoute.tsx (1)
ProtectedRoute(19-45)
ui/src/pages/system-status/index.tsx (1)
ui/src/hooks/api.ts (1)
useQuery(28-28)
ui/src/features/system-status/components/ServiceCard.tsx (2)
ui/src/lib/utils.ts (1)
cn(4-6)internal/service/scheduler/scheduler.go (1)
Clock(37-37)
⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (1)
- GitHub Check: Build
🔇 Additional comments (8)
ui/src/pages/index.tsx (2)
184-186: LGTM: Simplified refresh logic.The simplified
handleRefreshAllnow correctly delegates to a single mutate call, consistent with the removal of system status data queries from this dashboard page.
343-351: LGTM: Timeline layout adjustment.The timeline container now uses
flex-1instead offlex-[2], which is appropriate for the simplified dashboard layout after system status sections were moved to the dedicated System Status page.ui/src/menu.tsx (1)
199-207: LGTM: Admin-only navigation item added correctly.The new System Status navigation item is properly gated with
isAdminand uses an appropriate Activity icon, following the same pattern as other admin-protected items in the sidebar.ui/src/App.tsx (1)
131-138: LGTM: Admin-protected route configured correctly.The new
/system-statusroute is properly protected withrequiredRole="admin"and follows the same pattern as other admin-only routes (users, api-keys, webhooks, etc.).ui/src/pages/system-status/index.tsx (2)
204-212: LGTM: Workers section integrated correctly.The WorkersSummary component is properly integrated with appropriate data, loading, and error props. The section placement between Services and Resource Usage makes logical sense.
92-108: Workers refresh interval is intentional to support real-time relative timestamp display.The 1-second refresh for workers (compared to 5 seconds for other data sources) serves a functional purpose: the
WorkersSummarycomponent displays relative timestamps for worker heartbeats (e.g., "Now", "30s", "5m") and updates its display every 1 second. Polling workers every 5 seconds would cause these timestamps to appear stale for up to 4.9 seconds. Additionally, with the 10-second worker health window, more frequent polling enables quicker detection of worker disconnections.If changing the polling interval, ensure the RelativeTime component's update logic is also adjusted to match, and confirm the heartbeat-based health detection still meets operational requirements.
ui/src/features/system-status/components/ServiceCard.tsx (2)
40-43: LGTM: Concise uptime formatting.The simplified uptime calculation returns clean, readable formats (e.g., "2d 5h", "3h 15m", "25m") that fit well in the compact per-instance layout.
52-102: LGTM: Simplified per-instance display improves clarity.The refactored ServiceCard removes the collapsible/expandable complexity in favor of a clean per-instance flat list. Each instance row shows:
- Status indicator with optional ping animation for active instances
- Host:port display in monospace font
- Uptime for active instances with Clock icon
The loading, error, and empty states are properly handled (lines 64-74), and the overall design follows the compact, high-density UI guidelines.
Summary by CodeRabbit
Release Notes
New Features
Changes
✏️ Tip: You can customize this high-level summary in your review settings.