mirror of
https://gitlab.com/crafty-controller/crafty-4.git
synced 2024-08-30 18:23:09 +00:00
Dynamically update storage on host stats
This commit is contained in:
parent
f00182e8e9
commit
f824ca2959
@ -106,13 +106,14 @@
|
||||
<div class="wrapper" style="width: 100%;">
|
||||
<h5 class="mb-1 font-weight-medium text-primary">Storage
|
||||
</h5>
|
||||
<ul style="width: 100%; list-style: none;">
|
||||
{% for item in data.get('hosts_data').get('disk_json') %}
|
||||
<li id="{{item['device']}}">
|
||||
<h6 style="display: inline-block;">{{item["mount"]}}</h6>
|
||||
<div class="progress"
|
||||
style="display: inline-block; height: 20%; width: 70%; background-color: rgb(139, 139, 139) !important;">
|
||||
<div class="progress-bar
|
||||
<div id="storage_data">
|
||||
<ul style="width: 100%; list-style: none;">
|
||||
{% for item in data.get('hosts_data').get('disk_json') %}
|
||||
<li id="{{item['device']}}">
|
||||
<h6 style="display: inline-block;">{{item["mount"]}}</h6>
|
||||
<div class="progress"
|
||||
style="display: inline-block; height: 20%; width: 70%; background-color: rgb(139, 139, 139) !important;">
|
||||
<div class="progress-bar
|
||||
{% if item['percent_used'] <= 33 %}
|
||||
bg-success
|
||||
{% elif 34 <= item['percent_used'] <= 75 %}
|
||||
@ -121,13 +122,14 @@
|
||||
bg-danger
|
||||
{% end %}
|
||||
" role="progressbar" style="color: black; height: 100%; width: {{item['percent_used']}}%;"
|
||||
aria-valuenow="0" aria-valuemin="0" aria-valuemax="100">{{item["used"]}} / {{item["total"]}}
|
||||
aria-valuenow="0" aria-valuemin="0" aria-valuemax="100">{{item["used"]}} / {{item["total"]}}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</li>
|
||||
{% end %}
|
||||
</ul>
|
||||
</li>
|
||||
{% end %}
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -921,6 +923,30 @@
|
||||
cpu_usage.textContent = hostStats.cpu_usage;
|
||||
mem_usage.setAttribute('data-original-title', `{% raw translate("dashboard", "memUsage", data['lang']) %}: ${hostStats.mem_usage}`);
|
||||
mem_percent.textContent = hostStats.mem_percent + '%';
|
||||
|
||||
var storage_html = '<ul style="width: 100%; list-style: none;">';
|
||||
for (i = 0; i < hostStats.disk_usage.length; i++) {
|
||||
storage_html += `<li id="${hostStats.disk_usage[i].device}">
|
||||
<h6 style="display: inline-block;">${hostStats.disk_usage[i].mount}</h6>
|
||||
<div class="progress"
|
||||
style="display: inline-block; height: 20%; width: 70%; background-color: rgb(139, 139, 139) !important;"><div class="progress-bar`;
|
||||
|
||||
if (hostStats.disk_usage[i].percent_used <= 33) {
|
||||
storage_html += ` bg-success`;
|
||||
} else if (hostStats.disk_usage[i].percent_used <= 75 && hostStats.disk_usage[i].percent_used >= 34) {
|
||||
storage_html += ` bg-warning`;
|
||||
} else {
|
||||
storage_html += ` bg-danger`;
|
||||
}
|
||||
storage_html += `" role="progressbar" style="color: black; height: 100%; width: ${hostStats.disk_usage[i].percent_used}%;"
|
||||
aria-valuenow="0" aria-valuemin="0" aria-valuemax="100">${hostStats.disk_usage[i].used} / ${hostStats.disk_usage[i].total}
|
||||
</div>
|
||||
</div >
|
||||
|
||||
</li >`;
|
||||
}
|
||||
storage_html += `</ul>`;
|
||||
$("#storage_data").html(storage_html);
|
||||
});
|
||||
}
|
||||
|
||||
|
Loading…
Reference in New Issue
Block a user