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 91 additions and 73 deletions
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; }
......
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: '',
......
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 + "'";
......
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>
......
src/app/partials/dashboard_topnav.html
......@@ -57,7 +57,10 @@
</ul>
</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 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 @@
</div>
<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>
src/app/partials/search.html
......@@ -11,53 +11,54 @@
width: 90%;
}
</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="search-field-wrapper">
<button class="btn btn-success pull-right" dash-editor-link="app/partials/playlist.html">
<i class="icon-play"></i>
Playlist
</button>
<button class="btn btn-success pull-right" ng-click="toggleImport($event)">
<i class="icon-download-alt"></i>
Import
</button>
<button class="btn btn-success pull-right" ng-click="newDashboard()">
<i class="icon-th-large"></i>
New
</button>
<span class="position: relative;">
<input type="text"
placeholder="search dashboards, metrics, or graphs"
xng-focus="giveSearchFocus"
ng-keydown="keyDown($event)"
ng-model="query.query" spellcheck='false'
ng-change="search()" />
<a class="search-tagview-switch" href="javascript:void(0);"
ng-class="{'active': tagsOnly}"
ng-click="showTags($event)">tags</a>
</span>
</div>
<div class="grafana-search-panel">
<div class="search-field-wrapper">
<button class="btn btn-success pull-right" dash-editor-link="app/partials/playlist.html">
<i class="icon-play"></i>
Playlist
</button>
<button class="btn btn-success pull-right" ng-click="toggleImport($event)">
<i class="icon-download-alt"></i>
Import
</button>
<button class="btn btn-success pull-right" ng-click="newDashboard()">
<i class="icon-th-large"></i>
New
</button>
<span style="position: relative;">
<input type="text"
placeholder="search dashboards, metrics, or graphs"
xng-focus="giveSearchFocus"
ng-keydown="keyDown($event)"
ng-model="query.query" spellcheck='false'
ng-change="search()" />
<a class="search-tagview-switch" href="javascript:void(0);"
ng-class="{'active': tagsOnly}"
ng-click="showTags($event)">tags</a>
</span>
</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>
<div class="search-results-container" ng-if="tagsOnly">
<div class="search-results-container" ng-if="tagsOnly">
<div ng-repeat="tag in results.tags"
class="search-result-item pointer"
ng-class="{'selected': $index === selectedIndex }"
ng-click="filterByTag(tag.term, $event)">
class="search-result-item pointer"
ng-class="{'selected': $index === selectedIndex }"
ng-click="filterByTag(tag.term, $event)">
<a class="search-result-tag label label-tag" tag-color-from-name>
<i class="icon icon-tag"></i>
<span>{{tag.term}} &nbsp;({{tag.count}})</span>
</a>
</div>
</div>
</div>
</div>
<div class="search-results-container" ng-if="!tagsOnly">
<div class="search-result-item pointer"
......@@ -102,4 +103,4 @@
</div>
</div>
</li>
</ul>
</div>
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 });
};
......
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() {
......
src/css/less/bootswatch.dark.less
......@@ -214,7 +214,6 @@ div.subnav {
border-bottom: 1px solid @fullEditBorder;
& > li > a {
.border-radius(0);
}
......
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;
......
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;
......
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