+
+ );
+};
+
+/**
+ * MonitorTable component.
+ * Takes an array of monitor objects and displays them in a table.
+ * Each row in the table represents a monitor and includes the host, status, response time, and action.
+ *
+ * @component
+ * @param {Object[]} monitors - An array of monitor objects. Each object should have the following properties:
+ * @param {string} monitors[].url - The URL of the monitor.
+ * @param {string} monitors[].name - The name of the monitor.
+ * @param {boolean} monitors[].status - The status of the monitor. True if the monitor is up, false otherwise.
+ * @param {Object[]} monitors[].checks - An array of check objects for the response time chart.
+ * @returns {React.Component} Returns a table with the monitor data.
+ */
+const MonitorTable = ({ monitors = [] }) => {
+ const [page, setPage] = useState(0);
+ const [rowsPerPage, setRowsPerPage] = useState(5);
+
+ const handleChangePage = (event, newPage) => {
+ setPage(newPage);
+ };
+
+ const handleChangeRowsPerPage = (event) => {
+ setRowsPerPage(parseInt(event.target.value, 10));
+ setPage(0);
+ };
+
+ const mappedRows = monitors
+ .slice(page * rowsPerPage, page * rowsPerPage + rowsPerPage)
+ .map((monitor) => {
+ const params = {
+ url: monitor.url,
+ title: monitor.name,
+ precentage: 100,
+ percentageColor:
+ monitor.status === true
+ ? "var(--env-var-color-17)"
+ : "var(--env-var-color-19)",
+ status: monitor.status === true ? "up" : "down",
+ backgroundColor:
+ monitor.status === true
+ ? "var(--env-var-color-20)"
+ : "var(--env-var-color-21)",
+ statusDotColor:
+ monitor.status === true
+ ? "var(--env-var-color-17)"
+ : "var(--env-var-color-19)",
+ };
+
+ return (
+
+
+
+ {params.status}
+
+
+
-
@@ -181,8 +174,8 @@ const PasswordPanel = () => {
+ 
+
+ );
+};
+
+export default Maintenance;
diff --git a/Client/src/Pages/Monitors/index.css b/Client/src/Pages/Monitors/index.css
index 987bbd7cd..a21a3e125 100644
--- a/Client/src/Pages/Monitors/index.css
+++ b/Client/src/Pages/Monitors/index.css
@@ -1,7 +1,6 @@
.monitors,
.new-monitor {
width: 70vw;
- padding: 4vw;
}
.monitors {
@@ -9,13 +8,13 @@
}
.monitors-bar {
- margin-top: calc(2 * var(--env-var-spacing-2));
display: flex;
justify-content: space-between;
align-items: center;
}
.monitors-bar-title {
+ color: var(--env-var-color-1);
font-size: 24px;
font-weight: 700;
}
diff --git a/Client/src/Pages/Monitors/index.jsx b/Client/src/Pages/Monitors/index.jsx
index 4c6d18606..241ca4b10 100644
--- a/Client/src/Pages/Monitors/index.jsx
+++ b/Client/src/Pages/Monitors/index.jsx
@@ -7,10 +7,11 @@ import { useNavigate } from "react-router-dom";
import Button from "../../Components/Button";
import ServerStatus from "../../Components/Charts/Servers/ServerStatus";
import SearchTextField from "../../Components/TextFields/Search/SearchTextField";
-import HostsTable from "../../Components/HostsTable";
-import Pagination from "../../Components/Pagination";
+import MonitorTable from "../../Components/MonitorTable";
+import { useTheme } from "@emotion/react";
const Monitors = () => {
+ const theme = useTheme();
const navigate = useNavigate();
const monitorState = useSelector((state) => state.monitors);
const authState = useSelector((state) => state.auth);
@@ -25,9 +26,13 @@ const Monitors = () => {
}, 0);
const down = monitorState.monitors.length - up;
-
return (
- Create a maintenance window to
+
+ {maintenanceItems.map((item) => (
+
+
+
+
+
+ ))}
+ {item.text}
+
+
);
diff --git a/Client/src/Pages/Monitors/monitors.css b/Client/src/Pages/Monitors/monitors.css
index c2ed8532f..05ae79709 100644
--- a/Client/src/Pages/Monitors/monitors.css
+++ b/Client/src/Pages/Monitors/monitors.css
@@ -7,6 +7,7 @@
.current-monitors-title-holder {
display: flex;
+ align-items: center;
}
.current-monitors-bar {
@@ -18,16 +19,22 @@
font-size: 1rem;
font-weight: bold;
margin-right: var(--env-var-spacing-1);
+ color: var(--env-var-color-1);
}
.current-monitors-counter {
- width: var(--env-var-spacing-2);
- height: var(--env-var-spacing-2);
+ display: inline-flex;
+ justify-content: center;
+ align-items: center;
+ padding: 2px;
+ min-width: 22px;
+ min-height: 22px;
background-color: var(--env-var-color-15);
border: 1px solid var(--env-var-color-6);
border-radius: 50%;
- text-align: center;
- align-items: center;
+ font-size: var(--env-var-font-size-medium);
+ font-weight: 500;
+ color: var(--env-var-color-5);
}
.monitors-v-gaping {
@@ -66,24 +73,6 @@
font-size: var(--env-var-font-size-medium);
}
-.host-list-item {
- display: flex;
- align-items: center;
- cursor: pointer;
-}
-
-.host-list-item-open {
- width: var(--env-var-img-width-2);
- height: var(--env-var-img-width-2);
- margin-right: 8px;
-}
-
-.host-list-item-name {
- font-size: var(--env-var-font-size-medium);
- font-weight: bold;
- margin-right: var(--env-var-spacing-1);
-}
-
.host-list-item-precentage {
font-size: var(--env-var-font-size-medium);
}
@@ -101,13 +90,6 @@
padding: calc(var(--env-var-spacing-1) / 2);
}
-.host-status-box-circle {
- width: 6px;
- height: 6px;
- border-radius: 50%;
- margin-right: calc(var(--env-var-spacing-1) / 2);
-}
-
.host-actions {
margin: auto;
cursor: pointer;
diff --git a/Client/src/Pages/Status/index.jsx b/Client/src/Pages/Status/index.jsx
index 33729f7e1..f0cf82b60 100644
--- a/Client/src/Pages/Status/index.jsx
+++ b/Client/src/Pages/Status/index.jsx
@@ -1,9 +1,7 @@
-import React from 'react'
+import React from "react";
const Status = () => {
- return (
-
Hello, {authState.user.firstname}
@@ -38,7 +43,7 @@ const Monitors = () => {
onClick={() => {
navigate("/monitors/create");
}}
- sx={{ padding: "10px 20px", fontSize: "13px" }}
+ sx={{ padding: "6px 25px", fontSize: "13px" }}
/>
@@ -60,10 +65,9 @@ const Monitors = () => {
Status
- )
-}
+ return Status
;
+};
-export default Status
\ No newline at end of file
+export default Status;
diff --git a/Client/src/Utils/PathMap.js b/Client/src/Utils/PathMap.js
index 2a86c17f7..a14aafe63 100644
--- a/Client/src/Utils/PathMap.js
+++ b/Client/src/Utils/PathMap.js
@@ -1,9 +1,10 @@
const pathMap = {
- "/monitors": "Monitors",
- "/incidents": "Incidents",
- "/status" : "Status Pages",
- "/integrations": "Integrations",
- "/settings" : "Settings"
-}
+ "/monitors": "Monitors",
+ "/incidents": "Incidents",
+ "/status": "Status Pages",
+ "/integrations": "Integrations",
+ "/maintenance": "maintenance",
+ "/settings": "Settings",
+};
-export default pathMap;
\ No newline at end of file
+export default pathMap;
diff --git a/Client/src/Utils/Theme.js b/Client/src/Utils/Theme.js
index c9f20126f..60273cd95 100644
--- a/Client/src/Utils/Theme.js
+++ b/Client/src/Utils/Theme.js
@@ -88,14 +88,32 @@ const theme = createTheme({
},
content: {
pX: "80px",
- pY: "40px"
+ pY: "40px",
},
gap: {
small: "8px",
medium: "12px",
+ ml: "16px",
large: "24px",
- xl: "40px"
- }
+ xl: "40px",
+ },
+ alert: {
+ info: {
+ color: secondaryMain,
+ bg: otherColorsWhite,
+ border: "#d0d5dd",
+ },
+ error: {
+ color: "#d92d20",
+ bg: "hsla(0, 100%, 52%, 0.03)",
+ border: "#f04438",
+ },
+ warning: {
+ color: "#f79009",
+ bg: "#fffaef",
+ border: "#fecf60"
+ },
+ },
});
export default theme;
diff --git a/Client/src/assets/Images/Icon-maintenance-gray.png b/Client/src/assets/Images/Icon-maintenance-gray.png
new file mode 100644
index 000000000..c2c203d76
Binary files /dev/null and b/Client/src/assets/Images/Icon-maintenance-gray.png differ
diff --git a/Client/src/assets/Images/maintenance_window_frame.svg b/Client/src/assets/Images/maintenance_window_frame.svg
new file mode 100644
index 000000000..51fd317fe
--- /dev/null
+++ b/Client/src/assets/Images/maintenance_window_frame.svg
@@ -0,0 +1,9 @@
+
diff --git a/Client/src/assets/icons/lock.svg b/Client/src/assets/icons/lock.svg
new file mode 100644
index 000000000..38e8e1df0
--- /dev/null
+++ b/Client/src/assets/icons/lock.svg
@@ -0,0 +1,3 @@
+
diff --git a/Client/src/assets/icons/logout.svg b/Client/src/assets/icons/logout.svg
new file mode 100644
index 000000000..bf4183d73
--- /dev/null
+++ b/Client/src/assets/icons/logout.svg
@@ -0,0 +1,3 @@
+
diff --git a/Client/src/assets/icons/open-in-new-page.svg b/Client/src/assets/icons/open-in-new-page.svg
new file mode 100644
index 000000000..2bcb21c43
--- /dev/null
+++ b/Client/src/assets/icons/open-in-new-page.svg
@@ -0,0 +1,3 @@
+
diff --git a/Client/src/assets/icons/user-two.svg b/Client/src/assets/icons/user-two.svg
new file mode 100644
index 000000000..8e40622c3
--- /dev/null
+++ b/Client/src/assets/icons/user-two.svg
@@ -0,0 +1,3 @@
+
diff --git a/Client/src/assets/icons/user.svg b/Client/src/assets/icons/user.svg
new file mode 100644
index 000000000..51e0e7b11
--- /dev/null
+++ b/Client/src/assets/icons/user.svg
@@ -0,0 +1,3 @@
+
diff --git a/Client/vite.config.js b/Client/vite.config.js
index d697e594d..9a3ca3842 100644
--- a/Client/vite.config.js
+++ b/Client/vite.config.js
@@ -1,9 +1,10 @@
import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'
+import svgr from 'vite-plugin-svgr';
// https://vitejs.dev/config/
export default defineConfig({
- plugins: [react()],
+ plugins: [svgr(), react()],
optimizeDeps: {
include: ['@mui/material/Tooltip', '@emotion/styled'],
},
diff --git a/Server/controllers/authController.js b/Server/controllers/authController.js
index 0e05853b6..b64b7f764 100644
--- a/Server/controllers/authController.js
+++ b/Server/controllers/authController.js
@@ -7,6 +7,7 @@ const {
recoveryValidation,
recoveryTokenValidation,
newPasswordValidation,
+ deleteUserParamValidation,
} = require("../validation/joi");
const logger = require("../utils/logger");
require("dotenv").config();
@@ -58,6 +59,7 @@ const registerController = async (req, res, next) => {
const userForToken = { ...newUser._doc };
delete userForToken.profileImage;
+ delete userForToken.avatarImage;
const token = issueToken(userForToken);
@@ -261,6 +263,85 @@ const resetPasswordController = async (req, res, next) => {
next(error);
}
};
+
+/**
+ * Deletes a user and all associated monitors, checks, and alerts.
+ *
+ * @param {Object} req - The request object.
+ * @param {Object} res - The response object.
+ * @param {Function} next - The next middleware function.
+ * @returns {Object} The response object with success status and message.
+ * @throws {Error} If user validation fails or user is not found in the database.
+ */
+const deleteUserController = async (req, res, next) => {
+ try {
+ const token = req.headers.authorization.split(" ")[1];
+ const decodedToken = jwt.decode(token);
+ const { _id, email } = decodedToken;
+
+ const decodedTokenCastedAsRequest = {
+ params: {
+ userId: _id,
+ },
+ body: {
+ email,
+ },
+ };
+
+ // Validate user
+ await deleteUserParamValidation.validateAsync(
+ decodedTokenCastedAsRequest.body
+ );
+
+ // Check if the user exists
+ const user = await req.db.getUserByEmail(decodedTokenCastedAsRequest);
+ if (!user) {
+ throw new Error(errorMessages.DB_USER_NOT_FOUND);
+ }
+
+ // 1. Find all the monitors associated with the user id
+ const monitors = await req.db.getMonitorsByUserId(
+ decodedTokenCastedAsRequest
+ );
+
+ if (monitors) {
+ // 2. Delete jobs associated with each monitor
+ for (const monitor of monitors) {
+ await req.jobQueue.deleteJob(monitor);
+ }
+
+ // 3. Delete all checks associated with each monitor
+ for (const monitor of monitors) {
+ await req.db.deleteChecks(monitor._id);
+ }
+
+ // 4. Delete all alerts associated with each monitor
+ for (const monitor of monitors) {
+ await req.db.deleteAlertByMonitorId(monitor._id);
+ }
+
+ // 5. Delete each monitor
+ await req.db.deleteMonitorsByUserId(user._id);
+
+ // 6. Delete the user by id
+ await req.db.deleteUser(decodedTokenCastedAsRequest);
+
+ return res.status(200).json({
+ success: true,
+ msg: successMessages.AUTH_DELETE_USER,
+ });
+ } else {
+ return res.status(404).json({
+ success: false,
+ msg: errorMessages.MONITOR_GET_BY_USER_ID,
+ });
+ }
+ } catch (error) {
+ error.service = SERVICE_NAME;
+ next(error);
+ }
+};
+
module.exports = {
registerController,
loginController,
@@ -269,4 +350,5 @@ module.exports = {
recoveryRequestController,
validateRecoveryTokenController,
resetPasswordController,
+ deleteUserController,
};
diff --git a/Server/db/MongoDB.js b/Server/db/MongoDB.js
index 1d16a14d3..1f46b63a6 100644
--- a/Server/db/MongoDB.js
+++ b/Server/db/MongoDB.js
@@ -8,6 +8,7 @@ const crypto = require("crypto");
const DUPLICATE_KEY_CODE = 11000; // MongoDB error code for duplicate key
const { errorMessages, successMessages } = require("../utils/messages");
const { error } = require("console");
+const { GenerateAvatarImage } = require("../utils/imageProcessing");
const connect = async () => {
try {
await mongoose.connect(process.env.DB_CONNECTION_STRING);
@@ -33,12 +34,16 @@ const connect = async () => {
const insertUser = async (req, res) => {
try {
const userData = { ...req.body };
- console.log(req.file);
if (req.file) {
+ // 1. Save the full size image
userData.profileImage = {
data: req.file.buffer,
contentType: req.file.mimetype,
};
+
+ // 2. Get the avatar sized image
+ const avatar = await GenerateAvatarImage(req.file);
+ userData.avatarImage = avatar;
}
const newUser = new UserModel(userData);
await newUser.save();
@@ -96,10 +101,15 @@ const updateUser = async (req, res) => {
try {
const candidateUser = { ...req.body };
if (req.file) {
+ // 1. Save the full size image
candidateUser.profileImage = {
data: req.file.buffer,
contentType: req.file.mimetype,
};
+
+ // 2. Get the avaatar sized image
+ const avatar = await GenerateAvatarImage(req.file);
+ candidateUser.avatarImage = avatar;
}
const updatedUser = await UserModel.findByIdAndUpdate(
@@ -115,6 +125,27 @@ const updateUser = async (req, res) => {
}
};
+/**
+ * Delete a user by ID
+ * @async
+ * @param {Express.Request} req
+ * @param {Express.Response} res
+ * @returns {Promise