dashboard: Add global bot stats

2 files changed, 18 insertions, 2 deletions

diff --git a/contrib/dashboard.html b/contrib/dashboard.html
index cc09d50..4468786 100644
--- a/contrib/dashboard.html
+++ b/contrib/dashboard.html
@@ -4,7 +4,7 @@
 		<meta charset="utf-8">
 		 <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
         <title>chromebot dashboard</title>
-		<!--<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>-->
+		<!--<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>-->
 		<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.min.js"></script>
 		<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma@0.7/css/bulma.min.css">
 		<link rel="stylesheet" href="dashboard.css">
@@ -13,6 +13,7 @@
 		<noscript>Please enable JavaScript.</noscript>
 		<section id="app" class="section">
 		<h1 class="title">chromebot dashboard</h1>
+		<bot-status v-bind:jobs="jobs"></bot-status>
 		<div class="jobs">
 			<job-item v-for="j in jobs" v-bind:job="j" v-bind:jobs="jobs" v-bind:ignored="ignored" v-bind:key="j.id"></job-item>
 		</div>
diff --git a/contrib/dashboard.js b/contrib/dashboard.js
index eb34d43..e07f8e3 100644
--- a/contrib/dashboard.js
+++ b/contrib/dashboard.js
@@ -1,5 +1,5 @@
 /* configuration */
-let socket = "ws://localhost:6789/",
+let socket = "wss://localhost:6789/",
 	urllogMax = 100;
 
 function formatSize (bytes) {
@@ -117,6 +117,21 @@ Vue.component('filesize', {
   template: '<span class="filesize">{{ fvalue }}</span>',
   computed: { fvalue: function () { return formatSize (this.value); } }
 });
+Vue.component('bot-status', {
+	props: ['jobs'],
+	template: '<nav class="level"><div class="level-item has-text-centered"><div><p class="heading">Pending</p><p class="title">{{ stats.pending }}</p></div></div><div class="level-item has-text-centered"><div><p class="heading">Running</p><p class="title">{{ stats.running }}</p></div></div><div class="level-item has-text-centered"><div><p class="heading">Finished</p><p class="title">{{ stats.finished+stats.aborted }}</p></div></div><div class="level-item has-text-centered"><div><p class="heading">Transferred</p><p class="title"><filesize v-bind:value="stats.totalBytes"></filesize></p></div></div></nav>',
+	computed: {
+		stats: function () {
+			let s = {pending: 0, running: 0, finished: 0, aborted: 0, totalBytes: 0};
+			for (let k in this.jobs) {
+				let j = this.jobs[k];
+				s[j.status]++;
+				s.totalBytes += j.stats.bytesRcv;
+			}
+			return s;
+		}
+	}
+});
 
 let app = new Vue({
   el: '#app',