Dashboards & Visualizations

How can I display the html in a field as separate fields?

rrovers
Communicator

With https://community.splunk.com/t5/Dashboards-Visualizations/Render-HTML-code-from-search-result-in-Spl... I managed to display the (html) content in 1 field in readable format.

This solution works fine for 1 field at a time (logically,  because it's using a token). I want to display all the fields in a dashboard in that format. I can't find out how to do that. 

Besides that it's hard to find usefull information to use javascript in combination with splunk but maybe that's because I'm relatively new in using javascript and probably using the wrong keywords. Anyone some suggestions?

 

Labels (3)
0 Karma

rrovers
Communicator

Hi @kamlesh_vaghela, It's based on your example:

dashboard: 

 

<dashboard version="1.1" script="convert_to_html.js">
  <label>HTML from SPL</label>
  <search>
    <query>
      | makeresults 
      | eval data="&lt;b&gt;Network Map One &lt;/b&gt;&lt;br&gt;&lt;/br&gt;|-- Device 1: 10.100.100.4&lt;br&gt;&lt;/br&gt;|-- Device 2: 10.100.100.250&lt;br&gt;&lt;/br&gt;|-- Device 3: 10.100.3.42 (Mode: MASTER)&lt;br&gt;&lt;/br&gt;"
      , data1="&lt;b&gt;Network Map Two&lt;/b&gt;&lt;br&gt;&lt;/br&gt;|-- Device 1: 10.100.100.4&lt;br&gt;&lt;/br&gt;|-- Device 2: 10.100.100.250&lt;br&gt;&lt;/br&gt;|-- Device 3: 10.100.3.42 (Mode: MASTER)&lt;br&gt;&lt;/br&gt;"
    </query>
    <earliest>-24h@h</earliest>
    <latest>now</latest>
    <sampleRatio>1</sampleRatio>
    <done>
      <set token="tokHTML">$result.data1$</set>
    </done>
  </search>
  <row>
    <panel>
      <html>
        <div id="htmlPanelWithToken">
          $tokHTML$
        </div>
      </html>
    </panel>
  </row>
</dashboard>

 

jscript:

 

require([ 
'jquery',
 'splunkjs/mvc', 
 'splunkjs/mvc/simplexml/ready!' 
 ],
 function ($, mvc,) 
 { var mySearch = mvc.Components.get("mySearch");
 var mySearchResults = mySearch.data("results");
  mySearchResults.on("data", function () {
   resultArray = mySearchResults.data().rows; var generateHTMLContent = "";
   $("#htmlPanelWithToken").html(generateHTMLContent);
   // Iterate Result set 
   $.each(resultArray, function (index, value) 
    //{  console.log(index, value)
     console.log(index, value[0]) 
     console.log(index, value[1])
      console.log(index, value[2]) 
     //Create proper HTML content from result
      generateHTMLContent = "<table><tr><td>" + value[1] + "</td><td>" + value[2] + "</td></tr></table>"; 
    // value[1] = data field
    // value[2] = data1 field 
    console.log(generateHTMLContent);
     })
     $("#htmlPanelWithToken").html(generateHTMLContent); 
  });
 });
 
 
 

 

0 Karma

kamlesh_vaghela
SplunkTrust
SplunkTrust

@rrovers 

You can use Javascript to achieve your requirement. I'm sharing the extended javascript code to you so can start.

<dashboard script="convert_to_html.js">
  <label>HTML from SPL</label>
  <search id="mySearch">
    <done>
      <set token="tokHTML">$result.data$</set>
    </done>
    <query>| makeresults | eval data="&lt;b&gt;Network Map One &lt;/b&gt;&lt;br&gt;&lt;/br&gt;|-- Device 1: 10.100.100.4&lt;br&gt;&lt;/br&gt;|-- Device 2: 10.100.100.250&lt;br&gt;&lt;/br&gt;|-- Device 3: 10.100.3.42 (Mode: MASTER)&lt;br&gt;&lt;/br&gt;", data1="&lt;b&gt;Network Map Two&lt;/b&gt;&lt;br&gt;&lt;/br&gt;|-- Device 1: 10.100.100.4&lt;br&gt;&lt;/br&gt;|-- Device 2: 10.100.100.250&lt;br&gt;&lt;/br&gt;|-- Device 3: 10.100.3.42 (Mode: MASTER)&lt;br&gt;&lt;/br&gt;"</query>
    <earliest>-24h@h</earliest>
    <latest>now</latest>
    <sampleRatio>1</sampleRatio>
  </search>
  <row>
    <panel>
      <html>
        <div id="htmlPanelWithToken">
        </div>
      </html>
    </panel>
  </row>
</dashboard>

 

convert_to_html.js

 

require([
    'jquery',
    'splunkjs/mvc',
    'splunkjs/mvc/simplexml/ready!'
], function ($, mvc,) {
    var mySearch = mvc.Components.get("mySearch");
    var mySearchResults = mySearch.data("results");
    mySearchResults.on("data", function () {
        resultArray = mySearchResults.data().rows;
        var generateHTMLContent = "";
        $("#htmlPanelWithToken").html(generateHTMLContent);
        //Iterate Result set
        $.each(resultArray, function (index, value) {
            // console.log(index, value)
            console.log(index, value[0])
            console.log(index, value[1])
            console.log(index, value[2])

            // Create proper HTML content from result
            generateHTMLContent = "<table><tr><td>" + value[1] + "</td><td>" + value[2] + "</td></tr></table>";
            //value[1] = data field
            //value[2] = data1 field

            console.log(generateHTMLContent);
        })
        $("#htmlPanelWithToken").html(generateHTMLContent);
    });
});

 

I hope this will help you.

In case you required further help then please share more about your requirement with sample data and expected output.

 

Thanks
KV
If any of my replies help you to solve the problem Or gain knowledge, an upvote would be appreciated.

 

 

0 Karma

rrovers
Communicator

Hi @kamlesh_vaghela,

Thanks for your answer. I copied the source to a dashboard, added the token:

<div id="htmlPanelWithToken">
     $tokHTML$
</div>

and loaded the javascript but the result is not as I expected, namely:

<b>Network Map Two</b><br></br>|-- Device 1: 10.100.100.4<br></br>|-- Device 2: 10.100.100.250<br></br>|-- Device 3: 10.100.3.42 (Mode: MASTER)<br></br>

 

I expect something like:

Network map 2

 

Device 1:...

Device 2:...

Is there something wrong in the code or are my expecations not right?

 

 

 

 

 

0 Karma

kamlesh_vaghela
SplunkTrust
SplunkTrust

@rrovers 

Can you please share your Sample XML and JS?

KV

0 Karma

kamlesh_vaghela
SplunkTrust
SplunkTrust

@rrovers 

As per your code you need to remove below code from Search tag.

<done>
      <set token="tokHTML">$result.data1$</set>
</done>

 

Remove `$tokHTML$` from

<div id="htmlPanelWithToken">
    $tokHTML$
</div>

 

Check this comment and try to mimic and replicate in your code.

https://community.splunk.com/t5/Dashboards-Visualizations/How-can-I-display-the-html-in-a-field-as-s...

 

Note:  As you are working with JS you need to follow some development practices.

Your javascript should be at $SPLUNK_HOME/etc/apps/<app_name>/appserver/static/ directory. 

After updating a javascript file that is already being used in Dashboard, reload the code through a bump on the search head by visiting this page:


https://my.search.head/en-US/_bump and click on the bump button.

I hope this will help you.

Thanks
KV
If any of my replies help you to solve the problem Or gain knowledge, an upvote would be appreciated.

 

 

Get Updates on the Splunk Community!

Mission Control | Explore the latest release of Splunk Mission Control (2.3)

We’re happy to announce the release of Mission Control 2.3 which includes several new and exciting features ...

Cloud Platform | Migrating your Splunk Cloud deployment to Python 3.7

Python 2.7, the last release of Python 2, reached End of Life back on January 1, 2020. As part of our larger ...

Splunk Observability Cloud | Enhancing Your Onboarding Experience with the ...

We understand that your initial experience with getting data into Splunk Observability Cloud is crucial as it ...