@@ -1849,15 +1929,19 @@ function MetricRow({ metric }: MetricRowProps) {
class={`px-5 py-3 flex items-center gap-4 cursor-pointer hover:bg-base-200/40 transition-colors ${
isExpanded ? 'bg-base-200/30' : ''
}`}
- params={{ expanded: isExpanded ? null : metric.id }}
+ params={{ expanded: isExpanded ? null : id }}
>
-
highlightSQL(e)}
- class='font-mono text-[13px] text-base-content/85 truncate'
- >
- {metric.query}
-
+ {isSql
+ ? (
+
highlightSQL(e)}
+ class='font-mono text-[13px] text-base-content/85 truncate'
+ >
+ {(metric as Metric).query}
+
+ )
+ :
}
- {isExpanded &&
}
+ {isExpanded && isSql &&
}
)
}
-function MetricsSummaryBar() {
- const totalDuration = formatDuration(stats.value.totalDuration)
+type SummaryItem = {
+ icon: LucideIcon
+ value: string | number
+ label: string
+}
+
+function MetricsSummaryBar({ items }: { items: SummaryItem[] }) {
return (
-
-
-
- {stats.value.totalCalls.toLocaleString()}
-
-
total calls
-
-
-
-
-
- {totalDuration.value} {totalDuration.unit}
-
- total time
-
-
-
-
- {stats.value.count}
- unique queries
-
+ {items.map((item, index) => (
+ <>
+ {index > 0 &&
}
+
+
+
+ {item.value}
+
+ {item.label}
+
+
+ ))}
)
}
-function MetricsEmpty() {
+type MetricsEmptyProps = {
+ icon: LucideIcon
+ title: string
+ description: string
+}
+
+const MetricsEmpty = (
+ { icon: Icon, title, description }: MetricsEmptyProps,
+) => {
return (
-
+
-
- No metrics recorded
-
+
{title}
- Execute database queries to see performance data here.
+ {description}
@@ -1957,6 +2039,100 @@ function MetricsEmpty() {
function MetricsViewer() {
const isPending = metricsData.pending
const sorted = sortedMetrics.value
+ const totalDuration = formatDuration(stats.value.totalDuration)
+
+ const items = [
+ {
+ icon: Activity,
+ value: stats.value.totalCalls.toLocaleString(),
+ label: 'total calls',
+ },
+ {
+ icon: Timer,
+ value: `${totalDuration.value} ${totalDuration.unit}`,
+ label: 'total time',
+ },
+ {
+ icon: BarChart2,
+ value: stats.value.count,
+ label: 'unique queries',
+ },
+ ]
+
+ return (
+
+ {!!isPending && (
+
+ )}
+
+
+ {sorted.map((metric) => (
+
+ ))}
+ {sorted.length === 0 && !isPending && (
+
+ )}
+
+
+ )
+}
+
+// ─── RouterMetricsViewer ────────────────────────────────────────────────────
+
+const sortedRouterMetrics = computed(() => {
+ const data = routerMetricsData.data || []
+ return [...data].sort((a, b) => b.duration - a.duration)
+})
+
+const routerStats = computed(() => {
+ const metrics = sortedRouterMetrics.value
+ return {
+ count: metrics.length,
+ totalCalls: metrics.reduce((acc, m) => acc + (m.count || 0), 0),
+ totalDuration: metrics.reduce((acc, m) => acc + (m.duration || 0), 0),
+ totalErrors: metrics.reduce((acc, m) => acc + (m.error || 0), 0),
+ totalSuccess: metrics.reduce((acc, m) => acc + (m.success || 0), 0),
+ }
+})
+
+function RouterMetricsViewer() {
+ const isPending = routerMetricsData.pending
+ const sorted = sortedRouterMetrics.value
+ const totalDuration = formatDuration(routerStats.value.totalDuration)
+ const errorRate = routerStats.value.totalCalls
+ ? ((routerStats.value.totalErrors / routerStats.value.totalCalls) * 100)
+ .toFixed(1)
+ : '0.0'
+
+ const items = [
+ {
+ icon: Activity,
+ value: routerStats.value.totalCalls.toLocaleString(),
+ label: 'total requests',
+ },
+ {
+ icon: Timer,
+ value: `${totalDuration.value} ${totalDuration.unit}`,
+ label: 'total time',
+ },
+ {
+ icon: Globe,
+ value: routerStats.value.count,
+ label: 'routes',
+ },
+ {
+ icon: XCircle,
+ value: `${errorRate}%`,
+ label: 'error rate',
+ },
+ ]
+
return (
{!!isPending && (
@@ -1964,10 +2140,18 @@ function MetricsViewer() {
)}
-
+
- {sorted.map((metric) => )}
- {sorted.length === 0 && !isPending && }
+ {sorted.map((metric) => (
+
+ ))}
+ {sorted.length === 0 && !isPending && (
+
+ )}