mirror of
https://github.com/grafana/grafana.git
synced 2025-02-25 18:55:37 -06:00
Moved search results from fixed dropdown to edit pane
This commit is contained in:
parent
fdffb03eba
commit
6502cff8fe
@ -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; }
|
||||
|
||||
|
@ -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: '',
|
||||
|
@ -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 + "'";
|
||||
|
@ -1,4 +1,4 @@
|
||||
<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>
|
||||
|
@ -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>
|
||||
|
@ -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>
|
||||
|
@ -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>
|
||||
<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>
|
||||
|
||||
<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>
|
||||
<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}} ({{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>
|
||||
|
@ -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 });
|
||||
};
|
||||
|
@ -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() {
|
||||
|
@ -214,7 +214,6 @@ div.subnav {
|
||||
|
||||
border-bottom: 1px solid @fullEditBorder;
|
||||
|
||||
|
||||
& > li > a {
|
||||
.border-radius(0);
|
||||
}
|
||||
|
@ -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;
|
||||
|
@ -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;
|
||||
|
Loading…
Reference in New Issue
Block a user