Working on new search box design

src/app/controllers/search.js

@@ -15,7 +15,7 @@ function (angular, _, config, $) {
       $scope.giveSearchFocus = 0;
       $scope.selectedIndex = -1;
       $scope.results = {dashboards: [], tags: [], metrics: []};
-      $scope.query = { query: 'title:' };
+      $scope.query = { query: '' };
       $scope.db = datasourceSrv.getGrafanaDB();
       $scope.currentSearchId = 0;
 
@@ -24,7 +24,7 @@ function (angular, _, config, $) {
 
       $timeout(function() {
         $scope.giveSearchFocus = $scope.giveSearchFocus + 1;
-        $scope.query.query = 'title:';
+        $scope.query.query = '';
         $scope.search();
       }, 100);
 
@@ -52,7 +52,7 @@ function (angular, _, config, $) {
         var selectedDash = $scope.results.dashboards[$scope.selectedIndex];
         if (selectedDash) {
           $location.search({});
-          $location.path("/dashboard/db/" + selectedDash.id);
+          $location.path("/dashboard/db/" + selectedDash.slug);
           setTimeout(function() {
             $('body').click(); // hack to force dropdown to close;
           });
@@ -69,11 +69,11 @@ function (angular, _, config, $) {
       $location.path("/dashboard/db/" + slug);
     };
 
-    $scope.searchDashboards = function(queryString) {
+    $scope.searchDashboards = function() {
       $scope.currentSearchId = $scope.currentSearchId + 1;
       var localSearchId = $scope.currentSearchId;
 
-      return $scope.db.searchDashboards(queryString)
+      return $scope.db.searchDashboards($scope.query)
         .then(function(results) {
           if (localSearchId < $scope.currentSearchId) { return; }
 
@@ -98,14 +98,19 @@ function (angular, _, config, $) {
       $scope.tagsOnly = !$scope.tagsOnly;
       $scope.query.query = $scope.tagsOnly ? "tags!:" : "";
       $scope.giveSearchFocus = $scope.giveSearchFocus + 1;
-      $scope.selectedIndex = -1;
+      $scope.search();
+    };
+
+    $scope.showStarred = function() {
+      $scope.query.starred = !$scope.query.starred;
+      $scope.giveSearchFocus = $scope.giveSearchFocus + 1;
       $scope.search();
     };
 
     $scope.search = function() {
       $scope.showImport = false;
       $scope.selectedIndex = 0;
-      $scope.searchDashboards($scope.query.query);
+      $scope.searchDashboards();
     };
 
     $scope.deleteDashboard = function(dash, evt) {

src/app/directives/dashEditLink.js

@@ -93,6 +93,11 @@ function (angular, $) {
 
             var src = "'" + payload.src + "'";
             var view = $('<div class="gf-box" ng-include="' + src + '"></div>');
+
+            if (payload.cssClass) {
+              view.addClass(payload.cssClass);
+            }
+
             elem.append(view);
             $compile(elem.contents())(editorScope);
           }

src/app/features/dashboard/dashboardNavCtrl.js

@@ -80,7 +80,7 @@ function (angular, _, moment, config, store) {
     };
 
     $scope.openSearch = function() {
-      $scope.appEvent('show-dash-editor', { src: 'app/partials/search.html' });
+      $scope.appEvent('show-dash-editor', { src: 'app/partials/search.html', cssClass: 'search-container' });
     };
 
     $scope.saveDashboard = function() {

src/app/features/dashboard/keybindings.js

@@ -40,7 +40,7 @@ function(angular, $) {
       }, { inputDisabled: true });
 
       keyboardManager.bind('ctrl+f', function() {
-        scope.appEvent('show-dash-editor', { src: 'app/partials/search.html' });
+        scope.appEvent('show-dash-editor', { src: 'app/partials/search.html', cssClass: 'search-container' });
       }, { inputDisabled: true });
 
       keyboardManager.bind('ctrl+o', function() {

src/app/features/grafanaDatasource/datasource.js

@@ -65,7 +65,7 @@ function (angular, _, kbn) {
     };
 
     GrafanaDatasource.prototype.searchDashboards = function(query) {
-      return backendSrv.get('/api/search/', {q: query})
+      return backendSrv.get('/api/search/', query)
         .then(function(data) {
           return data;
         });

src/app/partials/search.html

@@ -1,31 +1,14 @@
 <div ng-controller="SearchCtrl" ng-init="init()" class="search-box">
 
-	<div class="gf-box-header">
+	<div class="search-field-wrapper">
-		<div class="gf-box-title" style="border: 0; line-height: 41px;">
+		<span style="position: relative;">
-			<i class="fa fa-search"></i>
+			<input  type="text" placeholder="Find dashboards by name" xng-focus="giveSearchFocus" tabindex="1"
-			Search
+			ng-keydown="keyDown($event)" ng-model="query.query" ng-model-options="{ debounce: 500 }" spellcheck='false' ng-change="search()" />
-		</div>
+		</span>
-
+		<div class="search-switches">
-		<div class="grafana-search-panel">
+			<i class="fa fa-filter"></i>
-			<div class="search-field-wrapper">
+			<a href="javascript:void(0);" ng-class="{'active': tagsOnly}" ng-click="showStarred()" tabindex="2">starred</a> |
-				<button class="btn btn-success pull-right" dash-editor-link="app/partials/playlist.html" editor-scope="isolated">
+			<a href="javascript:void(0);" ng-class="{'active': tagsOnly}" ng-click="showTags()" tabindex="3">tags</a>
-					<i class="fa fa-play"></i>
-					Playlist
-				</button>
-				<button class="btn btn-success pull-right" ng-click="toggleImport($event)">
-					<i class="fa fa-download"></i>
-					Import
-				</button>
-				<button class="btn btn-success pull-right" ng-click="newDashboard()">
-					<i class="fa fa-th-large"></i>
-					New
-				</button>
-				<span style="position: relative;">
-					<input  type="text" placeholder="search dashboards, metrics, or graphs" xng-focus="giveSearchFocus"
-									ng-keydown="keyDown($event)" ng-model="query.query" ng-model-options="{ debounce: 500 }" spellcheck='false' ng-change="search()" />
-					<a class="search-tagview-switch" href="javascript:void(0);" ng-class="{'active': tagsOnly}" ng-click="showTags($event)">tags</a>
-				</span>
-			</div>
 		</div>
 	</div>
 
@@ -33,15 +16,15 @@
 		<div class="search-results-container" ng-if="tagsOnly">
 			<div class="row">
 				<div class="span6 offset1">
-			<div ng-repeat="tag in results.tags" class="pointer" style="width: 180px; float: left;"
+					<div ng-repeat="tag in results.tags" class="pointer" style="width: 180px; float: left;"
-				ng-class="{'selected': $index === selectedIndex }"
+						ng-class="{'selected': $index === selectedIndex }"
-				ng-click="filterByTag(tag.term, $event)">
+						ng-click="filterByTag(tag.term, $event)">
-				<a class="search-result-tag label label-tag" tag-color-from-name>
+						<a class="search-result-tag label label-tag" tag-color-from-name>
-					<i class="fa fa-tag"></i>
+							<i class="fa fa-tag"></i>
-					<span>{{tag.term}} &nbsp;({{tag.count}})</span>
+							<span>{{tag.term}} &nbsp;({{tag.count}})</span>
-				</a>
+						</a>
-			</div>
+					</div>
-			</div>
+				</div>
 			</div>
 		</div>
 
@@ -84,4 +67,20 @@
 		</div>
 	</div>
 
+	<div class="search-button-row">
+		<button class="btn btn-inverse pull-left" ng-click="newDashboard()">
+			<i class="fa fa-plus"></i>
+			New
+		</button>
+		<button class="btn btn-inverse pull-left" ng-click="toggleImport($event)">
+			<i class="fa fa-download"></i>
+			Import
+		</button>
+		<button class="btn btn-inverse pull-left" dash-editor-link="app/partials/playlist.html" editor-scope="isolated">
+			<i class="fa fa-play"></i>
+			Playlist
+		</button>
+		<div class="clearfix"></div>
+	</div>
+
 </div>

src/css/less/grafana.less

@@ -9,8 +9,8 @@
 @import "singlestat.less";
 @import "tightform.less";
 @import "sidemenu.less";
-@import "gfbox.less";
 @import "navbar.less";
+@import "gfbox.less";
 @import "dashlist.less";
 
 .row-control-inner {

src/css/less/search.less

@@ -1,18 +1,29 @@
+.gf-box.search-container {
+  left: 54px;
+  top: 33px;
+  margin: 15px;
+  z-index: 1000;
+  position: fixed;
+  width: 700px;
+  box-shadow: 0px 0px 55px 0px black;
+  padding: 10px;
+  font-size: 16px;
+}
+
 // Search
-.grafana-search-panel {
+.search-field-wrapper {
-  .search-field-wrapper {
+  padding-bottom: 10px;
-    padding: 6px 10px;
+  input {
-    input {
+    width: 100%;
-      width: 100%;
+    padding: 18px 8px;
-    }
+    box-sizing: border-box;
-    button {
+  }
-      margin: 0 4px 0 0;
+  button {
-    }
+    margin: 0 4px 0 0;
-    > span {
+  }
-      display: block;
+  > span {
-      overflow: hidden;
+    display: block;
-      padding-right: 25px;
+    overflow: hidden;
-    }
   }
 }
 
@@ -49,7 +60,7 @@
       padding-right: 10px;
       color: @grafanaListHighlightContrast;
     }
-   }
+  }
 
   .search-result-item:nth-child(odd) {
     background-color: @grafanaListAccent;
@@ -60,7 +71,6 @@
     white-space: nowrap;
     border-bottom: 1px solid @grafanaListBorderBottom;
     border-top: 1px solid @grafanaListBorderTop;
-    border-left: 1px solid @grafanaListBorderBottom;
   }
 
   .search-result-tags {
@@ -78,14 +88,20 @@
   }
 }
 
-.search-tagview-switch {
+.search-switches {
   position: absolute;
-  top: 6px;
+  top: 19px;
-  right: 24px;
+  color: @textColor;
-  color: darken(@linkColor, 30%);
+  right: 21px;
-  &.active {
+  a {
-    color: @linkColor;
+    color: @textColor;
+    &.active {
+      color: @linkColor;
+    }
   }
 }
 
+.search-button-row {
+  padding-top: 20px;
+}