Moved search results from fixed dropdown to edit pane

src/app/controllers/dashboardNavCtrl.js

@@ -68,6 +68,10 @@ function (angular, _, moment, config, store) {
       return false;
     };
 
+    $scope.openSearch = function() {
+      $scope.emitAppEvent('show-dash-editor', { src: 'app/partials/search.html' });
+    };
+
     $scope.saveDashboard = function() {
       if (!this.isAdmin()) { return false; }
 

src/app/controllers/search.js

@@ -9,7 +9,7 @@ function (angular, _, config, $) {
 
   var module = angular.module('grafana.controllers');
 
-  module.controller('SearchCtrl', function($scope, $rootScope, $element, $location, datasourceSrv) {
+  module.controller('SearchCtrl', function($scope, $rootScope, $element, $location, datasourceSrv, $timeout) {
 
     $scope.init = function() {
       $scope.giveSearchFocus = 0;
@@ -17,7 +17,13 @@ function (angular, _, config, $) {
       $scope.results = {dashboards: [], tags: [], metrics: []};
       $scope.query = { query: 'title:' };
       $scope.db = datasourceSrv.getGrafanaDB();
-      $scope.onAppEvent('open-search', $scope.openSearch);
+
+      $timeout(function() {
+        $scope.giveSearchFocus = $scope.giveSearchFocus + 1;
+        $scope.query.query = 'title:';
+        $scope.search();
+      }, 100);
+
     };
 
     $scope.keyDown = function (evt) {
@@ -94,22 +100,11 @@ function (angular, _, config, $) {
 
     $scope.search = function() {
       $scope.showImport = false;
-      $scope.selectedIndex = -1;
+      $scope.selectedIndex = 0;
 
       $scope.searchDashboards($scope.query.query);
     };
 
-    $scope.openSearch = function (evt) {
-      if (evt) {
-        $element.next().find('.dropdown-toggle').dropdown('toggle');
-      }
-
-      $scope.searchOpened = true;
-      $scope.giveSearchFocus = $scope.giveSearchFocus + 1;
-      $scope.query.query = 'title:';
-      $scope.search();
-    };
-
     $scope.addMetricToCurrentDashboard = function (metricId) {
       $scope.dashboard.rows.push({
         title: '',

src/app/directives/dashEditLink.js

@@ -15,7 +15,6 @@ function (angular, $) {
 
           elem.bind('click',function() {
             $timeout(function() {
-              scope.exitFullscreen();
               scope.emitAppEvent('show-dash-editor', { src: partial, scope: scope });
             });
           });
@@ -32,22 +31,31 @@ function (angular, $) {
           var editorScope;
           var lastEditor;
 
+          scope.onAppEvent('hide-dash-editor', function() {
+            if (editorScope) {
+              editorScope.dismiss();
+            }
+          });
+
           scope.onAppEvent('show-dash-editor', function(evt, payload) {
             if (lastEditor === payload.src) {
               editorScope.dismiss();
               return;
             }
 
-            if (lastEditor) {
+            if (editorScope) {
               editorScope.dismiss();
             }
 
+            scope.exitFullscreen();
+
             lastEditor = payload.src;
-            editorScope = payload.scope.$new();
+            editorScope = payload.scope ? payload.scope.$new() : scope.$new();
             editorScope.dismiss = function() {
               editorScope.$destroy();
               elem.empty();
               lastEditor = null;
+              editorScope = null;
             };
 
             var src = "'" + payload.src + "'";

src/app/partials/dashboard.html

@@ -1,4 +1,4 @@
-<div ng-controller="DashboardCtrl" body-class ng-class="{'dashboard-fullscreen': dashboardViewState.fullscreen}">
+<div ng-controller="DashboardCtrl" body-class class="dashboard" ng-class="{'dashboard-fullscreen': dashboardViewState.fullscreen}">
 
 	<div ng-include="'app/partials/dashboard_topnav.html'">
 	</div>

src/app/partials/dashboard_topnav.html

@@ -57,7 +57,10 @@
 					</ul>
 				</li>
 
-				<li class="dropdown grafana-menu-load" ng-controller="SearchCtrl" ng-init="init()" ng-include="'app/partials/search.html'">
+				<li class="dropdown grafana-menu-load">
+					<a bs-tooltip="'Search'" ng-click="openSearch()">
+						<i class='icon-folder-open'></i>
+					</a>
 				</li>
 
 				<li class="grafana-menu-home"><a bs-tooltip="'Goto saved default'" data-placement="bottom" href='#/'><i class='icon-home'></i></a></li>

src/app/partials/roweditor.html

@@ -53,5 +53,5 @@
 </div>
 
 <div class="dashboard-editor-footer">
-  <button type="button" class="btn btn-info" ng-click="editor.index=0;dismiss();reset_panel();close_edit()">Close</button>
+  <button type="button" class="btn btn-success pull-right" ng-click="editor.index=0;dismiss();reset_panel();close_edit()">Close</button>
 </div>

src/app/partials/search.html

@@ -11,53 +11,54 @@
       width: 90%;
     }
   </style>
+	<div ng-controller="SearchCtrl" ng-init="init()">
+		<div class="dashboard-editor-header">
+			<div class="dashboard-editor-title" style="border: 0; line-height: 41px;">
+				<i class="icon icon-search"></i>
+				Search
+			</div>
 
-  <a href="#" bs-tooltip="'Search'" data-placement="bottom" ng-click="openSearch()" class="dropdown-toggle" data-toggle="dropdown">
-    <i class='icon-folder-open'></i>
-  </a>
-
-  <ul class="dropdown-menu" id="grafana-search" ng-if="searchOpened">
-    <li ng-if="!showImport">
-      <div class="grafana-search-panel">
-        <div class="search-field-wrapper">
-          <button class="btn btn-success pull-right" dash-editor-link="app/partials/playlist.html">
-            <i class="icon-play"></i>
-            Playlist
-          </button>
-          <button class="btn btn-success pull-right" ng-click="toggleImport($event)">
-            <i class="icon-download-alt"></i>
-            Import
-          </button>
-          <button class="btn btn-success pull-right" ng-click="newDashboard()">
-            <i class="icon-th-large"></i>
-            New
-          </button>
-          <span class="position: relative;">
-            <input  type="text"
-                    placeholder="search dashboards, metrics, or graphs"
-                    xng-focus="giveSearchFocus"
-                    ng-keydown="keyDown($event)"
-                    ng-model="query.query" 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 class="grafana-search-panel">
+				<div class="search-field-wrapper">
+					<button class="btn btn-success pull-right" dash-editor-link="app/partials/playlist.html">
+						<i class="icon-play"></i>
+						Playlist
+					</button>
+					<button class="btn btn-success pull-right" ng-click="toggleImport($event)">
+						<i class="icon-download-alt"></i>
+						Import
+					</button>
+					<button class="btn btn-success pull-right" ng-click="newDashboard()">
+						<i class="icon-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" 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>
 
-        <h6 ng-hide="results.dashboards.length">No dashboards matching your query were found.</h6>
+				<h6 ng-hide="results.dashboards.length">No dashboards matching your query were found.</h6>
 
-        <div class="search-results-container" ng-if="tagsOnly">
+				<div class="search-results-container" ng-if="tagsOnly">
 					<div ng-repeat="tag in results.tags"
-						   class="search-result-item pointer"
-							 ng-class="{'selected': $index === selectedIndex }"
-							 ng-click="filterByTag(tag.term, $event)">
+						class="search-result-item pointer"
+						ng-class="{'selected': $index === selectedIndex }"
+						ng-click="filterByTag(tag.term, $event)">
 						<a class="search-result-tag label label-tag" tag-color-from-name>
 							<i class="icon icon-tag"></i>
 							<span>{{tag.term}} &nbsp;({{tag.count}})</span>
 						</a>
-          </div>
-        </div>
+					</div>
+				</div>
 
 				<div class="search-results-container" ng-if="!tagsOnly">
 					<div class="search-result-item pointer"
@@ -102,4 +103,4 @@
         </div>
       </div>
     </li>
-  </ul>
+		</div>

src/app/services/dashboard/dashboardKeyBindings.js

@@ -21,8 +21,8 @@ function(angular, $) {
       });
       keyboardManager.unbind('esc');
 
-      keyboardManager.bind('ctrl+f', function(evt) {
-        scope.emitAppEvent('open-search', evt);
+      keyboardManager.bind('ctrl+f', function() {
+        scope.emitAppEvent('show-dash-editor', { src: 'app/partials/search.html' });
       }, { inputDisabled: true });
 
       keyboardManager.bind('ctrl+h', function() {
@@ -53,6 +53,8 @@ function(angular, $) {
           modalData.$scope.dismiss();
         }
 
+        scope.emitAppEvent('hide-dash-editor');
+
         scope.exitFullscreen();
       }, { inputDisabled: true });
     };

src/app/services/dashboard/dashboardViewStateSrv.js

@@ -16,7 +16,9 @@ function (angular, _, $) {
       var self = this;
 
       $scope.exitFullscreen = function() {
-        self.update({ fullscreen: false });
+        if (self.fullscreen) {
+          self.update({ fullscreen: false });
+        }
       };
 
       $scope.onAppEvent('dashboard-saved', function() {

src/css/less/bootswatch.dark.less

@@ -214,7 +214,6 @@ div.subnav {
 
 	border-bottom: 1px solid @fullEditBorder;
 
-
 	& > li > a {
 		.border-radius(0);
 	}

src/css/less/grafana.less

@@ -32,8 +32,11 @@
   }
 }
 
-// Search
+body {
+  overflow-y: hidden;
+}
 
+// Search
 .grafana-search-panel {
   .search-field-wrapper {
     padding: 6px 10px;
@@ -52,7 +55,7 @@
 }
 
 .search-results-container {
-  max-height: 600px;
+  height: 500px;
   overflow: auto;
   display: block;
   line-height: 28px;
@@ -76,14 +79,15 @@
   }
 
   .search-result-item:nth-child(odd) {
-    background-color: @grafanaListAccent;
+    background-color: lighten(@grayDarker, 2%);
   }
 
   .search-result-item {
     padding: 0px 10px;
     white-space: nowrap;
-    border-top: 1px solid @grafanaListBorderTop;
     border-bottom: 1px solid @grafanaListBorderBottom;
+    border-top: 1px solid @grafanaListBorderTop;
+    border-left: 1px solid @grafanaListBorderBottom;
   }
 
   .search-result-tags {
@@ -103,8 +107,8 @@
 
 .search-tagview-switch {
   position: absolute;
-  top: 15px;
-  right: 272px;
+  top: 6px;
+  right: 24px;
   color: darken(@linkColor, 30%);
   &.active {
     color: @linkColor;

src/css/less/variables.dark.less

@@ -92,9 +92,9 @@
 
 // Lists
 @grafanaListBackground:  transparent;
-@grafanaListAccent:         #232323;
-@grafanaListBorderTop:      #3E3E3E;
-@grafanaListBorderBottom:   #1c1919;
+@grafanaListAccent:         @grayDark;
+@grafanaListBorderTop:      @grayDark;
+@grafanaListBorderBottom:   @black;
 @grafanaListHighlight:      @blue;
 @grafanaListHighlightContrast: #4F4F4F;
 @grafanaListMainLinkColor: @linkColor;