mirror of
https://github.com/grafana/grafana.git
synced 2025-02-25 18:55:37 -06:00
Working on new search box design
This commit is contained in:
Torkel Ödegaard
parent
83bf68ecad
commit
8f4e440179
@ -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) {
|
||||
|
||||
@ -93,6 +93,11 @@ function (angular, $) {
|
||||
|
||||
var src = "'" + payload.src + "'";
|
||||
var view = $('<div class="gf-box" ng-include="' + src + '"></div>');
|
||||
|
||||
if (payload.cssClass) {
|
||||
view.addClass(payload.cssClass);
|
||||
}
|
||||
|
||||
elem.append(view);
|
||||
$compile(elem.contents())(editorScope);
|
||||
}
|
||||
|
||||
@ -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() {
|
||||
|
||||
@ -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() {
|
||||
|
||||
@ -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;
|
||||
});
|
||||
|
||||
@ -1,31 +1,14 @@
|
||||
<div ng-controller="SearchCtrl" ng-init="init()" class="search-box">
|
||||
|
||||
<div class="gf-box-header">
|
||||
<div class="gf-box-title" style="border: 0; line-height: 41px;">
|
||||
<i class="fa fa-search"></i>
|
||||
Search
|
||||
</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" editor-scope="isolated">
|
||||
<i class="fa fa-play"></i>
|
||||
Playlist
|
||||
</button>
|
||||
<button class="btn btn-success pull-right" ng-click="toggleImport($event)">
|
||||
<i class="fa fa-download"></i>
|
||||
Import
|
||||
</button>
|
||||
<button class="btn btn-success pull-right" ng-click="newDashboard()">
|
||||
<i class="fa fa-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" ng-model-options="{ debounce: 500 }" 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="search-field-wrapper">
|
||||
<span style="position: relative;">
|
||||
<input type="text" placeholder="Find dashboards by name" xng-focus="giveSearchFocus" tabindex="1"
|
||||
ng-keydown="keyDown($event)" ng-model="query.query" ng-model-options="{ debounce: 500 }" spellcheck='false' ng-change="search()" />
|
||||
</span>
|
||||
<div class="search-switches">
|
||||
<i class="fa fa-filter"></i>
|
||||
<a href="javascript:void(0);" ng-class="{'active': tagsOnly}" ng-click="showStarred()" tabindex="2">starred</a> |
|
||||
<a href="javascript:void(0);" ng-class="{'active': tagsOnly}" ng-click="showTags()" tabindex="3">tags</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -33,15 +16,15 @@
|
||||
<div class="search-results-container" ng-if="tagsOnly">
|
||||
<div class="row">
|
||||
<div class="span6 offset1">
|
||||
<div ng-repeat="tag in results.tags" class="pointer" style="width: 180px; float: left;"
|
||||
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="fa fa-tag"></i>
|
||||
<span>{{tag.term}} ({{tag.count}})</span>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<div ng-repeat="tag in results.tags" class="pointer" style="width: 180px; float: left;"
|
||||
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="fa fa-tag"></i>
|
||||
<span>{{tag.term}} ({{tag.count}})</span>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -84,4 +67,20 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="search-button-row">
|
||||
<button class="btn btn-inverse pull-left" ng-click="newDashboard()">
|
||||
<i class="fa fa-plus"></i>
|
||||
New
|
||||
</button>
|
||||
<button class="btn btn-inverse pull-left" ng-click="toggleImport($event)">
|
||||
<i class="fa fa-download"></i>
|
||||
Import
|
||||
</button>
|
||||
<button class="btn btn-inverse pull-left" dash-editor-link="app/partials/playlist.html" editor-scope="isolated">
|
||||
<i class="fa fa-play"></i>
|
||||
Playlist
|
||||
</button>
|
||||
<div class="clearfix"></div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
@ -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 {
|
||||
|
||||
@ -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;
|
||||
}
|
||||
|
||||
|
||||
Loading…
Reference in New Issue
Block a user