1 files changed, 32 insertions, 6 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..acdd82a480e 100644
--- a/app/assets/javascripts/vue_pipelines_index/status.js.es6
+++ b/app/assets/javascripts/vue_pipelines_index/status.js.es6
@@ -1,20 +1,47 @@
 /* global Vue, gl */
 /* eslint-disable no-param-reassign */
 
+import canceledSvg from '../../../views/shared/icons/_icon_status_canceled.svg';
+import createdSvg from '../../../views/shared/icons/_icon_status_created.svg';
+import failedSvg from '../../../views/shared/icons/_icon_status_failed.svg';
+import manualSvg from '../../../views/shared/icons/_icon_status_manual.svg';
+import pendingSvg from '../../../views/shared/icons/_icon_status_pending.svg';
+import runningSvg from '../../../views/shared/icons/_icon_status_running.svg';
+import skippedSvg from '../../../views/shared/icons/_icon_status_skipped.svg';
+import successSvg from '../../../views/shared/icons/_icon_status_success.svg';
+import warningSvg from '../../../views/shared/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;
@@ -25,8 +52,7 @@
         <a
           :class='cssClasses'
           :href='detailsPath'
-          v-html='svg + pipeline.details.status.text'
-        >
+          v-html="svg + pipeline.details.status.text">
         </a>
       </td>
     `,