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,9 +10,16 @@
     </span>
   </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>
 
-  <div grafana-graph class="pointer histogram-chart">
   </div>
 
   <div ng-if="panel.legend" class="grafana-legend-container">

src/app/panels/graphite/module.js

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

src/css/less/grafana.less

@@ -447,3 +447,17 @@ input[type=text].func-param {
   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;
+}