From 32aa34092ca3c47945101972eccfdab231ce7821 Mon Sep 17 00:00:00 2001
From: Maximilian Kaske <56969857+mxkaske@users.noreply.github.com>
Date: Wed, 25 Oct 2023 21:38:08 +0200
Subject: [PATCH] status check (#393)

* wip

* chore: filter include monitoring

* fix: include
---
 .../web/src/app/status-page/[domain]/page.tsx |  4 +
 apps/web/src/components/icons.tsx             |  4 +
 .../components/status-page/status-check.tsx   | 93 +++++++++++++++++++
 apps/web/src/lib/tracker.ts                   | 44 +++++++--
 4 files changed, 138 insertions(+), 7 deletions(-)
 create mode 100644 apps/web/src/components/status-page/status-check.tsx

diff --git a/apps/web/src/app/status-page/[domain]/page.tsx b/apps/web/src/app/status-page/[domain]/page.tsx
index 3569ea1a3..c2542fd81 100644
--- a/apps/web/src/app/status-page/[domain]/page.tsx
+++ b/apps/web/src/app/status-page/[domain]/page.tsx
@@ -13,6 +13,9 @@ import { EmptyState } from "@/components/dashboard/empty-state";
 import { Header } from "@/components/dashboard/header";
 import { IncidentList } from "@/components/status-page/incident-list";
 import { MonitorList } from "@/components/status-page/monitor-list";
+import { StatusCheck } from "@/components/status-page/status-check";
+import { getMonitorListData } from "@/lib/tb";
+import { notEmpty } from "@/lib/utils";
 import { api } from "@/trpc/server";
 
 const url =
@@ -58,6 +61,7 @@ export default async function Page({ params }: Props) {
         />
       ) : (
         <>
+          <StatusCheck incidents={page.incidents} monitors={page.monitors} />
           <MonitorList monitors={page.monitors} />
           <IncidentList
             incidents={page.incidents}
diff --git a/apps/web/src/components/icons.tsx b/apps/web/src/components/icons.tsx
index 64b372120..e66126db3 100644
--- a/apps/web/src/components/icons.tsx
+++ b/apps/web/src/components/icons.tsx
@@ -1,5 +1,6 @@
 import {
   Activity,
+  AlertTriangle,
   Bell,
   Bot,
   Calendar,
@@ -12,6 +13,7 @@ import {
   LayoutDashboard,
   Link,
   MessageCircle,
+  Minus,
   PanelTop,
   Pencil,
   Play,
@@ -60,6 +62,8 @@ export const Icons = {
   image: Image,
   bell: Bell,
   zap: Zap,
+  "alert-triangle": AlertTriangle,
+  minus: Minus,
   discord: ({ ...props }: LucideProps) => (
     <svg viewBox="0 0 640 512" {...props}>
       <path
diff --git a/apps/web/src/components/status-page/status-check.tsx b/apps/web/src/components/status-page/status-check.tsx
new file mode 100644
index 000000000..ee9ab8af6
--- /dev/null
+++ b/apps/web/src/components/status-page/status-check.tsx
@@ -0,0 +1,93 @@
+import type { z } from "zod";
+
+import type {
+  selectIncidentsPageSchema,
+  selectPublicMonitorSchema,
+} from "@openstatus/db/src/schema";
+
+import { getResponseListData } from "@/lib/tb";
+import type { StatusVariant } from "@/lib/tracker";
+import { getStatus } from "@/lib/tracker";
+import { cn, notEmpty } from "@/lib/utils";
+import { Icons } from "../icons";
+
+export async function StatusCheck({
+  incidents,
+  monitors,
+}: {
+  incidents: z.infer<typeof selectIncidentsPageSchema>;
+  monitors: z.infer<typeof selectPublicMonitorSchema>[];
+}) {
+  const isIncident = incidents.some(
+    (incident) => !["monitoring", "resolved"].includes(incident.status),
+  );
+
+  const monitorsData = (
+    await Promise.all(
+      monitors.map((monitor) => {
+        return getResponseListData({
+          monitorId: String(monitor.id),
+          limit: 10,
+        });
+      }),
+    )
+  ).filter(notEmpty);
+
+  function calcStatus() {
+    const { count, ok } = monitorsData.flat(1).reduce(
+      (prev, curr) => {
+        const isOk = curr.statusCode <= 299 && curr.statusCode >= 200;
+        return { count: prev.count + 1, ok: prev.ok + (isOk ? 1 : 0) };
+      },
+      { count: 0, ok: 0 },
+    );
+    const status = getStatus(ok / count);
+    return status;
+  }
+
+  const status = calcStatus();
+  const incident = {
+    label: "Incident",
+    variant: "incident",
+    twColor: "text-yellow-500",
+    twBgColor: "bg-yellow-500",
+  } as const;
+
+  const { label, variant, twBgColor } = isIncident ? incident : status;
+
+  return (
+    <div className="flex flex-col items-center gap-2">
+      <div className="flex items-center gap-3">
+        <p className="text-lg font-semibold">{label}</p>
+        <span
+          className={cn("border-border rounded-full border p-2", twBgColor)}
+        >
+          <StatusIcon variant={variant} />
+        </span>
+      </div>
+      <p className="text-muted-foreground text-xs">Status Check</p>
+    </div>
+  );
+}
+
+interface StatusIconProps {
+  variant: StatusVariant | "incident";
+  className?: string;
+}
+
+function StatusIcon({ variant, className }: StatusIconProps) {
+  const rootClassName = cn("h-5 w-5 text-background", className);
+  const MinusIcon = Icons["minus"];
+  const CheckIcon = Icons["check"];
+  const AlertTriangleIcon = Icons["alert-triangle"];
+  if (variant === "incident") {
+    return <AlertTriangleIcon className={rootClassName} />;
+  }
+  if (variant === "degraded") {
+    return <MinusIcon className={rootClassName} />;
+  }
+  if (variant === "down") {
+    return <MinusIcon className={rootClassName} />;
+  }
+  return <CheckIcon className={rootClassName} />;
+}
diff --git a/apps/web/src/lib/tracker.ts b/apps/web/src/lib/tracker.ts
index 680e80912..81e92e1de 100644
--- a/apps/web/src/lib/tracker.ts
+++ b/apps/web/src/lib/tracker.ts
@@ -1,17 +1,47 @@
 import type { Monitor } from "@openstatus/tinybird";
 
+export type StatusVariant = "up" | "degraded" | "down" | "empty";
+
+type GetStatusReturnType = {
+  label: string;
+  variant: StatusVariant;
+  twColor: string;
+  twBgColor: string;
+};
+
 /**
  * Get the status of a monitor based on its ratio
  * @param ratio
  * @returns
  */
-export const getStatus = (
-  ratio: number,
-): { label: string; variant: "up" | "degraded" | "down" | "empty" } => {
-  if (isNaN(ratio)) return { label: "Missing", variant: "empty" };
-  if (ratio >= 0.98) return { label: "Operational", variant: "up" };
-  if (ratio >= 0.5) return { label: "Degraded", variant: "degraded" };
-  return { label: "Downtime", variant: "down" };
+export const getStatus = (ratio: number): GetStatusReturnType => {
+  if (isNaN(ratio))
+    return {
+      label: "Missing",
+      variant: "empty",
+      twColor: "text-gray-500",
+      twBgColor: "bg-gray-500",
+    };
+  if (ratio >= 0.98)
+    return {
+      label: "Operational",
+      variant: "up",
+      twColor: "text-green-500",
+      twBgColor: "bg-green-500",
+    };
+  if (ratio >= 0.5)
+    return {
+      label: "Degraded",
+      variant: "degraded",
+      twColor: "text-yellow-500",
+      twBgColor: "bg-yellow-500",
+    };
+  return {
+    label: "Downtime",
+    variant: "down",
+    twColor: "text-red-500",
+    twBgColor: "bg-red-500",
+  };
 };
 
 /**
-- 
2.51.2