openstatus.dev
Openstatus
www.openstatus.dev
chore: colorize card (#481)
authored by
Maximilian Kaske
and committed by
GitHub
b0ae2bdb
8b6b1132
+59
-18
+6
-18
apps/web/src/app/status/page.tsx
+6
-18
apps/web/src/app/status/page.tsx
···
1
1
import Link from "next/link";
2
-
import { z } from "zod";
3
2
4
3
import {
5
4
Card,
···
12
11
import { Icons } from "@/components/icons";
13
12
import { MarketingLayout } from "@/components/layout/marketing-layout";
14
13
import { env } from "@/env";
15
-
16
-
const ExternalStatus = z.object({
17
-
id: z.number(),
18
-
name: z.string(),
19
-
url: z.string(),
20
-
external_id: z.string(),
21
-
last_updated_at: z.string().datetime({ offset: true }),
22
-
time_zone: z.string(),
23
-
status_indicator: z.string(),
24
-
status_description: z.string(),
25
-
created_at: z.string(),
26
-
updated_at: z.string().datetime(),
27
-
});
14
+
import { externalStatusArray, getClassname } from "./utils";
28
15
29
16
const ExternalStatusPage = async () => {
30
-
console.log(env.EXTERNAL_API_URL);
31
17
const res = await fetch(env.EXTERNAL_API_URL);
32
18
const data = await res.json();
33
-
const openSourceFriends = z.array(ExternalStatus).parse(data);
19
+
const externalStatus = externalStatusArray.parse(data);
34
20
35
21
return (
36
22
<MarketingLayout>
···
41
27
Easily check if your external providers is working properly
42
28
</div>
43
29
<div className="grid w-full grid-cols-1 gap-6 md:grid-cols-2">
44
-
{openSourceFriends.map((status) => (
30
+
{externalStatus.map((status) => (
45
31
<Card key={status.name} className="group flex flex-col">
46
32
<CardHeader className="flex-1">
47
33
<div className="flex items-center gap-2">
···
55
41
</Link>
56
42
</CardTitle>
57
43
</div>
58
-
<CardDescription>{status.status_description}</CardDescription>
44
+
<CardDescription className={getClassname(status)}>
45
+
{status.status_description}
46
+
</CardDescription>
59
47
</CardHeader>
60
48
<CardFooter>
61
49
<div className="flex items-center gap-2.5">
+53
apps/web/src/app/status/utils.ts
+53
apps/web/src/app/status/utils.ts
···
1
+
import { z } from "zod";
2
+
3
+
export const atlassianDescriptionEnum = z.enum([
4
+
"All Systems Operational", // green
5
+
"Major System Outage", // red
6
+
"Partial System Outage", // orange
7
+
"Minor Service Outage", // yellow
8
+
"Degraded System Service", // yellow
9
+
"Partially Degraded Service", // yellow
10
+
"Service Under Maintenance", // blue
11
+
]);
12
+
13
+
export const externalStatus = z.object({
14
+
id: z.number(),
15
+
name: z.string(),
16
+
url: z.string(),
17
+
external_id: z.string(),
18
+
last_updated_at: z.string().datetime({ offset: true }),
19
+
time_zone: z.string(),
20
+
status_indicator: z.string(),
21
+
status_description: atlassianDescriptionEnum,
22
+
created_at: z.string(),
23
+
updated_at: z.string().datetime(),
24
+
});
25
+
26
+
export const externalStatusArray = z.array(externalStatus);
27
+
28
+
export type ExternalStatus = z.infer<typeof externalStatus>;
29
+
export type ExternalStatusArray = z.infer<typeof externalStatusArray>;
30
+
export type AtlassianDescriptionEnum = z.infer<typeof atlassianDescriptionEnum>;
31
+
32
+
// ------------------------------
33
+
34
+
export function getClassname(status: ExternalStatus) {
35
+
switch (status.status_description) {
36
+
case "All Systems Operational":
37
+
return "text-green-500";
38
+
case "Major System Outage":
39
+
return "text-red-500";
40
+
case "Partial System Outage":
41
+
return "text-orange-500";
42
+
case "Minor Service Outage":
43
+
return "text-yellow-500";
44
+
case "Degraded System Service":
45
+
return "text-yellow-500";
46
+
case "Partially Degraded Service":
47
+
return "text-yellow-500";
48
+
case "Service Under Maintenance":
49
+
return "text-blue-500";
50
+
default:
51
+
return "text-gray-500";
52
+
}
53
+
}