So , seems like you need your own Search View where you can drilldown from various dashboards and may be open as a standalone Search in your App (with your custom CSS Style).
Here is a different approach without iFrame. This will create a new Search View with search query passed as form variable, through hidden text box input (for demo there is a default value, in your implementation you can change the default search which will be overridden by drilldown search query). Please try out and confirm.
Following is the code adapted from Search Control Example using Simple XML JS Extension on Splunk Dev site: http://dev.splunk.com/view/webframework-codeexamples/SP-CAAAE5E
<form script="searchcontrolsevents.js" hideAppBar="false" hideSplunkBar="true" hideFooter="true" hideTitle="true" hideEdit="true">
<label>Splunk Search View</label>
<fieldset submitButton="false"></fieldset>
<row>
<panel>
<input depends="$alwaysHiddenInput$" type="text" token="tokSearchQuery" searchWhenChanged="true">
<label></label>
<default>index="_internal" sourcetype="splunkd" log_level!="INFO" | head 200</default>
</input>
<html>
<div>
<div class="main-area">
<p style="text-align:center;font-weight:bold;font-size:250%;color:blue;">Custom Splunk Search Screen</p>
<div id="mysearchbar1"/>
<div id="mysearchcontrols1"/>
<div id="mytimeline1"/>
<div id="mytable1"/>
</div>
</div>
</html>
</panel>
</row>
</form>
Following is the JavaScript code for searchcontrolsevents.js which creates various UI elements using SplunkJS Stack:
require([
"splunkjs/mvc",
"splunkjs/mvc/searchmanager",
"splunkjs/mvc/searchbarview",
"splunkjs/mvc/searchcontrolsview",
"splunkjs/mvc/timelineview",
"splunkjs/mvc/tableview",
"splunkjs/mvc/simplexml/ready!"
], function(
mvc,
SearchManager,
SearchbarView,
SearchControlsView,
TimelineView,
TableView
) {
// Get the token from form variable to pass on drilldown search query to SearchManager for the SearchbarView
var submittedTokenManager = mvc.Components.get("default");
var tokSearchQuery=submittedTokenManager.get("tokSearchQuery");
// Create the search manager
var mysearch = new SearchManager({
id: "search1",
app: "search",
preview: true,
cache: true,
status_buckets: 300,
latest_time: "now",
earliest_time: "-24h",
required_field_list: "*",
search: tokSearchQuery
});
// Create the views
var mytimeline = new TimelineView ({
id: "timeline1",
managerid: "search1",
el: $("#mytimeline1")
}).render();
var mysearchbar = new SearchbarView ({
id: "searchbar1",
managerid: "search1",
timerange_earliest_time: "-24h",
timerange_latest_time: "now",
el: $("#mysearchbar1")
}).render();
var mysearchcontrols = new SearchControlsView ({
id: "searchcontrols1",
managerid: "search1",
el: $("#mysearchcontrols1")
}).render();
var mytable = new TableView ({
id: "table1",
managerid: "search1",
el: $("#mytable1")
}).render();
// When the timeline changes, update the search manager
mytimeline.on("change", function() {
mysearch.settings.set(mytimeline.val());
});
// When the query in the searchbar changes, update the search manager
mysearchbar.on("change", function() {
mysearch.settings.unset("search");
mysearch.settings.set("search", mysearchbar.val());
});
// When the timerange in the searchbar changes, update the search manager
mysearchbar.timerange.on("change", function() {
mysearch.settings.set(mysearchbar.timerange.val());
});
});
So , seems like you need your own Search View where you can drilldown from various dashboards and may be open as a standalone Search in your App (with your custom CSS Style).
Here is a different approach without iFrame. This will create a new Search View with search query passed as form variable, through hidden text box input (for demo there is a default value, in your implementation you can change the default search which will be overridden by drilldown search query). Please try out and confirm.
Following is the code adapted from Search Control Example using Simple XML JS Extension on Splunk Dev site: http://dev.splunk.com/view/webframework-codeexamples/SP-CAAAE5E
<form script="searchcontrolsevents.js" hideAppBar="false" hideSplunkBar="true" hideFooter="true" hideTitle="true" hideEdit="true">
<label>Splunk Search View</label>
<fieldset submitButton="false"></fieldset>
<row>
<panel>
<input depends="$alwaysHiddenInput$" type="text" token="tokSearchQuery" searchWhenChanged="true">
<label></label>
<default>index="_internal" sourcetype="splunkd" log_level!="INFO" | head 200</default>
</input>
<html>
<div>
<div class="main-area">
<p style="text-align:center;font-weight:bold;font-size:250%;color:blue;">Custom Splunk Search Screen</p>
<div id="mysearchbar1"/>
<div id="mysearchcontrols1"/>
<div id="mytimeline1"/>
<div id="mytable1"/>
</div>
</div>
</html>
</panel>
</row>
</form>
Following is the JavaScript code for searchcontrolsevents.js which creates various UI elements using SplunkJS Stack:
require([
"splunkjs/mvc",
"splunkjs/mvc/searchmanager",
"splunkjs/mvc/searchbarview",
"splunkjs/mvc/searchcontrolsview",
"splunkjs/mvc/timelineview",
"splunkjs/mvc/tableview",
"splunkjs/mvc/simplexml/ready!"
], function(
mvc,
SearchManager,
SearchbarView,
SearchControlsView,
TimelineView,
TableView
) {
// Get the token from form variable to pass on drilldown search query to SearchManager for the SearchbarView
var submittedTokenManager = mvc.Components.get("default");
var tokSearchQuery=submittedTokenManager.get("tokSearchQuery");
// Create the search manager
var mysearch = new SearchManager({
id: "search1",
app: "search",
preview: true,
cache: true,
status_buckets: 300,
latest_time: "now",
earliest_time: "-24h",
required_field_list: "*",
search: tokSearchQuery
});
// Create the views
var mytimeline = new TimelineView ({
id: "timeline1",
managerid: "search1",
el: $("#mytimeline1")
}).render();
var mysearchbar = new SearchbarView ({
id: "searchbar1",
managerid: "search1",
timerange_earliest_time: "-24h",
timerange_latest_time: "now",
el: $("#mysearchbar1")
}).render();
var mysearchcontrols = new SearchControlsView ({
id: "searchcontrols1",
managerid: "search1",
el: $("#mysearchcontrols1")
}).render();
var mytable = new TableView ({
id: "table1",
managerid: "search1",
el: $("#mytable1")
}).render();
// When the timeline changes, update the search manager
mytimeline.on("change", function() {
mysearch.settings.set(mytimeline.val());
});
// When the query in the searchbar changes, update the search manager
mysearchbar.on("change", function() {
mysearch.settings.unset("search");
mysearch.settings.set("search", mysearchbar.val());
});
// When the timerange in the searchbar changes, update the search manager
mysearchbar.timerange.on("change", function() {
mysearch.settings.set(mysearchbar.timerange.val());
});
});
@kamlesh_vaghela, now this is a workaround with Splunk Search Page included within a dashboard as an <iframe>. Then you can apply JS on the dashboard to hide header and footer from iframe (since there will already be those present in the Parent dashboard). Finally, include your custom Splunk Application CSS in the dashboard for consistent App like feel. You can do something similar for Alerts and Reports pages (if required).
Following is the parent dashboard XML code to include search page as iframe (dont forget to replace with your Splunk URL and Your Splunk App Name for iframe src:
<dashboard script="jquery_hide_iframe_elements.js">
<label>Search Menu as iFrame with Splunk header and footer hidden</label>
<!-- Splunk Answers 586948 - -->
<row depends="$alwaysHideCSS$">
<panel>
<html>
<style>
#myframe .view---pages-enterprise---7-0-0---2Izs_,#myIFrame .view---pages-enterprise---7-0-0---3EGL7{
visibility: hidden !important;
}
</style>
</html>
</panel>
</row>
<row>
<panel>
<html>
<iframe id="myIframe" src="<YourSplunkURL>/en-US/app/<YourSplunkAppName>/search" height="600" width="100%" style="border:2;">
<p>Your browser does not support iframes.</p>
</iframe>
</html>
</panel>
</row>
</dashboard>
Following is JavaScript Code (jquery_hide_iframe_elements.js😞
require([
"splunkjs/mvc/simplexml/ready!"
], function() {
// Invoke jQuery once iframe loads
// iframe id="myIframe"
$("#myIframe").load( function() {
//Find head tag within iframe
$("#myIframe").contents().find("head")
// Add CSS Style to hide Splunk's default header and footer because the same will be available in parent window
.append($("<style> header,footer{display:none !important;} </style>"));
});
});
@niketnilay,
I'm sharing search page screenshot of my app;
http://splunkinstance/en-GB/app/myapp/search
I want to add css ( background image) in navigation bar.
It is achievable with dashboard.css, but only dashboards not search page.
https://drive.google.com/file/d/0BzldONE3RqyFZk1JOWNTckJsMkk/view?usp=sharing
