@jimdiconectiv, as you would know that Splunk's EventViewerView is the only visualization element that can show pretty formatted jSON Data. You would have two options to pretty print format JSON. Both option require Simple XML JS Extention on top of Splunk JS Stack.
Option 1) Extend the CustomTableCellRenderer using JavaScript to handle pretty print formatting for column containing JSON Data. This would be time-consuming unless you have existing open source reusable JSON Data formatter using CSS and JS. There would still be time and effort required to plug in the CSS and JS files to Splunk.
Option 2) Create Table Row expansion to show EventViewer View with Raw JSON Data so that it is pretty print formatted.This is the option I will illustrate here as it can be coded in no time. It is based on Table Row Expansion example of Splunk Dashboard Examples App: https://splunkbase.splunk.com/app/1603/
Following are the steps used to create the dashboard:
Step 1) Add JSON Data (two sample events added below for reference). I have uploaded to index=main with sourcetype=_json in Splunk's default Search & Reporting App.
Step 2) Create a table showing jSON data. I have displayed only json nodes using | table header* requestCP*
Step 3) Give table an ID (i.e. id="expand_with_events" ) to be selected using SplunkJS mvc library function mvc.component.getInstance(expand_with_events)
Step 4) Create table_row_expansion_eventviewer_view.js file
a) Import tableview, eventviewer and searchmanager libraries (besides the other required libraries like mvc, underscore, simplexml/ready etc.).
b) Use table id expand_with_events to get the Table Element using SplunkJS mvc component function getInstance() based on id.
c) Call a Custom Table Row Expansion Render which creates a searchmanager and eventviewer in initialize section. PS: For setting up options for eventviewer refer to Splunk Web Framework documentation: http://docs.splunk.com/DocumentationStatic/WebFramework/1.1/compref_eventsviewer.html
d) Set the render() function to pick up a unique identifier from table row, in our case it is requestCP.ObjId. So that Event Viewer displays only one event on expanding the row.
e) Within render()function call the Search Manager created in initialize section to return raw event based on selected row ( requestCP.ObjId ).
Dashboard Code for reference:
<dashboard script="table_row_expansion_eventviewer_view.js">
<label>jSON Data Formatting</label>
<row>
<panel>
<table id="expand_with_events">
<search>
<query>index=main sourcetype="_json"
| table requestCP* header*</query>
<earliest>0</earliest>
<sampleRatio>1</sampleRatio>
</search>
<option name="count">20</option>
</table>
</panel>
</row>
</dashboard>
JavaScript File
table_row_expansion_eventviewer_view.js
code for reference:
require([
'splunkjs/mvc/tableview',
'splunkjs/mvc/eventsviewerview',
'splunkjs/mvc/searchmanager',
'splunkjs/mvc',
'underscore',
'splunkjs/mvc/simplexml/ready!'],function(
TableView,
EventView,
SearchManager,
mvc,
_
){
var EventSearchBasedRowExpansionRenderer = TableView.BaseRowExpansionRenderer.extend({
initialize: function(args) {
// initialize will run once, so we will set up a search and a chart to be reused.
this._searchManager = new SearchManager({
id: 'details-search-manager',
preview: false
});
this._eventView = new EventView({
managerid: 'details-search-manager',
'list.drilldown': 'full'
});
},
canRender: function(rowData) {
// Since more than one row expansion renderer can be registered we let each decide if they can handle that
// data
// Here we will always handle it.
return true;
},
render: function($container, rowData) {
// rowData contains information about the row that is expanded. We can see the cells, fields, and values
// We will find the requestCP.ObjId cell to use its value
var sourcetypeCell = _(rowData.cells).find(function (cell) {
return cell.field === 'requestCP.ObjId';
});
//update the search with the requestCP.ObjId that we are interested in
this._searchManager.set({ search: 'index=main sourcetype=_json requestCP.ObjId=' + sourcetypeCell.value});
// $container is the jquery object where we can put out content.
// In this case we will render our chart and add it to the $container
$container.append(this._eventView.render().el);
}
});
var tableElement = mvc.Components.getInstance("expand_with_events");
tableElement.getVisualization(function(tableView) {
// Add custom cell renderer, the table will re-render automatically.
tableView.addRowExpansionRenderer(new EventSearchBasedRowExpansionRenderer());
});
});
PS: I have used mocked data based on sample data provided in the question (following are the two JSON events data as displayed in the screenshot.)
Sample jSON Data for reference
Data 1
{ "header" : { "messageCategory" : "request", "messageType" : "MESSAGE_RESEND", "originationId" : "nightly-resend", "originationType" : "ADMIN", "receivedTs" : "2017-10-30T03:30:01.025Z" }, "requestCP" : { "ObjId" : 1770418, "targetList" : [ { "serviceId" : "cap5" } ] } }
Data 2
{ "header" : { "messageCategory" : "request", "messageType" : "MESSAGE_RESEND", "originationId" : "nightly-resend", "originationType" : "ADMIN", "receivedTs" : "2017-11-30T03:30:03.012Z" }, "requestCP" : { "ObjId" : 1770419, "targetList" : [ { "serviceId" : "cap5" } ] } }
PS: Since this example requires JavaScript. You may need to refresh/bump your Splunk instance for changes to reflect in your dashboard. May also required internet browser history cleanup.
This is not a run anywhere dashboard. So add the sample JSON Data (KV_MODE=json) and adjust your search accordingly.
If you just want Line Break for JSON Data in the table you can refer to @Ayn 's answer using CSS Style white-space:pre-line; option https://answers.splunk.com/answers/41691/add-newline-into-table-cell.html
Following is a run anywhere dashboard example for a table with id=table1, so that CSS Style override applies only to that table:
Simple XML Dashboard code (run anywhere query with mock data derived from the question):
<dashboard>
<label>JSON Data format</label>
<row>
<panel>
<html depends="$alwaysHideCSSStyle$">
<style>
#table1 td{
white-space:pre-line;
}
</style>
</html>
<table id="table1">
<search>
<query>| makeresults
| eval _raw="{
\"header\" : {
\"messageCategory\" : \"request\",
\"messageType\" : \"MESSAGE_RESEND\",
\"originationId\" : \"nightly-resend\",
\"originationType\" : \"ADMIN\",
\"receivedTs\" : \"2017-10-30T03:30:01.025Z\"
},
\"requestCP\" : {
\"ObjId\" : 1770418,
\"targetList\" : [ {
\"serviceId\" : \"cap5\"
} ]
}
}"
| spath</query>
<earliest>-24h@h</earliest>
<latest>now</latest>
<sampleRatio>1</sampleRatio>
</search>
<option name="drilldown">none</option>
<option name="refresh.display">progressbar</option>
</table>
</panel>
</row>
</dashboard>
PS: I have formatted your JSON in text-editor so that I can create a table with JSON data and run spath. However, if your objective is just to add new line characters the above CSS style override should still work for you. It is up to you whether you want to format JSON data or not.
