fix(search); fixes to dashboard search (using keyboard), and fix for singlestat in snapshot view

public/app/core/components/grafana_app.ts

@@ -187,13 +187,17 @@ export function grafanaAppDirective(playlistSrv) {
         // hide search
         if (elem.find('.search-container').length > 0) {
           if (target.parents('.search-container').length === 0) {
-            scope.appEvent('hide-dash-search');
+            scope.$apply(function() {
+              scope.appEvent('hide-dash-search');
+            });
           }
         }
         // hide sidemenu
         if (!ignoreSideMenuHide && !scope.contextSrv.pinned && elem.find('.sidemenu').length > 0) {
           if (target.parents('.sidemenu').length === 0) {
-            scope.$apply(() => scope.contextSrv.toggleSideMenu());
+            scope.$apply(function() {
+              scope.contextSrv.toggleSideMenu();
+            });
           }
         }
 

public/app/core/components/search/search.html

+<div class="search-container" ng-if="ctrl.isOpen">
 	<div class="search-field-wrapper">
 		<span style="position: relative;">
 			<input  type="text" placeholder="Find dashboards by name" give-focus="ctrl.giveSearchFocus" tabindex="1"
@@ -29,7 +30,7 @@
 		<div class="row">
 			<div class="span6 offset1">
 				<div ng-repeat="tag in ctrl.results" class="pointer" style="width: 180px; float: left;"
-					ng-class="{'selected': $index === selectedIndex }"
+					ng-class="{'selected': $index === ctrl.selectedIndex }"
 					ng-click="ctrl.filterByTag(tag.term, $event)">
 					<a class="search-result-tag label label-tag" tag-color-from-name="tag.term">
 						<i class="fa fa-tag"></i>
@@ -44,7 +45,7 @@
 		<h6 ng-hide="ctrl.results.length">No dashboards matching your query were found.</h6>
 
 		<a class="search-item pointer search-item-{{row.type}}" bindonce ng-repeat="row in ctrl.results"
-			ng-class="{'selected': $index == selectedIndex}" ng-href="{{row.url}}">
+			ng-class="{'selected': $index == ctrl.selectedIndex}" ng-href="{{row.url}}">
 
 			<span class="search-result-tags">
 				<span ng-click="ctrl.filterByTag(tag, $event)" ng-repeat="tag in row.tags" tag-color-from-name="tag"  class="label label-tag">
@@ -71,4 +72,4 @@
 		</a>
 		<div class="clearfix"></div>
 	</div>
-
+</div>

public/app/core/components/search/search.ts

@@ -7,6 +7,7 @@ import $ from 'jquery';
 import coreModule from '../../core_module';
 
 export class SearchCtrl {
+  isOpen: boolean;
   query: any;
   giveSearchFocus: number;
   selectedIndex: number;
@@ -15,16 +16,34 @@ export class SearchCtrl {
   tagsMode: boolean;
   showImport: boolean;
   dismiss: any;
+  ignoreClose: any;
 
   /** @ngInject */
-  constructor(private $scope, private $location, private $timeout, private backendSrv, private contextSrv) {
+  constructor(private $scope, private $location, private $timeout, private backendSrv, private contextSrv, private $rootScope) {
+    $rootScope.onAppEvent('show-dash-search', this.openSearch.bind(this), $scope);
+    $rootScope.onAppEvent('hide-dash-search', this.closeSearch.bind(this), $scope);
+  }
+
+  closeSearch() {
+    this.isOpen = this.ignoreClose;
+  }
+
+  openSearch() {
+    if (this.isOpen) {
+      this.isOpen = false;
+      return;
+    }
+
+    this.isOpen = true;
     this.giveSearchFocus = 0;
     this.selectedIndex = -1;
     this.results = [];
     this.query = { query: '', tag: [], starred: false };
     this.currentSearchId = 0;
+    this.ignoreClose = true;
 
-    $timeout(() => {
+    this.$timeout(() => {
+      this.ignoreClose = false;
       this.giveSearchFocus = this.giveSearchFocus + 1;
       this.query.query = '';
       this.search();
@@ -33,7 +52,7 @@ export class SearchCtrl {
 
   keyDown(evt) {
     if (evt.keyCode === 27) {
-      this.dismiss();
+      this.closeSearch();
     }
     if (evt.keyCode === 40) {
       this.moveSelection(1);
@@ -141,10 +160,7 @@ export function searchDirective() {
     controller: SearchCtrl,
     bindToController: true,
     controllerAs: 'ctrl',
-    scope: {
-      dismiss: '&'
-    },
   };
 }
 
-coreModule.directive('search', searchDirective);
+coreModule.directive('dashboardSearch', searchDirective);

public/app/features/dashboard/all.js

@@ -12,7 +12,6 @@ define([
   './viewStateSrv',
   './timeSrv',
   './unsavedChangesSrv',
-  './directives/dashSearchView',
   './timepicker/timepicker',
   './graphiteImportCtrl',
   './dynamicDashboardSrv',

public/app/features/dashboard/directives/dashSearchView.js

-define([
-  'angular',
-  'jquery'
-],
-function (angular, $) {
-  'use strict';
-
-  angular
-    .module('grafana.directives')
-    .directive('dashSearchView', function($compile) {
-      return {
-        restrict: 'A',
-        link: function(scope, elem) {
-          var editorScope;
-          var ignoreHide;
-
-          function showSearch() {
-            if (editorScope) {
-              editorScope.dismiss();
-              return;
-            }
-
-            ignoreHide = true;
-            editorScope = scope.$new();
-            editorScope.dismiss = function() {
-              editorScope.$destroy();
-              elem.empty();
-              elem.unbind();
-              editorScope = null;
-            };
-
-            var view = $('<search class="search-container" dismiss="dismiss()"></search>');
-
-            elem.append(view);
-            $compile(elem.contents())(editorScope);
-
-            setTimeout(function() {
-              ignoreHide = false;
-            }, 300);
-          }
-
-          function hideSearch() {
-            if (editorScope && !ignoreHide) {
-              editorScope.dismiss();
-            }
-          }
-
-          scope.onAppEvent('show-dash-search', showSearch);
-          scope.onAppEvent('hide-dash-search', hideSearch);
-        }
-      };
-    });
-
-});

public/app/partials/dashboard.html

@@ -4,7 +4,7 @@
 	<div class="main-view-container">
 
 	<div dash-editor-view></div>
-	<div dash-search-view></div>
+	<dashboard-search></dashboard-search>
 	<div class="clearfix"></div>
 
 	<dashboard-submenu ng-if="submenuEnabled" dashboard="dashboard"></dashboard-submenu>

public/app/plugins/panel/singlestat/module.ts

@@ -79,7 +79,8 @@ class SingleStatCtrl extends MetricsPanelCtrl {
   }
 
   loadSnapshot(snapshotData) {
-    this.dataHandler(snapshotData);
+    // give element time to get attached and get dimensions
+    this.$timeout(() => this.dataHandler(snapshotData), 50);
   }
 
   dataHandler(results) {
@@ -239,22 +240,13 @@ class SingleStatCtrl extends MetricsPanelCtrl {
     var $timeout = this.$timeout;
     var panel = ctrl.panel;
     var templateSrv = this.templateSrv;
-    var data, linkInfo, $panelContainer;
-    var firstRender = true;
+    var data, linkInfo;
+    var $panelContainer = elem.parents('.panel-container');
+    // change elem to singlestat panel
+    elem = elem.find('.singlestat-panel');
+    hookupDrilldownLinkTooltip();
 
     scope.$on('render', function() {
-      if (firstRender) {
-        var inner = elem.find('.singlestat-panel');
-        if (inner.length) {
-          elem = inner;
-          $panelContainer = elem.parents('.panel-container');
-          firstRender = false;
-          hookupDrilldownLinkTooltip();
-        } else {
-          return;
-        }
-      }
-
       render();
       ctrl.renderingCompleted();
     });

public/less/grafana.less

@@ -70,6 +70,11 @@
   top: 20%;
 }
 
+.grafana-app {
+  display: block;
+  min-height: 100%;
+}
+
 .histogram-chart {
   position:relative;
 }

public/views/index.html

@@ -26,7 +26,7 @@
 	</head>
 
 	<body ng-cloak>
-		<grafana-app>
+		<grafana-app class="grafana-app">
 
 			<aside class="sidemenu-wrapper">
 				<sidemenu ng-if="contextSrv.sidemenu"></sidemenu>