Completed search makover

pkg/api/search.go

 package api
 
 import (
-	"regexp"
-	"strings"
-
 	"github.com/grafana/grafana/pkg/bus"
 	"github.com/grafana/grafana/pkg/middleware"
 	m "github.com/grafana/grafana/pkg/models"
@@ -31,7 +28,9 @@ func setIsStarredFlagOnSearchResults(c *middleware.Context, hits []*m.DashboardS
 }
 
 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")
 	limit := c.QueryInt("limit")
 
@@ -44,7 +43,7 @@ func Search(c *middleware.Context) {
 		Tags:       []*m.DashboardTagCloudItem{},
 	}
 
-	if strings.HasPrefix(queryText, "tags!:") {
+	if tagcloud == "true" {
 
 		query := m.GetDashboardTagsQuery{AccountId: c.AccountId}
 		err := bus.Dispatch(&query)
@@ -56,15 +55,12 @@ func Search(c *middleware.Context) {
 		result.TagsOnly = true
 
 	} else {
-
-		searchQueryRegEx, _ := regexp.Compile(`(tags:(\w*)\sAND\s)?(?:title:)?(.*)?`)
-		matches := searchQueryRegEx.FindStringSubmatch(queryText)
 		query := m.SearchDashboardsQuery{
-			Title:     matches[3],
-			Tag:       matches[2],
+			Title:     query,
+			Tag:       tag,
 			UserId:    c.UserId,
 			Limit:     limit,
-			IsStarred: starred == "1",
+			IsStarred: starred == "true",
 			AccountId: c.AccountId,
 		}
 

src/app/controllers/search.js

@@ -41,7 +41,7 @@ function (angular, _, config, $) {
         $scope.moveSelection(-1);
       }
       if (evt.keyCode === 13) {
-        if ($scope.tagsOnly) {
+        if ($scope.query.tagcloud) {
           var tag = $scope.results.tags[$scope.selectedIndex];
           if (tag) {
             $scope.filterByTag(tag.term);
@@ -77,7 +77,6 @@ function (angular, _, config, $) {
         .then(function(results) {
           if (localSearchId < $scope.currentSearchId) { return; }
 
-          $scope.tagsOnly = results.tagsOnly;
           $scope.results.dashboards = results.dashboards;
           $scope.results.tags = results.tags;
           $scope.resultCount = results.tagsOnly ? results.tags.length : results.dashboards.length;
@@ -85,7 +84,8 @@ function (angular, _, config, $) {
     };
 
     $scope.filterByTag = function(tag, evt) {
-      $scope.query.query = "tags:" + tag + " AND title:";
+      $scope.query.tag = tag;
+      $scope.query.tagcloud = false;
       $scope.search();
       $scope.giveSearchFocus = $scope.giveSearchFocus + 1;
       if (evt) {
@@ -95,8 +95,7 @@ function (angular, _, config, $) {
     };
 
     $scope.showTags = function() {
-      $scope.tagsOnly = !$scope.tagsOnly;
-      $scope.query.query = $scope.tagsOnly ? "tags!:" : "";
+      $scope.query.tagcloud = !$scope.query.tagcloud;
       $scope.giveSearchFocus = $scope.giveSearchFocus + 1;
       $scope.search();
     };
@@ -178,8 +177,10 @@ function (angular, _, config, $) {
       return hash;
     }
 
-    return function (scope, element) {
-      var name = _.isString(scope.tag) ? scope.tag : scope.tag.term;
+    return {
+      scope: { tag: "=" },
+      link: function (scope, element) {
+        var name = scope.tag;
         var hash = djb2(name.toLowerCase());
         var colors = [
           "#E24D42","#1F78C1","#BA43A9","#705DA0","#466803",
@@ -191,8 +192,7 @@ function (angular, _, config, $) {
         ];
         var color = colors[Math.abs(hash % colors.length)];
         element.css("background-color", color);
+      }
     };
-
   });
-
 });

src/app/partials/search.html

@@ -7,19 +7,31 @@
 		</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>
+			<a class="pointer" ng-click="showStarred()" tabindex="2">
+				<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 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="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>
+						<a class="search-result-tag label label-tag" tag-color-from-name tag="tag.term">
 							<i class="fa fa-tag"></i>
 							<span>{{tag.term}} &nbsp;({{tag.count}})</span>
 						</a>
@@ -28,7 +40,7 @@
 			</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>
 
 			<div class="search-result-item pointer" bindonce ng-repeat="row in results.dashboards"
@@ -41,7 +53,7 @@
 				</div>
 
 				<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}}
 					</a>
 					<i class="fa" ng-class="{'fa-star': row.isStarred, 'fa-star-o': !row.isStarred}"></i>

src/css/less/search.less

@@ -91,17 +91,13 @@
 .search-switches {
   position: absolute;
   top: 19px;
-  color: @textColor;
   right: 21px;
-  a {
-    color: @textColor;
-    &.active {
-      color: @linkColor;
-    }
-  }
 }
 
 .search-button-row {
   padding-top: 20px;
+  button {
+    margin-right: 10px;
+  }
 }