@upsnap/strapi 1.0.7 → 1.0.8

package/dist/admin/{App-DQN0F1ZK.mjs → App-DJivreSE.mjs}

@@ -1,7 +1,7 @@
 import { jsxs, jsx, Fragment } from "react/jsx-runtime";
 import { Layouts, Page } from "@strapi/strapi/admin";
 import { NavLink, useNavigate, useParams, Routes, Route } from "react-router-dom";
-import { SubNav, SubNavHeader, SubNavSection, SubNavLink, Box, Table, Thead, Tr, Th, Checkbox, Typography, VisuallyHidden, Tbody, Td, Flex, Badge, IconButton, Card, CardHeader, Switch, CardBody, CardContent, SingleSelect, SingleSelectOption, Accordion, TextInput, Loader, Tooltip, Field, Button, Dialog, Link as Link$1, Modal, SimpleMenu, MenuItem, Tabs, CardTitle, CardSubtitle, CardBadge, Main, Divider, Grid, MultiSelect, MultiSelectOption } from "@strapi/design-system";
+import { SubNav, SubNavHeader, SubNavSection, SubNavLink, Box, Table, Thead, Tr, Th, Checkbox, Typography, VisuallyHidden, Tbody, Td, Flex, Badge, IconButton, Card, CardHeader, Switch, CardBody, CardContent, SingleSelect, SingleSelectOption, Accordion, TextInput, Loader, Tooltip, Field, Button, Dialog, Alert, Modal, SimpleMenu, MenuItem, Tabs, Divider, Link as Link$1, CardTitle, CardSubtitle, CardBadge, Main, Grid, MultiSelect, MultiSelectOption } from "@strapi/design-system";
 import { House, Earth, Lock, Link, Palette, Globe, ExternalLink, Monitor, Cog, Pencil, Trash, Search, Cross, ChevronDown, Plus, EyeStriked, Eye, Graph, MinusCircle, Play, More, CrossCircle, SealCheck, ArrowsCounterClockwise, ArrowRight, CheckCircle, Information, ArrowDown, Rocket, ArrowLeft } from "@strapi/icons";
 import React, { useState, useRef, useEffect, useMemo, useCallback } from "react";
 import { toast, ToastContainer } from "react-toastify";
@@ -124,7 +124,6 @@ const PLAN_LIMITS = {
     max_status_pages: 1
   }
 };
-const DASHBOARD_URL = "https://upsnap.ai";
 const STATS_PAGE_URL = "https://stats.upsnap.ai";
 const DEFAULT_REGION = {
   id: "default",
@@ -341,6 +340,22 @@ async function getPrimaryMonitorId() {
     return null;
   }
 }
+async function handleLogout() {
+  try {
+    await setPrimaryMonitorId("");
+    const res = await request("/settings", {
+      method: "POST",
+      data: { token: null, logOut: true }
+    });
+    if (res.ok) {
+      return true;
+    }
+    return false;
+  } catch (err) {
+    console.log("Error while logging out ", err);
+    return;
+  }
+}
 const STORAGE_KEY = "selectedMonitor";
 function getUserData() {
   if (typeof window === "undefined") return null;
@@ -419,6 +434,7 @@ function MonitorsTable({
   const [defaultEmail, setDefaultEmail] = useState();
   const isInternalUpdate = useRef(false);
   const [primaryMonitorId, setPrimaryMonitorIdState] = useState(null);
+  const navigate = useNavigate();
   useEffect(() => {
     async function fetchPrimaryMonitorId() {
       try {
@@ -466,6 +482,8 @@ function MonitorsTable({
       if (result) {
         toast.success("Primary monitor set successfully");
         setPrimaryMonitorIdState(monitor.id);
+        navigate("/plugins/upsnap/dashboard");
+        return;
       } else {
         toast.error("Failed to set primary monitor");
       }
@@ -4831,6 +4849,19 @@ const statusPageSchema = object({
   name: string().min(1, "Name is required").max(100, "Name must be less than 100 characters"),
   monitor_ids: array(string()).min(1, "At least one monitor is required")
 });
+const loginSchema = object({
+  email: string().email("Invalid email address"),
+  password: string().min(1, "Password is required")
+});
+const registerSchema = object({
+  fullName: string().min(2, "Full name must be at least 2 characters"),
+  email: string().email("Invalid email address"),
+  password: string().min(8, "Password must be at least 8 characters").regex(/[A-Z]/, "Password must contain at least one uppercase letter").regex(/[a-z]/, "Password must contain at least one lowercase letter").regex(/\d/, "Password must contain at least one number"),
+  confirmPassword: string().min(1, "Confirm password is required")
+}).refine((data) => data.password === data.confirmPassword, {
+  message: "Passwords do not match",
+  path: ["confirmPassword"]
+});
 const serviceConfigSchema = object({
   enabled: boolean(),
   monitor_interval: number().optional(),
@@ -6409,6 +6440,13 @@ function Monitors({ onTabChange }) {
   const [bulkDeleteIds, setBulkDeleteIds] = useState([]);
   const [bulkDeleteModalOpen, setBulkDeleteModalOpen] = useState(false);
   const userDetails = getUserData();
+  const [alertMessage, setAlertMessage] = useState("");
+  useEffect(() => {
+    (async () => {
+      const fetchedMonitorId = await getPrimaryMonitorId();
+      if (!fetchedMonitorId) setAlertMessage("Please select a primary monitor to continue!");
+    })();
+  }, []);
   const load = async () => {
     try {
       setLoading(true);
@@ -6518,6 +6556,7 @@ function Monitors({ onTabChange }) {
     }
   };
   return /* @__PURE__ */ jsxs(Box, { width: "100%", children: [
+    alertMessage && /* @__PURE__ */ jsx(Box, { width: "100%", padding: 3, children: /* @__PURE__ */ jsx(Alert, { closeLabel: "Close", title: "", children: alertMessage.charAt(0).toUpperCase() + alertMessage.slice(1) }) }),
     !showEdit && /* @__PURE__ */ jsxs(Flex, { direction: "column", alignItems: "flex-start", gap: 4, children: [
       /* @__PURE__ */ jsxs(
         Flex,
@@ -6593,56 +6632,6 @@ function Monitors({ onTabChange }) {
     )
   ] });
 }
-function APIToken() {
-  const [token, setToken] = useState("");
-  const [loading, setLoading] = useState(false);
-  const navigate = useNavigate();
-  useEffect(() => {
-    request("/settings", {
-      method: "GET"
-    }).then((res) => {
-      setToken(res.token || "");
-    });
-  }, []);
-  const save = async () => {
-    setLoading(true);
-    await request("/settings", {
-      method: "POST",
-      data: { token }
-    }).then((res) => {
-      if (!res.ok) {
-        toast.error(res.error || "Failed to save token");
-        setLoading(false);
-        return;
-      }
-      toast.success("Token saved successfully");
-      navigate("/plugins/upsnap/dashboard");
-    });
-    setLoading(false);
-  };
-  return /* @__PURE__ */ jsxs(Box, { padding: 3, children: [
-    /* @__PURE__ */ jsxs(Flex, { direction: "column", gap: 2, alignItems: "start", children: [
-      /* @__PURE__ */ jsx(Typography, { variant: "alpha", children: "Token Settings" }),
-      /* @__PURE__ */ jsxs(Typography, { variant: "omega", children: [
-        "Enter the Upsnap API Key and save to enable Healthcheck settings. To access the API key, please visit the",
-        " ",
-        /* @__PURE__ */ jsx(Link$1, { href: DASHBOARD_URL, isExternal: true, children: "Upsnap Dashboard" })
-      ] })
-    ] }),
-    /* @__PURE__ */ jsxs(Box, { marginTop: 6, width: "100%", children: [
-      /* @__PURE__ */ jsx(
-        TextInput,
-        {
-          placeholder: "API Token",
-          type: "password",
-          value: token,
-          onChange: (e) => setToken(e.target.value)
-        }
-      ),
-      /* @__PURE__ */ jsx(Box, { marginTop: 4, children: /* @__PURE__ */ jsx(Button, { loading, onClick: save, children: "Save" }) })
-    ] })
-  ] });
-}
 const getNestedValue = (obj, path) => {
   return path.split(".").reduce((current, key) => current?.[key], obj);
 };
@@ -7503,7 +7492,7 @@ function SettingsTabs({
   activeTab,
   onTabChange
 }) {
-  return /* @__PURE__ */ jsx(Fragment, { children: /* @__PURE__ */ jsxs(Tabs.Root, { defaultValue: activeTab, value: activeTab, onValueChange: onTabChange, children: [
+  return /* @__PURE__ */ jsx(Box, { padding: 8, children: /* @__PURE__ */ jsx(Card, { children: /* @__PURE__ */ jsx(CardBody, { children: /* @__PURE__ */ jsx(CardContent, { width: "100%", children: /* @__PURE__ */ jsxs(Tabs.Root, { defaultValue: activeTab, value: activeTab, onValueChange: onTabChange, children: [
     /* @__PURE__ */ jsx(Tabs.List, { "aria-label": "Manage your attribute", children: /* @__PURE__ */ jsx(
       Flex,
       {
@@ -7516,28 +7505,389 @@ function SettingsTabs({
     ) }),
     /* @__PURE__ */ jsxs(Tabs.Content, { value: activeTab, children: [
       activeTab === "monitors" && /* @__PURE__ */ jsx(Box, { padding: 4, children: /* @__PURE__ */ jsx(Monitors, { onTabChange }) }),
-      activeTab === "notification_channels" && /* @__PURE__ */ jsx(Box, { padding: 2, children: /* @__PURE__ */ jsx(IntegrationsPage, {}) }),
-      activeTab === "api_key" && /* @__PURE__ */ jsx(Box, { padding: 1, children: /* @__PURE__ */ jsx(APIToken, {}) })
+      activeTab === "notification_channels" && /* @__PURE__ */ jsx(Box, { padding: 2, children: /* @__PURE__ */ jsx(IntegrationsPage, {}) })
     ] })
-  ] }) });
+  ] }) }) }) }) });
+}
+function LogInForm({
+  setShowLoginForm,
+  setShowRegisterForm,
+  setShowExpiredMessage
+}) {
+  const [email2, setEmail] = useState("");
+  const [password, setPassword] = useState("");
+  const [errors, setErrors] = useState(null);
+  const [loading, setLoading] = useState(false);
+  const [forgotPasswordError, setForgotPasswordError] = useState("");
+  const navigate = useNavigate();
+  const handleSubmit = (e) => {
+    e.preventDefault();
+    setLoading(true);
+    const result = loginSchema.safeParse({ email: email2, password });
+    if (!result.success) {
+      setErrors(result.error);
+      setLoading(false);
+      return;
+    }
+    setErrors(null);
+    request("/login", {
+      method: "POST",
+      data: {
+        email: email2,
+        password
+      }
+    }).then((res) => {
+      if (res?.ok) {
+        toast.success("Login Successful");
+        navigate("/plugins/upsnap/dashboard");
+        return;
+      }
+      toast.error(res?.message || "Not able to login, please try again.");
+      setShowExpiredMessage(res?.message);
+    }).catch((err) => {
+      toast.error("Not able to login, please try again.");
+    }).finally(() => {
+      setLoading(false);
+    });
+  };
+  const handleForgotPassword = () => {
+    if (!email2) {
+      setForgotPasswordError("Please enter the email.");
+      return;
+    }
+    setForgotPasswordError("");
+    request("/forgot-password", {
+      method: "POST",
+      data: {
+        email: email2
+      }
+    }).then((res) => {
+      if (res?.ok) {
+        toast.success(res?.message);
+        return;
+      }
+      toast.error(res?.message || "Not able to login, please try again.");
+      setShowExpiredMessage(res?.message);
+    }).catch((err) => {
+      toast.error("Not able to send email, please try again.");
+    }).finally(() => {
+      setLoading(false);
+    });
+  };
+  return /* @__PURE__ */ jsx(Box, { margin: "auto", width: { initial: "100%", medium: "55%" }, children: /* @__PURE__ */ jsx(Card, { children: /* @__PURE__ */ jsx(CardBody, { children: /* @__PURE__ */ jsx(CardContent, { width: "100%", children: /* @__PURE__ */ jsxs(Box, { padding: 4, width: "100%", children: [
+    /* @__PURE__ */ jsxs(
+      Flex,
+      {
+        marginBottom: 3,
+        direction: "column",
+        gap: 1,
+        justifyContent: "start",
+        alignItems: "start",
+        children: [
+          /* @__PURE__ */ jsx(Typography, { variant: "beta", children: "Sign In" }),
+          /* @__PURE__ */ jsx(Typography, { variant: "epsilon", textColor: "neutral600", marginBottom: 3, children: "Enter your email and password to Sign In." })
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsx(Divider, { marginBottom: 3 }),
+    /* @__PURE__ */ jsx("form", { onSubmit: handleSubmit, children: /* @__PURE__ */ jsxs(Flex, { direction: "column", gap: 3, width: "100%", children: [
+      /* @__PURE__ */ jsxs(
+        Field.Root,
+        {
+          width: "100%",
+          error: errors?.issues.find((issue2) => issue2.path[0] === "email")?.message || forgotPasswordError,
+          required: true,
+          children: [
+            /* @__PURE__ */ jsx(Field.Label, { children: "Email" }),
+            /* @__PURE__ */ jsx(
+              Field.Input,
+              {
+                type: "email",
+                placeholder: "example@gmail.com",
+                value: email2,
+                onChange: (e) => setEmail(e.target.value)
+              }
+            ),
+            /* @__PURE__ */ jsx(Field.Error, {})
+          ]
+        }
+      ),
+      /* @__PURE__ */ jsxs(
+        Field.Root,
+        {
+          width: "100%",
+          error: errors?.issues.find((issue2) => issue2.path[0] === "password")?.message,
+          required: true,
+          children: [
+            /* @__PURE__ */ jsx(Field.Label, { children: "Password" }),
+            /* @__PURE__ */ jsx(
+              Field.Input,
+              {
+                type: "password",
+                placeholder: "Enter a password",
+                value: password,
+                onChange: (e) => setPassword(e.target.value)
+              }
+            ),
+            /* @__PURE__ */ jsx(Field.Error, {})
+          ]
+        }
+      ),
+      /* @__PURE__ */ jsx(Box, { width: "100%", children: /* @__PURE__ */ jsx(Flex, { justifyContent: "end", marginTop: 4, children: /* @__PURE__ */ jsx(
+        Link$1,
+        {
+          onClick: (e) => {
+            e?.preventDefault();
+            handleForgotPassword();
+          },
+          children: "forgot password?"
+        }
+      ) }) }),
+      /* @__PURE__ */ jsx(Flex, { width: "100%", justifyContent: "end", marginTop: 3, children: /* @__PURE__ */ jsx(Button, { size: "L", type: "submit", loading, children: "Sign In" }) })
+    ] }) }),
+    /* @__PURE__ */ jsx(Flex, { justifyContent: "center", marginTop: 4, children: /* @__PURE__ */ jsx(
+      Link$1,
+      {
+        onClick: (e) => {
+          e?.preventDefault();
+          setShowLoginForm(false);
+          setShowRegisterForm(true);
+        },
+        children: "Not registered? Create account"
+      }
+    ) })
+  ] }) }) }) }) });
+}
+function RegisterForm({
+  setShowRegisterForm,
+  setShowLoginForm,
+  setShowExpiredMessage
+}) {
+  const [fullName, setFullName] = useState("");
+  const [email2, setEmail] = useState("");
+  const [password, setPassword] = useState("");
+  const [confirmPassword, setConfirmPassword] = useState("");
+  const [confirmPasswordError, setConfirmPasswordError] = useState("");
+  const [errors, setErrors] = useState(null);
+  const [loading, setLoading] = useState(false);
+  const navigate = useNavigate();
+  const handleSubmit = (e) => {
+    e.preventDefault();
+    setLoading(true);
+    const result = registerSchema.safeParse({ email: email2, password, fullName, confirmPassword });
+    if (!result.success) {
+      setErrors(result.error);
+      setLoading(false);
+      return;
+    }
+    setErrors(null);
+    const domainUrl = window.strapi?.backendURL || window.location.origin;
+    request("/signup", {
+      method: "POST",
+      data: {
+        email: email2,
+        password,
+        fullName,
+        source: "strapi",
+        site_url: domainUrl
+      }
+    }).then((res) => {
+      if (res?.ok) {
+        toast.success(res?.message || "UpSnap Connected.");
+        toast.success("Your site is now being monitored every 5 minutes.");
+        navigate("/plugins/upsnap/dashboard");
+        return;
+      }
+      toast.error("Not able to register, please try again.");
+    }).catch((err) => {
+      toast.error("Not able to register, please try again.");
+    }).finally(() => {
+      setLoading(false);
+    });
+  };
+  return /* @__PURE__ */ jsx(Box, { margin: "auto", width: { initial: "100%", medium: "55%" }, children: /* @__PURE__ */ jsx(Card, { children: /* @__PURE__ */ jsx(CardBody, { children: /* @__PURE__ */ jsx(CardContent, { width: "100%", children: /* @__PURE__ */ jsxs(Box, { padding: 4, width: "100%", children: [
+    /* @__PURE__ */ jsxs(
+      Flex,
+      {
+        marginBottom: 3,
+        direction: "column",
+        gap: 1,
+        justifyContent: "start",
+        alignItems: "start",
+        children: [
+          /* @__PURE__ */ jsx(Typography, { variant: "beta", children: "Register" }),
+          /* @__PURE__ */ jsx(Typography, { variant: "epsilon", textColor: "neutral600", marginBottom: 3, children: "Create a free UpSnap beta account to start monitoring your site." })
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsx(Divider, { marginBottom: 3 }),
+    /* @__PURE__ */ jsx("form", { onSubmit: handleSubmit, children: /* @__PURE__ */ jsxs(Flex, { direction: "column", gap: 3, width: "100%", children: [
+      /* @__PURE__ */ jsxs(
+        Field.Root,
+        {
+          width: "100%",
+          error: errors?.issues.find((issue2) => issue2.path[0] === "fullName")?.message,
+          required: true,
+          children: [
+            /* @__PURE__ */ jsx(Field.Label, { children: "Full Name" }),
+            /* @__PURE__ */ jsx(
+              Field.Input,
+              {
+                type: "text",
+                placeholder: "Ted Lasso",
+                value: fullName,
+                onChange: (e) => setFullName(e.target.value)
+              }
+            ),
+            /* @__PURE__ */ jsx(Field.Error, {})
+          ]
+        }
+      ),
+      /* @__PURE__ */ jsxs(
+        Field.Root,
+        {
+          width: "100%",
+          error: errors?.issues.find((issue2) => issue2.path[0] === "email")?.message,
+          required: true,
+          children: [
+            /* @__PURE__ */ jsx(Field.Label, { children: "Email" }),
+            /* @__PURE__ */ jsx(
+              Field.Input,
+              {
+                type: "email",
+                placeholder: "example@gmail.com",
+                value: email2,
+                onChange: (e) => setEmail(e.target.value)
+              }
+            ),
+            /* @__PURE__ */ jsx(Field.Error, {})
+          ]
+        }
+      ),
+      /* @__PURE__ */ jsxs(
+        Field.Root,
+        {
+          width: "100%",
+          error: errors?.issues.find((issue2) => issue2.path[0] === "password")?.message,
+          required: true,
+          children: [
+            /* @__PURE__ */ jsx(Field.Label, { children: "Password" }),
+            /* @__PURE__ */ jsx(
+              Field.Input,
+              {
+                type: "password",
+                placeholder: "Enter a password",
+                value: password,
+                onChange: (e) => {
+                  const value = e.target.value;
+                  setPassword(value);
+                }
+              }
+            ),
+            /* @__PURE__ */ jsx(Field.Error, {})
+          ]
+        }
+      ),
+      /* @__PURE__ */ jsxs(
+        Field.Root,
+        {
+          width: "100%",
+          error: errors?.issues.find((issue2) => issue2.path[0] === "confirmPassword")?.message || confirmPasswordError,
+          required: true,
+          children: [
+            /* @__PURE__ */ jsx(Field.Label, { children: "Confirm Password" }),
+            /* @__PURE__ */ jsx(
+              Field.Input,
+              {
+                type: "password",
+                placeholder: "Confirm password",
+                value: confirmPassword,
+                onChange: (e) => {
+                  const value = e.target.value;
+                  setConfirmPassword(value);
+                  if (password && value && password !== value) {
+                    setConfirmPasswordError("Passwords do not match");
+                  } else {
+                    setConfirmPasswordError("");
+                  }
+                }
+              }
+            ),
+            /* @__PURE__ */ jsx(Field.Error, {})
+          ]
+        }
+      ),
+      /* @__PURE__ */ jsx(Flex, { width: "100%", justifyContent: "end", marginTop: 3, children: /* @__PURE__ */ jsx(Button, { size: "L", type: "submit", loading, children: "Start Free Beta Monitoring" }) })
+    ] }) }),
+    /* @__PURE__ */ jsx(Flex, { justifyContent: "center", marginTop: 4, children: /* @__PURE__ */ jsx(
+      Link$1,
+      {
+        onClick: (e) => {
+          e?.preventDefault();
+          setShowRegisterForm(false);
+          setShowLoginForm(true);
+        },
+        children: "Already have an account?"
+      }
+    ) })
+  ] }) }) }) }) });
 }
 function Settings() {
   const [activeTab, setActiveTab] = useState("monitors");
+  const [showLogin, setShowLogin] = useState(false);
+  const [showRegister, setShowRegister] = useState(false);
+  const [showExpiredMessage, setShowExpiredMessage] = useState("");
+  const [loading, setLoading] = useState(false);
+  useEffect(() => {
+    request("/settings", {
+      method: "GET"
+    }).then((res) => {
+      if (!res?.token) {
+        setShowRegister(true);
+        setShowLogin(false);
+      }
+    });
+  }, []);
   const handleTabChange = (tab) => {
+    if (tab === "api_key") {
+      setShowLogin(true);
+      setShowRegister(false);
+      return;
+    }
     setActiveTab(tab);
   };
-  return /* @__PURE__ */ jsx(Box, { padding: 8, children: /* @__PURE__ */ jsx(Card, { children: /* @__PURE__ */ jsx(CardBody, { children: /* @__PURE__ */ jsx(CardContent, { width: "100%", children: /* @__PURE__ */ jsx(
-    SettingsTabs,
-    {
-      tabs: [
-        { name: "Monitors", value: "monitors" },
-        { name: "Notification Channels", value: "notification_channels" },
-        { name: "API Key", value: "api_key" }
-      ],
-      activeTab,
-      onTabChange: handleTabChange
+  const logOut = async () => {
+    setLoading(true);
+    const result = await handleLogout();
+    if (result) {
+      toast.success("Logged out successfully.");
+      setLoading(false);
+      setShowLogin(true);
+      return;
     }
-  ) }) }) }) });
+    setLoading(false);
+    toast.error("Not able to log out, please try again.");
+    return;
+  };
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    showExpiredMessage && /* @__PURE__ */ jsx(Box, { margin: 2, children: /* @__PURE__ */ jsx(Alert, { closeLabel: "Close", title: "", variant: "danger", children: showExpiredMessage.charAt(0).toUpperCase() + showExpiredMessage.slice(1) }) }),
+    showLogin && /* @__PURE__ */ jsx(LogInForm, { setShowLoginForm: setShowLogin, setShowRegisterForm: setShowRegister, setShowExpiredMessage }),
+    showRegister && /* @__PURE__ */ jsx(RegisterForm, { setShowRegisterForm: setShowRegister, setShowLoginForm: setShowLogin, setShowExpiredMessage }),
+    !showLogin && !showRegister && /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsx(Box, { width: "100%", paddingRight: 8, children: /* @__PURE__ */ jsx(Flex, { justifyContent: "end", children: /* @__PURE__ */ jsx(Button, { onClick: logOut, loading, children: "Log out" }) }) }),
+      /* @__PURE__ */ jsx(
+        SettingsTabs,
+        {
+          tabs: [
+            { name: "Monitors", value: "monitors" },
+            { name: "Notification Channels", value: "notification_channels" }
+          ],
+          activeTab,
+          onTabChange: handleTabChange
+        }
+      )
+    ] })
+  ] });
 }
 const HistogramContainer = styled(Box)`
   display: flex;
@@ -8364,7 +8714,7 @@ function Dashboard() {
     for (let attempt = 0; attempt < retries; attempt++) {
       try {
         const res = await request(`/monitor/${monitorId}`, { method: "GET" });
-        if (res?.monitor?.message === "Invalid authentication token") {
+        if (res?.monitor?.message === "Invalid authentication token" || res?.monitor?.status === "error") {
           navigate("/plugins/upsnap/settings");
           return null;
         }
@@ -8850,6 +9200,7 @@ const RegionResponseTimeChart = ({
 function Reachability() {
   const [data, setData] = useState(null);
   const [loading, setLoading] = useState(true);
+  const [refreshing, setRefreshing] = useState(false);
   const [selectedMonitor, setSelectedMonitor] = useState(null);
   const [regionId, setRegionId] = useState(null);
   const [regionResponseTimeData, setRegionResponseTimeData] = useState({});
@@ -8885,27 +9236,37 @@ function Reachability() {
       }
     }
   };
-  useEffect(() => {
+  const fetchMonitorDetails = async () => {
     if (monitorId) {
       setLoading(true);
-      request(`/monitor/${monitorId}`, { method: "GET" }).then((res) => {
+      try {
+        const res = await request(`/monitor/${monitorId}`, { method: "GET" });
         if (res?.monitor?.message === "Invalid authentication token") {
           setSelectedMonitor(null);
           navigate("/plugins/upsnap/settings");
+        } else {
+          const monitorData = res.monitor?.data || null;
+          setSelectedMonitor(monitorData);
+          if (monitorData?.monitor?.regions) {
+            await fetchResponseTimeDataForRegions(
+              monitorData.monitor.regions,
+              responseTimeRange || "last_24_hours"
+            );
+          }
         }
-        setSelectedMonitor(res.monitor?.data || null);
-        if (res.monitor?.data?.monitor?.regions) {
-          fetchResponseTimeDataForRegions(
-            res.monitor.data.monitor.regions,
-            responseTimeRange || "last_24_hours"
-          );
-        }
+      } catch (error) {
+        console.error("Error fetching monitor details:", error);
+      } finally {
         setLoading(false);
-      });
+      }
     }
+  };
+  useEffect(() => {
+    fetchMonitorDetails();
   }, [monitorId]);
-  const getReachabilityData = async (url, region) => {
-    setLoading(true);
+  const getReachabilityData = async (url) => {
+    const stateSetter = loading ? setLoading : setRefreshing;
+    stateSetter(true);
     try {
       const res = await request("/monitor/health-check/uptime", {
         method: "POST",
@@ -8915,7 +9276,7 @@ function Reachability() {
     } catch (err) {
       setData(null);
     } finally {
-      setLoading(false);
+      stateSetter(false);
     }
   };
   const fetchResponseTimeForRegion = async (regionId2, start, end) => {
@@ -8933,7 +9294,7 @@ function Reachability() {
     if (selectedMonitor) {
       const primaryRegion = selectedMonitor?.monitor?.regions?.find((r) => r.is_primary);
       setRegionId(primaryRegion?.id || null);
-      getReachabilityData(selectedMonitor?.monitor?.config?.meta?.url, primaryRegion?.id || null);
+      getReachabilityData(selectedMonitor?.monitor?.config?.meta?.url);
     }
   }, [selectedMonitor]);
   useEffect(() => {
@@ -8965,6 +9326,11 @@ function Reachability() {
       fetchResponseTimeDataForRegions(selectedMonitor.monitor.regions, String(range) || "last_24_hours");
     }
   };
+  const handleRefresh = async () => {
+    if (selectedMonitor) {
+      await getReachabilityData(selectedMonitor.monitor.config.meta.url);
+    }
+  };
   const regionNames = useMemo(() => {
     const names = {};
     if (selectedMonitor?.monitor?.regions && Array.isArray(selectedMonitor?.monitor?.regions)) {
@@ -8981,11 +9347,15 @@ function Reachability() {
   const tls = meta?.tls;
   const regions = selectedMonitor?.monitor?.regions || [];
   return /* @__PURE__ */ jsx(Main, { children: /* @__PURE__ */ jsxs(Box, { padding: 4, children: [
-    /* @__PURE__ */ jsx(Box, { marginBottom: 3, children: /* @__PURE__ */ jsxs(Typography, { variant: "beta", children: [
-      "Reachability (",
-      /* @__PURE__ */ jsx(Link$1, { href: selectedMonitor?.monitor?.config?.meta?.url, isExternal: true, children: selectedMonitor.monitor?.name || "" }),
-      ")"
-    ] }) }),
+    /* @__PURE__ */ jsx(
+      PageHeader,
+      {
+        title: "Reachability",
+        monitorUrl: selectedMonitor.monitor?.config?.meta?.url,
+        onRefresh: handleRefresh,
+        refreshing
+      }
+    ),
     /* @__PURE__ */ jsx(
       StatusCard,
       {

package/dist/admin/index.js

@@ -38,7 +38,7 @@ const index = {
         defaultMessage: PLUGIN_ID.slice(0, 1).toUpperCase() + PLUGIN_ID.slice(1)
       },
       Component: async () => {
-        const { App } = await Promise.resolve().then(() => require("./App-Bo_F3q6I.js"));
+        const { App } = await Promise.resolve().then(() => require("./App-BWxGckE8.js"));
         return App;
       }
     });