dynamic API consumption for SVGs

app/assets/javascripts/vue_pipelines_index/pipelines.js.es6

@@ -66,6 +66,9 @@
         if (pipeline.commit) return pipeline.commit.commit_url;
         return '';
       },
+      match(string) {
+        return string.replace(/_([a-z])/g, (m, w) => w.toUpperCase());
+      },
     },
     template: `
       <div>
@@ -77,7 +80,12 @@
             <pipeline-head></pipeline-head>
             <tbody>
               <tr class="commit" v-for='pipeline in pipelines'>
-                <status-scope :pipeline='pipeline'></status-scope>
+                <status-scope
+                  :pipeline='pipeline'
+                  :match='match'
+                  :svgs='svgs'
+                >
+                </status-scope>
                 <pipeline-url :pipeline='pipeline'></pipeline-url>
                 <td>
                   <commit
@@ -91,7 +99,12 @@
                   >
                   </commit>
                 </td>
-                <stages :pipeline='pipeline'></stages>
+                <stages
+                  :pipeline='pipeline'
+                  :svgs='svgs'
+                  :match='match'
+                >
+                </stages>
                 <time-ago :pipeline='pipeline'></time-ago>
                 <pipeline-actions :pipeline='pipeline'></pipeline-actions>
               </tr>

app/assets/javascripts/vue_pipelines_index/stage.js.es6

@@ -3,7 +3,7 @@
 ((gl) => {
   gl.VueStage = Vue.extend({
-    props: ['stage'],
+    props: ['stage', 'svgs', 'match'],
     computed: {
       buildStatus() {
         return `Build: ${this.stage.status.label}`;
@@ -12,7 +12,7 @@
         return `has-tooltip ci-status-icon-${this.stage.status.label}`;
       },
       svg() {
-        return document.querySelector(`.${this.stage.status.icon}`).innerHTML;
+        return this.svgs[this.match(this.stage.status.icon)];
       },
     },
     template: `

app/assets/javascripts/vue_pipelines_index/stages.js.es6

@@ -6,14 +6,14 @@
     components: {
       'vue-stage': gl.VueStage,
     },
-    props: ['pipeline'],
+    props: ['pipeline', 'svgs', 'match'],
     template: `
       <td class="stage-cell">
         <div
           class="stage-container"
           v-for='stage in pipeline.details.stages'
         >
-          <vue-stage :stage='stage'></vue-stage>
+          <vue-stage :stage='stage' :svgs='svgs' :match='match'></vue-stage>
         </div>
       </td>
     `,

app/views/projects/pipelines/index.html.haml

@@ -40,24 +40,17 @@
       %div
         .nothing-here-block No pipelines to show
     - else
-      .pipeline-svgs{"data" => {"commit-icon-svg" => custom_icon("icon_commit")} }
-      .icon_status_canceled.hidden
-        = custom_icon("icon_status_canceled")
-      .icon_status_running.hidden
-        = custom_icon("icon_status_running")
-      .icon_status_skipped.hidden
-        = custom_icon("icon_status_skipped")
-      .icon_status_created.hidden
-        = custom_icon("icon_status_created")
-      .icon_status_pending.hidden
-        = custom_icon("icon_status_pending")
-      .icon_status_success.hidden
-        = custom_icon("icon_status_success")
-      .icon_status_failed.hidden
-        = custom_icon("icon_status_failed")
-      .icon_status_warning.hidden
-        = custom_icon("icon_status_warning")
+      .pipeline-svgs{"data" => {"commit_icon_svg" => custom_icon("icon_commit"),
+        "icon_status_canceled" => custom_icon("icon_status_canceled"),
+        "icon_status_running" => custom_icon("icon_status_running"),
+        "icon_status_skipped" => custom_icon("icon_status_skipped"),
+        "icon_status_created" => custom_icon("icon_status_created"),
+        "icon_status_pending" => custom_icon("icon_status_pending"),
+        "icon_status_success" => custom_icon("icon_status_success"),
+        "icon_status_failed" => custom_icon("icon_status_failed"),
+        "icon_status_warning" => custom_icon("icon_status_warning"),
+      } }
       .vue-pipelines-index
 = page_specific_javascript_tag('vue_pagination/index.js')