#86 Added tags to dashboard general settings panel, search and search display…

#86 Added tags to dashboard general settings panel, search and search display needs more work (grouping, facets etc)

src/app/controllers/search.js

@@ -40,17 +40,23 @@ function (angular, _, config, $) {
       }
       }
     };
     };
 
 
-    $scope.elasticsearch_dashboards = function(queryStr) {
-      dashboard.elasticsearch_list(queryStr + '*', 50).then(function(results) {
-        if(_.isUndefined(results.hits)) {
-          $scope.search_results = { dashboards: [] };
-          return;
-        }
-
-        var hits = _.sortBy(results.hits.hits, '_id');
+    $scope.elasticsearch_dashboards = function(query) {
+      var request = $scope.ejs.Request().indices(config.grafana_index).types('dashboard');
+      // if elasticsearch has disabled _all field we need
+      // need to specifiy field here
+      var q = 'title:' + (query || '*');
+
+      return request.query($scope.ejs.QueryStringQuery(q)).size(50).doSearch()
+        .then(function(results) {
+
+          if(_.isUndefined(results.hits)) {
+            $scope.search_results = { dashboards: [] };
+            return;
+          }
 
 
-        $scope.search_results = { dashboards: hits };
-      });
+          var hits = _.sortBy(results.hits.hits, '_id');
+          $scope.search_results = { dashboards: hits };
+        });
     };
     };
 
 
     $scope.elasticsearch_dblist = function(queryStr) {
     $scope.elasticsearch_dblist = function(queryStr) {

src/app/partials/dasheditor.html

@@ -30,6 +30,13 @@
         </div>
         </div>
       </div>
       </div>
     </div>
     </div>
+     <div class="editor-row">
+      <div class="section">
+        <div class="editor-option">
+          <label class="small">Tags</label><input type="text" class="input-large" ng-model='dashboard.current.tags'></input>
+        </div>
+      </div>
+    </div>
   </div>
   </div>
 
 
   <div ng-if="editor.index == 1">
   <div ng-if="editor.index == 1">

src/app/partials/search.html

@@ -57,7 +57,12 @@
               ng-repeat="row in search_results.dashboards"
               ng-repeat="row in search_results.dashboards"
               ng-class="{'selected': $index === selectedIndex }">
               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><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%"><a href="#/dashboard/elasticsearch/{{row._id}}" bo-text="row._id"></a></td>
+            <td style="width:100%">
+              <a href="#/dashboard/elasticsearch/{{row._id}}" bo-text="row._id"></a>
+            </td>
+            <td style="white-space: nowrap">
+              <span ng-repeat="tag in row._source.tags" style="margin-right: 5px;" class="label label-info">{{tag}}</span>
+            </td>
             <td><a><i class="icon-share" ng-click="share = dashboard.share_link(row._id,'elasticsearch',row._id)" bs-modal="'app/partials/dashLoaderShare.html'"></i></a></td>
             <td><a><i class="icon-share" ng-click="share = dashboard.share_link(row._id,'elasticsearch',row._id)" bs-modal="'app/partials/dashLoaderShare.html'"></i></a></td>
           </tr>
           </tr>
         </table>
         </table>

src/app/services/dashboard.js

@@ -21,6 +21,7 @@ function (angular, $, kbn, _, config, moment, Modernizr) {
 
 
     var _dash = {
     var _dash = {
       title: "",
       title: "",
+      tags: [],
       style: "dark",
       style: "dark",
       timezone: 'browser',
       timezone: 'browser',
       editable: true,
       editable: true,
@@ -363,6 +364,7 @@ function (angular, $, kbn, _, config, moment, Modernizr) {
         user: 'guest',
         user: 'guest',
         group: 'guest',
         group: 'guest',
         title: save.title,
         title: save.title,
+        tags: save.tags,
         dashboard: angular.toJson(save)
         dashboard: angular.toJson(save)
       });
       });
 
 
@@ -396,26 +398,6 @@ function (angular, $, kbn, _, config, moment, Modernizr) {
       );
       );
     };
     };
 
 
-    this.elasticsearch_list = function(query, count) {
-      var request = ejs.Request().indices(config.grafana_index).types('dashboard');
-      // if elasticsearch has disabled _all field we need
-      // need to specifiy field here
-      var q = 'title:' + (query || '*');
-
-      return request.query(
-        ejs.QueryStringQuery(q)
-        ).size(count).doSearch(
-          // Success
-          function(result) {
-            return result;
-          },
-          // Failure
-          function() {
-            return false;
-          }
-        );
-    };
-
     this.save_gist = function(title,dashboard) {
     this.save_gist = function(title,dashboard) {
       var save = _.clone(dashboard || self.current);
       var save = _.clone(dashboard || self.current);
       save.title = title || self.current.title;
       save.title = title || self.current.title;

src/css/less/overrides.less

@@ -542,4 +542,29 @@ div.flot-text {
       border-top-color: @popoverArrowColor;
       border-top-color: @popoverArrowColor;
     }
     }
   }
   }
+}
+
+
+// Labels & Badges
+// Colors
+// Only give background-color difference to links (and to simplify, we don't qualifty with `a` but [href] attribute)
+.label,
+.badge {
+  color: @linkColor;
+
+  // Important (red)
+  &-important         { background-color: @errorText; }
+  &-important[href]   { background-color: darken(@errorText, 10%); }
+  // Warnings (orange)
+  &-warning           { background-color: @orange; }
+  &-warning[href]     { background-color: darken(@orange, 10%); }
+  // Success (green)
+  &-success           { background-color: @successText; }
+  &-success[href]     { background-color: darken(@successText, 10%); }
+  // Info (turquoise)
+  &-info              { background-color: @purple; }
+  &-info[href]        { background-color: darken(@infoText, 10%); }
+  // Inverse (black)
+  &-inverse           { background-color: @grayDark; }
+  &-inverse[href]     { background-color: darken(@grayDark, 10%); }
 }
 }
\ No newline at end of file