WIP job log view

Author: michelvocks

frontend/client/router/index.js

@@ -20,7 +20,7 @@ export default new Router({
       component: lazyLoading('pipelines/detail')
     },
     {
-      name: 'Job Log',
+      name: 'Logs',
       path: '/jobs/log',
       component: lazyLoading('jobs/log')
     }

frontend/client/views/jobs/log.vue

@@ -1,6 +1,6 @@
 <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>
+    <message :direction="'down'" :message="logText" :duration="0"></message>
     <div class="job-loading" v-if="jobRunning"></div>
   </div>
 </template>
@@ -11,14 +11,19 @@ import Message from 'vue-bulma-message'
 export default {
   data () {
     return {
-      job: null,
+      logText: '',
       jobRunning: true,
       runID: null,
-      pipelineID: null
+      pipelineID: null,
+      jobID: null,
+      startPos: 0
     }
   },
 
   mounted () {
+    // Reset log text
+    this.logText = ''
+
     // Fetch data from backend
     this.fetchData()
 
@@ -38,18 +43,37 @@ export default {
 
   methods: {
     fetchData () {
-      // look up url parameters
+      // look up required url parameters
       this.pipelineID = this.$route.query.pipelineid
       this.runID = this.$route.query.runid
       if (!this.runID || !this.pipelineID) {
         return
       }
 
+      // job id is optional. If ommitted, all logs from all jobs
+      // are displayed.
+      this.jobID = this.$route.query.jobID
+
+      // Maximum received bytes
+      const bufferSize = 1024
       this.$http
-        .get('/api/v1/pipelines', { showProgressBar: false })
+        .get('/api/v1/jobs/log', {
+          showProgressBar: false,
+          params: {
+            pipelineid: this.pipelineid,
+            runid: this.runID,
+            jobid: this.jobid,
+            start: this.startPos,
+            maxbufferlen: bufferSize
+          }
+        })
         .then(response => {
           if (response.data) {
-            this.pipelines = response.data
+            // We add the received log
+            this.logText += response.data.log
+
+            // Set the new start position defined by return value
+            this.startPos = response.data.start
           }
         })
         .catch((error) => {

frontend/client/views/pipelines/detail.vue

@@ -4,6 +4,11 @@
       <div class="tile">
         <div class="tile is-vertical is-parent is-12">
           <article class="tile is-child notification content-article">
+            <div v-if="job">
+              <p>
+                Job: {{ job }}
+              </p>
+            </div>
             <div id="pipeline-detail"></div>
           </article>
         </div>
@@ -74,6 +79,7 @@ export default {
         }
       ],
       runsRows: [],
+      job: null,
       pipelineViewOptions: {
         physics: { stabilization: true },
         layout: {
@@ -305,6 +311,11 @@ export default {
         // Create vis network
         // We have to move out the instance out of vue because of https://github.com/almende/vis/issues/2567
         window.pipelineView = new Vis.Network(container, data, this.pipelineViewOptions)
+
+        // Create an selectNode event
+        window.pipelineView.on('selectNode', function (params) {
+          this.job = this.nodes.get(params.nodes[0])
+        }.bind(this))
       }
     },
 

handlers/handler.go

@@ -79,7 +79,7 @@ func InitHandlers(i *iris.Application, store *store.Store, scheduler *scheduler.
 	i.Get(p+"pipelines/runs/{pipelineid:string}", PipelineGetAllRuns)
 
 	// Jobs
-	i.Get(p+"jobs/log{pipelineid:int}{pipelinerunid:int}{jobid:int}{start:int}{maxbufferlen:int}", GetJobLogs)
+	i.Get(p+"jobs/log{pipelineid}{pipelinerunid}{jobid}{start:int}{maxbufferlen:int}", GetJobLogs)
 
 	// Authentication Barrier
 	i.UseGlobal(authBarrier)

handlers/job.go

@@ -13,7 +13,14 @@ const (
 	maxMaxBufferLen = 1024
 )
 
-// GetJobLogs returns logs for the given job with paging option.
+// jobLogs represents the json format which is returned
+// by GetJobLogs.
+type jobLogs struct {
+	Log      string `json:"log"`
+	StartPos int    `json:"start"`
+}
+
+// GetJobLogs returns logs and new start position for the given job.
 //
 // Required parameters:
 // pipelineid - Related pipeline id
@@ -26,7 +33,7 @@ func GetJobLogs(ctx iris.Context) {
 	pipelineID := ctx.Params().Get("pipelineid")
 	pipelineRunID := ctx.Params().Get("pipelinerunid")
 	jobID := ctx.Params().Get("jobid")
-	startPos, err := ctx.Params().GetInt64("start")
+	startPos, err := ctx.Params().GetInt("start")
 	if err != nil {
 		ctx.StatusCode(iris.StatusBadRequest)
 		ctx.WriteString("invalid start position given")
@@ -58,13 +65,19 @@ func GetJobLogs(ctx iris.Context) {
 
 	// Read file
 	buf := make([]byte, maxBufferLen)
-	_, err = file.ReadAt(buf, startPos)
+	bytesRead, err := file.ReadAt(buf, int64(startPos))
 	if err != io.EOF && err != nil {
 		ctx.StatusCode(iris.StatusInternalServerError)
 		ctx.WriteString(err.Error())
 		return
 	}
 
+	// Create return struct
+	j := jobLogs{
+		Log:      string(buf[:]),
+		StartPos: startPos + bytesRead,
+	}
+
 	// Return logs
-	ctx.WriteString(string(buf[:]))
+	ctx.JSON(j)
 }