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!

CX Day is Coming!

Customer Experience (CX) Day is on October 7th!! We're so excited to bring back another day full of wonderful ...

Strengthen Your Future: A Look Back at Splunk 10 Innovations and .conf25 Highlights!

The Big One: Splunk 10 is Here!  The moment many of you have been waiting for has arrived! We are thrilled to ...

Now Offering the AI Assistant Usage Dashboard in Cloud Monitoring Console

Today, we’re excited to announce the release of a brand new AI assistant usage dashboard in Cloud Monitoring ...