working on more advanced dashboard/metrics/graf search

src/app/controllers/all.js

@@ -3,5 +3,6 @@ define([
   './dashLoader',
   './row',
   './pulldown',
-  './zoom'
+  './zoom',
+  './search'
 ], function () {});

src/app/controllers/search.js

@@ -0,0 +1,43 @@
+define([
+  'angular'
+],
+function (angular) {
+  'use strict';
+
+  var module = angular.module('kibana.controllers');
+
+  module.controller('SearchCtrl', function($scope, dashboard) {
+
+    $scope.init = function() {
+      $scope.elasticsearch = $scope.elasticsearch || {};
+      $scope.giveSearchFocus = 0;
+    };
+
+    $scope.elasticsearch_dblist = function(query) {
+      dashboard.elasticsearch_list(query,100).then(
+        function(result) {
+        if(!_.isUndefined(result.hits)) {
+          $scope.hits = result.hits.total;
+          $scope.elasticsearch.dashboards = result.hits.hits;
+        }
+      });
+    };
+
+    $scope.openSearch = function () {
+      $scope.giveSearchFocus = $scope.giveSearchFocus + 1;
+    };
+
+  });
+
+  module.directive('xngFocus', function() {
+    return function(scope, element, attrs) {
+       scope.$watch(attrs.xngFocus,
+         function (newValue) {
+            setTimeout(function() {
+              newValue && element.focus();
+            }, 200);
+         },true);
+      };
+  });
+
+});

src/app/panels/graphite/module.js

@@ -335,7 +335,7 @@ function (angular, app, $, _, kbn, moment, timeSeries, graphiteSrv, RQ) {
           interval: interval,
           start_date: range && range.from,
           end_date: range && range.to,
-          fill_style: 'connect'
+          fill_style: 'no'
         };
 
         _.each(results, function(targetData) {

src/app/panels/graphite/timeSeries.js

@@ -101,10 +101,9 @@ function (_, Interval) {
       strategy = this._getAllFlotPairs;
     } else if(this.opts.fill_style === 'null') {
       strategy = this._getNullFlotPairs;
-    } else if (this.opts.fill_style === 'connect') {
-      strategy = this._getFlotPairsConnect;
-    }
-    else {
+    } else if(this.opts.fill_style === 'no') {
+      strategy = this._getNoZeroFlotPairs;
+    } else {
       strategy = this._getMinFlotPairs;
     }
 
@@ -115,12 +114,19 @@ function (_, Interval) {
       this      // context
     );
 
-    return pairs;
-  };
+    // if the first or last pair is inside either the start or end time,
+    // add those times to the series with null values so the graph will stretch to contain them.
+    // Removing, flot 0.8.1's max/min params satisfy this
+    /*
+    if (this.start_time && (pairs.length === 0 || pairs[0][0] > this.start_time)) {
+      pairs.unshift([this.start_time, null]);
+    }
+    if (this.end_time && (pairs.length === 0 || pairs[pairs.length - 1][0] < this.end_time)) {
+      pairs.push([this.end_time, null]);
+    }
+    */
 
-  ts.ZeroFilled.prototype._getFlotPairsConnect = function (result, time, i, times) {
-    result.push([times[i], this._data[times[i]] || 0 ]);
-    return result;
+    return pairs;
   };
 
   /**
@@ -164,6 +170,7 @@ function (_, Interval) {
    */
   ts.ZeroFilled.prototype._getAllFlotPairs = function (result, time, i, times) {
     var next, expected_next;
+
     result.push([ times[i], this._data[times[i]] || 0 ]);
     next = times[i + 1];
     expected_next = this.interval.after(time);
@@ -206,6 +213,20 @@ function (_, Interval) {
     return result;
   };
 
+  /**
+   * ** called as a reduce stragegy in getFlotPairs() **
+   * Not fill zero's on either side of the current time, only the current time
+   * @return {array}  An array of points to plot with flot
+   */
+  ts.ZeroFilled.prototype._getNoZeroFlotPairs = function (result, time) {
+
+    // add the current time
+    if(this._data[time]){
+      result.push([ time, this._data[time]]);
+    }
+
+    return result;
+  };
 
   return ts;
 });

src/app/partials/search.html

@@ -0,0 +1,35 @@
+  <style>
+    .grafana-search {
+      position: fixed;
+      right: 0;
+      left: 0;
+      top: 39px;
+      margin-right: auto;
+      margin-left: auto;
+      /* give it dimensions */
+      min-height: 10em;
+      width: 90%;
+    }
+  </style>
+
+ <li class="dropdown">
+  <a href="#" bs-tooltip="'Search'" data-placement="bottom" ng-click="openSearch()" class="dropdown-toggle" data-toggle="dropdown">
+    <i class='icon-search'></i>
+  </a>
+  <ul class="dropdown-menu grafana-search">
+    <li>
+      <div class="grafana-search-panel">
+        <input type="text" placeholder="search dashboards, metrics, or graphs" xng-focus="giveSearchFocus" ng-model="elasticsearch.query" ng-change="elasticsearch_dblist('title:'+elasticsearch.query+'*')" />
+
+        <h6 ng-hide="elasticsearch.dashboards.length">No dashboards matching your query found</h6>
+        <table class="table table-condensed table-striped">
+          <tr bindonce ng-repeat="row in elasticsearch.dashboards | orderBy:['_id']">
+            <td><a ng-click="elasticsearch_delete(row._id)"><i class="icon-remove"></i></a></td>
+            <td><a href="#/dashboard/elasticsearch/{{row._id}}" bo-text="row._id"></a></td>
+            <td><a><i class="icon-share" ng-click="share = dashboard.share_link(row._id,'elasticsearch',row._id)" bs-modal="'app/panels/dashcontrol/share.html'"></i></a></td>
+          </tr>
+        </table>
+      </div>
+    </li>
+  </ul>
+</li>

src/index.html

@@ -35,30 +35,7 @@
         <div class="container-fluid">
           <span class="brand"><img src="img/small.png" bs-tooltip="'Kibana 3 milestone pre-5'" data-placement="bottom"> {{dashboard.current.title}}</span>
 
-          <style>
-            .grafana-search {
-              position: fixed;
-              right: 0;
-              left: 0;
-              top: 39px;
-              margin-right: auto;
-              margin-left: auto;
-              /* give it dimensions */
-              min-height: 10em;
-              width: 90%;
-            }
-          </style>
-          <ul class="nav pull-left">
-            <li class="dropdown">
-              <a href="#" bs-tooltip="'Search'" data-placement="bottom" class="dropdown-toggle" data-toggle="dropdown">
-                <i class='icon-search'></i>
-              </a>
-              <ul class="dropdown-menu grafana-search">
-                <li>
-                  <h2>asd</h2>
-                </li>
-              </ul>
-            </li>
+          <ul class="nav pull-left" ng-controller="SearchCtrl" ng-init="init()" ng-include="'app/partials/search.html'">
           </ul>
 
           <ul class="nav pull-right" ng-controller='dashLoader' ng-init="init()" ng-include="'app/partials/dashLoader.html'">

src/vendor/bootstrap/less/grafana.less

@@ -5,6 +5,15 @@
   }
 }
 
+.grafana-search-panel {
+  padding: 6px 10px;
+  input {
+    width: 100%;
+    .box-sizing(border-box);
+    padding: 15px;
+  }
+}
+
 .panelCont {
   //padding: 0 0 10px 10px;
 }