Feature/1568

src/store/actions.js

@@ -48,6 +48,7 @@ export default {
     rerun: 'jobs/rerun',
     cancel: 'jobs/cancel',
     list: 'jobs/list',
+    related: 'jobs/related',
     statusUpdate: 'jobs/statusUpdate',
     select: 'jobs/select',
     getYml: 'jobs/getYml',

src/store/module/jobs.js

@@ -18,7 +18,8 @@ const state = {
   latest: [], // latest job object array
   reports: [],
   reportUrlPath: '',
-  artifacts: []
+  artifacts: [],
+  relatedJobs: [],
 }
 
 const mutations = {
@@ -43,6 +44,10 @@ const mutations = {
     state.pagination.total = page.totalElements
   },
 
+  related(state, jobs) {
+    state.relatedJobs = jobs
+  },
+
   setLatest(state, job) {
     const latestList = state.latest
 
@@ -121,6 +126,7 @@ const actions = {
     const url = `jobs/${jobId}/desc`
     return http.get(url, onCallback)
   },
+
   /**
    * Start a new job
    */
@@ -166,6 +172,12 @@ const actions = {
     )
   },
 
+  related({commit, state}, {flow, buildNumber}) {
+    return http.get(`jobs/${flow}/${buildNumber}/related`, (jobs) => {
+      commit('related', jobs)
+    })
+  },
+
   /**
    * Update job status
    */

src/util/agents.js

@@ -51,7 +51,7 @@ export class AgentWrapper {
 
   constructor(agent) {
     this.agent = agent ? agent : emptyObject
-    this.descText = '-'
+    this.descText = 'n/a'
   }
 
   get isAgent() {
@@ -176,7 +176,7 @@ export class AgentWrapper {
 
   fetchResource(field) {
     if (this.agent.resource[field] === 0) {
-      return '-'
+      return 'n/a'
     }
 
     return this.agent.resource[field]

src/util/jobs.js

@@ -49,6 +49,10 @@ export class JobWrapper {
     })
   }
 
+  get id() {
+    return this.job.id
+  }
+
   get context() {
     return this.job.context || {}
   }
@@ -62,11 +66,11 @@ export class JobWrapper {
   }
 
   get gitUrl() {
-    return this.context[vars.git.url]
+    return this.context[vars.git.url] || 'n/a'
   }
 
   get gitCredential() {
-    return this.context[vars.git.credential] || '-'
+    return this.context[vars.git.credential] || 'n/a'
   }
 
   get fromNow() {
@@ -90,7 +94,7 @@ export class JobWrapper {
   }
 
   get triggerBy() {
-    return this.context[vars.job.triggerBy] || '-'
+    return this.context[vars.job.triggerBy] || 'n/a'
   }
 
   get status() {
@@ -124,14 +128,14 @@ export class JobWrapper {
 
   get finishedAtInStr() {
     if (!this.isFinished) {
-      return '-'
+      return 'n/a'
     }
 
     if (this.job.finishAt) {
       return timeFormat(this.job.finishAt)
     }
 
-    return '-'
+    return 'n/a'
   }
 
   get isFinished() {
@@ -143,9 +147,9 @@ export class JobWrapper {
 
   get snapshots() {
     return this.job.snapshots || {
-      '-': {
-        name: '-',
-        os: '-',
+      'n/a': {
+        name: 'n/a',
+        os: 'n/a',
         cpuNum: 0,
         cpuUsage: 0,
         freeMemory: 0,

src/util/plugins.js

@@ -66,7 +66,7 @@ export class PluginWrapper {
     if (this.plugin.syncTime) {
       return timeFormat(this.plugin.syncTime)
     }
-    return '-'
+    return 'n/a'
   }
 
   get synced() {

src/util/steps.js

@@ -61,14 +61,14 @@ export class StepWrapper {
 
   get startAt() {
     if (!this.step.startAt) {
-      return '-'
+      return 'n/a'
     }
     return moment(this.step.startAt)
   }
 
   get finishAt() {
     if (!this.step.finishAt) {
-      return '-'
+      return 'n/a'
     }
     return moment(this.step.finishAt)
   }
@@ -158,7 +158,7 @@ export class StepWrapper {
     if (this.step.startAt && this.step.finishAt) {
       return timeDurationInSeconds(this.step.finishAt, this.step.startAt)
     }
-    return '-'
+    return 'n/a'
   }
 
   get exitCode() {

src/view/Common/AgentMenu.vue

@@ -164,15 +164,7 @@ export default {
 
     loadFlowNameAndBuildNumber(wrapper) {
       const callback = (obj) => {
-        let desc = '-'
-
-        // find flow name since name could be change..
-        for (let flow of this.flows) {
-          if (flow.id === obj.flowId) {
-            desc = `${flow.name}/#${obj.buildNumber}`
-            break
-          }
-        }
+        let desc = `${obj.flowName}/#${obj.buildNumber}`
 
         // update item list
         for (let item of this.items) {

src/view/Job/Detail.vue

@@ -92,7 +92,7 @@
         showTty: false,
         ttyPath: '',
         agentIcons: icons,
-        duration: '-',
+        duration: 'n/a',
         durationInterval: null,
       }
     },
@@ -165,6 +165,7 @@
       load() {
         let payload = {flow: this.flow, buildNumber: this.number}
         this.$store.dispatch(actions.jobs.select, payload).then()
+        this.$store.dispatch(actions.jobs.related, payload).then()
         this.$store.dispatch(actions.jobs.steps.get, payload).then()
         this.$store.dispatch(actions.jobs.reports.list, payload).then()
       },

src/view/Job/DetailTabContext.vue

@@ -19,8 +19,10 @@
           <td>
             <v-row no-gutters>
               <v-col cols="2" class="caption">
-                <span>{{ item.key }}</span>
+                <a v-if="item.key_link" :href="item.key_link" target="_blank">{{ item.key }}</a>
+                <span v-else>{{ item.key }}</span>
               </v-col>
+
               <v-col class="caption d-flex">
                 <div class="vertical-bar mr-4" v-if="value.showBar"></div>
 
@@ -33,8 +35,8 @@
                 </div>
 
                 <div v-else>
-                  <a v-if="item.link" :href="item.link" target="_blank">{{ item.value }}</a>
-                  <span class="d-inline-block overflow-x-auto" style="width: 800px;" v-if="!item.link">{{ item.value }}</span>
+                  <a v-if="item.value_link" :href="item.value_link" target="_blank">{{ item.value }}</a>
+                  <span class="d-inline-block overflow-x-auto" style="width: 800px;" v-else>{{ item.value }}</span>
                 </div>
               </v-col>
             </v-row>
@@ -47,6 +49,8 @@
 </template>
 
 <script>
+import {mapState} from "vuex";
+
 export default {
   name: 'JobDetailInfo',
   data() {
@@ -59,6 +63,10 @@ export default {
     }
   },
   computed: {
+    ...mapState({
+      relatedJobs: state => state.jobs.relatedJobs,
+    }),
+
     contextData() {
       return {
         agent: {
@@ -85,6 +93,12 @@ export default {
           data: this.getPrData()
         },
 
+        relatedJobs: {
+          name: 'Related jobs for this git event',
+          show: this.relatedJobs.length > 0,
+          data: this.getRelatedJobsData()
+        },
+
         variables: {
           name: 'Variables',
           show: true,
@@ -179,7 +193,7 @@ export default {
         },
         {
           key: 'Status',
-          value: this.wrapper.isPrOpenedTrigger ? 'Opened' : (this.wrapper.isPrMergedTrigger ? 'Merged' : '-')
+          value: this.wrapper.isPrOpenedTrigger ? 'Opened' : (this.wrapper.isPrMergedTrigger ? 'Merged' : 'n/a')
         },
         {
           key: 'Message',
@@ -188,7 +202,7 @@ export default {
         {
           key: 'PR Number',
           value: this.wrapper.prNumber,
-          link: this.wrapper.prUrl
+          value_link: this.wrapper.prUrl
         },
         {
           key: 'PR Head Repo/Branch',
@@ -199,6 +213,20 @@ export default {
           value: this.wrapper.prBaseRepo + ' / ' + this.wrapper.prBaseBranch
         }
       ]
+    },
+
+    getRelatedJobsData() {
+      let list = []
+      for (let jobDesc of this.relatedJobs) {
+        if (jobDesc.id === this.wrapper.id) {
+          continue
+        }
+
+        let desc = `${jobDesc.flowName} / #${jobDesc.buildNumber}`
+        let link = `#/flows/${jobDesc.flowName}/jobs/${jobDesc.buildNumber}`
+        list.push({key: desc, value: '', key_link: link})
+      }
+      return list
     }
   }
 }

src/view/Job/JobInfoBar.vue

@@ -99,7 +99,7 @@ export default {
     return {
       showTty: false,
       agentIcons: icons,
-      duration: '-',
+      duration: 'n/a',
       durationInterval: null,
     }
   },