openstatus.dev
Openstatus
www.openstatus.dev
chore: response logs cloud provider (#1423)
authored by
Maximilian Kaske
and committed by
GitHub
14508828
182bdcce
+45
-50
+14
-43
apps/dashboard/src/components/chart/chart-line-regions.tsx
+14
-43
apps/dashboard/src/components/chart/chart-line-regions.tsx
···
13
13
import { regionColors } from "@/data/regions";
14
14
import { useIsMobile } from "@/hooks/use-mobile";
15
15
import { cn } from "@/lib/utils";
16
+
import { monitorRegions } from "@openstatus/db/src/schema/constants";
16
17
import { regionDict } from "@openstatus/utils";
17
18
import { ChartTooltipNumber } from "./chart-tooltip-number";
18
19
19
-
const chartConfig = {
20
-
ams: { label: regionDict.ams.location, color: regionColors.ams },
21
-
arn: { label: regionDict.arn.location, color: regionColors.arn },
22
-
atl: { label: regionDict.atl.location, color: regionColors.atl },
23
-
bog: { label: regionDict.bog.location, color: regionColors.bog },
24
-
bom: { label: regionDict.bom.location, color: regionColors.bom },
25
-
bos: { label: regionDict.bos.location, color: regionColors.bos },
26
-
cdg: { label: regionDict.cdg.location, color: regionColors.cdg },
27
-
den: { label: regionDict.den.location, color: regionColors.den },
28
-
dfw: { label: regionDict.dfw.location, color: regionColors.dfw },
29
-
ewr: { label: regionDict.ewr.location, color: regionColors.ewr },
30
-
eze: { label: regionDict.eze.location, color: regionColors.eze },
31
-
fra: { label: regionDict.fra.location, color: regionColors.fra },
32
-
gdl: { label: regionDict.gdl.location, color: regionColors.gdl },
33
-
gig: { label: regionDict.gig.location, color: regionColors.gig },
34
-
gru: { label: regionDict.gru.location, color: regionColors.gru },
35
-
hkg: { label: regionDict.hkg.location, color: regionColors.hkg },
36
-
iad: { label: regionDict.iad.location, color: regionColors.iad },
37
-
jnb: { label: regionDict.jnb.location, color: regionColors.jnb },
38
-
lax: { label: regionDict.lax.location, color: regionColors.lax },
39
-
lhr: { label: regionDict.lhr.location, color: regionColors.lhr },
40
-
mad: { label: regionDict.mad.location, color: regionColors.mad },
41
-
mia: { label: regionDict.mia.location, color: regionColors.mia },
42
-
nrt: { label: regionDict.nrt.location, color: regionColors.nrt },
43
-
ord: { label: regionDict.ord.location, color: regionColors.ord },
44
-
otp: { label: regionDict.otp.location, color: regionColors.otp },
45
-
phx: { label: regionDict.phx.location, color: regionColors.phx },
46
-
qro: { label: regionDict.qro.location, color: regionColors.qro },
47
-
scl: { label: regionDict.scl.location, color: regionColors.scl },
48
-
sjc: { label: regionDict.sjc.location, color: regionColors.sjc },
49
-
sea: { label: regionDict.sea.location, color: regionColors.sea },
50
-
sin: { label: regionDict.sin.location, color: regionColors.sin },
51
-
syd: { label: regionDict.syd.location, color: regionColors.syd },
52
-
waw: { label: regionDict.waw.location, color: regionColors.waw },
53
-
yul: { label: regionDict.yul.location, color: regionColors.yul },
54
-
yyz: { label: regionDict.yyz.location, color: regionColors.yyz },
55
-
koyeb_fra: { label: regionDict.ams.location, color: regionColors.koyeb_fra },
56
-
koyeb_par: { label: regionDict.arn.location, color: regionColors.koyeb_par },
57
-
koyeb_sfo: { label: regionDict.atl.location, color: regionColors.koyeb_sfo },
58
-
koyeb_sin: { label: regionDict.bog.location, color: regionColors.koyeb_sin },
59
-
koyeb_tyo: { label: regionDict.bom.location, color: regionColors.koyeb_tyo },
60
-
koyeb_was: { label: regionDict.bos.location, color: regionColors.koyeb_was },
61
-
} satisfies ChartConfig;
20
+
const chartConfig = monitorRegions.reduce((config, region) => {
21
+
const regionInfo = regionDict[region as keyof typeof regionDict];
22
+
const color = regionColors[region as keyof typeof regionColors];
23
+
24
+
if (regionInfo && color) {
25
+
config[region] = {
26
+
label: `${regionInfo.location} (${regionInfo.provider})`,
27
+
color,
28
+
};
29
+
}
30
+
31
+
return config;
32
+
}, {} as ChartConfig) satisfies ChartConfig;
62
33
63
34
export type TrendPoint = {
64
35
timestamp: number; // unix millis
+4
-1
apps/dashboard/src/components/common/icon-cloud-provider.tsx
+4
-1
apps/dashboard/src/components/common/icon-cloud-provider.tsx
···
32
32
return (
33
33
<TooltipProvider>
34
34
<Tooltip delayDuration={0}>
35
-
<TooltipTrigger type="button">
35
+
<TooltipTrigger
36
+
type="button"
37
+
className="rounded-sm outline-none focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 focus-visible:ring-offset-2"
38
+
>
36
39
<IconCloudProvider {...props} />
37
40
</TooltipTrigger>
38
41
<TooltipContent className="capitalize">{props.provider}</TooltipContent>
+8
-1
apps/dashboard/src/components/data-table/response-logs/columns.tsx
+8
-1
apps/dashboard/src/components/data-table/response-logs/columns.tsx
···
95
95
}
96
96
97
97
const regionConfig = regionDict[value as keyof typeof regionDict];
98
-
return regionConfig.location;
98
+
return (
99
+
<div>
100
+
{regionConfig.location}{" "}
101
+
<span className="text-muted-foreground/70 text-xs">
102
+
({regionConfig.provider})
103
+
</span>
104
+
</div>
105
+
);
99
106
},
100
107
enableSorting: false,
101
108
enableHiding: false,
+18
-3
apps/dashboard/src/components/data-table/response-logs/data-table-basics.tsx
+18
-3
apps/dashboard/src/components/data-table/response-logs/data-table-basics.tsx
···
1
1
"use client";
2
2
3
+
import { IconCloudProvider } from "@/components/common/icon-cloud-provider";
3
4
import { BlockWrapper } from "@/components/content/block-wrapper";
4
5
import { TableCellDate } from "@/components/data-table/table-cell-date";
5
6
import { TableCellNumber } from "@/components/data-table/table-cell-number";
···
130
131
Region
131
132
</TableHead>
132
133
<TableCell className="max-w-full overflow-x-auto whitespace-normal font-mono">
133
-
{regionConfig?.flag} {regionConfig?.code}{" "}
134
-
<span className="text-muted-foreground">
135
-
{regionConfig?.location}
134
+
{regionConfig?.code}{" "}
135
+
<span className="text-muted-foreground text-xs">
136
+
{regionConfig?.location} {regionConfig?.flag}
137
+
</span>
138
+
</TableCell>
139
+
</TableRow>
140
+
<TableRow className="[&>:not(:last-child)]:border-r">
141
+
<TableHead className="bg-muted/50 font-normal text-muted-foreground">
142
+
Cloud Provider
143
+
</TableHead>
144
+
<TableCell className="inline-flex max-w-full overflow-x-auto whitespace-normal font-mono">
145
+
<IconCloudProvider
146
+
provider={regionConfig?.provider}
147
+
className="mt-0.5"
148
+
/>
149
+
<span className="ml-1 text-muted-foreground">
150
+
{regionConfig?.provider}
136
151
</span>
137
152
</TableCell>
138
153
</TableRow>
+1
-2
apps/dashboard/src/components/data-table/response-logs/regions/columns.tsx
+1
-2
apps/dashboard/src/components/data-table/response-logs/regions/columns.tsx
···
37
37
{region.code.replace(/(koyeb_|railway_|fly_)/g, "")}
38
38
</TooltipTrigger>
39
39
<TooltipContent side="left">
40
-
{region.location} -{" "}
41
-
<span className="capitalize">{region.provider}</span>
40
+
{region.location} ({region.provider})
42
41
</TooltipContent>
43
42
</Tooltip>
44
43
</TooltipProvider>