82 lines
3.6 KiB
TypeScript
82 lines
3.6 KiB
TypeScript
|
"use client";
|
||
|
|
|
||
|
|
import type { Widget } from "@/lib/config/schema";
|
||
|
|
import { useWidgetSubscription } from "@/lib/ws/client";
|
||
|
|
import { StatusDot } from "@/components/widgets/StatusDot";
|
||
|
|
import { StatusTag } from "@/components/widgets/StatusTag";
|
||
|
|
import { SkeletonLines } from "@/components/widgets/Skeleton";
|
||
|
|
import { WidgetCard } from "@/components/widgets/WidgetCard";
|
||
|
|
import { MetricBar } from "@/components/widgets/MetricBar";
|
||
|
|
import { BrandIcon } from "@/components/widgets/BrandIcon";
|
||
|
|
import { formatBytes, formatUptime } from "@/lib/format";
|
||
|
|
|
||
|
|
type ServiceWidget = Extract<Widget, { type: "service" }>;
|
||
|
|
|
||
|
|
export function ServiceWidget({ widget, widgetId }: { widget: ServiceWidget; widgetId: string }) {
|
||
|
|
const result = useWidgetSubscription(widgetId);
|
||
|
|
const data = result?.type === "service" ? result.data : null;
|
||
|
|
const errorMessage = result?.type === "error" ? result.message : null;
|
||
|
|
const memPercent =
|
||
|
|
data?.docker.memUsageBytes != null && data.docker.memLimitBytes
|
||
|
|
? (data.docker.memUsageBytes / data.docker.memLimitBytes) * 100
|
||
|
|
: null;
|
||
|
|
|
||
|
|
return (
|
||
|
|
<WidgetCard span={4}>
|
||
|
|
<div className="flex items-center justify-between gap-2">
|
||
|
|
<div className="flex min-w-0 items-center gap-2">
|
||
|
|
<BrandIcon slug={widget.icon} />
|
||
|
|
{widget.href ? (
|
||
|
|
<a
|
||
|
|
href={widget.href}
|
||
|
|
target="_blank"
|
||
|
|
rel="noreferrer"
|
||
|
|
className="truncate text-[15px] font-medium text-fg hover:text-accent"
|
||
|
|
>
|
||
|
|
{widget.name}
|
||
|
|
</a>
|
||
|
|
) : (
|
||
|
|
<span className="truncate text-[15px] font-medium text-fg">{widget.name}</span>
|
||
|
|
)}
|
||
|
|
</div>
|
||
|
|
<StatusDot status={data?.docker.status} health={data?.docker.health} />
|
||
|
|
</div>
|
||
|
|
{errorMessage && <span className="text-xs text-status-down">{errorMessage}</span>}
|
||
|
|
{!result && !errorMessage && <SkeletonLines count={3} />}
|
||
|
|
{data && (
|
||
|
|
<>
|
||
|
|
{data.stats.length > 0 && (
|
||
|
|
<div className="flex items-start gap-4">
|
||
|
|
{data.stats.map((stat, index) => (
|
||
|
|
<div
|
||
|
|
key={stat.label}
|
||
|
|
className={`flex flex-col gap-0.5 ${index > 0 ? "border-l border-border pl-4" : ""}`}
|
||
|
|
>
|
||
|
|
<span className="font-mono text-2xl leading-none font-semibold tabular-nums text-accent">
|
||
|
|
{stat.value}
|
||
|
|
</span>
|
||
|
|
<span className="text-[10px] tracking-wide text-fg-muted uppercase">{stat.label}</span>
|
||
|
|
</div>
|
||
|
|
))}
|
||
|
|
</div>
|
||
|
|
)}
|
||
|
|
{data.statError && <StatusTag tone="degraded">{data.statError}</StatusTag>}
|
||
|
|
{widget.showStats && data.docker.cpuPercent !== null && memPercent !== null && (
|
||
|
|
<div className="mt-0.5 flex gap-4">
|
||
|
|
<MetricBar label="CPU" percent={data.docker.cpuPercent} detail={`${data.docker.cpuPercent.toFixed(1)}%`} />
|
||
|
|
<MetricBar label="MEM" percent={memPercent} detail={`${memPercent.toFixed(0)}%`} />
|
||
|
|
</div>
|
||
|
|
)}
|
||
|
|
<div className="flex items-center gap-3 text-[11px] text-fg-muted">
|
||
|
|
{data.docker.uptimeSeconds !== null && <span>up {formatUptime(data.docker.uptimeSeconds)}</span>}
|
||
|
|
{widget.showStats && data.docker.memUsageBytes !== null && memPercent === null && (
|
||
|
|
<span className="font-mono tabular-nums">{formatBytes(data.docker.memUsageBytes)}</span>
|
||
|
|
)}
|
||
|
|
{data.docker.restartCount > 0 && <span>{data.docker.restartCount} restarts</span>}
|
||
|
|
</div>
|
||
|
|
</>
|
||
|
|
)}
|
||
|
|
</WidgetCard>
|
||
|
|
);
|
||
|
|
}
|