118 lines
2.6 KiB
HTML
118 lines
2.6 KiB
HTML
|
{% 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' %}
|