diff options
| author | Matthias P. Braendli <matthias.braendli@mpb.li> | 2014-05-11 20:51:55 +0200 |
|---|---|---|
| committer | Matthias P. Braendli <matthias.braendli@mpb.li> | 2014-05-11 20:51:55 +0200 |
| commit | 64ddbff99e0efb3965b48bff6f9dac6957180192 (patch) | |
| tree | 356f3ddea93e1b38bddc136ffdf9cffeff703c88 | |
| parent | 6525e843832e058cb3097fc4fbe0166071bb4136 (diff) | |
| download | mmbtools-monit-64ddbff99e0efb3965b48bff6f9dac6957180192.tar.gz mmbtools-monit-64ddbff99e0efb3965b48bff6f9dac6957180192.tar.bz2 mmbtools-monit-64ddbff99e0efb3965b48bff6f9dac6957180192.zip | |
Change to grid presentation
| -rw-r--r-- | static/monit.css | 50 | ||||
| -rw-r--r-- | templates/index.html | 22 |
2 files changed, 65 insertions, 7 deletions
diff --git a/static/monit.css b/static/monit.css new file mode 100644 index 0000000..c27b834 --- /dev/null +++ b/static/monit.css @@ -0,0 +1,50 @@ +* { + border: 0 none; + margin: 0; + padding: 0; +} + +body { + font-family: "Lucida Grande", Verdana, "Bitstream Vera Sans", "Lucida Sans Unicode", sans-serif; + background: #eeeef6; + line-height: 26px; +} + +h1 { + padding: 1em; + text-align: center; + color: #2f2f2f; +} + +div.gridcontainer { + width: 70%; + margin: 40px auto; +} + +div.footer { + clear: both; + margin: 10px; + padding: 25px; + text-align: center; +} + +ul.statusgrid { + list-style: none outside none; +} + +ul.statusgrid li { + float: left; + padding: 10px; + background: #dddded; + border: 3px solid #cccccc; + position: relative; + width: 10em; + height: 10em; + text-align: center; +} + +p { + color: #434343; + text-align: center; +} + diff --git a/templates/index.html b/templates/index.html index 78a4696..d198962 100644 --- a/templates/index.html +++ b/templates/index.html @@ -2,32 +2,40 @@ <html> <head> <title>ODR-DabMux Monitoring</title> - <meta http-equiv="refresh" content="15"> + <link rel="stylesheet" href="/static/monit.css" type="text/css" /> </head> <body> <h1>Statistics for ODR-DabMux running on '{{ name }}'</h1> -<table> - <thead><td>Input Name</td><td>State</td></thead> +<div class="gridcontainer"> +<ul class="statusgrid"> {% for inp in inputs %} - <tr><td><b>{{ inp.name }}:</b></td><td> + <li> + <b>{{ inp.name }}</b> + <br /> {% if inp.state == "NoData" %} <img src="static/red.png" width="29" height="64" alt="No Date" /> + <br /> No Data {% elif inp.state == "Unstable" %} <img src="static/orange.png" width="29" height="64" alt="Unstable" /> + <br /> Unstable {% elif inp.state == "Silent" %} <img src="static/orange.png" width="29" height="64" alt="Unstable" /> + <br /> <img src="static/noaudio.png" width="60" height="30" alt="No audio" /> {% elif inp.state == "Streaming" %} <img src="static/green.png" width="29" height="64" alt="Unstable" /> {% else %} Unknown state {{ inp.state }} ! {% endif %} - </td></tr> + </li> {% endfor %} -</table> -<p>generated on {{ date }}</p> +</ul> +</div> +<div class="footer"> + <p>generated on {{ date }}</p> +</div> </body> </html> |