diff --git a/src/app/controllers/search.js b/src/app/controllers/search.js index 0cd2a3d0db3..c463fe57e49 100644 --- a/src/app/controllers/search.js +++ b/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) { diff --git a/src/app/directives/dashEditLink.js b/src/app/directives/dashEditLink.js index b17c73bc14d..1c3e3b6826b 100644 --- a/src/app/directives/dashEditLink.js +++ b/src/app/directives/dashEditLink.js @@ -93,6 +93,11 @@ function (angular, $) { var src = "'" + payload.src + "'"; var view = $('
'); + + if (payload.cssClass) { + view.addClass(payload.cssClass); + } + elem.append(view); $compile(elem.contents())(editorScope); } diff --git a/src/app/features/dashboard/dashboardNavCtrl.js b/src/app/features/dashboard/dashboardNavCtrl.js index d2759540c49..b46324869af 100644 --- a/src/app/features/dashboard/dashboardNavCtrl.js +++ b/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() { diff --git a/src/app/features/dashboard/keybindings.js b/src/app/features/dashboard/keybindings.js index 1557a3848d3..c0cddc5b493 100644 --- a/src/app/features/dashboard/keybindings.js +++ b/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() { diff --git a/src/app/features/grafanaDatasource/datasource.js b/src/app/features/grafanaDatasource/datasource.js index 5ab1118a4ce..7afee86096f 100644 --- a/src/app/features/grafanaDatasource/datasource.js +++ b/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; }); diff --git a/src/app/partials/search.html b/src/app/partials/search.html index 351426d2d48..399999f9692 100644 --- a/src/app/partials/search.html +++ b/src/app/partials/search.html @@ -1,31 +1,14 @@
-
-
- - Search -
- -
-
- - - - - - tags - -
+
+ + + +
+ + starred | + tags
@@ -33,15 +16,15 @@
-
- - - {{tag.term}}  ({{tag.count}}) - -
-
+
+ + + {{tag.term}}  ({{tag.count}}) + +
+
@@ -84,4 +67,20 @@
+
+ + + +
+
+ diff --git a/src/css/less/grafana.less b/src/css/less/grafana.less index e55cc6aca4b..5fbfa053b6d 100644 --- a/src/css/less/grafana.less +++ b/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 { diff --git a/src/css/less/search.less b/src/css/less/search.less index d45c90a8f25..19341d7fba1 100644 --- a/src/css/less/search.less +++ b/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 { - padding: 6px 10px; - input { - width: 100%; - } - button { - margin: 0 4px 0 0; - } - > span { - display: block; - overflow: hidden; - padding-right: 25px; - } +.search-field-wrapper { + padding-bottom: 10px; + input { + width: 100%; + padding: 18px 8px; + box-sizing: border-box; + } + button { + margin: 0 4px 0 0; + } + > span { + display: block; + 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; - right: 24px; - color: darken(@linkColor, 30%); - &.active { - color: @linkColor; + top: 19px; + color: @textColor; + right: 21px; + a { + color: @textColor; + &.active { + color: @linkColor; + } } } +.search-button-row { + padding-top: 20px; +}