Closes grafana#86, dashboard tags and tag search feature is now done! turned out pretty good!

Author: torkelo

src/app/controllers/search.js

@@ -14,6 +14,7 @@ function (angular, _, config, $) {
     $scope.init = function() {
       $scope.giveSearchFocus = 0;
       $scope.selectedIndex = -1;
+      $scope.results = {dashboards: [], tags: [], metrics: []};
       $scope.query = { query: 'title:' };
       $rootScope.$on('open-search', $scope.openSearch);
     };
@@ -29,7 +30,15 @@ function (angular, _, config, $) {
         $scope.selectedIndex--;
       }
       if (evt.keyCode === 13) {
-        var selectedDash = $scope.search_results.dashboards[$scope.selectedIndex];
+        if ($scope.tagsOnly) {
+          var tag = $scope.results.tags[$scope.selectedIndex];
+          if (tag) {
+            $scope.filterByTag(tag.term);
+          }
+          return;
+        }
+
+        var selectedDash = $scope.results.dashboards[$scope.selectedIndex];
         if (selectedDash) {
           $location.path("/dashboard/elasticsearch/" + encodeURIComponent(selectedDash._id));
           setTimeout(function(){
@@ -39,15 +48,21 @@ function (angular, _, config, $) {
       }
     };
 
-    $scope.elasticsearch_dashboards = function(query) {
+    $scope.searchDasboards = function(query) {
       var request = $scope.ejs.Request().indices(config.grafana_index).types('dashboard');
-
-      if (query.length === 0) {
-        query = 'title:';
+      var tagsOnly = query.indexOf('tags!:') === 0;
+      if (tagsOnly) {
+        var tagsQuery = query.substring(6, query.length);
+        query = 'tags:' + tagsQuery + '*';
       }
+      else {
+        if (query.length === 0) {
+          query = 'title:';
+        }
 
-      if (query[query.length - 1] !== '*') {
-        query += '*';
+        if (query[query.length - 1] !== '*') {
+          query += '*';
+        }
       }
 
       return request
@@ -58,28 +73,31 @@ function (angular, _, config, $) {
         .then(function(results) {
 
           if(_.isUndefined(results.hits)) {
-            $scope.search_results = { dashboards: [] };
+            $scope.results.dashboards = [];
+            $scope.results.tags = [];
             return;
           }
 
-          $scope.search_results = { dashboards: results.hits.hits };
-          $scope.tags = results.facets.tags.terms;
+          $scope.tagsOnly = tagsOnly;
+          $scope.results.dashboards = results.hits.hits;
+          $scope.results.tags = results.facets.tags.terms;
         });
     };
 
     $scope.filterByTag = function(tag, evt) {
       $scope.query.query = "tags:" + tag + " AND title:";
       $scope.search();
-      $scope.tagsOnly = false;
       $scope.giveSearchFocus = $scope.giveSearchFocus + 1;
-      evt.stopPropagation();
-      evt.preventDefault();
+      if (evt) {
+        evt.stopPropagation();
+        evt.preventDefault();
+      }
     };
 
     $scope.showTags = function(evt) {
       evt.stopPropagation();
       $scope.tagsOnly = !$scope.tagsOnly;
-      $scope.query.query = $scope.tagsOnly ? "tags!" : "";
+      $scope.query.query = $scope.tagsOnly ? "tags!:" : "";
       $scope.giveSearchFocus = $scope.giveSearchFocus + 1;
       $scope.selectedIndex = -1;
     };
@@ -92,7 +110,7 @@ function (angular, _, config, $) {
 
       if (queryStr.indexOf('m:') !== 0) {
         queryStr = queryStr.replace(' and ', ' AND ');
-        $scope.elasticsearch_dashboards(queryStr);
+        $scope.searchDasboards(queryStr);
         return;
       }
 
@@ -115,10 +133,10 @@ function (angular, _, config, $) {
 
       results.then(function(results) {
         if (results && results.hits && results.hits.hits.length > 0) {
-          $scope.search_results = { metrics: results.hits.hits };
+          $scope.results.metrics = { metrics: results.hits.hits };
         }
         else {
-          $scope.search_results = { metric: [] };
+          $scope.results.metrics = { metric: [] };
         }
       });
     };

src/app/partials/search.html

@@ -41,23 +41,23 @@
           </span>
         </div>
 
-        <h6 ng-hide="search_results.dashboards.length || search_results.metrics.length">No dashboards or metrics matching your query found</h6>
+        <h6 ng-hide="results.dashboards.length || results.metrics.length">No dashboards or metrics matching your query found</h6>
 
         <table class="table table-condensed table-striped" ng-if="tagsOnly">
-          <tr ng-repeat="tag in tags" ng-class="{'selected-tag': $index === selectedIndex }">
+          <tr ng-repeat="tag in results.tags" ng-class="{'selected-tag': $index === selectedIndex }">
             <td>
               <a ng-click="filterByTag(tag.term, $event)" class="label label-tag">
-                {{tag.term}}
+                {{tag.term}} &nbsp;({{tag.count}})
               </a>
             </td>
-            <td style="width:100%;">
-              {{tag.count}}
+            <td style="width:100%;padding-left: 10px;font-weight: bold;">
+
             </td>
           </tr>
         </table>
 
         <table class="table table-condensed table-striped" ng-if="!tagsOnly">
-          <tr bindonce ng-repeat="row in search_results.metrics"
+          <tr bindonce ng-repeat="row in results.metrics"
               class="grafana-search-metric-result"
               ng-class="{'selected': $index === selectedIndex }">
             <td><span class="label label-info">metric</span></td>
@@ -72,7 +72,7 @@ <h6 ng-hide="search_results.dashboards.length || search_results.metrics.length">
           </tr>
 
           <tr bindonce
-              ng-repeat="row in search_results.dashboards"
+              ng-repeat="row in results.dashboards"
               ng-class="{'selected': $index === selectedIndex }">
             <td><a confirm-click="elasticsearch_delete(row._id)" confirmation="Are you sure you want to delete the {{row._id}} dashboard"><i class="icon-remove"></i></a></td>
             <td style="width:100%">