v0.8.0 - Adds support for status pages

README.md

@@ -13,15 +13,15 @@
 
 ![Demo](https://raw.githubusercontent.com/KSJaay/Lunalytics/refs/heads/main/docs/public/demo.gif)
 
-## ⭐ Features
+## 📔 Features
 
 - Easy to self-host
 - Monitor uptime for HTTP(s)/TCP
 - Support for multiple users
+- Fully customisable status/dashboard pages
 - Role based access control
 - Clean and easy to use UX/UI
-- Customizable themes/colors
-- Customizable user profiles
+- Customizable user profiles/themes/colors
 - Support for notifications
   - Discord
   - Slack
@@ -39,7 +39,7 @@
 
 Make sure you have the following applications installed before starting:
 
-- [Nodejs](https://nodejs.org/en/download/) (v18 or higher)
+- [Nodejs](https://nodejs.org/en/download/) (v20 or higher)
 - Npm or [Yarn](https://classic.yarnpkg.com/lang/en/docs/install/#windows-stable)
 - [Git](https://git-scm.com/)
 
@@ -99,6 +99,11 @@ pm2 monit
 - [ ] Add support for more notification services
 - [ ] Better role based access control
 
+## ⭐ Help us grow
+
+- Add a star to the project if you like it!
+- [AlternativeTo](https://alternativeto.net/software/lunalytics/about/)
+
 ## 📖 Backstory
 
 There's a lot of monitoring applications out there and I personally love using uptime-kuma. But, one of the main issues with Uptime-kuma is the ability to share with my friends/colleagues. And for the services that do allow me to share with others, they either have an outdated UI from the 90s or are so expensive I can't justify paying for it.

app/components/icons/index.jsx

@@ -1,4 +1,4 @@
-import { BsTable } from 'react-icons/bs';
+import { BsBroadcast, BsTable } from 'react-icons/bs';
 import {
   FaChevronDown,
   FaChevronLeft,
@@ -11,6 +11,7 @@ import {
   FaSignOutAlt,
   FaUsers,
   FaClone,
+  FaClock,
 } from 'react-icons/fa';
 import { FiLayout } from 'react-icons/fi';
 import { HiStatusOffline, HiStatusOnline } from 'react-icons/hi';
@@ -27,11 +28,19 @@ import {
   FaPause,
   FaPlay,
 } from 'react-icons/fa6';
-import { IoArrowBack, IoColorPalette, IoGrid, IoReload } from 'react-icons/io5';
-import { RiStackFill } from 'react-icons/ri';
+import {
+  IoArrowBack,
+  IoColorPalette,
+  IoGrid,
+  IoReload,
+  IoWarning,
+} from 'react-icons/io5';
+import { RiStackFill, RiIndeterminateCircleFill } from 'react-icons/ri';
 import StatusLogo from './statusLogo';
+import { PiBroadcast, PiDotsSixVerticalBold } from 'react-icons/pi';
 
 export {
+  BsBroadcast,
   BsTable,
   FaBars,
   FaCheck,
@@ -40,6 +49,7 @@ export {
   FaChevronRight,
   FaChevronUp,
   FaCircleCheck,
+  FaClock,
   FaClone,
   FaCog,
   FaEllipsisVertical,
@@ -63,10 +73,14 @@ export {
   IoMdEyeOff,
   IoMdHelpCircle,
   IoReload,
+  IoWarning,
   LiaSyncSolid,
   MdEdit,
   MdErrorOutline,
   MdNotifications,
+  PiBroadcast,
+  PiDotsSixVerticalBold,
+  RiIndeterminateCircleFill,
   RiStackFill,
   StatusLogo,
 };

app/components/modal/notification/index.jsx

@@ -13,11 +13,6 @@ import useNotificationForm from '../../../hooks/useNotificationForm';
 import NotificationModalPayload from './payload';
 import * as inputForPlatform from './platform';
 
-// Notification types
-// - Up and running
-// - Application went down
-// - Warning (If the monitor goes down once it shows a warning, else throw error)
-
 const NotificationModal = ({ values, isEdit, closeModal, addNotification }) => {
   const { inputs, errors, handleInput, handleSubmit } = useNotificationForm(
     values,

app/components/modal/notification/platform/telegram.jsx

@@ -80,7 +80,10 @@ const NotificationModalTelegramInput = ({
           error={errors?.disableNotification}
           checked={values.disableNotification}
           onChange={(e) => {
-            handleInput({ key: 'disableNotification', value: e.target.value });
+            handleInput({
+              key: 'disableNotification',
+              value: e.target.checked,
+            });
           }}
         />
       </div>
@@ -93,7 +96,7 @@ const NotificationModalTelegramInput = ({
           error={errors?.protectContent}
           checked={values.protectContent}
           onChange={(e) => {
-            handleInput({ key: 'protectContent', value: e.target.value });
+            handleInput({ key: 'protectContent', value: e.target.checked });
           }}
         />
       </div>

app/components/modal/settings/account/transfer.jsx

@@ -40,7 +40,6 @@ const SettingsAccountTransferModal = ({ closeModal }) => {
 
         setTeam(filteredMembers);
       } catch (error) {
-        console.log(error);
         toast.error("Couldn't fetch team members");
       }
     };

app/components/modal/settings/manage/approve.jsx

@@ -23,7 +23,6 @@ const MemberApproveModal = ({ member, onClose }) => {
       toast.success('User request approved successfully.');
       onClose();
     } catch (error) {
-      console.log(error);
       toast.error("Error approving user's request.");
     }
   };

app/components/modal/settings/manage/decline.jsx

@@ -22,7 +22,6 @@ const MemberDeclineModal = ({ member, onClose }) => {
       toast.success('User request declined successfully.');
       onClose();
     } catch (error) {
-      console.log(error);
       toast.error("Error declining user's request.");
     }
   };

app/components/modal/settings/manage/delete.jsx

@@ -22,7 +22,6 @@ const MemberDeleteModal = ({ member, onClose }) => {
       toast.success('User has been removed successfully.');
       onClose();
     } catch (error) {
-      console.log(error);
       toast.error("Error declining user's request.");
     }
   };

app/components/modal/settings/manage/permissions.jsx

@@ -45,7 +45,6 @@ const MemberPermissionsModal = ({ member, onClose }) => {
       toast.success('User permissions updated successfully.');
       onClose();
     } catch (error) {
-      console.log(error);
       if (error.response?.status === 400) {
         return toast.error(
           "You don't have permission to assign this permission."

app/components/modal/status/configure/add.jsx

@@ -0,0 +1,133 @@
+import './add.scss';
+
+// import dependencies
+import { useState } from 'react';
+import PropTypes from 'prop-types';
+import classNames from 'classnames';
+import { MdHistory } from 'react-icons/md';
+import { BsGraphUp } from 'react-icons/bs';
+import { IoWarning } from 'react-icons/io5';
+import { PiBroadcast } from 'react-icons/pi';
+import { FaSignal, FaHtml5, FaCss3Alt } from 'react-icons/fa';
+import { TbLayoutNavbarInactive } from 'react-icons/tb';
+
+// import local files
+import Modal from '../../../ui/modal';
+
+const components = [
+  {
+    name: 'Header',
+    icon: (size) => (
+      <TbLayoutNavbarInactive
+        style={{ width: `${size}px`, height: `${size}px` }}
+      />
+    ),
+    type: 'header',
+  },
+  {
+    name: 'Status',
+    icon: (size) => (
+      <PiBroadcast style={{ width: `${size}px`, height: `${size}px` }} />
+    ),
+    type: 'status',
+  },
+  {
+    name: 'Incidents',
+    icon: (size) => (
+      <IoWarning style={{ width: `${size}px`, height: `${size}px` }} />
+    ),
+    type: 'incidents',
+  },
+  {
+    name: 'Uptime',
+    icon: (size) => (
+      <FaSignal style={{ width: `${size}px`, height: `${size}px` }} />
+    ),
+    type: 'uptime',
+  },
+  {
+    name: 'Metrics',
+    icon: (size) => (
+      <BsGraphUp style={{ width: `${size}px`, height: `${size}px` }} />
+    ),
+    type: 'metrics',
+  },
+  {
+    name: 'History',
+    icon: (size) => (
+      <MdHistory style={{ width: `${size}px`, height: `${size}px` }} />
+    ),
+    type: 'history',
+  },
+  {
+    name: 'Custom HTML',
+    icon: (size) => (
+      <FaHtml5 style={{ width: `${size}px`, height: `${size}px` }} />
+    ),
+    type: 'customHTML',
+  },
+  {
+    name: 'Custom CSS',
+    icon: (size) => (
+      <FaCss3Alt style={{ width: `${size}px`, height: `${size}px` }} />
+    ),
+    type: 'customCSS',
+  },
+];
+
+const StatusConfigureAddModal = ({ closeModal, createComponent }) => {
+  const [activeComponent, setActiveComponent] = useState(null);
+
+  return (
+    <Modal.Container closeButton={closeModal}>
+      <Modal.Title style={{ textAlign: 'center', fontSize: 'var(--font-xl)' }}>
+        Add New Component
+      </Modal.Title>
+      <Modal.Message>
+        <div className="scma-container">
+          {components.map((component) => {
+            const classes = classNames('scma-item', {
+              active: component.type === activeComponent,
+            });
+
+            return (
+              <div
+                key={component.name}
+                className={classes}
+                onClick={() => {
+                  setActiveComponent(component.type);
+                }}
+              >
+                <div className="scma-item-icon">{component.icon(28)}</div>
+                <div className="scma-item-name">{component.name}</div>
+              </div>
+            );
+          })}
+        </div>
+      </Modal.Message>
+
+      <Modal.Actions>
+        <Modal.Button onClick={closeModal}>Close</Modal.Button>
+        <Modal.Button
+          color="green"
+          id="monitor-create-button"
+          onClick={() => {
+            createComponent(activeComponent);
+            closeModal();
+          }}
+        >
+          Add
+        </Modal.Button>
+      </Modal.Actions>
+    </Modal.Container>
+  );
+};
+
+StatusConfigureAddModal.displayName = 'StatusConfigureAddModal';
+
+StatusConfigureAddModal.propTypes = {
+  closeModal: PropTypes.func.isRequired,
+  createComponent: PropTypes.func.isRequired,
+};
+
+export default StatusConfigureAddModal;

app/components/modal/status/configure/add.scss

@@ -0,0 +1,43 @@
+// status-configure-modal-add > scma
+
+.scma-container {
+  display: grid;
+  grid-template-columns: 1fr 1fr 1fr;
+  grid-gap: 10px;
+  margin: 20px 0px 10px 0px;
+}
+
+.scma-item {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border: 2px solid var(--accent-700);
+  padding: 10px;
+  cursor: pointer;
+  flex-direction: column;
+  border-radius: 12px;
+  transition: all 0.2s ease-in-out;
+
+  &:hover {
+    transition: all 0.2s ease-in-out;
+    border-color: var(--primary-700);
+
+    .scma-item-icon {
+      transition: all 0.2s ease-in-out;
+      color: var(--primary-700);
+    }
+  }
+
+  &.active {
+    border-color: var(--primary-700);
+
+    .scma-item-icon {
+      color: var(--primary-700);
+    }
+  }
+}
+
+.scma-item-name {
+  font-size: var(--font-md);
+  color: var(--font-color);
+}