Move templates to its corresponding component

app/assets/javascripts/cycle_analytics/components/item_build_component.js.es6

@@ -16,9 +16,19 @@
   */
 
   global.cycleAnalytics.ItemBuildComponent = Vue.extend({
-    template: '#item-build-component',
     props: {
       build: Object,
-    }
+    },
+    template: `
+      <div>
+        <p>
+          <h5>
+            <a href="build.url">
+              {{ build.title }}
+            </a>
+          </h5>
+        </p>
+      </div>
+    `,
   });
 }(window.gl || (window.gl = {})));

app/assets/javascripts/cycle_analytics/components/item_merge_request_component.js.es6

@@ -15,9 +15,19 @@
   */
 
   global.cycleAnalytics.ItemMergeRequestComponent = Vue.extend({
-    template: '#item-merge-request-component',
     props: {
       mergeRequest: Object,
-    }
+    },
+    template: `
+      <div>
+        <p>
+          <h5>
+            <a href="mergeRequest.url">
+              {{ mergeRequest.title }}
+            </a>
+          </h5>
+        </p>
+      </div>
+    `,
   });
 }(window.gl || (window.gl = {})));

app/assets/javascripts/cycle_analytics/components/stage_code_component.js.es6

@@ -3,13 +3,24 @@
   global.cycleAnalytics = global.cycleAnalytics || {};
 
   global.cycleAnalytics.StageCodeComponent = Vue.extend({
-    template: '#stage-code-component',
     components: {
       'item-merge-request-component': gl.cycleAnalytics.ItemMergeRequestComponent,
     },
     props: {
       items: Array,
-    }
+    },
+    template: `
+      <div>
+        <div class="events-description">
+          Time spent coding
+        </div>
+        <ul class="stage-event-list">
+          <li class="stage-event-item" v-for="mergeRequest in items">
+            <item-merge-request-component :merge-request="mergeRequest"></item-merge-request-component>
+          </li>
+        </ul>
+      </div>
+    `,
   });
 
 })(window.gl || (window.gl = {}));

app/assets/javascripts/cycle_analytics/components/stage_production_component.js.es6

@@ -3,13 +3,24 @@
   global.cycleAnalytics = global.cycleAnalytics || {};
 
   global.cycleAnalytics.StageProductionComponent = Vue.extend({
-    template: '#stage-production-component',
     components: {
       'item-issue-component': gl.cycleAnalytics.ItemIssueComponent,
     },
     props: {
       items: Array,
-    }
+    },
+    template: `
+      <div>
+        <div class="events-description">
+          The total time taken from idea to production
+        </div>
+        <ul>
+          <li v-for="issue in items">
+            <item-issue-component :issue="issue"></item-issue-component>
+          </li>
+        </ul>
+      </div>
+    `
   });
 
 })(window.gl || (window.gl = {}));

app/assets/javascripts/cycle_analytics/components/stage_review_component.js.es6

@@ -3,13 +3,24 @@
   global.cycleAnalytics = global.cycleAnalytics || {};
 
   global.cycleAnalytics.StageReviewComponent = Vue.extend({
-    template: '#stage-review-component',
     components: {
       'item-merge-request-component': gl.cycleAnalytics.ItemMergeRequestComponent,
     },
     props: {
       items: Array,
-    }
+    },
+    template: `
+      <div>
+        <div class="events-description">
+          The time taken to review the code
+        </div>
+        <ul class="stage-event-list">
+          <li class="stage-event-item" v-for="mergeRequest in items">
+            <item-merge-request-component :merge-request="mergeRequest"></item-merge-request-component>
+          </li>
+        </ul>
+      </div>
+    `,
   });
 
 })(window.gl || (window.gl = {}));

app/assets/javascripts/cycle_analytics/components/stage_staging_component.js.es6

@@ -9,7 +9,19 @@
     },
     props: {
       items: Array,
-    }
+    },
+    template: `
+      <div>
+        <div class="events-description">
+          The time taken in staging
+        </div>
+        <ul>
+          <li v-for="build in items">
+            <item-build-component :build="build"></item-build-component>
+          </li>
+        </ul>
+      </div>
+    `,
   });
 
 })(window.gl || (window.gl = {}));

app/assets/javascripts/cycle_analytics/components/stage_test_component.js.es6

@@ -3,13 +3,24 @@
   global.cycleAnalytics = global.cycleAnalytics || {};
 
   global.cycleAnalytics.StageTestComponent = Vue.extend({
-    template: '#stage-test-component',
     components: {
       'item-build-component': gl.cycleAnalytics.ItemBuildComponent,
     },
     props: {
       items: Array,
-    }
+    },
+    template: `
+      <div>
+        <div class="events-description">
+          The time taken to build and test the application
+        </div>
+        <ul class="stage-event-list">
+          <li class="stage-event-item" v-for="build in items">
+            <item-build-component :build="build"></item-build-component>
+          </li>
+        </ul>
+      </div>
+    `,
   });
 
 })(window.gl || (window.gl = {}));

app/views/projects/cycle_analytics/show.html.haml

@@ -93,60 +93,3 @@
             %p No results
           %template{ "v-if" => "state.items.length && !isLoadingStage && !isEmptyStage" }
             %component{ ":is" => "currentStage.component", ":items" => "state.items" }
-
-%script{ type: 'text/x-template', id: 'stage-code-component' }
-  %div
-    .events-description
-      Time spent coding
-    %ul
-      %li{ "v-for" => "mergeRequest in items" }
-        %item-merge-request-component{ ":merge-request" => "mergeRequest" }
-
-%script{ type: 'text/x-template', id: 'stage-test-component' }
-  %div
-    .events-description
-      The time taken to build and test the application
-    %ul
-      %li{ "v-for" => "build in items" }
-        %item-build-component{ ":build" => "build" }
-
-
-%script{ type: 'text/x-template', id: 'stage-review-component' }
-  %div
-    .events-description
-      The time taken to review the code
-    %ul
-      %li{ "v-for" => "mergeRequest in items" }
-        %item-merge-request-component{ ":merge-request" => "mergeRequest" }
-
-%script{ type: 'text/x-template', id: 'stage-staging-component' }
-  %div
-    .events-description
-      The time taken in staging
-    %ul
-      %li{ "v-for" => "build in items" }
-        %item-build-component{ ":build" => "build" }
-
-%script{ type: 'text/x-template', id: 'stage-production-component' }
-  %div
-    .events-description
-      The total time taken from idea to production
-    %ul
-      %li{ "v-for" => "issue in items" }
-        %item-issue-component{ ":issue" => "issue" }
-
-%script{ type: 'text/x-template', id: 'item-merge-request-component' }
-  %div
-    %p
-      %h5
-        merge request -
-        %a{:href => "mergeRequest.url"}
-          {{ mergeRequest.title }}
-
-%script{ type: 'text/x-template', id: 'item-build-component' }
-  %div
-    %p
-      %h5
-        build -
-        %a{:href => "build.url"}
-          {{ build.title }}