diff --git a/app/assets/javascripts/cycle_analytics/components/item_issue_component.js.es6 b/app/assets/javascripts/cycle_analytics/components/item_issue_component.js.es6
index f4c3d92bd56..14542dbb958 100644
--- a/app/assets/javascripts/cycle_analytics/components/item_issue_component.js.es6
+++ b/app/assets/javascripts/cycle_analytics/components/item_issue_component.js.es6
@@ -18,6 +18,41 @@
     template: '#item-issue-component',
     props: {
       issue: Object,
-    }
+    },
+    template: `
+      <div class="item-details">
+        <img class="avatar" src="https://secure.gravatar.com/avatar/3731e7dd4f2b4fa8ae184c0a7519dd58?s=64&amp;d=identicon">
+        <h5 class="item-title">
+          <a href="issue.url">
+            {{ issue.title }}
+          </a>
+        </h5>
+      <a href="issue.url">
+      #{{issue.id}}
+      </a>
+      <span>
+        Opened
+        <a href="issue.url">
+          {{ issue.datetime }}
+        </a>
+      </span>
+      <span>
+      by
+      <a href="issue.profile">
+        {{ issue.author }}
+      </a>
+      </span>
+      </div>
+      <div class="item-time">
+        <span class="hours" v-if="issue.totalTime.hours">
+          {{ issue.totalTime.hours }}
+          <abbr title="Hours">hr</abbr>
+        </span>
+        <span class="minutes" v-if="issue.totalTime.minutes">
+          {{ issue.totalTime.minutes }}
+          <abbr title="Minutes">mins</abbr>
+        </span>
+      </div>
+    `,
   });
 })(window.gl || (window.gl = {}));
diff --git a/app/views/projects/cycle_analytics/show.html.haml b/app/views/projects/cycle_analytics/show.html.haml
index 06a6e24ac49..aa72a801938 100644
--- a/app/views/projects/cycle_analytics/show.html.haml
+++ b/app/views/projects/cycle_analytics/show.html.haml
@@ -152,30 +152,6 @@
       %li{ "v-for" => "issue in items" }
         %item-issue-component{ ":issue" => "issue" }
 
-%script{ type: 'text/x-template', id: 'item-issue-component' }
-  .item-details
-    %img.avatar{:src => "https://secure.gravatar.com/avatar/3731e7dd4f2b4fa8ae184c0a7519dd58?s=64&d=identicon"}/
-    %h5.item-title
-      %a{ :href => "issue.url" }
-        {{ issue.title }}
-    %a{ :href => "issue.url" }
-      = '#{{issue.id}}'
-    %span
-      Opened
-      %a{:href => "issue.url"}
-        {{ issue.datetime }}
-    %span
-      by
-      %a{:href => "issue.profile"}
-        {{ issue.author }}
-  .item-time
-    %span.hours{ "v-if" => "issue.totalTime.hours"}
-      {{ issue.totalTime.hours }}
-      %abbr{:title => "Hours"} hr
-    %span.minutes{ "v-if" => "issue.totalTime.minutes" }
-      {{ issue.totalTime.minutes }}
-      %abbr{:title => "Minutes"} mins
-
 %script{ type: 'text/x-template', id: 'item-commit-component' }
   %div
     %p