Dashboards & Visualizations

Is it possible to add panel inside a html tag?

Jhanzkie
Path Finder

Hello, sorry to ask this very noob question.

Can i add panel inside a html tag?
For example.
I have a table command in html and in that cell i want to add a single panel .

Labels (2)
0 Karma
1 Solution

kamlesh_vaghela
SplunkTrust
SplunkTrust

@Jhanzkie 

You can achieve this with the Javascript Extension. Please try below sample code. I hope sample code will give some idea about the implementations. 

 

a.js

require([
    'underscore',
    'jquery',
    'splunkjs/mvc',
    'splunkjs/mvc/simplexml/ready!'
], function(_, $, mvc) {

    var SingleView = require("splunkjs/mvc/singleview");
    var TableView = require("splunkjs/mvc/tableview");
    var SearchManager = require("splunkjs/mvc/searchmanager");

    var sampleSearch = new SearchManager({
        id: "sampleSearch",
        earliest_time: "-1d@d",
        latest_time: "",
        preview: true,
        autostart: false,
        cache: false,
        search: 'index=_internal | stats count'
    });
    $(document).ready(function() {
        var mySingleView = new SingleView({
            id: "example-single" + Date.now(),
            managerid: "sampleSearch",
            el: $("#divSingleView")
        }).render();
        var myCustomtable = new TableView({
            id: "modal_example-table" + Date.now(),
            managerid: "sampleSearch",
            pageSize: "10",
            el: $("#divTableView")
        }).render();
        sampleSearch.startSearch();
    })
});

 

XML.

<dashboard script="a.js">
<label>Single View in HTML Example</label>
<row>
  <panel>
    <html>
      <div>Hello World</div>
      <table border="1" style="width:800px" >
        <thead>
          <td>
            Single View
          </td>
          <td>
            Table View
          </td>
        </thead>
        <tr>
          <td>
            <div id="divSingleView"></div>
          </td>
          <td>
            <div id="divTableView"></div>
          </td>
        </tr>
      </table>
    </html>
  </panel>
</row>
</dashboard>

 

Screen:

Screenshot 2022-02-15 at 11.38.29 AM.png

 

Thanks

 KV

View solution in original post

kamlesh_vaghela
SplunkTrust
SplunkTrust

@Jhanzkie 

You can achieve this with the Javascript Extension. Please try below sample code. I hope sample code will give some idea about the implementations. 

 

a.js

require([
    'underscore',
    'jquery',
    'splunkjs/mvc',
    'splunkjs/mvc/simplexml/ready!'
], function(_, $, mvc) {

    var SingleView = require("splunkjs/mvc/singleview");
    var TableView = require("splunkjs/mvc/tableview");
    var SearchManager = require("splunkjs/mvc/searchmanager");

    var sampleSearch = new SearchManager({
        id: "sampleSearch",
        earliest_time: "-1d@d",
        latest_time: "",
        preview: true,
        autostart: false,
        cache: false,
        search: 'index=_internal | stats count'
    });
    $(document).ready(function() {
        var mySingleView = new SingleView({
            id: "example-single" + Date.now(),
            managerid: "sampleSearch",
            el: $("#divSingleView")
        }).render();
        var myCustomtable = new TableView({
            id: "modal_example-table" + Date.now(),
            managerid: "sampleSearch",
            pageSize: "10",
            el: $("#divTableView")
        }).render();
        sampleSearch.startSearch();
    })
});

 

XML.

<dashboard script="a.js">
<label>Single View in HTML Example</label>
<row>
  <panel>
    <html>
      <div>Hello World</div>
      <table border="1" style="width:800px" >
        <thead>
          <td>
            Single View
          </td>
          <td>
            Table View
          </td>
        </thead>
        <tr>
          <td>
            <div id="divSingleView"></div>
          </td>
          <td>
            <div id="divTableView"></div>
          </td>
        </tr>
      </table>
    </html>
  </panel>
</row>
</dashboard>

 

Screen:

Screenshot 2022-02-15 at 11.38.29 AM.png

 

Thanks

 KV

Jhanzkie
Path Finder

ill try this one, thanks

0 Karma

Jhanzkie
Path Finder

may i also add if i can have a layout like this in my dashboard ?

Jhanzkie_0-1645095376881.png

for column 2,
3 panels  .. 

just asking if its possible though.

Tags (1)
0 Karma

kamlesh_vaghela
SplunkTrust
SplunkTrust

Yes @Jhanzkie , With JS & Css you can add any Splunk Chart OR Component.. 

First Design a HTML container and then use JS for populating those container with Splunk Chart Or Components. 


Happy Splunking 

KV 

🙂 

Jhanzkie
Path Finder

thank you very much for the help 😄

ITWhisperer
SplunkTrust
SplunkTrust

Panel is not a valid tag within html syntax, so no this is not possible as you describe it. What are you trying to do? Perhaps there is another way.

0 Karma
Get Updates on the Splunk Community!

Index This | I am a number, but when you add ‘G’ to me, I go away. What number am I?

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

What’s New in Splunk App for PCI Compliance 5.3.1?

The Splunk App for PCI Compliance allows customers to extend the power of their existing Splunk solution with ...

Extending Observability Content to Splunk Cloud

Register to join us !   In this Extending Observability Content to Splunk Cloud Tech Talk, you'll see how to ...