Merge pull request #482 from rashidkpc/master

Pointer, timepicker cleanup and show _source by default in table

js/filters.js

@@ -29,7 +29,11 @@ angular.module('kibana.filters', [])
 }).filter('stringify', function() {
   return function(arr, start, end) {
     if(!_.isUndefined(arr)) {
-      return arr.toString();
+      if(_.isObject(arr) && !_.isArray(arr)) {
+        return angular.toJson(arr);
+      } else {
+        return arr.toString();
+      }
     }
   };
 }).filter('noXml', function() {

panels/histogram/module.html

@@ -8,10 +8,10 @@
       display:inline-block;
       height:10px;
       width:10px;
-      border-radius:5px;  
+      border-radius:5px;
     }
     .histogram-legend-item {
-      display:inline-block; 
+      display:inline-block;
     }
     .histogram-chart {
       position:relative;
@@ -23,7 +23,7 @@
   <div>
     <span ng-show='panel.zoomlinks && data'>
       <!--<a class='small' ng-click='zoom(0.5)'><i class='icon-zoom-in'></i> Zoom In</a>-->
-      <a class='small' ng-click='zoom(2)'><i class='icon-zoom-out'></i> Zoom Out</a> | 
+      <a class='small' ng-click='zoom(2)'><i class='icon-zoom-out'></i> Zoom Out</a> |
     </span>
     <span ng-show="panel.legend" ng-repeat='series in data' class="histogram-legend">
       <i class='icon-circle' ng-style="{color: series.info.color}"></i>
@@ -32,5 +32,5 @@
     <span ng-show="panel.legend" class="small"><span ng-show="panel.value_field && panel.mode != 'count'">{{panel.value_field}}</span> {{panel.mode}} per <strong>{{panel.interval}}</strong> | (<strong>{{hits}}</strong> hits)</span>
   </div>
   <center><img ng-show='panel.loading && _.isUndefined(data)' src="common/img/load_big.gif"></center>
-  <div histogram-chart class="histogram-chart" params="{{panel}}"></div>
-</kibana-panel>         
+  <div histogram-chart class="pointer histogram-chart" params="{{panel}}"></div>
+</kibana-panel>

panels/pie/module.html

@@ -8,9 +8,9 @@
   </div><br>
   <div style="clear:both"></div>
 
-  <div pie params="{{panel}}" style="position:relative"></div>
+  <div pie class="pointer" params="{{panel}}" style="position:relative"></div>
 
   <div ng-show="panel.legend == 'below'" ng-repeat="query in legend" style="float:left;padding-left: 10px;">
     <span ng-show='panel.chart != "none"'><i class="icon-circle" ng-style="{color:query.color}"></i></span><span class="small"> {{query.label}} ({{query.data[0][1]}}) </span></span>
   </div>
-</kibana-panel>         
+</kibana-panel>

panels/table/module.html

@@ -39,10 +39,12 @@
           <i ng-click="panel.offset = (panel.offset + panel.size)" ng-show="data.length > panel.offset+panel.size" class='icon-arrow-right pointer'></i>
         </div>
       </div>
-      <div class="small" ng-show="panel.fields.length == 0"><center>No columns configured. You may want to select some from the list on the left.</center></div>
+
       <table class="table-hover table table-condensed" ng-style="panel.style">
         <thead ng-show="panel.header">
 
+          <th ng-show="panel.fields.length<1">_source (select columns from the list to the left)</th>
+
           <th style="white-space:nowrap" ng-repeat="field in panel.fields">
             <i ng-show="!$first" class="pointer link icon-caret-left" ng-click="_.move(panel.fields,$index,$index-1)"></i>
 
@@ -58,7 +60,8 @@
         <tbody ng-repeat="event in data | slice:panel.offset:panel.offset+panel.size" ng-class-odd="'odd'">
           <tr ng-click="toggle_details(event)" class="pointer">
             <!--<td ng-repeat="field in panel.fields" ng-bind-html-unsafe="(event.highlight[field]||event._source[field]) | tableFieldFormat:field:event:this |tableHighlight | tableTruncate:panel.trimFactor:panel.fields.length"></td>-->
-            <td ng-repeat="field in panel.fields" ng-bind-html-unsafe="(event.highlight[field]||event._source[field]) |tableHighlight | tableTruncate:panel.trimFactor:panel.fields.length"></td>
+            <td ng-show="panel.fields.length<1">{{event._source|stringify|tableTruncate:panel.trimFactor:1}}</td>
+            <td ng-show="panel.fields.length>0" ng-repeat="field in panel.fields" ng-bind-html-unsafe="(event.highlight[field]||event._source[field]) |tableHighlight | tableTruncate:panel.trimFactor:panel.fields.length"></td>
           </tr>
           <tr ng-show="event.kibana.details">
             <td colspan=1000>
@@ -70,9 +73,10 @@
                 </thead>
                 <tr ng-repeat="(key,value) in event.kibana.details._source" ng-class-odd="'odd'">
                   <td>{{key}}</td>
-                  <td>
-                    <i class='icon-search pointer' ng-click="build_search(key,value)"></i>
-                    <i class='icon-ban-circle pointer' ng-click="build_search(key,value,true)"></i>
+                  <td style="white-space:nowrap">
+                    <i class='icon-search pointer' ng-click="build_search(key,value)" bs-tooltip="'Add filter to match this value'"></i>
+                    <i class='icon-ban-circle pointer' ng-click="build_search(key,value,true)" bs-tooltip="'Add filter to NOT match this value'"></i>
+                    <i class="pointer icon-th" ng-click="toggle_field(key)" bs-tooltip="'Toggle table column'"></i>
                   </td>
                   <!-- At some point we need to create a more efficient way of applying the filter pipeline -->
                   <td style="white-space:pre-wrap" ng-bind-html-unsafe="value|noXml|urlLink|stringify"></td>

panels/table/module.js

@@ -45,10 +45,10 @@ angular.module('kibana.table', [])
     size    : 100, // Per page
     pages   : 5,   // Pages available
     offset  : 0,
-    sort    : ['@timestamp','desc'],
+    sort    : ['_score','desc'],
     group   : "default",
     style   : {'font-size': '9pt'},
-    overflow: 'height',
+    overflow: 'min-height',
     fields  : [],
     highlight : [],
     sortable: true,

panels/terms/module.html

@@ -5,7 +5,7 @@
   <!-- START Pie or bar chart -->
   <div ng-show="panel.counter_pos == 'above' && (panel.chart == 'bar' || panel.chart == 'pie')" id='{{$id}}-legend'>
     <!-- vertical legend above -->
-    <table class="small" ng-show="panel.arrangement == 'vertical'">  
+    <table class="small" ng-show="panel.arrangement == 'vertical'">
       <tr ng-repeat="term in legend">
         <td><i class="icon-circle" ng-style="{color:term.color}"></i></td> <td style="padding-right:10px;padding-left:10px;">{{term.label}}</td><td>{{term.data[0][1]}}</td>
       </tr>
@@ -21,11 +21,11 @@
   <!-- keep legend from over lapping -->
   <div style="clear:both"></div>
 
-  <div ng-show="panel.chart == 'pie' || panel.chart == 'bar'" terms-chart params="{{panel}}" style="position:relative"></div>
+  <div ng-show="panel.chart == 'pie' || panel.chart == 'bar'" terms-chart params="{{panel}}" style="position:relative" class="pointer"></div>
 
   <div ng-show="panel.counter_pos == 'below' && (panel.chart == 'bar' || panel.chart == 'pie')" id='{{$id}}-legend'>
     <!-- vertical legend below -->
-    <table class="small" ng-show="panel.arrangement == 'vertical'">  
+    <table class="small" ng-show="panel.arrangement == 'vertical'">
       <tr ng-repeat="term in legend">
         <td><i class="icon-circle" ng-style="{color:term.color}"></i></i></td> <td style="padding-right:10px;padding-left:10px;">{{term.label}}</td><td>{{term.data[0][1]}}</td>
       </tr>
@@ -39,7 +39,7 @@
   </div>
   <!-- END Pie or Bar chart -->
 
-  <table ng-style="panel.style" class="table table-striped table-condensed" ng-show="panel.chart == 'table'">  
+  <table ng-style="panel.style" class="table table-striped table-condensed" ng-show="panel.chart == 'table'">
     <thead>
       <th>Term</th> <th>Count</th> <th>Action</th>
     </thead>
@@ -48,11 +48,11 @@
       <td>{{term.data[0][1]}}</td>
       <td>
         <span ng-hide="term.meta == 'other'">
-          <i class='icon-search pointer' ng-click="build_search(term)"></i> 
+          <i class='icon-search pointer' ng-click="build_search(term)"></i>
           <i class='icon-ban-circle pointer' ng-click="build_search(term,true)"></i>
         </span>
       </td>
     </tr>
   </table>
 
-</kibana-panel>         
+</kibana-panel>

panels/timepicker/module.html

@@ -1,36 +1,41 @@
 <kibana-panel ng-controller='timepicker' ng-init="init()">
-  <div class="row-fluid" ng-switch="panel.mode" ng-show="filterSrv.idsByType('time').length > 0">
-    <div ng-switch-when="absolute">
-      <div class="span5">
+  <style>
+    .timepicker-block {
+      display: inline-block;
+    }
+  </style>
+
+  <div class="row-fluid form-horizontal" ng-switch="panel.mode" ng-show="filterSrv.idsByType('time').length > 0">
+    <div ng-switch-when="absolute" >
+      <div class="timepicker-block">
         <form class="nomargin">
           <label><small>From</small></label>
-          <input type="text" class="input-smaller" ng-change="time_check()" ng-model="timepicker.from.date" data-date-format="mm/dd/yyyy" bs-datepicker>  
+          <input type="text" class="input-smaller" ng-change="time_check()" ng-model="timepicker.from.date" data-date-format="mm/dd/yyyy" bs-datepicker>
           <input type="text" class="input-mini" ng-change="time_check()" data-show-meridian="false" data-show-seconds="true" ng-model="timepicker.from.time" bs-timepicker>
         </form>
       </div>
-      <div class="span5" style="margin-left:10px">
+      <div class="timepicker-block" style="margin-left:10px">
         <form class="nomargin">
           <label style="margin-left:5px"><small>To (<a ng-click="to_now()">now</a>)</small></label>
-          <input type="text" class="input-smaller" ng-change="time_check()" ng-model="timepicker.to.date" data-date-format="mm/dd/yyyy" bs-datepicker>  
+          <input type="text" class="input-smaller" ng-change="time_check()" ng-model="timepicker.to.date" data-date-format="mm/dd/yyyy" bs-datepicker>
           <input type="text" class="input-mini" ng-change="time_check()" data-show-meridian="false" data-show-seconds="true" ng-model="timepicker.to.time" bs-timepicker>
       </form>
       </div>
-      <div class="span1">
+      <div class="timepicker-block">
         <form class="nomargin">
-          <label><small><br></small></label>
-          <button class="btn" ng-click="time_apply()" ><i class="icon-ok"></i></button>
+          <button class="btn" ng-click="time_apply()"><i class="icon-ok"></i></button>
         </form>
       </div>
     </div>
     <div ng-switch-when="since">
-      <div class="span5">
+      <div class="timepicker-block">
         <form class="nomargin">
           <label><small>Since</small></label>
-          <input type="text" class="input-smaller" ng-change="time_check()" ng-model="timepicker.from.date" data-date-format="mm/dd/yyyy" bs-datepicker>  
+          <input type="text" class="input-smaller" ng-change="time_check()" ng-model="timepicker.from.date" data-date-format="mm/dd/yyyy" bs-datepicker>
           <input type="text" class="input-mini" ng-change="time_check()" data-show-meridian="false" data-show-seconds="true" ng-model="timepicker.from.time" bs-timepicker>
         </form>
       </div>
-      <div class="span1" style="margin-left:10px">
+      <div class="timepicker-block" style="margin-left:10px">
         <form class="nomargin">
           <label><small><br></small></label>
           <button class="btn" ng-click="time_apply()" ><i class="icon-ok"></i></button>
@@ -38,7 +43,7 @@
       </div>
     </div>
     <div ng-switch-when="relative">
-      <div class="span11">
+      <div class="timepicker-block">
         <form class="nomargin input-append">
           <label><small>The last</small></label>
           <button class="btn btn" ng-repeat='timespan in panel.time_options' ng-class="{'btn-success': (panel.timespan == timespan)}" ng-click="set_timespan(timespan)">{{timespan}}</button>
@@ -56,18 +61,18 @@
   </div>
   <div class="row-fluid nomargin">
     <div class="span12 small" ng-show="filterSrv.idsByType('time').length > 0">
-      <a ng-click="set_mode('relative')" ng-class="{'strong': (panel.mode == 'relative')}">Relative</a> | 
-      <a ng-click="set_mode('absolute')" ng-class="{'strong': (panel.mode == 'absolute')}">Absolute</a> | 
-      <a ng-click="set_mode('since')"    ng-class="{'strong': (panel.mode == 'since')}">Since</a>
-      <span ng-hide="panel.mode == 'absolute' || panel.mode == 'none'"> | 
-        <input type="checkbox" ng-model="panel.refresh.enable" ng-change='refresh();'> Auto-refresh 
+      <a class="link" ng-click="set_mode('relative')" ng-class="{'strong': (panel.mode == 'relative')}">Relative</a> |
+      <a class="link" ng-click="set_mode('absolute')" ng-class="{'strong': (panel.mode == 'absolute')}">Absolute</a> |
+      <a class="link" ng-click="set_mode('since')"    ng-class="{'strong': (panel.mode == 'since')}">Since</a>
+      <span ng-hide="panel.mode == 'absolute' || panel.mode == 'none'"> |
+        <input type="checkbox" ng-model="panel.refresh.enable" ng-change='refresh();'> Auto-refresh
         <span ng-class="{'ng-cloak': !panel.refresh.enable}">
           every <a data-title="<small>Auto-refresh Settings</small>" data-placement="bottom" bs-popover="'panels/timepicker/refreshctrl.html'">{{panel.refresh.interval}}s</a>.
         </span>
       </span>
     </div>
     <div class="span12 small" ng-show="filterSrv.idsByType('time').length < 1">
-      <a class='btn btn-small' ng-click="time_apply()">Create a time filter</a> 
+      <a class='btn btn-small' ng-click="time_apply()">Create a time filter</a>
     </div>
   </div>
 </kibana-panel>