pporcheret/Hype
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

first commit

Browse Source
This commit is contained in:
root
2023-06-22 15:30:22 +02:00
commit 4d9979354c
3294 changed files with 445677 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

190
web/templates/index.html Normal file
View File

@@ -0,0 +1,190 @@
{% include 'base.html' %}
{% block main %}
<div class="dashform">
<div class="card">
<div class="card-header">
Hostname
</div>
<div class="card-body">
{{ hostname | safe }}
</div>
</div>
</div>
<div class="dashform">
<div class="card">
<div class="card-header">
User
</div>
<div class="card-body">
{{ loguser | safe }}
</div>
</div>
</div>
<div class="dashform">
<div class="card">
<div class="card-header">
Containers
</div>
<div class="card-body">
<span style="color:green;">{{ activ_ct | safe }} up</span>
<span style="color:red;">{{ inactiv_ct | safe }} down</span>
</div>
</div>
</div>
<div class="dashform">
<div class="card">
<div class="card-header">
Virtual Servers
</div>
<div class="card-body">
<span style="color:green;">{{ activ_vm | safe}} up</span>
<span style="color:red;">{{ inactiv_vm | safe}} down</span>
</div>
</div>
</div>
<!-- Avoid a Misalignment -->
<div style="clear: both;"></div>
<!-- -->
<div class="dashform">
<div class="card">
<div class="card-header">
CPU
</div>
<div class="card-body">
<div style="width:200px;height:200px;margin:auto;">
<canvas id="cpuChart" width="50" height="50"></canvas>
</div>
</div>
</div>
</div>
<div class="dashform">
<div class="card">
<div class="card-header">
RAM
</div>
<div class="card-body">
<div style="width:200px;height:200px;margin:auto;">
<canvas id="ramChart" width="50" height="50"></canvas>
</div>
Buffers:{{ memory_buffers | safe }} Cached:{{ memory_cached | safe }}<br>Free :{{ memory_free | safe }} Total :{{ memory_total | safe }}
</div>
</div>
</div>
<div class="dashform">
<div class="card">
<div class="card-header">
Disk
</div>
<div class="card-body">
<div style="width:200px;height:200px;margin:auto;">
<canvas id="diskChart" width="50" height="50"></canvas>
</div>
Used :{{ host_disk_used | safe }}GB / Total :{{ host_disk_total | safe }}GB
</div>
</div>
</div>
</body>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.1.4/Chart.bundle.min.js"></script>
<script>
var datadisk = {
labels: [
"Use ({{ host_disk_percent | safe}}%)",
"Free"
],
datasets: [
{
data: [{{ host_disk_percent | safe}}, {{ host_disk_free_percent | safe}}],
backgroundColor: [
"#008000",
"#C0C0C0"
],
hoverBackgroundColor: [
"#008000",
"#C0C0C0"
]
}]
};
var ctx3 = document.getElementById("diskChart");
var myDoughnutChart = new Chart(ctx3, {
type: 'doughnut',
data: datadisk,
options: {
rotation: 1 * Math.PI,
circumference: 1 * Math.PI
}
});
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' %}