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!

Enterprise Security Content Update (ESCU) | New Releases

In September, the Splunk Threat Research Team had two releases of new security content via the Enterprise ...

New in Observability - Improvements to Custom Metrics SLOs, Log Observer Connect & ...

The latest enhancements to the Splunk observability portfolio deliver improved SLO management accuracy, better ...

Improve Data Pipelines Using Splunk Data Management

  Register Now   This Tech Talk will explore the pipeline management offerings Edge Processor and Ingest ...