Skip to content

Commit 2006dd8

Browse files
naueramantnaueramant
committed
fix settings
1 parent 709afa2 commit 2006dd8

File tree

12 files changed

+299
-98
lines changed

12 files changed

+299
-98
lines changed

‎apps/dashboard/src/api/endpoints/monitors/monitors.ts

Lines changed: 16 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -84,12 +84,12 @@ export async function getMonitors(
8484
Get monitor
8585
*/
8686

87-
export interface GetMonitorResponse extends Monitor {}
87+
export interface GetMonitorResponse extends MonitorWithStats {}
8888

8989
export async function getMonitor(
9090
teamId: number,
9191
monitorId: number,
92-
): Promise<any> {
92+
): Promise<GetMonitorResponse> {
9393
const response = await client.get(
9494
`/v1/teams/${teamId}/monitors/${monitorId}`,
9595
);
@@ -148,3 +148,17 @@ export async function deleteMonitor(
148148
): Promise<void> {
149149
await client.delete(`/v1/teams/${teamId}/monitors/${monitorId}`);
150150
}
151+
152+
/*
153+
Set monitor state
154+
*/
155+
156+
export async function updateMonitorState(
157+
teamId: number,
158+
monitorId: number,
159+
state: "ACTIVE" | "INACTIVE",
160+
): Promise<void> {
161+
await client.put(`/v1/teams/${teamId}/monitors/${monitorId}/state`, {
162+
state,
163+
});
164+
}

‎apps/dashboard/src/hooks/monitors.query.ts

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -62,6 +62,25 @@ export const useUpdateMonitor = (moniterId: number) => {
6262
);
6363
};
6464

65+
export const useUpdateMonitorState = (monitorId: number) => {
66+
const teamId = useAuthenticationStore((state) => state.currentTeamId);
67+
68+
return useMutation(
69+
(state: "ACTIVE" | "INACTIVE") => {
70+
if (!teamId) {
71+
return Promise.resolve(null);
72+
}
73+
74+
return MonitorsAPI.updateMonitorState(teamId, monitorId, state);
75+
},
76+
{
77+
onSuccess: () => {
78+
queryClient.invalidateQueries(["teams", teamId, "monitors"]);
79+
},
80+
},
81+
);
82+
};
83+
6584
export const useMonitor = (monitorId: number) => {
6685
const teamId = useAuthenticationStore((state) => state.currentTeamId);
6786

‎apps/dashboard/src/pages/Dashboard/Monitors/Create/index.tsx

Lines changed: 12 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,4 @@
1+
import { DevTool } from "@hookform/devtools";
12
import {
23
Box,
34
Button,
@@ -7,25 +8,23 @@ import {
78
Tab,
89
Tabs,
910
TextField,
10-
Typography,
1111
} from "@mui/material";
12+
import { useSnackbar } from "notistack";
1213
import { FunctionComponent, useMemo } from "react";
14+
import { Helmet } from "react-helmet";
1315
import { Controller, FormProvider, useForm } from "react-hook-form";
16+
import { IoAdd } from "react-icons/io5";
1417
import { Link, useNavigate, useSearchParams } from "react-router-dom";
18+
import { v4 as uuidv4 } from "uuid";
1519
import Container from "../../../../components/Container";
16-
import RequestSettings from "../components/RequestSettings";
17-
import ResponseAssertionSettings from "../components/ResponseAssertionSettings";
18-
import { FormData } from "../models/formData";
19-
import { useCreateMonitor } from "../../../../hooks/monitors.query";
2020
import useAuthenticationStore from "../../../../hooks/authentication.store";
21-
import { useSnackbar } from "notistack";
22-
import { IoAdd } from "react-icons/io5";
21+
import { useCreateMonitor } from "../../../../hooks/monitors.query";
2322
import FrequencyAndLocationSettings from "../components/FrequencyAndLocationSettings";
24-
import TLSVerificationSettings from "../components/TLSVerificationSettings";
25-
import { v4 as uuidv4 } from "uuid";
2623
import HowAssertionsWork from "../components/HowAssertionsWork";
27-
import { Helmet } from "react-helmet";
28-
import { DevTool } from "@hookform/devtools";
24+
import RequestSettings from "../components/RequestSettings";
25+
import ResponseAssertionSettings from "../components/ResponseAssertionSettings";
26+
import TLSVerificationSettings from "../components/TLSVerificationSettings";
27+
import { SettingsFormData } from "../models/settingsFormData";
2928

3029
const MonitorCreateView: FunctionComponent = () => {
3130
const teamId = useAuthenticationStore((state) => state.currentTeamId);
@@ -38,7 +37,7 @@ const MonitorCreateView: FunctionComponent = () => {
3837
});
3938
const selectedTab = useMemo(() => params.get("tab"), [params]);
4039

41-
const formMethods = useForm<FormData>({
40+
const formMethods = useForm<SettingsFormData>({
4241
defaultValues: {
4342
teamId: teamId,
4443
name: "",
@@ -80,7 +79,7 @@ const MonitorCreateView: FunctionComponent = () => {
8079

8180
mutate(data, {
8281
onSuccess: () => {
83-
enqueueSnackbar(`Monitor \`${data.name}\` created.`, {
82+
enqueueSnackbar(`Monitor '${data.name}' created.`, {
8483
variant: "success",
8584
});
8685

‎apps/dashboard/src/pages/Dashboard/Monitors/Detail/index.tsx

Lines changed: 26 additions & 25 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,5 @@
1-
import { FunctionComponent, useMemo, useState } from "react";
2-
import Container from "../../../../components/Container";
1+
import { LoadingButton } from "@mui/lab";
32
import {
4-
alpha,
53
Button,
64
Card,
75
CardContent,
@@ -12,27 +10,32 @@ import {
1210
ToggleButton,
1311
ToggleButtonGroup,
1412
Typography,
13+
alpha,
1514
useTheme,
1615
} from "@mui/material";
16+
import { enqueueSnackbar } from "notistack";
17+
import { FunctionComponent, useMemo, useState } from "react";
18+
import { Helmet } from "react-helmet";
1719
import { IoPause, IoPlay, IoSettings } from "react-icons/io5";
18-
import ResponseTimeGraph from "./components/ResponseTimesGraph";
19-
import { Link, NavLink, useNavigate, useParams } from "react-router-dom";
20-
import { ChecksDataGrid } from "./components/ChecksDataGrid";
21-
import { useMonitor, useUpdateMonitor } from "../../../../hooks/monitors.query";
20+
import { Link, NavLink, useParams } from "react-router-dom";
21+
import Conditional from "../../../../components/Conditional";
22+
import Container from "../../../../components/Container";
23+
import PulseDot from "../../../../components/PulseDot";
24+
import { Role } from "../../../../components/Restrict";
2225
import useAuthenticationStore from "../../../../hooks/authentication.store";
26+
import {
27+
useMonitor,
28+
useUpdateMonitorState,
29+
} from "../../../../hooks/monitors.query";
2330
import { useCurrentUserRole } from "../../../../hooks/user.query";
24-
import { Role } from "../../../../components/Restrict";
25-
import { enqueueSnackbar } from "notistack";
26-
import { LoadingButton } from "@mui/lab";
27-
import { stripProtocolAndPath } from "../../../../utilities/url";
28-
import PulseDot from "../../../../components/PulseDot";
29-
import TLSCard from "./components/TLSCard";
30-
import LastCheckCard from "./components/LastCheckCard";
31-
import Conditional from "../../../../components/Conditional";
3231
import { secondsHumanize } from "../../../../utilities/time";
32+
import { stripProtocolAndPath } from "../../../../utilities/url";
3333
import AverageResponseTimeCard from "./components/AverageResponseTimeCard";
34+
import { ChecksDataGrid } from "./components/ChecksDataGrid";
35+
import LastCheckCard from "./components/LastCheckCard";
36+
import ResponseTimeGraph from "./components/ResponseTimesGraph";
37+
import TLSCard from "./components/TLSCard";
3438
import UptimeCard from "./components/UptimeCard";
35-
import { Helmet } from "react-helmet";
3639

3740
const MonitorDetailView: FunctionComponent = () => {
3841
let params = useParams();
@@ -46,20 +49,18 @@ const MonitorDetailView: FunctionComponent = () => {
4649
const currentRole = useCurrentUserRole();
4750

4851
const { data, error, isLoading } = useMonitor(monitorId);
49-
const { mutate: update, isLoading: isUpdating } = useUpdateMonitor(monitorId);
52+
const { mutate: updateState, isLoading: isUpdatingState } =
53+
useUpdateMonitorState(monitorId);
5054

5155
const isActive = useMemo(() => data?.state === "ACTIVE", [data?.state]);
5256

5357
const setMonitorState = (state: "ACTIVE" | "INACTIVE") => {
54-
if (!data || isUpdating) {
58+
if (isLoading) {
5559
return;
5660
}
5761

5862
try {
59-
update({
60-
...data,
61-
state: state,
62-
});
63+
updateState(state);
6364
} catch (e) {
6465
enqueueSnackbar("Failed to update monitor state", { variant: "error" });
6566
}
@@ -84,7 +85,7 @@ const MonitorDetailView: FunctionComponent = () => {
8485
isActive ? t.palette.info.main : t.palette.success.main,
8586
},
8687
}}
87-
loading={isUpdating}
88+
loading={isUpdatingState}
8889
onClick={() => setMonitorState(isActive ? "INACTIVE" : "ACTIVE")}
8990
>
9091
{isActive ? "Pause monitor" : "Resume monitor"}
@@ -100,10 +101,10 @@ const MonitorDetailView: FunctionComponent = () => {
100101
component={NavLink}
101102
to={`/monitors/${params.id}/settings`}
102103
>
103-
Edit
104+
Settings
104105
</Button>,
105106
];
106-
}, [currentRole, data, params, isUpdating]);
107+
}, [currentRole, data, params, isUpdatingState]);
107108

108109
return (
109110
<>

0 commit comments

Comments
 (0)