TT#6638 fix hanging loading-icon on dashboard

the last ajax action of any widget ajax queue
is responsible to reset the widget's loading icon.

Change-Id: Ia9a1e504a96adf3afa156b25b3b26b993e198d27

lib/NGCP/Panel/Widget/Dashboard/AdminSystemOverview.pm

@@ -32,7 +32,22 @@ sub emergency_mode {
             $em_count++;
         }
     }
-    return $em_count;
+    return $em_count.'';
+}
+
+sub system {
+    my ($self, $c) = @_;
+    return { color => "#000000", text => $c->loc("OK") };
+}
+
+sub hardware {
+    my ($self, $c) = @_;
+    return { color => "#000000", text => $c->loc("OK") };
+}
+
+sub overall_status {
+    my ($self, $c) = @_;
+    return { class => "ngcp-green-ok", text => $c->loc("All services running") };
 }
 
 1;

share/templates/widgets/admin_system_overview.tt

@@ -8,22 +8,49 @@ enqueLists.push([{
         var col = (data.widget_data > 0 ? "#FFC200" : "#000");
         $("#admin_system_overview_lazy_items_list").prepend('<li>[% c.loc('Applications') %] <strong style="color:' + col + '">' + txt + '</strong></li>');
     }
+},{
+    res: 'system',
+    widgetName: "AdminSystemOverview",
+    cb: function(data) {
+        console.log(data);
+        var txt = data.widget_data.text;
+        var col = data.widget_data.color;
+        $("#admin_system_overview_lazy_items_list").append('<li>[% c.loc('System') %] <strong style="color:' + col + '">' + txt + '</strong></li>');
+    }
+},{
+    res: 'hardware',
+    widgetName: "AdminSystemOverview",
+    cb: function(data) {
+        console.log(data);
+        var txt = data.widget_data.text;
+        var col = data.widget_data.color;
+        $("#admin_system_overview_lazy_items_list").append('<li>[% c.loc('Hardware') %] <strong style="color:' + col + '">' + txt + '</strong></li>');
+    }
+},{
+    res: 'overall_status',
+    widgetName: "AdminSystemOverview",
+    cb: function(data) {
+        console.log(data);
+        var txt = data.widget_data.text;
+        var cls = data.widget_data.class;
+        $("#admin_system_overview_lazy_loading").remove();
+        $("#admin_system_overview_lazy_items_header").append(
+            '<div class="plan-price">' +
+                '<span class="' + cls + '">&#9702;</span>' +
+                '<span class="term">' + txt + '</span>' +
+            '</div>');
+    }
 }]);
 </script>
 
 <div class="plan-container">
     <div class="plan">
-        <div class="plan-header">
+        <div class="plan-header" id="admin_system_overview_lazy_items_header">
             <div class="plan-title">[% c.loc('System Status') %]</div>
-            <div class="plan-price">
-                <span class="ngcp-green-ok">&#9702;</span>
-                <span class="term">[% c.loc('All services running') %]</span>
-            </div>
+            <div class="plan-price widget-loading" id="admin_system_overview_lazy_loading"><span>&#9702;</span><span class="term">processing ...</span></div>
         </div>
         <div class="plan-features">
             <ul id="admin_system_overview_lazy_items_list">
-                <li>[% c.loc('System <strong>Ok</strong>') %]</li>
-                <li>[% c.loc('Hardware <strong>Ok</strong>') %]</li>
             </ul>
         </div>
         <div class="plan-actions">