alicanli1995 / monitoring-react-project Goto Github PK

View Code? Open in Web Editor NEW

2.0 1.0 0.0 10.08 MB

Host monitoring project build by React.JS 18 backend by GO

HTML 0.67% JavaScript 40.37% CSS 57.59% SCSS 1.38%

monitoring-react-project's Introduction

Monitoring Project - 👁 Observer

📖 Table of Contents

📝 Description
📦 Installation
🚀 Running the app
📚 Packages
🗒 Pages
📝 Notes
📸 Screenshots
👨‍💻 Author

📝 Description

This project is a simple monitoring system that uses the Observer to monitor the status of a server. The server is monitored by a client that sends a request to the server every 5 seconds(time is optional). And mainly content this project is a WebSocket server that receives the request from the client and sends the response to the client.

📦 Installation

$ git clone https://github.com/alicanli1995/monitoring-react-project.git
$ cd monitoring-react-project
$ npm install

🚀 Running the app

$ npm run start

📚 Packages

🗒 Pages

Overview - The home page of the application.
Login - The login page of the application.
Hosts - All hosts page of the application.
Host - Host page of the application.
Statistics - Statistics page of the application.
Events - Events page of the application.
Schedule - Schedule page of the application.
Users - Users page of the application.
Settings - Settings page of the application.

📝 Notes

Overview -> Page is a general page that shows the status of the hosts and the counts of the host health status, like how many hosts are up, down, and in maintenance. This page has a specific websocket channel that listens to the host status changes and updates the UI in real-time.
Login -> Page is a login page that has a simple login form. The login form has a validation
Hosts -> Page is a page that shows all hosts in a table.
Host -> Page is a page that shows the host details. This page has a specific websocket channel that listens to the host status changes and updates the UI in real-time. And you can manage your host and adding or removing the host services like HTTP, HTTPS, TLS.
Statistics -> Page is a page that shows the statistics graph of the hosts. This page has a specific websocket channel that listens to the host status changes and updates the UI in real-time. And you can filter the statistics graph by the host and the host services.
Events -> Page is a page that shows the events of the hosts.
Schedule -> Page is a page that shows the schedule of the hosts. The schedule is a simple cron job that runs every X seconds and sends a request to the server. This page has a specific websocket channel that listens to the host status changes and updates the UI in real-time.
Users -> Page is a page that shows the users of the application. You can add, edit users.
Settings -> Page is a page that shows the settings of the application. You can change the application URL, notification setting like what's the notification type for the host status changes like SMS or Email.