diff options
| -rw-r--r-- | contrib/dashboard.html | 3 | ||||
| -rw-r--r-- | contrib/dashboard.js | 17 |
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', |