15308555518/ mirror-web
1
0
Fork 0
mirror of https://github.com/tuna/mirror-web.git synced 2025-12-25 20:32:46 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

diskusgae: show multiple bars

This commit is contained in:
Miao Wang 2021-08-13 19:09:32 +08:00
parent 8f83e5ac78
commit f8ed575e2a
3 changed files with 34 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
_includes/status-pic.html
View File

@ -1,4 +1,4 @@
<div class="col-md-6">
<div class="col-md-6 col-xs-12">
<picture class="thumbnail">
<source
srcset="/static/status/{{include.name}}-day-dark.png 1x,

31
static/js/status.es6
View File

@ -10,12 +10,31 @@ $(document).ready(() => {
}
return size.toFixed(1) + ' ' + units[i];
}
$.get("/static/status/disk.json", (d) => {
var used_percent = Math.round(d.used_kb * 100 / d.total_kb);
$('#disk-usage-bar')
.attr("aria-valuenow", used_percent)
.css("width", used_percent + "%")
.html("<strong>" + readableFileSize(d.used_kb * 1024) + " / " + readableFileSize(d.total_kb * 1024) + "</strong>");
const diskUsage = new Vue({
el: "#disk-usage",
data: {
diskUsages: []
},
created () {
$.get("/static/status/disk.json", (d) => {
if(!Array.isArray(d)){
d = [d];
}
this.diskUsages = d.map((disk) => ({
desc: disk.desc,
used: readableFileSize(disk.used_kb * 1024),
total: readableFileSize(disk.total_kb * 1024),
persentage: 0,
_persentage: Math.round(disk.used_kb * 100 / disk.total_kb)
}));
setTimeout(()=>{
this.diskUsages.forEach((disk) => {
disk.persentage = disk._persentage;
});
}, 0);
});
}
});
const SCROLL_INTERVAL = 2000;

12
status.html
View File

@ -19,14 +19,18 @@ permalink: /status/
{% include status-pic.html name="service_traffic_IPv6" %}
</div>
<h4># 磁盘状态 </h4>
<div class="row">
<div class="col-md-12"><strong>磁盘占用</strong>: </div>
<div class="col-md-12">
<div class="row" id="disk-usage">{% raw %}
<div class="col-md-12" v-if="diskUsages.length"><strong>磁盘占用</strong>: </div>
<template v-for="disk in diskUsages">
<div class="col-xs-1" v-if="disk.desc">{{ disk.desc }}</div>
<div :class="['col-xs-' + (disk.desc ? '11' : '12')]">
<div class="progress">
<div id="disk-usage-bar" class="progress-bar" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100" style="width: 0%;">
<div class="progress-bar" role="progressbar" :aria-valuenow="disk.persentage" aria-valuemin="0" aria-valuemax="100" :style="{width: disk.persentage + '%'}">
<strong>{{ disk.used }} / {{ disk.total }}</strong>
</div>
</div>
</div>
</template>{% endraw %}
{% include status-pic.html name="diskstats_iops" %}
{% include status-pic.html name="diskstats_throughput" %}
</div>