Fixes #3461 - Dashboard stats widgets are sometimes lost/empty

app/assets/javascripts/app/controllers/_dashboard/stats.coffee

@@ -19,8 +19,17 @@ class App.DashboardStats extends App.Controller
       for widget in widgets
         if @permissionCheck(widget.permission)
           try
+
+            el = @el.find(".column.#{widget.className}")
+            localEl = $("<div class=\"column #{widget.className}\"></div>")
+
+            if !el.get(0)
+              @el.append(localEl)
+            else
+              el.replaceWith(localEl)
+
             new widget.controller(
-              parentEl: @el
+              el: localEl
               className: widget.className
             )
             @$('.js-stat-help').tooltip()

app/assets/javascripts/app/controllers/_dashboard/stats/_base.coffee

@@ -1,12 +1,6 @@
 class App.ControllerDashboardStatsBase extends App.Controller
-  constructor: (params) ->
+  constructor: ->
-    if params.parentEl
+    super
-      el = params.parentEl.find(".column.#{params.className}")
-      if !el.get(0)
-        el = $("<div class=\"column #{params.className}\"></div>")
-        params.parentEl.append(el)
-      params.el = el
-    super(params)
     @load()
 
   load: =>

app/assets/javascripts/app/views/dashboard/stats/ticket_channel_distribution.jst.eco

@@ -1,25 +1,23 @@
-<div class="column ticket_channel_distribution">
+<div class="stat-widget vertical">
-  <div class="stat-widget vertical">
+  <div class="stat-title">
-    <div class="stat-title">
+    <%- @T('Channel Distribution') %>
-      <%- @T('Channel Distribution') %>
+    <div class="stat-icon-help js-stat-help" title="<%- @Ti(@StatsTicketChannelDistribution.description) %>" data-placement="left">
-      <div class="stat-icon-help js-stat-help" title="<%- @Ti(@StatsTicketChannelDistribution.description) %>" data-placement="left">
+      <%- @Icon('help') %>
-        <%- @Icon('help') %>
-      </div>
-    </div>
-    <div class="stat-graphic" data-columns="<%- _.size(@StatsTicketChannelDistribution.channels) %>">
-      <% for id, channel of @StatsTicketChannelDistribution.channels: %>
-        <div class="stats-row">
-          <div title="<%- channel.sender %>">
-            <%- @Icon(channel.icon, 'stat-channel-icon') %>
-          </div>
-          <div class="stat-bars">
-            <div class="stat-bar stat-bar--inbound" style="height: <%- channel.inbound_in_percent %>%" title="<%- @Ti('Inbound') %>: <%- channel.inbound_in_percent %>% (<%- channel.inbound %>)"></div>
-            <div class="stat-bar stat-bar--outbound" style="height: <%- channel.outbound_in_percent %>%" title="<%- @Ti('Outbound') %>: <%- channel.outbound_in_percent %>% (<%- channel.outbound %>)"></div>
-          </div>
-          <div class="stat-detail"><%- channel.overal_percentage %>%</div>
-        </div>
-        <div class="stat-label"></div>
-      <% end %>
     </div>
   </div>
+  <div class="stat-graphic" data-columns="<%- _.size(@StatsTicketChannelDistribution.channels) %>">
+    <% for id, channel of @StatsTicketChannelDistribution.channels: %>
+      <div class="stats-row">
+        <div title="<%- channel.sender %>">
+          <%- @Icon(channel.icon, 'stat-channel-icon') %>
+        </div>
+        <div class="stat-bars">
+          <div class="stat-bar stat-bar--inbound" style="height: <%- channel.inbound_in_percent %>%" title="<%- @Ti('Inbound') %>: <%- channel.inbound_in_percent %>% (<%- channel.inbound %>)"></div>
+          <div class="stat-bar stat-bar--outbound" style="height: <%- channel.outbound_in_percent %>%" title="<%- @Ti('Outbound') %>: <%- channel.outbound_in_percent %>% (<%- channel.outbound %>)"></div>
+        </div>
+        <div class="stat-detail"><%- channel.overal_percentage %>%</div>
+      </div>
+      <div class="stat-label"></div>
+    <% end %>
+  </div>
 </div>

app/assets/javascripts/app/views/dashboard/stats/ticket_escalation.jst.eco

@@ -1,15 +1,13 @@
-<div class="column ticket_escalation">
+<div class="stat-widget vertical">
-  <div class="stat-widget vertical">
+  <div class="stat-title">
-    <div class="stat-title">
+    <%- @T('Mood') %>
-      <%- @T('Mood') %>
+    <div class="stat-icon-help js-stat-help" title="<%- @Ti(@StatsTicketEscalation.description) %>" data-placement="bottom">
-      <div class="stat-icon-help js-stat-help" title="<%- @Ti(@StatsTicketEscalation.description) %>" data-placement="bottom">
+      <%- @Icon('help') %>
-        <%- @Icon('help') %>
-      </div>
     </div>
-    <div class="stat-graphic">
-      <%- @Icon("mood-#{@StatsTicketEscalation.state}", 'stat-icon mood-icon') %>
-    </div>
-    <div class="stat-label"><%- @T('%s of my tickets escalated.', @StatsTicketEscalation.own) %></div>
-    <div class="stat-detail"><%- @T('Total: %s', @StatsTicketEscalation.total) %></div>
   </div>
+  <div class="stat-graphic">
+    <%- @Icon("mood-#{@StatsTicketEscalation.state}", 'stat-icon mood-icon') %>
+  </div>
+  <div class="stat-label"><%- @T('%s of my tickets escalated.', @StatsTicketEscalation.own) %></div>
+  <div class="stat-detail"><%- @T('Total: %s', @StatsTicketEscalation.total) %></div>
 </div>

app/assets/javascripts/app/views/dashboard/stats/ticket_in_process.jst.eco

@@ -1,15 +1,13 @@
-<div class="column ticket_in_process">
+<div class="stat-widget vertical">
-  <div class="stat-widget vertical">
+  <div class="stat-title">
-    <div class="stat-title">
+    <%- @T('Your tickets in process') %>
-      <%- @T('Your tickets in process') %>
+    <div class="stat-icon-help js-stat-help" title="<%- @Ti(@StatsTicketInProcess.description) %>" data-placement="bottom">
-      <div class="stat-icon-help js-stat-help" title="<%- @Ti(@StatsTicketInProcess.description) %>" data-placement="bottom">
+      <%- @Icon('help') %>
-        <%- @Icon('help') %>
-      </div>
     </div>
-    <div class="stat-graphic">
-      <%- @Icon('in-process', "in-process-icon #{@StatsTicketInProcess.state}-color") %>
-    </div>
-    <div class="stat-label" title="<%- @T('%s of your tickets are currently in process.', @StatsTicketInProcess.in_process) %>"><%- @T('%s% are currently in process', @StatsTicketInProcess.percent) %></div>
-    <div class="stat-detail"><%- @T('Average: %s%', @StatsTicketInProcess.average_per_agent) %></div>
   </div>
+  <div class="stat-graphic">
+    <%- @Icon('in-process', "in-process-icon #{@StatsTicketInProcess.state}-color") %>
+  </div>
+  <div class="stat-label" title="<%- @T('%s of your tickets are currently in process.', @StatsTicketInProcess.in_process) %>"><%- @T('%s% are currently in process', @StatsTicketInProcess.percent) %></div>
+  <div class="stat-detail"><%- @T('Average: %s%', @StatsTicketInProcess.average_per_agent) %></div>
 </div>

app/assets/javascripts/app/views/dashboard/stats/ticket_load_measure.jst.eco

@@ -1,22 +1,20 @@
-<div class="column ticket_load_measure">
+<div class="stat-widget vertical">
-  <div class="stat-widget vertical">
+  <div class="stat-title">
-    <div class="stat-title">
+    <%- @T('Assigned') %>
-      <%- @T('Assigned') %>
+    <div class="stat-icon-help js-stat-help" title="<%- @Ti(@StatsTicketLoadMeasure.description) %>" data-placement="bottom">
-      <div class="stat-icon-help js-stat-help" title="<%- @Ti(@StatsTicketLoadMeasure.description) %>" data-placement="bottom">
+      <%- @Icon('help') %>
-        <%- @Icon('help') %>
-      </div>
     </div>
-    <div class="stat-graphic">
-      <div class="stat-tickets vertical reverse end">
-        <% stack_counter = parseInt(@StatsTicketLoadMeasure.percent*0.16) %>
-        <% for count in [1..stack_counter]: %>
-          <%- @Icon('one-ticket', "one-ticket #{@StatsTicketLoadMeasure.state}-color") %>
-        <% end %>
-      </div>
-      <%- @Icon('total-tickets', 'total-tickets') %>
-    </div>
-
-    <div class="stat-label"><%- @T('Tickets assigned to me: %s of %s', @StatsTicketLoadMeasure.own, @StatsTicketLoadMeasure.total) %></div>
-    <div class="stat-detail"><%- @T('Average: %s', @StatsTicketLoadMeasure.average_per_agent) %></div>
   </div>
+  <div class="stat-graphic">
+    <div class="stat-tickets vertical reverse end">
+      <% stack_counter = parseInt(@StatsTicketLoadMeasure.percent*0.16) %>
+      <% for count in [1..stack_counter]: %>
+        <%- @Icon('one-ticket', "one-ticket #{@StatsTicketLoadMeasure.state}-color") %>
+      <% end %>
+    </div>
+    <%- @Icon('total-tickets', 'total-tickets') %>
+  </div>
+
+  <div class="stat-label"><%- @T('Tickets assigned to me: %s of %s', @StatsTicketLoadMeasure.own, @StatsTicketLoadMeasure.total) %></div>
+  <div class="stat-detail"><%- @T('Average: %s', @StatsTicketLoadMeasure.average_per_agent) %></div>
 </div>

app/assets/javascripts/app/views/dashboard/stats/ticket_reopen.jst.eco

@@ -1,15 +1,13 @@
-<div class="column ticket_reopen">
+<div class="stat-widget vertical">
-  <div class="stat-widget vertical">
+  <div class="stat-title">
-    <div class="stat-title">
+    <%- @T('Reopening rate') %>
-      <%- @T('Reopening rate') %>
+    <div class="stat-icon-help js-stat-help" title="<%- @Ti(@StatsTicketReopen.description) %>" data-placement="left">
-      <div class="stat-icon-help js-stat-help" title="<%- @Ti(@StatsTicketReopen.description) %>" data-placement="left">
+      <%- @Icon('help') %>
-        <%- @Icon('help') %>
-      </div>
     </div>
-    <div class="stat-graphic">
-      <%- @Icon('reopening', "reopening-icon #{@StatsTicketReopen.state}-color") %>
-    </div>
-    <div class="stat-label"><%- @T('%s% have been reopened', @StatsTicketReopen.percent) %></div>
-    <div class="stat-detail"><%- @T('Average: %s%', @StatsTicketReopen.average_per_agent) %></div>
   </div>
+  <div class="stat-graphic">
+    <%- @Icon('reopening', "reopening-icon #{@StatsTicketReopen.state}-color") %>
+  </div>
+  <div class="stat-label"><%- @T('%s% have been reopened', @StatsTicketReopen.percent) %></div>
+  <div class="stat-detail"><%- @T('Average: %s%', @StatsTicketReopen.average_per_agent) %></div>
 </div>

app/assets/javascripts/app/views/dashboard/stats/ticket_waiting_time.jst.eco

@@ -1,19 +1,17 @@
-<div class="column ticket_waiting_time">
+<div class="time stat-widget vertical">
-  <div class="time stat-widget vertical">
+  <div class="stat-title">
-    <div class="stat-title">
+    <%- @T('∅ Waiting time today') %>
-      <%- @T('∅ Waiting time today') %>
+    <div class="stat-icon-help js-stat-help" title="<%- @Ti(@StatsTicketWaitingTime.description) %>" data-placement="bottom">
-      <div class="stat-icon-help js-stat-help" title="<%- @Ti(@StatsTicketWaitingTime.description) %>" data-placement="bottom">
+      <%- @Icon('help') %>
-        <%- @Icon('help') %>
-      </div>
     </div>
-    <div class="stat-graphic">
-      <div class="stat-stopwatch centered">
-        <%- @Icon('stopwatch', 'stat-icon stopwatch-icon') %>
-        <canvas class="stat-dial"></canvas>
-        <div class="stat-amount"></div>
-      </div>
-    </div>
-    <div class="stat-label"><%- @T('My handling time: %s minutes', @StatsTicketWaitingTime.handling_time) %></div>
-    <div class="stat-detail"><%- @T('Average: %s minutes', @StatsTicketWaitingTime.average_per_agent) %></div>
   </div>
+  <div class="stat-graphic">
+    <div class="stat-stopwatch centered">
+      <%- @Icon('stopwatch', 'stat-icon stopwatch-icon') %>
+      <canvas class="stat-dial"></canvas>
+      <div class="stat-amount"></div>
+    </div>
+  </div>
+  <div class="stat-label"><%- @T('My handling time: %s minutes', @StatsTicketWaitingTime.handling_time) %></div>
+  <div class="stat-detail"><%- @T('Average: %s minutes', @StatsTicketWaitingTime.average_per_agent) %></div>
 </div>