improve: show job name in excuting list

web/job.go

@@ -338,7 +338,7 @@ func (j *Job) GetExecutingJob(ctx *Context) {
 		return
 	}
 
-	var list = make([]*cronsun.Process, 0, 8)
+	var list = make([]*processInfo, 0, 8)
 	for i := range gresp.Kvs {
 		proc, err := cronsun.GetProcFromKey(string(gresp.Kvs[i].Key))
 		if err != nil {
@@ -358,7 +358,16 @@ func (j *Job) GetExecutingJob(ctx *Context) {
 			continue
 		}
 		proc.ProcessVal = *pv
-		list = append(list, proc)
+		procInfo := &processInfo{
+			Process: proc,
+		}
+		job, err := cronsun.GetJob(proc.Group, proc.JobID)
+		if err == nil && job != nil {
+			procInfo.JobName = job.Name
+		} else {
+			procInfo.JobName = proc.JobID
+		}
+		list = append(list, procInfo)
 	}
 
 	sort.Sort(ByProcTime(list))
@@ -441,7 +450,12 @@ func (opt *ProcFetchOptions) Match(proc *cronsun.Process) bool {
 	return true
 }
 
-type ByProcTime []*cronsun.Process
+type processInfo struct {
+	*cronsun.Process
+	JobName string `json:"jobName"`
+}
+
+type ByProcTime []*processInfo
 
 func (a ByProcTime) Len() int           { return len(a) }
 func (a ByProcTime) Swap(i, j int)      { a[i], a[j] = a[j], a[i] }

web/ui/index.html

@@ -61,7 +61,7 @@
   <div id="app">
     <div id="initloader"></div>
   </div>
-  <script src="build.js?v=265aca8"></script>
+  <script src="build.js?v=8fbb71c"></script>
 </body>
 
 </html>

web/ui/package.json

@@ -3,7 +3,7 @@
   "version": "1.0.0",
   "description": "",
   "scripts": {
-    "dev": "cross-env NODE_ENV=development webpack-dev-server --open --inline --hot",
+    "dev": "cross-env NODE_ENV=development webpack-dev-server --open --inline --hot --disableHostCheck=true",
     "build": "cross-env NODE_ENV=production webpack --progress --hide-modules && cp index.html ./dist/",
     "test": "echo \"Error: no test specified\" && exit 1"
   },

web/ui/src/components/JobExecuting.vue

@@ -29,7 +29,7 @@
     <table class="ui hover blue table" v-if="executings.length > 0">
       <thead>
         <tr>
-          <th class="center aligned">{{$L('job ID')}}</th>
+          <th class="center aligned">{{$L('job name')}}</th>
           <th width="200px" class="center aligned">{{$L('job group')}}</th>
           <th class="center aligned">{{$L('node')}}</th>
           <th class="center aligned">{{$L('process ID')}}</th>
@@ -39,7 +39,7 @@
       </thead>
       <tbody>
         <tr v-for="(proc, index) in executings">
-          <td class="center aligned"><router-link :to="'/job/edit/'+proc.group+'/'+proc.jobId">{{proc.jobId}}</router-link></td>
+          <td class="center aligned"><router-link :to="'/job/edit/'+proc.group+'/'+proc.jobId">{{proc.jobName}}</router-link></td>
           <td class="center aligned">{{proc.group}}</td>
           <td class="center aligned">{{$store.getters.hostshows(proc.nodeId)}}</td>
           <td class="center aligned">{{proc.id}}</td>