Simple Dashboard

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. HomePage is probably one of the most rich out there. There are relaly lots and lots. Docker based, PHP based, Python based, pick yours.

I started using 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.

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.

Clone the repository here Simple Dashboard and directly clone it in your NGINX root folder:

cd /data/htdocs
git clone https://github.com/gardiol/dashboard.git .

Then create the site.json file, for example:

site.json

{
    "title" : "My Dashboard Title",         // Page title
    "header" : {                            // Header is optional
        "img" : "",                         // header image is opional
        "text" : "My beloved Dashboard"     // header text is optional
        },
    "content" : [                           // List of rows
        {
        "foldable": false,                  // Can the row be folded?
        "title": "",                        // Row title, optional
        "content":                          // row content
 
            // Example of two link blocks to a service or page:
            [ {
                "img" : "images/monit.png", // optional image to use
                "text" : "MonIT",           // optional text to display
                "link" : "/monit/",         // link to open
                "style" : "box",            // which style to use (see below)
                "new_page" : true           // open the link in a new page or current page
            },{
                "img" : "images/netdt.png", // optional image to use
                "text" : "NetData",         // optional text to display
                "link" : "https://nd.nd.nd",// link to open
                "style" : "small",          // which style to use (see below)
                "new_page" : true           // open the link in a new page or current page
            } ]
 
 
            // Example of one link block to display external output in dashboard:
            [ {
                "text" : "Services",        // Optional text
                "run" : "/cgi/monitor.sh",  // Output of this URL will be displayed
                "style" : "runner",         // which style to use (see below)
                "interval" : 5              // Interval to run the update, in seconds
            } ]
        } ],
     "footer" : {
        "img" : "",
        "text" : "Contact Willy Gardiol",
        "link" : "mailto://willy@gardiol.org"
    }
}

Here are a few screenshots:

The dashboard can easily be configure by modifying the CSS, the above screenshots are generated from the following CSS:

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%;
}