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

Remove weird extra status history component

Browse Source
This commit is contained in:
Owen
2026-04-17 17:45:49 -07:00
parent a5b8a44e78
commit b2d5a1ffdf
2 changed files with 17 additions and 83 deletions
Download Patch File Download Diff File Expand all files Collapse all files

84
src/components/ProxyResourcesTable.tsx
View File

@@ -56,6 +56,7 @@ import {
TooltipTrigger
} from "@app/components/ui/tooltip";
import type { StatusHistoryResponse } from "@server/lib/statusHistory";
import UptimeMiniBar from "./UptimeMiniBar";
export type TargetHealth = {
targetId: number;
@@ -338,82 +339,6 @@ export default function ProxyResourcesTable({
);
}
function ResourceStatusHistory({
resourceId,
api
}: {
resourceId: number;
api: ReturnType<typeof createApiClient>;
}) {
const { data: history, isLoading: loading } = useQuery({
queryKey: ["RESOURCE_STATUS_HISTORY", resourceId, 30],
queryFn: async ({ signal }) => {
const res = await api.get(
`/resource/${resourceId}/status-history`,
{
params: { days: 30 },
signal
}
);
return (res.data.data ?? res.data) as StatusHistoryResponse;
},
staleTime: 5 * 60 * 1000,
meta: { api }
});
if (loading) {
return (
<div className="flex items-center gap-0.5">
{Array.from({ length: 90 }).map((_, i) => (
<div
key={i}
className="w-1 h-6 rounded-sm bg-muted animate-pulse"
/>
))}
</div>
);
}
if (!history) return null;
return (
<div className="flex items-center gap-2">
<TooltipProvider>
<div className="flex items-center gap-0.5">
{history.days.map((bucket, i) => {
const colorClass =
bucket.status === "good"
? "bg-green-500"
: bucket.status === "degraded"
? "bg-yellow-500"
: bucket.status === "bad"
? "bg-red-500"
: "bg-muted";
return (
<Tooltip key={i}>
<TooltipTrigger asChild>
<div
className={`w-1 h-6 rounded-sm ${colorClass} cursor-default`}
/>
</TooltipTrigger>
<TooltipContent>
<span>
{bucket.date}:{" "}
{bucket.uptimePercent}% uptime
</span>
</TooltipContent>
</Tooltip>
);
})}
</div>
</TooltipProvider>
<span className="text-sm text-muted-foreground whitespace-nowrap">
{history.overallUptimePercent.toFixed(1)}% uptime
</span>
</div>
);
}
const proxyColumns: ExtendedColumnDef<ResourceRow>[] = [
{
accessorKey: "name",
@@ -517,14 +442,11 @@ export default function ProxyResourcesTable({
{
id: "statusHistory",
friendlyName: t("uptime30d"),
header: () => <span className="p-3">{t("statusHistory")}</span>,
header: () => <span className="p-3">{t("uptime30d")}</span>,
cell: ({ row }) => {
const resourceRow = row.original;
return (
<ResourceStatusHistory
resourceId={resourceRow.id}
api={api}
/>
<UptimeMiniBar resourceId={resourceRow.id} days={30} />
);
}
},

16
src/components/UptimeMiniBar.tsx
View File

@@ -39,6 +39,7 @@ const barColorClass: Record<string, string> = {
type UptimeMiniBarProps = {
orgId?: string;
siteId?: number;
resourceId?: number;
healthCheckId?: number;
days?: number;
};
@@ -46,6 +47,7 @@ type UptimeMiniBarProps = {
export default function UptimeMiniBar({
orgId,
siteId,
resourceId,
healthCheckId,
days = 30
}: UptimeMiniBarProps) {
@@ -60,12 +62,22 @@ export default function UptimeMiniBar({
const hcQuery = useQuery({
...orgQueries.healthCheckStatusHistory({ orgId: orgId ?? "", healthCheckId: healthCheckId ?? 0, days }),
enabled: healthCheckId != null && siteId == null,
enabled: healthCheckId != null && siteId == null && resourceId == null,
meta: { api },
staleTime: 5 * 60 * 1000
});
const { data, isLoading } = siteId != null ? siteQuery : hcQuery;
const resourceQuery = useQuery({
...orgQueries.resourceStatusHistory({ resourceId, days }),
enabled: resourceId != null && siteId == null && healthCheckId == null,
meta: { api },
staleTime: 5 * 60 * 1000
});
const { data, isLoading } =
siteId != null ? siteQuery :
resourceId != null ? resourceQuery :
hcQuery;
if (isLoading) {
return (