Simple Dashboard

This page is read only. You can view the source, but not change it. Ask your administrator if you think this is wrong.
====== 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. [[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.
  
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.

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.

===== Installation =====

Clone the repository here [[https://github.com/gardiol/dashboard/tree/main|Simple Dashboard]] and directly clone it in your NGINX root folder:
<code bash>
cd /data/htdocs
git clone https://github.com/gardiol/dashboard.git .
</code>

Then create the **site.json** file, for example:
<file json 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"
    }
}
</file>

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>
Willy's Wiki

User Tools
