(option.name ? option.name : "")}
+ value={props.value}
+ onChange={props.onChange}
+ // Add isOptionEqualToValue prop
+ isOptionEqualToValue={(option, value) => option.name === value}
+ renderInput={(params) => }
+ />
+ );
};
// Define PropTypes for DropDown component
Dropdown.propTypes = {
- id: PropTypes.string.isRequired,
- label: PropTypes.string.isRequired,
- options: PropTypes.array.isRequired,
- onChange: PropTypes.func.isRequired,
- value: PropTypes.object.isRequired,
+ id: PropTypes.string.isRequired,
+ label: PropTypes.string.isRequired,
+ options: PropTypes.array.isRequired,
+ onChange: PropTypes.func.isRequired,
+ value: PropTypes.string.isRequired,
};
export default Dropdown;
diff --git a/Client/src/Components/HostsTable/index.jsx b/Client/src/Components/HostsTable/index.jsx
index 8e5af7164..bc1dc1ff9 100644
--- a/Client/src/Components/HostsTable/index.jsx
+++ b/Client/src/Components/HostsTable/index.jsx
@@ -1,7 +1,7 @@
-import BarChart from "../Charts/BarChart/BarChart";
import PropTypes from "prop-types";
import Host from "../Host/";
import HostStatus from "../HostStatus";
+import ResponseTimeChart from "../Charts/ResponseTimeChart";
/**
* HostsTable displays the current status of monitor
*
@@ -59,7 +59,7 @@ const HostsTable = ({ monitors }) => {
| {host} |
{status} |
-
+
|
{monitor.actions}
diff --git a/Client/src/Components/Label/index.jsx b/Client/src/Components/Label/index.jsx
index c47b53cb8..d6c6adbd5 100644
--- a/Client/src/Components/Label/index.jsx
+++ b/Client/src/Components/Label/index.jsx
@@ -124,7 +124,7 @@ ColoredLabel.propTypes = {
*
*/
-const StatusLabel = ({ status }) => {
+const StatusLabel = ({ status, customStyles }) => {
const theme = useTheme();
const colorLookup = {
@@ -132,13 +132,15 @@ const StatusLabel = ({ status }) => {
Waiting: theme.palette.labelRed.color,
New: theme.palette.labelOrange.color,
Active: theme.palette.labelGreen.color,
+ Down: theme.palette.error.main, // Assuming theme.palette.error.main is red
+
};
// Look up the color for the status, default to labelGray if not found
const color = colorLookup[status] || theme.palette.labelGray.color;
return (
-
+
{
};
StatusLabel.propTypes = {
- status: PropTypes.oneOf(["Seen", "Waiting", "New", "Active"]),
+ status: PropTypes.oneOf(["Seen", "Waiting", "New", "Active", "Down", "Cannot resolve"]),
+ customStyles: PropTypes.object,
};
export { ColoredLabel, StatusLabel };
diff --git a/Client/src/Components/NavBar/index.css b/Client/src/Components/NavBar/index.css
index b4a9a07ba..bebba5136 100644
--- a/Client/src/Components/NavBar/index.css
+++ b/Client/src/Components/NavBar/index.css
@@ -30,3 +30,9 @@
box-shadow: none;
background-color: transparent;
}
+
+#menu-appbar svg {
+ width: 16px;
+ height: 16px;
+ color: var(--env-var-color-25);
+}
diff --git a/Client/src/Components/NavBar/index.jsx b/Client/src/Components/NavBar/index.jsx
index c3ef60091..8e5fb8996 100644
--- a/Client/src/Components/NavBar/index.jsx
+++ b/Client/src/Components/NavBar/index.jsx
@@ -18,8 +18,18 @@ import { clearMonitorState } from "../../Features/Monitors/monitorsSlice";
import { useDispatch, useSelector } from "react-redux";
import { useNavigate } from "react-router-dom";
+import LockSvg from "../../assets/icons/lock.svg?react";
+import UserSvg from "../../assets/icons/user.svg?react";
+import TeamSvg from "../../assets/icons/user-two.svg?react";
+import LogoutSvg from "../../assets/icons/logout.svg?react";
-const settings = ["Profile", "Team", "Invite Colleagues", "Logout"];
+const settings = ["Profile", "Password", "Team", "Logout"];
+const icons = {
+ Profile: ,
+ Team: ,
+ Password: ,
+ Logout: ,
+};
/**
* NavBar component
@@ -66,13 +76,13 @@ function NavBar() {
setAnchorElUser(null);
switch (setting) {
case "Profile":
- console.log("Profile");
+ navigate("/account/profile");
break;
case "Team":
- console.log("Team");
+ navigate("/account/team");
break;
- case "Invite Colleagues":
- console.log("Invite Colleagues");
+ case "Password":
+ navigate("/account/password");
break;
case "Logout":
logout();
@@ -189,10 +199,13 @@ function NavBar() {
id="menu-item"
key={setting}
onClick={() => handleCloseUserMenu(setting)}
+ sx={{ width: "150px" }}
>
+ {icons[setting]}
{setting}
diff --git a/Client/src/Components/ProgressBars/index.css b/Client/src/Components/ProgressBars/index.css
new file mode 100644
index 000000000..8bd3fc966
--- /dev/null
+++ b/Client/src/Components/ProgressBars/index.css
@@ -0,0 +1,31 @@
+.progress-bar-container {
+ background-color: #fafafa;
+ padding: var(--env-var-spacing-1-plus);
+}
+.progress-bar-container h2.MuiTypography-root,
+.progress-bar-container p.MuiTypography-root {
+ color: var(--env-var-color-2);
+ font-size: var(--env-var-font-size-medium);
+}
+.progress-bar-container p.MuiTypography-root {
+ opacity: 0.6;
+}
+.progress-bar-container p.MuiTypography-root:has(span) {
+ font-size: 12px;
+}
+.progress-bar-container p.MuiTypography-root span {
+ padding-left: 2px;
+}
+.progress-bar-container:has(p.input-error){
+ border-color: var(--env-var-color-24);
+ padding: 8px var(--env-var-spacing-1-plus);
+}
+.progress-bar-container p.input-error{
+ color: var(--env-var-color-24);
+ opacity: 0.8;
+}
+.progress-bar-container:has(p.input-error)>.MuiStack-root>svg{
+ fill: var(--env-var-color-24);
+ width: 20px;
+ height: 20px;
+}
diff --git a/Client/src/Components/ProgressBars/index.jsx b/Client/src/Components/ProgressBars/index.jsx
new file mode 100644
index 000000000..2d60683ef
--- /dev/null
+++ b/Client/src/Components/ProgressBars/index.jsx
@@ -0,0 +1,143 @@
+import React from "react";
+import { useTheme } from "@emotion/react";
+import PropTypes from "prop-types";
+import {
+ Box,
+ IconButton,
+ LinearProgress,
+ Stack,
+ Typography,
+} from "@mui/material";
+import CloseIcon from "@mui/icons-material/Close";
+import ErrorOutlineOutlinedIcon from "@mui/icons-material/ErrorOutlineOutlined";
+import "./index.css";
+
+/**
+ * @param {Object} props - The component props.
+ * @param {JSX.Element} props.icon - The icon element to display (optional).
+ * @param {string} props.label - The label text for the progress item.
+ * @param {string} props.size - The size information for the progress item.
+ * @param {number} props.progress - The current progress value (0-100).
+ * @param {function} props.onClick - The function to handle click events on the remove button.
+ * @param {string} props.error - Error message to display if there's an error (optional).
+ * @returns {JSX.Element} The rendered component.
+ */
+
+const ProgressUpload = ({
+ icon,
+ label,
+ size,
+ progress = 0,
+ onClick,
+ error,
+}) => {
+ const theme = useTheme();
+ return (
+
+
+ {error ? (
+
+ ) : icon ? (
+
+ {icon}
+
+ ) : (
+ ""
+ )}
+ {error ? (
+
+ {error}
+
+ ) : (
+
+
+ {error ? error : label}
+
+ {!error && size}
+
+ )}
+
+
+
+
+ {!error ? (
+
+
+
+
+
+ {progress}
+ %
+
+
+ ) : (
+ ""
+ )}
+
+ );
+};
+
+ProgressUpload.propTypes = {
+ icon: PropTypes.element, // JSX element for the icon (optional)
+ label: PropTypes.string.isRequired, // Label text for the progress item
+ size: PropTypes.string.isRequired, // Size information for the progress item
+ progress: PropTypes.number.isRequired, // Current progress value (0-100)
+ onClick: PropTypes.func.isRequired, // Function to handle click events on the remove button
+ error: PropTypes.string, // Error message to display if there's an error (optional)
+};
+
+export default ProgressUpload;
diff --git a/Client/src/Components/RadioButton/index.css b/Client/src/Components/RadioButton/index.css
new file mode 100644
index 000000000..dab37dda0
--- /dev/null
+++ b/Client/src/Components/RadioButton/index.css
@@ -0,0 +1,16 @@
+.create-monitor-form .custom-radio-button.MuiFormControlLabel-root {
+ padding: 5px;
+ margin: -5px;
+ border-radius: var(--env-var-radius-1);
+}
+.create-monitor-form .custom-radio-button.MuiFormControlLabel-root:hover {
+ background-color: var(--env-var-color-13);
+}
+.create-monitor-form .custom-radio-button.MuiFormControlLabel-root svg{
+ stroke-width: 0;
+}
+
+.custom-radio-button.MuiFormControlLabel-root .MuiButtonBase-root {
+ margin-right: var(--env-var-spacing-1);
+ padding: 0;
+}
diff --git a/Client/src/Components/RadioButton/index.jsx b/Client/src/Components/RadioButton/index.jsx
index 038871647..acc87c992 100644
--- a/Client/src/Components/RadioButton/index.jsx
+++ b/Client/src/Components/RadioButton/index.jsx
@@ -11,31 +11,44 @@
* />
*
* @param {Object} props - The component props.
+ * @param {string} props.id - The id of the radio button.
* @param {string} props.title - The title of the radio button.
* @param {string} [props.desc] - The description of the radio button.
* @param {string} [props.size="small"] - The size of the radio button.
* @returns {JSX.Element} - The rendered RadioButton component.
*/
-import { FormControlLabel, Radio } from "@mui/material";
-import React from "react";
import PropTypes from "prop-types";
+import { FormControlLabel, Radio, Typography } from "@mui/material";
+import { useTheme } from "@emotion/react";
+import "./index.css";
function RadioButton(props) {
+ const theme = useTheme();
return (
-
- }
- label={
-
- {props.title}
- {props.desc}
-
- }
- labelPlacement="end"
- />
- |