Openstatus
www.openstatus.dev
chore: improve rum empty state (#789)
* chore: empty state
* fix: format
authored by
Maximilian Kaske
and committed by
GitHub
a1b23a62
438383cd
+35
-9
+5
apps/web/.env.example
+5
apps/web/.env.example
+2
-4
apps/web/src/app/app/[workspaceSlug]/(dashboard)/rum/(overview)/_components/MetricCard.tsx
apps/web/src/app/app/[workspaceSlug]/(dashboard)/rum/_components/rum-metric-card.tsx
+2
-4
apps/web/src/app/app/[workspaceSlug]/(dashboard)/rum/(overview)/_components/MetricCard.tsx
apps/web/src/app/app/[workspaceSlug]/(dashboard)/rum/_components/rum-metric-card.tsx
···
12
12
});
13
13
return (
14
14
<Card>
15
-
<p className="text-tremor-default text-tremor-content dark:text-dark-tremor-content">
16
-
{event}
17
-
</p>
18
-
<p className="text-tremor-content-strong dark:text-dark-tremor-content-strong text-3xl font-semibold">
15
+
<p className="text-muted-foreground text-sm">{event}</p>
16
+
<p className="text-foreground text-3xl font-semibold">
19
17
{data?.median || 0}
20
18
</p>
21
19
</Card>
+24
-2
apps/web/src/app/app/[workspaceSlug]/(dashboard)/rum/page.tsx
+24
-2
apps/web/src/app/app/[workspaceSlug]/(dashboard)/rum/page.tsx
···
1
1
import * as React from "react";
2
+
import Link from "next/link";
2
3
import { notFound } from "next/navigation";
3
4
5
+
import { Button } from "@openstatus/ui";
6
+
7
+
import { EmptyState } from "@/components/dashboard/empty-state";
4
8
import { api } from "@/trpc/server";
5
-
import { RUMMetricCard } from "./(overview)/_components/MetricCard";
9
+
import { RUMMetricCard } from "./_components/rum-metric-card";
6
10
7
11
export const dynamic = "force-dynamic";
8
12
···
12
16
if (!workspace) {
13
17
return notFound();
14
18
}
19
+
15
20
if (workspace.dsn === null) {
16
-
return <>The feature is currently in beta and will be released soon.</>;
21
+
return (
22
+
<EmptyState
23
+
icon="ratio"
24
+
title="Real User Monitoring"
25
+
description="The feature is currently in beta and will be released soon."
26
+
action={
27
+
<Button asChild>
28
+
<Link
29
+
href="mailto:ping@openstatus.dev?subject=Real User Monitoring beta tester"
30
+
target="_blank"
31
+
>
32
+
Contact Us
33
+
</Link>
34
+
</Button>
35
+
}
36
+
/>
37
+
);
17
38
}
39
+
18
40
return (
19
41
<div className="grid grid-cols-1 gap-2 md:grid-cols-4">
20
42
<RUMMetricCard event="CLS" />
+2
apps/web/src/components/icons.tsx
+2
apps/web/src/components/icons.tsx
···
33
33
Play,
34
34
Plug,
35
35
Puzzle,
36
+
Ratio,
36
37
Search,
37
38
SearchCheck,
38
39
Siren,
···
104
105
youtube: Youtube,
105
106
"hour-glass": Hourglass,
106
107
"candlestick-chart": CandlestickChart,
108
+
ratio: Ratio,
107
109
discord: ({ ...props }: LucideProps) => (
108
110
<svg viewBox="0 0 640 512" {...props}>
109
111
<path
+2
-3
apps/web/src/config/pages.ts
+2
-3
apps/web/src/config/pages.ts
···
178
178
},
179
179
{
180
180
title: "Real User Monitoring",
181
-
description: "Where you can see all the notifications.",
181
+
description: "Get speed insights for your application.",
182
182
href: "/rum",
183
-
icon: "bell",
183
+
icon: "ratio",
184
184
segment: "rum",
185
-
children: notificationsPagesConfig,
186
185
},
187
186
{
188
187
title: "Settings",