openstatus.dev
Openstatus
www.openstatus.dev
feat: add flags to chart and regions dictionary (#477)
authored by
Maximilian Kaske
and committed by
GitHub
3173cce9
59a65d5d
+38
-12
+9
-5
apps/web/src/app/app/(dashboard)/[workspaceSlug]/monitors/[id]/data/_components/chart-wrapper.tsx
+9
-5
apps/web/src/app/app/(dashboard)/[workspaceSlug]/monitors/[id]/data/_components/chart-wrapper.tsx
···
1
1
"use client";
2
2
3
3
import type { Ping, Region } from "@openstatus/tinybird";
4
+
import { regionsDict } from "@openstatus/utils";
4
5
5
6
import type { Period } from "../utils";
6
7
import { Chart } from "./chart";
···
23
24
*/
24
25
function groupDataByTimestamp(data: Ping[], period: Period) {
25
26
let currentTimestamp = 0;
26
-
const regions: Partial<Record<Region, null>> = {};
27
+
const regions: Record<string, null> = {};
27
28
const _data = data.reduce(
28
29
(acc, curr) => {
29
30
const { cronTimestamp, latency, region } = curr;
30
-
regions[region] = null; // to get the region keys
31
+
const { flag, code } = regionsDict[region];
32
+
const fullNameRegion = `${flag} ${code}`;
33
+
regions[fullNameRegion] = null; // to get the region keys
31
34
if (cronTimestamp === currentTimestamp) {
32
35
// overwrite last object in acc
33
36
const last = acc.pop();
34
37
if (last) {
35
38
acc.push({
36
39
...last,
37
-
[region]: latency,
40
+
[fullNameRegion]: latency,
38
41
});
39
42
}
40
43
} else if (cronTimestamp) {
···
42
45
// create new object in acc
43
46
acc.push({
44
47
timestamp: renderTimestamp(cronTimestamp, period),
45
-
[region]: latency,
48
+
[fullNameRegion]: latency,
46
49
});
47
50
}
48
51
return acc;
49
52
},
50
53
[] as (Partial<Record<Region, string>> & { timestamp: string })[],
51
54
);
52
-
return { regions: Object.keys(regions) as Region[], data: _data.reverse() };
55
+
56
+
return { regions: Object.keys(regions), data: _data.reverse() };
53
57
}
54
58
55
59
/**
+2
-4
apps/web/src/app/app/(dashboard)/[workspaceSlug]/monitors/[id]/data/_components/chart.tsx
+2
-4
apps/web/src/app/app/(dashboard)/[workspaceSlug]/monitors/[id]/data/_components/chart.tsx
···
2
2
3
3
import { Card, LineChart, Title } from "@tremor/react";
4
4
5
-
import type { Region } from "@openstatus/tinybird";
6
-
7
5
const dataFormatter = (number: number) =>
8
6
`${Intl.NumberFormat("us").format(number).toString()}ms`;
9
7
10
8
interface ChartProps {
11
-
data: (Partial<Record<Region, string>> & { timestamp: string })[];
12
-
regions: Region[];
9
+
data: { timestamp: string; [key: string]: string }[];
10
+
regions: string[];
13
11
}
14
12
15
13
export function Chart({ data, regions }: ChartProps) {
+27
-3
packages/utils/index.ts
+27
-3
packages/utils/index.ts
···
10
10
code: "auto",
11
11
name: "random",
12
12
location: "Random",
13
+
flag: "🌍",
13
14
},
14
15
arn1: {
15
16
code: "arn1",
16
17
name: "eu-north-1",
17
18
location: "Stockholm, Sweden",
19
+
flag: "🇸🇪",
18
20
},
19
21
bom1: {
20
22
code: "bom1",
21
23
name: "ap-south-1",
22
24
location: "Mumbai, India",
25
+
flag: "🇮🇳",
23
26
},
24
27
cdg1: {
25
28
code: "cdg1",
26
29
name: "eu-west-3",
27
30
location: "Paris, France",
31
+
flag: "🇫🇷",
28
32
},
29
33
cle1: {
30
34
code: "cle1",
31
35
name: "us-east-2",
32
36
location: "Cleveland, USA",
37
+
flag: "🇺🇸",
33
38
},
34
39
cpt1: {
35
40
code: "cpt1",
36
41
name: "af-south-1",
37
42
location: "Cape Town, South Africa",
43
+
flag: "🇿🇦",
38
44
},
39
45
dub1: {
40
46
code: "dub1",
41
47
name: "eu-west-1",
42
48
location: "Dublin, Ireland",
49
+
flag: "🇮🇪",
43
50
},
44
51
fra1: {
45
52
code: "fra1",
46
53
name: "eu-central-1",
47
54
location: "Frankfurt, Germany",
55
+
flag: "🇩🇪",
48
56
},
49
57
gru1: {
50
58
code: "gru1",
51
59
name: "sa-east-1",
52
60
location: "São Paulo, Brazil",
61
+
flag: "🇧🇷",
53
62
},
54
63
hkg1: {
55
64
code: "hkg1",
56
65
name: "ap-east-1",
57
66
location: "Hong Kong",
67
+
flag: "🇭🇰",
58
68
},
59
69
hnd1: {
60
70
code: "hnd1",
61
71
name: "ap-northeast-1",
62
72
location: "Tokyo, Japan",
73
+
flag: "🇯🇵",
63
74
},
64
75
iad1: {
65
76
code: "iad1",
66
77
name: "us-east-1",
67
78
location: "Washington, D.C., USA",
79
+
flag: "🇺🇸",
68
80
},
69
81
icn1: {
70
82
code: "icn1",
71
83
name: "ap-northeast-2",
72
84
location: "Seoul, South Korea",
85
+
flag: "🇰🇷",
73
86
},
74
87
kix1: {
75
88
code: "kix1",
76
89
name: "ap-northeast-3",
77
90
location: "Osaka, Japan",
91
+
flag: "🇯🇵",
78
92
},
79
93
lhr1: {
80
94
code: "lhr1",
81
95
name: "eu-west-2",
82
96
location: "London, United Kingdom",
97
+
flag: "🇬🇧",
83
98
},
84
99
pdx1: {
85
100
code: "pdx1",
86
101
name: "us-west-2",
87
102
location: "Portland, USA",
103
+
flag: "🇺🇸",
88
104
},
89
105
sfo1: {
90
106
code: "sfo1",
91
107
name: "us-west-1",
92
108
location: "San Francisco, USA",
109
+
flag: "🇺🇸",
93
110
},
94
111
sin1: {
95
112
code: "sin1",
96
113
name: "ap-southeast-1",
97
114
location: "Singapore",
115
+
flag: "🇸🇬",
98
116
},
99
117
syd1: {
100
118
code: "syd1",
101
119
name: "ap-southeast-2",
102
120
location: "Sydney, Australia",
121
+
flag: "🇦🇺",
103
122
},
104
123
} as const;
105
124
106
125
export const flyRegionsDict = {
107
126
ams: {
108
127
code: "ams",
109
-
name: "ap-southeast-2",
128
+
name: "",
110
129
location: "Amsterdam, Netherlands",
130
+
flag: "🇳🇱",
111
131
},
112
132
iad: {
113
133
code: "iad",
114
134
name: "us-east-1",
115
135
location: "Ashburn, Virginia, USA",
136
+
flag: "🇺🇸",
116
137
},
117
138
jnb: {
118
139
code: "jnb",
119
140
name: "",
120
141
location: "Johannesburg, South Africa",
142
+
flag: "🇿🇦",
121
143
},
122
144
hkg: {
123
145
code: "hkg",
124
146
name: "",
125
147
location: "Hong Kong, Hong Kong",
148
+
flag: "🇭🇰",
126
149
},
127
150
gru: {
128
151
code: "gru",
129
152
name: "",
130
153
location: "Sao Paulo, Brazil",
154
+
flag: "🇧🇷",
131
155
},
132
-
133
156
syd: {
134
157
code: "syd",
135
-
name: "ap-southeast-2",
158
+
name: "",
136
159
location: "Sydney, Australia",
160
+
flag: "🇦🇺",
137
161
},
138
162
} as const;
139
163