From fda3a74a295d3005f93b97ed20b8993623cf8e34 Mon Sep 17 00:00:00 2001 From: Axel <1597611+axeloz@users.noreply.github.com> Date: Sun, 19 Dec 2021 22:03:34 +0100 Subject: [PATCH] Small design improvements --- README.md | 38 +++++++++++++++++++------------------ web/DB.php | 2 +- web/css/app.scss | 13 +++++++++++-- web/resources/app.vue | 2 +- web/resources/grouplist.vue | 2 +- web/resources/quickview.vue | 2 +- web/resources/tasklist.vue | 6 +++--- 7 files changed, 38 insertions(+), 27 deletions(-) diff --git a/README.md b/README.md index 7bb605c..5888a4e 100644 --- a/README.md +++ b/README.md @@ -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 && /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 diff --git a/web/DB.php b/web/DB.php index 6bfd4e1..f43f08a 100644 --- a/web/DB.php +++ b/web/DB.php @@ -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 { diff --git a/web/css/app.scss b/web/css/app.scss index ed756b0..92d2c32 100644 --- a/web/css/app.scss +++ b/web/css/app.scss @@ -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 { diff --git a/web/resources/app.vue b/web/resources/app.vue index c87e9f5..22cdfe2 100644 --- a/web/resources/app.vue +++ b/web/resources/app.vue @@ -9,8 +9,8 @@