From 813cad613ef5593f37cfaf66f4ed3098e3a0d217 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Sebastian=20Kr=C3=BCger?= <valknar@pivoine.art>
Date: Mon, 17 Aug 2026 21:11:56 +0200
Subject: [PATCH] feat: simplify traefik widget to a route count, add coolify
 resource count

Traefik's widget listed every router with rule/TLS/status detail,
which reads as noise now that other widgets in the dashboard show a
single headline stat - collapse it to a route count (with an
"enabled" secondary stat when some routers aren't) plus the existing
middlewares count as a small footer line, same visual language as the
new service widgets.

Coolify's widget only reported project count; /api/v1/resources gives
the deployed-resource count (apps/services/databases across all
projects), which is the more useful "how much is actually running"
number, so it's added as a second stat alongside Projects.
---
 components/widgets/traefik/Widget.tsx | 38 +++++++++++++--------------
 lib/collectors/services/coolify.ts    | 26 ++++++++++++------
 2 files changed, 37 insertions(+), 27 deletions(-)

diff --git a/components/widgets/traefik/Widget.tsx b/components/widgets/traefik/Widget.tsx
index 4299789..410d57e 100644
--- a/components/widgets/traefik/Widget.tsx
+++ b/components/widgets/traefik/Widget.tsx
@@ -1,6 +1,5 @@
 "use client";
 
-import { Lock } from "@phosphor-icons/react/ssr";
 import type { Widget } from "@/lib/config/schema";
 import { useWidgetSubscription } from "@/lib/ws/client";
 import { SkeletonLines } from "@/components/widgets/Skeleton";
@@ -12,6 +11,7 @@ export function TraefikWidget({ widget, widgetId }: { widget: TraefikWidget; wid
   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}>
@@ -19,34 +19,34 @@ export function TraefikWidget({ widget, widgetId }: { widget: TraefikWidget; wid
         <span className="text-[15px] font-medium text-fg">{widget.name}</span>
         {data && (
           <span className="font-mono text-[11px] tabular-nums text-fg-muted">
-            {data.entrypoints.map((ep) => ep.address).join(" · ") || `${data.entrypoints.length} entrypoints`}
+            {data.entrypoints.length} entrypoints
           </span>
         )}
       </div>
       {errorMessage && <span className="text-xs text-status-down">{errorMessage}</span>}
       {!result && !errorMessage && <SkeletonLines count={3} />}
       {data && (
-        <div className="flex flex-col">
-          {data.routers.map((router) => (
-            <div key={router.name} className="flex items-center justify-between gap-2 border-t border-border py-1.5 text-[13px] first:border-t-0">
-              <span className="truncate text-fg" title={router.rule}>
-                {router.name.replace(/@.*$/, "")}
-              </span>
-              <span className="flex items-center gap-1.5 text-[11px] text-fg-muted">
-                {router.tls && <Lock size={11} aria-label="TLS enabled" />}
-                <span
-                  className={`flex items-center gap-1.5 ${router.status === "enabled" ? "text-status-up" : "text-status-down"}`}
-                >
-                  <span className="h-1.5 w-1.5 rounded-full bg-current" />
-                  {router.status}
-                </span>
+        <>
+          <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>
-          ))}
-          <span className="pt-2 text-[11px] text-fg-muted">
+            {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>
-        </div>
+        </>
       )}
     </WidgetCard>
   );
diff --git a/lib/collectors/services/coolify.ts b/lib/collectors/services/coolify.ts
index ec11e87..9eb23d4 100644
--- a/lib/collectors/services/coolify.ts
+++ b/lib/collectors/services/coolify.ts
@@ -8,23 +8,33 @@ interface CoolifyProject {
   name: string;
 }
 
-export async function collectCoolify(
-  widget: CoolifyServiceWidget
-): Promise<{ stats: ServiceStat[]; detail?: string[] }> {
-  const base = serviceBaseUrl(widget);
-  const response = await fetch(`${base}/api/v1/projects`, {
-    headers: { Authorization: `Bearer ${widget.apiToken}` },
+async function fetchCoolify<T>(base: string, path: string, apiToken: string): Promise<T> {
+  const response = await fetch(`${base}${path}`, {
+    headers: { Authorization: `Bearer ${apiToken}` },
     signal: AbortSignal.timeout(5_000),
   });
   if (!response.ok) {
     throw new Error(`Coolify API returned ${response.status}`);
   }
-  const projects = (await response.json()) as CoolifyProject[];
+  return (await response.json()) as T;
+}
+
+export async function collectCoolify(
+  widget: CoolifyServiceWidget
+): Promise<{ stats: ServiceStat[]; detail?: string[] }> {
+  const base = serviceBaseUrl(widget);
+  const [projects, resources] = await Promise.all([
+    fetchCoolify<CoolifyProject[]>(base, "/api/v1/projects", widget.apiToken),
+    fetchCoolify<unknown[]>(base, "/api/v1/resources", widget.apiToken),
+  ]);
   const names = projects.slice(0, DETAIL_LIMIT).map((p) => p.name);
   if (projects.length > DETAIL_LIMIT) names.push(`+${projects.length - DETAIL_LIMIT} more`);
 
   return {
-    stats: [{ label: "Projects", value: String(projects.length) }],
+    stats: [
+      { label: "Projects", value: String(projects.length) },
+      { label: "Resources", value: String(resources.length) },
+    ],
     detail: names.length > 0 ? names : undefined,
   };
 }