Feature/1569

src/assets/styles/common.scss

@@ -55,6 +55,14 @@
   height: auto !important;
 }
 
+.if-overflow {
+  float: left;
+  width: 400px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
 @-moz-keyframes loader {
   from {
     transform: rotate(0);

src/components/Common/TextBox.vue

@@ -1,6 +1,9 @@
 <template>
   <div class="text-box">
-    <v-subheader>{{ label }}</v-subheader>
+    <v-subheader>
+      <span>{{ label }}</span>
+      <span v-if="desc" class="ml-2">({{ desc }})</span>
+    </v-subheader>
     <v-text-field
         solo
         dense
@@ -27,6 +30,10 @@ export default {
       type: String,
       required: true
     },
+    desc: {
+      type: String,
+      required: false
+    },
     value: {
       type: [Number, String]
     },

src/components/Jobs/ListItem.vue

@@ -10,7 +10,7 @@
       <span class="font-weight-bold"># {{ wrapper.buildNumber }}</span>
       <v-tooltip bottom>
         <template v-slot:activator="{ on }">
-          <v-icon small class="ml-3" v-on="on">{{ wrapper.triggerIcon }}</v-icon>
+          <v-icon small class="ml-2" v-on="on">{{ wrapper.triggerIcon }}</v-icon>
         </template>
         <span>{{ wrapper.triggerText }}</span>
       </v-tooltip>
@@ -29,13 +29,22 @@
              no-gutters
              v-if="wrapper.isPushTrigger || wrapper.isTagTrigger || wrapper.hasGitCommitInfo">
         <v-col cols="4">
-          <span class="font-weight-medium">{{ wrapper.branch }}</span>
+          <div>
+            <v-icon small class="mr-1" v-if="wrapper.pushOrTag.branch">mdi-source-branch</v-icon>
+            <span class="font-weight-medium">{{ wrapper.pushOrTag.branch }}</span>
+          </div>
+          <div v-if="wrapper.pushOrTag.commit_total">
+            <v-icon small class="mr-1">flow-icon-git-commit</v-icon>
+            <span class="font-weight-medium">{{ wrapper.pushOrTag.commit_total }}</span>
+            <span class="ml-1">commits</span>
+          </div>
         </v-col>
 
         <v-col cols="4">
           <v-list-item-subtitle>
-            <div class="commit-text caption"> {{ wrapper.commitMsg }}</div>
-            <a :href="wrapper.commitUrl" class="caption" target="_blank">{{ wrapper.commitId }}</a>
+            <div class="commit-text caption"> {{ wrapper.pushOrTag.head_commit.message }}</div>
+            <a :href="wrapper.pushOrTag.head_commit.url" class="caption"
+               target="_blank">{{ wrapper.pushOrTag.head_commit.id }}</a>
           </v-list-item-subtitle>
         </v-col>
       </v-row>
@@ -47,9 +56,9 @@
         <v-col cols="4">
           <v-list-item-subtitle>
             <div v-if="wrapper.prBaseRepo !== wrapper.prHeadRepo" class="caption">
-              {{ wrapper.prBaseRepo }} &#x2190; {{ wrapper.prHeadRepo}}
+              {{ wrapper.prBaseRepo }} &#x2190; {{ wrapper.prHeadRepo }}
             </div>
-            <div class="caption">{{ wrapper.prBaseBranch }} &#x2190; {{ wrapper.prHeadBranch}}</div>
+            <div class="caption">{{ wrapper.prBaseBranch }} &#x2190; {{ wrapper.prHeadBranch }}</div>
           </v-list-item-subtitle>
         </v-col>
 
@@ -79,38 +88,38 @@
 </template>
 
 <script>
-  import { JobWrapper } from '@/util/jobs'
+import {JobWrapper} from '@/util/jobs'
 
-  export default {
-    props: {
-      job: {
-        type: Object,
-        required: true
-      }
-    },
-    computed: {
-      wrapper() {
-        return new JobWrapper(this.job)
-      }
+export default {
+  props: {
+    job: {
+      type: Object,
+      required: true
+    }
+  },
+  computed: {
+    wrapper() {
+      return new JobWrapper(this.job)
     }
   }
+}
 </script>
 
 <style lang="scss" scoped>
-  .job-item {
-    min-height: 68px;
-  }
+.job-item {
+  min-height: 68px;
+}
 
-  .commit-text {
-    max-width: 300px;
-    text-overflow: ellipsis;
-    overflow: hidden;
-    color: #4e4e53;
-  }
+.commit-text {
+  max-width: 300px;
+  text-overflow: ellipsis;
+  overflow: hidden;
+  color: #4e4e53;
+}
 
-  .vertical-bar {
-    display: flex;
-    height: 40px;
-    border-left: 2px solid #c6c6cb;
-  }
+.vertical-bar {
+  display: flex;
+  height: 40px;
+  border-left: 2px solid #c6c6cb;
+}
 </style>

src/util/jobs.js

@@ -26,6 +26,27 @@ export const TRIGGER_SCHEDULER = 'SCHEDULER'
 export class JobWrapper {
   constructor(job) {
     this.job = job
+
+    this.builtInVarList = []
+    this.customVarList = []
+
+    Object.keys(this.context).forEach(key => {
+      let value = this.context[key]
+      if (key === '_TYPE_') {
+        return
+      }
+
+      if (value === '') {
+        return
+      }
+
+      if (key.startsWith('FLOWCI_')) {
+        this.builtInVarList.push({key: key, value: value})
+        return
+      }
+
+      this.customVarList.push({key: key, value: value})
+    })
   }
 
   get context() {
@@ -48,30 +69,10 @@ export class JobWrapper {
     return this.context[vars.git.credential] || '-'
   }
 
-  get commitId() {
-    return this.context[vars.git.commit.id]
-  }
-
-  get commitMsg() {
-    return this.context[vars.git.commit.message]
-  }
-
-  get commitUrl() {
-    return this.context[vars.git.commit.url]
-  }
-
-  get commitNum() {
-    return this.context[vars.git.commit.number]
-  }
-
   get fromNow() {
     return timeFormatFromNow(this.job.createdAt)
   }
 
-  get branch() {
-    return this.context[vars.git.branch]
-  }
-
   get buildNumber() {
     return this.job.buildNumber
   }
@@ -106,16 +107,11 @@ export class JobWrapper {
     return status
   }
 
-  get customVarList() {
-    const contextAsPairList = []
-
-    Object.keys(this.context).forEach(key => {
-      if (!key.startsWith('FLOWCI_')) {
-        contextAsPairList.push({key: key, value: this.context[key]})
-      }
-    })
-
-    return contextAsPairList
+  get vars() {
+    return {
+      builtIn: this.builtInVarList,
+      custom: this.customVarList
+    }
   }
 
   get duration() {
@@ -172,6 +168,27 @@ export class JobWrapper {
     return this.job.yamlRepoBranch
   }
 
+  get pushOrTag() {
+    let commitListB64 = this.context[vars.git.push.commit_list]
+    let commitList = []
+    if (commitListB64) {
+      try {
+        commitList = JSON.parse(atob(commitListB64))
+      } catch (e) {
+        // ignore
+      }
+    }
+
+    return {
+      branch: this.context[vars.git.push.branch],
+      message: this.context[vars.git.push.message],
+      author: this.context[vars.git.push.author],
+      commit_total: this.context[vars.git.push.commit_total],
+      commit_list: commitList,
+      head_commit: commitList.length === 0 ? {id: '', message: ''} : commitList[0]
+    }
+  }
+
   get prTitle() {
     return this.context[vars.git.pr.title]
   }
@@ -205,8 +222,7 @@ export class JobWrapper {
   }
 
   get hasGitCommitInfo() {
-    return this.context[vars.git.commit.id]
-      && this.context[vars.git.commit.message]
+    return this.context[vars.git.push.message]
   }
 
   get isPushTrigger() {

src/util/vars.js

@@ -26,23 +26,22 @@ export default {
 
   git: {
     url: 'FLOWCI_GIT_URL',
-    branch: 'FLOWCI_GIT_BRANCH',
     credential: 'FLOWCI_GIT_CREDENTIAL',
 
     source: 'FLOWCI_GIT_SOURCE',
     event: 'FLOWCI_GIT_EVENT',
-    author: 'FLOWCI_GIT_AUTHOR',
     compare_url: 'FLOWCI_GIT_COMPARE_URL',
 
-    commit: {
-      id: 'FLOWCI_GIT_COMMIT_ID',
+    push: {
+      author: 'FLOWCI_GIT_AUTHOR',
       message: 'FLOWCI_GIT_COMMIT_MESSAGE',
-      time: 'FLOWCI_GIT_COMMIT_TIME',
-      url: 'FLOWCI_GIT_COMMIT_URL',
-      number: 'FLOWCI_GIT_COMMIT_NUM'
+      branch: 'FLOWCI_GIT_BRANCH',
+      commit_total: 'FLOWCI_GIT_COMMIT_TOTAL',
+      commit_list: 'FLOWCI_GIT_COMMIT_LIST'
     },
 
     pr: {
+      author: 'FLOWCI_GIT_AUTHOR',
       title: 'FLOWCI_GIT_PR_TITLE',
       message: 'FLOWCI_GIT_PR_MESSAGE',
       url: 'FLOWCI_GIT_PR_URL',