UI Update

This commit is contained in:
2025-11-27 18:02:00 +03:00
parent eef82577ab
commit 8f05f40bb2
7 changed files with 65 additions and 72 deletions

View File

@@ -69,48 +69,10 @@ export function HomePage() {
});
}, [metrics, jobStreams]);
const lastRun = mergedRuns[0];
const lastRunDuration = formatDuration(lastRun?.durationMs);
const lastRunDuration = useMemo(() => formatDuration(mergedRuns[0]?.durationMs), [mergedRuns]);
return (
<div className="grid gap-6">
<div className="grid gap-4">
<Card className="border-border card-shadow">
<CardHeader className="space-y-1">
<CardTitle>Son Çalıştırma</CardTitle>
<CardDescription>Son 10 çalıştırmanın en günceli</CardDescription>
<div className="text-xs text-muted-foreground">
Başarı oranı:{" "}
<span className="font-semibold text-foreground">{metrics?.totals.successRate ?? 0}%</span>
</div>
</CardHeader>
<CardContent>
{loading && <div className="text-sm text-muted-foreground">Yükleniyor...</div>}
{error && <div className="text-sm text-destructive">{error}</div>}
{!loading && lastRun && (
<div className="flex flex-col gap-4 md:flex-row md:items-center md:justify-between">
<div className="flex items-center gap-3">
<RepoIcon repoUrl={lastRun.job.repoUrl} />
<div>
<div className="text-base font-semibold text-foreground">{lastRun.job.name}</div>
<div className="text-xs text-muted-foreground">
{new Date(lastRun.startedAt).toLocaleString()}
</div>
</div>
</div>
<div className="flex items-center gap-3">
<JobStatusBadge status={lastRun.status} />
<div className="text-xs text-muted-foreground">
Süre: <span className="font-semibold text-foreground">{lastRunDuration}</span>
</div>
</div>
</div>
)}
{!loading && !lastRun && <div className="text-sm text-muted-foreground">Henüz kayıt yok.</div>}
</CardContent>
</Card>
</div>
<div className="grid gap-4 lg:grid-cols-3">
<Card className="border-border card-shadow lg:col-span-2">
<CardHeader className="flex items-center justify-between">
@@ -123,8 +85,10 @@ export function HomePage() {
{metrics?.totals.totalRuns ?? 0} toplam koşu
</div>
</CardHeader>
<CardContent className="h-80">
{chartData.length === 0 ? (
<CardContent className="h-80 min-w-0">
{loading ? (
<div className="text-sm text-muted-foreground">Yükleniyor...</div>
) : chartData.length === 0 ? (
<div className="text-sm text-muted-foreground">Grafik verisi yok.</div>
) : (
<ResponsiveContainer width="100%" height="100%">