Dashboards & Visualizations

Pretty Format a JSON field in Dashboard

rangarbus
Path Finder

I have a json in a field which i like to show on the dashboard as pretty formatted rather single line string. Is there an option in Splunk dashboard to do this?

Currently i have the below

 

{"A":"NAME", "B":"AGE"}

 

In dashboard one of the column value will be this json which i like to render as 

 

{
 "A": "NAME",
 "B": "AGE"
}

 

 

Labels (2)
0 Karma
1 Solution

kamlesh_vaghela
SplunkTrust
SplunkTrust

@rangarbus 

Can you please try this?

<form script="a.js">
  <label>JSON in Column</label>
  <row>
    <panel>
      <table id="tbl_1">
        <search>
          <query>| makeresults | eval data="{\"A\":\"NAME\", \"B\":\"AGE\"}"</query>
          <earliest>-24h@h</earliest>
          <latest>now</latest>
        </search>
        <option name="drilldown">none</option>
      </table>
    </panel>
  </row>
</form>

 

a.js

require([
    'underscore',
    'jquery',
    'splunkjs/mvc',
    'splunkjs/mvc/tableview',
    'splunkjs/mvc/simplexml/ready!'
], function(_, $, mvc, TableView) {
    var CustomRangeRenderer = TableView.BaseCellRenderer.extend({
        canRender: function(cell) {
            return _(['data']).contains(cell.field);
        },
        render: function($td, cell) {
            var value = JSON.stringify(JSON.parse(cell.value), undefined, 2);
            $td.html("<div><pre>" + value + "</pre></div>")
        }
    });
    var sh = mvc.Components.get("tbl_1");
    if (typeof(sh) != "undefined") {
        sh.getVisualization(function(tableView) {
            // Add custom cell renderer and force re-render
            tableView.table.addCellRenderer(new CustomRangeRenderer());
            tableView.table.render();
        });
    }
});

Output:

Screenshot 2021-07-27 at 1.02.21 PM.png

Thanks
KV
▄︻̷̿┻̿═━一   ?

If any of my reply helps you to solve the problem Or gain knowledge, an upvote would be appreciated.

View solution in original post

rangarbus
Path Finder

Thanks KV. Where should i place this a.js file in Splunk?

0 Karma

rangarbus
Path Finder

I was able to make this work by placing the js on

$SPLUNK_HOME/etc/apps/search/appserver/static 

Thank you

https://docs.splunk.com/Documentation/Splunk/8.2.1/AdvancedDev/UseCSS

0 Karma

kamlesh_vaghela
SplunkTrust
SplunkTrust

@rangarbus 

Can you please try this?

<form script="a.js">
  <label>JSON in Column</label>
  <row>
    <panel>
      <table id="tbl_1">
        <search>
          <query>| makeresults | eval data="{\"A\":\"NAME\", \"B\":\"AGE\"}"</query>
          <earliest>-24h@h</earliest>
          <latest>now</latest>
        </search>
        <option name="drilldown">none</option>
      </table>
    </panel>
  </row>
</form>

 

a.js

require([
    'underscore',
    'jquery',
    'splunkjs/mvc',
    'splunkjs/mvc/tableview',
    'splunkjs/mvc/simplexml/ready!'
], function(_, $, mvc, TableView) {
    var CustomRangeRenderer = TableView.BaseCellRenderer.extend({
        canRender: function(cell) {
            return _(['data']).contains(cell.field);
        },
        render: function($td, cell) {
            var value = JSON.stringify(JSON.parse(cell.value), undefined, 2);
            $td.html("<div><pre>" + value + "</pre></div>")
        }
    });
    var sh = mvc.Components.get("tbl_1");
    if (typeof(sh) != "undefined") {
        sh.getVisualization(function(tableView) {
            // Add custom cell renderer and force re-render
            tableView.table.addCellRenderer(new CustomRangeRenderer());
            tableView.table.render();
        });
    }
});

Output:

Screenshot 2021-07-27 at 1.02.21 PM.png

Thanks
KV
▄︻̷̿┻̿═━一   ?

If any of my reply helps you to solve the problem Or gain knowledge, an upvote would be appreciated.

Get Updates on the Splunk Community!

Observe and Secure All Apps with Splunk

  Join Us for Our Next Tech Talk: Observe and Secure All Apps with SplunkAs organizations continue to innovate ...

Splunk Decoded: Business Transactions vs Business IQ

It’s the morning of Black Friday, and your e-commerce site is handling 10x normal traffic. Orders are flowing, ...

Fastest way to demo Observability

I’ve been having a lot of fun learning about Kubernetes and Observability. I set myself an interesting ...