1 files changed, 38 insertions, 8 deletions
diff --git a/app/assets/javascripts/vue_pipelines_index/status.js.es6 b/app/assets/javascripts/vue_pipelines_index/status.js.es6
index 05175082704..8d9f83ac113 100644
--- a/app/assets/javascripts/vue_pipelines_index/status.js.es6
+++ b/app/assets/javascripts/vue_pipelines_index/status.js.es6
@@ -1,32 +1,62 @@
 /* global Vue, gl */
 /* eslint-disable no-param-reassign */
 
+import canceledSvg from 'icons/_icon_status_canceled.svg';
+import createdSvg from 'icons/_icon_status_created.svg';
+import failedSvg from 'icons/_icon_status_failed.svg';
+import manualSvg from 'icons/_icon_status_manual.svg';
+import pendingSvg from 'icons/_icon_status_pending.svg';
+import runningSvg from 'icons/_icon_status_running.svg';
+import skippedSvg from 'icons/_icon_status_skipped.svg';
+import successSvg from 'icons/_icon_status_success.svg';
+import warningSvg from 'icons/_icon_status_warning.svg';
+
 ((gl) => {
   gl.VueStatusScope = Vue.extend({
     props: [
-      'pipeline', 'svgs', 'match',
+      'pipeline',
     ],
+
+    data() {
+      const svgsDictionary = {
+        icon_status_canceled: canceledSvg,
+        icon_status_created: createdSvg,
+        icon_status_failed: failedSvg,
+        icon_status_manual: manualSvg,
+        icon_status_pending: pendingSvg,
+        icon_status_running: runningSvg,
+        icon_status_skipped: skippedSvg,
+        icon_status_success: successSvg,
+        icon_status_warning: warningSvg,
+      };
+
+      return {
+        svg: svgsDictionary[this.pipeline.details.status.icon],
+      };
+    },
+
     computed: {
       cssClasses() {
         const cssObject = { 'ci-status': true };
         cssObject[`ci-${this.pipeline.details.status.group}`] = true;
         return cssObject;
       },
-      svg() {
-        return this.svgs[this.match(this.pipeline.details.status.icon)];
-      },
+
       detailsPath() {
         const { status } = this.pipeline.details;
         return status.has_details ? status.details_path : false;
       },
+
+      content() {
+        return `${this.svg} ${this.pipeline.details.status.text}`;
+      },
     },
     template: `
       <td class="commit-link">
         <a
-          :class='cssClasses'
-          :href='detailsPath'
-          v-html='svg + pipeline.details.status.text'
-        >
+          :class="cssClasses"
+          :href="detailsPath"
+          v-html="content">
         </a>
       </td>
     `,