refactor(alerts): derive UI labels without reassignment

This commit is contained in:
moe-berri 2026-11-08 13:43:16 +08:00
parent 14d4d04d06
commit 45add82afe
3 changed files with 31 additions and 29 deletions

View file

@ -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

View file

@ -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 && (

View file

@ -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>