Skip to content

Commit 8bb8802

Browse files
KSJaayKSJaay
committed
Adds UX for status page configure
1 parent b87bbc1 commit 8bb8802

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

99 files changed

+6601
-105
lines changed

‎README.md

Lines changed: 9 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -13,15 +13,15 @@
1313

1414
![Demo](https://raw.githubusercontent.com/KSJaay/Lunalytics/refs/heads/main/docs/public/demo.gif)
1515

16-
## ⭐ Features
16+
## 📔 Features
1717

1818
- Easy to self-host
1919
- Monitor uptime for HTTP(s)/TCP
2020
- Support for multiple users
21+
- Fully customisable status/dashboard pages
2122
- Role based access control
2223
- Clean and easy to use UX/UI
23-
- Customizable themes/colors
24-
- Customizable user profiles
24+
- Customizable user profiles/themes/colors
2525
- Support for notifications
2626
- Discord
2727
- Slack
@@ -39,7 +39,7 @@
3939

4040
Make sure you have the following applications installed before starting:
4141

42-
- [Nodejs](https://nodejs.org/en/download/) (v18 or higher)
42+
- [Nodejs](https://nodejs.org/en/download/) (v20 or higher)
4343
- Npm or [Yarn](https://classic.yarnpkg.com/lang/en/docs/install/#windows-stable)
4444
- [Git](https://git-scm.com/)
4545

@@ -99,6 +99,11 @@ pm2 monit
9999
- [ ] Add support for more notification services
100100
- [ ] Better role based access control
101101

102+
## ⭐ Help us grow
103+
104+
- Add a star to the project if you like it!
105+
- [AlternativeTo](https://alternativeto.net/software/lunalytics/about/)
106+
102107
## 📖 Backstory
103108

104109
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

Lines changed: 17 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import { BsTable } from 'react-icons/bs';
1+
import { BsBroadcast, BsTable } from 'react-icons/bs';
22
import {
33
FaChevronDown,
44
FaChevronLeft,
@@ -11,6 +11,7 @@ import {
1111
FaSignOutAlt,
1212
FaUsers,
1313
FaClone,
14+
FaClock,
1415
} from 'react-icons/fa';
1516
import { FiLayout } from 'react-icons/fi';
1617
import { HiStatusOffline, HiStatusOnline } from 'react-icons/hi';
@@ -27,11 +28,19 @@ import {
2728
FaPause,
2829
FaPlay,
2930
} from 'react-icons/fa6';
30-
import { IoArrowBack, IoColorPalette, IoGrid, IoReload } from 'react-icons/io5';
31-
import { RiStackFill } from 'react-icons/ri';
31+
import {
32+
IoArrowBack,
33+
IoColorPalette,
34+
IoGrid,
35+
IoReload,
36+
IoWarning,
37+
} from 'react-icons/io5';
38+
import { RiStackFill, RiIndeterminateCircleFill } from 'react-icons/ri';
3239
import StatusLogo from './statusLogo';
40+
import { PiBroadcast, PiDotsSixVerticalBold } from 'react-icons/pi';
3341

3442
export {
43+
BsBroadcast,
3544
BsTable,
3645
FaBars,
3746
FaCheck,
@@ -40,6 +49,7 @@ export {
4049
FaChevronRight,
4150
FaChevronUp,
4251
FaCircleCheck,
52+
FaClock,
4353
FaClone,
4454
FaCog,
4555
FaEllipsisVertical,
@@ -63,10 +73,14 @@ export {
6373
IoMdEyeOff,
6474
IoMdHelpCircle,
6575
IoReload,
76+
IoWarning,
6677
LiaSyncSolid,
6778
MdEdit,
6879
MdErrorOutline,
6980
MdNotifications,
81+
PiBroadcast,
82+
PiDotsSixVerticalBold,
83+
RiIndeterminateCircleFill,
7084
RiStackFill,
7185
StatusLogo,
7286
};

‎app/components/modal/notification/index.jsx

Lines changed: 0 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -13,11 +13,6 @@ import useNotificationForm from '../../../hooks/useNotificationForm';
1313
import NotificationModalPayload from './payload';
1414
import * as inputForPlatform from './platform';
1515

16-
// Notification types
17-
// - Up and running
18-
// - Application went down
19-
// - Warning (If the monitor goes down once it shows a warning, else throw error)
20-
2116
const NotificationModal = ({ values, isEdit, closeModal, addNotification }) => {
2217
const { inputs, errors, handleInput, handleSubmit } = useNotificationForm(
2318
values,

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

Lines changed: 133 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,133 @@
1+
import './add.scss';
2+
3+
// import dependencies
4+
import PropTypes from 'prop-types';
5+
import { MdHistory } from 'react-icons/md';
6+
import { BsGraphUp } from 'react-icons/bs';
7+
import { IoWarning } from 'react-icons/io5';
8+
import { PiBroadcast } from 'react-icons/pi';
9+
import { FaSignal, FaHtml5, FaCss3Alt } from 'react-icons/fa';
10+
import { TbLayoutNavbarInactive } from 'react-icons/tb';
11+
12+
// import local files
13+
import Modal from '../../../ui/modal';
14+
import classNames from 'classnames';
15+
import { useState } from 'react';
16+
17+
const components = [
18+
{
19+
name: 'Header',
20+
icon: (size) => (
21+
<TbLayoutNavbarInactive
22+
style={{ width: `${size}px`, height: `${size}px` }}
23+
/>
24+
),
25+
type: 'header',
26+
},
27+
{
28+
name: 'Status',
29+
icon: (size) => (
30+
<PiBroadcast style={{ width: `${size}px`, height: `${size}px` }} />
31+
),
32+
type: 'status',
33+
},
34+
{
35+
name: 'Incidents',
36+
icon: (size) => (
37+
<IoWarning style={{ width: `${size}px`, height: `${size}px` }} />
38+
),
39+
type: 'incidents',
40+
},
41+
{
42+
name: 'Uptime',
43+
icon: (size) => (
44+
<FaSignal style={{ width: `${size}px`, height: `${size}px` }} />
45+
),
46+
type: 'uptime',
47+
},
48+
{
49+
name: 'Metrics',
50+
icon: (size) => (
51+
<BsGraphUp style={{ width: `${size}px`, height: `${size}px` }} />
52+
),
53+
type: 'metrics',
54+
},
55+
{
56+
name: 'History',
57+
icon: (size) => (
58+
<MdHistory style={{ width: `${size}px`, height: `${size}px` }} />
59+
),
60+
type: 'history',
61+
},
62+
{
63+
name: 'Custom HTML',
64+
icon: (size) => (
65+
<FaHtml5 style={{ width: `${size}px`, height: `${size}px` }} />
66+
),
67+
type: 'customHTML',
68+
},
69+
{
70+
name: 'Custom CSS',
71+
icon: (size) => (
72+
<FaCss3Alt style={{ width: `${size}px`, height: `${size}px` }} />
73+
),
74+
type: 'customCSS',
75+
},
76+
];
77+
78+
const StatusConfigureAddModal = ({ closeModal, createComponent }) => {
79+
const [activeComponent, setActiveComponent] = useState(null);
80+
81+
return (
82+
<Modal.Container closeButton={closeModal}>
83+
<Modal.Title style={{ textAlign: 'center', fontSize: 'var(--font-xl)' }}>
84+
Add New Component
85+
</Modal.Title>
86+
<Modal.Message>
87+
<div className="scma-container">
88+
{components.map((component) => {
89+
const classes = classNames('scma-item', {
90+
active: component.type === activeComponent,
91+
});
92+
93+
return (
94+
<div
95+
key={component.name}
96+
className={classes}
97+
onClick={() => {
98+
setActiveComponent(component.type);
99+
}}
100+
>
101+
<div className="scma-item-icon">{component.icon(28)}</div>
102+
<div className="scma-item-name">{component.name}</div>
103+
</div>
104+
);
105+
})}
106+
</div>
107+
</Modal.Message>
108+
109+
<Modal.Actions>
110+
<Modal.Button onClick={closeModal}>Close</Modal.Button>
111+
<Modal.Button
112+
color="green"
113+
id="monitor-create-button"
114+
onClick={() => {
115+
createComponent(activeComponent);
116+
closeModal();
117+
}}
118+
>
119+
Add
120+
</Modal.Button>
121+
</Modal.Actions>
122+
</Modal.Container>
123+
);
124+
};
125+
126+
StatusConfigureAddModal.displayName = 'StatusConfigureAddModal';
127+
128+
StatusConfigureAddModal.propTypes = {
129+
closeModal: PropTypes.func.isRequired,
130+
createComponent: PropTypes.func.isRequired,
131+
};
132+
133+
export default StatusConfigureAddModal;

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

Lines changed: 43 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,43 @@
1+
// status-configure-modal-add > scma
2+
3+
.scma-container {
4+
display: grid;
5+
grid-template-columns: 1fr 1fr 1fr;
6+
grid-gap: 10px;
7+
margin: 20px 0px 10px 0px;
8+
}
9+
10+
.scma-item {
11+
display: flex;
12+
align-items: center;
13+
justify-content: center;
14+
border: 2px solid var(--accent-700);
15+
padding: 10px;
16+
cursor: pointer;
17+
flex-direction: column;
18+
border-radius: 12px;
19+
transition: all 0.2s ease-in-out;
20+
21+
&:hover {
22+
transition: all 0.2s ease-in-out;
23+
border-color: var(--primary-700);
24+
25+
.scma-item-icon {
26+
transition: all 0.2s ease-in-out;
27+
color: var(--primary-700);
28+
}
29+
}
30+
31+
&.active {
32+
border-color: var(--primary-700);
33+
34+
.scma-item-icon {
35+
color: var(--primary-700);
36+
}
37+
}
38+
}
39+
40+
.scma-item-name {
41+
font-size: var(--font-md);
42+
color: var(--font-color);
43+
}

0 commit comments

Comments
 (0)