Graphite: added maxDataPoints override option and a help section that describes…

Graphite: added maxDataPoints override option and a help section that describes how graphite point consolidation work, Closes #5

src/app/panels/graph/module.js

@@ -178,7 +178,12 @@ function (angular, app, $, _, kbn, moment, TimeSeries) {
     $scope.updateTimeRange = function () {
     $scope.updateTimeRange = function () {
       $scope.range = timeSrv.timeRange();
       $scope.range = timeSrv.timeRange();
       $scope.rangeUnparsed = timeSrv.timeRange(false);
       $scope.rangeUnparsed = timeSrv.timeRange(false);
+      if ($scope.panel.maxDataPoints) {
+        $scope.resolution = $scope.panel.maxDataPoints;
+      }
+      else {
         $scope.resolution = Math.ceil($(window).width() * ($scope.panel.span / 12));
         $scope.resolution = Math.ceil($(window).width() * ($scope.panel.span / 12));
+      }
       $scope.interval = kbn.calculateInterval($scope.range, $scope.resolution, $scope.panel.interval);
       $scope.interval = kbn.calculateInterval($scope.range, $scope.resolution, $scope.panel.interval);
     };
     };
 
 

src/app/panels/singlestat/module.js

@@ -37,6 +37,8 @@ function (angular, app, _, TimeSeries, kbn) {
 
 
     // Set and populate defaults
     // Set and populate defaults
     var _d = {
     var _d = {
+      maxDataPoints: 100,
+      interval: null,
       targets: [{}],
       targets: [{}],
       cacheTimeout: null,
       cacheTimeout: null,
       format: 'none',
       format: 'none',
@@ -68,6 +70,8 @@ function (angular, app, _, TimeSeries, kbn) {
     $scope.updateTimeRange = function () {
     $scope.updateTimeRange = function () {
       $scope.range = timeSrv.timeRange();
       $scope.range = timeSrv.timeRange();
       $scope.rangeUnparsed = timeSrv.timeRange(false);
       $scope.rangeUnparsed = timeSrv.timeRange(false);
+      $scope.resolution = $scope.panel.maxDataPoints;
+      $scope.interval = kbn.calculateInterval($scope.range, $scope.resolution, $scope.panel.interval);
     };
     };
 
 
     $scope.get_data = function() {
     $scope.get_data = function() {
@@ -75,9 +79,9 @@ function (angular, app, _, TimeSeries, kbn) {
 
 
       var metricsQuery = {
       var metricsQuery = {
         range: $scope.rangeUnparsed,
         range: $scope.rangeUnparsed,
-        interval: '1min',
+        interval: $scope.interval,
         targets: $scope.panel.targets,
         targets: $scope.panel.targets,
-        maxDataPoints: 100,
+        maxDataPoints: $scope.resolution,
         cacheTimeout: $scope.panel.cacheTimeout
         cacheTimeout: $scope.panel.cacheTimeout
       };
       };
 
 

src/app/partials/graphite/editor.html

@@ -96,7 +96,7 @@
 					<i class="icon-wrench"></i>
 					<i class="icon-wrench"></i>
 				</li>
 				</li>
 				<li class="grafana-target-segment">
 				<li class="grafana-target-segment">
-					cacheTimeout
+					Cache timeout
 				</li>
 				</li>
 				<li>
 				<li>
 					<input type="text"
 					<input type="text"
@@ -107,6 +107,19 @@
 								spellcheck='false'
 								spellcheck='false'
 								placeholder="60">
 								placeholder="60">
 				</li>
 				</li>
+				<li class="grafana-target-segment">
+					Max data points
+				</li>
+				<li>
+					<input type="text"
+								class="input-mini grafana-target-segment-input"
+								ng-model="panel.maxDataPoints"
+								bs-tooltip="'Override max data points, automatically set to graph width in pixels.'"
+								data-placement="right"
+								ng-model-onblur ng-change="get_data()"
+								spellcheck='false'
+								placeholder="auto">
+				</li>
 			</ul>
 			</ul>
 			<div class="clearfix"></div>
 			<div class="clearfix"></div>
 		</div>
 		</div>
@@ -135,6 +148,11 @@
 						templating
 						templating
 					</a>
 					</a>
 				</li>
 				</li>
+				<li class="grafana-target-segment">
+					<a ng-click="toggleEditorHelp(5)" bs-tooltip="'click to show helpful info'" data-placement="bottom">
+						max data points
+					</a>
+				</li>
 			</ul>
 			</ul>
 			<div class="clearfix"></div>
 			<div class="clearfix"></div>
 		</div>
 		</div>
@@ -190,7 +208,18 @@
 			</ul>
 			</ul>
 		</div>
 		</div>
 
 
+		<div class="grafana-info-box span6" ng-if="editorHelpIndex === 5">
+			<h5>Max data points</h5>
+			<ul>
+				<li>Every graphite request is issued with a maxDataPoints parameter</li>
+				<li>Graphite uses this parameter to consolidate the real number of values down to this number</li>
+				<li>If there are more real values, then by default they will be consolidated using averages</li>
+				<li>This could hide real peaks and max values in your series</li>
+				<li>You can change how point consolidation is made using the consolidateBy graphite function</li>
+				<li>Point consolidation will effect series legend values (min,max,total,current)</li>
+				<li>If you override maxDataPoint and set a high value performance can be severely effected</li>
+			</ul>
+		</div>
+
 	</div>
 	</div>
 </div>
 </div>
-
-