From 5e2074d9be4d9fc3e58df83d3d6421cce218a66a Mon Sep 17 00:00:00 2001
From: TerrifiedBug <admin@terrifiedbug.com>
Date: Wed, 11 Mar 2026 00:28:22 +0000
Subject: [PATCH] fix: hide empty component names and filter non-alert events
 from history
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Node cards no longer fall back to showing the componentKey when
  displayName is blank — the name row collapses entirely
- Alert History table excludes informational events (deploy_requested,
  deploy_completed, deploy_rejected, deploy_cancelled,
  new_version_available); notifications still fire for these events
---
 src/components/flow/sink-node.tsx      |  4 ++--
 src/components/flow/source-node.tsx    |  4 ++--
 src/components/flow/transform-node.tsx |  4 ++--
 src/server/routers/alert.ts            | 12 +++++++++++-
 4 files changed, 17 insertions(+), 7 deletions(-)

diff --git a/src/components/flow/sink-node.tsx b/src/components/flow/sink-node.tsx
index 4a2b5ac5..74a7c02e 100644
--- a/src/components/flow/sink-node.tsx
+++ b/src/components/flow/sink-node.tsx
@@ -29,7 +29,7 @@ type SinkNodeData = {
 type SinkNodeType = Node<SinkNodeData, "sink">;
 
 function SinkNodeComponent({ data, selected }: NodeProps<SinkNodeType>) {
-  const { componentDef, componentKey, displayName, metrics, disabled } = data;
+  const { componentDef, displayName, metrics, disabled } = data;
   const isShared = !!data.sharedComponentId;
   const isStale = isShared && data.sharedComponentLatestVersion != null &&
     (data.sharedComponentVersion ?? 0) < data.sharedComponentLatestVersion;
@@ -63,7 +63,7 @@ function SinkNodeComponent({ data, selected }: NodeProps<SinkNodeType>) {
 
       {/* Body */}
       <div className="space-y-2 px-3 py-2.5">
-        <p className="truncate text-xs font-medium text-foreground">{displayName || componentKey}</p>
+        {displayName && <p className="truncate text-xs font-medium text-foreground">{displayName}</p>}
 
         {metrics && (
           <p className="truncate text-xs font-mono text-purple-400">
diff --git a/src/components/flow/source-node.tsx b/src/components/flow/source-node.tsx
index 63b9f2e7..87b1372c 100644
--- a/src/components/flow/source-node.tsx
+++ b/src/components/flow/source-node.tsx
@@ -30,7 +30,7 @@ type SourceNodeData = {
 type SourceNodeType = Node<SourceNodeData, "source">;
 
 function SourceNodeComponent({ data, selected }: NodeProps<SourceNodeType>) {
-  const { componentDef, componentKey, displayName, metrics, disabled, isSystemLocked } = data;
+  const { componentDef, displayName, metrics, disabled, isSystemLocked } = data;
   const isShared = !!data.sharedComponentId;
   const isStale = isShared && data.sharedComponentLatestVersion != null &&
     (data.sharedComponentVersion ?? 0) < data.sharedComponentLatestVersion;
@@ -61,7 +61,7 @@ function SourceNodeComponent({ data, selected }: NodeProps<SourceNodeType>) {
 
       {/* Body */}
       <div className="space-y-2 px-3 py-2.5">
-        <p className="truncate text-xs font-medium text-foreground">{displayName || componentKey}</p>
+        {displayName && <p className="truncate text-xs font-medium text-foreground">{displayName}</p>}
 
         {metrics && (
           <p className="truncate text-xs font-mono text-emerald-400">
diff --git a/src/components/flow/transform-node.tsx b/src/components/flow/transform-node.tsx
index 910d2665..dbe824f2 100644
--- a/src/components/flow/transform-node.tsx
+++ b/src/components/flow/transform-node.tsx
@@ -32,7 +32,7 @@ function TransformNodeComponent({
   data,
   selected,
 }: NodeProps<TransformNodeType>) {
-  const { componentDef, componentKey, displayName, metrics, disabled } = data;
+  const { componentDef, displayName, metrics, disabled } = data;
   const isShared = !!data.sharedComponentId;
   const isStale = isShared && data.sharedComponentLatestVersion != null &&
     (data.sharedComponentVersion ?? 0) < data.sharedComponentLatestVersion;
@@ -66,7 +66,7 @@ function TransformNodeComponent({
 
       {/* Body */}
       <div className="space-y-2 px-3 py-2.5">
-        <p className="truncate text-xs font-medium text-foreground">{displayName || componentKey}</p>
+        {displayName && <p className="truncate text-xs font-medium text-foreground">{displayName}</p>}
 
         {metrics && (
           metrics.eventsInPerSec != null ? (
diff --git a/src/server/routers/alert.ts b/src/server/routers/alert.ts
index 54e2cc7a..e68ded75 100644
--- a/src/server/routers/alert.ts
+++ b/src/server/routers/alert.ts
@@ -665,9 +665,19 @@ export const alertRouter = router({
     .query(async ({ input }) => {
       const { environmentId, limit, cursor } = input;
 
+      // Exclude informational event metrics (deploys, version checks) from history;
+      // they still fire notifications but aren't surfaced in the alert table.
+      const HIDDEN_METRICS: AlertMetric[] = [
+        "deploy_requested",
+        "deploy_completed",
+        "deploy_rejected",
+        "deploy_cancelled",
+        "new_version_available",
+      ];
+
       const items = await prisma.alertEvent.findMany({
         where: {
-          alertRule: { environmentId },
+          alertRule: { environmentId, metric: { notIn: HIDDEN_METRICS } },
         },
         include: {
           alertRule: {