first commit

web/templates/monit.html

@@ -0,0 +1,117 @@
+{% include 'base.html' %}
+{% block main %}
+<div class="qard">
+<div class="card">
+  <div class="card-header">
+	Global Monitoring
+  </div>
+
+  <div class="card-body">
+	<table class="table table-responsive table-condensed align-middle">
+	<tr><th><span class="fas fa-microchip"></span></th><th><span class="fas fa-memory"></span></th></tr>
+        <tr><td>
+<div style="width:240px;height:240px;margin:auto;">
+<canvas id="cpuChart" width="50" height="50"></canvas>
+</div>
+</td><td>
+<div style="width:240px;height:240px;margin:auto;">
+<canvas id="ramChart" width="50" height="50"></canvas>
+</div>
+</td></tr><tr><td>
+{{ global_cpu | safe}}
+	</td><td>
+	{{ global_memory | safe}}
+	</td></tr></table>
+</div>
+</div></div>
+
+
+<div class="qard">
+	<div class="card">
+  		<div class="card-header">
+		Containers
+  		</div>
+  		<div class="card-body">
+
+			{{ lxc_monit | safe}}
+		</div>
+	</div>
+</div>
+<div class="qard">
+	<div class="card">
+  		<div class="card-header">
+        		Virtual Servers
+  		</div>
+  		<div class="card-body">
+
+			{{ vm_monit | safe}}
+		</div>
+	</div>
+</div>
+</body>
+<!-- <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.1.4/Chart.bundle.min.js"></script> -->
+<script src="{{url_for('static', filename = 'Chart.bundle.min.js')}}" ></script> 
+<script>
+var datacpu = {
+    labels: [
+        "Use ({{ cpu_percent_used | safe}}%)",
+        "Free"
+    ],
+    datasets: [
+        {
+            data: [{{ cpu_percent_used | safe}}, {{ cpu_percent_free | safe}}],
+            backgroundColor: [
+                "#008000",
+                "#C0C0C0"
+            ],
+            hoverBackgroundColor: [
+                "#008000",
+                "#C0C0C0"
+            ]
+        }]
+};
+
+var ctx = document.getElementById("cpuChart");
+
+var myDoughnutChart = new Chart(ctx, {
+    type: 'doughnut',
+    data: datacpu,
+    options: {
+    	rotation: 1 * Math.PI,
+      circumference: 1 * Math.PI
+    }
+});
+var dataram = {
+    labels: [
+        "Use ({{ mem_percent_used | safe}}%)",
+        "Free"
+    ],
+    datasets: [
+        {
+            data: [{{ mem_percent_used | safe}}, {{ mem_percent_free | safe}}],
+            backgroundColor: [
+                "#008000",
+                "#C0C0C0"
+            ],
+            hoverBackgroundColor: [
+                "#008000",
+                "#C0C0C0"
+            ]
+        }]
+};
+
+var ctx2 = document.getElementById("ramChart");
+
+// And for a doughnut chart
+var myDoughnutChart2 = new Chart(ctx2, {
+    type: 'doughnut',
+    data: dataram,
+    options: {
+    	rotation: 1 * Math.PI,
+      circumference: 1 * Math.PI
+    }
+});
+</script>
+
+{% endblock %}
+{% include 'foot.html' %}