From 5ded387411376e8e8bbf364a9206ed43b746b363 Mon Sep 17 00:00:00 2001
From: saravanan30erd <saravanan30erd@gmail.com>
Date: Fri, 4 Oct 2019 13:29:56 +0400
Subject: [PATCH] add box for status chart

---
 -H                         |  0
 static/monit-dashboard.css | 11 +++++++++++
 templates/index.html       | 10 ++++++++--
 3 files changed, 19 insertions(+), 2 deletions(-)
 create mode 100644 -H

diff --git a/-H b/-H
new file mode 100644
index 0000000..e69de29
diff --git a/static/monit-dashboard.css b/static/monit-dashboard.css
index 9e34d2e..8a397fa 100644
--- a/static/monit-dashboard.css
+++ b/static/monit-dashboard.css
@@ -41,6 +41,7 @@ button.accordion {
     border: none;
     outline: none;
     transition: 0.4s;
+    margin: 0.6rem;
 }
 
 div.panel {
@@ -70,3 +71,13 @@ div.panel.show {
 .red:hover {
     background-color: #c9302c;
 }
+
+.canvas-graph {
+  min-height: 30%;
+  min-width: 24.5%;
+  display: inline-block;
+  position: relative;
+  background-color: white;
+  margin: 20px 0;
+  box-shadow: 0 2px 4px 0 rgba(0,0,0,0.16),0 2px 10px 0 rgba(0,0,0,0.12)
+}
diff --git a/templates/index.html b/templates/index.html
index 689cd3c..744c648 100644
--- a/templates/index.html
+++ b/templates/index.html
@@ -4,7 +4,7 @@ $def with (output, now)
 $ errors = 0
 $ color = "green"
 <div>
-<div style="height: 50%; overflow-y: scroll;">
+<div style="height: 40%; overflow-y: scroll; overflow-x: hidden;">
 $for server in range(len(output)):
         $code:
             errors = 0
@@ -79,8 +79,14 @@ $for server in range(len(output)):
 </div>
 
 
-<div style="height: 45%; overflow: scroll;">
+<div style="height:40%">
+<div class="canvas-graph">
+<div style="background-color: grey; text-align: center;"><h3>Hosts status</h3></div>
 <canvas id="canvas" width="400" height="400"></canvas>
+</div>
+</div>
+
+<div style="height: 10%;">
 <br><br><br>
 Latest update: $now.day/$now.month/$now.year, $now.hour:$now.minute:$now.second
 <br><br>