continued work on function editing

src/app/controllers/graphiteTarget.js

@@ -85,7 +85,7 @@ function (angular, _, config) {
 
     function setSegmentFocus(segmentIndex) {
       _.each($scope.segments, function(segment, index) {
-        segment.focus = segmentIndex == index;
+        segment.focus = segmentIndex === index;
       });
     }
 
@@ -99,10 +99,10 @@ function (angular, _, config) {
               val: altSegment.text,
               html: altSegment.text,
               expandable: altSegment.expandable
-            }
+            };
           });
 
-          altSegments.unshift({val: '*', html: '<i class="icon-asterisk"></i>' })
+          altSegments.unshift({val: '*', html: '<i class="icon-asterisk"></i>' });
           $scope.altSegments = altSegments;
         });
     };
@@ -135,8 +135,9 @@ function (angular, _, config) {
     $scope.functionParamsChanged = function(func) {
       func.text = func.def.name + '(';
       _.each(func.def.params, function(param) {
-        func.text += func.params[param.name];
+        func.text += func.params[param.name] + ', ';
       });
+      func.text = func.text.substring(0, func.text.length - 2);
       func.text += ')';
     };
 
@@ -144,7 +145,7 @@ function (angular, _, config) {
       console.log($scope.functions);
     };
 
-    $scope.editFunction = function(func) {
+    $scope.editFunction = function() {
       //func.edit = true;
     };
 
@@ -163,12 +164,6 @@ function (angular, _, config) {
             });
           }
         });
-    /*    // to address @blesh's comment, set attribute value to 'false'
-        // on blur event:
-        element.bind('blur', function() {
-           console.log('blur');
-           scope.$apply(model.assign(scope, false));
-        });*/
       }
     };
   });

src/app/panels/graphite/editor.html

@@ -1,69 +1,4 @@
 <div class="editor-row">
-  <style>
-
-    .grafana-target-inner-wrapper {
-      border-top: 1px solid #444444;
-      border-bottom: 1px solid #444444;
-    }
-    .grafana-target-inner {
-      border-top: 1px solid black;
-      border-bottom: 1px solid black;
-      background: #202020;
-    }
-
-    .grafana-target-onoff {
-      float: left;
-      padding: 5px 7px;
-    }
-
-    .grafana-segment-list {
-      list-style: none;
-      margin: 0;
-      float: left;
-    }
-    .grafana-segment-list > li {
-      float: left;
-    }
-    .grafana-target-segment {
-      padding: 5px 7px;
-      display: inline-block;
-      font-weight: normal;
-      border-left: 1px solid #050505;
-      color: #c8c8c8;
-    }
-
-    .grafana-target-controls {
-      float: right;
-      padding: 5px 7px;
-    }
-
-    .grafana-target .dropdown {
-      padding: 0; margin: 0;
-    }
-
-    .grafana-target-segment:hover {
-      text-decoration: none;
-    }
-
-    a.grafana-target-segment:focus {
-      outline: 0;
-      text-decoration: none;
-    }
-
-    .grafana-target-func-panel ul {
-      list-style: none;
-      margin: 0;
-    }
-    .grafana-target-func-panel ul > li {
-      float: left;
-      padding: 1px 7px;
-    }
-
-    .grafana-target-func-panel-icon {
-      float: left;
-      padding: 1px 7px;
-    }
-  </style>
 
 	<div class="grafana-target" ng-repeat="target in panel.targets" ng-controller="GraphiteTargetCtrl" ng-init="init()">
     <div class="grafana-target-inner-wrapper">
@@ -95,11 +30,8 @@
         <i class="icon-long-arrow-right"></i>
       </span>
       <ul>
-        <li>
-          groupByNode( <input type="text" class="func-param" value="1"
-        </li>
         <li ng-repeat="func in functions">
-          <a bs-popover="'app/panels/graphite/funcEditor.html'" data-placement="bottom">{{func.text}}</a>
+          <a bs-popover="'app/panels/graphite/funcEditor.html'" data-placement="top">{{func.text}}</a>
           <i class="icon-long-arrow-right"></i>
         </li>
         <li>

src/app/panels/graphite/funcEditor.html

@@ -1,6 +1,6 @@
 <div class="grafana-func-editor">
 
-<div class="row-fluid">
+<div class="grafana-func-editor-header">
   <a ng-click="removeFunction(func)">
     Remove
   </a>
@@ -23,6 +23,7 @@
     <div class="editor-option" ng-repeat="param in func.def.params">
       <label class="small">{{param.name}}</label>
       <input ng-if="param.type === 'int'"
+            type="text"
             placeholder="seconds"
             focus-me="true"
             class="input-mini"
@@ -37,7 +38,7 @@
        </select>
 
        <select  ng-if="param.type === 'function'"
-                class="input-small"
+                style="width: 110px"
                 ng-change="functionParamsChanged(func)"
                 ng-model="func.params[param.name]"
                 ng-options="f for f in ['sumSeries', 'avgSeries']">

src/app/panels/graphite/module.js

@@ -36,7 +36,7 @@ function (angular, app, $, _, kbn, moment, timeSeries, graphiteSrv, RQ) {
   var module = angular.module('kibana.panels.graphite', []);
   app.useModule(module);
 
-  module.controller('graphite', function($scope, $rootScope, querySrv, dashboard, filterSrv) {
+  module.controller('graphite', function($scope, $rootScope, filterSrv) {
     $scope.panelMeta = {
       modals : [
         {
@@ -209,6 +209,8 @@ function (angular, app, $, _, kbn, moment, timeSeries, graphiteSrv, RQ) {
 
 
     $scope.init = function() {
+      $scope.openConfigureModal({preventDefault: function() {}, stopPropagation: function() {} });
+
       // Hide view options by default
       $scope.options = false;
       $scope.editor = {index: 1};
@@ -433,7 +435,7 @@ function (angular, app, $, _, kbn, moment, timeSeries, graphiteSrv, RQ) {
 
   });
 
-  module.directive('histogramChart', function(dashboard, filterSrv) {
+  module.directive('histogramChart', function(filterSrv) {
     return {
       restrict: 'A',
       template: '<div> </div>',

src/vendor/bootstrap/less/grafana.less

@@ -95,4 +95,97 @@
     padding-bottom: 6px;
     font-size: 0.8rem;
   }
+}
+
+/* Graphite Target Editor */
+.grafana-target-inner-wrapper {
+  border-top: 1px solid #444444;
+  border-bottom: 1px solid #444444;
+}
+.grafana-target-inner {
+  border-top: 1px solid black;
+  border-bottom: 1px solid black;
+  background: #202020;
+}
+
+.grafana-target-onoff {
+  float: left;
+  padding: 5px 7px;
+}
+
+.grafana-segment-list {
+  list-style: none;
+  margin: 0;
+  float: left;
+  >li {
+    float: left;
+  }
+}
+
+.grafana-target-segment {
+  padding: 5px 7px;
+  display: inline-block;
+  font-weight: normal;
+  border-left: 1px solid #050505;
+  color: #c8c8c8;
+
+  &:hover {
+    text-decoration: none;
+  }
+  &:focus {
+    text-decoration: none;
+  }
+}
+
+.grafana-target-controls {
+  float: right;
+  padding: 5px 7px;
+}
+
+.grafana-target .dropdown {
+  padding: 0; margin: 0;
+}
+
+.grafana-target-func-panel {
+  ul {
+    list-style: none;
+    margin: 0;
+
+    >li {
+      float: left;
+      padding: 1px 7px;
+    }
+  }
+}
+
+.grafana-target-func-panel-icon {
+  float: left;
+  padding: 1px 7px;
+}
+
+input[type=text].func-param {
+  border: none;
+  background: inherit;
+  width: 30px;
+  border-radius: none;
+  padding: 0;
+  margin: 0;
+}
+
+.grafana-target {
+  .popover-content {
+    padding: 0;
+  }
+}
+
+.grafana-func-editor {
+  .grafana-func-editor-header {
+    background: #41474c;
+    text-align: center;
+    border-bottom: 1px solid #353a3e;
+    padding: 2px 5px;
+  }
+  .editor-row {
+    padding: 5px;
+  }
 }