valknar
e14fbc9205
Traefik's widget was the only card without a BrandIcon or StatusDot in its header, and had no href either - added icon/href fields to the schema and matched the exact docker/service widget header markup. StatusDot reuses the same "running once data loaded" convention the other widgets already use for a non-container up/down signal. System's widget was span=5 while every other widget in this app is span=4 (docker/service/traefik) or 3 (http) - on a 12-column grid that left a permanent 3-column gap next to it every row. Matched it to span=4 so system+traefik+one more widget tile a full row exactly. Also added grid-auto-flow: dense as a general safety net against future span-mismatch gaps.
73 lines
2.9 KiB
TypeScript
73 lines
2.9 KiB
TypeScript
"use client";
|
|
|
|
import type { Widget } from "@/lib/config/schema";
|
|
import { useWidgetSubscription } from "@/lib/ws/client";
|
|
import { SkeletonLines } from "@/components/widgets/Skeleton";
|
|
import { WidgetCard } from "@/components/widgets/WidgetCard";
|
|
import { StatusDot } from "@/components/widgets/StatusDot";
|
|
import { BrandIcon } from "@/components/widgets/BrandIcon";
|
|
|
|
type TraefikWidget = Extract<Widget, { type: "traefik" }>;
|
|
|
|
export function TraefikWidget({ widget, widgetId }: { widget: TraefikWidget; widgetId: string }) {
|
|
const result = useWidgetSubscription(widgetId);
|
|
const data = result?.type === "traefik" ? result.data : null;
|
|
const errorMessage = result?.type === "error" ? result.message : null;
|
|
const enabledCount = data?.routers.filter((router) => router.status === "enabled").length ?? 0;
|
|
|
|
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>
|
|
<div className="flex items-center gap-2">
|
|
{data && (
|
|
<span className="font-mono text-[11px] tabular-nums text-fg-muted">
|
|
{data.entrypoints.length} entrypoints
|
|
</span>
|
|
)}
|
|
<StatusDot status={data ? "running" : undefined} />
|
|
</div>
|
|
</div>
|
|
{errorMessage && <span className="text-xs text-status-down">{errorMessage}</span>}
|
|
{!result && !errorMessage && <SkeletonLines count={3} />}
|
|
{data && (
|
|
<>
|
|
<div className="flex items-start gap-4">
|
|
<div className="flex flex-col gap-0.5">
|
|
<span className="font-mono text-2xl leading-none font-semibold tabular-nums text-accent">
|
|
{data.routers.length}
|
|
</span>
|
|
<span className="text-[10px] tracking-wide text-fg-muted uppercase">Routes</span>
|
|
</div>
|
|
{enabledCount !== data.routers.length && (
|
|
<div className="flex flex-col gap-0.5 border-l border-border pl-4">
|
|
<span className="font-mono text-2xl leading-none font-semibold tabular-nums text-status-degraded">
|
|
{enabledCount}
|
|
</span>
|
|
<span className="text-[10px] tracking-wide text-fg-muted uppercase">Enabled</span>
|
|
</div>
|
|
)}
|
|
</div>
|
|
<span className="text-[11px] text-fg-muted">
|
|
<span className="font-mono tabular-nums">{data.middlewaresCount}</span> middlewares
|
|
</span>
|
|
</>
|
|
)}
|
|
</WidgetCard>
|
|
);
|
|
}
|