eny.space Landingpage
feat(dashboard): add test api and pds service details + mock data
+672
-22
+168
app/api/pds/service/route.ts
+168
app/api/pds/service/route.ts
···
1
+
import { NextResponse } from "next/server";
2
+
3
+
const PDS_SERVICE_URL = "https://k8s-pds.frx.pub/api/v1/service/1";
4
+
5
+
function getMockService() {
6
+
const now = new Date();
7
+
const iso = (d: Date) => d.toISOString();
8
+
9
+
const storageAllocatedBytes = 10 * 1024 ** 3; // 10 GiB
10
+
const storageUsedBytes = Math.floor(2.8 * 1024 ** 3); // ~2.8 GiB
11
+
const bandwidthLimitBytesPerMonth = 100 * 1024 ** 3; // 100 GiB
12
+
const bandwidthUsedBytesThisMonth = Math.floor(14.7 * 1024 ** 3); // ~14.7 GiB
13
+
const cpuUsagePercent = 23;
14
+
const ramUsagePercent = 41;
15
+
const userSlotsUsed = 1;
16
+
const userSlotsTotal = 10;
17
+
18
+
const storageUsedDailyLast30d = Array.from({ length: 30 }).map((_, i) => {
19
+
const d = new Date(now);
20
+
d.setUTCDate(d.getUTCDate() - (29 - i));
21
+
const base = Math.floor(1.9 * 1024 ** 3);
22
+
const growth = Math.floor(i * (34 * 1024 ** 2)); // ~34 MiB/day
23
+
const noise = Math.floor(((i % 5) - 2) * (6 * 1024 ** 2));
24
+
return { date: iso(d).slice(0, 10), usedBytes: base + growth + noise };
25
+
});
26
+
27
+
const requestsPerHourLast24h = Array.from({ length: 24 }).map((_, i) => {
28
+
const d = new Date(now);
29
+
d.setUTCHours(d.getUTCHours() - (23 - i), 0, 0, 0);
30
+
const wave = 260 + Math.floor(180 * Math.sin((i / 24) * Math.PI * 2));
31
+
const jitter = (i % 3) * 17;
32
+
return { hour: iso(d), count: Math.max(40, wave + jitter) };
33
+
});
34
+
35
+
const failedRequestsLast24h = 42;
36
+
const successfulRequestsLast24h = requestsPerHourLast24h.reduce(
37
+
(sum, p) => sum + p.count,
38
+
0,
39
+
);
40
+
41
+
return {
42
+
id: 1,
43
+
name: "test1-pds",
44
+
service: "bluesky-pds",
45
+
namespace: "kd0186-test1-pds",
46
+
encrypted_config: {
47
+
hostname: "test1.eny.space",
48
+
adminPassword: "zoidberg",
49
+
emailSmtpUrl: "smtps://max@mustermann.de:s3cr3t@smtp.mustermann.de:465/",
50
+
pdsEmailFromAddress: "test1@example.com",
51
+
dataStorage: {
52
+
size: "10Gi",
53
+
},
54
+
},
55
+
install_cmd:
56
+
"export KUBECONFIG={kubeconfig}\n" +
57
+
"helm repo add nerkho https://charts.nerkho.ch\n" +
58
+
"helm repo update\n" +
59
+
"helm install bluesky-pds nerkho/bluesky-pds --namespace {namespace} -f {values}\n" +
60
+
'export KUBECONFIG=""',
61
+
state: 0,
62
+
kubeconfig_id: 1,
63
+
created_at: "2026-03-17T15:05:40.000000Z",
64
+
updated_at: "2026-03-17T15:05:40.000000Z",
65
+
stats: {
66
+
cpuUsagePercent,
67
+
ramUsagePercent,
68
+
storageUsedBytes,
69
+
storageAllocatedBytes,
70
+
storageObjectsCount: 12345,
71
+
storageUsedDailyLast30d,
72
+
bandwidthUsedBytesThisMonth,
73
+
bandwidthLimitBytesPerMonth,
74
+
requestsLast24h: successfulRequestsLast24h,
75
+
requestsPerHourLast24h,
76
+
activeUsers: 3,
77
+
uniqueUsersLast30d: 27,
78
+
userSlotsUsed,
79
+
userSlotsTotal,
80
+
uptimeSeconds: 987654,
81
+
lastBackupAt: new Date(now.getTime() - 6 * 60 * 60 * 1000).toISOString(),
82
+
failedRequestsLast24h,
83
+
successfulRequestsLast24h,
84
+
},
85
+
};
86
+
}
87
+
88
+
export async function GET() {
89
+
try {
90
+
const useMock = process.env.PDS_USE_MOCK === "true";
91
+
if (useMock) {
92
+
return NextResponse.json(getMockService());
93
+
}
94
+
95
+
const apiToken = process.env.PDS_API_TOKEN;
96
+
97
+
if (!apiToken) {
98
+
return NextResponse.json(
99
+
{
100
+
error:
101
+
"Missing PDS_API_TOKEN env variable for authenticating with PDS API",
102
+
},
103
+
{ status: 500 },
104
+
);
105
+
}
106
+
107
+
const res = await fetch(PDS_SERVICE_URL, {
108
+
// Ensure this runs server-side only and is not cached aggressively
109
+
cache: "no-store",
110
+
headers: {
111
+
Accept: "application/json",
112
+
"X-Requested-With": "XMLHttpRequest",
113
+
Authorization: `Bearer ${apiToken}`,
114
+
},
115
+
});
116
+
117
+
const contentType = res.headers.get("content-type") || "";
118
+
119
+
// Try to parse JSON if it looks like JSON, otherwise fall back to text
120
+
if (contentType.includes("application/json")) {
121
+
let data: unknown = await res.json();
122
+
123
+
// Some backends double-encode JSON as a string; handle that gracefully.
124
+
if (typeof data === "string") {
125
+
try {
126
+
data = JSON.parse(data);
127
+
} catch {
128
+
// keep as string if it isn't valid JSON
129
+
}
130
+
}
131
+
132
+
if (!res.ok) {
133
+
return NextResponse.json(
134
+
{
135
+
error: "Upstream request failed",
136
+
status: res.status,
137
+
body: data,
138
+
},
139
+
{ status: 502 },
140
+
);
141
+
}
142
+
143
+
return NextResponse.json(data);
144
+
}
145
+
146
+
const bodyText = await res.text();
147
+
148
+
// Return diagnostics so we can see what the upstream is sending
149
+
return NextResponse.json(
150
+
{
151
+
error: "Upstream did not return JSON",
152
+
status: res.status,
153
+
contentType,
154
+
bodyPreview: bodyText.slice(0, 500),
155
+
},
156
+
{ status: 502 },
157
+
);
158
+
} catch (error) {
159
+
console.error("Error proxying PDS service request", error);
160
+
return NextResponse.json(
161
+
{
162
+
error: "Failed to reach PDS service endpoint",
163
+
detail: error instanceof Error ? error.message : String(error),
164
+
},
165
+
{ status: 500 },
166
+
);
167
+
}
168
+
}
+9
-18
app/components/pricing/pricing-section.tsx
+9
-18
app/components/pricing/pricing-section.tsx
···
86
86
className={[
87
87
"flex h-full flex-col justify-between rounded-3xl border-none bg-gradient-to-b from-slate-900/65 to-slate-950/75 p-6 text-white shadow-xl/30",
88
88
plan.highlight
89
-
? "relative bg-gradient-to-b from-fuchsia-500/65 via-fuchsia-500/55 to-fuchsia-600/70 text-neutral-950 shadow-[0_0_36px_rgba(232,121,249,0.3)]"
89
+
? "relative bg-gradient-to-b from-fuchsia-500/65 via-fuchsia-500/55 to-fuchsia-600/70 text-white shadow-[0_0_36px_rgba(232,121,249,0.3)]"
90
90
: "",
91
91
]
92
92
.filter(Boolean)
···
94
94
>
95
95
<CardHeader className="flex flex-col gap-2 px-0">
96
96
<div className="flex items-center justify-between gap-3">
97
-
<CardTitle className="text-sm font-semibold uppercase tracking-wide">
97
+
<CardTitle className="text-sm font-semibold uppercase tracking-wide text-white">
98
98
{plan.name}
99
99
</CardTitle>
100
100
{plan.badge ? (
···
104
104
) : null}
105
105
</div>
106
106
<div className="mt-4 flex items-baseline gap-2">
107
-
<span className="text-4xl font-semibold sm:text-5xl">
107
+
<span className="text-4xl font-semibold sm:text-5xl text-white">
108
108
{plan.price}
109
109
</span>
110
-
<span className="text-sm font-medium opacity-80">
110
+
<span className="text-sm font-medium opacity-80 text-white">
111
111
{plan.period}
112
112
</span>
113
113
</div>
114
-
<Paragraph
115
-
className={[
116
-
"mt-3 text-sm",
117
-
plan.highlight ? "text-neutral-900/80" : "text-white/70",
118
-
].join(" ")}
119
-
>
114
+
<Paragraph className={["mt-3 text-sm text-white/70"].join(" ")}>
120
115
{plan.description}
121
116
</Paragraph>
122
117
</CardHeader>
···
137
132
<div className="pt-2 text-left">
138
133
<Paragraph
139
134
className={[
140
-
"text-xs font-semibold uppercase tracking-[0.18em]",
141
-
plan.highlight ? "text-neutral-900/70" : "text-white/60",
135
+
"text-xs font-semibold uppercase tracking-[0.18em] text-white/60",
142
136
].join(" ")}
143
137
>
144
138
Key features on {plan.name.split(" ")[0]}
···
147
141
{plan.features.map((feature) => (
148
142
<li
149
143
key={feature}
150
-
className={[
151
-
"flex items-start gap-2",
152
-
plan.highlight
153
-
? "text-neutral-900/80"
154
-
: "text-white/75",
155
-
].join(" ")}
144
+
className={["flex items-start gap-2 text-white/75"].join(
145
+
" ",
146
+
)}
156
147
>
157
148
<div className="inline-flex items-center gap-2">
158
149
<span className="inline-block size-1.5 rounded-full bg-fuchsia-400" />
+4
-4
app/dashboard/page.tsx
+4
-4
app/dashboard/page.tsx
···
12
12
import { Heading } from "@/components/heading";
13
13
import { Paragraph } from "@/components/paragraph";
14
14
import DashboardClient from "./dashboard-client";
15
+
import { ServiceDetailsClient } from "./service-details-client";
15
16
16
17
export default async function DashboardPage() {
17
18
const supabase = await createClient();
···
73
74
<Paragraph className="text-sm font-medium text-white/80">
74
75
Usage summary
75
76
</Paragraph>
76
-
<Paragraph className="text-sm text-white/70">
77
-
Usage analytics for your PDS (storage, bandwidth, user count, and
78
-
more) will appear here.
79
-
</Paragraph>
77
+
<ServiceDetailsClient mode="stats" />
80
78
</div>
81
79
82
80
<div className="mt-4 flex flex-wrap gap-3">
···
95
93
</div>
96
94
97
95
<hr className="my-6" />
96
+
97
+
<ServiceDetailsClient mode="details" />
98
98
99
99
<section className="space-y-2 text-white">
100
100
<Heading
+491
app/dashboard/service-details-client.tsx
+491
app/dashboard/service-details-client.tsx
···
1
+
"use client";
2
+
3
+
import { useEffect, useState } from "react";
4
+
import { Heading } from "@/components/heading";
5
+
import { Paragraph } from "@/components/paragraph";
6
+
7
+
type ServiceStats = {
8
+
cpuUsagePercent?: number;
9
+
ramUsagePercent?: number;
10
+
storageUsedBytes?: number;
11
+
storageAllocatedBytes?: number;
12
+
storageObjectsCount?: number;
13
+
storageUsedDailyLast30d?: Array<{ date: string; usedBytes: number }>;
14
+
bandwidthUsedBytesThisMonth?: number;
15
+
bandwidthLimitBytesPerMonth?: number;
16
+
requestsLast24h?: number;
17
+
requestsPerHourLast24h?: Array<{ hour: string; count: number }>;
18
+
activeUsers?: number;
19
+
uniqueUsersLast30d?: number;
20
+
userSlotsUsed?: number;
21
+
userSlotsTotal?: number;
22
+
uptimeSeconds?: number;
23
+
lastBackupAt?: string;
24
+
failedRequestsLast24h?: number;
25
+
successfulRequestsLast24h?: number;
26
+
};
27
+
28
+
type ServiceConfig = {
29
+
hostname: string;
30
+
adminPassword?: string;
31
+
emailSmtpUrl?: string;
32
+
pdsEmailFromAddress?: string;
33
+
dataStorage?: {
34
+
size?: string;
35
+
};
36
+
};
37
+
38
+
type ServiceResponse = {
39
+
id?: number | string;
40
+
name: string;
41
+
service: string;
42
+
namespace: string;
43
+
state?: number | string;
44
+
kubeconfig_id: number | string;
45
+
encrypted_config: ServiceConfig;
46
+
install_cmd: string;
47
+
created_at?: string;
48
+
updated_at?: string;
49
+
stats?: ServiceStats;
50
+
};
51
+
52
+
function formatBytes(bytes?: number) {
53
+
if (bytes === undefined || bytes === null || Number.isNaN(bytes)) return "—";
54
+
const units = ["B", "KiB", "MiB", "GiB", "TiB"];
55
+
let v = bytes;
56
+
let i = 0;
57
+
while (v >= 1024 && i < units.length - 1) {
58
+
v /= 1024;
59
+
i += 1;
60
+
}
61
+
return `${v.toFixed(v >= 10 || i === 0 ? 0 : 1)} ${units[i]}`;
62
+
}
63
+
64
+
function clampPct(n: number) {
65
+
return Math.max(0, Math.min(100, n));
66
+
}
67
+
68
+
export function ServiceDetailsClient({
69
+
mode = "all",
70
+
}: {
71
+
mode?: "all" | "stats" | "details";
72
+
}) {
73
+
const [service, setService] = useState<ServiceResponse | null>(null);
74
+
const [loading, setLoading] = useState(true);
75
+
const [error, setError] = useState<string | null>(null);
76
+
77
+
useEffect(() => {
78
+
const fetchService = async () => {
79
+
try {
80
+
const res = await fetch("/api/pds/service", {
81
+
method: "GET",
82
+
});
83
+
84
+
if (!res.ok) {
85
+
throw new Error(`Request failed with status ${res.status}`);
86
+
}
87
+
88
+
const data = (await res.json()) as ServiceResponse;
89
+
setService(data);
90
+
} catch (err) {
91
+
console.error("Failed to load service details", err);
92
+
setError(
93
+
err instanceof Error ? err.message : "Unknown error fetching service",
94
+
);
95
+
} finally {
96
+
setLoading(false);
97
+
}
98
+
};
99
+
100
+
fetchService();
101
+
}, []);
102
+
103
+
if (loading) {
104
+
return (
105
+
<div className="mt-4 rounded-md border border-white/10 bg-white/5 p-4 text-white/80 text-sm">
106
+
Loading service details…
107
+
</div>
108
+
);
109
+
}
110
+
111
+
if (error) {
112
+
return (
113
+
<div className="mt-4 rounded-md border border-rose-500/50 bg-rose-950/40 p-4 text-sm text-rose-100">
114
+
Failed to load service details: {error}
115
+
</div>
116
+
);
117
+
}
118
+
119
+
if (!service) {
120
+
return null;
121
+
}
122
+
123
+
const cfg = service.encrypted_config || {};
124
+
const stats = service.stats;
125
+
const maskedAdminPassword =
126
+
cfg.adminPassword && cfg.adminPassword.length > 0 ? "••••••••" : undefined;
127
+
128
+
const storagePct =
129
+
stats?.storageUsedBytes !== undefined &&
130
+
stats?.storageAllocatedBytes !== undefined &&
131
+
stats.storageAllocatedBytes > 0
132
+
? clampPct((stats.storageUsedBytes / stats.storageAllocatedBytes) * 100)
133
+
: undefined;
134
+
135
+
const bandwidthPct =
136
+
stats?.bandwidthUsedBytesThisMonth !== undefined &&
137
+
stats?.bandwidthLimitBytesPerMonth !== undefined &&
138
+
stats.bandwidthLimitBytesPerMonth > 0
139
+
? clampPct(
140
+
(stats.bandwidthUsedBytesThisMonth /
141
+
stats.bandwidthLimitBytesPerMonth) *
142
+
100,
143
+
)
144
+
: undefined;
145
+
146
+
const errorRatePct =
147
+
stats?.failedRequestsLast24h !== undefined &&
148
+
stats?.successfulRequestsLast24h !== undefined
149
+
? clampPct(
150
+
(stats.failedRequestsLast24h /
151
+
Math.max(
152
+
1,
153
+
stats.failedRequestsLast24h + stats.successfulRequestsLast24h,
154
+
)) *
155
+
100,
156
+
)
157
+
: undefined;
158
+
159
+
const showDetails = mode === "all" || mode === "details";
160
+
const showStats = mode === "all" || mode === "stats";
161
+
162
+
return (
163
+
<section
164
+
className={
165
+
mode === "stats"
166
+
? "space-y-3 text-white"
167
+
: "mt-6 space-y-3 rounded-md border border-white/10 bg-white/5 p-4 text-white backdrop-blur-xl"
168
+
}
169
+
>
170
+
{showDetails && (
171
+
<>
172
+
<Heading
173
+
as="h2"
174
+
className="text-sm font-semibold uppercase tracking-wide text-white/80"
175
+
>
176
+
Service Details
177
+
</Heading>
178
+
<div className="grid gap-3 md:grid-cols-2 text-sm text-white/80">
179
+
{service.id !== undefined && (
180
+
<div className="space-y-1">
181
+
<Paragraph className="text-xs font-medium text-white/60">
182
+
ID
183
+
</Paragraph>
184
+
<Paragraph className="text-sm font-mono text-white">
185
+
{String(service.id)}
186
+
</Paragraph>
187
+
</div>
188
+
)}
189
+
<div className="space-y-1">
190
+
<Paragraph className="text-xs font-medium text-white/60">
191
+
Name
192
+
</Paragraph>
193
+
<Paragraph className="text-sm font-semibold text-white">
194
+
{service.name}
195
+
</Paragraph>
196
+
</div>
197
+
<div className="space-y-1">
198
+
<Paragraph className="text-xs font-medium text-white/60">
199
+
Service Type
200
+
</Paragraph>
201
+
<Paragraph className="text-sm font-semibold text-white">
202
+
{service.service}
203
+
</Paragraph>
204
+
</div>
205
+
<div className="space-y-1">
206
+
<Paragraph className="text-xs font-medium text-white/60">
207
+
Namespace
208
+
</Paragraph>
209
+
<Paragraph className="text-sm font-mono text-white">
210
+
{service.namespace}
211
+
</Paragraph>
212
+
</div>
213
+
{service.state !== undefined && (
214
+
<div className="space-y-1">
215
+
<Paragraph className="text-xs font-medium text-white/60">
216
+
State
217
+
</Paragraph>
218
+
<Paragraph className="text-sm font-mono text-white">
219
+
{String(service.state)}
220
+
</Paragraph>
221
+
</div>
222
+
)}
223
+
{service.kubeconfig_id !== undefined && (
224
+
<div className="space-y-1">
225
+
<Paragraph className="text-xs font-medium text-white/60">
226
+
Kubeconfig ID
227
+
</Paragraph>
228
+
<Paragraph className="text-sm font-mono text-white">
229
+
{String(service.kubeconfig_id)}
230
+
</Paragraph>
231
+
</div>
232
+
)}
233
+
<div className="space-y-1">
234
+
<Paragraph className="text-xs font-medium text-white/60">
235
+
Hostname
236
+
</Paragraph>
237
+
<Paragraph className="text-sm font-semibold text-white">
238
+
{cfg.hostname}
239
+
</Paragraph>
240
+
</div>
241
+
{maskedAdminPassword && (
242
+
<div className="space-y-1">
243
+
<Paragraph className="text-xs font-medium text-white/60">
244
+
Admin Password
245
+
</Paragraph>
246
+
<Paragraph className="text-sm font-mono text-white">
247
+
{maskedAdminPassword}
248
+
</Paragraph>
249
+
</div>
250
+
)}
251
+
{cfg.pdsEmailFromAddress && (
252
+
<div className="space-y-1">
253
+
<Paragraph className="text-xs font-medium text-white/60">
254
+
PDS Email From
255
+
</Paragraph>
256
+
<Paragraph className="text-sm font-mono text-white">
257
+
{cfg.pdsEmailFromAddress}
258
+
</Paragraph>
259
+
</div>
260
+
)}
261
+
{cfg.emailSmtpUrl && (
262
+
<div className="space-y-1 md:col-span-2">
263
+
<Paragraph className="text-xs font-medium text-white/60">
264
+
SMTP URL
265
+
</Paragraph>
266
+
<Paragraph className="text-sm font-mono text-white break-all">
267
+
{cfg.emailSmtpUrl}
268
+
</Paragraph>
269
+
</div>
270
+
)}
271
+
{cfg.dataStorage?.size && (
272
+
<div className="space-y-1">
273
+
<Paragraph className="text-xs font-medium text-white/60">
274
+
Data Storage
275
+
</Paragraph>
276
+
<Paragraph className="text-sm font-semibold text-white">
277
+
{cfg.dataStorage.size}
278
+
</Paragraph>
279
+
</div>
280
+
)}
281
+
{(service.created_at || service.updated_at) && (
282
+
<div className="space-y-1 md:col-span-2">
283
+
<Paragraph className="text-xs font-medium text-white/60">
284
+
Timestamps
285
+
</Paragraph>
286
+
<Paragraph className="text-sm font-mono text-white/90">
287
+
{service.created_at && (
288
+
<span className="mr-4">
289
+
created_at: {service.created_at}
290
+
</span>
291
+
)}
292
+
{service.updated_at && (
293
+
<span>updated_at: {service.updated_at}</span>
294
+
)}
295
+
</Paragraph>
296
+
</div>
297
+
)}
298
+
</div>
299
+
</>
300
+
)}
301
+
302
+
{showStats && stats && (
303
+
<div className="mt-4 space-y-3">
304
+
{mode !== "stats" && (
305
+
<Paragraph className="text-xs font-medium text-white/60">
306
+
Usage stats
307
+
</Paragraph>
308
+
)}
309
+
310
+
<div className="grid gap-3 md:grid-cols-3 text-sm text-white/80">
311
+
<div className="rounded border border-white/10 bg-white/5 p-3">
312
+
<Paragraph className="text-xs font-medium text-white/60">
313
+
CPU usage
314
+
</Paragraph>
315
+
<Paragraph className="text-sm font-semibold text-white">
316
+
{stats.cpuUsagePercent !== undefined
317
+
? `${clampPct(stats.cpuUsagePercent).toFixed(0)}%`
318
+
: "—"}
319
+
</Paragraph>
320
+
{stats.cpuUsagePercent !== undefined && (
321
+
<div className="mt-2 h-2 w-full rounded bg-white/10">
322
+
<div
323
+
className="h-2 rounded bg-fuchsia-400/80"
324
+
style={{ width: `${clampPct(stats.cpuUsagePercent)}%` }}
325
+
/>
326
+
</div>
327
+
)}
328
+
</div>
329
+
330
+
<div className="rounded border border-white/10 bg-white/5 p-3">
331
+
<Paragraph className="text-xs font-medium text-white/60">
332
+
RAM usage
333
+
</Paragraph>
334
+
<Paragraph className="text-sm font-semibold text-white">
335
+
{stats.ramUsagePercent !== undefined
336
+
? `${clampPct(stats.ramUsagePercent).toFixed(0)}%`
337
+
: "—"}
338
+
</Paragraph>
339
+
{stats.ramUsagePercent !== undefined && (
340
+
<div className="mt-2 h-2 w-full rounded bg-white/10">
341
+
<div
342
+
className="h-2 rounded bg-amber-300/80"
343
+
style={{ width: `${clampPct(stats.ramUsagePercent)}%` }}
344
+
/>
345
+
</div>
346
+
)}
347
+
{stats.userSlotsUsed !== undefined &&
348
+
stats.userSlotsTotal !== undefined && (
349
+
<Paragraph className="mt-2 text-xs text-white/70">
350
+
Users: {stats.userSlotsUsed}/{stats.userSlotsTotal}
351
+
</Paragraph>
352
+
)}
353
+
</div>
354
+
355
+
<div className="rounded border border-white/10 bg-white/5 p-3">
356
+
<Paragraph className="text-xs font-medium text-white/60">
357
+
Storage
358
+
</Paragraph>
359
+
<Paragraph className="text-sm font-semibold text-white">
360
+
{formatBytes(stats.storageUsedBytes)} /{" "}
361
+
{formatBytes(stats.storageAllocatedBytes)}
362
+
</Paragraph>
363
+
{storagePct !== undefined && (
364
+
<div className="mt-2 h-2 w-full rounded bg-white/10">
365
+
<div
366
+
className="h-2 rounded bg-emerald-400/80"
367
+
style={{ width: `${storagePct}%` }}
368
+
/>
369
+
</div>
370
+
)}
371
+
{stats.storageObjectsCount !== undefined && (
372
+
<Paragraph className="mt-2 text-xs text-white/70">
373
+
Objects: {stats.storageObjectsCount.toLocaleString()}
374
+
</Paragraph>
375
+
)}
376
+
</div>
377
+
378
+
<div className="rounded border border-white/10 bg-white/5 p-3">
379
+
<Paragraph className="text-xs font-medium text-white/60">
380
+
Bandwidth (month)
381
+
</Paragraph>
382
+
<Paragraph className="text-sm font-semibold text-white">
383
+
{formatBytes(stats.bandwidthUsedBytesThisMonth)} /{" "}
384
+
{formatBytes(stats.bandwidthLimitBytesPerMonth)}
385
+
</Paragraph>
386
+
{bandwidthPct !== undefined && (
387
+
<div className="mt-2 h-2 w-full rounded bg-white/10">
388
+
<div
389
+
className="h-2 rounded bg-sky-400/80"
390
+
style={{ width: `${bandwidthPct}%` }}
391
+
/>
392
+
</div>
393
+
)}
394
+
{stats.requestsLast24h !== undefined && (
395
+
<Paragraph className="mt-2 text-xs text-white/70">
396
+
Requests (24h): {stats.requestsLast24h.toLocaleString()}
397
+
</Paragraph>
398
+
)}
399
+
</div>
400
+
401
+
<div className="rounded border border-white/10 bg-white/5 p-3">
402
+
<Paragraph className="text-xs font-medium text-white/60">
403
+
Health (24h)
404
+
</Paragraph>
405
+
<Paragraph className="text-sm font-semibold text-white">
406
+
Error rate:{" "}
407
+
{errorRatePct !== undefined
408
+
? `${errorRatePct.toFixed(2)}%`
409
+
: "—"}
410
+
</Paragraph>
411
+
{stats.lastBackupAt && (
412
+
<Paragraph className="mt-2 text-xs text-white/70">
413
+
Last backup: {new Date(stats.lastBackupAt).toLocaleString()}
414
+
</Paragraph>
415
+
)}
416
+
{stats.uptimeSeconds !== undefined && (
417
+
<Paragraph className="mt-1 text-xs text-white/70">
418
+
Uptime: {(stats.uptimeSeconds / 3600).toFixed(1)}h
419
+
</Paragraph>
420
+
)}
421
+
</div>
422
+
</div>
423
+
424
+
{Array.isArray(stats.requestsPerHourLast24h) &&
425
+
stats.requestsPerHourLast24h.length > 0 && (
426
+
<div className="rounded border border-white/10 bg-white/5 p-3">
427
+
<Paragraph className="text-xs font-medium text-white/60">
428
+
Requests per hour (last 24h)
429
+
</Paragraph>
430
+
<div className="mt-3 flex h-16 items-end gap-1">
431
+
{(() => {
432
+
const max = Math.max(
433
+
...stats.requestsPerHourLast24h!.map((p) => p.count),
434
+
);
435
+
return stats.requestsPerHourLast24h!.map((p, idx) => (
436
+
<div
437
+
key={`${p.hour}-${idx}`}
438
+
className="w-full rounded-sm bg-white/10"
439
+
title={`${new Date(p.hour).toLocaleString()}: ${p.count.toLocaleString()}`}
440
+
style={{
441
+
height: `${clampPct((p.count / Math.max(1, max)) * 100)}%`,
442
+
backgroundColor: "rgba(56, 189, 248, 0.6)",
443
+
}}
444
+
/>
445
+
));
446
+
})()}
447
+
</div>
448
+
</div>
449
+
)}
450
+
451
+
{Array.isArray(stats.storageUsedDailyLast30d) &&
452
+
stats.storageUsedDailyLast30d.length > 0 && (
453
+
<div className="rounded border border-white/10 bg-white/5 p-3">
454
+
<Paragraph className="text-xs font-medium text-white/60">
455
+
Storage used (last 30d)
456
+
</Paragraph>
457
+
<div className="mt-3 flex h-16 items-end gap-1">
458
+
{(() => {
459
+
const max = Math.max(
460
+
...stats.storageUsedDailyLast30d!.map((p) => p.usedBytes),
461
+
);
462
+
return stats.storageUsedDailyLast30d!.map((p, idx) => (
463
+
<div
464
+
key={`${p.date}-${idx}`}
465
+
className="w-full rounded-sm bg-emerald-400/50"
466
+
title={`${p.date}: ${formatBytes(p.usedBytes)}`}
467
+
style={{
468
+
height: `${clampPct((p.usedBytes / Math.max(1, max)) * 100)}%`,
469
+
}}
470
+
/>
471
+
));
472
+
})()}
473
+
</div>
474
+
</div>
475
+
)}
476
+
</div>
477
+
)}
478
+
479
+
{showDetails && service.install_cmd && (
480
+
<div className="mt-3 space-y-1">
481
+
<Paragraph className="text-xs font-medium text-white/60">
482
+
Install command
483
+
</Paragraph>
484
+
<pre className="max-h-64 overflow-auto rounded bg-neutral-900/90 p-3 text-xs text-neutral-100">
485
+
{service.install_cmd}
486
+
</pre>
487
+
</div>
488
+
)}
489
+
</section>
490
+
);
491
+
}