From 5c561d87ce711a8774b86618e08d333f99408a86 Mon Sep 17 00:00:00 2001
From: Alex Holliday <ajhollid@gmail.com>
Date: Mon, 19 Aug 2024 14:20:55 -0700
Subject: [PATCH 1/2] implement basic logger, replace console.log statements
 with logger methods

---
 .../TabPanels/Account/ProfilePanel.jsx        |  3 ++-
 Client/src/HOC/withAdminCheck.jsx             |  3 ++-
 Client/src/Pages/Auth/Login.jsx               |  4 ++--
 Client/src/Pages/Auth/Register/Register.jsx   |  4 ++--
 .../Pages/Incidents/IncidentTable/index.jsx   |  4 ++--
 Client/src/Pages/Monitors/Configure/index.jsx |  9 ++++----
 .../Pages/Monitors/CreateMonitor/index.jsx    |  7 +++---
 .../Details/PaginationTable/index.jsx         |  3 ++-
 Client/src/Pages/Monitors/Details/index.jsx   |  3 ++-
 Client/src/Pages/Monitors/index.jsx           |  2 +-
 Client/src/Pages/NotFound/index.jsx           |  1 -
 .../src/Pages/PageSpeed/Configure/index.jsx   |  5 +++--
 .../Pages/PageSpeed/CreatePageSpeed/index.jsx |  3 ++-
 Client/src/Pages/PageSpeed/Details/index.jsx  |  3 ++-
 Client/src/Pages/Settings/index.jsx           |  8 +++----
 Client/src/Utils/Logger.js                    | 22 +++++++++++++++++++
 16 files changed, 57 insertions(+), 27 deletions(-)
 create mode 100644 Client/src/Utils/Logger.js

diff --git a/Client/src/Components/TabPanels/Account/ProfilePanel.jsx b/Client/src/Components/TabPanels/Account/ProfilePanel.jsx
index 355b09ca6..398c10c54 100644
--- a/Client/src/Components/TabPanels/Account/ProfilePanel.jsx
+++ b/Client/src/Components/TabPanels/Account/ProfilePanel.jsx
@@ -19,6 +19,7 @@ import ProgressUpload from "../../ProgressBars";
 import { formatBytes } from "../../../Utils/fileUtils";
 import { clearUptimeMonitorState } from "../../../Features/UptimeMonitors/uptimeMonitorsSlice";
 import { createToast } from "../../../Utils/toastUtils";
+import { logger } from "../../../Utils/Logger";
 
 /**
  * ProfilePanel component displays a form for editing user profile information
@@ -256,7 +257,7 @@ const ProfilePanel = () => {
             placeholder="Enter your email"
             autoComplete="email"
             // TODO - add onChange
-            onChange={() => console.log("Disabled.")}
+            onChange={() => logger.warn("disabled")}
             // error={errors[idToName["edit-email"]]}
             disabled={true}
           />
diff --git a/Client/src/HOC/withAdminCheck.jsx b/Client/src/HOC/withAdminCheck.jsx
index 23ee5dc1f..6c5087926 100644
--- a/Client/src/HOC/withAdminCheck.jsx
+++ b/Client/src/HOC/withAdminCheck.jsx
@@ -1,6 +1,7 @@
 import React, { useEffect } from "react";
 import { useNavigate } from "react-router-dom";
 import axiosInstance from "../Utils/axiosConfig";
+import { logger } from "../Utils/Logger";
 
 const withAdminCheck = (WrappedComponent) => {
   const WithAdminCheck = (props) => {
@@ -15,7 +16,7 @@ const withAdminCheck = (WrappedComponent) => {
           }
         })
         .catch((error) => {
-          console.log(error);
+          logger.error(error);
         });
     }, [navigate]);
     return <WrappedComponent {...props} isAdmin={true} />;
diff --git a/Client/src/Pages/Auth/Login.jsx b/Client/src/Pages/Auth/Login.jsx
index a928347b0..d5757e0cd 100644
--- a/Client/src/Pages/Auth/Login.jsx
+++ b/Client/src/Pages/Auth/Login.jsx
@@ -14,7 +14,7 @@ import Logo from "../../assets/icons/bwu-icon.svg?react";
 import Mail from "../../assets/icons/mail.svg?react";
 import ArrowBackRoundedIcon from "@mui/icons-material/ArrowBackRounded";
 import PropTypes from "prop-types";
-
+import { logger } from "../../Utils/Logger";
 import "./index.css";
 
 /**
@@ -284,7 +284,7 @@ const Login = () => {
         }
       })
       .catch((error) => {
-        console.log(error);
+        logger.error(error);
       });
   }, [authToken, navigate]);
 
diff --git a/Client/src/Pages/Auth/Register/Register.jsx b/Client/src/Pages/Auth/Register/Register.jsx
index 30b439f16..10e81c176 100644
--- a/Client/src/Pages/Auth/Register/Register.jsx
+++ b/Client/src/Pages/Auth/Register/Register.jsx
@@ -17,6 +17,7 @@ import Button from "../../../Components/Button";
 import Field from "../../../Components/Inputs/Field";
 import axiosInstance from "../../../Utils/axiosConfig";
 import "../index.css";
+import { logger } from "../../../Utils/Logger";
 
 /**
  * Displays the initial landing page.
@@ -401,10 +402,9 @@ const Register = ({ isAdmin }) => {
             token,
           });
           const { role, email } = res.data.data;
-          console.log(role);
           setForm({ ...form, email, role });
         } catch (error) {
-          console.log(error);
+          logger.error(error);
         }
       }
     };
diff --git a/Client/src/Pages/Incidents/IncidentTable/index.jsx b/Client/src/Pages/Incidents/IncidentTable/index.jsx
index 44a30decc..473062bbc 100644
--- a/Client/src/Pages/Incidents/IncidentTable/index.jsx
+++ b/Client/src/Pages/Incidents/IncidentTable/index.jsx
@@ -20,6 +20,7 @@ import { useState, useEffect } from "react";
 import { useSelector } from "react-redux";
 import axiosInstance from "../../../Utils/axiosConfig";
 import { StatusLabel } from "../../../Components/Label";
+import { logger } from "../../../Utils/Logger";
 
 const IncidentTable = ({ monitors, selectedMonitor, filter }) => {
   const { authToken, user } = useSelector((state) => state.auth);
@@ -57,7 +58,7 @@ const IncidentTable = ({ monitors, selectedMonitor, filter }) => {
         setChecks(res.data.data.checks);
         setChecksCount(res.data.data.checksCount);
       } catch (error) {
-        console.log(error);
+        logger.error(error);
       }
     };
     fetchPage();
@@ -72,7 +73,6 @@ const IncidentTable = ({ monitors, selectedMonitor, filter }) => {
   ]);
 
   const handlePageChange = (_, newPage) => {
-    console.log(newPage);
     setPaginationController({
       ...paginationController,
       page: newPage - 1, // 0-indexed
diff --git a/Client/src/Pages/Monitors/Configure/index.jsx b/Client/src/Pages/Monitors/Configure/index.jsx
index c873482a9..86ea62960 100644
--- a/Client/src/Pages/Monitors/Configure/index.jsx
+++ b/Client/src/Pages/Monitors/Configure/index.jsx
@@ -19,6 +19,7 @@ import {
 import Checkbox from "../../../Components/Inputs/Checkbox";
 import Breadcrumbs from "../../../Components/Breadcrumbs";
 import "./index.css";
+import { logger } from "../../../Utils/Logger";
 
 /**
  * Parses a URL string and returns a URL object.
@@ -108,7 +109,7 @@ const Configure = () => {
   useEffect(() => {
     const data = monitors.find((monitor) => monitor._id === monitorId);
     if (!data) {
-      console.error("Error fetching monitor of id: " + monitorId);
+      logger.error("Error fetching monitor of id: " + monitorId);
       navigate("/not-found");
     }
     setMonitor({
@@ -337,7 +338,7 @@ const Configure = () => {
                   label="Notify via SMS (coming soon)"
                   isChecked={false}
                   value=""
-                  onChange={() => console.log("disabled")}
+                  onChange={() => logger.warn("disabled")}
                   isDisabled={true}
                 />
                 <Checkbox
@@ -356,7 +357,7 @@ const Configure = () => {
                   label="Also notify via email to multiple addresses (coming soon)"
                   isChecked={false}
                   value=""
-                  onChange={() => console.log("disabled")}
+                  onChange={() => logger.warn("disabled")}
                   isDisabled={true}
                 />
                 {monitor?.notifications?.some(
@@ -368,7 +369,7 @@ const Configure = () => {
                       type="text"
                       placeholder="name@gmail.com"
                       value=""
-                      onChange={() => console.log("disabled")}
+                      onChange={() => logger.warn("disabled")}
                     />
                     <Typography mt={theme.gap.small}>
                       You can separate multiple emails with a comma
diff --git a/Client/src/Pages/Monitors/CreateMonitor/index.jsx b/Client/src/Pages/Monitors/CreateMonitor/index.jsx
index d0eafb476..442558f8e 100644
--- a/Client/src/Pages/Monitors/CreateMonitor/index.jsx
+++ b/Client/src/Pages/Monitors/CreateMonitor/index.jsx
@@ -13,6 +13,7 @@ import Select from "../../../Components/Inputs/Select";
 import Checkbox from "../../../Components/Inputs/Checkbox";
 import { createToast } from "../../../Utils/toastUtils";
 import Breadcrumbs from "../../../Components/Breadcrumbs";
+import { logger } from "../../../Utils/Logger";
 
 const CreateMonitor = () => {
   const MS_PER_MINUTE = 60000;
@@ -267,7 +268,7 @@ const CreateMonitor = () => {
               label="Notify via SMS (coming soon)"
               isChecked={false}
               value=""
-              onChange={() => console.log("disabled")}
+              onChange={() => logger.warn("disabled")}
               isDisabled={true}
             />
             <Checkbox
@@ -284,7 +285,7 @@ const CreateMonitor = () => {
               label="Also notify via email to multiple addresses (coming soon)"
               isChecked={false}
               value=""
-              onChange={() => console.log("disabled")}
+              onChange={() => logger.warn("disabled")}
               isDisabled={true}
             />
             {monitor.notifications.some(
@@ -296,7 +297,7 @@ const CreateMonitor = () => {
                   type="text"
                   placeholder="name@gmail.com"
                   value=""
-                  onChange={() => console.log("disabled")}
+                  onChange={() => logger.warn("disabled")}
                 />
                 <Typography mt={theme.gap.small}>
                   You can separate multiple emails with a comma
diff --git a/Client/src/Pages/Monitors/Details/PaginationTable/index.jsx b/Client/src/Pages/Monitors/Details/PaginationTable/index.jsx
index 28a668977..f7e03171f 100644
--- a/Client/src/Pages/Monitors/Details/PaginationTable/index.jsx
+++ b/Client/src/Pages/Monitors/Details/PaginationTable/index.jsx
@@ -17,6 +17,7 @@ import axiosInstance from "../../../../Utils/axiosConfig";
 import { StatusLabel } from "../../../../Components/Label";
 import ArrowBackRoundedIcon from "@mui/icons-material/ArrowBackRounded";
 import ArrowForwardRoundedIcon from "@mui/icons-material/ArrowForwardRounded";
+import { logger } from "../../../../Utils/Logger";
 
 const PaginationTable = ({ monitorId, dateRange }) => {
   const { authToken } = useSelector((state) => state.auth);
@@ -48,7 +49,7 @@ const PaginationTable = ({ monitorId, dateRange }) => {
         setChecks(res.data.data.checks);
         setChecksCount(res.data.data.checksCount);
       } catch (error) {
-        console.log(error);
+        logger.error(error);
       }
     };
     fetchPage();
diff --git a/Client/src/Pages/Monitors/Details/index.jsx b/Client/src/Pages/Monitors/Details/index.jsx
index 79fba3b6b..92969ce64 100644
--- a/Client/src/Pages/Monitors/Details/index.jsx
+++ b/Client/src/Pages/Monitors/Details/index.jsx
@@ -18,6 +18,7 @@ import {
 import "./index.css";
 import MonitorDetails60MinChart from "../../../Components/Charts/MonitorDetails60MinChart";
 import Breadcrumbs from "../../../Components/Breadcrumbs";
+import { logger } from "../../../Utils/Logger";
 
 const StatBox = ({ title, value }) => {
   return (
@@ -131,7 +132,7 @@ const DetailsPage = () => {
       );
       setMonitor(res.data.data);
     } catch (error) {
-      console.error("Error fetching monitor of id: " + monitorId);
+      logger.error(error);
       navigate("/not-found");
     }
   }, [authToken, monitorId, navigate, dateRange]);
diff --git a/Client/src/Pages/Monitors/index.jsx b/Client/src/Pages/Monitors/index.jsx
index 1b541c72b..c33cf16dc 100644
--- a/Client/src/Pages/Monitors/index.jsx
+++ b/Client/src/Pages/Monitors/index.jsx
@@ -28,6 +28,7 @@ import {
 
 import Settings from "../../assets/icons/settings-bold.svg?react";
 import PropTypes from "prop-types";
+import { logger } from "../../Utils/Logger";
 
 const ActionsMenu = ({ monitor }) => {
   const [anchorEl, setAnchorEl] = useState(null);
@@ -36,7 +37,6 @@ const ActionsMenu = ({ monitor }) => {
   const dispatch = useDispatch();
   const theme = useTheme();
   const authState = useSelector((state) => state.auth);
-
   const handleRemove = async (event) => {
     event.preventDefault();
     event.stopPropagation();
diff --git a/Client/src/Pages/NotFound/index.jsx b/Client/src/Pages/NotFound/index.jsx
index 68120b0a3..ef4b37839 100644
--- a/Client/src/Pages/NotFound/index.jsx
+++ b/Client/src/Pages/NotFound/index.jsx
@@ -33,7 +33,6 @@ const DefaultValue = {
  */
 const NotFound = ({ title = DefaultValue.title, desc = DefaultValue.desc }) => {
   const navigate = useNavigate();
-  console.log("NOT FOUND");
   return (
     <Stack className="not-found-page" justifyContent="center">
       <Stack gap="20px" alignItems="center">
diff --git a/Client/src/Pages/PageSpeed/Configure/index.jsx b/Client/src/Pages/PageSpeed/Configure/index.jsx
index 0dff8d7eb..36a136165 100644
--- a/Client/src/Pages/PageSpeed/Configure/index.jsx
+++ b/Client/src/Pages/PageSpeed/Configure/index.jsx
@@ -18,6 +18,7 @@ import PauseCircleOutlineIcon from "@mui/icons-material/PauseCircleOutline";
 import GreenCheck from "../../../assets/icons/checkbox-green.svg?react";
 import RedCheck from "../../../assets/icons/checkbox-red.svg?react";
 import Breadcrumbs from "../../../Components/Breadcrumbs";
+import { logger } from "../../../Utils/Logger";
 
 import "./index.css";
 
@@ -92,7 +93,7 @@ const PageSpeedConfigure = () => {
   useEffect(() => {
     const data = monitors.find((monitor) => monitor._id === monitorId);
     if (!data) {
-      console.error("Error fetching pagespeed monitor of id: " + monitorId);
+      logger.error("Error fetching pagespeed monitor of id: " + monitorId);
       navigate("/not-found");
     }
     setMonitor({
@@ -278,7 +279,7 @@ const PageSpeedConfigure = () => {
                       id="notify-emails-list"
                       placeholder="notifications@gmail.com"
                       value=""
-                      onChange={() => console.log("disabled")}
+                      onChange={() => logger.warn("disabled")}
                       error=""
                     />
                     <Typography mt={theme.gap.small}>
diff --git a/Client/src/Pages/PageSpeed/CreatePageSpeed/index.jsx b/Client/src/Pages/PageSpeed/CreatePageSpeed/index.jsx
index 6b9e6dbde..c707db319 100644
--- a/Client/src/Pages/PageSpeed/CreatePageSpeed/index.jsx
+++ b/Client/src/Pages/PageSpeed/CreatePageSpeed/index.jsx
@@ -12,6 +12,7 @@ import { createToast } from "../../../Utils/toastUtils";
 import { createPageSpeed } from "../../../Features/PageSpeedMonitor/pageSpeedMonitorSlice";
 import Breadcrumbs from "../../../Components/Breadcrumbs";
 import "./index.css";
+import { logger } from "../../../Utils/Logger";
 
 const CreatePageSpeed = () => {
   const theme = useTheme();
@@ -175,7 +176,7 @@ const CreatePageSpeed = () => {
                   id="notify-emails-list"
                   placeholder="notifications@gmail.com"
                   value=""
-                  onChange={() => console.log("disabled")}
+                  onChange={() => logger.warn("disabled")}
                   error=""
                 />
                 <Typography mt={theme.gap.small}>
diff --git a/Client/src/Pages/PageSpeed/Details/index.jsx b/Client/src/Pages/PageSpeed/Details/index.jsx
index 8ed0ec5c2..4ce031973 100644
--- a/Client/src/Pages/PageSpeed/Details/index.jsx
+++ b/Client/src/Pages/PageSpeed/Details/index.jsx
@@ -21,6 +21,7 @@ import PageSpeedLineChart from "../../../Components/Charts/PagespeedLineChart";
 import Breadcrumbs from "../../../Components/Breadcrumbs";
 import "./index.css";
 import PropTypes from "prop-types";
+import { logger } from "../../../Utils/Logger";
 
 const StatBox = ({ icon, title, value }) => {
   const theme = useTheme();
@@ -210,7 +211,7 @@ const PageSpeedDetails = () => {
         setMonitor(res?.data?.data ?? {});
         setAudits(res?.data?.data?.checks?.[0]?.audits ?? []);
       } catch (error) {
-        console.log(error);
+        logger.error(logger);
         navigate("/not-found");
       }
     };
diff --git a/Client/src/Pages/Settings/index.jsx b/Client/src/Pages/Settings/index.jsx
index 3ee029675..2b6f40682 100644
--- a/Client/src/Pages/Settings/index.jsx
+++ b/Client/src/Pages/Settings/index.jsx
@@ -4,7 +4,7 @@ import Button from "../../Components/Button";
 import Field from "../../Components/Inputs/Field";
 import Link from "../../Components/Link";
 import Select from "../../Components/Inputs/Select";
-
+import { logger } from "../../Utils/Logger";
 import "./index.css";
 
 const Settings = () => {
@@ -40,14 +40,14 @@ const Settings = () => {
               id="display-timezone"
               label="Display timezone"
               value="est"
-              onChange={() => console.log("disabled")}
+              onChange={() => logger.warn("disabled")}
               items={[{ _id: "est", name: "America / Toronto" }]}
             />
             <Select
               id="server-timezone"
               label="Server timezone"
               value="est"
-              onChange={() => console.log("disabled")}
+              onChange={() => logger.warn("disabled")}
               items={[{ _id: "est", name: "America / Toronto" }]}
             />
           </Stack>
@@ -74,7 +74,7 @@ const Settings = () => {
               optionalLabel="0 for infinite"
               placeholder="90"
               value=""
-              onChange={() => console.log("Disabled")}
+              onChange={() => logger.warn("Disabled")}
             />
             <Box>
               <Typography>Clear all stats. This is irreversible.</Typography>
diff --git a/Client/src/Utils/Logger.js b/Client/src/Utils/Logger.js
new file mode 100644
index 000000000..722800910
--- /dev/null
+++ b/Client/src/Utils/Logger.js
@@ -0,0 +1,22 @@
+const LOG_LEVEL = import.meta.env.VITE_APP_LOG_LEVEL;
+class Logger {
+  constructor(logLevel) {
+    const NO_OP = () => {};
+
+    this.error = console.error.bind(console);
+
+    if (logLevel === "error") {
+      this.warn = NO_OP;
+      this.log = NO_OP;
+      return;
+    }
+    this.warn = console.warn.bind(console);
+
+    if (logLevel === "warn") {
+      this.log = NO_OP;
+    }
+    this.log = console.log.bind(console);
+  }
+}
+
+export const logger = new Logger(LOG_LEVEL);

From 5eb022a3c2741aa06a203507a37869d772b1c6f6 Mon Sep 17 00:00:00 2001
From: Alex Holliday <ajhollid@gmail.com>
Date: Mon, 19 Aug 2024 14:28:18 -0700
Subject: [PATCH 2/2] Add none logging level, update readme

---
 Client/src/Utils/Logger.js |  8 ++++++++
 README.md                  | 13 +++++++------
 2 files changed, 15 insertions(+), 6 deletions(-)

diff --git a/Client/src/Utils/Logger.js b/Client/src/Utils/Logger.js
index 722800910..02fffd6be 100644
--- a/Client/src/Utils/Logger.js
+++ b/Client/src/Utils/Logger.js
@@ -3,6 +3,13 @@ class Logger {
   constructor(logLevel) {
     const NO_OP = () => {};
 
+    if (logLevel === "none") {
+      this.error = NO_OP;
+      this.warn = NO_OP;
+      this.log = NO_OP;
+      return;
+    }
+
     this.error = console.error.bind(console);
 
     if (logLevel === "error") {
@@ -14,6 +21,7 @@ class Logger {
 
     if (logLevel === "warn") {
       this.log = NO_OP;
+      return;
     }
     this.log = console.log.bind(console);
   }
diff --git a/README.md b/README.md
index 0a26a67b4..adb9bc68f 100644
--- a/README.md
+++ b/README.md
@@ -22,7 +22,7 @@ BlueWave Uptime is an open source server monitoring application used to track th
 - [x] Ping monitoring
 - [x] Incidents at a glance
 - [x] Page speed monitoring
-- [x] E-mail notifications 
+- [x] E-mail notifications
 - [ ] Scheduled maintenance (in the works)
 
 **Roadmap (short term):**
@@ -62,8 +62,7 @@ Made with [contrib.rocks](https://contrib.rocks).
 
 [![Star History Chart](https://api.star-history.com/svg?repos=bluewave-labs/bluewave-uptime&type=Date)](https://star-history.com/#bluewave-labs/bluewave-uptime&Date)
 
-
-Also check other developer and contributor-friendly projects of BlueWave: 
+Also check other developer and contributor-friendly projects of BlueWave:
 
 - [BlueWave HRM](https://github.com/bluewave-labs/bluewave-hrm)
 - [BlueWave Onboarding](https://github.com/bluewave-labs/bluewave-onboarding)
@@ -191,6 +190,7 @@ SYSTEM_EMAIL_PASSWORD=<system_email_password>
 
 ```
 VITE_APP_API_BASE_URL="http://localhost:5000/api/v1"
+VITE_APP_API_LOG_LEVEL="debug"
 ```
 
 4.  In the `Docker` directory run `docker compose up` to run the `docker-compose.yaml` file and start all four images.
@@ -211,9 +211,10 @@ That's it, the application is ready to use on port 80.
 
 ##### Environmental Variables <a id="env-vars-client"></a>
 
-| ENV Variable Name     | Required/Optional | Type     | Description        | Accepted Values |
-| --------------------- | ----------------- | -------- | ------------------ | --------------- |
-| VITE_APP_API_BASE_URL | Required          | `string` | Base URL of server | {host}/api/v1   |
+| ENV Variable Name     | Required/Optional | Type     | Description        | Accepted Values                    |
+| --------------------- | ----------------- | -------- | ------------------ | ---------------------------------- |
+| VITE_APP_API_BASE_URL | Required          | `string` | Base URL of server | {host}/api/v1                      |
+| VITE_APP_LOG_LEVEL    | Optional          | `string` | Log level          | `"none"`\|`"error"` \| `"warn"` \| |
 
 <br/>