Skip to content

Commit 3299c65

Browse files
medevsmedevs
committed
Update cards to use real-time data from API
1 parent febae12 commit 3299c65

2 files changed

Lines changed: 110 additions & 72 deletions

File tree

‎frontend/components/sections/BenchmarksCard.tsx‎

Lines changed: 62 additions & 43 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
"use client";
22

33
import { motion } from "framer-motion";
4-
import { BarChart3 } from "lucide-react";
4+
import { BarChart3, Loader2 } from "lucide-react";
55
import {
66
Card,
77
CardContent,
@@ -10,9 +10,11 @@ import {
1010
CardTitle,
1111
} from "@/components/ui/card";
1212
import { Progress } from "@/components/ui/progress";
13-
import { benchmarks } from "@/data/metrics";
13+
import { useBenchmarks } from "@/hooks/useBenchmarks";
1414

1515
export function BenchmarksCard() {
16+
const { benchmarks, loading, error } = useBenchmarks();
17+
1618
return (
1719
<motion.div
1820
initial={{ opacity: 0, y: 20 }}
@@ -26,50 +28,67 @@ export function BenchmarksCard() {
2628
LLM Performance Benchmarks
2729
</CardTitle>
2830
<CardDescription className="text-amber-200/60">
29-
Comparative analysis of local models on my homelab
31+
{loading ? "Loading benchmarks..." : error ? "Unable to fetch benchmarks" : "Comparative analysis of local models on my homelab"}
3032
</CardDescription>
3133
</CardHeader>
3234
<CardContent>
33-
<div className="overflow-x-auto">
34-
<table className="w-full">
35-
<thead>
36-
<tr className="border-b border-amber-800/30">
37-
<th className="text-left py-3 px-4 text-amber-200">Model</th>
38-
<th className="text-left py-3 px-4 text-amber-200">Speed</th>
39-
<th className="text-left py-3 px-4 text-amber-200">Quality</th>
40-
<th className="text-left py-3 px-4 text-amber-200">Memory</th>
41-
</tr>
42-
</thead>
43-
<tbody>
44-
{benchmarks.map((bench, index) => (
45-
<motion.tr
46-
key={bench.model}
47-
initial={{ opacity: 0, x: -20 }}
48-
animate={{ opacity: 1, x: 0 }}
49-
transition={{ delay: 0.1 * index }}
50-
className="border-b border-amber-800/20 hover:bg-amber-900/20 transition-colors"
51-
>
52-
<td className="py-3 px-4 text-amber-100 font-medium">
53-
{bench.model}
54-
</td>
55-
<td className="py-3 px-4 text-amber-200/80">{bench.speed}</td>
56-
<td className="py-3 px-4">
57-
<div className="flex items-center gap-2">
58-
<Progress
59-
value={bench.quality}
60-
className="h-2 w-20 bg-amber-950/50"
61-
/>
62-
<span className="text-amber-200/80 text-sm">
63-
{bench.quality}%
64-
</span>
65-
</div>
66-
</td>
67-
<td className="py-3 px-4 text-amber-200/80">{bench.memory}</td>
68-
</motion.tr>
69-
))}
70-
</tbody>
71-
</table>
72-
</div>
35+
{loading ? (
36+
<div className="flex items-center justify-center py-8">
37+
<Loader2 className="w-6 h-6 text-amber-500 animate-spin" />
38+
</div>
39+
) : error ? (
40+
<div className="flex flex-col items-center justify-center py-8 text-center">
41+
<BarChart3 className="w-8 h-8 text-amber-500/50 mb-2" />
42+
<p className="text-amber-200/60 text-sm">{error}</p>
43+
<p className="text-amber-300/40 text-xs mt-1">Make sure the backend is running</p>
44+
</div>
45+
) : benchmarks.length === 0 ? (
46+
<div className="flex flex-col items-center justify-center py-8 text-center">
47+
<BarChart3 className="w-8 h-8 text-amber-500/50 mb-2" />
48+
<p className="text-amber-200/60 text-sm">No benchmarks available</p>
49+
</div>
50+
) : (
51+
<div className="overflow-x-auto">
52+
<table className="w-full">
53+
<thead>
54+
<tr className="border-b border-amber-800/30">
55+
<th className="text-left py-3 px-4 text-amber-200">Model</th>
56+
<th className="text-left py-3 px-4 text-amber-200">Speed</th>
57+
<th className="text-left py-3 px-4 text-amber-200">Quality</th>
58+
<th className="text-left py-3 px-4 text-amber-200">Memory</th>
59+
</tr>
60+
</thead>
61+
<tbody>
62+
{benchmarks.map((bench, index) => (
63+
<motion.tr
64+
key={bench.model}
65+
initial={{ opacity: 0, x: -20 }}
66+
animate={{ opacity: 1, x: 0 }}
67+
transition={{ delay: 0.1 * index }}
68+
className="border-b border-amber-800/20 hover:bg-amber-900/20 transition-colors"
69+
>
70+
<td className="py-3 px-4 text-amber-100 font-medium">
71+
{bench.model}
72+
</td>
73+
<td className="py-3 px-4 text-amber-200/80">{bench.speed}</td>
74+
<td className="py-3 px-4">
75+
<div className="flex items-center gap-2">
76+
<Progress
77+
value={bench.quality}
78+
className="h-2 w-20 bg-amber-950/50"
79+
/>
80+
<span className="text-amber-200/80 text-sm">
81+
{bench.quality}%
82+
</span>
83+
</div>
84+
</td>
85+
<td className="py-3 px-4 text-amber-200/80">{bench.memory}</td>
86+
</motion.tr>
87+
))}
88+
</tbody>
89+
</table>
90+
</div>
91+
)}
7392
</CardContent>
7493
</Card>
7594
</motion.div>

‎frontend/components/sections/SystemMetricsCard.tsx‎

Lines changed: 48 additions & 29 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
"use client";
22

33
import { motion } from "framer-motion";
4-
import { Activity } from "lucide-react";
4+
import { Activity, Loader2 } from "lucide-react";
55
import {
66
Card,
77
CardContent,
@@ -10,9 +10,11 @@ import {
1010
CardTitle,
1111
} from "@/components/ui/card";
1212
import { Badge } from "@/components/ui/badge";
13-
import { systemMetrics } from "@/data/metrics";
13+
import { useSystemMetrics } from "@/hooks/useSystemMetrics";
1414

1515
export function SystemMetricsCard() {
16+
const { metrics, loading, error } = useSystemMetrics();
17+
1618
return (
1719
<motion.div
1820
initial={{ opacity: 0, y: 20 }}
@@ -26,37 +28,54 @@ export function SystemMetricsCard() {
2628
Live System Status
2729
</CardTitle>
2830
<CardDescription className="text-amber-200/60">
29-
Homelab metrics in real-time
31+
{loading ? "Loading metrics..." : error ? "Unable to fetch metrics" : "Homelab metrics in real-time"}
3032
</CardDescription>
3133
</CardHeader>
3234
<CardContent className="space-y-4">
33-
{systemMetrics.map((metric, index) => (
34-
<motion.div
35-
key={metric.label}
36-
initial={{ opacity: 0, scale: 0.9 }}
37-
animate={{ opacity: 1, scale: 1 }}
38-
transition={{ delay: 0.1 * index }}
39-
className="flex items-center justify-between p-3 rounded-lg bg-amber-950/30 border border-amber-800/30"
40-
>
41-
<div className="flex items-center gap-3">
42-
<div className="text-amber-500">{metric.icon}</div>
43-
<div>
44-
<p className="text-sm text-amber-200/60">{metric.label}</p>
45-
<p className="text-lg font-semibold text-amber-100">
46-
{metric.value}
47-
</p>
35+
{loading ? (
36+
<div className="flex items-center justify-center py-8">
37+
<Loader2 className="w-6 h-6 text-amber-500 animate-spin" />
38+
</div>
39+
) : error ? (
40+
<div className="flex flex-col items-center justify-center py-8 text-center">
41+
<Activity className="w-8 h-8 text-amber-500/50 mb-2" />
42+
<p className="text-amber-200/60 text-sm">{error}</p>
43+
<p className="text-amber-300/40 text-xs mt-1">Make sure the backend is running</p>
44+
</div>
45+
) : metrics.length === 0 ? (
46+
<div className="flex flex-col items-center justify-center py-8 text-center">
47+
<Activity className="w-8 h-8 text-amber-500/50 mb-2" />
48+
<p className="text-amber-200/60 text-sm">No metrics available</p>
49+
</div>
50+
) : (
51+
metrics.map((metric, index) => (
52+
<motion.div
53+
key={metric.label}
54+
initial={{ opacity: 0, scale: 0.9 }}
55+
animate={{ opacity: 1, scale: 1 }}
56+
transition={{ delay: 0.1 * index }}
57+
className="flex items-center justify-between p-3 rounded-lg bg-amber-950/30 border border-amber-800/30"
58+
>
59+
<div className="flex items-center gap-3">
60+
<div className="text-amber-500">{metric.icon}</div>
61+
<div>
62+
<p className="text-sm text-amber-200/60">{metric.label}</p>
63+
<p className="text-lg font-semibold text-amber-100">
64+
{metric.value}
65+
</p>
66+
</div>
4867
</div>
49-
</div>
50-
{metric.trend && (
51-
<Badge
52-
variant="outline"
53-
className="border-amber-700/50 text-amber-300"
54-
>
55-
{metric.trend}
56-
</Badge>
57-
)}
58-
</motion.div>
59-
))}
68+
{metric.trend && (
69+
<Badge
70+
variant="outline"
71+
className="border-amber-700/50 text-amber-300"
72+
>
73+
{metric.trend}
74+
</Badge>
75+
)}
76+
</motion.div>
77+
))
78+
)}
6079
</CardContent>
6180
</Card>
6281
</motion.div>

0 commit comments

Comments
 (0)