First layout for jobs logs frontend view has been implemented. Connec…

…tion to backend is missing

frontend/client/components/layout/Navbar.vue

@@ -84,6 +84,7 @@ export default {
 
     logout () {
       this.$router.push('/')
+      this.$store.commit('clearIntervals')
       auth.logout(this)
     },
 

frontend/client/router/index.js

@@ -18,21 +18,19 @@ export default new Router({
       name: 'Pipeline Detail',
       path: '/pipelines/detail',
       component: lazyLoading('pipelines/detail')
+    },
+    {
+      name: 'Job Log',
+      path: '/jobs/log',
+      component: lazyLoading('jobs/log')
     }
   ]
 })
 
-// Menu should have 2 levels.
+// Menu should have 1 level.
 function generateRoutesFromMenu (menu = [], routes = []) {
   for (let i = 0, l = menu.length; i < l; i++) {
-    let item = menu[i]
-    if (item.path && item.subroute) {
-      for (let x = 0, y = item.subroute.length; x < y; x++) {
-        routes.push(item.subroute[x])
-      }
-    } else if (item.path) {
-      routes.push(item)
-    }
+    routes.push(menu[i])
   }
   return routes
 }

frontend/client/store/getters.js

@@ -8,6 +8,7 @@ const componententry = state => {
   return state.menu.items.filter(c => c.meta && c.meta.label === 'Components')[0]
 }
 const session = state => state.session
+const intervals = state => state.intervals
 
 export {
   pkg,
@@ -17,5 +18,6 @@ export {
   effect,
   menuitems,
   componententry,
-  session
+  session,
+  intervals
 }

frontend/client/store/mutations.js

@@ -5,3 +5,20 @@ export const setSession = (state, session) => {
 export const clearSession = (state) => {
   state.session = null
 }
+
+export const appendInterval = (state, interval) => {
+  if (!state.intervals) {
+    state.intervals = []
+  }
+
+  state.intervals.push(interval)
+}
+
+export const clearIntervals = (state) => {
+  if (state.intervals) {
+    for (let i = 0, l = state.intervals.length; i < l; i++) {
+      clearInterval(state.intervals[i])
+    }
+    state.intervals = null
+  }
+}

frontend/client/views/jobs/log.vue

@@ -0,0 +1,95 @@
+<template>
+  <div class="job-log-view">
+    <message :direction="'down'" :message="'This is a cool test and test and test and test and test and test'" :duration="0"></message>
+    <div class="job-loading" v-if="jobRunning"></div>
+  </div>
+</template>
+
+<script>
+import Message from 'vue-bulma-message'
+
+export default {
+  data () {
+    return {
+      job: null,
+      jobRunning: true,
+      runID: null,
+      pipelineID: null
+    }
+  },
+
+  mounted () {
+    // Fetch data from backend
+    this.fetchData()
+
+    // periodically update dashboard
+    this.intervalID = setInterval(function () {
+      this.fetchData()
+    }.bind(this), 3000)
+  },
+
+  watch: {
+    '$route': 'fetchData'
+  },
+
+  components: {
+    Message
+  },
+
+  methods: {
+    fetchData () {
+      // look up url parameters
+      this.pipelineID = this.$route.query.pipelineid
+      this.runID = this.$route.query.runid
+      if (!this.runID || !this.pipelineID) {
+        return
+      }
+
+      this.$http
+        .get('/api/v1/pipelines', { showProgressBar: false })
+        .then(response => {
+          if (response.data) {
+            this.pipelines = response.data
+          }
+        })
+        .catch((error) => {
+          clearInterval(this.intervalID)
+          this.$onError(error)
+        })
+    }
+  }
+}
+</script>
+
+<style lang="scss">
+
+.job-log-view {
+  width: 100%;
+}
+
+.message-header {
+  background-color: #4da2fc;
+}
+
+.message-body {
+  background-color: black;
+  border: none;
+  color: whitesmoke;
+}
+
+.job-loading {
+  margin-top: 20px;
+  border: 5px solid #f3f3f3; /* Light grey */
+  border-top: 5px solid #3498db; /* Blue */
+  border-radius: 50%;
+  width: 70px;
+  height: 70px;
+  animation: spin 2s linear infinite;
+}
+
+@keyframes spin {
+  0% { transform: rotate(0deg); }
+  100% { transform: rotate(360deg); }
+}
+
+</style>

frontend/client/views/overview/index.vue

@@ -31,8 +31,7 @@
 export default {
   data () {
     return {
-      pipelines: [],
-      intervalID: null
+      pipelines: []
     }
   },
 
@@ -41,9 +40,12 @@ export default {
     this.fetchData()
 
     // periodically update dashboard
-    this.intervalID = setInterval(function () {
+    var intervalID = setInterval(function () {
       this.fetchData()
     }.bind(this), 3000)
+
+    // Append interval id to store
+    this.$store.commit('appendInterval', intervalID)
   },
 
   watch: {
@@ -60,7 +62,7 @@ export default {
           }
         })
         .catch((error) => {
-          clearInterval(this.intervalID)
+          this.$store.commit('clearIntervals')
           this.$onError(error)
         })
     },
@@ -75,7 +77,7 @@ export default {
           }
         })
         .catch((error) => {
-          clearInterval(this.intervalID)
+          this.$store.commit('clearIntervals')
           this.$onError(error)
         })
     },

frontend/client/views/pipelines/create.vue

@@ -244,8 +244,7 @@ export default {
           field: 'errmsg'
         }
       ],
-      historyRows: [],
-      intervalID: null
+      historyRows: []
     }
   },
 
@@ -261,9 +260,12 @@ export default {
     this.fetchData()
 
     // periodically update history dashboard
-    this.intervalID = setInterval(function () {
+    var intervalID = setInterval(function () {
       this.fetchData()
     }.bind(this), 3000)
+
+    // Append interval id to store
+    this.$store.commit('appendInterval', intervalID)
   },
 
   watch: {
@@ -280,7 +282,7 @@ export default {
           }
         })
         .catch((error) => {
-          clearInterval(this.intervalID)
+          this.$store.commit('clearIntervals')
           this.$onError(error)
         })
     },

frontend/client/views/pipelines/detail.vue

@@ -104,8 +104,7 @@ export default {
           },
           arrows: {to: true}
         }
-      },
-      intervalID: null
+      }
     }
   },
 
@@ -115,9 +114,12 @@ export default {
 
     // periodically update view
     this.fetchData()
-    this.intervalID = setInterval(function () {
+    var intervalID = setInterval(function () {
       this.fetchData()
     }.bind(this), 3000)
+
+    // Append interval id to store
+    this.$store.commit('appendInterval', intervalID)
   },
 
   watch: {
@@ -160,7 +162,7 @@ export default {
             this.runsRows = pipelineRuns.data
           }.bind(this)))
           .catch((error) => {
-            clearInterval(this.intervalID)
+            this.$store.commit('clearIntervals')
             this.$onError(error)
           })
       } else {
@@ -174,7 +176,7 @@ export default {
             this.runsRows = pipelineRuns.data
           }.bind(this)))
           .catch((error) => {
-            clearInterval(this.intervalID)
+            this.$store.commit('clearIntervals')
             this.$onError(error)
           })
       }

frontend/package.json

@@ -49,6 +49,7 @@
     "vue-bulma-collapse": "1.0.3",
     "vue-bulma-datepicker": "^1.3.0",
     "vue-bulma-expanding": "^0.0.1",
+    "vue-bulma-message": "^1.1.1",
     "vue-bulma-modal": "1.0.1",
     "vue-bulma-notification-fixed": "^1.1.0",
     "vue-bulma-progress-bar": "^1.0.2",