V0.6.0 - Adds ability to create different notifications

.gitignore

@@ -18,6 +18,7 @@
 docs/.vitepress/dist
 docs/.vitepress/cache
 public/kanban.json
+/logs
 
 # misc
 .DS_Store

README.md

@@ -7,7 +7,8 @@
   <a href="https://lunalytics.xyz">Documentation</a> ·
   <a href="https://demo.lunalytics.xyz">Try live demo</a> ·
   <a href="https://lunalytics.xyz/api/monitor">API Docs</a> ·
-  <a href="https://lunalytics.xyz/internal/roadmap">Roadmap</a>
+  <!-- <a href="https://lunalytics.xyz/internal/roadmap">Roadmap</a> -->
+  <a href="https://discord.gg/cjbGmmNdcd">Support</a>
 </div>
 
 ## ⭐ Features
@@ -19,6 +20,7 @@
 - Clean and easy to use UX/UI
 - Customizable themes/colors
 - Customizable user profiles
+- Support for notifications
 
 ## 🚀 Getting Started
 

app/components/home/menu/styles.scss

@@ -1,4 +1,5 @@
-@import '../../../styles/global.scss';
+@use '../../../styles/breakpoints.scss' as *;
+@use '../../../styles/pxToRem.scss' as *;
 
 .home-menu {
   display: flex;

app/components/home/monitor/layout/card.scss

@@ -1,4 +1,4 @@
-@import '../../../../styles/global.scss';
+@use '../../../../styles/pxToRem.scss' as *;
 
 .home-monitor-container {
   width: pxToRem(250);

app/components/home/monitor/layout/compact.scss

@@ -1,4 +1,4 @@
-@import '../../../../styles/global.scss';
+@use '../../../../styles/pxToRem.scss' as *;
 
 .home-monitor-container-compact {
   width: 100%;

app/components/home/monitor/layout/list.scss

@@ -1,4 +1,5 @@
-@import '../../../../styles/global.scss';
+@use '../../../../styles/breakpoints.scss' as *;
+@use '../../../../styles/pxToRem.scss' as *;
 
 .home-monitor-container-list {
   width: 100%;

app/components/home/monitor/layout/table.scss

@@ -1,4 +1,5 @@
-@import '../../../../styles/global.scss';
+@use '../../../../styles/breakpoints.scss' as *;
+@use '../../../../styles/pxToRem.scss' as *;
 
 .home-monitor-table-container-list {
   width: 100%;

app/components/icons/index.jsx

@@ -15,7 +15,7 @@ import { FiLayout } from 'react-icons/fi';
 import { HiStatusOffline, HiStatusOnline } from 'react-icons/hi';
 import { IoMdEyeOff, IoMdEye, IoMdClose, IoMdHelpCircle } from 'react-icons/io';
 import { LiaSyncSolid } from 'react-icons/lia';
-import { MdEdit, MdErrorOutline } from 'react-icons/md';
+import { MdEdit, MdErrorOutline, MdNotifications } from 'react-icons/md';
 import {
   FaCircleCheck,
   FaEllipsisVertical,
@@ -24,6 +24,7 @@ import {
   FaTrashCan,
 } from 'react-icons/fa6';
 import { IoArrowBack, IoColorPalette, IoGrid, IoReload } from 'react-icons/io5';
+import { RiStackFill } from 'react-icons/ri';
 import StatusLogo from './statusLogo';
 
 export {
@@ -57,5 +58,7 @@ export {
   LiaSyncSolid,
   MdEdit,
   MdErrorOutline,
+  MdNotifications,
+  RiStackFill,
   StatusLogo,
 };

app/components/icons/statusLogo.jsx

@@ -7,13 +7,11 @@ import useContextStore from '../../context';
 
 const StatusLogo = ({ size = 250 }) => {
   const {
-    globalStore: { getAllMonitors },
+    globalStore: { allMonitors },
   } = useContextStore();
 
-  const monitors = getAllMonitors();
-
-  const totalMonitors = monitors.length;
-  const offlineMonitors = monitors.filter(
+  const totalMonitors = allMonitors.length;
+  const offlineMonitors = allMonitors.filter(
     (monitor = {}) => monitor.heartbeats[0]?.isDown
   ).length;
 

app/components/modal/monitor/configure.jsx

@@ -9,67 +9,109 @@ import MonitorPageInitial from './pages/initial';
 import MonitorPageHttp from './pages/http';
 import MonitorPageTcp from './pages/tcp';
 import MonitorPageInterval from './pages/interval';
+import MonitorPageNotification from './pages/notification';
 import useMonitorForm from '../../../hooks/useMonitorForm';
+import { Accordion, AccordionItem } from '../../ui/accordion';
+import MonitorHttpStatusCodes from './pages/http/statusCodes';
 
 const MonitorConfigureModal = ({
   closeModal,
   monitor,
   handleMonitorSubmit,
   isEdit = false,
 }) => {
-  const { form, errors, inputs, handleActionButtons, handleInput } =
-    useMonitorForm(monitor, isEdit, closeModal, handleMonitorSubmit);
+  const { errors, inputs, handleActionButtons, handleInput } = useMonitorForm(
+    monitor,
+    isEdit,
+    closeModal,
+    handleMonitorSubmit
+  );
 
   return (
     <Modal.Container closeButton={closeModal}>
       <Modal.Title style={{ textAlign: 'center' }}>
         {isEdit ? 'Edit Monitor' : 'Add Monitor'}
       </Modal.Title>
       <Modal.Message>
-        {form.name === 'initial' && (
+        <div className="monitor-configure-container">
           <MonitorPageInitial
             inputs={inputs}
             errors={errors}
             handleInput={handleInput}
             isEdit={isEdit}
           />
-        )}
 
-        {form.name === 'http' && (
-          <MonitorPageHttp
-            inputs={inputs}
-            errors={errors}
-            handleInput={handleInput}
-          />
-        )}
+          {inputs.type === 'http' && (
+            <MonitorPageHttp
+              inputs={inputs}
+              errors={errors}
+              handleInput={handleInput}
+            />
+          )}
 
-        {form.name === 'tcp' && (
-          <MonitorPageTcp
-            inputs={inputs}
-            errors={errors}
-            handleInput={handleInput}
-          />
-        )}
+          {inputs.type === 'tcp' && (
+            <MonitorPageTcp
+              inputs={inputs}
+              errors={errors}
+              handleInput={handleInput}
+            />
+          )}
+          <br />
+          <Accordion dark>
+            <AccordionItem
+              title="Advanced Settings"
+              subtitle={
+                'Setup advanced settings for the monitor, such as intervals, notifications, and others.'
+              }
+              value="Advance"
+              id="monitor-advanced-settings"
+            >
+              <MonitorPageNotification
+                inputs={inputs}
+                errors={errors}
+                handleInput={handleInput}
+              />
 
-        {form.name === 'interval' && (
-          <MonitorPageInterval
-            inputs={inputs}
-            errors={errors}
-            handleInput={handleInput}
-          />
-        )}
+              <MonitorHttpStatusCodes
+                selectedIds={inputs.valid_status_codes}
+                handleStatusCodeSelect={(code) => {
+                  const { valid_status_codes = [] } = inputs;
+                  const validStatusCodes = valid_status_codes.includes(code)
+                    ? valid_status_codes.filter((id) => id !== code)
+                    : valid_status_codes.concat(code);
+                  handleInput('valid_status_codes', validStatusCodes);
+                }}
+              />
+
+              {errors.valid_status_codes && (
+                <label className="input-error">
+                  {errors.valid_status_codes}
+                </label>
+              )}
+
+              <MonitorPageInterval
+                inputs={inputs}
+                errors={errors}
+                handleInput={handleInput}
+              />
+
+              <br />
+            </AccordionItem>
+          </Accordion>
+        </div>
       </Modal.Message>
 
       <Modal.Actions>
-        {form.actions.map((action) => (
-          <Modal.Button
-            id={action}
-            key={action}
-            onClick={handleActionButtons(action)}
-          >
-            {action}
-          </Modal.Button>
-        ))}
+        <Modal.Button onClick={handleActionButtons('Cancel')}>
+          Cancel
+        </Modal.Button>
+        <Modal.Button
+          onClick={handleActionButtons('Create')}
+          color="green"
+          id="monitor-create-button"
+        >
+          {isEdit ? 'Update' : 'Create'}
+        </Modal.Button>
       </Modal.Actions>
     </Modal.Container>
   );

app/components/modal/monitor/pages/http/index.jsx

@@ -4,15 +4,14 @@ import PropTypes from 'prop-types';
 // import local files
 import TextInput from '../../../../ui/input';
 import MonitorHttpMethods from './methods';
-import MonitorHttpStatusCodes from './statusCodes';
 
 const MonitorAddHttp = ({ inputs, errors, handleInput }) => {
   const handleMethodSelect = (method) => {
     handleInput('method', method);
   };
 
   return (
-    <div className="monitor-configure-container">
+    <>
       <TextInput
         id="input-url"
         label="URL"
@@ -27,24 +26,11 @@ const MonitorAddHttp = ({ inputs, errors, handleInput }) => {
         handleSelect={handleMethodSelect}
       />
       {errors.method && (
-        <label className="text-input-error" id="text-input-http-method-error">{errors.method}</label>
+        <label className="input-error" id="text-input-http-method-error">
+          {errors.method}
+        </label>
       )}
-
-      <MonitorHttpStatusCodes
-        selectedIds={inputs.valid_status_codes}
-        handleStatusCodeSelect={(code) => {
-          const { valid_status_codes = [] } = inputs;
-          const validStatusCodes = valid_status_codes.includes(code)
-            ? valid_status_codes.filter((id) => id !== code)
-            : valid_status_codes.concat(code);
-          handleInput('valid_status_codes', validStatusCodes);
-        }}
-      />
-
-      {errors.valid_status_codes && (
-        <label className="text-input-error">{errors.valid_status_codes}</label>
-      )}
-    </div>
+    </>
   );
 };
 

app/components/modal/monitor/pages/http/methods.jsx

@@ -13,7 +13,7 @@ const MonitorHttpMethods = ({ handleSelect, selectValue = defaultValue }) => {
 
   return (
     <>
-      <label className="text-input-label">Method</label>
+      <label className="input-label">Method</label>
       <Dropdown.Container
         isOpen={dropdownIsOpen}
         toggleDropdown={toggleDropdown}

app/components/modal/monitor/pages/http/statusCodes.jsx

@@ -21,7 +21,7 @@ const MonitorHttpStatusCodes = ({
 
   return (
     <>
-      <label className="text-input-label">Accepted Status Codes</label>
+      <label className="input-label">Accepted Status Codes</label>
       <Select.Container isOpen={selectIsOpen} toggleSelect={toggleSelect}>
         <Select.Trigger
           asInput

app/components/modal/monitor/pages/initial/index.jsx

@@ -7,7 +7,7 @@ import MonitorInitialDropdown from './type';
 
 const MonitorInitialType = ({ inputs, errors, handleInput, isEdit }) => {
   return (
-    <div className="monitor-configure-container">
+    <>
       <TextInput
         label="Name"
         id="input-name"
@@ -31,7 +31,7 @@ const MonitorInitialType = ({ inputs, errors, handleInput, isEdit }) => {
           readOnly
         />
       )}
-    </div>
+    </>
   );
 };
 

app/components/modal/monitor/pages/initial/type.jsx

@@ -9,7 +9,7 @@ const MonitorInitialDropdown = ({ inputs, errors, handleInput }) => {
   const { dropdownIsOpen, toggleDropdown } = useDropdown();
   return (
     <>
-      <label className="text-input-label">Monitor Type</label>
+      <label className="input-label">Monitor Type</label>
       <Dropdown.Container
         isOpen={dropdownIsOpen}
         toggleDropdown={toggleDropdown}
@@ -44,7 +44,7 @@ const MonitorInitialDropdown = ({ inputs, errors, handleInput }) => {
         </Dropdown.List>
       </Dropdown.Container>
       {errors.type && (
-        <label id="text-input-error-input-type" className="text-input-error">
+        <label id="text-input-error-input-type" className="input-error">
           {errors.type}
         </label>
       )}

app/components/modal/monitor/pages/interval.jsx

@@ -6,7 +6,7 @@ import TextInput from '../../../ui/input';
 
 const MonitorAddInterval = ({ inputs, errors, handleInput }) => {
   return (
-    <div className="monitor-configure-container">
+    <>
       <TextInput
         id="input-interval"
         type="number"
@@ -39,7 +39,7 @@ const MonitorAddInterval = ({ inputs, errors, handleInput }) => {
         value={inputs.requestTimeout}
         error={errors.requestTimeout}
       />
-    </div>
+    </>
   );
 };
 

app/components/modal/monitor/pages/notification/index.jsx

@@ -0,0 +1,34 @@
+// import dependencies
+import PropTypes from 'prop-types';
+
+// import local files
+import MonitorNotificationList from './list';
+import MonitorNotificationType from './type';
+
+const MonitorNotificationPage = ({ inputs, errors, handleInput }) => {
+  return (
+    <>
+      <MonitorNotificationList
+        inputs={inputs}
+        errors={errors}
+        handleInput={handleInput}
+      />
+
+      <MonitorNotificationType
+        inputs={inputs}
+        errors={errors}
+        handleInput={handleInput}
+      />
+    </>
+  );
+};
+
+MonitorNotificationPage.displayName = 'MonitorNotificationPage';
+
+MonitorNotificationPage.propTypes = {
+  inputs: PropTypes.object.isRequired,
+  errors: PropTypes.object.isRequired,
+  handleInput: PropTypes.func.isRequired,
+};
+
+export default MonitorNotificationPage;