Merge pull request #190 from MuhammadKhalilzadeh/monitors

Create new monitor without dropdowns

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;
+}

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 (
+    <div className="checkbox-holder">
+      <input
+        checked={props.isChecked}
+        onChange={props.handleChange}
+        className="custom-checkbox"
+        type="checkbox"
+        id="checkbox"
+      />
+      <label className="custom-checkbox-label">{props.title}</label>
+    </div>
+  );
+};
+
+CustomizableCheckbox.propsTypes = {
+  title: PropsTypes.string.isRequired,
+};
+
+export default CustomizableCheckbox;

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 (
-        <Autocomplete
-            id={id}
-            options={options}
-            getOptionLabel={(option) => option.name}
-            value={value}
-            onChange={onChange}
-            renderInput={(params) => <TextField {...params} label={label} />}
-        />
-    );
+const Dropdown = (props) => {
+  return (
+    <Autocomplete
+      id={props.id}
+      options={props.options}
+      getOptionLabel={(option) => (option.name ? option.name : "")}
+      value={props.value}
+      onChange={props.onChange}
+      // Add isOptionEqualToValue prop
+      isOptionEqualToValue={(option, value) => option.name === value}
+      renderInput={(params) => <TextField {...params} label={props.label} />}
+    />
+  );
 };
 
 // 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;

Client/src/Components/RadioButton/index.jsx

@@ -25,8 +25,10 @@ function RadioButton(props) {
   return (
     <div className="custom-radio-button">
       <FormControlLabel
-        value="check"
+        checked={props.checked}
+        value={props.value}
         control={<Radio size={props.size} />}
+        onChange={props.onChange}
         label={
           <div>
             <div className="service-check-list-title">{props.title}</div>
@@ -45,8 +47,4 @@ RadioButton.propTypes = {
   size: PropTypes.string,
 };
 
-RadioButton.defaultProps = {
-  size: "small",
-};
-
 export default RadioButton;

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 (
     <div className="flexibile-textfield">
       <div className="flexibile-textfield-title">{title}</div>
@@ -9,6 +9,8 @@ const FlexibileTextField = ({ title, type, placeholder }) => {
         type={type}
         className="flexibile-textfield-input"
         placeholder={placeholder}
+        value={value}
+        onChange={onChange}
       />
     </div>
   );

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 (
     <div>
-      <div className="monitors-gaps-medium"></div>
-      <div className="monitors-gaps-medium"></div>
       <div className="new-monitor-header">Create new monitor</div>
       <div className="monitors-gaps-medium"></div>
       <ConfigBox
@@ -27,12 +114,14 @@ const CreateNewMonitor = () => {
               title="URL to monitor"
               type="url"
               placeholder="https://google.com"
+              onChange={handleUrlToMonitor}
             />
             <div className="monitors-gaps-medium"></div>
             <FlexibileTextField
               title="Friendly name (optional)"
               type="text"
               placeholder="Google"
+              onChange={handleFriendlyName}
             />
           </div>
         }
@@ -53,18 +142,30 @@ const CreateNewMonitor = () => {
             <RadioButton
               title="HTTP/website monitoring"
               desc="Use HTTP(s) to monitor your website or API endpoint."
+              value="http"
+              checked={selectedMonitorType === "http"}
+              onChange={() => handleMonitorTypeChange("http")}
             />
             <div className="monitors-gaps-medium"></div>
             <RadioButton
               title="Ping monitoring"
               desc="Check whether your server is available or not."
+              value="ping"
+              checked={selectedMonitorType === "ping"}
+              onChange={() => handleMonitorTypeChange("ping")}
             />
             <div className="monitors-gaps-medium"></div>
             <RadioButton
               title="Port monitoring"
               desc="Monitor a specific service on your server."
+              value="port"
+              checked={selectedMonitorType === "port"}
+              onChange={() => handleMonitorTypeChange("port")}
             />
             <div className="monitors-gaps-medium"></div>
+            <div className="monitors-dropdown-holder">
+              <FlexibileTextField placeholder="Select a port to check" />
+            </div>
           </div>
         }
       />
@@ -79,6 +180,42 @@ const CreateNewMonitor = () => {
             </div>
           </div>
         }
+        rightLayout={
+          <div className="incident-notif-config">
+            <div className="incident-notif-config-title">
+              When there is a new incident,
+            </div>
+            <div className="monitors-gaps-medium"></div>
+            <div className="incident-notif-config-checks">
+              <CustomizableCheckBox
+                isChecked={notifyViaSMS}
+                handleChange={handleNotifyViaSMS}
+                title="Notify via SMS (to be implemented)"
+              />
+              <div className="monitors-gaps-medium"></div>
+              <CustomizableCheckBox
+                isChecked={notifyViaEmail}
+                handleChange={handleNotifyViaEmail}
+                title="Notify via email (to current email address)"
+              />
+              <div className="monitors-gaps-medium"></div>
+              <CustomizableCheckBox
+                isChecked={notifyViaCurrentEmail}
+                handleChange={handleNotifyViaCurrentEmail}
+                title="Notify via email (to another email address below)"
+              />
+              <div className="monitors-gaps-small-plus"></div>
+              <div className="monitors-dropdown-holder">
+                <FlexibileTextField
+                  placeholder="notifications@gmail.com"
+                  type="email"
+                  value={incidentEmail}
+                  onChange={handleIncidentEmail}
+                />
+              </div>
+            </div>
+          </div>
+        }
       />
       <div className="monitors-gaps-medium"></div>
       <div className="monitors-gaps-medium"></div>
@@ -88,6 +225,35 @@ const CreateNewMonitor = () => {
             <div className="config-box-desc-title">Advanced settings</div>
           </div>
         }
+        rightLayout={
+          <div className="advanced-setting-config">
+            <div className="adv-setting-title">Check frequency</div>
+            <FlexibileTextField />
+            <div className="monitors-gaps-medium"></div>
+            <div className="adv-setting-title">
+              Maximum retries before the service is marked as down
+            </div>
+            <FlexibileTextField
+              onChange={handleSetMaxRetries}
+              type="number"
+              placeholder=""
+            />
+            <div className="monitors-gaps-medium"></div>
+            <div className="adv-setting-title">Accepted status codes</div>
+            <FlexibileTextField
+              onChange={handleSetAcceptCode}
+              type="number"
+              placeholder=""
+            />
+            <div className="monitors-gaps-medium"></div>
+            <div className="adv-setting-title">Maximum redirects</div>
+            <FlexibileTextField
+              onChange={handleSetMaxRedirects}
+              type="number"
+              placeholder=""
+            />
+          </div>
+        }
       />
       <div className="monitors-gaps-medium"></div>
       <div className="monitors-gaps-medium"></div>
@@ -97,7 +263,35 @@ const CreateNewMonitor = () => {
             <div className="config-box-desc-title">Proxy settings</div>
           </div>
         }
+        rightLayout={
+          <div className="proxy-setting-config">
+            <CustomizableCheckBox
+              isChecked={proxy}
+              handleChange={handleEnableProxy}
+              title="Enable proxy"
+            />
+            <div className="monitors-gaps-medium"></div>
+            <div className="adv-setting-title">Proxy protocol</div>
+            <FlexibileTextField />
+            <div className="monitors-gaps-medium"></div>
+            <div className="adv-setting-title">Proxy address</div>
+            <FlexibileTextField onChange={handleproxyAddress} />
+            <div className="monitors-gaps-medium"></div>
+            <div className="adv-setting-title">Proxy port</div>
+            <FlexibileTextField onChange={handleproxyPort} />
+          </div>
+        }
       />
+      <div className="monitors-gaps-medium"></div>
+      <div className="monitors-gaps-small"></div>
+      <div className="monitors-create-button-holder">
+        <Button
+          level="primary"
+          label="Create new monitor"
+          sx={{ width: "210px", fontSize: "var(--env-var-font-size-medium)" }}
+          onClick={() => handleCreateNewMonitor()}
+        />
+      </div>
     </div>
   );
 };

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;
+}

Client/src/Pages/Monitors/index.jsx

@@ -1,4 +1,4 @@
-// import CreateNewMonitor from "./CreateNewMonitor";
+import CreateNewMonitor from "./CreateNewMonitor";
 import CurrentStats from "./CurrentStats";
 import "./index.css";
 import { useEffect } from "react";

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;