yunxiafei/openclaw-mission-control
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(metrics): extend time range options and update related metrics handling

Browse Source
This commit is contained in:
Abhimanyu Saharan
2026-02-12 19:29:58 +05:30
parent a2ab8b43b3
commit 8bd606a8dc
11 changed files with 368 additions and 127 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
frontend/src/api/generated/model/dashboardMetricsApiV1MetricsDashboardGetRangeKey.ts
View File

@@ -10,5 +10,11 @@ export type DashboardMetricsApiV1MetricsDashboardGetRangeKey =
export const DashboardMetricsApiV1MetricsDashboardGetRangeKey = {
"24h": "24h",
"3d": "3d",
"7d": "7d",
"14d": "14d",
"1m": "1m",
"3m": "3m",
"6m": "6m",
"1y": "1y",
} as const;

6
frontend/src/api/generated/model/dashboardMetricsRange.ts
View File

@@ -10,5 +10,11 @@ export type DashboardMetricsRange =
export const DashboardMetricsRange = {
"24h": "24h",
"3d": "3d",
"7d": "7d",
"14d": "14d",
"1m": "1m",
"3m": "3m",
"6m": "6m",
"1y": "1y",
} as const;

2
frontend/src/api/generated/model/dashboardRangeSeriesBucket.ts
View File

@@ -11,4 +11,6 @@ export type DashboardRangeSeriesBucket =
export const DashboardRangeSeriesBucket = {
hour: "hour",
day: "day",
week: "week",
month: "month",
} as const;

6
frontend/src/api/generated/model/dashboardRangeSeriesRange.ts
View File

@@ -10,5 +10,11 @@ export type DashboardRangeSeriesRange =
export const DashboardRangeSeriesRange = {
"24h": "24h",
"3d": "3d",
"7d": "7d",
"14d": "14d",
"1m": "1m",
"3m": "3m",
"6m": "6m",
"1y": "1y",
} as const;

1
frontend/src/api/generated/model/dashboardWipPoint.ts
View File

@@ -13,4 +13,5 @@ export interface DashboardWipPoint {
inbox: number;
in_progress: number;
review: number;
done: number;
}

2
frontend/src/api/generated/model/dashboardWipRangeSeriesBucket.ts
View File

@@ -11,4 +11,6 @@ export type DashboardWipRangeSeriesBucket =
export const DashboardWipRangeSeriesBucket = {
hour: "hour",
day: "day",
week: "week",
month: "month",
} as const;

6
frontend/src/api/generated/model/dashboardWipRangeSeriesRange.ts
View File

@@ -10,5 +10,11 @@ export type DashboardWipRangeSeriesRange =
export const DashboardWipRangeSeriesRange = {
"24h": "24h",
"3d": "3d",
"7d": "7d",
"14d": "14d",
"1m": "1m",
"3m": "3m",
"6m": "6m",
"1y": "1y",
} as const;

197
frontend/src/app/dashboard/page.tsx
View File

@@ -3,6 +3,7 @@
export const dynamic = "force-dynamic";
import { useMemo } from "react";
import { usePathname, useRouter, useSearchParams } from "next/navigation";
import { SignedIn, SignedOut, useAuth } from "@/auth/clerk";
import {
@@ -13,26 +14,28 @@ import {
CartesianGrid,
Line,
LineChart,
Legend,
ResponsiveContainer,
Tooltip,
XAxis,
YAxis,
} from "recharts";
import { Activity, Clock, PenSquare, Timer, Users } from "lucide-react";
import { Activity, PenSquare, Timer, Users } from "lucide-react";
import { DashboardSidebar } from "@/components/organisms/DashboardSidebar";
import { DashboardShell } from "@/components/templates/DashboardShell";
import MetricSparkline from "@/components/charts/metric-sparkline";
import DropdownSelect from "@/components/ui/dropdown-select";
import { SignedOutPanel } from "@/components/auth/SignedOutPanel";
import { ApiError } from "@/api/mutator";
import {
type dashboardMetricsApiV1MetricsDashboardGetResponse,
useDashboardMetricsApiV1MetricsDashboardGet,
} from "@/api/generated/metrics/metrics";
import type { DashboardMetricsApiV1MetricsDashboardGetRangeKey } from "@/api/generated/model/dashboardMetricsApiV1MetricsDashboardGetRangeKey";
import { parseApiDatetime } from "@/lib/datetime";
type RangeKey = "24h" | "7d";
type BucketKey = "hour" | "day";
type RangeKey = DashboardMetricsApiV1MetricsDashboardGetRangeKey;
type BucketKey = "hour" | "day" | "week" | "month";
type SeriesPoint = {
period: string;
@@ -44,6 +47,7 @@ type WipPoint = {
inbox: number;
in_progress: number;
review: number;
done: number;
};
type RangeSeries = {
@@ -63,17 +67,32 @@ const dayFormatter = new Intl.DateTimeFormat("en-US", {
month: "short",
day: "numeric",
});
const updatedFormatter = new Intl.DateTimeFormat("en-US", {
hour: "numeric",
minute: "2-digit",
const monthFormatter = new Intl.DateTimeFormat("en-US", {
month: "short",
year: "numeric",
});
const DASHBOARD_RANGE_OPTIONS: Array<{ value: RangeKey; label: string }> = [
{ value: "24h", label: "24 hours" },
{ value: "3d", label: "3 days" },
{ value: "7d", label: "7 days" },
{ value: "14d", label: "14 days" },
{ value: "1m", label: "1 month" },
{ value: "3m", label: "3 months" },
{ value: "6m", label: "6 months" },
{ value: "1y", label: "1 year" },
];
const DASHBOARD_RANGE_SET = new Set<RangeKey>(
DASHBOARD_RANGE_OPTIONS.map((option) => option.value),
);
const DEFAULT_RANGE: RangeKey = "7d";
const formatPeriod = (value: string, bucket: BucketKey) => {
const date = parseApiDatetime(value);
if (!date) return "";
return bucket === "hour"
? hourFormatter.format(date)
: dayFormatter.format(date);
if (bucket === "hour") return hourFormatter.format(date);
if (bucket === "month") return monthFormatter.format(date);
return dayFormatter.format(date);
};
const formatNumber = (value: number) => value.toLocaleString("en-US");
@@ -101,6 +120,7 @@ function buildWipSeries(series: WipRangeSeries) {
inbox: Number(point.inbox ?? 0),
in_progress: Number(point.in_progress ?? 0),
review: Number(point.review ?? 0),
done: Number(point.done ?? 0),
}));
}
@@ -110,6 +130,7 @@ function buildSparkline(series: RangeSeries) {
labels: series.points.map((point) =>
formatPeriod(point.period, series.bucket),
),
bucket: series.bucket,
};
}
@@ -119,6 +140,7 @@ function buildWipSparkline(series: WipRangeSeries, key: keyof WipPoint) {
labels: series.points.map((point) =>
formatPeriod(point.period, series.bucket),
),
bucket: series.bucket,
};
}
@@ -133,11 +155,11 @@ function TooltipCard({ active, payload, label, formatter }: TooltipProps) {
if (!active || !payload?.length) return null;
return (
<div className="rounded-lg bg-slate-900/95 px-3 py-2 text-xs text-slate-200 shadow-lg">
<div className="text-slate-400">{label}</div>
{label ? <div className="text-slate-400">Period: {label}</div> : null}
<div className="mt-1 space-y-1">
{payload.map((entry) => (
{payload.map((entry, index) => (
<div
key={entry.name}
key={`${entry.name ?? "value"}-${index}`}
className="flex items-center justify-between gap-3"
>
<span className="flex items-center gap-2">
@@ -145,9 +167,10 @@ function TooltipCard({ active, payload, label, formatter }: TooltipProps) {
className="h-2 w-2 rounded-full"
style={{ backgroundColor: entry.color }}
/>
{entry.name}
{entry.name ?? "Value"}
</span>
<span className="font-semibold text-slate-900">
<span className="font-semibold text-slate-100">
<span className="text-slate-400">Value: </span>
{formatter
? formatter(Number(entry.value ?? 0), entry.name)
: entry.value}
@@ -202,12 +225,10 @@ function ChartCard({
title,
subtitle,
children,
sparkline,
}: {
title: string;
subtitle: string;
children: React.ReactNode;
sparkline?: { values: number[]; labels: string[] };
}) {
return (
<div className="rounded-xl border border-slate-200 bg-white p-6 shadow-sm">
@@ -218,36 +239,27 @@ function ChartCard({
</h3>
<p className="mt-1 text-sm text-slate-500">{subtitle}</p>
</div>
<span className="rounded-full bg-slate-100 px-3 py-1.5 text-xs font-medium text-slate-500">
24h
</span>
</div>
<div className="h-56">{children}</div>
{sparkline ? (
<div className="mt-4 border-t border-slate-100 pt-4">
<div className="flex items-center gap-2 text-xs text-slate-500">
<span className="h-2 w-2 rounded-full bg-blue-500" />
7d trend
</div>
<MetricSparkline
values={sparkline.values}
labels={sparkline.labels}
bucket="week"
className="mt-2"
/>
</div>
) : null}
</div>
);
}
export default function DashboardPage() {
const { isSignedIn } = useAuth();
const pathname = usePathname();
const router = useRouter();
const searchParams = useSearchParams();
const selectedRangeParam = searchParams.get("range");
const selectedRange: RangeKey =
selectedRangeParam && DASHBOARD_RANGE_SET.has(selectedRangeParam as RangeKey)
? (selectedRangeParam as RangeKey)
: DEFAULT_RANGE;
const metricsQuery = useDashboardMetricsApiV1MetricsDashboardGet<
dashboardMetricsApiV1MetricsDashboardGetResponse,
ApiError
>(
{ range_key: "24h" },
{ range_key: selectedRange },
{
query: {
enabled: Boolean(isSignedIn),
@@ -277,21 +289,17 @@ export default function DashboardPage() {
[metrics],
);
const throughputSpark = useMemo(
() => (metrics ? buildSparkline(metrics.throughput.comparison) : null),
[metrics],
);
const cycleSpark = useMemo(
() => (metrics ? buildSparkline(metrics.cycle_time.comparison) : null),
() => (metrics ? buildSparkline(metrics.cycle_time.primary) : null),
[metrics],
);
const errorSpark = useMemo(
() => (metrics ? buildSparkline(metrics.error_rate.comparison) : null),
() => (metrics ? buildSparkline(metrics.error_rate.primary) : null),
[metrics],
);
const wipSpark = useMemo(
() =>
metrics ? buildWipSparkline(metrics.wip.comparison, "in_progress") : null,
metrics ? buildWipSparkline(metrics.wip.primary, "in_progress") : null,
[metrics],
);
@@ -309,13 +317,6 @@ export default function DashboardPage() {
[cycleSpark],
);
const updatedAtLabel = useMemo(() => {
if (!metrics?.generated_at) return null;
const date = parseApiDatetime(metrics.generated_at);
if (!date) return null;
return updatedFormatter.format(date);
}, [metrics]);
return (
<DashboardShell>
<SignedOut>
@@ -329,7 +330,7 @@ export default function DashboardPage() {
<DashboardSidebar />
<main className="flex-1 overflow-y-auto bg-slate-50">
<div className="border-b border-slate-200 bg-white px-8 py-6">
<div className="flex items-center justify-between">
<div className="flex items-center justify-between gap-4">
<div>
<h2 className="font-heading text-2xl font-semibold text-slate-900 tracking-tight">
Dashboard
@@ -338,12 +339,23 @@ export default function DashboardPage() {
Monitor your mission control operations
</p>
</div>
{updatedAtLabel ? (
<div className="flex items-center gap-2 text-sm text-slate-500">
<Clock className="h-4 w-4" />
Updated {updatedAtLabel}
</div>
) : null}
<div className="flex flex-wrap items-center justify-end gap-3">
<DropdownSelect
value={selectedRange}
onValueChange={(value) => {
const nextRange = value as RangeKey;
const params = new URLSearchParams(searchParams.toString());
params.set("range", nextRange);
router.replace(`${pathname}?${params.toString()}`);
}}
options={DASHBOARD_RANGE_OPTIONS}
ariaLabel="Dashboard date range"
placeholder="Select range"
searchEnabled={false}
triggerClassName="h-9 min-w-[150px] rounded-lg border border-slate-300 bg-white px-3 py-1.5 text-sm text-slate-700 shadow-sm focus:border-blue-500 focus:ring-2 focus:ring-blue-100"
contentClassName="rounded-lg border border-slate-200"
/>
</div>
</div>
</div>
<div className="p-8">
@@ -365,28 +377,24 @@ export default function DashboardPage() {
<KpiCard
label="Active agents"
value={formatNumber(metrics.kpis.active_agents)}
sublabel="Last 10 minutes"
icon={<Users className="h-4 w-4" />}
progress={activeProgress}
/>
<KpiCard
label="Tasks in progress"
value={formatNumber(metrics.kpis.tasks_in_progress)}
sublabel="Current WIP"
icon={<PenSquare className="h-4 w-4" />}
progress={wipProgress}
/>
<KpiCard
label="Error rate"
value={formatPercent(metrics.kpis.error_rate_pct)}
sublabel="24h average"
icon={<Activity className="h-4 w-4" />}
progress={errorProgress}
/>
<KpiCard
label="Median cycle time"
value={formatHours(metrics.kpis.median_cycle_time_hours_7d)}
sublabel="7d median"
icon={<Timer className="h-4 w-4" />}
progress={cycleProgress}
/>
@@ -396,7 +404,6 @@ export default function DashboardPage() {
<ChartCard
title="Completed Tasks"
subtitle="Throughput"
sparkline={throughputSpark ?? undefined}
>
<ResponsiveContainer width="100%" height="100%">
<BarChart
@@ -421,6 +428,17 @@ export default function DashboardPage() {
<TooltipCard formatter={(v) => formatNumber(v)} />
}
/>
<Legend
verticalAlign="bottom"
align="center"
iconType="circle"
iconSize={8}
wrapperStyle={{
paddingTop: "8px",
fontSize: "12px",
color: "#64748b",
}}
/>
<Bar
dataKey="value"
name="Completed"
@@ -434,7 +452,6 @@ export default function DashboardPage() {
<ChartCard
title="Avg Hours to Review"
subtitle="Cycle time"
sparkline={cycleSpark ?? undefined}
>
<ResponsiveContainer width="100%" height="100%">
<LineChart
@@ -461,6 +478,17 @@ export default function DashboardPage() {
/>
}
/>
<Legend
verticalAlign="bottom"
align="center"
iconType="circle"
iconSize={8}
wrapperStyle={{
paddingTop: "8px",
fontSize: "12px",
color: "#64748b",
}}
/>
<Line
type="monotone"
dataKey="value"
@@ -476,7 +504,6 @@ export default function DashboardPage() {
<ChartCard
title="Failed Events"
subtitle="Error rate"
sparkline={errorSpark ?? undefined}
>
<ResponsiveContainer width="100%" height="100%">
<LineChart
@@ -501,6 +528,17 @@ export default function DashboardPage() {
<TooltipCard formatter={(v) => formatPercent(v)} />
}
/>
<Legend
verticalAlign="bottom"
align="center"
iconType="circle"
iconSize={8}
wrapperStyle={{
paddingTop: "8px",
fontSize: "12px",
color: "#64748b",
}}
/>
<Line
type="monotone"
dataKey="value"
@@ -516,7 +554,6 @@ export default function DashboardPage() {
<ChartCard
title="Status Distribution"
subtitle="Work in progress"
sparkline={wipSpark ?? undefined}
>
<ResponsiveContainer width="100%" height="100%">
<AreaChart
@@ -541,13 +578,24 @@ export default function DashboardPage() {
<TooltipCard formatter={(v) => formatNumber(v)} />
}
/>
<Legend
verticalAlign="bottom"
align="center"
iconType="circle"
iconSize={8}
wrapperStyle={{
paddingTop: "8px",
fontSize: "12px",
color: "#64748b",
}}
/>
<Area
type="monotone"
dataKey="inbox"
name="Inbox"
stackId="wip"
fill="#dbeafe"
stroke="#93c5fd"
fill="#fed7aa"
stroke="#ea580c"
fillOpacity={0.8}
/>
<Area
@@ -555,8 +603,8 @@ export default function DashboardPage() {
dataKey="in_progress"
name="In progress"
stackId="wip"
fill="#93c5fd"
stroke="#2563eb"
fill="#bfdbfe"
stroke="#1d4ed8"
fillOpacity={0.8}
/>
<Area
@@ -564,10 +612,19 @@ export default function DashboardPage() {
dataKey="review"
name="Review"
stackId="wip"
fill="#60a5fa"
stroke="#1d4ed8"
fill="#e9d5ff"
stroke="#7e22ce"
fillOpacity={0.85}
/>
<Area
type="monotone"
dataKey="done"
name="Done"
stackId="wip"
fill="#bbf7d0"
stroke="#15803d"
fillOpacity={0.9}
/>
</AreaChart>
</ResponsiveContainer>
</ChartCard>