Splunk Search
Highlighted

How to make a Splunk table visualization more interactive?

Explorer

Hi,

We are thinking of using Splunk to display data from many sources in a table view.

I searched a lot and didn't find anyone who converted a Splunk formal table to a nicer one based on HTML \ JavaScript extensions.

The only things I found were to highlight a row or to insert an icon in a row - I want to use Splunk table values, but to display them in a completely different custom table.

Anyone maybe know how it can be done?

Thanks,

Omer Rudik.

0 Karma
Highlighted

Re: How to make a Splunk table visualization more interactive?

Splunk Employee
Splunk Employee

Could you provide more details on what type of interactivity and Javascript extensions you have in mind?

0 Karma
Highlighted

Re: How to make a Splunk table visualization more interactive?

SplunkTrust
SplunkTrust

Have you looked at HTML dashboards?

0 Karma
Highlighted

Re: How to make a Splunk table visualization more interactive?

Explorer

I wish to take regular Splunk table like:
Table with columns: System name, Infrastructure status, UX status, influences from other systems and make it something like this:
alt text

0 Karma
Highlighted

Re: How to make a Splunk table visualization more interactive?

Champion

This is pretty straightforward: you can just fetch the search results from the search manager in javascript either as an array or as JSON and from there do whatever you like. The basics are this Simple XML:

<dashboard script="some_js.js">
  <search id="some_search">
  <query>index=foo | table field_a field_b</query>
  ...

And in your app_folder/appserver/static folder, you place a some_js.js with content such as this:

require([
    'splunkjs/mvc',
    'splunkjs/mvc/searchmanager',
    'splunkjs/mvc/simplexml/ready!',
    'splunkjs/ready!'
], function (mvc, SearchManager) {
    // Get the search manager
    var manager = mvc.Components.get("some_search");

    // Get the search results from the manager for JSON
    var data = manager.data("results", {
        output_mode: "json_rows"
    });

    // To get results as array, use:
    // var data = manager.data("results");

    var workWithResults = function(results) {
        // Make sure there is data on callback
        if (!data.hasData()) {
            return;
        }

        // Convert results to json
        var collection = results.collection().toJSON();

        // Do whatever needs to be done with your data:
        console.log(collection);
    };
    data.on("data", workWithResults);
});

That should get you going. From here on, you need to use whatever library/extension/tool you use for visualizations.

View solution in original post