-
+ Response Time (ms): {payload[0].payload.originalResponseTime}
+ {" "}
{/* Display original value */}
-
+
+
Response Time (ms): {payload[0].payload.originalResponseTime}
{" "} + +
+
{
key={`cell-${index}`}
fill={
check.status === true
- ? "var(--env-var-color-23)"
- : "var(--env-var-color-24)"
+ ? "var(--success-color)"
+ : "var(--error-color)"
}
/>
))}
-
+
-
- );
-};
-
-Statistic.propTypes = {
- title: PropTypes.string.isRequired,
- value: PropTypes.string.isRequired,
-};
-
-export default Statistic;
diff --git a/Client/src/Components/Charts/Statistics/statistic.css b/Client/src/Components/Charts/Statistics/statistic.css
deleted file mode 100644
index a8834199d..000000000
--- a/Client/src/Components/Charts/Statistics/statistic.css
+++ /dev/null
@@ -1,31 +0,0 @@
-:root {
- --stats-spacing-general-0: 5px 10px;
- --color-border-0: #eaecf0;
- --border-radius-0: 4px;
- --font-size-0: 1rem;
- --font-size-1: 13px;
- --font-color-0: #344054;
- --margin-bottom-0: 10px;
-}
-
-.statistic-tile {
- margin: var(--stats-spacing-general-0);
- padding: var(--stats-spacing-general-0);
- border: 1px solid var(--color-border-0);
- border-radius: var(--border-radius-0);
-
- width: 180px;
-}
-
-.statistic-tile-title {
- font-size: var(--font-size-0);
- color: var(--font-color-0);
- margin-bottom: var(--margin-bottom-0);
-}
-
-.statistic-tile-value {
- font-size: var(--font-size-1);
- color: var(--font-color-0);
- font-weight: 700;
- margin-bottom: var(--margin-bottom-0);
-}
diff --git a/Client/src/Components/Check/Check.jsx b/Client/src/Components/Check/Check.jsx
index 645e0b5e2..9eaba846e 100644
--- a/Client/src/Components/Check/Check.jsx
+++ b/Client/src/Components/Check/Check.jsx
@@ -2,7 +2,7 @@ import "./check.css";
import PropTypes from "prop-types";
import CheckGrey from "../../assets/icons/check.svg?react";
import CheckOutlined from "../../assets/icons/check-outlined.svg?react";
-import { Stack, Typography } from "@mui/material";
+import { Box, Stack, Typography } from "@mui/material";
import { useTheme } from "@emotion/react";
/**
@@ -22,25 +22,41 @@ import { useTheme } from "@emotion/react";
*/
const Check = ({ text, variant = "info", outlined = false }) => {
const theme = useTheme();
+ const colors = {
+ success: theme.palette.success.main,
+ error: theme.palette.error.text,
+ info: theme.palette.info.border,
+ };
+
return (
{title}
- {value}
-
-
- {title &&
-
- );
-}
-
-export default TooltipWithTail;
diff --git a/Client/src/Components/Tooltips/TooltipWithTail/tooltipWithTail.css b/Client/src/Components/Tooltips/TooltipWithTail/tooltipWithTail.css
deleted file mode 100644
index 3efe67643..000000000
--- a/Client/src/Components/Tooltips/TooltipWithTail/tooltipWithTail.css
+++ /dev/null
@@ -1,49 +0,0 @@
-:root {
- --env-var-color-1: #101828;
- --env-var-color-2: #475467;
- --env-var-color-3: #1570ef;
-
- --env-var-color-4: #d0d5dd;
- --env-var-color-5: #344054;
- --env-var-color-6: #eaecf0;
- --env-var-color-7: #7f56d9;
- --env-var-color-8: #fff;
- --env-var-color-9: #f2f2f2;
- --env-var-color-10: #175cd3;
-
- --env-var-radius-1: 4px;
- --env-var-radius-2: 8px;
-
- --env-var-width-1: 100vw;
- --env-var-width-2: 360px;
-
- --env-var-height-1: 100vh;
-
- --env-var-spacing-1: 12px;
- --env-var-spacing-2: 24px;
- --env-var-spacing-3: 32px;
- --env-var-spacing-4: 40px;
-
- --env-var-font-size-small: 11px;
- --env-var-font-size-medium: 13px;
- --env-var-font-size-medium-plus: 14px;
- --env-var-font-size-large: 16px;
- --env-var-font-size-xlarge: 30px;
-
- --env-var-img-width-1: 20px;
-
- --env-var-default-1: 24px;
- --env-var-default-2: 40px;
-}
-
-.tooltip-title {
- font-size: var(--env-var-font-size-medium);
- font-weight: bold;
- margin: 5px;
-}
-
-.tooltip-description {
- font-size: var(--env-var-font-size-medium);
- color: var(--env-var-color-4);
- margin: 5px;
-}
diff --git a/Client/src/Features/Auth/authSlice.js b/Client/src/Features/Auth/authSlice.js
index fa1f0471e..f12758715 100644
--- a/Client/src/Features/Auth/authSlice.js
+++ b/Client/src/Features/Auth/authSlice.js
@@ -1,6 +1,7 @@
import { networkService } from "../../main";
import { createAsyncThunk, createSlice } from "@reduxjs/toolkit";
import { jwtDecode } from "jwt-decode";
+import axios from "axios";
const initialState = {
isLoading: false,
@@ -57,9 +58,8 @@ export const update = createAsyncThunk(
form.password && fd.append("password", form.password);
form.newPassword && fd.append("newPassword", form.newPassword);
if (form.file && form.file !== "") {
- const imageResult = await networkService.get(form.file, {
+ const imageResult = await axios.get(form.file, {
responseType: "blob",
- baseURL: "",
});
fd.append("profileImage", imageResult.data);
}
diff --git a/Client/src/Features/PageSpeedMonitor/pageSpeedMonitorSlice.js b/Client/src/Features/PageSpeedMonitor/pageSpeedMonitorSlice.js
index 22e2b3324..e32d673cc 100644
--- a/Client/src/Features/PageSpeedMonitor/pageSpeedMonitorSlice.js
+++ b/Client/src/Features/PageSpeedMonitor/pageSpeedMonitorSlice.js
@@ -28,14 +28,14 @@ export const createPageSpeed = createAsyncThunk(
}
);
-export const getPageSpeedByUserId = createAsyncThunk(
- "pageSpeedMonitors/getPageSpeedByUserId",
+export const getPageSpeedByTeamId = createAsyncThunk(
+ "pageSpeedMonitors/getPageSpeedByTeamId",
async (token, thunkApi) => {
const user = jwtDecode(token);
try {
- const res = await networkService.getMonitorsByUserId(
+ const res = await networkService.getMonitorsByTeamId(
token,
- user._id,
+ user.teamId,
25,
["pagespeed"],
null,
@@ -127,15 +127,15 @@ const pageSpeedMonitorSlice = createSlice({
// Monitors by userId
// *****************************************************
- .addCase(getPageSpeedByUserId.pending, (state) => {
+ .addCase(getPageSpeedByTeamId.pending, (state) => {
state.isLoading = true;
})
- .addCase(getPageSpeedByUserId.fulfilled, (state, action) => {
+ .addCase(getPageSpeedByTeamId.fulfilled, (state, action) => {
state.isLoading = false;
state.success = action.payload.msg;
state.monitors = action.payload.data;
})
- .addCase(getPageSpeedByUserId.rejected, (state, action) => {
+ .addCase(getPageSpeedByTeamId.rejected, (state, action) => {
state.isLoading = false;
state.success = false;
state.msg = action.payload
diff --git a/Client/src/Features/UI/uiSlice.js b/Client/src/Features/UI/uiSlice.js
index ebea20bf1..947055ddc 100644
--- a/Client/src/Features/UI/uiSlice.js
+++ b/Client/src/Features/UI/uiSlice.js
@@ -4,7 +4,7 @@ import { createSlice } from "@reduxjs/toolkit";
// Add more settings as needed (e.g., theme preferences, user settings)
const initialState = {
monitors: {
- rowsPerPage: 5,
+ rowsPerPage: 10,
},
team: {
rowsPerPage: 5,
@@ -12,6 +12,8 @@ const initialState = {
sidebar: {
collapsed: false,
},
+ mode: "light",
+ greeting: { index: 0, lastUpdate: null },
};
const uiSlice = createSlice({
@@ -19,13 +21,24 @@ const uiSlice = createSlice({
initialState,
reducers: {
setRowsPerPage: (state, action) => {
- state[action.payload.table].rowsPerPage = action.payload.value;
+ const { table, value } = action.payload;
+ if (state[table]) {
+ state[table].rowsPerPage = value;
+ }
},
toggleSidebar: (state) => {
state.sidebar.collapsed = !state.sidebar.collapsed;
},
+ setMode: (state, action) => {
+ state.mode = action.payload;
+ },
+ setGreeting(state, action) {
+ state.greeting.index = action.payload.index;
+ state.greeting.lastUpdate = action.payload.lastUpdate;
+ },
},
});
export default uiSlice.reducer;
-export const { setRowsPerPage, toggleSidebar } = uiSlice.actions;
+export const { setRowsPerPage, toggleSidebar, setMode, setGreeting } =
+ uiSlice.actions;
diff --git a/Client/src/Features/UptimeMonitors/uptimeMonitorsSlice.js b/Client/src/Features/UptimeMonitors/uptimeMonitorsSlice.js
index 9ab7d385b..2c381812c 100644
--- a/Client/src/Features/UptimeMonitors/uptimeMonitorsSlice.js
+++ b/Client/src/Features/UptimeMonitors/uptimeMonitorsSlice.js
@@ -28,14 +28,34 @@ export const createUptimeMonitor = createAsyncThunk(
}
);
-export const getUptimeMonitorsByUserId = createAsyncThunk(
- "montiors/getMonitorsByUserId",
+export const getUptimeMonitorById = createAsyncThunk(
+ "monitors/getMonitorById",
+ async (data, thunkApi) => {
+ try {
+ const { authToken, monitorId } = data;
+ const res = await networkService.getMonitorByid(authToken, monitorId);
+ return res.data;
+ } catch (error) {
+ if (error.response && error.response.data) {
+ return thunkApi.rejectWithValue(error.response.data);
+ }
+ const payload = {
+ status: false,
+ msg: error.message ? error.message : "Unknown error",
+ };
+ return thunkApi.rejectWithValue(payload);
+ }
+ }
+);
+
+export const getUptimeMonitorsByTeamId = createAsyncThunk(
+ "monitors/getMonitorsByTeamId",
async (token, thunkApi) => {
const user = jwtDecode(token);
try {
- const res = await networkService.getMonitorsByUserId(
+ const res = await networkService.getMonitorsByTeamId(
token,
- user._id,
+ user.teamId,
25,
["http", "ping"],
null,
@@ -109,6 +129,46 @@ export const deleteUptimeMonitor = createAsyncThunk(
}
);
+export const pauseUptimeMonitor = createAsyncThunk(
+ "monitors/pauseMonitor",
+ async (data, thunkApi) => {
+ try {
+ const { authToken, monitorId } = data;
+ const res = await networkService.pauseMonitorById(authToken, monitorId);
+ return res.data;
+ } catch (error) {
+ if (error.response && error.response.data) {
+ return thunkApi.rejectWithValue(error.response.data);
+ }
+ const payload = {
+ status: false,
+ msg: error.message ? error.message : "Unknown error",
+ };
+ return thunkApi.rejectWithValue(payload);
+ }
+ }
+);
+
+export const deleteMonitorChecksByTeamId = createAsyncThunk(
+ "monitors/deleteChecksByTeamId",
+ async (data, thunkApi) => {
+ try {
+ const { authToken, teamId } = data;
+ const res = await networkService.deleteChecksByTeamId(authToken, teamId);
+ return res.data;
+ } catch (error) {
+ if (error.response && error.response.data) {
+ return thunkApi.rejectWithValue(error.response.data);
+ }
+ const payload = {
+ status: false,
+ msg: error.message ? error.message : "Unknown error",
+ };
+ return thunkApi.rejectWithValue(payload);
+ }
+ }
+);
+
const uptimeMonitorsSlice = createSlice({
name: "uptimeMonitors",
initialState,
@@ -126,15 +186,15 @@ const uptimeMonitorsSlice = createSlice({
// Monitors by userId
// *****************************************************
- .addCase(getUptimeMonitorsByUserId.pending, (state) => {
+ .addCase(getUptimeMonitorsByTeamId.pending, (state) => {
state.isLoading = true;
})
- .addCase(getUptimeMonitorsByUserId.fulfilled, (state, action) => {
+ .addCase(getUptimeMonitorsByTeamId.fulfilled, (state, action) => {
state.isLoading = false;
state.success = action.payload.msg;
state.monitors = action.payload.data;
})
- .addCase(getUptimeMonitorsByUserId.rejected, (state, action) => {
+ .addCase(getUptimeMonitorsByTeamId.rejected, (state, action) => {
state.isLoading = false;
state.success = false;
state.msg = action.payload
@@ -160,7 +220,24 @@ const uptimeMonitorsSlice = createSlice({
? action.payload.msg
: "Failed to create uptime monitor";
})
-
+ // *****************************************************
+ // Get Monitor By Id
+ // *****************************************************
+ .addCase(getUptimeMonitorById.pending, (state) => {
+ state.isLoading = true;
+ })
+ .addCase(getUptimeMonitorById.fulfilled, (state, action) => {
+ state.isLoading = false;
+ state.success = action.payload.success;
+ state.msg = action.payload.msg;
+ })
+ .addCase(getUptimeMonitorById.rejected, (state, action) => {
+ state.isLoading = false;
+ state.success = false;
+ state.msg = action.payload
+ ? action.payload.msg
+ : "Failed to pause uptime monitor";
+ })
// *****************************************************
// update Monitor
// *****************************************************
@@ -197,6 +274,42 @@ const uptimeMonitorsSlice = createSlice({
state.msg = action.payload
? action.payload.msg
: "Failed to delete uptime monitor";
+ })
+ // *****************************************************
+ // Delete Monitor checks by Team ID
+ // *****************************************************
+ .addCase(deleteMonitorChecksByTeamId.pending, (state) => {
+ state.isLoading = true;
+ })
+ .addCase(deleteMonitorChecksByTeamId.fulfilled, (state, action) => {
+ state.isLoading = false;
+ state.success = action.payload.success;
+ state.msg = action.payload.msg;
+ })
+ .addCase(deleteMonitorChecksByTeamId.rejected, (state, action) => {
+ state.isLoading = false;
+ state.success = false;
+ state.msg = action.payload
+ ? action.payload.msg
+ : "Failed to delete monitor checks";
+ })
+ // *****************************************************
+ // Pause Monitor
+ // *****************************************************
+ .addCase(pauseUptimeMonitor.pending, (state) => {
+ state.isLoading = true;
+ })
+ .addCase(pauseUptimeMonitor.fulfilled, (state, action) => {
+ state.isLoading = false;
+ state.success = action.payload.success;
+ state.msg = action.payload.msg;
+ })
+ .addCase(pauseUptimeMonitor.rejected, (state, action) => {
+ state.isLoading = false;
+ state.success = false;
+ state.msg = action.payload
+ ? action.payload.msg
+ : "Failed to pause uptime monitor";
});
},
});
diff --git a/Client/src/HOC/withAdminCheck.jsx b/Client/src/HOC/withAdminCheck.jsx
index 30a767f36..097f224e9 100644
--- a/Client/src/HOC/withAdminCheck.jsx
+++ b/Client/src/HOC/withAdminCheck.jsx
@@ -10,7 +10,7 @@ const withAdminCheck = (WrappedComponent) => {
useEffect(() => {
networkService
- .doesAdminExist()
+ .doesSuperAdminExist()
.then((response) => {
if (response.data.data === true) {
navigate("/login");
@@ -20,7 +20,7 @@ const withAdminCheck = (WrappedComponent) => {
logger.error(error);
});
}, [navigate]);
- return {title}
}
- {text}
-
- }
- className="tooltip-holder"
- >
-
-
+
}
- />
+ >
+
{directory.title}
@@ -252,14 +257,14 @@ const CreateNewMaintenanceWindow = () => {
{configOptions.map((item, index) => (
@@ -271,26 +276,19 @@ const CreateNewMaintenanceWindow = () => {
-
+ >
+ Cancel
+
+
diff --git a/Client/src/Pages/Maintenance/index.css b/Client/src/Pages/Maintenance/index.css
index f26a48767..46ba8b0fa 100644
--- a/Client/src/Pages/Maintenance/index.css
+++ b/Client/src/Pages/Maintenance/index.css
@@ -13,7 +13,7 @@
}
.maintenance-title {
- color: var(--env-var-color-2);
+ color: var(--secondary-color-light);
font-size: 16px;
font-weight: bold;
margin-top: 40px;
@@ -22,7 +22,7 @@
.checklist-item {
font-size: 13px;
- color: var(--env-var-color-2);
+ color: var(--secondary-color-light);
display: flex;
margin-bottom: 10px;
}
diff --git a/Client/src/Pages/Maintenance/index.jsx b/Client/src/Pages/Maintenance/index.jsx
index e9c28d905..5c23a789c 100644
--- a/Client/src/Pages/Maintenance/index.jsx
+++ b/Client/src/Pages/Maintenance/index.jsx
@@ -1,9 +1,26 @@
+import { Box } from "@mui/material";
+import { useTheme } from "@emotion/react";
import Fallback from "../../Components/Fallback";
import "./index.css";
-const Maintenance = () => {
+const Maintenance = ({ isAdmin }) => {
+ const theme = useTheme();
+
return (
-
+ [class*="fallback__"])': {
+ position: "relative",
+ border: 1,
+ borderColor: theme.palette.border.light,
+ borderRadius: theme.shape.borderRadius,
+ borderStyle: "dashed",
+ backgroundColor: theme.palette.background.main,
+ overflow: "hidden",
+ },
+ }}
+ >
{
"Stop sending alerts in maintenance windows",
]}
link="/maintenance/create"
+ isAdmin={isAdmin}
/>
-
+
);
};
diff --git a/Client/src/Pages/Monitors/Configure/index.css b/Client/src/Pages/Monitors/Configure/index.css
index ec140887c..23b6af57a 100644
--- a/Client/src/Pages/Monitors/Configure/index.css
+++ b/Client/src/Pages/Monitors/Configure/index.css
@@ -1,52 +1,17 @@
.configure-monitor h1.MuiTypography-root {
font-size: var(--env-var-font-size-large-plus);
- color: var(--env-var-color-1);
font-weight: 600;
}
-.configure-monitor h2.MuiTypography-root {
- font-size: var(--env-var-font-size-large);
- font-weight: 600;
-}
-.configure-monitor h2.MuiTypography-root,
-.configure-monitor .config-box p.MuiTypography-root,
-.configure-monitor .MuiSelect-select {
- color: var(--env-var-color-5);
-}
-.configure-monitor .MuiModal-root h2.MuiTypography-root {
- color: var(--env-var-color-1);
-}
-.configure-monitor p.MuiTypography-root,
-.configure-monitor .MuiSelect-select {
+.configure-monitor p.MuiTypography-root {
font-size: var(--env-var-font-size-medium);
}
-.configure-monitor h6.MuiTypography-root {
- opacity: 0.6;
-}
-.configure-monitor h6.MuiTypography-root,
.configure-monitor h1.MuiTypography-root + span.MuiTypography-root {
font-size: var(--env-var-font-size-small-plus);
}
-.configure-monitor button.MuiButtonBase-root {
- font-size: var(--env-var-font-size-medium);
-}
.configure-monitor button.MuiButtonBase-root {
height: var(--env-var-height-2);
}
-.configure-monitor .config-box {
- border: 1px solid var(--env-var-color-16);
- border-radius: var(--env-var-radius-1);
- background-color: var(--env-var-color-8);
-}
-.configure-monitor .config-box > .MuiBox-root,
-.configure-monitor .config-box > .MuiStack-root {
- flex: 1;
- padding: 24px 30px;
- padding-bottom: 40px;
-}
-.configure-monitor .config-box > *:first-child {
- flex: 0.7;
- border-right: solid 1px var(--env-var-color-16);
-}
+
.configure-monitor .MuiStack-root:has(span.MuiTypography-root.input-error) {
position: relative;
}
@@ -54,25 +19,3 @@
position: absolute;
top: 100%;
}
-.configure-monitor .MuiInputBase-root:has(> .Mui-disabled) {
- background-color: var(--env-var-color-13);
-}
-
-.MuiInputBase-root:has(#monitor-interval) {
- height: 34px;
- width: 100%;
-}
-#monitor-interval {
- padding: 0 10px;
- height: 100%;
- display: flex;
- align-items: center;
-}
-.MuiInputBase-root:not(.Mui-focused):has(#monitor-interval):hover fieldset {
- border-color: var(--env-var-color-29);
-}
-
-body:has(.configure-monitor) .select-dropdown .MuiMenuItem-root,
-.configure-monitor .select-wrapper .select-component > .MuiSelect-select {
- text-transform: lowercase;
-}
diff --git a/Client/src/Pages/Monitors/Configure/index.jsx b/Client/src/Pages/Monitors/Configure/index.jsx
index bd2a26df0..483a2fd79 100644
--- a/Client/src/Pages/Monitors/Configure/index.jsx
+++ b/Client/src/Pages/Monitors/Configure/index.jsx
@@ -2,22 +2,27 @@ import { useNavigate, useParams } from "react-router";
import { useTheme } from "@emotion/react";
import { useDispatch, useSelector } from "react-redux";
import { useEffect, useState } from "react";
-import { Box, Modal, Skeleton, Stack, Typography } from "@mui/material";
+import { Box, Button, Modal, Stack, Typography } from "@mui/material";
import { monitorValidation } from "../../../Validation/validation";
import { createToast } from "../../../Utils/toastUtils";
import { logger } from "../../../Utils/Logger";
+import { ConfigBox } from "../styled";
import {
updateUptimeMonitor,
- getUptimeMonitorsByUserId,
+ pauseUptimeMonitor,
+ getUptimeMonitorById,
+ getUptimeMonitorsByTeamId,
deleteUptimeMonitor,
} from "../../../Features/UptimeMonitors/uptimeMonitorsSlice";
-import Button from "../../../Components/Button";
import Field from "../../../Components/Inputs/Field";
import PauseCircleOutlineIcon from "@mui/icons-material/PauseCircleOutline";
+import PlayCircleOutlineRoundedIcon from "@mui/icons-material/PlayCircleOutlineRounded";
import Select from "../../../Components/Inputs/Select";
import Checkbox from "../../../Components/Inputs/Checkbox";
import Breadcrumbs from "../../../Components/Breadcrumbs";
import PulseDot from "../../../Components/Animated/PulseDot";
+import SkeletonLayout from "./skeleton";
+import LoadingButton from "@mui/lab/LoadingButton";
import "./index.css";
/**
@@ -34,54 +39,6 @@ const parseUrl = (url) => {
}
};
-/**
- * Renders a skeleton layout.
- *
- * @returns {JSX.Element}
- */
-const SkeletonLayout = () => {
- const theme = useTheme();
-
- return (
- <>
- Proxy settings
-
- }
- rightLayout={
-
- handleCheck("enabled", setProxy)}
- />
- handleChange(event, "protocol", setProxy)}
- />
- handleChange(event, "address", setProxy)}
- />
- handleChange(event, "proxy_port", setProxy)}
- />
-
- }
- /> */}
+
+ [class*="fallback__"])': {
+ position: "relative",
+ border: 1,
+ borderColor: theme.palette.border.light,
+ borderRadius: theme.shape.borderRadius,
+ borderStyle: "dashed",
+ backgroundColor: theme.palette.background.main,
+ overflow: "hidden",
+ },
+ }}
+ >
{
"Build trust with your customers",
]}
/>
-
+