Splunk Search

How to show table result in one page/ table modification

mjlsnombrado
Communicator

Hi all,

I have a table with one column, in this example the column has too many results causing the table to have a next page (current). What I want to do is to show all the results in one page and change the how table visualization looks (to be).

Current:
| Value |
| Val1 |
| Val2 |
| Val3 |
| Val4 |
| Val5 |
| Val6 |
| Val7 |
| Val8 |
| Val9 |
<-Prev 1 2 Next ->

To be:
--------| Value |--------
| Val1 | Val2 | Val3 |
| Val4 | Val5 | Val6 |
| Val7 | Val8 | Val9 |

Is this possible? Thanks in advance

0 Karma
1 Solution

niketn
Legend

@mjlsnombrado here is a run anywhere example where all the values of component are first put as a multivalue field using values() stats function. Then they are converted to single value using nomv command. Since the field values may already have spaces, before nomv the spaces are replaced with pipe character (or any other character/s of your choice). This is done because nomv also adds spaces between all the multi-values. Using replace command the component field value is converted into html section i.e. <div>value</div>. Then Simple XML JS Extension with Splunk JS Stack is used to convert HTML token to HTML using jQuery function html(). CSS Style has been applied to <html> <panel> having token with html content in it using Simple XML CSS extension which is placed under <style> tag of the Simple XML code.

PS: This is only simple approach as an example. Other option would be to access the Search using SearchManager and when the search has data. Put it to <html> (basically take away the search and token from Simple XML to JS). I hope even example of this approach should be present on Splunk Answers. If you are interested in this approach and want help with an example let me know.

alt text

Following is the Simple XML code for run anywhere dashboard based on Splunk's _internal index:

<dashboard script="display_token_with_html_content.js">
  <label>Show Table Results in One Page</label>
  <search>
    <query>index=_internal sourcetype=splunkd
| eval component=replace(component," ","\|")
| stats values(component) as component
| nomv component
| eval component=replace(component,"\|"," ")
| eval component="<div>".replace(component," ","</div><div>")."</div>"</query>
    <earliest>-24h@h</earliest>
    <latest>now</latest>
    <sampleRatio>1</sampleRatio>
    <done>
      <set token="tokResultsInHTML">$result.component$</set>
    </done>
  </search>
  <row>
    <panel>
      <html>
        <style>
          #htmlTokenContainer{
            display:flex;
            flex-wrap:wrap;
          }
          #htmlTokenContainer div{
            width: 260px;
          }
        </style>
        $tokResultsInHTML$
      </html>
    </panel>
  </row>
  <row>
    <panel>
      <title>Format Data as desired output and show as html</title>
      <html>

          <div id="htmlTokenContainer">

          </div>
        </html>
    </panel>
  </row>
</dashboard>

Following is the corresponding JS file display_token_with_html_content.js

require([
    "jquery",
    "splunkjs/mvc",
    "splunkjs/mvc/simplexml/ready!"
], function (
    $,
    mvc
) {
        var defaultTokenModel = mvc.Components.get("default");
        defaultTokenModel.on("change:tokResultsInHTML", function (model, tokResultsInHTML, options) {
            if (tokResultsInHTML !== undefined) {
                $("#htmlTokenContainer").html(tokResultsInHTML);
            }
        });
    });
____________________________________________
| makeresults | eval message= "Happy Splunking!!!"

View solution in original post

niketn
Legend

@mjlsnombrado here is a run anywhere example where all the values of component are first put as a multivalue field using values() stats function. Then they are converted to single value using nomv command. Since the field values may already have spaces, before nomv the spaces are replaced with pipe character (or any other character/s of your choice). This is done because nomv also adds spaces between all the multi-values. Using replace command the component field value is converted into html section i.e. <div>value</div>. Then Simple XML JS Extension with Splunk JS Stack is used to convert HTML token to HTML using jQuery function html(). CSS Style has been applied to <html> <panel> having token with html content in it using Simple XML CSS extension which is placed under <style> tag of the Simple XML code.

PS: This is only simple approach as an example. Other option would be to access the Search using SearchManager and when the search has data. Put it to <html> (basically take away the search and token from Simple XML to JS). I hope even example of this approach should be present on Splunk Answers. If you are interested in this approach and want help with an example let me know.

alt text

Following is the Simple XML code for run anywhere dashboard based on Splunk's _internal index:

<dashboard script="display_token_with_html_content.js">
  <label>Show Table Results in One Page</label>
  <search>
    <query>index=_internal sourcetype=splunkd
| eval component=replace(component," ","\|")
| stats values(component) as component
| nomv component
| eval component=replace(component,"\|"," ")
| eval component="<div>".replace(component," ","</div><div>")."</div>"</query>
    <earliest>-24h@h</earliest>
    <latest>now</latest>
    <sampleRatio>1</sampleRatio>
    <done>
      <set token="tokResultsInHTML">$result.component$</set>
    </done>
  </search>
  <row>
    <panel>
      <html>
        <style>
          #htmlTokenContainer{
            display:flex;
            flex-wrap:wrap;
          }
          #htmlTokenContainer div{
            width: 260px;
          }
        </style>
        $tokResultsInHTML$
      </html>
    </panel>
  </row>
  <row>
    <panel>
      <title>Format Data as desired output and show as html</title>
      <html>

          <div id="htmlTokenContainer">

          </div>
        </html>
    </panel>
  </row>
</dashboard>

Following is the corresponding JS file display_token_with_html_content.js

require([
    "jquery",
    "splunkjs/mvc",
    "splunkjs/mvc/simplexml/ready!"
], function (
    $,
    mvc
) {
        var defaultTokenModel = mvc.Components.get("default");
        defaultTokenModel.on("change:tokResultsInHTML", function (model, tokResultsInHTML, options) {
            if (tokResultsInHTML !== undefined) {
                $("#htmlTokenContainer").html(tokResultsInHTML);
            }
        });
    });
____________________________________________
| makeresults | eval message= "Happy Splunking!!!"

Nadhiyaa
Path Finder

@niketnilay Hi... I am applying the same above code in one of my requirement. It works,

But I am using a dropdown menu to apply filter .when the selection changes, I want to display "waiting for data" while the current selection search results found. Problem is displaying the previous selected menu in the dropdown .

0 Karma

niketn
Legend

@Nadhiyaa is the token from dropdown added to search returning the token for building html table?
You can use comment macro to add dummy dependency with your dropdown token so that search query fires each time dropdown token changes. This will result in refreshing of html panel.

____________________________________________
| makeresults | eval message= "Happy Splunking!!!"
0 Karma

niketn
Legend

@mjlsnombrado, easiest way to do this would be to use transpose command to convert rows into columns. However, this will introduce a horizontal scroll bar and also there will be a limit to max numbers of rows that can be converted to columns. (PS: I am using transpose 0 to have max. rows to be converted to column).

Try the following run anywhere search.

index=_internal sourcetype=splunkd
| stats count by component
| fields - count
| transpose 0 column_name=component
| rename "row *" as "component*"

Other option would be to use Splunk JS to parse search results and populate in an html panel the way you want. It would require Simple XML JS Extension and Splunk JS Stack (possible Simple XML CSS Extension as well).

____________________________________________
| makeresults | eval message= "Happy Splunking!!!"

mjlsnombrado
Communicator

Thanks niketnilay for quick response I've already tried the transpose but does not produce the desired result, maybe I should go with the other option you've suggested.

0 Karma
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 ...