Highlighting

common/css/main.css

@@ -60,6 +60,7 @@
   margin: 0px;
 }
 
+
 [ng\:cloak], [ng-cloak], .ng-cloak {
   display: none !important;
 }

panels/derivequeries/module.js

@@ -83,7 +83,6 @@ angular.module('kibana.derivequeries', [])
       _.each(results.facets.query.terms, function(v) {
         data.push($scope.panel.field+':"'+v.term+'"')
       });
-      console.log(data)
       $scope.send_query(data)
     });
   }
@@ -121,4 +120,4 @@ angular.module('kibana.derivequeries', [])
 
 
 
-});
+});

panels/table/editor.html

@@ -16,10 +16,23 @@ <h6>Add field</h6>
       </form>
     </div>
     <div class="span8">
-      <h6>Selected fields <small>Click to remove</small></h6>
+      <h6>Columns <small>Click to remove</small></h6>
       <span style="margin-left:3px" ng-click="toggle_field(field)" ng-repeat="field in $parent.panel.fields" class="label remove pointer">{{field}} </span>
     </div>
   </div>
+  <div class="row-fluid">    
+    <div class="span4">
+      <form class="input-append">
+        <h6>Add field</h6>
+        <input bs-typeahead="fields.list" type="text" class="input-small" ng-model='newhighlight' ng-change="set_refresh(true)">
+        <button class="btn" ng-click="toggle_highlight(newhighlight);newhighlight=''"><i class="icon-plus"></i></button>
+      </form>
+    </div>
+    <div class="span8">
+      <h6>Highlighted fields <small>Click to remove</small></h6>
+      <span style="margin-left:3px" ng-click="toggle_highlight(field);set_refresh(true)" ng-repeat="field in $parent.panel.highlight" class="label remove pointer">{{field}} </span>
+    </div>
+  </div>
   <h5>Options</h5>
   <div class="row-fluid">
     <div class="span1"> 

panels/table/module.html

@@ -35,8 +35,8 @@
 
       </thead>
       <tbody ng-repeat="row in data.slice(panel.offset,panel.offset+panel.size)" ng-class-odd="'odd'">
-        <tr ng-click="toggle_details(row)">
-          <td ng-repeat="field in panel.fields">{{row[field]}}</td>
+        <tr ng-click="toggle_details(row)" class="pointer">
+          <td ng-repeat="field in panel.fields" ng-bind-html-unsafe="(row.highlight[field]||row._source[field]) | highlight"></td>
         </tr>
         <tr ng-show="row.kibana.details">
           <td colspan=1000>
@@ -46,7 +46,7 @@
                 <th>Action</th>
                 <th>Value</th>
               </thead>
-              <tr ng-repeat="(key,value) in row.kibana.details" ng-class-odd="'odd'">
+              <tr ng-repeat="(key,value) in row.kibana.details._source" ng-class-odd="'odd'">
                 <td>{{key}}</td>
                 <td>
                   <i class='icon-search pointer' ng-click="build_search(key,value)"></i> 
@@ -59,7 +59,7 @@
         </tr>
       </tbody>
     </table>
-    <div class="row-fluid" ng-show="panel.paging">>
+    <div class="row-fluid" ng-show="panel.paging">
       <div class="span1 offset3" style="text-align:right">
         <i ng-click="panel.offset = 0" ng-show="panel.offset > 0" class='icon-circle-arrow-left pointer'></i>
         <i ng-click="panel.offset = (panel.offset - panel.size)" ng-show="panel.offset > 0" class='icon-arrow-left pointer'></i>

panels/table/module.js

@@ -39,6 +39,7 @@ angular.module('kibana.table', [])
     group   : "default",
     style   : {'font-size': '9pt'},
     fields  : [],
+    highlight : [],
     sortable: true,
     header  : true,
     paging  : true, 
@@ -92,6 +93,13 @@ angular.module('kibana.table', [])
     broadcast_results();
   }
 
+  $scope.toggle_highlight = function(field) {
+    if (_.indexOf($scope.panel.highlight,field) > -1) 
+      $scope.panel.highlight = _.without($scope.panel.highlight,field)
+    else
+      $scope.panel.highlight.push(field)
+  }  
+
   $scope.toggle_details = function(row) {
     row.kibana = row.kibana || {};
     row.kibana.details = !row.kibana.details ? $scope.without_kibana(row) : false;
@@ -129,6 +137,12 @@ angular.module('kibana.table', [])
           .to($scope.time.to)
         )
       )
+      .highlight(
+        ejs.Highlight($scope.panel.highlight)
+        .fragmentSize(2147483647) // Max size of a 32bit unsigned int
+        .preTags('@start-highlight@')
+        .postTags('@end-highlight@')
+      )
       .size($scope.panel.size*$scope.panel.pages)
       .sort($scope.panel.sort[0],$scope.panel.sort[1]);
 
@@ -155,14 +169,17 @@ angular.module('kibana.table', [])
       // Check that we're still on the same query, if not stop
       if($scope.query_id === query_id) {
         $scope.data= $scope.data.concat(_.map(results.hits.hits, function(hit) {
-          return flatten_json(hit['_source']);
+          return {
+            _source   : flatten_json(hit['_source']),
+            highlight : flatten_json(hit['highlight']||{})
+          }
         }));
 
         $scope.hits += results.hits.total;
 
         // Sort the data
         $scope.data = _.sortBy($scope.data, function(v){
-          return v[$scope.panel.sort[0]]
+          return v._source[$scope.panel.sort[0]]
         });
 
         // Reverse if needed
@@ -177,7 +194,7 @@ angular.module('kibana.table', [])
       }
 
       // This breaks, use $scope.data for this
-      $scope.all_fields = get_all_fields($scope.data);
+      $scope.all_fields = get_all_fields(_.pluck($scope.data,'_source'));
       broadcast_results();
 
       // If we're not sorting in reverse chrono order, query every index for
@@ -205,9 +222,10 @@ angular.module('kibana.table', [])
   }
 
   $scope.without_kibana = function (row) {
-    row = _.clone(row)
-    delete row.kibana
-    return row
+    return { 
+      _source   : row._source,
+      highlight : row.highlight
+    }
   } 
 
   // Broadcast a list of all fields. Note that receivers of field array 
@@ -222,15 +240,39 @@ angular.module('kibana.table', [])
     eventBus.broadcast($scope.$id,$scope.panel.group,"table_documents", 
       {
         query: $scope.panel.query,
-        docs : $scope.data,
+        docs : _.pluck($scope.data,'_source'),
         index: $scope.index
       });
   }
 
+  $scope.set_refresh = function (state) { 
+    $scope.refresh = state; 
+  }
+
+  $scope.close_edit = function() {
+    if($scope.refresh)
+      $scope.get_data();
+    $scope.refresh =  false;
+  }
+
+
   function set_time(time) {
     $scope.time = time;
     $scope.index = _.isUndefined(time.index) ? $scope.index : time.index
     $scope.get_data();
   }
 
+})
+.filter('highlight', function() {
+  return function(text) {
+    if (text.toString().length) {
+      return text.toString().
+        replace(/&/g, '&').
+        replace(/</g, '&lt;').
+        replace(/>/g, '&gt;').
+        replace(/@start-highlight@/g, '<code class="highlight">').
+        replace(/@end-highlight@/g, '</code>')
+    }
+    return '';
+  }
 });