Adde TotalTimeComponent as global component

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

@@ -45,14 +45,7 @@
           </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>
+          <total-time :time="issue.totalTime"></total-time>
         </div>
       </div>
     `,

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

@@ -0,0 +1,29 @@
+((global) => {
+  global.cycleAnalytics = global.cycleAnalytics || {};
+
+  global.cycleAnalytics.TotalTimeComponent = Vue.extend({
+    props: {
+      time: Object,
+    },
+    template: `
+      <span>
+        <span class="days" v-if="time.days">
+          {{ time.days }}
+          <abbr title="Days">{{ time.days === 1 ? 'day' : 'days' }}</abbr>
+        </span>
+        <span class="hours" v-if="time.hours">
+          {{ time.hours }}
+          <abbr title="Hours">hr</abbr>
+        </span>
+        <span class="mins" v-if="time.mins">
+          {{ time.mins }}
+          <abbr title="Minutes">mins</abbr>
+        </span>
+        <span class="seconds hide" v-if="time.seconds">
+          {{ time.seconds }}
+          <abbr title="Seconds">s</abbr>
+        </span>
+      </span>
+    `,
+  });
+})(window.gl || (window.gl = {}));

app/assets/javascripts/cycle_analytics/cycle_analytics_bundle.js

@@ -115,4 +115,7 @@ $(() => {
       },
     },
   });
+
+  // Register global components
+  Vue.component('total-time', gl.cycleAnalytics.TotalTimeComponent);
 });