Openstatus
www.openstatus.dev
fix: response log detais
authored by
Maximilian Kaske
and committed by
Maximilian Kaske
eaa6589c
5b60665f
+15
-21
+15
-21
apps/web/src/app/app/[workspaceSlug]/(dashboard)/monitors/[id]/data/_components/data-table-wrapper.tsx
+15
-21
apps/web/src/app/app/[workspaceSlug]/(dashboard)/monitors/[id]/data/_components/data-table-wrapper.tsx
···
8
8
PaginationState,
9
9
Row,
10
10
} from "@tanstack/react-table";
11
-
import { Suspense, use } from "react";
12
11
13
12
import * as assertions from "@openstatus/assertions";
14
13
···
18
17
import { LoadingAnimation } from "@/components/loading-animation";
19
18
import { ResponseDetailTabs } from "@/components/ping-response-analysis/response-detail-tabs";
20
19
import type { Trigger } from "@/lib/monitor/utils";
21
-
import { api } from "@/trpc/client";
20
+
import { api } from "@/trpc/rq-client";
22
21
import type { monitorFlyRegionSchema } from "@openstatus/db/src/schema/constants";
23
22
import type { z } from "zod";
24
23
···
62
61
}
63
62
64
63
function renderSubComponent({ row }: { row: Row<Monitor> }) {
65
-
return (
66
-
<Suspense
67
-
fallback={
68
-
<div className="py-4">
69
-
<LoadingAnimation variant="inverse" />
70
-
</div>
71
-
}
72
-
>
73
-
<Details row={row} />
74
-
</Suspense>
75
-
);
64
+
return <Details row={row} />;
76
65
}
77
66
78
67
// REMINDER: only HTTP monitors have more details
79
68
function Details({ row }: { row: Row<Monitor> }) {
80
-
const data = use(
81
-
api.tinybird.httpGetMonthly.query({
82
-
monitorId: row.original.monitorId,
83
-
region: row.original.region,
84
-
cronTimestamp: row.original.cronTimestamp || undefined,
85
-
}),
86
-
);
69
+
const { data, isLoading } = api.tinybird.httpGetMonthly.useQuery({
70
+
monitorId: row.original.monitorId,
71
+
region: row.original.region,
72
+
cronTimestamp: row.original.cronTimestamp || undefined,
73
+
});
87
74
88
-
if (!data.data || data.data.length === 0) return <p>Something went wrong</p>;
75
+
if (isLoading)
76
+
return (
77
+
<div className="py-4">
78
+
<LoadingAnimation variant="inverse" />
79
+
</div>
80
+
);
81
+
82
+
if (!data) return <p>Something went wrong</p>;
89
83
90
84
const first = data.data?.[0];
91
85