kibana-sinatra 0.0.8 → 3.0.0.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (46) hide show
  1. checksums.yaml +4 -4
  2. data/lib/kibana/assets/app/components/kbn.js +3 -3
  3. data/lib/kibana/assets/app/controllers/dash.js +2 -19
  4. data/lib/kibana/assets/app/dashboards/guided.json +1 -1
  5. data/lib/kibana/assets/app/panels/bettermap/module.html +1 -1
  6. data/lib/kibana/assets/app/panels/bettermap/module.js +11 -4
  7. data/lib/kibana/assets/app/panels/column/module.js +3 -0
  8. data/lib/kibana/assets/app/panels/{pie → goal}/editor.html +1 -25
  9. data/lib/kibana/assets/app/panels/{pie → goal}/module.html +4 -4
  10. data/lib/kibana/assets/app/panels/goal/module.js +252 -0
  11. data/lib/kibana/assets/app/panels/histogram/interval.js +1 -1
  12. data/lib/kibana/assets/app/panels/histogram/module.html +12 -3
  13. data/lib/kibana/assets/app/panels/histogram/module.js +16 -14
  14. data/lib/kibana/assets/app/panels/hits/module.js +7 -3
  15. data/lib/kibana/assets/app/panels/map/module.html +1 -1
  16. data/lib/kibana/assets/app/panels/map/module.js +9 -1
  17. data/lib/kibana/assets/app/panels/query/module.html +1 -1
  18. data/lib/kibana/assets/app/panels/sparklines/interval.js +1 -1
  19. data/lib/kibana/assets/app/panels/sparklines/module.js +5 -1
  20. data/lib/kibana/assets/app/panels/table/editor.html +1 -1
  21. data/lib/kibana/assets/app/panels/table/micropanel.html +3 -3
  22. data/lib/kibana/assets/app/panels/table/module.html +63 -16
  23. data/lib/kibana/assets/app/panels/table/module.js +4 -1
  24. data/lib/kibana/assets/app/panels/terms/module.js +7 -4
  25. data/lib/kibana/assets/app/panels/text/module.js +2 -0
  26. data/lib/kibana/assets/app/panels/timepicker/module.js +9 -1
  27. data/lib/kibana/assets/app/panels/trends/module.js +4 -0
  28. data/lib/kibana/assets/app/partials/dashboard.html +4 -2
  29. data/lib/kibana/assets/app/partials/panelgeneral.html +1 -1
  30. data/lib/kibana/assets/app/services/dashboard.js +9 -7
  31. data/lib/kibana/assets/app/services/fields.js +34 -3
  32. data/lib/kibana/assets/app/services/kbnIndex.js +5 -3
  33. data/lib/kibana/assets/css/bootstrap.dark.min.css +1 -1
  34. data/lib/kibana/assets/css/bootstrap.light.min.css +1 -1
  35. data/lib/kibana/assets/favicon.ico +0 -0
  36. data/lib/kibana/assets/img/annotation-icon.png +0 -0
  37. data/lib/kibana/assets/index.html +14 -9
  38. data/lib/kibana/assets/vendor/bootstrap/less/overrides.less +11 -5
  39. data/lib/kibana/assets/vendor/bootstrap/less/tooltip.less +4 -4
  40. data/lib/kibana/assets/vendor/jquery/jquery.flot.events.js +15 -9
  41. data/lib/kibana/assets/vendor/jquery/jquery.flot.js +154 -77
  42. data/lib/kibana/assets/vendor/jquery/jquery.flot.pie.js +6 -6
  43. data/lib/kibana/sinatra/version.rb +1 -1
  44. data/lib/kibana/views/config.erb +8 -2
  45. metadata +8 -6
  46. data/lib/kibana/assets/app/panels/pie/module.js +0 -334
@@ -13,7 +13,7 @@ function (kbn) {
13
13
 
14
14
  var info = kbn.describe_interval(interval_string);
15
15
  this.type = info.type;
16
- this.ms = info.sec * 1000 * info.count;
16
+ this.ms = Math.ceil(info.sec * 1000 * info.count);
17
17
 
18
18
  // does the length of the interval change based on the current time?
19
19
  if (this.type === 'y' || this.type === 'M') {
@@ -32,6 +32,15 @@
32
32
  .form-inline .checkbox {
33
33
  display: inline-block;
34
34
  }
35
+
36
+ .histogram-marker {
37
+ display: block;
38
+ width: 20px;
39
+ height: 21px;
40
+ background-image: url('img/annotation-icon.png');
41
+ background-repeat: no-repeat;
42
+ }
43
+
35
44
  </style>
36
45
  <div>
37
46
  <span ng-show='panel.options'>
@@ -39,7 +48,7 @@
39
48
  View <i ng-show="!options" class="icon-caret-right"></i><i ng-show="options" class="icon-caret-down"></i>
40
49
  </a> |&nbsp
41
50
  </span>
42
- <span ng-show='panel.zoomlinks && !_.isUndefined(data)'>
51
+ <span ng-show='panel.zoomlinks'>
43
52
  <!--<a class='small' ng-click='zoom(0.5)'><i class='icon-zoom-in'></i> Zoom In</a>-->
44
53
  <a class='small' ng-click='zoom(2)'><i class='icon-zoom-out'></i> Zoom Out</a> |&nbsp
45
54
  </span>
@@ -94,6 +103,6 @@
94
103
  <label class="small">Interval</label> <select ng-change="set_interval(panel.interval);get_data();" class="input-small" ng-model="panel.interval" ng-options="interval_label(time) for time in _.union([panel.interval],panel.intervals)"></select>
95
104
  </span>
96
105
  </form>
97
- <center><img ng-show='panel.loading && _.isUndefined(data)' src="img/load_big.gif"></center>
106
+ <center><img ng-show='panel.loading' src="img/load_big.gif"></center>
98
107
  <div histogram-chart class="pointer histogram-chart" params="{{panel}}"></div>
99
- </div>
108
+ </div>
@@ -1,8 +1,10 @@
1
1
  /** @scratch /panels/5
2
+ *
2
3
  * include::panels/histogram.asciidoc[]
3
4
  */
4
5
 
5
6
  /** @scratch /panels/histogram/0
7
+ *
6
8
  * == Histogram
7
9
  * Status: *Stable*
8
10
  *
@@ -64,6 +66,7 @@ function (angular, app, $, _, kbn, moment, timeSeries, numeral) {
64
66
  // Set and populate defaults
65
67
  var _d = {
66
68
  /** @scratch /panels/histogram/3
69
+ *
67
70
  * === Parameters
68
71
  * ==== Axis options
69
72
  * mode:: Value to use for the y-axis. For all modes other than count, +value_field+ must be
@@ -104,6 +107,7 @@ function (angular, app, $, _, kbn, moment, timeSeries, numeral) {
104
107
  min: 0
105
108
  },
106
109
  /** @scratch /panels/histogram/5
110
+ *
107
111
  * ==== Queries
108
112
  * queries object:: This object describes the queries to use on this panel.
109
113
  * queries.mode::: Of the queries available, which to use. Options: +all, pinned, unpinned, selected+
@@ -114,6 +118,7 @@ function (angular, app, $, _, kbn, moment, timeSeries, numeral) {
114
118
  ids : []
115
119
  },
116
120
  /** @scratch /panels/histogram/3
121
+ *
117
122
  * ==== Annotations
118
123
  * annotate object:: A query can be specified, the results of which will be displayed as markers on
119
124
  * the chart. For example, for noting code deploys.
@@ -394,11 +399,9 @@ function (angular, app, $, _, kbn, moment, timeSeries, numeral) {
394
399
  // Check for error and abort if found
395
400
  if(!(_.isUndefined(results.error))) {
396
401
  $scope.panel.error = $scope.parse_error(results.error);
397
- return;
398
402
  }
399
-
400
403
  // Make sure we're still on the same query/queries
401
- if($scope.query_id === query_id) {
404
+ else if($scope.query_id === query_id) {
402
405
 
403
406
  var i = 0,
404
407
  time_series,
@@ -495,14 +498,14 @@ function (angular, app, $, _, kbn, moment, timeSeries, numeral) {
495
498
  // And slice to the right size
496
499
  $scope.annotations = $scope.annotations.slice(0,$scope.panel.annotate.size);
497
500
  }
501
+ }
498
502
 
499
- // Tell the histogram directive to render.
500
- $scope.$emit('render', data);
503
+ // Tell the histogram directive to render.
504
+ $scope.$emit('render', data);
501
505
 
502
- // If we still have segments left, get them
503
- if(segment < dashboard.indices.length-1) {
504
- $scope.get_data(data,segment+1,query_id);
505
- }
506
+ // If we still have segments left, get them
507
+ if(segment < dashboard.indices.length-1) {
508
+ $scope.get_data(data,segment+1,query_id);
506
509
  }
507
510
  });
508
511
  };
@@ -612,7 +615,7 @@ function (angular, app, $, _, kbn, moment, timeSeries, numeral) {
612
615
  function render_panel(data) {
613
616
  // IE doesn't work without this
614
617
  try {
615
- elem.css({height:scope.panel.height || scope.row.height});
618
+ elem.css({height:scope.row.height});
616
619
  } catch(e) {return;}
617
620
 
618
621
  // Populate from the query service
@@ -702,10 +705,9 @@ function (angular, app, $, _, kbn, moment, timeSeries, numeral) {
702
705
  'annotation': {
703
706
  level: 1,
704
707
  icon: {
705
- icon: "icon-tag icon-flip-vertical",
706
- size: 20,
707
- color: "#222",
708
- outline: "#bbb"
708
+ width: 20,
709
+ height: 21,
710
+ icon: "histogram-marker"
709
711
  }
710
712
  }
711
713
  }
@@ -1,8 +1,10 @@
1
1
  /** @scratch /panels/5
2
+ *
2
3
  * include::panels/hits.asciidoc[]
3
4
  */
4
5
 
5
6
  /** @scratch /panels/hits/0
7
+ *
6
8
  * == Hits
7
9
  * Status: *Stable*
8
10
  *
@@ -47,6 +49,7 @@ define([
47
49
  var _d = {
48
50
  style : { "font-size": '10pt'},
49
51
  /** @scratch /panels/hits/3
52
+ *
50
53
  * === Parameters
51
54
  *
52
55
  * arrangement:: The arrangement of the legend. horizontal or vertical
@@ -77,6 +80,7 @@ define([
77
80
  */
78
81
  spyable : true,
79
82
  /** @scratch /panels/hits/5
83
+ *
80
84
  * ==== Queries
81
85
  * queries object:: This object describes the queries to use on this panel.
82
86
  * queries.mode::: Of the queries available, which to use. Options: +all, pinned, unpinned, selected+
@@ -207,7 +211,7 @@ define([
207
211
  // Function for rendering panel
208
212
  function render_panel() {
209
213
  // IE doesn't work without this
210
- elem.css({height:scope.panel.height||scope.row.height});
214
+ elem.css({height:scope.row.height});
211
215
 
212
216
  try {
213
217
  _.each(scope.data,function(series) {
@@ -282,7 +286,7 @@ define([
282
286
  var value = scope.panel.chart === 'bar' ?
283
287
  item.datapoint[1] : item.datapoint[1][0][1];
284
288
  $tooltip
285
- .html(kbn.query_color_dot(item.series.color, 20) + ' ' + value.toFixed(0))
289
+ .html(kbn.query_color_dot(item.series.color, 20) + ' ' + item.series.label + " (" + value.toFixed(0) + ")")
286
290
  .place_tt(pos.pageX, pos.pageY);
287
291
  } else {
288
292
  $tooltip.remove();
@@ -292,4 +296,4 @@ define([
292
296
  }
293
297
  };
294
298
  });
295
- });
299
+ });
@@ -59,5 +59,5 @@
59
59
  z-index: 99;
60
60
  }
61
61
  </style>
62
- <div class="jvectormap" map params="{{panel}}" style="height:{{panel.height || row.height}}"></div>
62
+ <div class="jvectormap" map params="{{panel}}" ng-style="{height:panel.height||row.height}"></div>
63
63
  </div>
@@ -1,8 +1,10 @@
1
1
  /** @scratch /panels/5
2
+ *
2
3
  * include::panels/map.asciidoc[]
3
4
  */
4
5
 
5
6
  /** @scratch /panels/map/0
7
+ *
6
8
  * == Map
7
9
  * Status: *Stable*
8
10
  *
@@ -46,6 +48,7 @@ function (angular, app, _, $) {
46
48
  // Set and populate defaults
47
49
  var _d = {
48
50
  /** @scratch /panels/map/3
51
+ *
49
52
  * === Parameters
50
53
  *
51
54
  * map:: Map to display. world, usa, europe
@@ -69,6 +72,7 @@ function (angular, app, _, $) {
69
72
  */
70
73
  spyable : true,
71
74
  /** @scratch /panels/map/5
75
+ *
72
76
  * ==== Queries
73
77
  * queries object:: This object describes the queries to use on this panel.
74
78
  * queries.mode::: Of the queries available, which to use. Options: +all, pinned, unpinned, selected+
@@ -142,7 +146,7 @@ function (angular, app, _, $) {
142
146
  };
143
147
 
144
148
  $scope.build_search = function(field,value) {
145
- filterSrv.set({type:'querystring',mandate:'must',query:field+":"+value});
149
+ filterSrv.set({type:'terms',field:field,value:value,mandate:"must"});
146
150
  };
147
151
 
148
152
  });
@@ -166,7 +170,10 @@ function (angular, app, _, $) {
166
170
  });
167
171
 
168
172
  function render_panel() {
173
+ elem.css({height:scope.row.height});
174
+
169
175
  elem.text('');
176
+
170
177
  $('.jvectormap-zoomin,.jvectormap-zoomout,.jvectormap-label').remove();
171
178
  require(['./panels/map/lib/map.'+scope.panel.map], function () {
172
179
  elem.vectorMap({
@@ -197,6 +204,7 @@ function (angular, app, _, $) {
197
204
  }
198
205
  });
199
206
  elem.prepend('<span class="map-legend"></span>');
207
+
200
208
  $('.map-legend').hide();
201
209
  });
202
210
  }
@@ -20,7 +20,7 @@
20
20
  <span ng-show="panel.pinned" class="badge pinned">
21
21
  <i class="icon-circle pointer" ng-show="querySrv.list[id].enable" ng-style="{color: querySrv.list[id].color}" data-unique="1" bs-popover="'app/panels/query/meta.html'" data-placement="bottomLeft"></i>
22
22
  <i class="pointer icon-circle-blank" bs-tooltip="'Activate query'" ng-click="querySrv.list[id].enable=true;dashboard.refresh();" ng-hide="querySrv.list[id].enable" ng-style="{color: querySrv.list[id].color}"></i>
23
- <span bs-tooltip="querySrv.list[id].query"> {{querySrv.list[id].alias || querySrv.list[id].query}}</span>
23
+ <span bs-tooltip="querySrv.list[id].query | limitTo:45"> {{querySrv.list[id].alias || querySrv.list[id].query}}</span>
24
24
  </span>
25
25
  </div>
26
26
  <span style="display:inline-block" ng-show="unPinnedQueries.length == 0">
@@ -13,7 +13,7 @@ function (kbn) {
13
13
 
14
14
  var info = kbn.describe_interval(interval_string);
15
15
  this.type = info.type;
16
- this.ms = info.sec * 1000 * info.count;
16
+ this.ms = Math.ceil(info.sec * 1000 * info.count);
17
17
 
18
18
  // does the length of the interval change based on the current time?
19
19
  if (this.type === 'y' || this.type === 'M') {
@@ -1,8 +1,10 @@
1
1
  /** @scratch /panels/5
2
+ *
2
3
  * include::panels/sparklines.asciidoc[]
3
4
  */
4
5
 
5
6
  /** @scratch /panels/sparklines/0
7
+ *
6
8
  * == Sparklines
7
9
  * Status: *Experimental*
8
10
  *
@@ -47,13 +49,14 @@ function (angular, app, $, _, kbn, moment, timeSeries) {
47
49
  ],
48
50
  status : "Experimental",
49
51
  description : "Sparklines are tiny, simple, time series charts, shown separately. Because "+
50
- "sparklines are unclutted by grids, axis markers and colors, they are perfect for spotting"+
52
+ "sparklines are uncluttered by grids, axis markers and colors, they are perfect for spotting"+
51
53
  " change in a series"
52
54
  };
53
55
 
54
56
  // Set and populate defaults
55
57
  var _d = {
56
58
  /** @scratch /panels/sparklines/3
59
+ *
57
60
  * === Parameters
58
61
  * mode:: Value to use for the y-axis. For all modes other than count, +value_field+ must be
59
62
  * defined. Possible values: count, mean, max, min, total.
@@ -77,6 +80,7 @@ function (angular, app, $, _, kbn, moment, timeSeries) {
77
80
  */
78
81
  spyable : true,
79
82
  /** @scratch /panels/sparklines/5
83
+ *
80
84
  * ==== Queries
81
85
  * queries object:: This object describes the queries to use on this panel.
82
86
  * queries.mode::: Of the queries available, which to use. Options: +all, pinned, unpinned, selected+
@@ -35,7 +35,7 @@
35
35
  <button class="btn" ng-click="panel.fields = _.toggleInOut(panel.fields,newfield);newfield=''"><i class="icon-plus"></i></button>
36
36
  </form><br>
37
37
  <span style="margin-left:3px" ng-repeat="field in panel.fields" class="label">{{field}} <i class="pointer icon-remove-sign" ng-click="panel.fields = _.toggleInOut(panel.fields,field)"></i></span>
38
- <h5>Hightlighted Fields</h5>
38
+ <h5>Highlighted Fields</h5>
39
39
  <form class="input-append editor-option">
40
40
  <input bs-typeahead="fields.list" type="text" class="input-small" ng-model='newhighlight' ng-change="set_refresh(true)">
41
41
  <button class="btn" ng-click="panel.highlight = _.toggleInOut(panel.highlight,newhighlight);newhighlight=''"><i class="icon-plus"></i></button>
@@ -14,8 +14,8 @@
14
14
  </span>
15
15
  <table style="width:100%;table-layout:fixed" class='table table-striped table-unpadded'>
16
16
  <thead>
17
- <th style="width:10px"></th>
18
- <th style="width:260px">{{micropanel.field}}</th>
17
+ <th style="width:15px"></th>
18
+ <th style="width:260px">Value</th>
19
19
  <th style="width:40px">Action</th>
20
20
  <th style="width:100px;text-align:right">Count / {{micropanel.count}} events</th>
21
21
  </thead>
@@ -33,7 +33,7 @@
33
33
  overflow: visible;
34
34
  }
35
35
  </style>
36
- <div bs-tooltip="percent(field[1],data.length)" class="bar" ng-class="micropanelColor($index)" ng-style="{width: percent(field[1],data.length)}"></div>
36
+ <div bs-tooltip="percent(field[1],data.length)" class="bar" ng-class="micropanelColor($index)" ng-style="{width: (field[1]/data.length) > 1 ? '100%' : percent(field[1],data.length)}"></div>
37
37
  <span style="position:absolute;right:20px;">{{field[1]}}</span>
38
38
  </td>
39
39
  </tr>
@@ -3,22 +3,68 @@
3
3
  .table-doc-table {
4
4
  margin-left: 0px !important;
5
5
  overflow-y: auto;
6
- overflow-x: scroll;
6
+ }
7
+ .table-sidebar {
8
+ width: 200px;
9
+ display: table-cell;
10
+ padding-right: 10px;
11
+ }
12
+ .table-main {
13
+ width: 100%;
14
+ display: table-cell;
15
+ }
16
+ .table-container {
17
+ display: table;
18
+ height: 100px;
19
+ width: 100%;
20
+ table-layout: fixed;
21
+ }
22
+ .table-fieldname {
23
+ white-space: nowrap;
24
+ }
25
+
26
+ .table-fieldname a {
27
+ word-wrap:break-word;
28
+ white-space: normal;
29
+ }
30
+
31
+ .table-details {
32
+ table-layout: fixed;
33
+ }
34
+
35
+ .table-details-field {
36
+ width: 200px;
37
+ }
38
+
39
+ .table-details-action {
40
+ width: 60px;
41
+ text-align: center;
42
+ }
43
+
44
+ .table-details-value {
45
+ }
46
+
47
+ .table-field-value {
48
+ white-space: pre-wrap;
7
49
  }
8
50
  </style>
9
51
 
10
- <div class="row-fluid">
11
- <div bindonce ng-class="{'span3':panel.field_list}" ng-if="panel.field_list">
52
+ <div class="table-container">
53
+ <div bindonce ng-class="{'table-sidebar':panel.field_list}" ng-if="panel.field_list">
12
54
  <div class="sidebar-nav">
55
+
13
56
  <strong>Fields <i class=" icon-chevron-sign-left pointer " ng-click="panel.field_list = !panel.field_list" bs-tooltip="'Hide field list'"></i></strong><p>
57
+
14
58
  <div class="small">
15
59
  <span class="link small" ng-click="panel.all_fields = true;" ng-if="fields.list.length" ng-class="{strong:panel.all_fields}">
16
60
  All ({{fields.list.length}})</span> /
17
61
  <span class="link small" ng-click="panel.all_fields = false;" ng-class="{strong:!panel.all_fields}">
18
62
  Current ({{current_fields.length || 0}})</span>
63
+ </div>
19
64
 
65
+ <div><input type="text" class="input-medium" placeholder="Type to filter..." ng-model="fieldFilter">
20
66
  </div>
21
- <div><input type="text" class="input-medium" placeholder="Type to filter..." ng-model="fieldFilter"></div>
67
+
22
68
  <div ng-show="panel.all_fields" class="small muted" style="margin-bottom:10px">
23
69
  <strong>Note</strong> These fields have been<br>
24
70
  extracted from your mapping.<br>
@@ -27,14 +73,14 @@
27
73
  </div>
28
74
 
29
75
  <ul class="unstyled" style="{{panel.overflow}}:{{panel.height || row.height}};overflow-y:auto;overflow-x:hidden;" ng-if="panel.all_fields">
30
- <li ng-style="panel.style" ng-repeat="field in fields.list|filter:fieldFilter|orderBy:identity">
76
+ <li class="table-fieldname" ng-style="panel.style" ng-repeat="field in fields.list|filter:fieldFilter|orderBy:identity">
31
77
  <i class="pointer" ng-class="{'icon-check': columns[field],'icon-check-empty': _.isUndefined(columns[field])}" ng-click="toggle_field(field)"></i>
32
78
  <a class="pointer" data-unique="1" bs-popover="'app/panels/table/micropanel.html'" data-placement="rightTop" ng-click="toggle_micropanel(field,true)" ng-class="{label: columns[field]}" bo-text="field"></a>
33
79
  </li>
34
80
  </ul>
35
81
 
36
82
  <ul class="unstyled" style="{{panel.overflow}}:{{panel.height || row.height}};overflow-y:auto;overflow-x:hidden;" ng-if="!panel.all_fields">
37
- <li ng-style="panel.style" ng-repeat="field in current_fields|filter:fieldFilter|orderBy:identity">
83
+ <li class="table-fieldname" ng-style="panel.style" ng-repeat="field in current_fields|filter:fieldFilter|orderBy:identity">
38
84
  <i class="pointer" ng-class="{'icon-check': columns[field],'icon-check-empty': _.isUndefined(columns[field])}" ng-click="toggle_field(field)"></i>
39
85
  <a class="pointer" data-unique="1" bs-popover="'app/panels/table/micropanel.html'" data-placement="rightTop" ng-click="toggle_micropanel(field,true)" ng-class="{label: columns[field]}" bo-text="field"></a>
40
86
  </li>
@@ -42,7 +88,8 @@
42
88
 
43
89
  </div>
44
90
  </div>
45
- <div style="{{panel.overflow}}:{{panel.height || row.height}};" ng-class="{'span9':panel.field_list,'span12':!panel.field_list}" class="table-doc-table">
91
+
92
+ <div style="{{panel.overflow}}:{{panel.height || row.height}};" ng-class="{'table-main':panel.field_list}" class="table-doc-table">
46
93
  <i class="pull-left icon-chevron-sign-right pointer" ng-click="panel.field_list = !panel.field_list" bs-tooltip="'Show field list'" ng-show="!panel.field_list"></i>
47
94
  <div class="row-fluid" ng-show="panel.paging">
48
95
  <div class="span1 offset1" style="text-align:right">
@@ -76,8 +123,8 @@
76
123
  <tr ng-click="toggle_details(event)" class="pointer">
77
124
  <td ng-if="panel.fields.length<1" bo-text="event._source|stringify|tableTruncate:panel.trimFactor:1"></td>
78
125
  <td ng-show="panel.fields.length>0" ng-repeat="field in panel.fields">
79
- <span ng-if="!panel.localTime || panel.timeField != field" bo-html="(event.kibana.highlight[field]||event.kibana._source[field]) |tableHighlight | tableTruncate:panel.trimFactor:panel.fields.length"></span>
80
- <span ng-if="panel.localTime && panel.timeField == field" bo-html="event.sort[1]|tableLocalTime:event"></span>
126
+ <span ng-if="!panel.localTime || panel.timeField != field" bo-html="(event.kibana.highlight[field]||event.kibana._source[field]) |tableHighlight | tableTruncate:panel.trimFactor:panel.fields.length" class="table-field-value"></span>
127
+ <span ng-if="panel.localTime && panel.timeField == field" bo-html="event.sort[1]|tableLocalTime:event" class="table-field-value"></span>
81
128
  </td>
82
129
  </tr>
83
130
  <tr ng-if="event.kibana.details">
@@ -89,24 +136,24 @@
89
136
  <a class="link" ng-class="{'strong':event.kibana.view == 'raw'}" ng-click="event.kibana.view = 'raw'">Raw</a>
90
137
  <i class="link pull-right icon-chevron-up" ng-click="toggle_details(event)"></i>
91
138
  </span>
92
- <table class='table table-bordered table-condensed' ng-switch-when="table">
139
+ <table class='table table-bordered table-condensed table-details' ng-switch-when="table">
93
140
  <thead>
94
- <th>Field</th>
95
- <th>Action</th>
96
- <th>Value</th>
141
+ <th class="table-details-field">Field</th>
142
+ <th class="table-details-action">Action</th>
143
+ <th class="table-details-value">Value</th>
97
144
  </thead>
98
145
  <tr ng-repeat="(key,value) in event.kibana._source track by $index" ng-class-odd="'odd'">
99
- <td bo-text="key"></td>
146
+ <td style="word-wrap:break-word" bo-text="key"></td>
100
147
  <td style="white-space:nowrap">
101
148
  <i class='icon-search pointer' ng-click="build_search(key,value)" bs-tooltip="'Add filter to match this value'"></i>
102
149
  <i class='icon-ban-circle pointer' ng-click="build_search(key,value,true)" bs-tooltip="'Add filter to NOT match this value'"></i>
103
150
  <i class="pointer icon-th" ng-click="toggle_field(key)" bs-tooltip="'Toggle table column'"></i>
104
151
  </td>
105
152
  <!-- At some point we need to create a more efficient way of applying the filter pipeline -->
106
- <td style="white-space:pre-wrap" bo-html="value|noXml|urlLink|stringify"></td>
153
+ <td style="white-space:pre-wrap;word-wrap:break-word" bo-html="value|noXml|urlLink|stringify"></td>
107
154
  </tr>
108
155
  </table>
109
- <pre style="white-space:pre-wrap" bo-html="without_kibana(event)|tableJson:2" ng-switch-when="json"></pre>
156
+ <pre style="white-space:pre-wrap;word-wrap:break-word" bo-html="without_kibana(event)|tableJson:2" ng-switch-when="json"></pre>
110
157
  <pre bo-html="without_kibana(event)|tableJson:1" ng-switch-when="raw"></pre>
111
158
  </td>
112
159
  </tr>