From f8ed575e2ab0a5375cd2cc3ac0848c43ebdf8b65 Mon Sep 17 00:00:00 2001
From: Miao Wang <shankerwangmiao@gmail.com>
Date: Fri, 13 Aug 2021 19:09:32 +0800
Subject: [PATCH] diskusgae: show multiple bars

---
 _includes/status-pic.html |  2 +-
 static/js/status.es6      | 31 +++++++++++++++++++++++++------
 status.html               | 12 ++++++++----
 3 files changed, 34 insertions(+), 11 deletions(-)

diff --git a/_includes/status-pic.html b/_includes/status-pic.html
index bf1cdda..8b01190 100644
--- a/_includes/status-pic.html
+++ b/_includes/status-pic.html
@@ -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,
diff --git a/static/js/status.es6 b/static/js/status.es6
index aeb60a2..1706103 100644
--- a/static/js/status.es6
+++ b/static/js/status.es6
@@ -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;
diff --git a/status.html b/status.html
index 79aa814..3ba3bc2 100644
--- a/status.html
+++ b/status.html
@@ -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>