Dashboards & Visualizations

Insert html formated result in dashboard

mclane1
Path Finder

Hello, 

I want to explain clearly to others people what to do by use case.

I create a lookup  myLookup.csv :

Label, URL, Purposes, Actions
useCase1,myUrl1, purpose of the useCase1,"Do that and that and click on <a href=""link1"" target=""_blank"">link1</a>"
useCase2,myUrl2, purpose of the useCase2,"Do that and that and click on <a href=""link2"" target=""_blank"">link2</a>"
useCase3,myUrl3, purpose of the useCase3,"Do that and that and click on <a href=""link3"" target=""_blank"">link3</a>"

 

It's an exemple, in my case, I have some action more difficult.

My dashboard :

 

 

 

 

<form>
  <label>MyLabel</label>
  <row>
    <panel>
      <table>
        <title>Select one line</title>
        <search>
          <query>|inputlookup myLookup | table Label, URL, Purposes, Actions</query>
          <earliest>-15m</earliest>
          <latest>now</latest>
        </search>
        <option name="wrap">true</option>
        <option name="rowNumbers">false</option>
        <option name="drilldown">cell</option>
        <option name="dataOverlayMode">none</option>
        <option name="count">20</option>
        <drilldown>
          <set token="actions">$row.Actions$</set>
        </drilldown>
        <fields>["Label","URL","Purposes"]</fields>
      </table>
    </panel>
  </row>
  <row>
    <panel id="header_red">
      <title>My formated content</title>
      <html>
        <body>$actions$</body>
      </html>
    </panel>
  </row>
</form>

 

 

 

 

Result :

Do that and that and click on <a href=""link1"" target=""_blank"">link1</a>

😫

Labels (3)
Tags (1)
0 Karma
1 Solution

mclane1
Path Finder

After some research we can add js by splunk.

It works, thank you.

<form script="convert_html_token1_to_divId_html_panel_with_token1.js">
  <label>TEST_HTML</label>
  <row>
    <panel>
      <table>
        <title>Select one line</title>
        <search>
          <query>|inputlookup muLookup | table Label, URL, Purposes, Actions</query>
          <earliest>-15m</earliest>
          <latest>now</latest>
        </search>
        <option name="wrap">true</option>
        <option name="rowNumbers">false</option>
        <option name="drilldown">cell</option>
        <option name="dataOverlayMode">none</option>
        <option name="count">20</option>
        <drilldown>
          <set token="actions">$row.Actions$</set>
          <set token="html_token1">$row.Actions$</set>
        </drilldown>
        <fields>["Label","URL","Purposes"]</fields>
      </table>
    </panel>
  </row>
  <row>
    <panel>
      <title>My formated content</title>
      <html>
        <body>$actions$
          <br/>to<br/>
          <div id="html_panel_with_token1"></div>
        </body>
      </html>
    </panel>
    <panel>
      <title>Javascript</title>
      <html>
        <iframe src="https://mySplunk/en-US/static/app/myApp/convert_html_token1_to_divId_html_panel_with_token1.js" height="200" width="1000" style="border:none;"></iframe>
      </html>
    </panel>
  </row>
</form>

 

Add file JS in : App->manage app->Find you App and "Edit Properties"->Upload asset

convert_html_token1_to_divId_html_panel_with_token1.js

require([
    'jquery',
    'splunkjs/mvc',
    'splunkjs/mvc/simplexml/ready!'
], function($, mvc,) {
    var submittedTokens = mvc.Components.get('submitted');
    // Listen for a change to the token html_token1 value
    submittedTokens.on("change:html_token1", function(model, html_token1, options) {
        var tokHTMLJS=submittedTokens.get("html_token1");
        if (tokHTMLJS!==undefined)
        {
            $("#html_panel_with_token1").html(tokHTMLJS);
        }
    });
});

You can see result in  https://mySplunk/en-US/static/app/myApp/convert_html_token1_to_divId_html_panel_with_token1.js

View solution in original post

0 Karma

mclane1
Path Finder

After some research we can add js by splunk.

It works, thank you.

<form script="convert_html_token1_to_divId_html_panel_with_token1.js">
  <label>TEST_HTML</label>
  <row>
    <panel>
      <table>
        <title>Select one line</title>
        <search>
          <query>|inputlookup muLookup | table Label, URL, Purposes, Actions</query>
          <earliest>-15m</earliest>
          <latest>now</latest>
        </search>
        <option name="wrap">true</option>
        <option name="rowNumbers">false</option>
        <option name="drilldown">cell</option>
        <option name="dataOverlayMode">none</option>
        <option name="count">20</option>
        <drilldown>
          <set token="actions">$row.Actions$</set>
          <set token="html_token1">$row.Actions$</set>
        </drilldown>
        <fields>["Label","URL","Purposes"]</fields>
      </table>
    </panel>
  </row>
  <row>
    <panel>
      <title>My formated content</title>
      <html>
        <body>$actions$
          <br/>to<br/>
          <div id="html_panel_with_token1"></div>
        </body>
      </html>
    </panel>
    <panel>
      <title>Javascript</title>
      <html>
        <iframe src="https://mySplunk/en-US/static/app/myApp/convert_html_token1_to_divId_html_panel_with_token1.js" height="200" width="1000" style="border:none;"></iframe>
      </html>
    </panel>
  </row>
</form>

 

Add file JS in : App->manage app->Find you App and "Edit Properties"->Upload asset

convert_html_token1_to_divId_html_panel_with_token1.js

require([
    'jquery',
    'splunkjs/mvc',
    'splunkjs/mvc/simplexml/ready!'
], function($, mvc,) {
    var submittedTokens = mvc.Components.get('submitted');
    // Listen for a change to the token html_token1 value
    submittedTokens.on("change:html_token1", function(model, html_token1, options) {
        var tokHTMLJS=submittedTokens.get("html_token1");
        if (tokHTMLJS!==undefined)
        {
            $("#html_panel_with_token1").html(tokHTMLJS);
        }
    });
});

You can see result in  https://mySplunk/en-US/static/app/myApp/convert_html_token1_to_divId_html_panel_with_token1.js

0 Karma

mclane1
Path Finder

Thank you very much for your quick answer.

Splunk is deployed in a production environment (unix) and requires root rights to be able to browse / edit / create files. Despite our a lot of attempts to change the rights, with each modification in the application (addition/update of a dashboard or other), the rights go back to root. It is therefore always complicated to ask a systems engineer to perform the manipulation with the ITIL standards that go with it.

Create Dashboard : less than 1 hour

Create a js file on splunk without the application : 3 days (we must ask to a lot of people and explain what we do many times)

https://en.wikipedia.org/wiki/ITIL

 

Tags (2)
0 Karma
Get Updates on the Splunk Community!

Webinar Recap | Revolutionizing IT Operations: The Transformative Power of AI and ML ...

The Transformative Power of AI and ML in Enhancing Observability   In the realm of IT operations, the ...

.conf24 | Registration Open!

Hello, hello! I come bearing good news: Registration for .conf24 is now open!   conf is Splunk’s rad annual ...

ICYMI - Check out the latest releases of Splunk Edge Processor

Splunk is pleased to announce the latest enhancements to Splunk Edge Processor.  HEC Receiver authorization ...