added small text to show when no datapoints are returned and when datapoints…

added small text to show when no datapoints are returned and when datapoints returned from graphite are outside timerange (can happen when timezone mismatch) #143

src/app/panels/graphite/module.html

@@ -10,11 +10,18 @@
     </span>
     </span>
   </div>
   </div>
 
 
-  <center><img ng-show='panel.loading && _.isUndefined(data)' src="img/load_big.gif"></center>
+  <div style="position: relative">
+
+    <div ng-if="datapointsWarning" class="datapoints-warning">
+      <span class="small" ng-show="!datapointsCount">No datapoints <tip>Can be caused by timezone mismatch between browser and graphite server</tip></span>
+      <span class="small" ng-show="datapointsOutside">Datapoints outside time range <tip>Can be caused by timezone mismatch between browser and graphite server</tip></span>
+    </div>
 
 
     <div grafana-graph class="pointer histogram-chart">
     <div grafana-graph class="pointer histogram-chart">
     </div>
     </div>
 
 
+  </div>
+
   <div ng-if="panel.legend" class="grafana-legend-container">
   <div ng-if="panel.legend" class="grafana-legend-container">
     <div ng-include="'app/panels/graphite/legend.html'"></div>
     <div ng-include="'app/panels/graphite/legend.html'"></div>
   </div>
   </div>

src/app/panels/graphite/module.js

@@ -312,7 +312,12 @@ function (angular, app, $, _, kbn, moment, timeSeries) {
       results = results.data;
       results = results.data;
       var data = [];
       var data = [];
 
 
+      $scope.datapointsWarning = false;
+      $scope.datapointsCount = 0;
+      $scope.datapointsOutside = false;
+
       _.each(results, function(targetData) {
       _.each(results, function(targetData) {
+        var datapoints = targetData.datapoints;
         var alias = targetData.target;
         var alias = targetData.target;
         var color = $scope.panel.aliasColors[alias] || $scope.colors[data.length];
         var color = $scope.panel.aliasColors[alias] || $scope.colors[data.length];
         var yaxis = $scope.panel.aliasYAxis[alias] || 1;
         var yaxis = $scope.panel.aliasYAxis[alias] || 1;
@@ -326,14 +331,26 @@ function (angular, app, $, _, kbn, moment, timeSeries) {
         };
         };
 
 
         var series = new timeSeries.ZeroFilled({
         var series = new timeSeries.ZeroFilled({
-          datapoints: targetData.datapoints,
+          datapoints: datapoints,
           info: seriesInfo,
           info: seriesInfo,
         });
         });
 
 
+        if (datapoints && datapoints.length > 0) {
+          var last = moment.utc(datapoints[datapoints.length - 1][1] * 1000);
+          var from = moment.utc($scope.range.from);
+          if (last - from < -1000) {
+            $scope.datapointsOutside = true;
+          }
+        }
+
+        $scope.datapointsCount += datapoints.length;
+
         $scope.legend.push(seriesInfo);
         $scope.legend.push(seriesInfo);
         data.push(series);
         data.push(series);
       });
       });
 
 
+      $scope.datapointsWarning = $scope.datapointsCount || !$scope.datapointsOutside;
+
       $scope.annotationsPromise
       $scope.annotationsPromise
         .then(function(annotations) {
         .then(function(annotations) {
           data.annotations = annotations;
           data.annotations = annotations;

src/css/less/grafana.less

@@ -447,3 +447,17 @@ input[type=text].func-param {
   z-index: 0;
   z-index: 0;
 }
 }
 
 
+.datapoints-warning {
+  pointer: none;
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  z-index: 10;
+  margin-top: -50px;
+  margin-left: -100px;
+  width: 200px;
+  text-align: center;
+  cursor: auto;
+  //background: rgba(50,50,50,0.8);
+  padding: 10px;
+}
\ No newline at end of file