added series color selector

src/app/panels/graphite/funcEditor.html

@@ -4,14 +4,13 @@
    <a ng-click="removeFunction(func)">
       Remove
     </a>
-    |&nbsp;
+    &nbsp;&nbsp;
     <a ng-click="helpFunction(func)">
       Help
     </a>
-    |&nbsp;
-    <a ng-click="dismiss()">
-      Close
-    </a>
+    &nbsp;&nbsp;
+    <a class="close" ng-click="dismiss();" href="">×</a>
+
   </div>
 
   <div class="editor-row" ng-if="func.def.params.length">

src/app/panels/graphite/module.html

@@ -55,7 +55,12 @@
           ng-class="{'pull-right': series.yaxis === 2, 'hidden-series': hiddenSeries[series.alias]}"
           ng-repeat='series in legend'
           class="histogram-legend">
-        <i class='icon-circle' ng-style="{color: series.color}"></i>
+        <i  class='icon-circle pointer'
+            ng-style="{color: series.color}"
+            bs-popover="'app/panels/graphite/seriesColor.html'"
+            data-unique="1"
+            data-placement="bottomLeft">
+        </i>
         <span class='small histogram-legend-item'>
           <a ng-click="toggleSeries(series)">
             {{series.alias}}

src/app/panels/graphite/module.js

@@ -217,7 +217,7 @@ function (angular, app, $, _, kbn, moment, timeSeries) {
       $scope.editor = {index: 1};
       $scope.editorTabs = _.union(['General'],_.pluck($scope.panelMeta.fullEditorTabs,'title'));
       $scope.hiddenSeries = {};
-
+      $scope.aliasToColor = {};
       // Always show the query if an alias isn't set. Users can set an alias if the query is too
       // long
       $scope.panel.tooltip.query_as_alias = true;
@@ -355,10 +355,12 @@ function (angular, app, $, _, kbn, moment, timeSeries) {
         });
 
         var target = graphiteSrv.match($scope.panel.targets, targetData.target);
+        var alias = targetData.target;
+        var color = $scope.aliasToColor[alias] || $scope.colors[data.length];
 
         var seriesInfo = {
-          alias: targetData.target,
-          color: $scope.colors[data.length],
+          alias: alias,
+          color:  color,
           enable: true,
           yaxis: target.yaxis || 1
         };

src/app/panels/graphite/seriesColor.html

@@ -0,0 +1,8 @@
+<div style="width: 150px;">
+  <i ng-repeat="color in colors"
+    class="pointer"
+    ng-class="{'icon-circle-blank': color === series.color,'icon-circle': color !== series.color}"
+    ng-style="{color:color}"
+    ng-click="series.color = color;render();aliasToColor[series.alias] = color;">
+  </i>
+</div>

src/app/services/graphite/graphiteFuncs.js

@@ -92,7 +92,7 @@ function (_) {
   addFuncDef({
     name: 'aliasByNode',
     category: categories.Special,
-    params: [ { name: "node", type: "node", } ],
+    params: [ { name: "node", type: "select", options: [1,2,3,4,5,6,7,8,9,10,12] } ],
     defaultParams: [3]
   });
 

src/vendor/bootstrap/less/grafana.less

@@ -229,12 +229,12 @@ input[type=text].func-param {
 }
 
 .grafana-func-editor {
-  min-width: 90px;
+  min-width: 140px;
   .grafana-func-editor-header {
     background: #41474c;
     text-align: center;
     border-bottom: 1px solid #353a3e;
-    padding: 3px 7px;
+    padding: 3px 5px;
     white-space: nowrap;
   }
   .editor-row {