1 files changed, 80 insertions, 91 deletions
diff --git a/app/assets/javascripts/pipelines/components/graph/job_component.vue b/app/assets/javascripts/pipelines/components/graph/job_component.vue
index 9b136573135..4fcd4b79f4a 100644
--- a/app/assets/javascripts/pipelines/components/graph/job_component.vue
+++ b/app/assets/javascripts/pipelines/components/graph/job_component.vue
@@ -1,95 +1,90 @@
 <script>
-  import actionComponent from './action_component.vue';
-  import dropdownActionComponent from './dropdown_action_component.vue';
-  import jobNameComponent from './job_name_component.vue';
-  import tooltip from '../../../vue_shared/directives/tooltip';
-
-  /**
-   * Renders the badge for the pipeline graph and the job's dropdown.
-   *
-   * The following object should be provided as `job`:
-   *
-   * {
-   *   "id": 4256,
-   *   "name": "test",
-   *   "status": {
-   *     "icon": "icon_status_success",
-   *     "text": "passed",
-   *     "label": "passed",
-   *     "group": "success",
-   *     "details_path": "/root/ci-mock/builds/4256",
-   *     "action": {
-   *       "icon": "retry",
-   *       "title": "Retry",
-   *       "path": "/root/ci-mock/builds/4256/retry",
-   *       "method": "post"
-   *     }
-   *   }
-   * }
-   */
-
-  export default {
-    components: {
-      actionComponent,
-      dropdownActionComponent,
-      jobNameComponent,
+import ActionComponent from './action_component.vue';
+import JobNameComponent from './job_name_component.vue';
+import tooltip from '../../../vue_shared/directives/tooltip';
+
+/**
+ * Renders the badge for the pipeline graph and the job's dropdown.
+ *
+ * The following object should be provided as `job`:
+ *
+ * {
+ *   "id": 4256,
+ *   "name": "test",
+ *   "status": {
+ *     "icon": "icon_status_success",
+ *     "text": "passed",
+ *     "label": "passed",
+ *     "group": "success",
+ *     "tooltip": "passed",
+ *     "details_path": "/root/ci-mock/builds/4256",
+ *     "action": {
+ *       "icon": "retry",
+ *       "title": "Retry",
+ *       "path": "/root/ci-mock/builds/4256/retry",
+ *       "method": "post"
+ *     }
+ *   }
+ * }
+ */
+
+export default {
+  components: {
+    ActionComponent,
+    JobNameComponent,
+  },
+  directives: {
+    tooltip,
+  },
+  props: {
+    job: {
+      type: Object,
+      required: true,
     },
-
-    directives: {
-      tooltip,
+    cssClassJobName: {
+      type: String,
+      required: false,
+      default: '',
     },
-    props: {
-      job: {
-        type: Object,
-        required: true,
-      },
-
-      cssClassJobName: {
-        type: String,
-        required: false,
-        default: '',
-      },
-
-      isDropdown: {
-        type: Boolean,
-        required: false,
-        default: false,
-      },
+    requestFinishedFor: {
+      type: String,
+      required: false,
+      default: '',
+    },
+  },
+  computed: {
+    status() {
+      return this.job && this.job.status ? this.job.status : {};
     },
 
-    computed: {
-      status() {
-        return this.job && this.job.status ? this.job.status : {};
-      },
-
-      tooltipText() {
-        const textBuilder = [];
+    tooltipText() {
+      const textBuilder = [];
 
-        if (this.job.name) {
-          textBuilder.push(this.job.name);
-        }
+      if (this.job.name) {
+        textBuilder.push(this.job.name);
+      }
 
-        if (this.job.name && this.status.label) {
-          textBuilder.push('-');
-        }
+      if (this.job.name && this.status.tooltip) {
+        textBuilder.push('-');
+      }
 
-        if (this.status.label) {
-          textBuilder.push(`${this.job.status.label}`);
-        }
+      if (this.status.tooltip) {
+        textBuilder.push(`${this.job.status.tooltip}`);
+      }
 
-        return textBuilder.join(' ');
-      },
+      return textBuilder.join(' ');
+    },
 
-      /**
-       * Verifies if the provided job has an action path
-       *
-       * @return {Boolean}
-       */
-      hasAction() {
-        return this.job.status && this.job.status.action && this.job.status.action.path;
-      },
+    /**
+     * Verifies if the provided job has an action path
+     *
+     * @return {Boolean}
+     */
+    hasAction() {
+      return this.job.status && this.job.status.action && this.job.status.action.path;
     },
-  };
+  },
+};
 </script>
 <template>
   <div class="ci-job-component">
@@ -100,6 +95,7 @@
       :title="tooltipText"
       :class="cssClassJobName"
       data-container="body"
+      data-html="true"
       class="js-pipeline-graph-job-link"
     >
 
@@ -115,6 +111,7 @@
       class="js-job-component-tooltip"
       :title="tooltipText"
       :class="cssClassJobName"
+      data-html="true"
       data-container="body"
     >
 
@@ -125,19 +122,11 @@
     </div>
 
     <action-component
-      v-if="hasAction && !isDropdown"
-      :tooltip-text="status.action.title"
-      :link="status.action.path"
-      :action-icon="status.action.icon"
-      :action-method="status.action.method"
-    />
-
-    <dropdown-action-component
-      v-if="hasAction && isDropdown"
+      v-if="hasAction"
       :tooltip-text="status.action.title"
       :link="status.action.path"
       :action-icon="status.action.icon"
-      :action-method="status.action.method"
+      :request-finished-for="requestFinishedFor"
     />
   </div>
 </template>