feature: hide / show targets

src/app/panels/graphite/editor.html

@@ -1,6 +1,11 @@
 <div class="editor-row">
 
-	<div class="grafana-target" ng-repeat="target in panel.targets" ng-controller="GraphiteTargetCtrl" ng-init="init()">
+	<div  ng-repeat="target in panel.targets"
+        class="grafana-target"
+        ng-class="{'grafana-target-hidden': target.hide}"
+        ng-controller="GraphiteTargetCtrl"
+        ng-init="init()">
+
     <div class="grafana-target-inner-wrapper">
       <div class="grafana-target-inner">
         <ul class="grafana-target-controls">
@@ -17,8 +22,7 @@
           <li class="dropdown">
             <a  class="pointer dropdown-toggle"
                 data-toggle="dropdown"
-                tabindex="1"
-                ng-click="doSomethign()">
+                tabindex="1">
               <i class="icon-cog"></i>
             </a>
             <ul class="dropdown-menu pull-right" role="menu">
@@ -45,7 +49,9 @@
 
         <ul class="grafana-target-controls-left">
           <li ng-hide="parserError">
-            <a class="grafana-target-segment" ng-click="hideit()" role="menuitem">
+            <a  class="grafana-target-segment"
+                ng-click="target.hide = !target.hide; get_data();"
+                role="menuitem">
               <i class="icon-eye-open"></i>
             </a>
           </li>

src/app/panels/graphite/graphiteSrv.js

@@ -8,48 +8,21 @@ function ($, RQ, _, config) {
   'use strict';
 
 
-  function build_graphite_options(options, raw) {
-    raw = raw || false;
+  function build_graphite_options(options) {
     var clean_options = [];
-    //var internal_options = ['_t'];
     var graphite_options = ['target', 'targets', 'from', 'until', 'rawData', 'format', 'maxDataPoints'];
-    var graphite_png_options = ['areaMode', 'width', 'height', 'template', 'margin', 'bgcolor',
-                         'fgcolor', 'fontName', 'fontSize', 'fontBold', 'fontItalic',
-                         'yMin', 'yMax', 'colorList', 'title', 'vtitle', 'lineMode',
-                         'lineWith', 'hideLegend', 'hideAxes', 'hideGrid', 'minXstep',
-                         'majorGridlineColor', 'minorGridLineColor', 'minorY',
-                         'thickness', 'min', 'max', 'tz'];
 
-    if(raw) {
-      options['format'] = 'json';
-    } else {
-      // use random parameter to force image refresh
-      options["_t"] = options["_t"] || Math.random();
-    }
+    options['format'] = 'json';
 
     $.each(options, function (key, value) {
-      if(raw) {
-        if ($.inArray(key, graphite_options) === -1) {
-          return;
-        }
-      } else {
-        if ($.inArray(key, graphite_options) === -1 && $.inArray(key, graphite_png_options) === -1) {
-          return;
-        }
+      if ($.inArray(key, graphite_options) === -1) {
+        return;
       }
+
       if (key === "targets") {
         $.each(value, function (index, value) {
-          if (raw) {
-            // it's normally pointless to use alias() in raw mode, because we apply an alias (name) ourself
-            // in the client rendering step.  we just need graphite to return the target.
-            // but graphite sometimes alters the name of the target in the returned data
-            // (https://github.com/graphite-project/graphite-web/issues/248)
-            // so we need a good string identifier and set it using alias() (which graphite will honor)
-            // so that we recognize the returned output. simplest is just to include the target spec again
-            // though this duplicates a lot of info in the url.
+          if (!value.hide) {
             clean_options.push("target=" + encodeURIComponent(value.target));
-          } else {
-            clean_options.push("target=alias(color(" +encodeURIComponent(value.target + ",'" + value.color) +"'),'" + value.name +"')");
           }
         });
       } else if (value !== null) {
@@ -69,7 +42,7 @@ function ($, RQ, _, config) {
         maxDataPoints: options.maxDataPoints
       };
 
-      var graphiteParameters = build_graphite_options(graphOptions, true);
+      var graphiteParameters = build_graphite_options(graphOptions);
       getGraphiteData(graphiteParameters)
         .done(function(data) {
           requestion(data);

src/vendor/bootstrap/less/grafana.less

@@ -99,6 +99,9 @@
 }
 
 /* Graphite Target Editor */
+@grafanaTargetColor:       #c8c8c8;
+@grafanaTargetColorHide:   darken(#c8c8c8, 25%);
+
 .grafana-target {
 }
 
@@ -136,9 +139,13 @@
   display: inline-block;
   font-weight: normal;
   border: 1px solid #050505;
-  color: #c8c8c8;
+  color: @grafanaTargetColor;
   display: inline-block;
 
+  .grafana-target-hidden & {
+    color: @grafanaTargetColorHide;
+  }
+
   &:hover, &:focus {
     text-decoration: none;
   }
@@ -146,6 +153,7 @@
     background: #282828;
   }
 }
+
 .grafana-target-function {
   background: #303030;
   &:hover {
@@ -176,7 +184,11 @@
     padding: 5px 7px;
     position: relative;
     top: 5px;
-    color: #c8c8c8;
+    color: @grafanaTargetColor;
+
+    .grafana-target-hidden & {
+      color: @grafanaTargetColorHide;
+    }
 
     &:hover, &:focus {
       text-decoration: none;
@@ -191,7 +203,7 @@ input[type=text].grafana-target-text-input {
   background: transparent;
   width: 80%;
   float: left;
-  color: #c8c8c8;
+  color: @grafanaTargetColor;
   border-radius: 0;
 }