From ca689d4de84460c88ba0fd0ea2bff85493815052 Mon Sep 17 00:00:00 2001 From: MuhammadKhalilzadeh Date: Tue, 25 Jun 2024 13:22:28 +0330 Subject: [PATCH 1/4] Create new monitor without dropdowns --- Client/src/Components/Checkbox/Checkbox.css | 16 ++ .../Checkbox/CustomizableCheckbox.jsx | 24 +++ Client/src/Components/Dropdown/index.jsx | 41 ++-- Client/src/Components/RadioButton/index.jsx | 8 +- .../Flexibile/FlexibileTextField.jsx | 4 +- .../src/Pages/Monitors/CreateNewMonitor.jsx | 202 +++++++++++++++++- Client/src/Pages/Monitors/index.css | 38 ++++ Client/src/Pages/Monitors/index.jsx | 8 +- Client/src/index.css | 1 + 9 files changed, 308 insertions(+), 34 deletions(-) create mode 100644 Client/src/Components/Checkbox/CustomizableCheckbox.jsx diff --git a/Client/src/Components/Checkbox/Checkbox.css b/Client/src/Components/Checkbox/Checkbox.css index 36a9a43be..27c6310cc 100644 --- a/Client/src/Components/Checkbox/Checkbox.css +++ b/Client/src/Components/Checkbox/Checkbox.css @@ -12,6 +12,14 @@ cursor: pointer; } +.custom-checkbox { + width: var(--env-var-img-width-1); + height: var(--env-var-img-width-1); + margin: 0; + padding: 0; + cursor: pointer; +} + .checkbox-label { margin-left: 5px; font-size: var(--env-var-font-size-medium); @@ -19,3 +27,11 @@ font-weight: 600; cursor: pointer; } + +.custom-checkbox-label { + margin-left: var(--env-var-font-size-large); + font-size: var(--env-var-font-size-medium); + color: var(--env-var-color-5); + font-weight: 500; + cursor: pointer; +} diff --git a/Client/src/Components/Checkbox/CustomizableCheckbox.jsx b/Client/src/Components/Checkbox/CustomizableCheckbox.jsx new file mode 100644 index 000000000..807562f26 --- /dev/null +++ b/Client/src/Components/Checkbox/CustomizableCheckbox.jsx @@ -0,0 +1,24 @@ +import React from "react"; +import "./Checkbox.css"; +import PropsTypes from "prop-types"; + +const CustomizableCheckbox = (props) => { + return ( +
+ + +
+ ); +}; + +CustomizableCheckbox.propsTypes = { + title: PropsTypes.string.isRequired, +}; + +export default CustomizableCheckbox; diff --git a/Client/src/Components/Dropdown/index.jsx b/Client/src/Components/Dropdown/index.jsx index f21623a08..2ee52ff74 100644 --- a/Client/src/Components/Dropdown/index.jsx +++ b/Client/src/Components/Dropdown/index.jsx @@ -1,28 +1,29 @@ -import PropTypes from 'prop-types'; +import PropTypes from "prop-types"; +import Autocomplete from "@mui/material/Autocomplete"; +import TextField from "@mui/material/TextField"; -import Autocomplete from '@mui/material/Autocomplete'; -import TextField from '@mui/material/TextField'; - -const Dropdown = ({ id, label, options, onChange, value }) => { - return ( - option.name} - value={value} - onChange={onChange} - renderInput={(params) => } - /> - ); +const Dropdown = (props) => { + return ( + (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/RadioButton/index.jsx b/Client/src/Components/RadioButton/index.jsx index 038871647..782035249 100644 --- a/Client/src/Components/RadioButton/index.jsx +++ b/Client/src/Components/RadioButton/index.jsx @@ -25,8 +25,10 @@ function RadioButton(props) { return (
} + onChange={props.onChange} label={
{props.title}
@@ -45,8 +47,4 @@ RadioButton.propTypes = { size: PropTypes.string, }; -RadioButton.defaultProps = { - size: "small", -}; - export default RadioButton; diff --git a/Client/src/Components/TextFields/Flexibile/FlexibileTextField.jsx b/Client/src/Components/TextFields/Flexibile/FlexibileTextField.jsx index b59ecea2b..f7b05ab12 100644 --- a/Client/src/Components/TextFields/Flexibile/FlexibileTextField.jsx +++ b/Client/src/Components/TextFields/Flexibile/FlexibileTextField.jsx @@ -1,7 +1,7 @@ import "./flexibileTextField.css"; import React from "react"; -const FlexibileTextField = ({ title, type, placeholder }) => { +const FlexibileTextField = ({ title, type, placeholder, value, onChange }) => { return (
{title}
@@ -9,6 +9,8 @@ const FlexibileTextField = ({ title, type, placeholder }) => { type={type} className="flexibile-textfield-input" placeholder={placeholder} + value={value} + onChange={onChange} />
); diff --git a/Client/src/Pages/Monitors/CreateNewMonitor.jsx b/Client/src/Pages/Monitors/CreateNewMonitor.jsx index 1c927ffdf..132bdc6eb 100644 --- a/Client/src/Pages/Monitors/CreateNewMonitor.jsx +++ b/Client/src/Pages/Monitors/CreateNewMonitor.jsx @@ -1,14 +1,101 @@ +import "./index.css"; import ConfigBox from "../../Components/ConfigBox"; import FlexibileTextField from "../../Components/TextFields/Flexibile/FlexibileTextField"; -import "./index.css"; -import React from "react"; +import React, { useState } from "react"; import RadioButton from "../../Components/RadioButton"; +import Dropdown from "../../Components/Dropdown"; +import CustomizableCheckBox from "../../Components/Checkbox/CustomizableCheckbox"; +import Button from "../../Components/Button"; const CreateNewMonitor = () => { + const [incidentEmail, setIncidentEmail] = useState(""); + + const [notifyViaSMS, setNotifyViaSMS] = useState(false); + const [notifyViaEmail, setNotifyViaEmail] = useState(false); + const [notifyViaCurrentEmail, setNotifyViaCurrentEmail] = useState(false); + + const [maxRetries, setMaxRetries] = useState(0); + const [acceptCode, setAcceptCode] = useState(0); + const [maxRedirects, setMaxRedirects] = useState(0); + + const [proxy, setProxy] = useState(false); + + const [proxyAddress, setProxyAddress] = useState(""); + const [proxyPort, setProxyPort] = useState(""); + + const [selectedMonitorType, setSelectedMonitorType] = useState(""); + + const [urlToMonitor, setUrlToMonitor] = useState(""); + const [friendlyName, setFriendlyName] = useState(""); + + const handleUrlToMonitor = (event) => { + setUrlToMonitor(event.target.value); + console.log(urlToMonitor); + }; + + const handleFriendlyName = (event) => { + setFriendlyName(event.target.value); + console.log(friendlyName); + }; + + const handleIncidentEmail = (event) => { + setIncidentEmail(event.target.value); + console.log(incidentEmail); + }; + + const handleNotifyViaSMS = (event) => { + setNotifyViaSMS(event.target.checked); + }; + + const handleNotifyViaEmail = (event) => { + setNotifyViaEmail(event.target.checked); + }; + + const handleNotifyViaCurrentEmail = (event) => { + setNotifyViaCurrentEmail(event.target.checked); + }; + + const handleSetMaxRetries = (event) => { + setMaxRetries(event.target.value); + console.log(maxRetries); + }; + + const handleSetAcceptCode = (event) => { + setAcceptCode(event.target.value); + console.log(acceptCode); + }; + + const handleSetMaxRedirects = (event) => { + setMaxRedirects(event.target.value); + console.log(maxRedirects); + }; + + const handleEnableProxy = (event) => { + setProxy(event.target.value); + console.log(proxy); + }; + + const handleproxyAddress = (event) => { + setProxyAddress(event.target.value); + console.log(proxyAddress); + }; + + const handleproxyPort = (event) => { + setProxyPort(event.target.value); + console.log(proxyPort); + }; + + const handleMonitorTypeChange = (value) => { + setSelectedMonitorType(value); + console.log(value); + }; + + const handleCreateNewMonitor = () => { + console.log("Created"); + }; + return (
-
-
Create new monitor
{ title="URL to monitor" type="url" placeholder="https://google.com" + onChange={handleUrlToMonitor} />
} @@ -53,18 +142,30 @@ const CreateNewMonitor = () => { handleMonitorTypeChange("http")} />
handleMonitorTypeChange("ping")} />
handleMonitorTypeChange("port")} />
+
+ +
} /> @@ -79,6 +180,42 @@ const CreateNewMonitor = () => {
} + rightLayout={ +
+
+ When there is a new incident, +
+
+
+ +
+ +
+ +
+
+ +
+
+
+ } />
@@ -88,6 +225,35 @@ const CreateNewMonitor = () => {
Advanced settings
} + rightLayout={ +
+
Check frequency
+ +
+
+ Maximum retries before the service is marked as down +
+ +
+
Accepted status codes
+ +
+
Maximum redirects
+ +
+ } />
@@ -97,7 +263,35 @@ const CreateNewMonitor = () => {
Proxy settings
} + rightLayout={ +
+ +
+
Proxy protocol
+ +
+
Proxy address
+ +
+
Proxy port
+ +
+ } /> +
+
+
+
); }; diff --git a/Client/src/Pages/Monitors/index.css b/Client/src/Pages/Monitors/index.css index 7e33a4e68..099f6e151 100644 --- a/Client/src/Pages/Monitors/index.css +++ b/Client/src/Pages/Monitors/index.css @@ -24,6 +24,10 @@ height: var(--env-var-spacing-2); } +.monitors-gaps-small-plus { + height: var(--env-var-spacing-1-plus); +} + .new-monitor-header { color: var(--env-var-color-1); font-size: var(--env-var-font-size-large-plus); @@ -43,3 +47,37 @@ .host-status-box-text { font-size: var(--env-var-font-size-medium); } + +.monitors-dropdown-holder { + padding-left: 30px; +} + +#ports-list { + width: 172.92px; + height: 12px; + font-size: var(--env-var-font-size-small); + align-items: center; +} + +.incident-notif-config-title, +.adv-setting-title { + color: var(--env-var-color-5); + font-size: var(--env-var-font-size-medium); +} + +.adv-setting-title { + font-weight: 500; +} + +.config-box-inputs, +.service-check-list, +.incident-notif-config, +.advanced-setting-config, +.proxy-setting-config { + padding-right: 40px; +} + +.monitors-create-button-holder { + display: flex; + justify-content: end; +} diff --git a/Client/src/Pages/Monitors/index.jsx b/Client/src/Pages/Monitors/index.jsx index a1dd61f0c..fbc0413d0 100644 --- a/Client/src/Pages/Monitors/index.jsx +++ b/Client/src/Pages/Monitors/index.jsx @@ -1,13 +1,13 @@ -// import CreateNewMonitor from "./CreateNewMonitor"; -import CurrentStats from "./CurrentStats"; +import CreateNewMonitor from "./CreateNewMonitor"; +// import CurrentStats from "./CurrentStats"; import "./index.css"; import React from "react"; const Monitors = () => { return (
- - {/* */} + {/* */} +
); }; diff --git a/Client/src/index.css b/Client/src/index.css index e682b2a09..658d513ab 100644 --- a/Client/src/index.css +++ b/Client/src/index.css @@ -56,6 +56,7 @@ --env-var-height-1: 100vh; --env-var-spacing-1: 12px; + --env-var-spacing-1-plus: 16px; --env-var-spacing-2: 24px; --env-var-spacing-3: 32px; --env-var-spacing-4: 40px; From 4eab458065ef11d8c36b5169e00c4722e8ce5fe7 Mon Sep 17 00:00:00 2001 From: MuhammadKhalilzadeh Date: Tue, 25 Jun 2024 13:30:52 +0330 Subject: [PATCH 2/4] Create new monitor without dropdowns --- Client/src/Pages/Monitors/index.jsx | 16 ++++++++++++++-- 1 file changed, 14 insertions(+), 2 deletions(-) diff --git a/Client/src/Pages/Monitors/index.jsx b/Client/src/Pages/Monitors/index.jsx index fbc0413d0..ff8937af3 100644 --- a/Client/src/Pages/Monitors/index.jsx +++ b/Client/src/Pages/Monitors/index.jsx @@ -1,13 +1,25 @@ import CreateNewMonitor from "./CreateNewMonitor"; -// import CurrentStats from "./CurrentStats"; +import CurrentStats from "./CurrentStats"; import "./index.css"; import React from "react"; +import { useEffect } from "react"; +import { useSelector } from "react-redux"; +import { useDispatch } from "react-redux"; +import { getMonitorsByUserId } from "../../Features/Monitors/monitorsSlice"; const Monitors = () => { + const monitorState = useSelector((state) => state.monitors); + const authstate = useSelector((state) => state.auth); + const dispatch = useDispatch(); + + useEffect(() => { + dispatch(getMonitorsByUserId(authstate.authToken)); + }, []); + return (
- {/* */} + {/* */}
); }; From fb2706caed3616577ba832268354ce75eee44d4c Mon Sep 17 00:00:00 2001 From: MuhammadKhalilzadeh Date: Tue, 25 Jun 2024 13:33:06 +0330 Subject: [PATCH 3/4] Create new monitor without dropdowns --- Client/src/Pages/Monitors/index.jsx | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/Client/src/Pages/Monitors/index.jsx b/Client/src/Pages/Monitors/index.jsx index ff8937af3..60daea820 100644 --- a/Client/src/Pages/Monitors/index.jsx +++ b/Client/src/Pages/Monitors/index.jsx @@ -1,7 +1,6 @@ import CreateNewMonitor from "./CreateNewMonitor"; import CurrentStats from "./CurrentStats"; import "./index.css"; -import React from "react"; import { useEffect } from "react"; import { useSelector } from "react-redux"; import { useDispatch } from "react-redux"; @@ -19,7 +18,7 @@ const Monitors = () => { return (
- {/* */} +
); }; From 9f06a0abdaf12249e5eebc380dd5a49429432d6c Mon Sep 17 00:00:00 2001 From: MuhammadKhalilzadeh Date: Tue, 25 Jun 2024 13:34:19 +0330 Subject: [PATCH 4/4] Create new monitor without dropdowns --- Client/src/Pages/Monitors/index.jsx | 1 - 1 file changed, 1 deletion(-) diff --git a/Client/src/Pages/Monitors/index.jsx b/Client/src/Pages/Monitors/index.jsx index 60daea820..883b9a553 100644 --- a/Client/src/Pages/Monitors/index.jsx +++ b/Client/src/Pages/Monitors/index.jsx @@ -17,7 +17,6 @@ const Monitors = () => { return (
-
);