{% 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' %}