From 8b6b11320ddd2b482a89ff9659b2bcbe8219b220 Mon Sep 17 00:00:00 2001
From: Thibault Le Ouay <thibaultleouay@gmail.Com>
Date: Sat, 18 Nov 2023 18:32:41 +0100
Subject: [PATCH] =?UTF-8?q?=F0=9F=94=A5=20External=20Status=20(#478)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* 🔥 External Status

* 🔥 External Status
---
 apps/web/src/app/status/page.tsx              | 74 +++++++++++++++++++
 .../components/layout/marketing-footer.tsx    |  1 +
 apps/web/src/env.ts                           |  2 +
 apps/web/src/middleware.ts                    |  2 +
 4 files changed, 79 insertions(+)
 create mode 100644 apps/web/src/app/status/page.tsx

diff --git a/apps/web/src/app/status/page.tsx b/apps/web/src/app/status/page.tsx
new file mode 100644
index 00000000..bdfcfcee
--- /dev/null
+++ b/apps/web/src/app/status/page.tsx
@@ -0,0 +1,74 @@
+import Link from "next/link";
+import { z } from "zod";
+
+import {
+  Card,
+  CardDescription,
+  CardFooter,
+  CardHeader,
+  CardTitle,
+} from "@openstatus/ui";
+
+import { Icons } from "@/components/icons";
+import { MarketingLayout } from "@/components/layout/marketing-layout";
+import { env } from "@/env";
+
+const ExternalStatus = z.object({
+  id: z.number(),
+  name: z.string(),
+  url: z.string(),
+  external_id: z.string(),
+  last_updated_at: z.string().datetime({ offset: true }),
+  time_zone: z.string(),
+  status_indicator: z.string(),
+  status_description: z.string(),
+  created_at: z.string(),
+  updated_at: z.string().datetime(),
+});
+
+const ExternalStatusPage = async () => {
+  console.log(env.EXTERNAL_API_URL);
+  const res = await fetch(env.EXTERNAL_API_URL);
+  const data = await res.json();
+  const openSourceFriends = z.array(ExternalStatus).parse(data);
+
+  return (
+    <MarketingLayout>
+      <h1 className="text-foreground font-cal mb-4 text-4xl">
+        Is my external service down?
+      </h1>
+      <div className="text-muted-foreground mb-6">
+        Easily check if your external providers is working properly
+      </div>
+      <div className="grid w-full grid-cols-1 gap-6 md:grid-cols-2">
+        {openSourceFriends.map((status) => (
+          <Card key={status.name} className="group flex flex-col">
+            <CardHeader className="flex-1">
+              <div className="flex items-center gap-2">
+                <CardTitle>
+                  <Link
+                    href={status.url}
+                    target="_blank"
+                    className="group-hover:underline"
+                  >
+                    {status.name}
+                  </Link>
+                </CardTitle>
+              </div>
+              <CardDescription>{status.status_description}</CardDescription>
+            </CardHeader>
+            <CardFooter>
+              <div className="flex items-center gap-2.5">
+                <Link href={status.url} target="_blank">
+                  <Icons.globe className="text-muted-foreground h-5 w-5 hover:text-black" />
+                </Link>
+              </div>
+            </CardFooter>
+          </Card>
+        ))}
+      </div>
+    </MarketingLayout>
+  );
+};
+
+export default ExternalStatusPage;
diff --git a/apps/web/src/components/layout/marketing-footer.tsx b/apps/web/src/components/layout/marketing-footer.tsx
index fb622b2b..9da8f0db 100644
--- a/apps/web/src/components/layout/marketing-footer.tsx
+++ b/apps/web/src/components/layout/marketing-footer.tsx
@@ -29,6 +29,7 @@ export function MarketingFooter({ className }: Props) {
             <FooterLink href="/changelog" label="Changelog" />
             <FooterLink href="https://docs.openstatus.dev" label="Docs" />
             <FooterLink href="/oss-friends" label="OSS Friends" />
+            <FooterLink href="/status" label="External Providers Monitoring" />
           </div>
           <div className="order-3 flex flex-col gap-3 text-sm md:order-4">
             <p className="text-foreground font-semibold">Legal</p>
diff --git a/apps/web/src/env.ts b/apps/web/src/env.ts
index 28d639db..390931f7 100644
--- a/apps/web/src/env.ts
+++ b/apps/web/src/env.ts
@@ -22,6 +22,7 @@ export const env = createEnv({
     GCP_CLIENT_EMAIL: z.string(),
     GCP_PRIVATE_KEY: z.string(),
     CRON_SECRET: z.string(),
+    EXTERNAL_API_URL: z.string().url(),
   },
   client: {
     NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY: z.string().min(1),
@@ -61,5 +62,6 @@ export const env = createEnv({
     GCP_CLIENT_EMAIL: process.env.GCP_CLIENT_EMAIL,
     GCP_PRIVATE_KEY: process.env.GCP_PRIVATE_KEY,
     CRON_SECRET: process.env.CRON_SECRET,
+    EXTERNAL_API_URL: process.env.EXTERNAL_API_URL,
   },
 });
diff --git a/apps/web/src/middleware.ts b/apps/web/src/middleware.ts
index 4eaa5941..b169067c 100644
--- a/apps/web/src/middleware.ts
+++ b/apps/web/src/middleware.ts
@@ -72,6 +72,8 @@ export default authMiddleware({
     "/api/checker/cron/10m",
     "/blog",
     "/blog/(.*)",
+    "/status",
+    "/status/(.*)",
     "/changelog",
     "/changelog/(.*)",
     "/legal/(.*)",
-- 
2.51.2