1 Commits
Author SHA1 Message Date
valknar 8c87680078 feat: fold traefik into the service widget type, remove the dedicated one
CI / Static checks (push) Successful in 37s
CI / Build and push image (push) Successful in 1m9s
Traefik gets the same treatment as the other six services now instead
of a bespoke widget type: docker health merged with a single "Routes"
stat, via the same internal container-to-container API call
(http://traefik:8080/api/http/routers) it already used. No auth
needed, same as before.

Deleted lib/collectors/traefik.ts, lib/types/traefik-result.ts, and
components/widgets/traefik/ entirely - the generic service Widget.tsx
and ServiceWidgetResult shape cover it with zero new component code.
2026-08-17 21:33:33 +02:00
10 changed files with 29 additions and 170 deletions
-2
View File
@@ -6,7 +6,6 @@ import { DockerWidget } from "./docker/Widget";
import { DatabaseWidget } from "./database/Widget";
import { SystemWidget } from "./system/Widget";
import { HttpWidget } from "./http/Widget";
import { TraefikWidget } from "./traefik/Widget";
import { ServiceWidget } from "./service/Widget";
type WidgetComponent<T extends Widget["type"]> = ComponentType<{
@@ -21,6 +20,5 @@ export const widgetRegistry: { [K in Widget["type"]]: WidgetComponent<K> } = {
database: DatabaseWidget,
system: SystemWidget,
http: HttpWidget,
traefik: TraefikWidget,
service: ServiceWidget,
};
-72
View File
@@ -1,72 +0,0 @@
"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>
);
}
+1 -17
View File
@@ -5,7 +5,6 @@ import { parseDuration } from "@/lib/config/duration";
import { collectDockerContainer, dockerLimit } from "./docker";
import { collectSystem } from "./system";
import { collectHttp } from "./http";
import { collectTraefik } from "./traefik";
import { collectService } from "./service";
import type { WidgetResult } from "@/lib/types/widget-result";
@@ -20,14 +19,7 @@ interface Job {
consecutiveFailures: number;
}
const COLLECTOR_TYPES = new Set<Widget["type"]>([
"docker",
"database",
"system",
"http",
"traefik",
"service",
]);
const COLLECTOR_TYPES = new Set<Widget["type"]>(["docker", "database", "system", "http", "service"]);
function isCollectorWidget(widget: Widget): boolean {
return COLLECTOR_TYPES.has(widget.type);
@@ -39,7 +31,6 @@ function getIntervalMs(widget: Widget): number {
widget.type === "database" ||
widget.type === "system" ||
widget.type === "http" ||
widget.type === "traefik" ||
widget.type === "service"
) {
return parseDuration(widget.interval);
@@ -60,9 +51,6 @@ function sameTarget(a: Widget, b: Widget): boolean {
if (a.type === "http" && b.type === "http") {
return a.url === b.url && a.method === b.method && a.expect.status === b.expect.status;
}
if (a.type === "traefik" && b.type === "traefik") {
return a.apiUrl === b.apiUrl;
}
if (a.type === "service" && b.type === "service") {
return a.containerName === b.containerName && a.service === b.service && a.showStats === b.showStats;
}
@@ -88,10 +76,6 @@ async function collect(widget: Widget): Promise<WidgetResult> {
);
return { type: "http", data: { ...data, consecutiveFailures: 0 } };
}
if (widget.type === "traefik") {
const data = await collectTraefik(widget.apiUrl);
return { type: "traefik", data };
}
if (widget.type === "service") {
const data = await collectService(widget);
return { type: "service", data };
+3
View File
@@ -7,6 +7,7 @@ import { collectImmich } from "./services/immich";
import { collectN8n } from "./services/n8n";
import { collectUmami } from "./services/umami";
import { collectHeadscale } from "./services/headscale";
import { collectTraefikStat } from "./services/traefik";
function collectServiceStat(widget: ServiceWidget): Promise<{ stats: ServiceStat[]; detail?: string[] }> {
switch (widget.service) {
@@ -22,6 +23,8 @@ function collectServiceStat(widget: ServiceWidget): Promise<{ stats: ServiceStat
return collectUmami(widget);
case "headscale":
return collectHeadscale(widget);
case "traefik":
return collectTraefikStat(widget);
}
}
+1
View File
@@ -7,6 +7,7 @@ const SERVICE_PORTS: Record<ServiceWidget["service"], number> = {
n8n: 5678,
umami: 3000,
headscale: 8080,
traefik: 8080,
};
export function serviceBaseUrl(widget: ServiceWidget): string {
+17
View File
@@ -0,0 +1,17 @@
import type { TraefikServiceWidget } from "@/lib/config/schema";
import type { ServiceStat } from "@/lib/types/service-result";
import { serviceBaseUrl } from "./base-url";
interface RawRouter {
status: string;
}
export async function collectTraefikStat(widget: TraefikServiceWidget): Promise<{ stats: ServiceStat[] }> {
const base = serviceBaseUrl(widget);
const response = await fetch(`${base}/api/http/routers`, { signal: AbortSignal.timeout(5_000) });
if (!response.ok) {
throw new Error(`Traefik API returned ${response.status}`);
}
const routers = (await response.json()) as RawRouter[];
return { stats: [{ label: "Routes", value: String(routers.length) }] };
}
-48
View File
@@ -1,48 +0,0 @@
import type { TraefikResult } from "@/lib/types/traefik-result";
interface RawRouter {
name: string;
rule: string;
service: string;
status: string;
tls?: unknown;
entryPoints?: string[];
}
interface RawEntrypoint {
name: string;
address: string;
}
async function fetchJson<T>(url: string): Promise<T | null> {
const response = await fetch(url, { signal: AbortSignal.timeout(5_000) });
if (!response.ok) return null;
return (await response.json()) as T;
}
export async function collectTraefik(apiUrl: string): Promise<TraefikResult> {
const base = apiUrl.replace(/\/$/, "");
const [routers, entrypoints, middlewares] = await Promise.all([
fetchJson<RawRouter[]>(`${base}/http/routers`),
fetchJson<RawEntrypoint[]>(`${base}/entrypoints`),
fetchJson<unknown[]>(`${base}/http/middlewares`),
]);
if (routers === null) {
throw new Error(`Traefik API at ${base}/http/routers is unreachable or returned an error`);
}
return {
routers: routers.map((router) => ({
name: router.name,
rule: router.rule,
service: router.service,
status: router.status,
tls: Boolean(router.tls),
entryPoints: router.entryPoints ?? [],
})),
entrypoints: (entrypoints ?? []).map((ep) => ({ name: ep.name, address: ep.address })),
middlewaresCount: middlewares?.length ?? 0,
};
}
+7 -10
View File
@@ -58,15 +58,6 @@ export const httpWidgetSchema = z.object({
.default({ status: 200 }),
});
export const traefikWidgetSchema = z.object({
type: z.literal("traefik"),
name: z.string().default("Traefik"),
apiUrl: z.string().url(),
href: z.string().url().optional(),
icon: z.string().optional(),
interval: durationSchema.default("15s"),
});
const serviceCommonFields = {
type: z.literal("service") as z.ZodLiteral<"service">,
name: z.string(),
@@ -116,6 +107,11 @@ export const headscaleServiceWidgetSchema = z.object({
apiToken: z.string(),
});
export const traefikServiceWidgetSchema = z.object({
...serviceCommonFields,
service: z.literal("traefik"),
});
export const serviceWidgetSchema = z.discriminatedUnion("service", [
giteaServiceWidgetSchema,
coolifyServiceWidgetSchema,
@@ -123,6 +119,7 @@ export const serviceWidgetSchema = z.discriminatedUnion("service", [
n8nServiceWidgetSchema,
umamiServiceWidgetSchema,
headscaleServiceWidgetSchema,
traefikServiceWidgetSchema,
]);
export const widgetSchema = z.discriminatedUnion("type", [
@@ -132,7 +129,6 @@ export const widgetSchema = z.discriminatedUnion("type", [
databaseWidgetSchema,
systemWidgetSchema,
httpWidgetSchema,
traefikWidgetSchema,
serviceWidgetSchema,
]);
@@ -194,3 +190,4 @@ export type ImmichServiceWidget = z.infer<typeof immichServiceWidgetSchema>;
export type N8nServiceWidget = z.infer<typeof n8nServiceWidgetSchema>;
export type UmamiServiceWidget = z.infer<typeof umamiServiceWidgetSchema>;
export type HeadscaleServiceWidget = z.infer<typeof headscaleServiceWidgetSchema>;
export type TraefikServiceWidget = z.infer<typeof traefikServiceWidgetSchema>;
-19
View File
@@ -1,19 +0,0 @@
export interface TraefikRouterInfo {
name: string;
rule: string;
service: string;
status: string;
tls: boolean;
entryPoints: string[];
}
export interface TraefikEntrypointInfo {
name: string;
address: string;
}
export interface TraefikResult {
routers: TraefikRouterInfo[];
entrypoints: TraefikEntrypointInfo[];
middlewaresCount: number;
}
-2
View File
@@ -1,6 +1,5 @@
import type { SystemResult } from "./system-result";
import type { HttpCheckResult } from "./http-result";
import type { TraefikResult } from "./traefik-result";
import type { ServiceWidgetResult } from "./service-result";
export interface DockerContainerResult {
@@ -20,6 +19,5 @@ export type WidgetResult =
| { type: "database"; data: DockerContainerResult }
| { type: "system"; data: SystemResult }
| { type: "http"; data: HttpCheckResult }
| { type: "traefik"; data: TraefikResult }
| { type: "service"; data: ServiceWidgetResult }
| { type: "error"; message: string };