Dynamically update storage on host stats

This commit is contained in:
amcmanu3 2023-02-05 18:03:36 -05:00
parent f00182e8e9
commit f824ca2959

View File

@ -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);
});
}