Small design improvements

This commit is contained in:
Axel 2021-12-19 22:03:34 +01:00
parent 92e6921cf9
commit fda3a74a29
7 changed files with 38 additions and 27 deletions

View file

@ -1,28 +1,28 @@
# MONITOLITE
**MonitoLite** is an old project I recently dug up from my archives. I developed this script years ago for my personal needs.
**MonitoLite** is an old project I recently dug up from my archives. I developed this script years ago for my personal needs.
I figured it could be useful for others so I **rewrote** and **updated** it from scratch in a modern way.
## What it does
**MonitoLite** is a very simple monitoring tool developed in Perl. It supports :
**MonitoLite** is a very simple monitoring tool developed in Perl. It supports :
* **ping monitoring**: sends a `ping` command to the specified host. Raises an alert if the host is down
* **http monitoring**: requests the provided URL and raises an alert if the URL returns an error. Optionally you may specify a string to search on the page using the `param` database field. It raises an alert if the specified text could not be found on the page.
In case of an alert, the script sends an email notifications to the specified contacts (one or many).
In case of an alert, the script sends an email notifications to the specified contacts (one or many).
The script also sends a recovery email notification when the alert is over.
It uses a SQL backend for handling the tasks and the status of the tasks.
It uses a SQL backend for handling the tasks and the status of the tasks.
Tested on MySQL only but should support other SQL-based DBMS.
It comes with a very straightforward dashboard written in PHP. This is **optional**, the `monitolite.pl` script runs as standalone.
**Caution**: the backend is not password-protected. You should make sure you add your own security layer via IP filtering or basic authentication.
It comes with a very straightforward dashboard written in PHP. This is **optional**, the `monitolite.pl` script runs as standalone.
**Caution**: the backend is not password-protected. You should make sure you add your own security layer via IP filtering or basic authentication.
I rewrote a couple of things today to make sure the script still works.
I rewrote a couple of things today to make sure the script still works.
## Screenshot
## Screenshot
![screenshot](https://github.com/axeloz/monitolite/raw/main/screenshot.png "Logo")
@ -30,7 +30,7 @@ I rewrote a couple of things today to make sure the script still works.
## Requirements
* Perl : with DBI::MySQL, Dotenv, Net::Ping, Email::MIME, Email::Sender::Simple, Email::Sender::Transport::SMTP, LWP::Simple, LWP::UserAgent, LWP::Protocol::https
* a MTA: Postfix, ...
* a MTA: Postfix, ...
* PHP 7+ (optional): with PDO
* a webserver (optional): Apache, Nginx, ...
* a Database server: MySQL, other? (untested)
@ -43,15 +43,17 @@ I rewrote a couple of things today to make sure the script still works.
* clone this repo
* install Perl dependencies
* install PHP composer dependencies: `cd ./web && composer install`
* install Javascript dependencies: `cd ./web && npm install`
* compile the Javascript sources: `cd ./web && npx mix production`
* create a Database and import the schema from `sql/create.sql`
* create your own `.env` file: `cp .env.example .env` and adapt it to your needs
* create your own `.env` file: `cp .env.example .env` and adapt it to your needs
* create a webserver vhost with document root to the `web` directory
* add tasks and contacts into the database (no backend yet)
* run the script: `perl monitolite.pl`
* check the web dashboard for results.
* run the script: `perl monitolite.pl`
* check the web dashboard for results.
* when everything works, you may create a CRON `* * * * * cd <change/this/to/the/correct/path> && /usr/bin/perl monitolite.pl > /dev/null`
## Settings
* DB_TYPE=mysql
@ -67,9 +69,9 @@ I rewrote a couple of things today to make sure the script still works.
* SMTP_SSL=1
* MAIL_FROM=axel@monitolite.fr
* NB_TRIES=3
* ARCHIVE_DAYS=10
## MORE INFORMATION COMING SOON.
* ARCHIVE_DAYS=10
## MORE INFORMATION COMING SOON.
## TODO

View file

@ -46,7 +46,7 @@ class DB {
LEFT JOIN `tasks_history` as h ON (h.task_id = t.id)
LEFT JOIN `groups` as g ON (g.id = t.group_id)
WHERE (t.last_execution IS NULL OR h.datetime = t.last_execution)
ORDER BY group_id DESC
ORDER BY group_name ASC
';
}
else {

View file

@ -101,10 +101,13 @@ html {
color: #3D3D3D;
padding: 0.3rem;
background-color: #FFF;
vertical-align: top;
border: 1px solid #9ccece;
text-align: center;
vertical-align: middle;
&.right {
text-align: right;
}
}
&#tasks_tbl, &#contacts_tbl {
@ -124,7 +127,7 @@ html {
overflow: hidden;
.new-group {
margin: .1rem;
margin: .2rem;
display: inline-block;
border-radius: .4rem;
overflow: hidden;
@ -138,6 +141,7 @@ html {
float: left;
line-height: 1.2rem;
min-width: 1.4rem;
padding: .2rem .6rem;
&:not(:first-of-type) {
border-left: 1px solid white;
@ -182,6 +186,11 @@ html {
font-size: 1rem;
vertical-align: middle;
border-radius: .5rem;
font-size: 0.8rem;
}
.small {
font-size: .8rem;
}
.hidden {

View file

@ -9,8 +9,8 @@
<script>
import QuickView from '../resources/quickview.vue'
import GroupList from './grouplist.vue'
import QuickView from './quickview.vue'
export default{
components: {

View file

@ -8,7 +8,7 @@
<a :name="'group-'+group.id"></a>
<h3>
Tasks for group <span class="highlight">{{ group.name }} <small>(#{{ group.id }})</small></span>
<p class="context-menu"><img src="img/menu.svg" width="40" /></p>
<!-- <p class="context-menu"><img src="img/menu.svg" width="40" /></p> -->
</h3>
<div class="block-content">

View file

@ -18,7 +18,7 @@
:class="statusText(task.status)"
class="square"
>
&nbsp;
<span class="small">{{task.id }}</span>
</p>
</a>
</div>

View file

@ -6,8 +6,8 @@
<th width="5%">Up?</th>
<th width="*">Host</th>
<th width="5%">Type</th>
<th width="20%">Last execution</th>
<th width="20%">Frequency (min)</th>
<th width="20%">Last checked</th>
<th width="13%">Frequency (min)</th>
<th width="5%">Active</th>
</tr>
</thead>
@ -19,7 +19,7 @@
<td :class="statusText(task.status)">
<img :src="'img/'+statusText(task.status)+'.png'" width="16" alt="Status" />
</td>
<td :class="statusText(task.status)">
<td>
<a :href="task.host" target="_blank">{{ task.host }}</a>
</td>
<td>