Notifications

package.json

@@ -19,6 +19,8 @@
     "event-emitter": "^0.3.5",
     "jquery": "^3.2.1",
     "moment": "^2.22.0",
+    "moment-duration-format": "^2.2.2",
+    "noty": "^3.2.0-beta",
     "tiny-emitter": "^2.0.2",
     "util.inherits": "^1.0.3",
     "vue": "^2.4.2",

src/App.vue

@@ -4,10 +4,10 @@
     <div class="container">
       <div class="row">
         <main role="main" class="col-md-12 ml-sm-auto col-lg-12 pt-3 px-4">
-        <div class="d-flex justify-content-between flex-wrap flex-md-nowrap align-items-center pb-2 mb-3 border-bottom">
-          <h1 class="h2">Jobs</h1>
-        </div>
-        <job v-for="(job, id) in jobs" :job="job" :key="job.id"></job>
+          <div class="d-flex justify-content-between flex-wrap flex-md-nowrap align-items-center pb-2 mb-3 border-bottom">
+            <h1 class="h2">Jobs</h1>
+          </div>
+          <job v-for="(job, id) in jobs" :job="job" :key="job.id"></job>
         </main>
       </div>
     </div>
@@ -19,6 +19,12 @@ import Vue from 'vue'
 import job from './components/Job';
 import navbar from './components/Nav';
 import EventWebSocket from './websocket';
+import Noty from 'noty';
+
+Noty.overrideDefaults({
+  theme: 'bootstrap-v4',
+  timeout: 5000
+});
 
 let d = {
   jobs: {},
@@ -27,6 +33,14 @@ let d = {
 
 let ws = new EventWebSocket(window.arm_config.url);
 
+ws.on('notification', function(data) {
+  console.log(data);
+  new Noty({
+    type: data.type || 'alert',
+    text: data.message
+  }).show();
+});
+
 ws.on('jobs', function(data) {
   // Create jobs components
   d.jobs = data;

src/assets/scss/app.scss

@@ -1,7 +1,9 @@
 @import '_variables.scss';
 @import '~bootstrap/scss/bootstrap';
 @import '~bootstrap-vue/dist/bootstrap-vue.css';
-@import '_sidebar.scss';
+@import '~noty/src/noty';
+@import '~noty/src/themes/bootstrap-v4';
+@import '_sidebar';
 
 .margin-top-10 {
   margin-top: 10px;

src/components/Job.vue

@@ -29,6 +29,11 @@
 </template>
 
 <script>
+  import moment from 'moment';
+  import momentDurationFormatSetup from 'moment-duration-format';
+
+  momentDurationFormatSetup(moment);
+
   export default {
     name: 'job',
     props: [ 'job' ],
@@ -49,9 +54,11 @@
         }
 
         // Job is in nanoseconds because of Go's time.Duration
-        let eta = moment.duration(this.job.eta / 1000);
+        let eta = moment.duration(this.job.progress.eta / 1000 / 1000);
 
-        return eta.humanize();
+        return eta.format("w[w] d[d] h[h] m[m] s[s]", {
+          trim: "both mid"
+        });
       }
     }
   }