More work on adding tags to dashboard, added bootstrap tagsinput

src/app/app.js

@@ -12,7 +12,7 @@ define([
   'angular-strap',
   'angular-dragdrop',
   'extend-jquery',
-  'bindonce',
+  'bindonce'
 ],
 function (angular, $, _, appLevelRequire) {
 

src/app/components/require.config.js

@@ -45,6 +45,8 @@ require.config({
 
     modernizr:                '../vendor/modernizr-2.6.1',
     elasticjs:                '../vendor/elasticjs/elastic-angular-client',
+
+    'bootstrap-tagsinput':    '../vendor/tagsinput/bootstrap-tagsinput',
   },
   shim: {
     underscore: {
@@ -104,6 +106,7 @@ require.config({
 
     elasticjs:              ['angular', '../vendor/elasticjs/elastic'],
 
+    'bootstrap-tagsinput':          ['jquery'],
   },
   waitSeconds: 60,
 });

src/app/directives/all.js

@@ -10,5 +10,6 @@ define([
   './confirmClick',
   './configModal',
   './spectrumPicker',
-  './grafanaGraph'
+  './grafanaGraph',
+  './bootstrap-tagsinput'
 ], function () {});
\ No newline at end of file

src/app/directives/bootstrap-tagsinput.js

+define([
+  'angular',
+  'jquery',
+  'bootstrap-tagsinput'
+],
+function (angular, $) {
+  'use strict';
+
+  angular
+    .module('kibana.directives')
+    .directive('bootstrapTagsinput', function() {
+
+      function getItemProperty(scope, property) {
+        if (!property) {
+          return undefined;
+        }
+
+        if (angular.isFunction(scope.$parent[property])) {
+          return scope.$parent[property];
+        }
+
+        return function(item) {
+          return item[property];
+        };
+      }
+
+      return {
+        restrict: 'EA',
+        scope: {
+          model: '=ngModel'
+        },
+        template: '<select multiple></select>',
+        replace: false,
+        link: function(scope, element, attrs) {
+
+          if (!angular.isArray(scope.model)) {
+            scope.model = [];
+          }
+
+          var select = $('select', element);
+
+          if (attrs.placeholder) {
+            select.attr('placeholder', attrs.placeholder);
+          }
+
+          select.tagsinput({
+            typeahead : {
+              source   : angular.isFunction(scope.$parent[attrs.typeaheadSource]) ? scope.$parent[attrs.typeaheadSource] : null
+            },
+            itemValue: getItemProperty(scope, attrs.itemvalue),
+            itemText : getItemProperty(scope, attrs.itemtext),
+            tagClass : angular.isFunction(scope.$parent[attrs.tagclass]) ?
+              scope.$parent[attrs.tagclass] : function() { return attrs.tagclass; }
+          });
+
+          for (var i = 0; i < scope.model.length; i++) {
+            select.tagsinput('add', scope.model[i]);
+          }
+
+          select.on('itemAdded', function(event) {
+            if (scope.model.indexOf(event.item) === -1) {
+              scope.model.push(event.item);
+            }
+          });
+
+          select.on('itemRemoved', function(event) {
+            var idx = scope.model.indexOf(event.item);
+            if (idx !== -1) {
+              scope.model.splice(idx, 1);
+            }
+          });
+
+          // create a shallow copy of model's current state, needed to determine
+          // diff when model changes
+          var prev = scope.model.slice();
+          scope.$watch("model", function() {
+
+            var added = scope.model.filter(function(i) {return prev.indexOf(i) === -1;}),
+                removed = prev.filter(function(i) {return scope.model.indexOf(i) === -1;}),
+                i;
+
+            prev = scope.model.slice();
+
+            // Remove tags no longer in binded model
+            for (i = 0; i < removed.length; i++) {
+              select.tagsinput('remove', removed[i]);
+            }
+
+            // Refresh remaining tags
+            select.tagsinput('refresh');
+
+            // Add new items in model as tags
+            for (i = 0; i < added.length; i++) {
+              select.tagsinput('add', added[i]);
+            }
+          }, true);
+
+        }
+      };
+    });
+});
\ No newline at end of file

src/app/partials/dasheditor.html

@@ -33,7 +33,10 @@
      <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>
+          <label class="small">Tags</label>
+          <bootstrap-tagsinput ng-model="dashboard.current.tags" tagclass="label label-tag" placeholder="add tags">
+          </bootstrap-tagsinput>
+          <tip>Press enter to a add tag</tip>
         </div>
       </div>
     </div>

src/app/partials/search.html

@@ -61,7 +61,7 @@
               <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>
+              <span ng-repeat="tag in row._source.tags" style="margin-right: 5px;" class="label label-tag">{{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>
           </tr>

src/css/less/grafana.less

 @import "submenu.less";
+@import "..\..\vendor\tagsinput\bootstrap-tagsinput.less";
 
 .navbar-static-top {
   border-bottom: 1px solid black;

src/css/less/overrides.less

@@ -554,25 +554,8 @@ div.flot-text {
 
 
 // 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(@purple, 10%); }
-  // Inverse (black)
-  &-inverse           { background-color: @grayDark; }
-  &-inverse[href]     { background-color: darken(@grayDark, 10%); }
+.label-tag, .label-tag:hover {
+  background-color: @purple;
+  color: @linkColor;
 }
\ No newline at end of file

src/css/less/variables.dark.less

@@ -159,7 +159,7 @@
 
 // Input placeholder text color
 // -------------------------
-@placeholderText:         @grayLight;
+@placeholderText:         darken(@textColor, 25%);
 
 
 // Hr border color

src/vendor/tagsinput/bootstrap-tagsinput.less

+.bootstrap-tagsinput {
+  display: inline-block;
+  padding: 4px 6px;
+  margin-bottom: 10px;
+  color: #555;
+  vertical-align: middle;
+  border-radius: 4px;
+  max-width: 100%;
+  line-height: 22px;
+
+  background-color: @inputBackground;
+  border: 1px solid @inputBorder;
+  .box-shadow(inset 0 1px 1px rgba(0,0,0,.075));
+  .transition(~"border linear .2s, box-shadow linear .2s");
+
+  input {
+    border: none;
+    box-shadow: none;
+    outline: none;
+    background-color: transparent;
+    padding: 0;
+    padding-left: 5px;
+    margin: 0;
+    width: auto !important;
+    max-width: inherit;
+
+    &:focus {
+      border: none;
+      box-shadow: none;
+    }
+  }
+
+  .tag {
+    margin-right: 2px;
+    color: white;
+
+    [data-role="remove"] {
+      margin-left:8px;
+      cursor:pointer;
+      &:after{
+        content: "x";
+        padding:0px 2px;
+      }
+      &:hover {
+        box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);
+        &:active {
+          box-shadow: inset 0 3px 5px rgba(0,0,0,0.125);
+        }
+      }
+    }
+  }
+}
\ No newline at end of file