Graphite: new option available in metrics view to set cacheTimeout, will…

Graphite: new option available in metrics view to set cacheTimeout, will override default memcache timeout, Closes #266

CHANGELOG.md

@@ -10,6 +10,7 @@
 - [Issue #394](https://github.com/grafana/grafana/issues/394). InfluxDB: Annotation support
 - [Issue #610](https://github.com/grafana/grafana/issues/610). InfluxDB: Support for InfluxdB v0.8 list series response schemea (series typeahead)
 - [Issue #604](https://github.com/grafana/grafana/issues/604). Chart: New axis format, 'bps' (SI unit in steps of 1000) useful for network gear metics
+- [Issue #266](https://github.com/grafana/grafana/issues/266). Graphite: New option cacheTimeout to override graphite default memcache timeout
 
 **Changes**
 - [Issue #536](https://github.com/grafana/grafana/issues/536). Graphite: Use unix epoch for Graphite from/to for absolute time ranges

src/app/controllers/graphiteTarget.js

@@ -268,6 +268,13 @@ function (angular, _, config, gfunc, Parser) {
       }
     };
 
+    $scope.toggleMetricOptions = function() {
+      $scope.panel.metricOptionsEnabled = !$scope.panel.metricOptionsEnabled;
+      if (!$scope.panel.metricOptionsEnabled) {
+        delete $scope.panel.cacheTimeout;
+      }
+    };
+
     $scope.duplicate = function() {
       var clone = angular.copy($scope.target);
       $scope.panel.targets.push(clone);

src/app/panels/graph/module.js

@@ -265,18 +265,19 @@ function (angular, app, $, _, kbn, moment, timeSeries) {
 
       $scope.updateTimeRange();
 
-      var graphiteQuery = {
+      var metricsQuery = {
         range: $scope.rangeUnparsed,
         interval: $scope.interval,
         targets: $scope.panel.targets,
         format: $scope.panel.renderer === 'png' ? 'png' : 'json',
         maxDataPoints: $scope.resolution,
         datasource: $scope.panel.datasource,
+        cacheTimeout: $scope.panel.cacheTimeout
       };
 
       $scope.annotationsPromise = annotationsSrv.getAnnotations($scope.filter, $scope.rangeUnparsed, $scope.dashboard);
 
-      return $scope.datasource.query($scope.filter, graphiteQuery)
+      return $scope.datasource.query($scope.filter, metricsQuery)
         .then($scope.dataHandler)
         .then(null, function(err) {
           $scope.panelMeta.loading = false;

src/app/partials/graphite/editor.html

@@ -32,6 +32,12 @@
                 Duplicate
               </a>
             </li>
+            <li role="menuitem">
+              <a  tabindex="1"
+                  ng-click="toggleMetricOptions()">
+                Toggle request options
+              </a>
+            </li>
           </ul>
         </li>
         <li>
@@ -77,29 +83,32 @@
         <li ng-repeat="func in functions">
           <span graphite-func-editor class="grafana-target-segment grafana-target-function">
           </span>
-          <!-- <a  class="grafana-target-segment grafana-target-function dropdown-toggle"
-              bs-popover="'app/partials/graphite/funcEditor.html'"
-              data-placement="bottom">
-            {{func.def.name}}
-          </a> -->
-          <!-- <span class="grafana-target-segment grafana-target-function">
-            <span>{{func.def.name}}(</span><span ng-repeat="param in func.def.params">
-              <input  type="text"
-                      class="input-mini grafana-function-param-input"
-                      dynamic-width
-                      ng-model="func.params[$index]"></input>
-            </span><span>)</span>
-          </span> -->
         </li>
         <li class="dropdown" graphite-add-func>
-
         </li>
       </ul>
+      <div class="clearfix"></div>
+    </div>
+  </div>
 
-
+	<div class="grafana-target grafana-metric-options" ng-if="panel.metricOptionsEnabled">
+		<div class="grafana-target-inner">
+			<ul class="grafana-segment-list">
+				<li class="grafana-target-segment">
+					cacheTimeout <tip>Graphite parameter to overwride memcache default timeout (unit is seconds)</tip>
+				</li>
+				<li>
+					<input type="text"
+								class="input-large grafana-target-segment-input"
+								ng-model="panel.cacheTimeout"
+								spellcheck='false'
+								placeholder="60">
+				</li>
+			</ul>
       <div class="clearfix"></div>
 		</div>
 	</div>
+
 </div>
 
 

src/app/services/graphite/graphiteDatasource.js

@@ -31,6 +31,7 @@ function (angular, _, $, config, kbn, moment) {
           until: this.translateTime(options.range.to, 'round-up'),
           targets: options.targets,
           format: options.format,
+          cacheTimeout: options.cacheTimeout,
           maxDataPoints: options.maxDataPoints,
         };
 
@@ -205,7 +206,7 @@ function (angular, _, $, config, kbn, moment) {
 
     GraphiteDatasource.prototype.buildGraphiteParams = function(filterSrv, options) {
       var clean_options = [];
-      var graphite_options = ['target', 'targets', 'from', 'until', 'rawData', 'format', 'maxDataPoints'];
+      var graphite_options = ['target', 'targets', 'from', 'until', 'rawData', 'format', 'maxDataPoints', 'cacheTimeout'];
 
       if (options.format !== 'png') {
         options['format'] = 'json';

src/css/less/grafana.less

@@ -213,6 +213,13 @@
   }
 }
 
+.grafana-metric-options {
+  margin-top: 35px;
+  .grafana-segment-list {
+    margin-left: 0;
+  }
+}
+
 // fix for fixed positioned panel & scrolling
 .grafana-segment-dropdown-menu {
   margin-bottom: 70px;