Added mr labels to detached pipelines (#200)

* [FEAT] Added mr labels to detached pipelines

Co-authored-by: Timo Schwarzer <me@timoschwarzer.com>

Author: dersvenhesse

CONFIGURATION.md

@@ -188,6 +188,9 @@ projectConfig:
     # Whether to show detached pipelines of merge requests
     showDetached: false
 
+    # Whether to show the labels of the merge request for detached pipelines
+    showLabels: true
+
     # Minimum number of pipelines to display for this filter
     historyCount: 1
 

charts/gitlab-monitor/values.yaml

@@ -54,6 +54,7 @@ config: |
         "showTags": true,
         "showLatestTagOnly": false,
         "showDetached": false,
+        "showLabels": true,
         "maxPipelines": 10,
         "notifyFailureOn": null
       }

src/components/pipeline-view.vue

@@ -11,7 +11,7 @@
         :href="project.web_url + (!pipeline.ref.includes('merge-request') ?  '/tree/' + pipeline.ref : '/-/merge_requests' + '/' + pipeline.ref.match(/\d+/))"
       >
         <octicon :name="!pipeline.ref.includes('merge-request') ? 'git-branch' : 'git-pull-request'" scale="0.9" />
-        {{ pipeline.ref }} <span v-if="pipeline.additional"> – {{ pipeline.additional.title }}</span>
+        {{ pipeline.ref }} <span v-if="pipeline.additional">&nbsp;–&nbsp;{{ pipeline.additional.title }}<span class="mr-label" v-for="label in pipeline.additional.labels">{{ label }}</span></span>
       </a>
 
       <div :class="['pipeline', {'with-stages-names': showStagesNames, 'is-skipped': pipeline.status === 'skipped'}]">
@@ -200,6 +200,7 @@
 
 <style lang="scss" scoped>
   .pipeline-view {
+    margin-top: 2px;
     &:not(:last-child) {
       margin-bottom: 4px;
     }
@@ -221,6 +222,16 @@
       }
     }
 
+    .mr-label {
+      margin-left: 5px;
+      vertical-align: middle;
+      padding: 2px;
+      font-size: 8px;
+      border-radius: 0.75rem;
+      color:  var(--project-default, #424242);
+      background: var(--pipeline-id, rgba(255, 255, 255, 0.8));
+    }
+
     .pipeline {
       display: flex;
       align-items: center;

src/components/project-card.vue

@@ -77,6 +77,9 @@
       showDetached() {
         return this.config.showDetached
       },
+      showLabels() {
+        return this.config.showLabels
+      },
       showProjectOnlyOn() {
         const showProjectOnlyOn = Config.root.showProjectOnlyOn
         if (showProjectOnlyOn && showProjectOnlyOn.length) {
@@ -205,6 +208,7 @@
         const showTags = this.showTags
         const showLatestTagOnly = this.showLatestTagOnly
         const showDetached = this.showDetached
+        const showLabels = this.showLabels
         const fetchCount = Config.root.fetchCount
 
         let refNamesAdditional = {}
@@ -243,6 +247,9 @@
               const mrPipelineRef = mrPipelines[0].ref
               detached.push(mrPipelineRef)
               refNamesAdditional[mrPipelineRef] = {title: mergeRequest.title}
+              if (showLabels && mergeRequest.labels.length) {
+                refNamesAdditional[mrPipelineRef].labels = mergeRequest.labels
+              }
             }
           }
         }

src/config.default.json

@@ -40,6 +40,7 @@
       "showTags": true,
       "showLatestTagOnly": false,
       "showDetached": false,
+      "showLabels": true,
       "historyCount": 1,
       "hideSkippedPipelines": false,
       "hideSuccessfulPipelines": false,