User Tools

Differences

This shows you the differences between two versions of the page.

Link to this comparison view

Next revision		Previous revision
services:dashboards [2024/02/27 12:43] – created willyservices:dashboards [2024/04/08 12:56] (current) – willy
Line 1: Line 1:
-====== Dashboard ======+====== Simple Dashboard ======
  
-Wouldn't be nice to have a single page from which you can access all your services? Remembering them all at this point might start to be overwhelming, isn't' it?+A **dashboard** is a nice web page where you can organize all your services and access them quickly by having all the links centralized.
  
-There are literally lots of options at your fingertip, looking for //html dashboard// or similar queries will find you tons of open-source products that you can explore and try out. [[https://github.com/gethomepage/homepage|HomePage]] is probably one of the most rich out there. +There are literally lots of options at your fingertip, looking for //html dashboard// or similar queries will find you tons of open-source products that you can explore and try out. [[https://github.com/gethomepage/homepage|HomePage]] is probably one of the most rich out there. There are relaly lots and lots. Docker based, PHP based, Python based, pick yours. 
-  +   
-Since i wanted something really simple and easy, i rolled my own, called **Simple Dashboard**. Some advantages: +I started using [[https://github.com/gardiol/dashboard|Simple Dashboard]]  that is a very customizable and super lightweight static (or partially static) dash board. It can also, if properly configured, provide basic monitoring for your server.
-  * It's 100% client-side  +
-  * Pure HTML+CSS with a drop of Javascript +
-  * Easily extensible, based on a //site.json// file +
-  * Only depends on [[https://jquery.com/|jQuery]] and nothing else +
-  * It's all into three files, including jQuery.+
  
-The only simpler approach would be a static HTML page with a link for each service.+Some advantages: 
 +  * It's 100% client-side  
 +  * Pure HTML+CSS with a drop of Javascript (jQuery) 
 +  * Easily extensible, based on a //JSON// file 
 +  * No external dependency (no CDN, no internet required) 
 +  * It's all into five files, including jQuery.
  
 Go back to the NGINX page and check the //root// path i told you to use: **root /data/daemons/htdocs;**. This is the folder which is used by the reverse-proxy when you open 10.0.0.1 (or the remote address) in your browser. This is the place where you need to put your dashboard. Go back to the NGINX page and check the //root// path i told you to use: **root /data/daemons/htdocs;**. This is the folder which is used by the reverse-proxy when you open 10.0.0.1 (or the remote address) in your browser. This is the place where you need to put your dashboard.
  
-===== The single HTML page =====+===== Installation =====
  
-This is the simplest possible solution, a static HTML page. Drop the following file into **/data/daemons/htdocs** and call it **index.html**: +Clone the repository here [[https://github.com/gardiol/dashboard/tree/main|Simple Dashboard]] and directly clone it in your NGINX root folder:
-<file html index.html> +
-<html> +
-<body> +
-<p><a href="/prowlarr">Access indexers and manual searches</a></p> +
-<p><a href="/radarr">Organize movies</a></p> +
-<p><a href="/sonarr">Organize TV shows</a></p> +
-<p><a href="/lidarr">Organize music</a></p> +
-<p><a href="/readarr-books">Organize books (Readarr)</a></p> +
-<p><a href="/readarr-audiobooks">Organize audiobooks (Readarr)</a></p> +
-<p><a href="/bazarr">Organize subtitles</a></p> +
-<p><a href="/transmission">Transmission client</a></p> +
-<p><a href="/nzbget">NzbGet client</a></p> +
-<p><a href="/jellyfin">Media Server</a></p> +
-</body> +
-</html> +
-</file> +
- +
-You **can't go any simpler** than this. It's also ugly. +
- +
-===== The simple Dashboard ===== +
- +
-This is a very small client-side Javascript app that will fetch a list of links from a json file and generate on-the-fly a nice page for your browser. You need: +
-  * One index.html page with little HTML and some Javascript +
-  * One CSS file +
-  * One //site.json// file containing the list of links +
-  * Optionally, a subfolder called //images// with icons for the links +
- +
-You can grab the repository here [[https://github.com/gardiol/dashboard/tree/main|Simple Dashboard]] and directly clone it in your NGINX root folder:+
 <code bash> <code bash>
 cd /data/htdocs cd /data/htdocs
Line 52: Line 24:
 </code> </code>
  
-Then create the **site.json** file:+Then create the **site.json** file, for example:
 <file json site.json> <file json site.json>
 { {
-        "title" : "Home Server", +    "title" : "My Dashboard Title",         // Page title 
-        "header" : { +    "header" : {                            // Header is optional 
-                "img" : "", +        "img" : "",                         // header image is opional 
-                "text" : "Home Services" +        "text" : "My beloved Dashboard"     // header text is optional 
-                }, +        }, 
-        "content" : +    "content" : [                           // List of rows 
-                [ [ { +        { 
-                        "img" : "images/jellyfin.png", +        "foldable": false,                  // Can the row be folded? 
-                        "text" : "Film, Serie TV, etc", +        "title": "",                        // Row title, optional 
-                        "link" : "/jellyfin/", +        "content":                          // row content
-                        "style" : "box", +
-                        "new_page" : true +
-                },{ +
-                        "img" : "images/ombi.png", +
-                        "text" : "Richieste", +
-                        "link" : "/ombi/", +
-                        "style" : "box", +
-                        "new_page" : true +
-                }], +
-                [{ +
-                        "img" : "images/nzbget.png", +
-                        "text" : "NzbGet", +
-                        "link" : "/nzbget/", +
-                        "style" : "small", +
-                        "new_page" : true +
-                },{ +
-                        "img" : "images/torrent.png", +
-                        "text" : "Deluge", +
-                        "link" : "/deluge/", +
-                        "style" : "small", +
-                        "new_page" : true +
-                },{ +
-                        "img" : "images/torrent.png", +
-                        "text" : "Transmission", +
-                        "link" : "/deluge/", +
-                        "style" : "small", +
-                        "new_page" : true +
-                },{ +
-                        "img" : "images/prowlarr.png", +
-                        "text" : "Indexers", +
-                        "link" : "/prowlarr/", +
-                        "style" : "small", +
-                        "new_page" : true +
-                },{ +
-                        "img" : "images/bazarr.png", +
-                        "text" : "Subtitles", +
-                        "link" : "/bazarr/", +
-                        "style" : "small", +
-                        "new_page" : true +
-                }],+
  
-                [{ +            // Example of two link blocks to a service or page: 
-                        "img" : "images/radarr.png", +            [ { 
-                        "text" : "Films", +                "img" : "images/monit.png", // optional image to use 
-                        "link" : "/radarr/", +                "text" : "MonIT",           // optional text to display 
-                        "style" : "small", +                "link" : "/monit/",         // link to open 
-                        "new_page" : true +                "style" : "box",            // which style to use (see below) 
-                },{ +                "new_page" : true           // open the link in a new page or current page 
-                        "img" : "images/lidarr.png", +            },{ 
-                        "text" : "Musica", +                "img" : "images/netdt.png", // optional image to use 
-                        "link" : "/lidarr/", +                "text" : "NetData",         // optional text to display 
-                        "style" : "small", +                "link" : "https://nd.nd.nd",// link to open 
-                        "new_page" : true +                "style" : "small",          // which style to use (see below) 
-                },{ +                "new_page" : true           // open the link in a new page or current page 
-                        "img" : "images/sonarr.png", +            } ] 
-                        "text" : "Tv Shows", + 
-                        "link" : "/sonarr/", + 
-                        "style" : "small", +            // Example of one link block to display external output in dashboard: 
-                        "new_page" : true +            [ { 
-                },{ +                "text" : "Services",        // Optional text 
-                        "img" : "images/readarr.png", +                "run" : "/cgi/monitor.sh",  // Output of this URL will be displayed 
-                        "text" : "Libri", +                "style" : "runner",         // which style to use (see below) 
-                        "link" : "/readarr-books/", +                "interval" : 5              // Interval to run the update, in seconds 
-                        "style" : "small", +            } ] 
-                        "new_page" : true +        } ], 
-                },{ +     "footer" : { 
-                        "img" : "images/audiobooks.png", +        "img" : "", 
-                        "text" : "Audiolibri", +        "text" : "Contact Willy Gardiol", 
-                        "link" : "/readarr-audiobooks/", +        "link" : "mailto://willy@gardiol.org" 
-                        "style" : "small", +    }
-                        "new_page" : true +
-                } ] ]+
 } }
 </file> </file>
  
-This dashboard you can easily configure by modifying the CSS.+Here are a few screenshots: 
 +{{ :services:screenshot_dashboard_casa.png?direct&400 |}} 
 +{{ :services:screenshot_dashboard_sistema_casa.png?direct&400 |}} 
 + 
 +===== Style ===== 
 + 
 +The dashboard can easily be configure by modifying the CSS, the above screenshots are generated from the following CSS: 
 +<code> 
 +body {  background: black; } 
 +a { color: darkred; } 
 +div.header > span { color: white; } 
 +.ok { color: green; } 
 +.ko { color: red; } 
 + 
 +.box { 
 +        width: 20em; 
 +        height: 21em; 
 +        background: orange; 
 +        margin: 1em; 
 +        padding: 0.5em; 
 +        text-align: center; 
 +        border-radius: 3em; 
 +        box-shadow: 0.2em 0.2em darkred; 
 +} 
 +.box > a > p { 
 +        height: 2em; 
 +        margin: 0px; 
 +        font-size: 150%; 
 +} 
 +.box > a > img { 
 +        height: 19em; 
 +        width: 19em; 
 +} 
 + 
 +.small { 
 +        width: 5em; 
 +        height: 6em; 
 +        background: orange; 
 +        margin: 1em; 
 +        padding: 0.5em; 
 +        text-align: center; 
 +        border-radius: 1em; 
 +        box-shadow: 0.2em 0.2em darkred; 
 +} 
 +.small > a > p { 
 +        height: 1em; 
 +        margin: 0px; 
 +} 
 +.small > a > img { 
 +        height: 4.5em; 
 +        width: 4.5em; 
 +} 
 + 
 +.container > p { 
 +        color: white; 
 +        border-top: 1px solid white; 
 +} 
 + 
 +.runner { 
 +        max-width: 40em; 
 +        max-height: 40em; 
 +        background: orange; 
 +        color: darkred; 
 +        margin: 1em; 
 +        padding: 0.5em; 
 +        text-align: center; 
 +        border-radius: 1em; 
 +        box-shadow: 0.2em 0.2em darkred; 
 +} 
 +.runner > p { 
 +        color: darkred; 
 +        margin: 0px; 
 +        font-size: 150%; 
 +} 
 +</code>