Skip to content

N
nexpie-grafana-theme
Commit 9818f81c by Torkel Ödegaard
Options

Completed search makover

parent 8f4e4401
Showing with 48 additions and 44 deletions
pkg/api/search.go
package api package api
import ( import (
"regexp"
"strings"
"github.com/grafana/grafana/pkg/bus" "github.com/grafana/grafana/pkg/bus"
"github.com/grafana/grafana/pkg/middleware" "github.com/grafana/grafana/pkg/middleware"
m "github.com/grafana/grafana/pkg/models" m "github.com/grafana/grafana/pkg/models"
...@@ -31,7 +28,9 @@ func setIsStarredFlagOnSearchResults(c *middleware.Context, hits []*m.DashboardS ...@@ -31,7 +28,9 @@ func setIsStarredFlagOnSearchResults(c *middleware.Context, hits []*m.DashboardS
} }
func Search(c *middleware.Context) { func Search(c *middleware.Context) {
queryText := c.Query("q") query := c.Query("query")
tag := c.Query("tag")
tagcloud := c.Query("tagcloud")
starred := c.Query("starred") starred := c.Query("starred")
limit := c.QueryInt("limit") limit := c.QueryInt("limit")
...@@ -44,7 +43,7 @@ func Search(c *middleware.Context) { ...@@ -44,7 +43,7 @@ func Search(c *middleware.Context) {
Tags: []*m.DashboardTagCloudItem{}, Tags: []*m.DashboardTagCloudItem{},
} }
if strings.HasPrefix(queryText, "tags!:") { if tagcloud == "true" {
query := m.GetDashboardTagsQuery{AccountId: c.AccountId} query := m.GetDashboardTagsQuery{AccountId: c.AccountId}
err := bus.Dispatch(&query) err := bus.Dispatch(&query)
...@@ -56,15 +55,12 @@ func Search(c *middleware.Context) { ...@@ -56,15 +55,12 @@ func Search(c *middleware.Context) {
result.TagsOnly = true result.TagsOnly = true
} else { } else {
searchQueryRegEx, _ := regexp.Compile(`(tags:(\w*)\sAND\s)?(?:title:)?(.*)?`)
matches := searchQueryRegEx.FindStringSubmatch(queryText)
query := m.SearchDashboardsQuery{ query := m.SearchDashboardsQuery{
Title: matches[3], Title: query,
Tag: matches[2], Tag: tag,
UserId: c.UserId, UserId: c.UserId,
Limit: limit, Limit: limit,
IsStarred: starred == "1", IsStarred: starred == "true",
AccountId: c.AccountId, AccountId: c.AccountId,
} }
......
src/app/controllers/search.js
...@@ -41,7 +41,7 @@ function (angular, _, config, $) { ...@@ -41,7 +41,7 @@ function (angular, _, config, $) {
$scope.moveSelection(-1); $scope.moveSelection(-1);
} }
if (evt.keyCode === 13) { if (evt.keyCode === 13) {
if ($scope.tagsOnly) { if ($scope.query.tagcloud) {
var tag = $scope.results.tags[$scope.selectedIndex]; var tag = $scope.results.tags[$scope.selectedIndex];
if (tag) { if (tag) {
$scope.filterByTag(tag.term); $scope.filterByTag(tag.term);
...@@ -77,7 +77,6 @@ function (angular, _, config, $) { ...@@ -77,7 +77,6 @@ function (angular, _, config, $) {
.then(function(results) { .then(function(results) {
if (localSearchId < $scope.currentSearchId) { return; } if (localSearchId < $scope.currentSearchId) { return; }
$scope.tagsOnly = results.tagsOnly;
$scope.results.dashboards = results.dashboards; $scope.results.dashboards = results.dashboards;
$scope.results.tags = results.tags; $scope.results.tags = results.tags;
$scope.resultCount = results.tagsOnly ? results.tags.length : results.dashboards.length; $scope.resultCount = results.tagsOnly ? results.tags.length : results.dashboards.length;
...@@ -85,7 +84,8 @@ function (angular, _, config, $) { ...@@ -85,7 +84,8 @@ function (angular, _, config, $) {
}; };
$scope.filterByTag = function(tag, evt) { $scope.filterByTag = function(tag, evt) {
$scope.query.query = "tags:" + tag + " AND title:"; $scope.query.tag = tag;
$scope.query.tagcloud = false;
$scope.search(); $scope.search();
$scope.giveSearchFocus = $scope.giveSearchFocus + 1; $scope.giveSearchFocus = $scope.giveSearchFocus + 1;
if (evt) { if (evt) {
...@@ -95,8 +95,7 @@ function (angular, _, config, $) { ...@@ -95,8 +95,7 @@ function (angular, _, config, $) {
}; };
$scope.showTags = function() { $scope.showTags = function() {
$scope.tagsOnly = !$scope.tagsOnly; $scope.query.tagcloud = !$scope.query.tagcloud;
$scope.query.query = $scope.tagsOnly ? "tags!:" : "";
$scope.giveSearchFocus = $scope.giveSearchFocus + 1; $scope.giveSearchFocus = $scope.giveSearchFocus + 1;
$scope.search(); $scope.search();
}; };
...@@ -178,21 +177,22 @@ function (angular, _, config, $) { ...@@ -178,21 +177,22 @@ function (angular, _, config, $) {
return hash; return hash;
} }
return function (scope, element) { return {
var name = _.isString(scope.tag) ? scope.tag : scope.tag.term; scope: { tag: "=" },
var hash = djb2(name.toLowerCase()); link: function (scope, element) {
var colors = [ var name = scope.tag;
"#E24D42","#1F78C1","#BA43A9","#705DA0","#466803", var hash = djb2(name.toLowerCase());
"#508642","#447EBC","#C15C17","#890F02","#757575", var colors = [
"#0A437C","#6D1F62","#584477","#629E51","#2F4F4F", "#E24D42","#1F78C1","#BA43A9","#705DA0","#466803",
"#BF1B00","#806EB7","#8a2eb8", "#699e00","#000000", "#508642","#447EBC","#C15C17","#890F02","#757575",
"#3F6833","#2F575E","#99440A","#E0752D","#0E4AB4", "#0A437C","#6D1F62","#584477","#629E51","#2F4F4F",
"#58140C","#052B51","#511749","#3F2B5B", "#BF1B00","#806EB7","#8a2eb8", "#699e00","#000000",
]; "#3F6833","#2F575E","#99440A","#E0752D","#0E4AB4",
var color = colors[Math.abs(hash % colors.length)]; "#58140C","#052B51","#511749","#3F2B5B",
element.css("background-color", color); ];
var color = colors[Math.abs(hash % colors.length)];
element.css("background-color", color);
}
}; };
}); });
}); });
src/app/partials/search.html
...@@ -7,19 +7,31 @@ ...@@ -7,19 +7,31 @@
</span> </span>
<div class="search-switches"> <div class="search-switches">
<i class="fa fa-filter"></i> <i class="fa fa-filter"></i>
<a href="javascript:void(0);" ng-class="{'active': tagsOnly}" ng-click="showStarred()" tabindex="2">starred</a> | <a class="pointer" ng-click="showStarred()" tabindex="2">
<a href="javascript:void(0);" ng-class="{'active': tagsOnly}" ng-click="showTags()" tabindex="3">tags</a> <i class="fa fa-remove" ng-show="query.starred"></i>
starred
</a> |
<a class="pointer" ng-click="showTags()" tabindex="3">
<i class="fa fa-remove" ng-show="query.tagcloud"></i>
tags
</a>
<span ng-show="query.tag">
| <a ng-click="filterByTag('')" tag-color-from-name tag="query.tag" class="label label-tag" ng-if="query.tag">
<i class="fa fa-remove"></i>
{{query.tag}}
</a>
</span>
</div> </div>
</div> </div>
<div ng-if="!showImport"> <div ng-if="!showImport">
<div class="search-results-container" ng-if="tagsOnly"> <div class="search-results-container" ng-if="query.tagcloud">
<div class="row"> <div class="row">
<div class="span6 offset1"> <div class="span6 offset1">
<div ng-repeat="tag in results.tags" class="pointer" style="width: 180px; float: left;" <div ng-repeat="tag in results.tags" class="pointer" style="width: 180px; float: left;"
ng-class="{'selected': $index === selectedIndex }" ng-class="{'selected': $index === selectedIndex }"
ng-click="filterByTag(tag.term, $event)"> ng-click="filterByTag(tag.term, $event)">
<a class="search-result-tag label label-tag" tag-color-from-name> <a class="search-result-tag label label-tag" tag-color-from-name tag="tag.term">
<i class="fa fa-tag"></i> <i class="fa fa-tag"></i>
<span>{{tag.term}} &nbsp;({{tag.count}})</span> <span>{{tag.term}} &nbsp;({{tag.count}})</span>
</a> </a>
...@@ -28,7 +40,7 @@ ...@@ -28,7 +40,7 @@
</div> </div>
</div> </div>
<div class="search-results-container" ng-if="!tagsOnly"> <div class="search-results-container" ng-if="!query.tagcloud">
<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-result-item pointer" bindonce ng-repeat="row in results.dashboards" <div class="search-result-item pointer" bindonce ng-repeat="row in results.dashboards"
...@@ -41,7 +53,7 @@ ...@@ -41,7 +53,7 @@
</div> </div>
<div class="search-result-tags"> <div class="search-result-tags">
<a ng-click="filterByTag(tag, $event)" ng-repeat="tag in row.tags" tag-color-from-name class="label label-tag"> <a ng-click="filterByTag(tag, $event)" ng-repeat="tag in row.tags" tag-color-from-name tag="tag" class="label label-tag">
{{tag}} {{tag}}
</a> </a>
<i class="fa" ng-class="{'fa-star': row.isStarred, 'fa-star-o': !row.isStarred}"></i> <i class="fa" ng-class="{'fa-star': row.isStarred, 'fa-star-o': !row.isStarred}"></i>
......
src/css/less/search.less
...@@ -91,17 +91,13 @@ ...@@ -91,17 +91,13 @@
.search-switches { .search-switches {
position: absolute; position: absolute;
top: 19px; top: 19px;
color: @textColor;
right: 21px; right: 21px;
a {
color: @textColor;
&.active {
color: @linkColor;
}
}
} }
.search-button-row { .search-button-row {
padding-top: 20px; padding-top: 20px;
button {
margin-right: 10px;
}
} }
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