Merge pull request #252 from julmon/fix_empty_charts

Handle empty data cases

temboardui/plugins/monitoring/__init__.py

@@ -692,6 +692,7 @@ def get_data_probe(self, agent_address, agent_port, probe_name):
         try:
             instance = None
             role = None
+            no_error = 0
 
             self.load_auth_cookie()
             self.start_db_session()
@@ -716,6 +717,8 @@ def get_data_probe(self, agent_address, agent_port, probe_name):
 
             start = self.get_argument('start', default=None)
             end = self.get_argument('end', default=None)
+            # Return 200 with empty list when an error occurs
+            no_error = int(self.get_argument('noerror', default=0))
             start_time = None
             end_time = None
             if start:
@@ -808,12 +811,15 @@ def get_data_probe(self, agent_address, agent_port, probe_name):
                 self.db_session.close()
             except Exception:
                 pass
-            if (isinstance(e, TemboardUIError)):
-                return CSVAsyncResult(http_code=e.code,
-                                      data={'error': e.message})
+            if no_error == 1:
+                return CSVAsyncResult(http_code=200, data=u'')
             else:
-                return CSVAsyncResult(http_code=500,
-                                      data={'error': e.message})
+                if (isinstance(e, TemboardUIError)):
+                    return CSVAsyncResult(http_code=e.code,
+                                          data={'error': e.message})
+                else:
+                    return CSVAsyncResult(http_code=500,
+                                          data={'error': e.message})
 
     @tornado.web.asynchronous
     def get(self, agent_address, agent_port, probe_name):

temboardui/plugins/monitoring/static/js/temboard.monitoring.js

@@ -14,11 +14,9 @@ function new_graph(id, title, api, api_url, options, start_date, end_date)
   html_chart_panel += '<div class="panel panel-default">';
   html_chart_panel += ' <div class="panel-heading">';
   html_chart_panel += title;
-  html_chart_panel += '   <div class="pull-right">';
-  html_chart_panel += '     <button class="btn btn-primary btn-xs" id="buttonExport'+id+'">Export as PNG</button>';
-  html_chart_panel += '   </div>';
   html_chart_panel += ' </div>';
   html_chart_panel += ' <div class="panel-body">';
+  html_chart_panel += '   <div id="info'+id+'"></div>';
   html_chart_panel += '   <div id="legend'+id+'" class="legend-chart"><div class="row"><div class="col-md-4 col-md-offset-4"><div class="progress"><div class="progress-bar progress-bar-striped" style="width: 100%;">Loading, please wait ...</div></div></div></div></div>';
   html_chart_panel += '   <div id="chart'+id+'" class="monitoring-chart"></div>';
   html_chart_panel += '   <div id="visibility'+id+'" class="visibility-chart"></div>';
@@ -41,8 +39,19 @@ function new_graph(id, title, api, api_url, options, start_date, end_date)
         return m.toDate().getTime();
       },
       drawCallback: function(g, is_initial) {
-        add_visibility_cb(id, g, is_initial);
-        add_export_button_callback(id, g, is_initial, title);
+        if (g.numRows() == 0)
+        {
+          $('#info'+id).html('<center><i>No data available</i></center>');
+          $('#legend'+id).hide();
+          $('#chart'+id).hide();
+          $('#visibility'+id).hide();
+        } else {
+          add_visibility_cb(id, g, is_initial);
+          $('#info'+id).html('');
+          $('#legend'+id).show();
+          $('#chart'+id).show();
+          $('#visibility'+id).show();
+        }
       },
       zoomCallback: function(minDate, maxDate, yRanges) {
         synchronize_zoom(minDate, maxDate, api_url);
@@ -87,7 +96,7 @@ function new_graph(id, title, api, api_url, options, start_date, end_date)
   }
   var g = new Dygraph(
     document.getElementById("chart"+id),
-    api_url+"/"+api+"?start="+timestampToIsoDate(start_date)+"&end="+timestampToIsoDate(end_date),
+    api_url+"/"+api+"?start="+timestampToIsoDate(start_date)+"&end="+timestampToIsoDate(end_date)+"&noerror=1",
     default_options
   );
   return g;
@@ -171,30 +180,7 @@ function synchronize_zoom(start_date, end_date, api_url, silent)
     });
     // load the date for the given range
     sync_graphs[i].dygraph.updateOptions({
-      file: api_url+"/"+sync_graphs[i].api+"?start="+timestampToIsoDate(start_date)+"&end="+timestampToIsoDate(end_date)
+      file: api_url+"/"+sync_graphs[i].api+"?start="+timestampToIsoDate(start_date)+"&end="+timestampToIsoDate(end_date)+"&noerror=1"
     }, false);
   }
 }
-
-function add_export_button_callback(chart_id, g, is_initial, label)
-{
-  if (!is_initial)
-    return;
-  $('#buttonExport'+chart_id).click(function(){
-    var options = {
-      titleFont: "bold 18px verdana",
-      titleFontColor: "black",
-      axisLabelFont: "bold 14px verdana",
-      axisLabelFontColor: "black",
-      labelFont: "normal 12px verdana",
-      labelFontColor: "black",
-      legendFont: "bold 12px verdana",
-      legendFontColor: "black",
-      legendHeight: 20
-    };
-    var img = document.getElementById('imageModal');
-    Dygraph.Export.asPNG(g, img, options);
-    $('#ModalLabel').html(label);
-    $('#Modal').modal('show');
-  });
-}