From 45add82afe207b311c181d513d71fa51e8fc9102 Mon Sep 17 00:00:00 2001
From: moe-berri <moe@berri.ai>
Date: Sun, 8 Nov 2026 13:43:16 +0800
Subject: [PATCH] refactor(alerts): derive UI labels without reassignment

---
 .../src/components/Issues/IssueDetail.tsx     | 43 ++++++++++---------
 .../components/Issues/IssueHistoryChart.tsx   | 10 ++---
 .../NotificationsBell/NotificationsBell.tsx   |  7 +--
 3 files changed, 31 insertions(+), 29 deletions(-)

diff --git a/ui/litellm-dashboard/src/components/Issues/IssueDetail.tsx b/ui/litellm-dashboard/src/components/Issues/IssueDetail.tsx
index 741e564c4b3..a4ef2e63746 100644
--- a/ui/litellm-dashboard/src/components/Issues/IssueDetail.tsx
+++ b/ui/litellm-dashboard/src/components/Issues/IssueDetail.tsx
@@ -208,28 +208,29 @@ export default function IssueDetail({ id }: { id: string }) {
   const query = useIssue(accessToken, id);
   const globalAccess = hasCapability(userRole, "viewGlobalSpend");
   const denied = query.error instanceof ApiError && query.error.status === 403;
-  let back = { href: uiHref("usage?view=my-usage"), label: "My usage" };
-  if (globalAccess) back = { href: issuesHref(), label: "Alerts" };
-  else if (query.data?.can_view_activity === true) {
-    const href = resourceHref(query.data);
-    if (href) back = { href, label: "Resource activity" };
-  }
-  let content = (
-    <p role="status" className="text-sm text-muted-foreground">
-      Loading alert…
-    </p>
-  );
-  if (!accessToken) content = <p>Sign in to view this alert.</p>;
-  else if (query.isError)
-    content = (
-      <div role="alert" className="space-y-2">
-        <p>{denied ? "You don’t have access to this alert." : "Could not load this alert."}</p>
-        <Button variant="outline" onClick={() => void query.refetch()}>
-          Retry
-        </Button>
-      </div>
+  const back = (() => {
+    if (globalAccess) return { href: issuesHref(), label: "Alerts" };
+    const href = query.data?.can_view_activity === true ? resourceHref(query.data) : null;
+    return href ? { href, label: "Resource activity" } : { href: uiHref("usage?view=my-usage"), label: "My usage" };
+  })();
+  const content = (() => {
+    if (!accessToken) return <p>Sign in to view this alert.</p>;
+    if (query.isError)
+      return (
+        <div role="alert" className="space-y-2">
+          <p>{denied ? "You don’t have access to this alert." : "Could not load this alert."}</p>
+          <Button variant="outline" onClick={() => void query.refetch()}>
+            Retry
+          </Button>
+        </div>
+      );
+    if (query.data) return <IssueBody key={query.data.id} issue={query.data} />;
+    return (
+      <p role="status" className="text-sm text-muted-foreground">
+        Loading alert…
+      </p>
     );
-  else if (query.data) content = <IssueBody key={query.data.id} issue={query.data} />;
+  })();
   return (
     <div className="min-w-0 space-y-5">
       <a
diff --git a/ui/litellm-dashboard/src/components/Issues/IssueHistoryChart.tsx b/ui/litellm-dashboard/src/components/Issues/IssueHistoryChart.tsx
index f0c4a672bfe..dba76ae5878 100644
--- a/ui/litellm-dashboard/src/components/Issues/IssueHistoryChart.tsx
+++ b/ui/litellm-dashboard/src/components/Issues/IssueHistoryChart.tsx
@@ -34,15 +34,15 @@ export default function IssueHistoryChart({ issue, compact = false }: { issue: I
         Daily history was not saved for this alert. Open activity to explore the recorded traffic.
       </p>
     );
-  let caption = "Recorded requests per day. Missing days are left blank.";
-  if (comparison) {
+  const caption = (() => {
+    if (compact) return `${issueDate(data[0].day)} – ${issueDate(data[data.length - 1].day)}`;
+    if (!comparison) return "Recorded requests per day. Missing days are left blank.";
     const baseline =
       issue.grouping_reason === "provider_cohort"
         ? "Baseline uses the observed traffic mix across comparable keys and models."
         : "Baseline uses recorded days in this period.";
-    caption = `Dashed line: usual ${formatAlertValue(metric, comparison.baseline_value)}. ${baseline} Missing days are left blank.`;
-  }
-  if (compact) caption = `${issueDate(data[0].day)} – ${issueDate(data[data.length - 1].day)}`;
+    return `Dashed line: usual ${formatAlertValue(metric, comparison.baseline_value)}. ${baseline} Missing days are left blank.`;
+  })();
   return (
     <figure className="min-w-0 space-y-3" aria-label={label}>
       {!compact && (
diff --git a/ui/litellm-dashboard/src/components/Navbar/NotificationsBell/NotificationsBell.tsx b/ui/litellm-dashboard/src/components/Navbar/NotificationsBell/NotificationsBell.tsx
index 9308fb089a5..2acc0e9f145 100644
--- a/ui/litellm-dashboard/src/components/Navbar/NotificationsBell/NotificationsBell.tsx
+++ b/ui/litellm-dashboard/src/components/Navbar/NotificationsBell/NotificationsBell.tsx
@@ -180,11 +180,12 @@ export const NotificationsBellView: React.FC<NotificationsBellViewProps> = ({
   const count = issues?.total ?? 0;
   const needsAttention = count > 0;
   const showIssues = Boolean(issues || issuesPending || issuesFailed);
-  let label =
-    unreadCount > 0
+  const label = (() => {
+    if (needsAttention) return t("shell.notifications.bell.triggerAlerts", { count });
+    return unreadCount > 0
       ? t("shell.notifications.bell.triggerUnread", { unread: unreadCount })
       : t("shell.notifications.bell.trigger");
-  if (needsAttention) label = t("shell.notifications.bell.triggerAlerts", { count });
+  })();
 
   return (
     <Popover>