{
if (e.key === "Escape") {
e.stopPropagation();
e.preventDefault();
onClose?.();
+ } else if (
+ e.key === "Tab" &&
+ !e.shiftKey &&
+ e.target === containerRef.current?.querySelector(".fb-date-apply")
+ ) {
+ e.preventDefault();
+ onCycleStep?.("forward", DATE_CUSTOM_APPLY);
} else {
e.stopPropagation();
}
}}
>
-
- {/* Left rail: presets with right-aligned date hints */}
-
-
Presets
- {DATE_RANGE_PRESETS.map((preset) => (
-
- ))}
-
-
- {/* Right: custom range */}
-
-
Custom range
-
-
- handleFromChange(e.target.value)}
- className="fb-date-input"
- />
-
-
-
- setToDate(e.target.value)}
- min={fromDate || undefined}
- className="fb-date-input"
- data-error={rangeError ? "" : undefined}
- aria-invalid={rangeError}
- aria-describedby={rangeError ? "fb-date-range-error" : undefined}
- />
- {rangeError && (
-
- “To” must be after “From”
-
- )}
-
-
-
-
- {/* Focus sentinel: the last focusable element inside the picker.
- When Tab exits Apply (or To when Apply is disabled), the browser naturally
- focuses this sentinel. onFocus immediately redirects back into the cycle,
- keeping focus trapped inside the filter bar. It must live inside the picker
- (inside the container) so handleBlur sees relatedTarget as within-container. */}
+
+ {/* Focus sentinel for keyboard cycling */}
})
+>;
+
+type ChartContextProps = {
+ config: ChartConfig;
+};
+
+const ChartContext = React.createContext(null);
+
+function useChart() {
+ const context = React.useContext(ChartContext);
+
+ if (!context) {
+ throw new Error("useChart must be used within a ");
+ }
+
+ return context;
+}
+
+const ChartContainer = React.forwardRef<
+ HTMLDivElement,
+ React.ComponentProps<"div"> & {
+ config: ChartConfig;
+ children: React.ComponentProps["children"];
+ }
+>(({ id, className, children, config, ...props }, ref) => {
+ const uniqueId = React.useId();
+ const chartId = `chart-${id || uniqueId.replace(/:/g, "")}`;
+
+ return (
+
+
+
+ {children}
+
+
+ );
+});
+ChartContainer.displayName = "Chart";
+
+const ChartStyle = ({ id, config }: { id: string; config: ChartConfig }) => {
+ const colorConfig = Object.entries(config).filter(([, config]) => config.theme || config.color);
+
+ if (!colorConfig.length) {
+ return null;
+ }
+
+ const cssString = Object.entries(THEMES)
+ .map(
+ ([theme, prefix]) => `
+${prefix} [data-chart=${id}] {
+${colorConfig
+ .map(([key, itemConfig]) => {
+ const color = itemConfig.theme?.[theme as keyof typeof THEMES] || itemConfig.color;
+ return color ? ` --color-${key}: ${color};` : null;
+ })
+ .filter(Boolean)
+ .join("\n")}
+}`,
+ )
+ .join("\n");
+
+ return ;
+};
+
+const ChartTooltip = RechartsPrimitive.Tooltip;
+
+const ChartTooltipContent = React.forwardRef<
+ HTMLDivElement,
+ React.ComponentProps &
+ React.ComponentProps<"div"> & {
+ hideLabel?: boolean;
+ hideIndicator?: boolean;
+ indicator?: "line" | "dot" | "dashed";
+ nameKey?: string;
+ labelKey?: string;
+ }
+>(
+ (
+ {
+ active,
+ payload,
+ className,
+ indicator = "dot",
+ hideLabel = false,
+ hideIndicator = false,
+ label,
+ labelFormatter,
+ labelClassName,
+ formatter,
+ color,
+ nameKey,
+ labelKey,
+ },
+ ref,
+ ) => {
+ const { config } = useChart();
+
+ const tooltipLabel = React.useMemo(() => {
+ if (hideLabel || !payload?.length) {
+ return null;
+ }
+
+ const [item] = payload;
+ const key = `${labelKey || item?.dataKey || item?.name || "value"}`;
+ const itemConfig = getPayloadConfigFromPayload(config, item, key);
+ const value =
+ !labelKey && typeof label === "string"
+ ? config[label as keyof typeof config]?.label || label
+ : itemConfig?.label;
+
+ if (labelFormatter) {
+ return {labelFormatter(value, payload)}
;
+ }
+
+ if (!value) {
+ return null;
+ }
+
+ return {value}
;
+ }, [label, labelFormatter, payload, hideLabel, labelClassName, config, labelKey]);
+
+ if (!active || !payload?.length) {
+ return null;
+ }
+
+ const nestLabel = payload.length === 1 && indicator !== "dot";
+
+ return (
+
+ {!nestLabel ? tooltipLabel : null}
+
+ {payload.map((item, index) => {
+ const key = `${nameKey || item.name || item.dataKey || "value"}`;
+ const itemConfig = getPayloadConfigFromPayload(config, item, key);
+ const indicatorColor = color || item.payload.fill || item.color;
+
+ return (
+
svg]:text-muted-foreground flex w-full flex-wrap items-stretch gap-2 [&>svg]:h-2.5 [&>svg]:w-2.5",
+ indicator === "dot" && "items-center",
+ )}
+ >
+ {formatter && item?.value !== undefined && item.name ? (
+ formatter(item.value, item.name, item, index, item.payload)
+ ) : (
+ <>
+ {itemConfig?.icon ? (
+
+ ) : (
+ !hideIndicator && (
+
+ )
+ )}
+
+
+ {nestLabel ? tooltipLabel : null}
+ {itemConfig?.label || item.name}
+
+ {item.value !== undefined && (
+
+ {item.value.toLocaleString("en-US")}
+
+ )}
+
+
+ )}
+
+ );
+ })}
+
+
+ {payload.map((item) => {
+ const key = `${nameKey || item.dataKey || "value"}`;
+ const itemConfig = getPayloadConfigFromPayload(config, item, key);
+
+ return (
+
svg]:text-muted-foreground flex items-center gap-1.5 [&>svg]:h-3 [&>svg]:w-3")}
+ >
+ {itemConfig?.icon && !hideIcon ? (
+
+ ) : (
+
+ )}
+ {itemConfig?.label}
+
+ );
+ })}
+
+
Resource Utilization
+
+
+ {RANGE_PRESETS.map((p) => (
+
+ ))}
+
+
+
+
+
+
+
+
+
+
+
+ {METRICS.map((metric) => (
+
+ ))}
+
+
+
+
+ {isLoading ? (
+
+
+
+
+ ) : error ? (
+
+
Failed to load utilization data
+
+
+
No utilization data for this range
+
Try selecting a different time range
+
+ Data may be incomplete — too many tasks in this range.
+
+ )}
+
+
+
+ );
+}
diff --git a/src/ui/src/features/dashboard/dashboard-content.tsx b/src/ui/src/features/dashboard/dashboard-content.tsx
index 76c03ae2e..ed1747fb3 100644
--- a/src/ui/src/features/dashboard/dashboard-content.tsx
+++ b/src/ui/src/features/dashboard/dashboard-content.tsx
@@ -14,12 +14,6 @@
//
// SPDX-License-Identifier: Apache-2.0
-/**
- * Dashboard Content (Client Component)
- *
- * Interactive dashboard content with hydrated data.
- */
-
"use client";
import { useMemo, useEffect } from "react";
@@ -34,10 +28,12 @@ import { cn } from "@/lib/utils";
import { getStatusDisplay, STATUS_STYLES } from "@/lib/workflows/workflow-constants";
import { WORKFLOW_STATUS_ICONS } from "@/lib/workflows/workflow-status-icons";
import { STATUS_PRESETS } from "@/lib/workflows/workflow-status-presets";
+import dynamic from "next/dynamic";
-// =============================================================================
-// Dashboard Content
-// =============================================================================
+const UtilizationChart = dynamic(
+ () => import("@/components/utilization-chart/utilization-chart").then((m) => ({ default: m.UtilizationChart })),
+ { ssr: false },
+);
interface DashboardContentProps {
/** Server-computed 24h cutoff (ISO string) — ensures query key matches between SSR and client */
@@ -184,6 +180,9 @@ export function DashboardContent({ submittedAfter }: DashboardContentProps) {