use vuejs-logger & improve logging

package.json

@@ -14,7 +14,8 @@
     "filesize": "^4.1.2",
     "oidc-client": "^1.7.1",
     "vue": "^2.6.10",
-    "vue-router": "^3.0.6"
+    "vue-router": "^3.0.6",
+    "vuejs-logger": "^1.5.3"
   },
   "devDependencies": {
     "@vue/cli-plugin-babel": "^3.7.0",

sample.env.development

@@ -21,3 +21,8 @@ VUE_APP_API_STEERING_OIDC_REDIRECT_URI_POSTLOGOUT = http://localhost:8080
 # =====================
 VUE_APP_TIMESLOT_FILTER_DEFAULT_NUMSLOTS = 10
 VUE_APP_TIMESLOT_FILTER_DEFAULT_DAYS = 60
+
+# Dashboard logging & debugging
+# =============================
+# use one of: debug, info, warn, error, fatal
+VUE_APP_LOGLEVEL = warn

src/components/FileManager.vue

@@ -756,8 +756,8 @@ export default {
       this.loaded.shows = true
       this.switchShow(this.currentShow)
     }).catch(error => {
-      console.log('Error: ' + error.response.status + ' ' + error.response.statusText)
-      console.log(error.response)
+      this.$log.error(error.response.status + ' ' + error.response.statusText)
+      this.$log.error(error.response)
       alert('Error: could not fetch shows from steering. See console for details.')
     })
   },
@@ -887,8 +887,8 @@ export default {
       }).then(
         this.fetchPlaylists(this.shows[this.currentShow].slug)
       ).catch(error => {
-        console.log('Error: ' + error.response.status + ' ' + error.response.statusText)
-        console.log(error.response)
+        this.$log.error(error.response.status + ' ' + error.response.statusText)
+        this.$log.error(error.response)
         alert('Error: could not delete playlist. See console for details.')
       })
     },
@@ -939,8 +939,8 @@ export default {
         }).then(response => {
           this.playlists.push(response.data)
         }).catch(error => {
-          console.log('Error: ' + error.response.status + ' ' + error.response.statusText)
-          console.log(error.response)
+          this.$log.error(error.response.status + ' ' + error.response.statusText)
+          this.$log.error(error.response)
           alert('Error: could not add new playlist. See console for details.')
         })
 
@@ -956,8 +956,8 @@ export default {
           this.playlists[this.getPlaylistById(id, 'index')] = response.data
           this.$refs.playlistsTable.refresh()
         }).catch(error => {
-          console.log('Error: ' + error.response.status + ' ' + error.response.statusText)
-          console.log(error.response)
+          this.$log.error(error.response.status + ' ' + error.response.statusText)
+          this.$log.error(error.response)
           alert('Error: could not update playlist. See console for details.')
         })
       }
@@ -998,8 +998,8 @@ export default {
         }).then(response => {
           this.getFileById(this.temp.id).metadata = response.data.metadata
         }).catch(error => {
-          console.log('Error: ' + error.response.status + ' ' + error.response.statusText)
-          console.log(error.response)
+          this.$log.error(error.response.status + ' ' + error.response.statusText)
+          this.$log.error(error.response)
           alert('Error: could not save metadata info to file. See console for details.')
         })
       }
@@ -1016,8 +1016,8 @@ export default {
       }).then(
         this.fetchFiles(this.shows[this.currentShow].slug)
       ).catch(error => {
-        console.log('Error: ' + error.response.status + ' ' + error.response.statusText)
-        console.log(error.response)
+        this.$log.error(error.response.status + ' ' + error.response.statusText)
+        this.$log.error(error.response)
         alert('Error: could not delete file. See console for details.')
       })
     },
@@ -1040,8 +1040,8 @@ export default {
             this.uploadInterval = setInterval(() => { this.fetchImports(this.shows[this.currentShow].slug) }, 250)
           }
         }).catch(error => {
-          console.log('Error: ' + error.response.status + ' ' + error.response.statusText)
-          console.log(error.response)
+          this.$log.error(error.response.status + ' ' + error.response.statusText)
+          this.$log.error(error.response)
           alert('Error: could not add the new remote import. See console for details.')
         })
       } else if (this.uploadSourceFile) {
@@ -1056,8 +1056,8 @@ export default {
             this.uploadInterval = setInterval(() => { this.fetchImports(this.shows[this.currentShow].slug) }, 250)
           }
         }).catch(error => {
-          console.log('Error: ' + error.response.status + ' ' + error.response.statusText)
-          console.log(error.response)
+          this.$log.error(error.response.status + ' ' + error.response.statusText)
+          this.$log.error(error.response)
           alert('Error: could not add the new file upload. See console for details.')
         })
       } else {
@@ -1077,8 +1077,8 @@ export default {
       }).then(
         this.upload(id)
       ).catch(error => {
-        console.log('Error: ' + error.response.status + ' ' + error.response.statusText)
-        console.log(error.response)
+        this.$log.error(error.response.status + ' ' + error.response.statusText)
+        this.$log.error(error.response)
         alert('Error: could not start the file upload. See console for details.')
       })
     },
@@ -1097,10 +1097,10 @@ export default {
         prioritizeFirstAndLastChunk: true
       })
       flow.on('fileSuccess', function(file, message) {
-        console.log(file, message)
+        this.$log.error(file, message)
       })
       flow.on('fileError', function(file, message) {
-        console.log(file, message)
+        this.$log.error(file, message)
         alert('Error: could not upload your file. See console for details.')
       })
       flow.addFile(this.uploadSourceFile)
@@ -1114,15 +1114,15 @@ export default {
           'Content-Type': 'application/octet-stream'
         }
       }).then(() => {
-        console.log('Sucessfully uploaded file.')
+        this.$log.info('Sucessfully uploaded file.')
         // now we start polling for the import progress
         // the fetchImports function has to make sure to deactivate the interval
         // again, when all running imports are done (in this first raw version;
         // ideally we should refine this so that every single file gets updated independently)
         //this.uploadInterval = setInterval(() => { this.fetchImports(this.shows[this.currentShow].slug) }, 100)
       }).catch(error => {
-        console.log('Error: ' + error.response.status + ' ' + error.response.statusText)
-        console.log(error.response)
+        this.$log.error(error.response.status + ' ' + error.response.statusText)
+        this.$log.error(error.response)
         alert('Error: could not start the file upload. See console for details.')
       })
     },
@@ -1134,6 +1134,7 @@ export default {
       this.currentShow = index
       this.currentShowID = this.shows[this.currentShow].id
       this.fetchShow(this.shows[this.currentShow].slug)
+      this.$log.debug('show switched to ' + this.shows[this.currentShow].slug + ' (id: ' + this.shows[this.currentShow].id + ')')
     },
 
     // This function is used to visually switch between the files and playlists
@@ -1159,12 +1160,16 @@ export default {
         headers: { 'Authorization': 'Bearer ' + this.$parent.user.access_token }
       }).then(response => {
         // if all imports are done, we will receive an empty result set and stop
-        // polling the server again. now we can also refetch all file statuses.
-        if (response.data.results === null) {
+        // polling the server again. then we can also refetch all file statuses.
+        if (response.data.results.length === 0) {
           clearInterval(this.uploadInterval)
           this.uploadInterval = null
           this.fetchShow(slug)
-        } else {
+        }
+        // if there are still imports going on, we just updated the respective
+        // progress information for the import we just fetched and rerender
+        // the filesTable
+        else {
           for (var i in response.data.results) {
             var f = this.getFileById(response.data.results[i].id)
             if (f) {
@@ -1172,13 +1177,25 @@ export default {
                 progress: response.data.results[i].progress.progress,
                 step: response.data.results[i].progress.step
               }
+              let p = '[import]'
+              p += ' id: ' + response.data.results[i].id
+              p += ', progress: ' + response.data.results[i].progress.progress
+              p += ', step: ' + response.data.results[i].progress.step
+              this.$log.debug(p)
             }
             this.$refs.filesTable.refresh()
           }
         }
       }).catch(error => {
-        console.log('Error: ' + error.response.status + ' ' + error.response.statusText)
-        console.log(error.response)
+        // also in case of an error we have to cancel the uploadInterval,
+        // otherwise we'll continuosly get alerts if the error is persistent
+        clearInterval(this.uploadInterval)
+        if (error.response) {
+          this.$log.error(error.response.status + ' ' + error.response.statusText)
+          this.$log.error(error.response)
+        } else {
+          this.$log.error(error)
+        }
         alert('Error: could not fetch current imports. See console for details.')
       })
     },
@@ -1202,8 +1219,8 @@ export default {
         this.files = response.data.results
         this.loaded.files = true
       }).catch(error => {
-        console.log('Error: ' + error.response.status + ' ' + error.response.statusText)
-        console.log(error.response)
+        this.$log.error(error.response.status + ' ' + error.response.statusText)
+        this.$log.error(error.response)
         alert('Error: could not fetch files from tank. See console for details.')
       })
     },
@@ -1221,8 +1238,8 @@ export default {
         this.playlists = response.data.results
         this.loaded.playlists = true
       }).catch(error => {
-        console.log('Error: ' + error.response.status + ' ' + error.response.statusText)
-        console.log(error.response)
+        this.$log.error(error.response.status + ' ' + error.response.statusText)
+        this.$log.error(error.response)
         alert('Error: could not fetch playlists from tank. See console for details.')
       })
     }

src/main.js

@@ -2,6 +2,17 @@ import Vue from 'vue'
 import App from './App.vue'
 import router from './router'
 import BootstrapVue from 'bootstrap-vue'
+import VueLogger from 'vuejs-logger';
+
+Vue.use(VueLogger, {
+    isEnabled: true,
+    logLevel : ['debug', 'info', 'warn', 'error', 'fatal'].indexOf(process.env.VUE_APP_LOGLEVEL) === -1 ? 'warn' : process.env.VUE_APP_LOGLEVEL,
+    stringifyArguments : false,
+    showLogLevel : true,
+    showMethodName : true,
+    separator: '|',
+    showConsoleColors: true
+});
 
 Vue.use(BootstrapVue)