From 853cd1633642ab51e777c17e894cd51774dd6dbe Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Torkel=20=C3=96degaard?= Date: Fri, 5 Feb 2016 13:48:10 +0100 Subject: [PATCH] fix(search); fixes to dashboard search (using keyboard), and fix for singlestat in snapshot view --- public/app/core/components/grafana_app.ts | 8 ++- public/app/core/components/search/search.html | 7 +-- public/app/core/components/search/search.ts | 30 ++++++++--- public/app/features/dashboard/all.js | 1 - .../dashboard/directives/dashSearchView.js | 54 ------------------- public/app/partials/dashboard.html | 2 +- public/app/plugins/panel/singlestat/module.ts | 22 +++----- public/less/grafana.less | 5 ++ public/views/index.html | 2 +- 9 files changed, 47 insertions(+), 84 deletions(-) delete mode 100644 public/app/features/dashboard/directives/dashSearchView.js diff --git a/public/app/core/components/grafana_app.ts b/public/app/core/components/grafana_app.ts index 9b627e930a0..1dd1661aff0 100644 --- a/public/app/core/components/grafana_app.ts +++ b/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(); + }); } } diff --git a/public/app/core/components/search/search.html b/public/app/core/components/search/search.html index 7a78f1a4a3e..35c4431d80c 100644 --- a/public/app/core/components/search/search.html +++ b/public/app/core/components/search/search.html @@ -1,3 +1,4 @@ +
@@ -44,7 +45,7 @@
No dashboards matching your query were found.
 + ng-class="{'selected': $index == ctrl.selectedIndex}" ng-href="{{row.url}}"> @@ -71,4 +72,4 @@
- +
diff --git a/public/app/core/components/search/search.ts b/public/app/core/components/search/search.ts index 3f8cb495e71..e296acf56e1 100644 --- a/public/app/core/components/search/search.ts +++ b/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); diff --git a/public/app/features/dashboard/all.js b/public/app/features/dashboard/all.js index 9d7cd06019b..073ca2ae1d9 100644 --- a/public/app/features/dashboard/all.js +++ b/public/app/features/dashboard/all.js @@ -12,7 +12,6 @@ define([ './viewStateSrv', './timeSrv', './unsavedChangesSrv', - './directives/dashSearchView', './timepicker/timepicker', './graphiteImportCtrl', './dynamicDashboardSrv', diff --git a/public/app/features/dashboard/directives/dashSearchView.js b/public/app/features/dashboard/directives/dashSearchView.js deleted file mode 100644 index cee97fee758..00000000000 --- a/public/app/features/dashboard/directives/dashSearchView.js +++ /dev/null @@ -1,54 +0,0 @@ -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 = $(''); - - 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); - } - }; - }); - -}); diff --git a/public/app/partials/dashboard.html b/public/app/partials/dashboard.html index d63c0d01e29..edba0d85bb9 100644 --- a/public/app/partials/dashboard.html +++ b/public/app/partials/dashboard.html @@ -4,7 +4,7 @@
-
+
diff --git a/public/app/plugins/panel/singlestat/module.ts b/public/app/plugins/panel/singlestat/module.ts index b161cd1d8ed..5786c6be6d2 100644 --- a/public/app/plugins/panel/singlestat/module.ts +++ b/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(); }); diff --git a/public/less/grafana.less b/public/less/grafana.less index 88745f6a57b..d33db98376b 100644 --- a/public/less/grafana.less +++ b/public/less/grafana.less @@ -70,6 +70,11 @@ top: 20%; } +.grafana-app { + display: block; + min-height: 100%; +} + .histogram-chart { position:relative; } diff --git a/public/views/index.html b/public/views/index.html index 1d612e53385..40be796b306 100644 --- a/public/views/index.html +++ b/public/views/index.html @@ -26,7 +26,7 @@ - +