How can I display the html in a field as separate ...

rrovers · ‎05-31-2023

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?

rrovers · ‎06-13-2023

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); 
  });
 });

kamlesh_vaghela · ‎06-01-2023

@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.

rrovers · ‎06-12-2023

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:

Network Map Two |-- Device 1: 10.100.100.4 |-- Device 2: 10.100.100.250 |-- Device 3: 10.100.3.42 (Mode: MASTER)

I expect something like:

Network map 2

Device 1:...

Device 2:...

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

kamlesh_vaghela · ‎06-13-2023

@rrovers

Can you please share your Sample XML and JS?

KV

kamlesh_vaghela · ‎06-14-2023

@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.

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

dashboard

javascript

table

New in Observability - Improvements to Custom Metrics SLOs, Log Observer Connect & ...

Improve Data Pipelines Using Splunk Data Management

3-2-1 Go! How Fast Can You Debug Microservices with Observability Cloud?