fix(ui): redo dashboard page design by yohamta0 · Pull Request #1547 · dagucloud/dagu

yohamta0 · 2026-01-01T14:11:12Z

Summary by CodeRabbit

New Features
- Added health indicators to dashboard for service status monitoring
- Enhanced toast notifications with smooth animations and improved visibility
Style
- Refined button styling with improved 3D effects
- Simplified UI layouts across queue and dashboard components by removing unnecessary iconography
- Improved visual hierarchy in metrics and status displays
Refactor
- Restructured dashboard layout for clearer information architecture
- Improved error messaging in schema documentation sidebar
- Optimized layout constraints for better scrolling behavior

_{✏️ Tip: You can customize this high-level summary in your review settings.}

coderabbitai · 2026-01-01T14:11:24Z

Important

Review skipped

Auto incremental reviews are disabled on this repository.

Please check the settings in the CodeRabbit UI or the .coderabbit.yaml file in this repository. To trigger a single review, invoke the @coderabbitai review command.

You can disable this status message by setting the reviews.review_status to false in the CodeRabbit configuration file.

📝 Walkthrough

Walkthrough

This PR redesigns dashboard and queue UI components, introduces a multi-state animation system for toast notifications, refactors metric presentation from icon-driven to text-based layouts, and refines button depth styling. Changes maintain existing public API signatures while significantly altering visual presentation and component structure across the dashboard interface.

Changes

Cohort / File(s)	Summary
Toast Animation System `ui/src/components/ui/simple-toast.tsx`	Replaced fading-based toast lifecycle with explicit animation state machine (entering, visible, exiting); introduced timed sequences for enter delay, checkmark draw, exit initiation, and removal; restructured DOM to full-viewport overlay with dark backdrop and animated circular checkmark; swapped CheckCircle icon to Check; increased default duration from 1500 to 1800 ms.
DAG Layout Refinements `ui/src/features/dags/components/dag-details/DAGDetailsContent.tsx`, `ui/src/features/dags/components/dag-editor/DAGSpec.tsx`, `ui/src/pages/dags/dag/index.tsx`	Removed fixed full-height constraints (h-full) and rigid minimum heights; replaced with flexible sizing (DAGSpec: min-h-0) to improve scroll/resize behavior in editor layouts.
Schema Editor UI `ui/src/features/dags/components/dag-editor/SchemaDocSidebar/SchemaDocSidebar.tsx`	Enhanced error state UI with BookOpen icon, "Schema unavailable" message, and explanatory text; updated retry button with RefreshCw icon and "Try again" label; added full-height centering and padding.
Dashboard Metrics Components `ui/src/features/dashboard/components/MiniResourceChart.tsx`, `ui/src/features/dashboard/components/WorkersSummary.tsx`, `ui/src/features/queues/components/QueueMetrics.tsx`	Transitioned from icon-heavy metric cards to compact, text-based metric displays; removed gradient fills in favor of solid colors (MiniResourceChart); replaced per-metric iconography with plain text labels; simplified utilization bar visuals with reduced height and static colors; replaced dense tooltip-driven metric grid with inline flex layout.
Queue Management `ui/src/features/queues/components/QueueCard.tsx`	Simplified header layout and removed conditional icon rendering; transitioned metrics from colored icons to text badges; updated date/time formatting; expanded DAGRunRow with adjusted padding and tabular-nums styling; reworked table headers and removed detailed queue metadata; modified empty-state and confirm modal messaging; updated button variants and removed dynamic color-coded visual cues.
Dashboard Layout Redesign `ui/src/pages/index.tsx`	Major restructuring from multi-block metric-card-driven layout to health-indicator-driven grid-based dashboard; consolidated icon imports; introduced health computations for scheduler and coordinator status; reorganized header with compact toolbar (DAG run filter, date picker, quick actions); repositioned WorkersSummary; replaced MiniServiceCard blocks with grid of MiniResourceChart blocks (CPU, Memory, Disk, Load); simplified metrics row with text-based counters; preserved modal behavior and error handling.
Global Button Styling `ui/src/styles/global.css`	Refined button depth styling across all variants (primary, secondary, outline, ghost, destructive); reduced bottom border thickness and added inset shadows for 3D effect; adjusted hover/active states; updated focus outline colors from ring to primary-based; refined link underline offset; updated comments and naming to reflect "Classic 3D" aesthetic.

Estimated code review effort

🎯 4 (Complex) | ⏱️ ~60 minutes

Pre-merge checks and finishing touches

❌ Failed checks (1 warning)

Check name	Status	Explanation	Resolution
Docstring Coverage	⚠️ Warning	Docstring coverage is 14.29% which is insufficient. The required threshold is 80.00%.	You can run `@coderabbitai generate docstrings` to improve docstring coverage.

✅ Passed checks (2 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The PR title 'fix(ui): redo dashboard page design' accurately describes the primary change: a comprehensive redesign of the dashboard page layout and visuals.

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.

❤️ Share

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

coderabbitai

Actionable comments posted: 2

Caution

Some comments are outside the diff and can’t be posted inline due to platform limitations.

⚠️ Outside diff range comments (1)

ui/src/components/ui/simple-toast.tsx (1)
161-167: Context undefined check is ineffective.

The check context === undefined will never be true because ToastContext has a default value (line 127-129). When used outside ToastProvider, it returns the default object with a no-op showToast, silently failing instead of throwing.

To properly detect missing provider, use null as the default or a separate sentinel:
🔎 Proposed fix
-export const ToastContext = React.createContext<ToastContextType>({
-  showToast: () => {},
-});
+export const ToastContext = React.createContext<ToastContextType | null>(null);

 export const useSimpleToast = () => {
   const context = React.useContext(ToastContext);
-  if (context === undefined) {
+  if (context === null) {
     throw new Error('useSimpleToast must be used within a ToastProvider');
   }
   return context;
 };
Also update ToastProvider to cast the value:
<ToastContext.Provider value={{ showToast }}>

🧹 Nitpick comments (6)

ui/src/components/ui/simple-toast.tsx (2)
64-79: Add accessibility attributes for screen readers.

The toast lacks ARIA attributes for accessibility. Per coding guidelines, interactive components should have appropriate ARIA labels. Toast notifications should announce to screen readers.
🔎 Proposed fix
       <div
+        role="status"
+        aria-live="polite"
+        aria-label={message}
         className={`
           pointer-events-auto
           flex flex-col items-center justify-center gap-3
138-140: Duration default mismatch.

showToast defaults to 1500ms (line 138) while SimpleToast defaults to 1800ms (line 13). Since ToastProvider always passes a duration, the 1800ms default is never used. Align these for clarity.
🔎 Proposed fix
-  const showToast = (message: string, duration = 1500) => {
+  const showToast = (message: string, duration = 1800) => {
     setToast({ message, duration, id: Date.now() });
   };
ui/src/features/queues/components/QueueCard.tsx (1)
197-231: Table structure is clean and accessible.

The table uses proper semantic markup (<thead>, <tbody>, <th>, <td>) with consistent styling. The tabular-nums class on numeric columns ensures proper alignment. Consider adding scope="col" to <th> elements for improved screen reader support.
🔎 Optional: Add scope attribute for accessibility
-<th className="text-left py-1 px-2 font-medium text-muted-foreground">
+<th scope="col" className="text-left py-1 px-2 font-medium text-muted-foreground">
   DAG
 </th>
Apply similarly to other <th> elements.
ui/src/pages/index.tsx (2)
368-385: Date input timezone logic is duplicated.

The timezone offset calculation for startOf('day') and endOf('day') appears both here and in the "Today" button handler (lines 388-396). Consider extracting this into a helper function for consistency and maintainability.
🔎 Extract timezone-aware date helpers
// Add near getDefaultDateRange
const getStartOfDay = React.useCallback((date: dayjs.Dayjs) => {
  return config.tzOffsetInSec !== undefined
    ? date.utcOffset(config.tzOffsetInSec / 60).startOf('day')
    : date.startOf('day');
}, [config.tzOffsetInSec]);

const getEndOfDay = React.useCallback((date: dayjs.Dayjs) => {
  return config.tzOffsetInSec !== undefined
    ? date.utcOffset(config.tzOffsetInSec / 60).endOf('day')
    : date.endOf('day');
}, [config.tzOffsetInSec]);

// Then use in handlers:
const startOfDay = getStartOfDay(date);
const endOfDay = getEndOfDay(date);
356-366: SelectTrigger height should use compact sizing.

Per coding guidelines, select boxes should be h-7 or smaller. The current h-9 is slightly larger than recommended. Consider reducing for consistency with the compact design system.
🔎 Reduce select trigger height
-<SelectTrigger className="h-9 w-[140px]">
+<SelectTrigger className="h-7 w-[140px]">
Also consider adjusting the Input height on line 384:
-className="h-9 w-[150px]"
+className="h-7 w-[150px]"
Based on coding guidelines: "Use small heights for form elements: select boxes h-7 or smaller".
ui/src/features/dashboard/components/MiniResourceChart.tsx (1)
15-27: Remove unused color prop from interface.

The color prop is declared but not destructured or used in the component. Since colors are hardcoded from CSS variables (hsl(var(--foreground) / ...)), this prop can be removed.
🔎 Remove unused color prop
 interface MiniResourceChartProps {
   title: string;
   data: MetricPoint[] | undefined;
-  color?: string;
   unit?: string;
   isLoading?: boolean;
   error?: string;
 }

📜 Review details

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between 8929468 and 50159bf.

📒 Files selected for processing (11)

ui/src/components/ui/simple-toast.tsx
ui/src/features/dags/components/dag-details/DAGDetailsContent.tsx
ui/src/features/dags/components/dag-editor/DAGSpec.tsx
ui/src/features/dags/components/dag-editor/SchemaDocSidebar/SchemaDocSidebar.tsx
ui/src/features/dashboard/components/MiniResourceChart.tsx
ui/src/features/dashboard/components/WorkersSummary.tsx
ui/src/features/queues/components/QueueCard.tsx
ui/src/features/queues/components/QueueMetrics.tsx
ui/src/pages/dags/dag/index.tsx
ui/src/pages/index.tsx
ui/src/styles/global.css

🧰 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 like dark: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 with whitespace-normal break-words
Use consistent metadata styling with bg-slate-200 dark:bg-slate-700 backgrounds and maintain text hierarchy with primary/secondary/muted text colors
Use flexbox-first layouts with min-h-0 and overflow-hidden to 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/features/dags/components/dag-details/DAGDetailsContent.tsx
ui/src/features/dags/components/dag-editor/DAGSpec.tsx
ui/src/features/dashboard/components/MiniResourceChart.tsx
ui/src/features/dags/components/dag-editor/SchemaDocSidebar/SchemaDocSidebar.tsx
ui/src/features/queues/components/QueueMetrics.tsx
ui/src/components/ui/simple-toast.tsx
ui/src/pages/dags/dag/index.tsx
ui/src/features/queues/components/QueueCard.tsx
ui/src/pages/index.tsx
ui/src/features/dashboard/components/WorkersSummary.tsx

ui/**/*.{ts,tsx}

📄 CodeRabbit inference engine (AGENTS.md)

ui/**/*.{ts,tsx}: The React + TypeScript frontend resides in ui/, with production bundles copied to internal/service/frontend/assets by make ui
UI code follows ESLint + Prettier (2-space indent) and Tailwind utilities; name React components in PascalCase (JobList.tsx) and hooks with use* (useJobs.ts)

Files:

ui/src/features/dags/components/dag-details/DAGDetailsContent.tsx
ui/src/features/dags/components/dag-editor/DAGSpec.tsx
ui/src/features/dashboard/components/MiniResourceChart.tsx
ui/src/features/dags/components/dag-editor/SchemaDocSidebar/SchemaDocSidebar.tsx
ui/src/features/queues/components/QueueMetrics.tsx
ui/src/components/ui/simple-toast.tsx
ui/src/pages/dags/dag/index.tsx
ui/src/features/queues/components/QueueCard.tsx
ui/src/pages/index.tsx
ui/src/features/dashboard/components/WorkersSummary.tsx

🧠 Learnings (6)