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>
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>
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>