Skip to content

N
nexpie-grafana-theme
Commit 6502cff8 by Torkel Ödegaard
Options

Moved search results from fixed dropdown to edit pane

parent fdffb03e
Showing with 58 additions and 40 deletions
src/app/controllers/dashboardNavCtrl.js
...@@ -68,6 +68,10 @@ function (angular, _, moment, config, store) { ...@@ -68,6 +68,10 @@ function (angular, _, moment, config, store) {
return false; return false;
}; };
$scope.openSearch = function() {
$scope.emitAppEvent('show-dash-editor', { src: 'app/partials/search.html' });
};
$scope.saveDashboard = function() { $scope.saveDashboard = function() {
if (!this.isAdmin()) { return false; } if (!this.isAdmin()) { return false; }
......
src/app/controllers/search.js
...@@ -9,7 +9,7 @@ function (angular, _, config, $) { ...@@ -9,7 +9,7 @@ function (angular, _, config, $) {
var module = angular.module('grafana.controllers'); 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.init = function() {
$scope.giveSearchFocus = 0; $scope.giveSearchFocus = 0;
...@@ -17,7 +17,13 @@ function (angular, _, config, $) { ...@@ -17,7 +17,13 @@ function (angular, _, config, $) {
$scope.results = {dashboards: [], tags: [], metrics: []}; $scope.results = {dashboards: [], tags: [], metrics: []};
$scope.query = { query: 'title:' }; $scope.query = { query: 'title:' };
$scope.db = datasourceSrv.getGrafanaDB(); $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) { $scope.keyDown = function (evt) {
...@@ -94,22 +100,11 @@ function (angular, _, config, $) { ...@@ -94,22 +100,11 @@ function (angular, _, config, $) {
$scope.search = function() { $scope.search = function() {
$scope.showImport = false; $scope.showImport = false;
$scope.selectedIndex = -1; $scope.selectedIndex = 0;
$scope.searchDashboards($scope.query.query); $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.addMetricToCurrentDashboard = function (metricId) {
$scope.dashboard.rows.push({ $scope.dashboard.rows.push({
title: '', title: '',
......
src/app/directives/dashEditLink.js
...@@ -15,7 +15,6 @@ function (angular, $) { ...@@ -15,7 +15,6 @@ function (angular, $) {
elem.bind('click',function() { elem.bind('click',function() {
$timeout(function() { $timeout(function() {
scope.exitFullscreen();
scope.emitAppEvent('show-dash-editor', { src: partial, scope: scope }); scope.emitAppEvent('show-dash-editor', { src: partial, scope: scope });
}); });
}); });
...@@ -32,22 +31,31 @@ function (angular, $) { ...@@ -32,22 +31,31 @@ function (angular, $) {
var editorScope; var editorScope;
var lastEditor; var lastEditor;
scope.onAppEvent('hide-dash-editor', function() {
if (editorScope) {
editorScope.dismiss();
}
});
scope.onAppEvent('show-dash-editor', function(evt, payload) { scope.onAppEvent('show-dash-editor', function(evt, payload) {
if (lastEditor === payload.src) { if (lastEditor === payload.src) {
editorScope.dismiss(); editorScope.dismiss();
return; return;
} }
if (lastEditor) { if (editorScope) {
editorScope.dismiss(); editorScope.dismiss();
} }
scope.exitFullscreen();
lastEditor = payload.src; lastEditor = payload.src;
editorScope = payload.scope.$new(); editorScope = payload.scope ? payload.scope.$new() : scope.$new();
editorScope.dismiss = function() { editorScope.dismiss = function() {
editorScope.$destroy(); editorScope.$destroy();
elem.empty(); elem.empty();
lastEditor = null; lastEditor = null;
editorScope = null;
}; };
var src = "'" + payload.src + "'"; var src = "'" + payload.src + "'";
......
src/app/partials/dashboard.html
<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 ng-include="'app/partials/dashboard_topnav.html'">
</div> </div>
......
src/app/partials/dashboard_topnav.html
...@@ -57,7 +57,10 @@ ...@@ -57,7 +57,10 @@
</ul> </ul>
</li> </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>
<li class="grafana-menu-home"><a bs-tooltip="'Goto saved default'" data-placement="bottom" href='#/'><i class='icon-home'></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 @@ ...@@ -53,5 +53,5 @@
</div> </div>
<div class="dashboard-editor-footer"> <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> </div>
src/app/partials/search.html
...@@ -11,13 +11,13 @@ ...@@ -11,13 +11,13 @@
width: 90%; width: 90%;
} }
</style> </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="grafana-search-panel">
<div class="search-field-wrapper"> <div class="search-field-wrapper">
<button class="btn btn-success pull-right" dash-editor-link="app/partials/playlist.html"> <button class="btn btn-success pull-right" dash-editor-link="app/partials/playlist.html">
...@@ -32,7 +32,7 @@ ...@@ -32,7 +32,7 @@
<i class="icon-th-large"></i> <i class="icon-th-large"></i>
New New
</button> </button>
<span class="position: relative;"> <span style="position: relative;">
<input type="text" <input type="text"
placeholder="search dashboards, metrics, or graphs" placeholder="search dashboards, metrics, or graphs"
xng-focus="giveSearchFocus" xng-focus="giveSearchFocus"
...@@ -44,6 +44,7 @@ ...@@ -44,6 +44,7 @@
ng-click="showTags($event)">tags</a> ng-click="showTags($event)">tags</a>
</span> </span>
</div> </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>
...@@ -102,4 +103,4 @@ ...@@ -102,4 +103,4 @@
</div> </div>
</div> </div>
</li> </li>
</ul> </div>
src/app/services/dashboard/dashboardKeyBindings.js
...@@ -21,8 +21,8 @@ function(angular, $) { ...@@ -21,8 +21,8 @@ function(angular, $) {
}); });
keyboardManager.unbind('esc'); keyboardManager.unbind('esc');
keyboardManager.bind('ctrl+f', function(evt) { keyboardManager.bind('ctrl+f', function() {
scope.emitAppEvent('open-search', evt); scope.emitAppEvent('show-dash-editor', { src: 'app/partials/search.html' });
}, { inputDisabled: true }); }, { inputDisabled: true });
keyboardManager.bind('ctrl+h', function() { keyboardManager.bind('ctrl+h', function() {
...@@ -53,6 +53,8 @@ function(angular, $) { ...@@ -53,6 +53,8 @@ function(angular, $) {
modalData.$scope.dismiss(); modalData.$scope.dismiss();
} }
scope.emitAppEvent('hide-dash-editor');
scope.exitFullscreen(); scope.exitFullscreen();
}, { inputDisabled: true }); }, { inputDisabled: true });
}; };
......
src/app/services/dashboard/dashboardViewStateSrv.js
...@@ -16,7 +16,9 @@ function (angular, _, $) { ...@@ -16,7 +16,9 @@ function (angular, _, $) {
var self = this; var self = this;
$scope.exitFullscreen = function() { $scope.exitFullscreen = function() {
if (self.fullscreen) {
self.update({ fullscreen: false }); self.update({ fullscreen: false });
}
}; };
$scope.onAppEvent('dashboard-saved', function() { $scope.onAppEvent('dashboard-saved', function() {
......
src/css/less/bootswatch.dark.less
...@@ -214,7 +214,6 @@ div.subnav { ...@@ -214,7 +214,6 @@ div.subnav {
border-bottom: 1px solid @fullEditBorder; border-bottom: 1px solid @fullEditBorder;
& > li > a { & > li > a {
.border-radius(0); .border-radius(0);
} }
......
src/css/less/grafana.less
...@@ -32,8 +32,11 @@ ...@@ -32,8 +32,11 @@
} }
} }
// Search body {
overflow-y: hidden;
}
// Search
.grafana-search-panel { .grafana-search-panel {
.search-field-wrapper { .search-field-wrapper {
padding: 6px 10px; padding: 6px 10px;
...@@ -52,7 +55,7 @@ ...@@ -52,7 +55,7 @@
} }
.search-results-container { .search-results-container {
max-height: 600px; height: 500px;
overflow: auto; overflow: auto;
display: block; display: block;
line-height: 28px; line-height: 28px;
...@@ -76,14 +79,15 @@ ...@@ -76,14 +79,15 @@
} }
.search-result-item:nth-child(odd) { .search-result-item:nth-child(odd) {
background-color: @grafanaListAccent; background-color: lighten(@grayDarker, 2%);
} }
.search-result-item { .search-result-item {
padding: 0px 10px; padding: 0px 10px;
white-space: nowrap; white-space: nowrap;
border-top: 1px solid @grafanaListBorderTop;
border-bottom: 1px solid @grafanaListBorderBottom; border-bottom: 1px solid @grafanaListBorderBottom;
border-top: 1px solid @grafanaListBorderTop;
border-left: 1px solid @grafanaListBorderBottom;
} }
.search-result-tags { .search-result-tags {
...@@ -103,8 +107,8 @@ ...@@ -103,8 +107,8 @@
.search-tagview-switch { .search-tagview-switch {
position: absolute; position: absolute;
top: 15px; top: 6px;
right: 272px; right: 24px;
color: darken(@linkColor, 30%); color: darken(@linkColor, 30%);
&.active { &.active {
color: @linkColor; color: @linkColor;
......
src/css/less/variables.dark.less
...@@ -92,9 +92,9 @@ ...@@ -92,9 +92,9 @@
// Lists // Lists
@grafanaListBackground: transparent; @grafanaListBackground: transparent;
@grafanaListAccent: #232323; @grafanaListAccent: @grayDark;
@grafanaListBorderTop: #3E3E3E; @grafanaListBorderTop: @grayDark;
@grafanaListBorderBottom: #1c1919; @grafanaListBorderBottom: @black;
@grafanaListHighlight: @blue; @grafanaListHighlight: @blue;
@grafanaListHighlightContrast: #4F4F4F; @grafanaListHighlightContrast: #4F4F4F;
@grafanaListMainLinkColor: @linkColor; @grafanaListMainLinkColor: @linkColor;
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment