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!

Index This | I am a number, but when you add ‘G’ to me, I go away. What number am I?

March 2024 Edition Hayyy Splunk Education Enthusiasts and the Eternally Curious!  We’re back with another ...

What’s New in Splunk App for PCI Compliance 5.3.1?

The Splunk App for PCI Compliance allows customers to extend the power of their existing Splunk solution with ...

Extending Observability Content to Splunk Cloud

Register to join us !   In this Extending Observability Content to Splunk Cloud Tech Talk, you'll see how to ...