Update to use human readable values from server.

app/assets/javascripts/issuable_time_tracker.js.es6

@@ -3,7 +3,7 @@
 ((global) => {
   gl.IssuableTimeTracker = Vue.component('issuable-time-tracker', {
     name: 'issuable-time-tracker',
-    props: [ 'time_estimate', 'time_spent' ],
+    props: [ 'time_estimate', 'time_spent', 'human_time_estimate', 'human_time_spent' ],
     data: function() {
       return {
         displayHelp: false,
@@ -41,10 +41,10 @@
 
       /* Human readable time values */
       estimatedPretty() {
-        return this.stringifyTime(this.parsedEstimate);
+        return this.human_time_estimate || this.stringifyTime(this.parsedEstimate);
       },
       spentPretty() {
-        return this.stringifyTime(this.parsedSpent);
+        return this.human_time_spent || this.stringifyTime(this.parsedSpent);
       },
       remainingPretty() {
         return this.stringifyTime(this.parsedRemaining);

app/assets/javascripts/time_tracking_display.js.es6

@@ -28,8 +28,8 @@
           initPolling() {
             new gl.SmartInterval({
               callback: this.fetchIssuable,
-              startingInterval: 1000,
-              maxInterval: 10000,
+              startingInterval: 5000,
+              maxInterval: 20000,
               incrementByFactorOf: 3,
               lazyStart: false,
             });
@@ -42,11 +42,14 @@
           },
           listenForSlashCommands() {
             $(document).on('ajax:success', '.gfm-form', (e) => {
-              // TODO: check if slash command was updated.
+              // TODO: check for slash command
               this.fetchIssuable();
             });
           },
         },
+        created() {
+          this.fetchIssuable();
+        },
         mounted() {
           this.initPolling();
           this.subscribeToUpdates();

app/views/shared/issuable/_sidebar.html.haml

@@ -72,13 +72,15 @@
         .selectbox.hide-collapsed
           = f.hidden_field 'milestone_id', value: issuable.milestone_id, id: nil
           = dropdown_tag('Milestone', options: { title: 'Assign milestone', toggle_class: 'js-milestone-select js-extra-options', filter: true, dropdown_class: 'dropdown-menu-selectable', placeholder: 'Search milestones', data: { show_no: true, field_name: "#{issuable.to_ability_name}[milestone_id]", project_id: @project.id, issuable_id: issuable.id, milestones: namespace_project_milestones_path(@project.namespace, @project, :json), ability_name: issuable.to_ability_name, issue_update: issuable_json_path(issuable), use_id: true }})
-      // TODO: Need to add check for time_estimated - if issuable.has_attribute?(:time_estimated) once hooked up to backend
       - if issuable.has_attribute?(:time_estimate)
         #issuable-time-tracker.block
-          %issuable-time-tracker{ ':time_estimate' => 'issuable.time_estimate', ':time_spent' => 'issuable.time_spent' }
+          %issuable-time-tracker{ ':time_estimate' => 'issuable.time_estimate', ':time_spent' => 'issuable.total_time_spent', ':human_time_estimate' => 'issuable.human_time_estimate', ':human_time_spent' => 'issuable.human_total_time_spent' }
+            // Fallback while content is loading
             .title.hide-collapsed
               Time tracking
               = icon('spinner spin')
+            // TODO: Remove this when we have webpack/svg solution implemented
+            .hide
               .stopwatch-svg{ slot:'stopwatch' }
                 = custom_icon('icon_stopwatch')
       - if issuable.has_attribute?(:due_date)