Getting Data In

How to display multiple SplunkJS inputs on one line

spammenot66
Contributor

Is there a way to display multiple splunkjs one one line?

Here's my js code:

    require([
        "splunkjs/mvc",
        "splunkjs/mvc/searchmanager",
        "splunkjs/mvc/tableview",
        "splunkjs/mvc/dropdownview",
        "splunkjs/mvc/multidropdownview",
        "splunkjs/mvc/simplexml/ready!"
    ], function(
        mvc,
        SearchManager,
        TableView,
        DropdownView, 
        MultiDropdownView 
    ) {

        // Create the search manager and views
        var mainSearch = new SearchManager({
            id: "mysearch",
            search: "index=_internal | head 5",
            data: mvc.tokenSafe("$datamod$"),
            status_buckets: 300,
            preview: true,
            cache: false
        });

        var table1 = new TableView({
            id:"table",
            managerid: "mysearch",
            el: $("#mytable")
        }).render();

        var mydropdown = new DropdownView({
            id: "selData",
            showClearButton: false,
            value: mvc.tokenSafe("$datamod$"),
            el: $("#mydropdown")
        }).render();

        // Set the dropdown list choices
        var choices = [
            {label: "events",  value: "events" },
            {label: "preview", value: "preview"},
            {label: "results", value: "results"},
            {label: "summary", value: "summary"}
        ];
        mydropdown.settings.set("choices", choices);

        // Display the type of selected results model in the console
        var myChoice = "results";
        mydropdown.on("change", function(){
            myChoice = mydropdown.settings.get("value");
            var myResults = mainSearch.data(myChoice);
            myResults.on("data", function() {
                console.log("Type: ", myChoice);
                console.log("Has data? ", myResults.hasData());
                console.log("Data (rows): ", myResults.data().rows);
                console.log("Backbone collection: (rows) ", myResults.collection().raw.rows);
            });
        });

        var mymultiselect = new MultiDropdownView({
                id: "example-multidropdown",
                managerid: "example-search",
                vakye: mvc.tokenSafe("$datams$"),
                default: "main",
                labelField: "index",
                valueField: "index",
                el: $("#mymultidropdownview")
            }).render();

       var mymultiselect_search = new SearchManager({
                id: "example-search",

                search: "| eventcount summarize=false index=* index=_* | dedup index | fields index" 
            });


    });

Here's my Simple XML

    <dashboard script="splunkresultsmodelv2.js">
      <label>SplunkResultsModelv2</label>
      <row>
        <panel>
          <title>$datamod$ $datams$</title>
          <html>
            <h2>
              <a href="https://docs.splunk.com/DocumentationStatic/WebFramework/1.4/compref_splunkresultsmodel.html">SplunkResultsModel</a>
            </h2>
            <span id="mymultidropdownview"/>
            <span id="mydropdown"/>
            <div id="mytable"/>

         <!-- <div>dropdown:$datamod$</div><div>          multiselect:$example-multidropdown$</div>-->


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

screenshot

0 Karma
1 Solution

spammenot66
Contributor

easy solution would be handle it in the css. float:left for the form input and clear:left for the table

<dashboard script="splunkresultsmodelv2.js">
  <label>SplunkResultsModelv2</label>
  <row>
    <panel>
      <title>$datamod$ $datams$</title>
      <html>
        <h2>
          <a href="https://docs.splunk.com/DocumentationStatic/WebFramework/1.4/compref_splunkresultsmodel.html">SplunkResultsModel</a>
        </h2>
        <div style="float: left" id="mymultidropdownview"/>
        <span style="float: left" id="mydropdown"/>
        <div  style="clear: left" id="mytable"/>

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

View solution in original post

0 Karma

spammenot66
Contributor

easy solution would be handle it in the css. float:left for the form input and clear:left for the table

<dashboard script="splunkresultsmodelv2.js">
  <label>SplunkResultsModelv2</label>
  <row>
    <panel>
      <title>$datamod$ $datams$</title>
      <html>
        <h2>
          <a href="https://docs.splunk.com/DocumentationStatic/WebFramework/1.4/compref_splunkresultsmodel.html">SplunkResultsModel</a>
        </h2>
        <div style="float: left" id="mymultidropdownview"/>
        <span style="float: left" id="mydropdown"/>
        <div  style="clear: left" id="mytable"/>

      </html>
    </panel>
  </row>
</dashboard>
0 Karma
Get Updates on the Splunk Community!

Security Professional: Sharpen Your Defenses with These .conf25 Sessions

Sooooooooooo, guess what. .conf25 is almost here, and if you're on the Security Learning Path, this is your ...

First Steps with Splunk SOAR

Our first step was to gather a list of the playbooks we wanted and to sort them by priority.  Once this list ...

How To Build a Self-Service Observability Practice with Splunk Observability Cloud

If you’ve read our previous post on self-service observability, you already know what it is and why it ...