🌐 More regions (#881)

* 🚧 wip * 🔥 more regions * 🧪 fix * 🧪 fix * 🧪 fix * 🧪 fix * 🔥 fix * 📝 changelog * 🖼️ update screenshot * 🧹 clean
openstatusHQ · Jun 19, 2024 · 59d180d · 59d180d
1 parent d61bb8f
commit 59d180d
Show file tree

Hide file tree

Showing 29 changed files with 776 additions and 313 deletions.
diff --git a/apps/checker/README.md b/apps/checker/README.md
@@ -28,3 +28,9 @@ docker run -p 8080:8080 checker
 ```bash
 fly deploy
 ```
+
+## Deploy to all region
+
+```bash
+fly scale count 35 --region   ams,arn,atl,bog,bom,bos,cdg,den,dfw,ewr,eze,fra,gdl,gig,gru,hkg,iad,jnb,lax,lhr,mad,mia,nrt,ord,otp,phx,qro,scl,sjc,sea,sin,syd,waw,yul,yyz
+```
diff --git a/apps/server/src/env.ts b/apps/server/src/env.ts
@@ -1,7 +1,7 @@
 import { createEnv } from "@t3-oss/env-core";
 import { z } from "zod";
 
-import { flyRegions } from "@openstatus/utils";
+import { flyRegions } from "@openstatus/db/src/schema";
 
 export const env = createEnv({
   server: {

diff --git a/apps/server/src/v1/monitors/post.ts b/apps/server/src/v1/monitors/post.ts
@@ -70,6 +70,12 @@ export function registerPostMonitor(api: typeof monitorsApi) {
       throw new HTTPException(403, { message: "Forbidden" });
     }
 
+    for (const region of input.regions) {
+      if (!workspacePlan.limits.regions.includes(region)) {
+        throw new HTTPException(403, { message: "Upgrade for more region" });
+      }
+    }
+
     const { headers, regions, assertions, ...rest } = input;
 
     const assert = assertions ? getAssertions(assertions) : [];

diff --git a/apps/server/src/v1/monitors/put.ts b/apps/server/src/v1/monitors/put.ts
@@ -50,6 +50,11 @@ export function registerPutMonitor(api: typeof monitorsApi) {
       throw new HTTPException(403, { message: "Forbidden" });
     }
 
+    for (const region of input.regions) {
+      if (!workspacePlan.limits.regions.includes(region)) {
+        throw new HTTPException(403, { message: "Upgrade for more region" });
+      }
+    }
     const _monitor = await db
       .select()
       .from(monitor)

diff --git a/apps/web/public/assets/changelog/more-regions.png b/apps/web/public/assets/changelog/more-regions.png
diff --git a/apps/web/src/app/api/checker/cron/_cron.ts b/apps/web/src/app/api/checker/cron/_cron.ts
@@ -45,7 +45,7 @@ export const cron = async ({
   const parent = client.queuePath(
     env.GCP_PROJECT_ID,
     env.GCP_LOCATION,
-    periodicity,
+    periodicity
   );
 
   const timestamp = Date.now();
@@ -54,7 +54,7 @@ export const cron = async ({
     .select({ id: maintenance.id })
     .from(maintenance)
     .where(
-      and(lte(maintenance.from, new Date()), gte(maintenance.to, new Date())),
+      and(lte(maintenance.from, new Date()), gte(maintenance.to, new Date()))
     )
     .as("currentMaintenance");
 
@@ -63,7 +63,7 @@ export const cron = async ({
     .from(maintenancesToMonitors)
     .innerJoin(
       currentMaintenance,
-      eq(maintenancesToMonitors.maintenanceId, currentMaintenance.id),
+      eq(maintenancesToMonitors.maintenanceId, currentMaintenance.id)
     );
 
   const result = await db
@@ -73,8 +73,8 @@ export const cron = async ({
       and(
         eq(monitor.periodicity, periodicity),
         eq(monitor.active, true),
-        notInArray(monitor.id, currentMaintenanceMonitors),
-      ),
+        notInArray(monitor.id, currentMaintenanceMonitors)
+      )
     )
     .all();
 
@@ -84,7 +84,7 @@ export const cron = async ({
   const allResult = [];
 
   for (const row of monitors) {
-    const selectedRegions = row.regions.length > 0 ? row.regions : ["auto"];
+    const selectedRegions = row.regions.length > 0 ? row.regions : ["ams"];
 
     const result = await db
       .select()
@@ -127,7 +127,7 @@ export const cron = async ({
   const failed = allRequests.filter((r) => r.status === "rejected").length;
 
   console.log(
-    `End cron for ${periodicity} with ${allResult.length} jobs with ${success} success and ${failed} failed`,
+    `End cron for ${periodicity} with ${allResult.length} jobs with ${success} success and ${failed} failed`
   );
 };
 // timestamp needs to be in ms

diff --git a/...app/app/[workspaceSlug]/(dashboard)/monitors/[id]/data/_components/data-table-wrapper.tsx b/...app/app/[workspaceSlug]/(dashboard)/monitors/[id]/data/_components/data-table-wrapper.tsx
@@ -19,6 +19,8 @@ import { DataTable } from "@/components/data-table/data-table";
 import { LoadingAnimation } from "@/components/loading-animation";
 import { ResponseDetailTabs } from "@/components/ping-response-analysis/response-detail-tabs";
 import { api } from "@/trpc/client";
+import type { z } from "zod";
+import type { monitorFlyRegionSchema } from "@openstatus/db/src/schema";
 
 // EXAMPLE: get the type of the response of the endpoint
 // biome-ignore lint/correctness/noUnusedVariables: <explanation>
@@ -29,7 +31,7 @@ export type Monitor = {
   monitorId: string;
   url: string;
   latency: number;
-  region: "ams" | "iad" | "hkg" | "jnb" | "syd" | "gru";
+  region: z.infer<typeof monitorFlyRegionSchema>;
   statusCode: number | null;
   timestamp: number;
   workspaceId: string;
@@ -80,7 +82,7 @@ function Details({ row }: { row: Row<Monitor> }) {
       url: row.original.url,
       region: row.original.region,
       cronTimestamp: row.original.cronTimestamp || undefined,
-    }),
+    })
   );
 
   if (!data || data.length === 0) return <p>Something went wrong</p>;

diff --git a/apps/web/src/app/app/[workspaceSlug]/(dashboard)/monitors/[id]/details/page.tsx b/apps/web/src/app/app/[workspaceSlug]/(dashboard)/monitors/[id]/details/page.tsx
@@ -2,12 +2,11 @@ import Link from "next/link";
 import * as z from "zod";
 
 import { Button } from "@openstatus/ui";
-import { flyRegions } from "@openstatus/utils";
 
 import { EmptyState } from "@/components/dashboard/empty-state";
 import { ResponseDetails } from "@/components/monitor-dashboard/response-details";
 import { api } from "@/trpc/server";
-
+import { monitorFlyRegionSchema } from "@openstatus/db/src/schema";
 //
 
 /**
@@ -16,7 +15,7 @@ import { api } from "@/trpc/server";
 const searchParamsSchema = z.object({
   monitorId: z.string(),
   url: z.string(),
-  region: z.enum(flyRegions).optional(),
+  region: monitorFlyRegionSchema.optional(),
   cronTimestamp: z.coerce.number(),
 });
 

diff --git a/apps/web/src/app/app/[workspaceSlug]/(dashboard)/monitors/[id]/overview/page.tsx b/apps/web/src/app/app/[workspaceSlug]/(dashboard)/monitors/[id]/overview/page.tsx
@@ -44,7 +44,7 @@ const searchParamsSchema = z.object({
         value
           ?.trim()
           ?.split(",")
-          .filter((i) => flyRegions.includes(i as Region)) ?? flyRegions,
+          .filter((i) => flyRegions.includes(i as Region)) ?? []
     ),
 });
 
@@ -117,7 +117,7 @@ export default async function Page({
         period={period}
         quantile={quantile}
         interval={interval}
-        regions={regions as Region[]} // FIXME: not properly reseted after filtered
+        regions={regions.length ? (regions as Region[]) : monitor.regions} // FIXME: not properly reseted after filtered
         monitor={monitor}
         isQuantileDisabled={isQuantileDisabled}
         metricsByRegion={metricsByRegion}

diff --git a/apps/web/src/components/data-table/columns.tsx b/apps/web/src/components/data-table/columns.tsx
@@ -11,7 +11,7 @@ import {
   TooltipProvider,
   TooltipTrigger,
 } from "@openstatus/ui";
-import { regionsDict } from "@openstatus/utils";
+import { flyRegionsDict } from "@openstatus/utils";
 
 import { DataTableColumnHeader } from "./data-table-column-header";
 import { DataTableStatusBadge } from "./data-table-status-badge";
@@ -98,7 +98,7 @@ export const columns: ColumnDef<Ping>[] = [
         <div>
           <span className="font-mono">{String(row.getValue("region"))} </span>
           <span className="text-muted-foreground text-xs">
-            {regionsDict[row.original.region]?.location}
+            {flyRegionsDict[row.original.region]?.location}
           </span>
         </div>
       );

diff --git a/apps/web/src/components/forms/monitor-form.tsx b/apps/web/src/components/forms/monitor-form.tsx
@@ -17,6 +17,7 @@ import {
   monitorMethods,
   monitorMethodsSchema,
   monitorPeriodicitySchema,
+  workspacePlans,
 } from "@openstatus/db/src/schema";
 import { getLimit } from "@openstatus/plans";
 import {
@@ -103,8 +104,7 @@ export function MonitorForm({
       periodicity: defaultValues?.periodicity || "30m",
       active: defaultValues?.active ?? true,
       id: defaultValues?.id || 0,
-      regions:
-        defaultValues?.regions || (flyRegions as Writeable<typeof flyRegions>),
+      regions: defaultValues?.regions || getLimit("free", "regions"),
       headers: defaultValues?.headers?.length
         ? defaultValues?.headers
         : [{ key: "", value: "" }],
@@ -441,7 +441,7 @@ export function MonitorForm({
                           <Select
                             onValueChange={(value) =>
                               field.onChange(
-                                monitorPeriodicitySchema.parse(value),
+                                monitorPeriodicitySchema.parse(value)
                               )
                             }
                             defaultValue={field.value}
@@ -494,7 +494,7 @@ export function MonitorForm({
                                     role="combobox"
                                     className={cn(
                                       "h-10 w-full justify-between",
-                                      !field.value && "text-muted-foreground",
+                                      !field.value && "text-muted-foreground"
                                     )}
                                   >
                                     {renderText()}
@@ -526,9 +526,9 @@ export function MonitorForm({
                                                 "regions",
                                                 currentRegions.includes(code)
                                                   ? currentRegions.filter(
-                                                      (r) => r !== code,
+                                                      (r) => r !== code
                                                     )
-                                                  : [...currentRegions, code],
+                                                  : [...currentRegions, code]
                                               );
                                             }}
                                           >
@@ -537,13 +537,13 @@ export function MonitorForm({
                                                 "mr-2 h-4 w-4",
                                                 isSelected
                                                   ? "opacity-100"
-                                                  : "opacity-0",
+                                                  : "opacity-0"
                                               )}
                                             />
                                             {location}
                                           </CommandItem>
                                         );
-                                      },
+                                      }
                                     )}
                                   </CommandGroup>
                                 </Command>
@@ -650,8 +650,8 @@ export function MonitorForm({
                                               ])
                                             : field.onChange(
                                                 field.value?.filter(
-                                                  (value) => value !== item.id,
-                                                ),
+                                                  (value) => value !== item.id
+                                                )
                                               );
                                         }}
                                       />

diff --git a/apps/web/src/components/forms/monitor/form.tsx b/apps/web/src/components/forms/monitor/form.tsx
@@ -4,6 +4,7 @@ import { zodResolver } from "@hookform/resolvers/zod";
 import { usePathname, useRouter } from "next/navigation";
 import * as React from "react";
 import { useForm } from "react-hook-form";
+import { getLimit } from "@openstatus/plans";
 
 import * as assertions from "@openstatus/assertions";
 import type {
@@ -14,7 +15,7 @@ import type {
   Page,
   WorkspacePlan,
 } from "@openstatus/db/src/schema";
-import { flyRegions, insertMonitorSchema } from "@openstatus/db/src/schema";
+import { insertMonitorSchema } from "@openstatus/db/src/schema";
 import { Badge, Form } from "@openstatus/ui";
 
 import {
@@ -72,8 +73,7 @@ export function MonitorForm({
       periodicity: defaultValues?.periodicity || "30m",
       active: defaultValues?.active ?? true,
       id: defaultValues?.id || 0,
-      regions:
-        defaultValues?.regions || (flyRegions as Writeable<typeof flyRegions>),
+      regions: defaultValues?.regions || getLimit("free", "regions"),
       headers: defaultValues?.headers?.length
         ? defaultValues?.headers
         : [{ key: "", value: "" }],
@@ -138,7 +138,7 @@ export function MonitorForm({
         finally: () => {
           setPending(false);
         },
-      },
+      }
     );
   };
 
@@ -187,7 +187,7 @@ export function MonitorForm({
         JSON.stringify([
           ...(statusAssertions || []),
           ...(headerAssertions || []),
-        ]),
+        ])
       );
 
       const data = (await res.json()) as RegionChecker;
@@ -223,7 +223,7 @@ export function MonitorForm({
       if (error instanceof Error && error.name === "AbortError") {
         return {
           error: `Abort error: request takes more then ${formatDuration(
-            ABORT_TIMEOUT,
+            ABORT_TIMEOUT
           )}.`,
         };
       }

diff --git a/apps/web/src/components/forms/monitor/request-test-button.tsx b/apps/web/src/components/forms/monitor/request-test-button.tsx
@@ -7,6 +7,7 @@ import type {
   InsertMonitor,
   MonitorFlyRegion,
 } from "@openstatus/db/src/schema";
+import { flyRegions } from "@openstatus/db/src/schema";
 import {
   Button,
   Dialog,
@@ -23,18 +24,19 @@ import {
   TooltipProvider,
   TooltipTrigger,
 } from "@openstatus/ui";
-import { flyRegions, flyRegionsDict } from "@openstatus/utils";
+import { flyRegionsDict } from "@openstatus/utils";
 
 import { LoadingAnimation } from "@/components/loading-animation";
 import { RegionInfo } from "@/components/ping-response-analysis/region-info";
 import { ResponseDetailTabs } from "@/components/ping-response-analysis/response-detail-tabs";
 import type { RegionChecker } from "@/components/ping-response-analysis/utils";
 import { toast, toastAction } from "@/lib/toast";
+import { getLimit } from "@openstatus/plans";
 
 interface Props {
   form: UseFormReturn<InsertMonitor>;
   pingEndpoint(
-    region?: MonitorFlyRegion,
+    region?: MonitorFlyRegion
   ): Promise<{ data?: RegionChecker; error?: string }>;
 }
 
@@ -75,6 +77,8 @@ export function RequestTestButton({ form, pingEndpoint }: Props) {
 
   const { statusAssertions, headerAssertions } = form.getValues();
 
+  const regions = getLimit("free", "regions");
+
   return (
     <Dialog open={!!check} onOpenChange={() => setCheck(undefined)}>
       <div className="group flex h-10 items-center rounded-md bg-transparent text-sm ring-offset-background focus-within:outline-none focus-within:ring-2 focus-within:ring-ring focus-within:ring-offset-2">
@@ -89,7 +93,7 @@ export function RequestTestButton({ form, pingEndpoint }: Props) {
             <SelectValue>{flag}</SelectValue>
           </SelectTrigger>
           <SelectContent>
-            {flyRegions.map((region) => {
+            {regions.map((region) => {
               const { flag } = flyRegionsDict[region];
               return (
                 <SelectItem key={region} value={region}>
@@ -138,7 +142,7 @@ export function RequestTestButton({ form, pingEndpoint }: Props) {
                 JSON.stringify([
                   ...(statusAssertions || []),
                   ...(headerAssertions || []),
-                ]),
+                ])
               )}
             />
           </div>