Skip to content

N
nexpie-grafana-theme
Commit db088f57 by Rashid Khan
Options

Added JSON and Raw views of events for #507 and #461

parent 8a142d91
Showing with 81 additions and 26 deletions
src/app/components/kbn.js
......@@ -90,8 +90,6 @@ function($, _) {
return a[1] - b[1];
}).reverse().slice(0,count);
console.log(hasArrays);
return {
counts: counts,
hasArrays : hasArrays
......
src/app/panels/table/module.html
......@@ -56,19 +56,25 @@
</thead>
<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-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>
<td ng-show="panel.fields.length>0" ng-repeat="field in panel.fields" ng-bind-html-unsafe="(event.kibana.highlight[field]||event.kibana._source[field]) |tableHighlight | tableTruncate:panel.trimFactor:panel.fields.length"></td>
</tr>
<tr ng-show="event.kibana.details">
<td colspan=1000>
<table class='table table-bordered table-condensed'>
<td colspan=10000 ng-switch="event.kibana.view">
<span>
View:
<a class="link" ng-class="{'strong':event.kibana.view == 'table'}" ng-click="event.kibana.view = 'table'">Table</a> /
<a class="link" ng-class="{'strong':event.kibana.view == 'json'}" ng-click="event.kibana.view = 'json'">JSON</a> /
<a class="link" ng-class="{'strong':event.kibana.view == 'raw'}" ng-click="event.kibana.view = 'raw'">Raw</a>
<i class="link pull-right icon-chevron-up" ng-click="toggle_details(event)"></i>
</span>
<table class='table table-bordered table-condensed' ng-switch-when="table">
<thead>
<th>Field</th>
<th>Action</th>
<th>Value</th>
</thead>
<tr ng-repeat="(key,value) in event.kibana.details._source" ng-class-odd="'odd'">
<tr ng-repeat="(key,value) in event.kibana._source" ng-class-odd="'odd'">
<td>{{key}}</td>
<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>
......@@ -79,6 +85,8 @@
<td style="white-space:pre-wrap" ng-bind-html-unsafe="value|noXml|urlLink|stringify"></td>
</tr>
</table>
<pre style="white-space:pre-wrap" ng-bind-html="without_kibana(event)|tableJson:2" ng-switch-when="json"></pre>
<pre ng-bind-html="without_kibana(event)|tableJson:1" ng-switch-when="raw"></pre>
</td>
</tr>
</tbody>
......
src/app/panels/table/module.js
......@@ -88,7 +88,7 @@ function (angular, app, _, kbn, moment) {
$scope.percent = kbn.to_percent;
$scope.toggle_micropanel = function(field,groups) {
var docs = _.pluck($scope.data,'_source');
var docs = _.map($scope.data,function(_d){return _d.kibana._source;});
var topFieldValues = kbn.top_field_values(docs,field,10,groups);
$scope.micropanel = {
field: field,
......@@ -131,8 +131,9 @@ function (angular, app, _, kbn, moment) {
};
$scope.toggle_details = function(row) {
row.kibana = row.kibana || {};
row.kibana.details = !row.kibana.details ? $scope.without_kibana(row) : false;
row.kibana.details = row.kibana.details ? false : true;
row.kibana.view = row.kibana.view || 'table';
//row.kibana.details = !row.kibana.details ? $scope.without_kibana(row) : false;
};
$scope.page = function(page) {
......@@ -220,21 +221,21 @@ function (angular, app, _, kbn, moment) {
// 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 {
_source : kbn.flatten_json(hit._source),
highlight : kbn.flatten_json(hit.highlight||{}),
_type : hit._type,
_index : hit._index,
_id : hit._id,
_sort : hit.sort
var _h = _.clone(hit);
//_h._source = kbn.flatten_json(hit._source);
//_h.highlight = kbn.flatten_json(hit.highlight||{});
_h.kibana = {
_source : kbn.flatten_json(hit._source),
highlight : kbn.flatten_json(hit.highlight||{})
};
return _h;
}));
$scope.hits += results.hits.total;
// Sort the data
$scope.data = _.sortBy($scope.data, function(v){
return v._sort[0];
return v.sort[0];
});
// Reverse if needed
......@@ -266,10 +267,9 @@ function (angular, app, _, kbn, moment) {
};
$scope.without_kibana = function (row) {
return {
_source : row._source,
highlight : row.highlight
};
var _c = _.clone(row);
delete _c.kibana;
return _c;
};
$scope.set_refresh = function (state) {
......@@ -283,6 +283,20 @@ function (angular, app, _, kbn, moment) {
$scope.refresh = false;
};
$scope.locate = function(obj, path) {
path = path.split('.');
var arrayPattern = /(.+)\[(\d+)\]/;
for (var i = 0; i < path.length; i++) {
var match = arrayPattern.exec(path[i]);
if (match) {
obj = obj[match[1]][parseInt(match[2],10)];
} else {
obj = obj[path[i]];
}
}
return obj;
};
});
......@@ -311,6 +325,36 @@ function (angular, app, _, kbn, moment) {
};
});
module.filter('tableJson', function() {
var json;
return function(text,prettyLevel) {
if (!_.isUndefined(text) && !_.isNull(text) && text.toString().length > 0) {
json = angular.toJson(text,prettyLevel > 0 ? true : false);
json = json.replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;');
if(prettyLevel > 1) {
/* jshint maxlen: false */
json = json.replace(/("(\\u[a-zA-Z0-9]{4}|\\[^u]|[^\\"])*"(\s*:)?|\b(true|false|null)\b|-?\d+(?:\.\d*)?(?:[eE][+\-]?\d+)?)/g, function (match) {
var cls = 'number';
if (/^"/.test(match)) {
if (/:$/.test(match)) {
cls = 'key strong';
} else {
cls = '';
}
} else if (/true|false/.test(match)) {
cls = 'boolean';
} else if (/null/.test(match)) {
cls = 'null';
}
return '<span class="' + cls + '">' + match + '</span>';
});
}
return json;
}
return '';
};
});
// WIP
module.filter('tableFieldFormat', function(fields){
return function(text,field,event,scope) {
......
src/css/bootstrap.dark.min.css
This source diff could not be displayed because it is too large. You can view the blob instead.
src/css/bootstrap.light.min.css
This source diff could not be displayed because it is too large. You can view the blob instead.
src/vendor/bootstrap/less/overrides.less
......@@ -41,7 +41,7 @@
}
.row-close {
color: #bbb;
color: #bbb;
position: absolute;
font-size: 9pt;
font-weight: 200;
......@@ -51,7 +51,7 @@
.row-open {
text-align: right;
color: #bbb;
color: #bbb;
margin-top:30px;
position: absolute;
font-size: 13pt;
......@@ -62,8 +62,8 @@
-webkit-transform-origin: 40px;
transform-origin: 40px;
transform: rotate(-90deg);
-webkit-transform: rotate(-90deg);
-moz-transform: rotate(-90deg);
-webkit-transform: rotate(-90deg);
-moz-transform: rotate(-90deg);
-ms-transform: rotate(-90deg);
}
......@@ -178,6 +178,11 @@
width: 75px;
}
.string {color:lighten(@textColor, 5%)}
.number {color:lighten(@infoText, 5%)}
.boolean {color:lighten(@warningText, 5%)}
.key {color:lighten(@errorText, 5%)}
.typeahead { z-index: 1051; }
.btn-active {
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment