fix settings

opsway-io · Mar 24, 2024 · 51a5467 · 51a5467
1 parent e3213cc
commit 51a5467
Show file tree

Hide file tree

Showing 12 changed files with 299 additions and 98 deletions.
diff --git a/apps/dashboard/src/api/endpoints/monitors/monitors.ts b/apps/dashboard/src/api/endpoints/monitors/monitors.ts
@@ -84,12 +84,12 @@ export async function getMonitors(
   Get monitor
 */
 
-export interface GetMonitorResponse extends Monitor {}
+export interface GetMonitorResponse extends MonitorWithStats {}
 
 export async function getMonitor(
   teamId: number,
   monitorId: number,
-): Promise<any> {
+): Promise<GetMonitorResponse> {
   const response = await client.get(
     `/v1/teams/${teamId}/monitors/${monitorId}`,
   );
@@ -148,3 +148,17 @@ export async function deleteMonitor(
 ): Promise<void> {
   await client.delete(`/v1/teams/${teamId}/monitors/${monitorId}`);
 }
+
+/*
+  Set monitor state
+*/
+
+export async function updateMonitorState(
+  teamId: number,
+  monitorId: number,
+  state: "ACTIVE" | "INACTIVE",
+): Promise<void> {
+  await client.put(`/v1/teams/${teamId}/monitors/${monitorId}/state`, {
+    state,
+  });
+}
diff --git a/apps/dashboard/src/hooks/monitors.query.ts b/apps/dashboard/src/hooks/monitors.query.ts
@@ -62,6 +62,25 @@ export const useUpdateMonitor = (moniterId: number) => {
   );
 };
 
+export const useUpdateMonitorState = (monitorId: number) => {
+  const teamId = useAuthenticationStore((state) => state.currentTeamId);
+
+  return useMutation(
+    (state: "ACTIVE" | "INACTIVE") => {
+      if (!teamId) {
+        return Promise.resolve(null);
+      }
+
+      return MonitorsAPI.updateMonitorState(teamId, monitorId, state);
+    },
+    {
+      onSuccess: () => {
+        queryClient.invalidateQueries(["teams", teamId, "monitors"]);
+      },
+    },
+  );
+};
+
 export const useMonitor = (monitorId: number) => {
   const teamId = useAuthenticationStore((state) => state.currentTeamId);
 

diff --git a/apps/dashboard/src/pages/Dashboard/Monitors/Create/index.tsx b/apps/dashboard/src/pages/Dashboard/Monitors/Create/index.tsx
@@ -1,3 +1,4 @@
+import { DevTool } from "@hookform/devtools";
 import {
   Box,
   Button,
@@ -7,25 +8,23 @@ import {
   Tab,
   Tabs,
   TextField,
-  Typography,
 } from "@mui/material";
+import { useSnackbar } from "notistack";
 import { FunctionComponent, useMemo } from "react";
+import { Helmet } from "react-helmet";
 import { Controller, FormProvider, useForm } from "react-hook-form";
+import { IoAdd } from "react-icons/io5";
 import { Link, useNavigate, useSearchParams } from "react-router-dom";
+import { v4 as uuidv4 } from "uuid";
 import Container from "../../../../components/Container";
-import RequestSettings from "../components/RequestSettings";
-import ResponseAssertionSettings from "../components/ResponseAssertionSettings";
-import { FormData } from "../models/formData";
-import { useCreateMonitor } from "../../../../hooks/monitors.query";
 import useAuthenticationStore from "../../../../hooks/authentication.store";
-import { useSnackbar } from "notistack";
-import { IoAdd } from "react-icons/io5";
+import { useCreateMonitor } from "../../../../hooks/monitors.query";
 import FrequencyAndLocationSettings from "../components/FrequencyAndLocationSettings";
-import TLSVerificationSettings from "../components/TLSVerificationSettings";
-import { v4 as uuidv4 } from "uuid";
 import HowAssertionsWork from "../components/HowAssertionsWork";
-import { Helmet } from "react-helmet";
-import { DevTool } from "@hookform/devtools";
+import RequestSettings from "../components/RequestSettings";
+import ResponseAssertionSettings from "../components/ResponseAssertionSettings";
+import TLSVerificationSettings from "../components/TLSVerificationSettings";
+import { SettingsFormData } from "../models/settingsFormData";
 
 const MonitorCreateView: FunctionComponent = () => {
   const teamId = useAuthenticationStore((state) => state.currentTeamId);
@@ -38,7 +37,7 @@ const MonitorCreateView: FunctionComponent = () => {
   });
   const selectedTab = useMemo(() => params.get("tab"), [params]);
 
-  const formMethods = useForm<FormData>({
+  const formMethods = useForm<SettingsFormData>({
     defaultValues: {
       teamId: teamId,
       name: "",
@@ -80,7 +79,7 @@ const MonitorCreateView: FunctionComponent = () => {
 
     mutate(data, {
       onSuccess: () => {
-        enqueueSnackbar(`Monitor \`${data.name}\` created.`, {
+        enqueueSnackbar(`Monitor '${data.name}' created.`, {
           variant: "success",
         });
 

diff --git a/apps/dashboard/src/pages/Dashboard/Monitors/Detail/index.tsx b/apps/dashboard/src/pages/Dashboard/Monitors/Detail/index.tsx
@@ -1,7 +1,5 @@
-import { FunctionComponent, useMemo, useState } from "react";
-import Container from "../../../../components/Container";
+import { LoadingButton } from "@mui/lab";
 import {
-  alpha,
   Button,
   Card,
   CardContent,
@@ -12,27 +10,32 @@ import {
   ToggleButton,
   ToggleButtonGroup,
   Typography,
+  alpha,
   useTheme,
 } from "@mui/material";
+import { enqueueSnackbar } from "notistack";
+import { FunctionComponent, useMemo, useState } from "react";
+import { Helmet } from "react-helmet";
 import { IoPause, IoPlay, IoSettings } from "react-icons/io5";
-import ResponseTimeGraph from "./components/ResponseTimesGraph";
-import { Link, NavLink, useNavigate, useParams } from "react-router-dom";
-import { ChecksDataGrid } from "./components/ChecksDataGrid";
-import { useMonitor, useUpdateMonitor } from "../../../../hooks/monitors.query";
+import { Link, NavLink, useParams } from "react-router-dom";
+import Conditional from "../../../../components/Conditional";
+import Container from "../../../../components/Container";
+import PulseDot from "../../../../components/PulseDot";
+import { Role } from "../../../../components/Restrict";
 import useAuthenticationStore from "../../../../hooks/authentication.store";
+import {
+  useMonitor,
+  useUpdateMonitorState,
+} from "../../../../hooks/monitors.query";
 import { useCurrentUserRole } from "../../../../hooks/user.query";
-import { Role } from "../../../../components/Restrict";
-import { enqueueSnackbar } from "notistack";
-import { LoadingButton } from "@mui/lab";
-import { stripProtocolAndPath } from "../../../../utilities/url";
-import PulseDot from "../../../../components/PulseDot";
-import TLSCard from "./components/TLSCard";
-import LastCheckCard from "./components/LastCheckCard";
-import Conditional from "../../../../components/Conditional";
 import { secondsHumanize } from "../../../../utilities/time";
+import { stripProtocolAndPath } from "../../../../utilities/url";
 import AverageResponseTimeCard from "./components/AverageResponseTimeCard";
+import { ChecksDataGrid } from "./components/ChecksDataGrid";
+import LastCheckCard from "./components/LastCheckCard";
+import ResponseTimeGraph from "./components/ResponseTimesGraph";
+import TLSCard from "./components/TLSCard";
 import UptimeCard from "./components/UptimeCard";
-import { Helmet } from "react-helmet";
 
 const MonitorDetailView: FunctionComponent = () => {
   let params = useParams();
@@ -46,20 +49,18 @@ const MonitorDetailView: FunctionComponent = () => {
   const currentRole = useCurrentUserRole();
 
   const { data, error, isLoading } = useMonitor(monitorId);
-  const { mutate: update, isLoading: isUpdating } = useUpdateMonitor(monitorId);
+  const { mutate: updateState, isLoading: isUpdatingState } =
+    useUpdateMonitorState(monitorId);
 
   const isActive = useMemo(() => data?.state === "ACTIVE", [data?.state]);
 
   const setMonitorState = (state: "ACTIVE" | "INACTIVE") => {
-    if (!data || isUpdating) {
+    if (isLoading) {
       return;
     }
 
     try {
-      update({
-        ...data,
-        state: state,
-      });
+      updateState(state);
     } catch (e) {
       enqueueSnackbar("Failed to update monitor state", { variant: "error" });
     }
@@ -84,7 +85,7 @@ const MonitorDetailView: FunctionComponent = () => {
               isActive ? t.palette.info.main : t.palette.success.main,
           },
         }}
-        loading={isUpdating}
+        loading={isUpdatingState}
         onClick={() => setMonitorState(isActive ? "INACTIVE" : "ACTIVE")}
       >
         {isActive ? "Pause monitor" : "Resume monitor"}
@@ -100,10 +101,10 @@ const MonitorDetailView: FunctionComponent = () => {
         component={NavLink}
         to={`/monitors/${params.id}/settings`}
       >
-        Edit
+        Settings
       </Button>,
     ];
-  }, [currentRole, data, params, isUpdating]);
+  }, [currentRole, data, params, isUpdatingState]);
 
   return (
     <>