calvin.erfmann/pangolin
1
0
Fork 0
mirror of https://github.com/fosrl/pangolin.git synced 2026-05-05 03:54:22 +00:00
Code Issues Packages Projects Releases Wiki Activity

fix uptime graph styles

Browse Source
This commit is contained in:
miloschwartz
2026-04-21 17:39:16 -07:00
parent 0434b1a656
commit a2d8386b4a
3 changed files with 67 additions and 26 deletions
Download Patch File Download Diff File Expand all files Collapse all files

7
src/components/UptimeAlertSection.tsx
View File

@@ -165,7 +165,12 @@ export default function UptimeAlertSection({
rulesListSearch.toString() ? `?${rulesListSearch}` : ""
}`;
const alertButton = alertRulesLoading ? null : hasRules ? (
const alertButton = alertRulesLoading ? (
<Button variant="outline" type="button" loading aria-busy="true">
<BellPlus className="size-4 mr-2" />
Add Alert
</Button>
) : hasRules ? (
<Button variant="outline" asChild>
<Link href={rulesListHref}>
<BellRing className="size-4 mr-2" />

47
src/components/UptimeBar.tsx
View File

@@ -41,7 +41,7 @@ const barColorClass: Record<string, string> = {
good: "bg-green-500",
degraded: "bg-yellow-500",
bad: "bg-red-500",
no_data: "bg-zinc-700"
no_data: "bg-neutral-200 dark:bg-neutral-700"
};
type UptimeBarProps = {
@@ -72,7 +72,11 @@ export default function UptimeBar({
});
const hcQuery = useQuery({
...orgQueries.healthCheckStatusHistory({ orgId: orgId ?? "", healthCheckId: healthCheckId ?? 0, days }),
...orgQueries.healthCheckStatusHistory({
orgId: orgId ?? "",
healthCheckId: healthCheckId ?? 0,
days
}),
enabled: healthCheckId != null && siteId == null && resourceId == null,
meta: { api }
});
@@ -84,24 +88,43 @@ export default function UptimeBar({
});
const { data, isLoading } =
siteId != null ? siteQuery :
resourceId != null ? resourceQuery :
hcQuery;
siteId != null
? siteQuery
: resourceId != null
? resourceQuery
: hcQuery;
if (isLoading) {
return (
<div className={cn("space-y-2", className)}>
{title && (
<div className="text-sm font-medium">{title}</div>
)}
<div className={cn("space-y-3", className)}>
<div className="flex items-center justify-between">
{title && (
<span className="text-sm font-medium">{title}</span>
)}
<div
className="flex items-center gap-4 text-sm ml-auto"
aria-busy="true"
aria-label="Loading uptime summary"
>
<span className="h-4 w-[4.5rem] shrink-0 rounded-md bg-muted animate-pulse" />
<span className="h-4 w-[7rem] shrink-0 rounded-md bg-muted animate-pulse" />
</div>
</div>
<div className="flex gap-0.5 h-8">
{Array.from({ length: days }).map((_, i) => (
<div
key={i}
className="flex-1 rounded-sm bg-zinc-800 animate-pulse"
className={cn(
"flex-1 rounded-sm animate-pulse",
barColorClass.no_data
)}
/>
))}
</div>
<div className="flex justify-between text-xs text-muted-foreground">
<span>{days} days ago</span>
<span>Today</span>
</div>
</div>
);
}
@@ -114,9 +137,7 @@ export default function UptimeBar({
<div className={cn("space-y-3", className)}>
{/* Header row */}
<div className="flex items-center justify-between">
{title && (
<span className="text-sm font-medium">{title}</span>
)}
{title && <span className="text-sm font-medium">{title}</span>}
<div className="flex items-center gap-4 text-sm ml-auto">
{!allNoData && (
<>

39
src/components/UptimeMiniBar.tsx
View File

@@ -33,7 +33,7 @@ const barColorClass: Record<string, string> = {
good: "bg-green-500",
degraded: "bg-yellow-500",
bad: "bg-red-500",
no_data: "bg-zinc-700"
no_data: "bg-neutral-200 dark:bg-neutral-700"
};
type UptimeMiniBarProps = {
@@ -61,7 +61,11 @@ export default function UptimeMiniBar({
});
const hcQuery = useQuery({
...orgQueries.healthCheckStatusHistory({ orgId: orgId ?? "", healthCheckId: healthCheckId ?? 0, days }),
...orgQueries.healthCheckStatusHistory({
orgId: orgId ?? "",
healthCheckId: healthCheckId ?? 0,
days
}),
enabled: healthCheckId != null && siteId == null && resourceId == null,
meta: { api },
staleTime: 5 * 60 * 1000
@@ -75,22 +79,36 @@ export default function UptimeMiniBar({
});
const { data, isLoading } =
siteId != null ? siteQuery :
resourceId != null ? resourceQuery :
hcQuery;
siteId != null
? siteQuery
: resourceId != null
? resourceQuery
: hcQuery;
if (isLoading) {
return (
<div className="flex items-center gap-2">
<div className="flex gap-px h-5 w-24">
<div
className="flex gap-px h-5"
style={{ width: `${days * 5}px` }}
>
{Array.from({ length: days }).map((_, i) => (
<div
key={i}
className="flex-1 rounded-[2px] bg-zinc-800 animate-pulse"
className={cn(
"flex-1 rounded-[2px] animate-pulse",
barColorClass.no_data
)}
/>
))}
</div>
<span className="text-xs text-muted-foreground w-12">—</span>
<span
className="inline-flex min-w-[7ch] items-center justify-end text-xs text-muted-foreground whitespace-nowrap"
aria-busy="true"
aria-label="Loading uptime"
>
<span className="h-4 w-[5.5ch] max-w-full rounded bg-muted animate-pulse" />
</span>
</div>
);
}
@@ -101,10 +119,7 @@ export default function UptimeMiniBar({
return (
<div className="flex items-center gap-2">
<div
className="flex gap-px h-5"
style={{ width: `${days * 5}px` }}
>
<div className="flex gap-px h-5" style={{ width: `${days * 5}px` }}>
{data.days.map((day, i) => (
<Tooltip key={i}>
<TooltipTrigger asChild>