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!

Splunk Observability Cloud | Unified Identity - Now Available for Existing Splunk ...

Raise your hand if you’ve already forgotten your username or password when logging into an account. (We can’t ...

Index This | How many sides does a circle have?

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

Registration for Splunk University is Now Open!

Are you ready for an adventure in learning?   Brace yourselves because Splunk University is back, and it's ...