Mirrored_Repos/crafty-4
1
0
Fork 0
mirror of https://gitlab.com/crafty-controller/crafty-4.git synced 2024-08-30 18:23:09 +00:00
Code Issues Packages Projects Releases Wiki Activity

Inprove Storage Display

Browse Source
This commit is contained in:
Silversthorn 2023-02-07 19:56:13 +01:00
parent 5d5f0eaaa5
commit 8b48d73a85
1 changed files with 81 additions and 91 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

46
app/frontend/templates/panel/dashboard.html
View File

@ -42,7 +42,6 @@
},
});
});
</script>
{% end %}
<div class="row">
@ -50,7 +49,7 @@
<div class="card">
<div class="card-body">
<div class="row">
<div class="col-lg-3 col-md-6">
<div class="col-xl-4 col-md-5">
<div class="d-flex">
<div class="wrapper">
<h5 class="mb-1 font-weight-medium text-primary"> {{ translate('dashboard', 'host', data['lang']) }}
@ -72,7 +71,7 @@
</div>
</div>
</div>
<div class="col-lg-3 col-md-6 mt-md-0 mt-4">
<div class="col-xl-4 col-md-4 mt-md-0 mt-4">
<div class="d-flex">
<div class="wrapper">
<h5 class="mb-1 font-weight-medium text-primary">{{ translate('dashboard', 'servers', data['lang']) }}
@ -88,7 +87,7 @@
</div>
</div>
</div>
<div class="col-lg-2 col-md-6 mt-md-0 mt-4">
<div class="col-xl-4 col-md-3 mt-md-0 mt-4">
<div class="d-flex">
<div class="wrapper">
<h5 class="mb-1 font-weight-medium text-primary">{{ translate('dashboard', 'players', data['lang']) }}
@ -101,23 +100,18 @@
</div>
</div>
</div>
<div class="col-lg-4 col-md-6 mt-md-0 mt-4">
<div class="col-12 mt-4">
<div class="d-flex">
<div class="wrapper" style="width: 100%;">
<h5 class="mb-1 font-weight-medium text-primary">Storage
</h5>
<div id="storage_data">
<table id="storage_table" class="table table-hover" style="width: 100%;">
<tbody>
<div class="row">
{% for item in data.get('hosts_data').get('disk_json') %}
{% if item["mount"] in data["monitored"] %}
<tr id="{{item['device']}}">
<td>
<h6 style="display: inline-block;">{{item["mount"]}}</h6>
</td>
<td>
<div class="progress"
style="display: inline-block; height: 20px; width: 70%; background-color: rgb(139, 139, 139) !important;">
<div id="{{item['device']}}" class="col-xl-3 col-lg-3 col-md-4 col-12">
<h4 class="mb-0 font-weight-semibold" id="total_players"><i class="fas fa-hdd"></i> {{item["mount"]}}</h4>
<div class="progress" style="display: inline-block; height: 20px; width: 100%; background-color: rgb(139, 139, 139) !important;">
<div class="progress-bar
{% if item['percent_used'] <= 33 %}
bg-success
@ -131,12 +125,10 @@
{{item["total"]}}
</div>
</div>
</td>
</tr>
</div>
{% end %}
{% end %}
</tbody>
</table>
</div>
</div>
</div>
</div>
@ -932,14 +924,13 @@
mem_usage.setAttribute('data-original-title', `{% raw translate("dashboard", "memUsage", data['lang']) %}: ${hostStats.mem_usage}`);
mem_percent.textContent = hostStats.mem_percent + '%';
var storage_html = '<table id="storage_table" class="table table-hover" style="width: 100%;"><tbody>';
var storage_html = '<div class="row">';
for (i = 0; i < hostStats.disk_usage.length; i++) {
if (hostStats.mounts.includes(hostStats.disk_usage[i].mount)) {
storage_html += `<tr id="${hostStats.disk_usage[i].device}"><td>
<h6 style="display: inline-block;">${hostStats.disk_usage[i].mount}</h6></td><td>
<div class="progress"
style="display: inline-block; height: 20px; width: 70%; background-color: rgb(139, 139, 139) !important;"><div class="progress-bar`;
storage_html += `<div id="{{item['device']}}" class="col-xl-3 col-lg-3 col-md-4 col-12">
<h4 class="mb-0 font-weight-semibold" id="total_players"><i class="fas fa-hdd"></i> ${hostStats.disk_usage[i].mount}</h4>
<div class="progress" style="display: inline-block; height: 20px; width: 100%; 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) {
@ -950,12 +941,11 @@
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 >
</td></tr>`;
</div>
</div>`;
}
}
storage_html += `</tbody></table>`;
storage_html += `</div>`;
$("#storage_data").html(storage_html);
});
}