From 7d4801c1f25db31af519612b39c0decb8ab0c079 Mon Sep 17 00:00:00 2001
From: bigeagle <justin.w.xd@gmail.com>
Date: Fri, 6 May 2016 10:54:54 +0800
Subject: [PATCH] added detailed syncing status page

---
 index.html            |  3 ++-
 static/css/style.scss | 17 ++++++++++++++++
 static/js/status.es6  | 45 +++++++++++++++++++++++++++++++++++++++++++
 status.html           | 39 ++++++++++++++++++++++++++-----------
 4 files changed, 92 insertions(+), 12 deletions(-)
 create mode 100644 static/js/status.es6

diff --git a/index.html b/index.html
index 6401963..72e8ab2 100644
--- a/index.html
+++ b/index.html
@@ -69,7 +69,8 @@ permalink: /
 							<h4> <span class="fa fa-external-link"></span> 相关链接 </h4>
 							<ul>
 								<li><a href="/help/">使用帮助</a></li>
-								<li><a href="/status/">服务器状态</a></li>
+								<li><a href="/status/#server-status">服务器状态</a></li>
+								<li><a href="/status/#syncing-status">同步状态</a></li>
 								<li><a href="https://tuna.moe/">清华大学 TUNA 协会</a></li>
 							</ul>
 						</div>
diff --git a/static/css/style.scss b/static/css/style.scss
index ea853fc..ecfca6b 100644
--- a/static/css/style.scss
+++ b/static/css/style.scss
@@ -97,6 +97,23 @@ $font_local: 'Heiti SC', 'Hiragino Sans GB', 'STHeiti', 'Source Han Sans CN', 'W
 	}
 }
 
+#status-page {
+	.thead {
+		font-weight: bold;	
+	}
+	#mirror-list {
+		.status-syncing {
+			background-color: #e3fffd;
+		}
+		:hover {
+			background-color: #e0f3fc;
+		}
+		.status-fail, .status-failed {
+			background-color: #fff4e3;
+		}
+	}
+}
+
 #help-page {
 	margin-top: 40px;
 	margin-bottom: 40px;
diff --git a/static/js/status.es6 b/static/js/status.es6
new file mode 100644
index 0000000..78685c7
--- /dev/null
+++ b/static/js/status.es6
@@ -0,0 +1,45 @@
+---
+---
+$(document).ready(() => {
+	var mir_tmpl = $("#template").text();
+	
+	$.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>" + d.used_readable + " / " + d.total_readable + "</strong>");
+	});
+
+	window.refreshMirrorList = () => {
+		$.getJSON("/static/tunasync.json", (status_data) => {
+			var mirrors=[], mir_data=status_data;
+
+			mir_data.sort((a, b) => { return a.name < b.name ? -1: 1 });
+
+			for(var k in mir_data) {
+				var d = mir_data[k];
+				if (d.is_master === undefined) {
+					d.is_master = true;
+				}
+				// Strip the second component of last_update
+				if (d.last_update_ts) {
+					let date = new Date(d.last_update_ts * 1000);
+					if (date.getFullYear() > 2000) {
+						d.last_update = `${('000'+date.getFullYear()).substr(-4)}-${('0'+(date.getMonth()+1)).substr(-2)}-${('0'+(date.getDay()+1)).substr(-2)}` +
+							` ${('0'+date.getHours()).substr(-2)}:${('0'+date.getMinutes()).substr(-2)}`;
+					} else {
+						d.last_update = "0000-00-00 00:00";
+					}
+				} else {
+					d.last_update = d.last_update.replace(/(\d\d:\d\d):\d\d(\s\+\d\d\d\d)?/, '$1');
+				}
+				mirrors.push(d);
+			}
+			var result = Mark.up(mir_tmpl, {mirrors: mirrors});
+			$('#mirror-list').html(result);
+		});
+		setTimeout(refreshMirrorList, 10000);
+	};
+	refreshMirrorList();
+});
diff --git a/status.html b/status.html
index d8d69d2..28449a1 100644
--- a/status.html
+++ b/status.html
@@ -9,7 +9,7 @@ permalink: /status/
 	<div id="status-page">
 		<div class="spacing hidden-xs"></div>
 		<div class="container">
-			<h3> # 服务器监控 </h3>
+			<h3 id="server-status"> # 服务器监控 </h3>
 			<h4> # 网络流量 </h4>
 			<div class="row">
 				<div class="col-md-6">
@@ -56,20 +56,37 @@ permalink: /status/
 					</div>
 				</div>
 			</div>
+			<h3 id="syncing-status"># 同步状态</h3>
+			<div>
+				<div class="thead row">
+					<div>
+						<div class="col-md-2">Name</div>
+						<div class="col-md-2">Last Update</div>
+						<div class="col-md-5">Upstream</div>
+						<div class="col-md-1">Status</div>
+						<div class="col-md-2">Size</div>
+					</div>
+				</div>
+				<div id="mirror-list">
+				</div>
+			</div>
 		</div><!--/container -->
 	</div><!--/status -->
 	{% include footer.html %}
-	<script>
-$(document).ready(function(){
-	$.get("/static/status/disk.json", function(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>" + d.used_readable + " / " + d.total_readable + "</strong>");
-	});
-});
+	{% raw %}
+	<script id="template" type="x-tmpl-markup">
+{{mirrors}}
+<div class="status-{{status}} row">
+	<div class="col-md-2">{{name}}{{if is_master|falsy}}[slave]{{/if}}</div>
+	<div class="col-md-2">{{last_update}}</div>
+	<div class="col-md-5">{{upstream}}</div>
+	<div class="col-md-1">{{status}}</div>
+	<div class="col-md-2">{{size}}</div>
+</div>
+{{/mirrors}}
 	</script>
+	{% endraw %}
+	<script src="/static/js/status.js"></script>
 </body>
 </html>
 <!--