Merge pull request #85 from rhanka/dev

SSE implementation into logs and jobs vues

src/assets/json/lang.json

@@ -128,7 +128,7 @@
       },
       "general": {
         "en": "Most of standard shortcuts on text editors work when your cursor is inside editor.<br/><br/> Some important ones :",
-        "fr": "La plupart des raccourcis clavier classiques d'un éditeur focntionnent ici.<br/><br/> Quelques raccourcis importants :"
+        "fr": "La plupart des raccourcis clavier classiques d'un éditeur fonctionnent ici.<br/><br/> Quelques raccourcis importants :"
       },
       "save": {
         "en": "Save",

src/assets/scss/style.scss

@@ -49,7 +49,6 @@ html, body {
   font-weight: bolder;
   font-family: monospace;
   font-size: 24px;
-  background-color: $turquoise;
   color: $white;
 }
 
@@ -199,8 +198,10 @@ html, body {
 
 .is-overflowed-x {
   overflow-x: auto;
+  overflow-y: hidden;
 }
 
 .is-overflowed-y {
   overflow-y: auto;
+  overflow-x: hidden;
 }

src/components/DataViewer.vue

@@ -84,7 +84,7 @@
       </div>
     </div>
 
-    <div  class="is-overflowed" style="height: calc(100% - 53.375px)">
+    <div class="is-overflowed-x" style="height: 100%">
       <table  class='table is-narrow is-bordered is-hoverable is-size-7'>
         <thead id="general-thead" ref="headertable">
           <tr>

src/components/Jobs.vue

@@ -128,6 +128,7 @@ export default {
   },
   data () {
     return {
+      evtSource: null,
       runningJobs: {},
       doneJobs: {},
       log: null,
@@ -150,19 +151,10 @@ export default {
       this.getLog(this.$route.params.job)
     }
   },
-  mounted () {
+  created () {
     this.getJobs()
-
-    window.bus.$on('updateJobs', v => {
-      this.runningJobs = v.running
-      this.doneJobs = v.done
-    })
-
-    if (this.$route.name === 'job') {
-      this.interval.jobs = setInterval(() => {
-        this.getLog(this.$route.params.job)
-      }, 5000)
-    }
+  },
+  mounted () {
   },
   computed: {
     filteredLog () {
@@ -195,17 +187,41 @@ export default {
         .then(response => {
           this.runningJobs = response.body.running
           this.doneJobs = response.body.done
+          if (this.$route.name === 'job') {
+            this.getLog(this.$route.params.job)
+          }
         })
     },
     getLog (recipe) {
-      this.$http.get(this.apiUrl + 'recipes/' + recipe + '/log')
-        .then(response => {
-          let arr = response.body.split('\n')
-          if ((this.log === null) || (arr.length !== this.log.length)) {
-            this.log = arr
-            this.setPageCurrent(Math.ceil(this.log.length / this.pageSize))
-          }
-        })
+      if (this.runningJobs.some(r => { return r.recipe === recipe })) {
+        this.getRunningLog(recipe)
+      } else {
+        this.$http.get(this.apiUrl + 'recipes/' + recipe + '/log')
+          .then(response => {
+            let arr = response.body.split('\n')
+            if ((this.log === null) || (arr.length !== this.log.length)) {
+              this.log = arr
+              this.setPageCurrent(Math.ceil(this.log.length / this.pageSize))
+            }
+          })
+        if (this.evtSource !== null) {
+          this.evtSource.close()
+        }
+      }
+    },
+    getRunningLog (recipe) {
+      this.evtSource = new EventSource(this.apiUrl + 'recipes/' + recipe + '/log')
+      let that = this
+      this.evtSource.addEventListener('open', function (e) {
+        that.log = []
+      }, false)
+      this.evtSource.addEventListener('message', function (e) {
+        that.log = that.log.concat(e.data.split('\n'))
+        that.setPageCurrent(Math.ceil(that.log.length / that.pageSize))
+      }, false)
+      this.evtSource.addEventListener('close', function (e) {
+        that.evtSource.close()
+      }, false)
     }
   }
 }

src/components/LogsViewer.vue

@@ -8,71 +8,61 @@
         <span>Loading logs</span>
       </div>
     </div>
-    <div class="box is-overflowed is-fullheight is-size-7" v-else>
-      <div class="tabs is-small is-centered">
-        <ul>
-          <li :class="{'is-active' : tab === 'test'}" @click="tab = 'test'">
-            <a>
-              <span class="icon" :class="warningIndicatorTest ? 'has-text-danger' : 'has-text-success'">
-                <i
-                  class="fa"
-                  :class="warningIndicatorTest ? 'fa-times' : 'fa-check'"
-                ></i>
-              </span>
-              <span>Test Logs</span>
-            </a>
-          </li>
-          <li :class="{'is-active' : tab === 'real'}" @click="tab = 'real'">
-            <a>
-              <span class="icon" :class="warningIndicatorReal ? 'has-text-danger' : 'has-text-success'">
-                <i
-                  class="fa"
-                  :class="warningIndicatorReal ? 'fa-times' : 'fa-check'"
-                ></i>
-              </span>
-              <span>Real Logs</span>
-            </a>
-          </li>
-        </ul>
-      </div>
-      <div class="columns" v-if="tab === 'test'">
+    <div class="box is-overflowed-y is-fullheight is-size-7" v-else>
+      <div class="columns">
         <div class="column is-11">
+          <div class="tabs is-small is-centered">
+            <ul>
+              <li :class="{'is-active' : tab === 'test'}" @click="tab = 'test'">
+                <a>
+                  <span class="icon" :class="warningIndicatorTest ? 'has-text-danger' : 'has-text-success'">
+                    <i
+                      class="fa"
+                      :class="warningIndicatorTest ? 'fa-times' : 'fa-check'"
+                    ></i>
+                  </span>
+                  <span>Test Logs</span>
+                </a>
+              </li>
+              <li :class="{'is-active' : tab === 'real'}" @click="tab = 'real'">
+                <a>
+                  <span class="icon" :class="warningIndicatorReal ? 'has-text-danger' : 'has-text-success'">
+                    <i
+                      class="fa"
+                      :class="warningIndicatorReal ? 'fa-times' : 'fa-check'"
+                    ></i>
+                  </span>
+                  <span>Real Logs</span>
+                </a>
+              </li>
+            </ul>
+          </div>
+          <div v-if="tab === 'test'">
             <div
               v-for="(line, index) in arrayTestLogs"
               v-if="index + 1 !== arrayTestLogs.length"
               :key="line.index"
-              :class="{'has-text-danger is-size-6' : line.match('Ooops')}"
-            >
+              :class="{'has-text-danger is-size-6' : line.match('Ooops')}">
               <span class="icon is-small" v-if="line.match('Ooops')"><i class="fa fa-warning" aria-hidden="true"></i></span>
               <span class="icon is-small" v-else><i class="fa fa-circle-o" aria-hidden="true"></i></span>
               <span>{{ line }}</span>
             </div>
-        </div>
-        <div
-          class="column is-1"
-          :class="warningIndicatorTest ? 'has-background-red' : 'has-background-green'"
-        >
-        </div>
-      </div>
-      <div class="columns" v-if="tab === 'real'">
-        <div class="column is-11">
+          </div>
+          <div v-if="tab === 'real'">
             <div
               v-for="(line, index) in arrayRealLogs"
               v-if="(index + 1 !== arrayRealLogs.length) && ((index <= 100) || (index > (arrayRealLogs.length - 100)))"
               :key="line.index"
-              :class="{'has-text-danger is-size-6' : line.match('Ooops')}"
-            >
+              :class="{'has-text-danger is-size-6' : line.match('Ooops')}">
               <span class="icon is-small" v-if="line.match('Ooops')"><i class="fa fa-warning" aria-hidden="true"></i></span>
               <span class="icon is-small" v-else><i class="fa fa-circle-o" aria-hidden="true"></i></span>
               <span v-if="index != 100">{{ line }}</span>
               <span v-else> <<< complete logs were cut for display performance >>> </span>
-
             </div>
+          </div>
         </div>
-        <div
-          class="column is-1"
-          :class="warningIndicatorReal ? 'has-background-red' : 'has-background-green'"
-        >
+        <div class="column is-1"
+          :class="((warningIndicatorReal && (tab === 'real')) || (warningIndicatorTest && (tab === 'test'))) ? 'has-background-red' : 'has-background-green'">
         </div>
       </div>
     </div>
@@ -87,16 +77,22 @@ export default {
   },
   data () {
     return {
+      evtSource: null,
       warningIndicatorTest: false,
       warningIndicatorReal: false,
       realLogs: '',
+      realLogsLoading: false,
+      lastLogsLoaded: false,
       tab: 'test',
       interval: null
     }
   },
   mounted () {
-    window.bus.$on('runningRecipe', () => {
-      this.getRealLogs(this.$route.params.recipe)
+    window.bus.$on('runningRecipeLogs', () => {
+      this.getRunningLogs(this.$route.params.recipe)
+    })
+    window.bus.$on('lastRecipeLogs', () => {
+      this.getLastLogs(this.$route.params.recipe)
     })
   },
   beforeDestroy () {
@@ -109,19 +105,42 @@ export default {
       return arr
     },
     arrayRealLogs () {
-      let arr = this.realLogs.split('\n')
+      let arr = this.realLogs.split('\n').reverse().filter(l => { return l.length > 0 })
       this.warningIndicatorReal = arr.some(v => { return v.match('Ooops') })
       return arr
     }
   },
   methods: {
-    getRealLogs (recipe) {
-      this.$http.get(this.apiUrl + 'recipes/' + recipe + '/log')
-        .then(response => {
-          this.realLogs = response.body
-        },
+    getLastLogs (recipe) {
+      if (this.lastLogsLoaded) {
+        return
+      }
+      this.lastLogsLoaded = true
+      this.$http.get(this.apiUrl + 'recipes/' + recipe + '/log').then(response => {
+        this.realLogs = response.body
+        this.realLogsLoading = false
+      },
       () => {
       })
+    },
+    getRunningLogs (recipe) {
+      if (this.realLogsLoading) {
+        return
+      }
+      this.evtSource = new EventSource(this.apiUrl + 'recipes/' + recipe + '/log')
+      this.realLogsLoading = true
+      let that = this
+      this.evtSource.addEventListener('open', function (e) {
+        that.tab = 'real'
+        that.realLogs = 'Recipe is currently processing\n'
+      }, false)
+      this.evtSource.addEventListener('message', function (e) {
+        that.realLogs = that.realLogs + e.data + '\n'
+      }, false)
+      this.evtSource.addEventListener('close', function (e) {
+        that.evtSource.close()
+        that.realLogsLoading = false
+      }, false)
     }
   }
 }

src/components/Navigation.vue

@@ -572,8 +572,9 @@ export default {
             this.recipeStatus = response.body.status
             if (this.recipeStatus === 'down') {
               this.stoppingStatus = false
+              window.bus.$emit('lastRecipeLogs')
             } else {
-              window.bus.$emit('runningRecipe')
+              window.bus.$emit('runningRecipeLogs')
             }
           })
       }

src/components/Recipe.vue

@@ -62,14 +62,14 @@
       </div>
 
       <template v-else>
-        <div class="card" style="height: 80%">
+        <div class="card" style="height: 75%">
           <data-viewer
             v-if="!loadingData"
             :data="data"
             :columns="columns"
           ></data-viewer>
         </div>
-        <div class="card" style="height: 20%">
+        <div class="card" style="height: 25%">
           <logs-viewer
             :loading="loadingLogs"
             :content="logs"