From 6502cff8fe506a528de820153227e51493d90d48 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Torkel=20=C3=96degaard?= Date: Tue, 26 Aug 2014 16:42:15 +0200 Subject: [PATCH] Moved search results from fixed dropdown to edit pane --- src/app/controllers/dashboardNavCtrl.js | 4 + src/app/controllers/search.js | 23 +++--- src/app/directives/dashEditLink.js | 14 +++- src/app/partials/dashboard.html | 2 +- src/app/partials/dashboard_topnav.html | 5 +- src/app/partials/roweditor.html | 2 +- src/app/partials/search.html | 81 ++++++++++--------- .../dashboard/dashboardKeyBindings.js | 6 +- .../dashboard/dashboardViewStateSrv.js | 4 +- src/css/less/bootswatch.dark.less | 1 - src/css/less/grafana.less | 16 ++-- src/css/less/variables.dark.less | 6 +- 12 files changed, 91 insertions(+), 73 deletions(-) diff --git a/src/app/controllers/dashboardNavCtrl.js b/src/app/controllers/dashboardNavCtrl.js index ce5b9934efd..fadb9392a2a 100644 --- a/src/app/controllers/dashboardNavCtrl.js +++ b/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; } diff --git a/src/app/controllers/search.js b/src/app/controllers/search.js index 3d11bc68750..55f44b017ad 100644 --- a/src/app/controllers/search.js +++ b/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: '', diff --git a/src/app/directives/dashEditLink.js b/src/app/directives/dashEditLink.js index 6baf3f05de7..4b49f0e2456 100644 --- a/src/app/directives/dashEditLink.js +++ b/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 + "'"; diff --git a/src/app/partials/dashboard.html b/src/app/partials/dashboard.html index e11d5cd85a8..a68b4d334c5 100644 --- a/src/app/partials/dashboard.html +++ b/src/app/partials/dashboard.html @@ -1,4 +1,4 @@ -
+
diff --git a/src/app/partials/dashboard_topnav.html b/src/app/partials/dashboard_topnav.html index 99e23448219..bfeb3339b99 100644 --- a/src/app/partials/dashboard_topnav.html +++ b/src/app/partials/dashboard_topnav.html @@ -57,7 +57,10 @@ -
  • +
  • + + +
    • diff --git a/src/app/partials/roweditor.html b/src/app/partials/roweditor.html index 673230948cc..af8c5405999 100644 --- a/src/app/partials/roweditor.html +++ b/src/app/partials/roweditor.html @@ -53,5 +53,5 @@
    - +
    diff --git a/src/app/partials/search.html b/src/app/partials/search.html index 4db902343f0..c1a030f713d 100644 --- a/src/app/partials/search.html +++ b/src/app/partials/search.html @@ -11,53 +11,54 @@ width: 90%; } +
    +
    +
    + + Search +
    - - - +
    +
    + + + + + + tags + +
    +
    - +
    diff --git a/src/app/services/dashboard/dashboardKeyBindings.js b/src/app/services/dashboard/dashboardKeyBindings.js index da285e48809..27bbe8ee027 100644 --- a/src/app/services/dashboard/dashboardKeyBindings.js +++ b/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 }); }; diff --git a/src/app/services/dashboard/dashboardViewStateSrv.js b/src/app/services/dashboard/dashboardViewStateSrv.js index b39e159ae4c..1c3b1d471dd 100644 --- a/src/app/services/dashboard/dashboardViewStateSrv.js +++ b/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() { diff --git a/src/css/less/bootswatch.dark.less b/src/css/less/bootswatch.dark.less index bed409c87d6..d1bfbcf1154 100644 --- a/src/css/less/bootswatch.dark.less +++ b/src/css/less/bootswatch.dark.less @@ -214,7 +214,6 @@ div.subnav { border-bottom: 1px solid @fullEditBorder; - & > li > a { .border-radius(0); } diff --git a/src/css/less/grafana.less b/src/css/less/grafana.less index 569aa9f7169..7249344f46b 100644 --- a/src/css/less/grafana.less +++ b/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; diff --git a/src/css/less/variables.dark.less b/src/css/less/variables.dark.less index 46368362908..7214adba17f 100644 --- a/src/css/less/variables.dark.less +++ b/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;