Openstatus
www.openstatus.dev
fix: keep regions chart data after update (#1408)
* fix: keep regions chart data after update
* chore: avoid trigger check if inactive
* chore: add footer description
authored by
Maximilian Kaske
and committed by
GitHub
93fb2776
de763652
+22
-14
+14
-9
apps/dashboard/src/app/(dashboard)/monitors/[id]/overview/client.tsx
+14
-9
apps/dashboard/src/app/(dashboard)/monitors/[id]/overview/client.tsx
···
26
26
import { mapRegionMetrics } from "@/data/metrics.client";
27
27
import type { RegionMetric } from "@/data/region-metrics";
28
28
import { useTRPC } from "@/lib/trpc/client";
29
+
import { flyRegions } from "@openstatus/db/src/schema/constants";
29
30
import { useQuery } from "@tanstack/react-query";
30
31
import { useParams } from "next/navigation";
31
32
import { useQueryStates } from "nuqs";
···
55
56
enabled: !!monitor,
56
57
} as const;
57
58
58
-
const { data: regionTimeline } = useQuery(regionTimelineQuery);
59
+
const { data: regionTimeline, isLoading } = useQuery(regionTimelineQuery);
59
60
60
61
const regionMetrics: RegionMetric[] = React.useMemo(() => {
61
-
return mapRegionMetrics(regionTimeline, monitor?.regions ?? [], percentile);
62
-
}, [regionTimeline, monitor, percentile]);
62
+
return mapRegionMetrics(
63
+
regionTimeline,
64
+
// NOTE: while loading, we show the selected regions with empty data,
65
+
// once the data is loaded, we show all the regions that we get from TB
66
+
isLoading
67
+
? monitor?.regions ?? []
68
+
: (flyRegions as unknown as (typeof flyRegions)[number][]),
69
+
percentile,
70
+
);
71
+
}, [regionTimeline, monitor, percentile, isLoading]);
63
72
64
73
if (!monitor) return null;
65
74
···
105
114
monitorId={id}
106
115
type={monitor.jobType as "http" | "tcp"}
107
116
period={period}
108
-
regions={monitor.regions.filter((region) =>
109
-
selectedRegions.includes(region),
110
-
)}
117
+
regions={selectedRegions}
111
118
/>
112
119
</Section>
113
120
<Section>
···
185
192
<TabsContent value="chart">
186
193
<ChartLineRegions
187
194
className="mt-3"
188
-
regions={monitor.regions.filter((region) =>
189
-
selectedRegions.includes(region),
190
-
)}
195
+
regions={selectedRegions}
191
196
data={regionMetrics.reduce(
192
197
(acc, region) => {
193
198
region.trend.forEach((t) => {
+4
-2
apps/dashboard/src/app/(dashboard)/monitors/create/page.tsx
+4
-2
apps/dashboard/src/app/(dashboard)/monitors/create/page.tsx
···
31
31
queryClient.invalidateQueries({
32
32
queryKey: trpc.monitor.list.queryKey(),
33
33
});
34
-
triggerCheckMutation.mutate({ id: data.id });
35
-
router.push(`/monitors/${data.id}/edit`);
34
+
if (data.active) {
35
+
triggerCheckMutation.mutate({ id: data.id });
36
+
router.push(`/monitors/${data.id}/edit`);
37
+
}
36
38
},
37
39
}),
38
40
);
+3
-1
apps/dashboard/src/app/(dashboard)/onboarding/client.tsx
+3
-1
apps/dashboard/src/app/(dashboard)/onboarding/client.tsx
···
99
99
trpc.monitor.new.mutationOptions({
100
100
onSuccess: (data) => {
101
101
setSearchParams({ step: "2" });
102
-
triggerCheckMutation.mutate({ id: data.id });
102
+
if (data.active) {
103
+
triggerCheckMutation.mutate({ id: data.id });
104
+
}
103
105
refetch();
104
106
queryClient.invalidateQueries({
105
107
queryKey: trpc.monitor.list.queryKey(),
-1
apps/dashboard/src/components/chart/chart-area-timing-phases.tsx
-1
apps/dashboard/src/components/chart/chart-area-timing-phases.tsx
+1
-1
apps/dashboard/src/components/forms/monitor/form-general.tsx
+1
-1
apps/dashboard/src/components/forms/monitor/form-general.tsx