with help of @vnravikumar I created one button next to edit button in dashboard similar to export button which contains links of other dashboards. for more detail please refer-https://answers.splunk.com/answers/819635/create-button-similar-to-export-button-in-dashboar.html
Now my requirement is I need to create one lookup which contains two columns like source and destination where source will contains all dashboard names and destination will contains those dashboards names whose links to be provided on source dashboards under new button . to make relationship between dashboard in lookup so whenever lookup dashboard column change accordingly it should update those dashboards url under newly created button.
Note- If there is any other better way that are also welcome.
thanks,
Hi @ips_mandar
Please check this sample and let me know.
[updated]
<dashboard script="button.js" theme="dark">
<label>Menu</label>
<row id="temp">
<panel>
<html>
<div class="dropdown-menu export-menu shared-poptart" id="newmenu" style="display: none; top: 0px; left: 83%; margin-left: -189px; bottom: auto;">
<div class="arrow" style="margin-left: 40px;"/>
<ul id="rk">
</ul>
</div>
</html>
</panel>
</row>
<row>
<panel>
<table>
<title>$form.selected_agent$</title>
<search>
<query>index=_internal|stats count by sourcetype</query>
<earliest>-15m</earliest>
<latest>now</latest>
<sampleRatio>1</sampleRatio>
</search>
<option name="count">20</option>
<option name="dataOverlayMode">none</option>
<option name="drilldown">none</option>
<option name="percentagesRow">false</option>
<option name="rowNumbers">false</option>
<option name="totalsRow">false</option>
<option name="wrap">true</option>
</table>
</panel>
</row>
</dashboard>
javascript:
require([
"jquery",
"splunkjs/mvc",
"splunkjs/mvc/simplexml/ready!"], function($, mvc) {
var SearchManager = require("splunkjs/mvc/searchmanager");
var searchString = '| inputlookup dashboard.csv';
new SearchManager({
id: "dashboardSearch",
search: searchString,
cache: false
});
var mainSearch = splunkjs.mvc.Components.get("dashboardSearch");
var myResults = mainSearch.data("results");
myResults.on("data", function() {
resultArray = myResults.data().rows;
resultArray.forEach(myFunction);
function myFunction(item, index) {
url = " <li><a target='_blank' href="+ '"'+resultArray[index][0]+'"'+">"+resultArray[index][1]+"</a></li>"
$("#rk").append(url);
}
});
$( "#newmenu" ).parent().attr('style','background-color: #31373e');
var temp='<a class="btn" href="#" id="newbtn" >New Button <span class="caret"></span></a>'
$("div[data-view='views/dashboard/header/EditMenu']").prepend(temp);
$("#newbtn").click(function() {
var div = document.getElementById('newmenu');
if (div.style.display !== 'none') {
div.style.display = 'none';
}
else {
div.style.display = 'block';
}
});
$(document).mouseup(function (e){
var container = $("#newmenu");
if (!container.is(e.target) && container.has(e.target).length === 0){
container.fadeOut();
}
});
});
lookup: dashboard.csv
Source,Destination
Integrity Check of Installed Files,/app/search/integrity_check_of_installed_files
Orphaned Scheduled Searches,/app/search/orphaned_scheduled_searches
Hi @ips_mandar
Please check this sample and let me know.
[updated]
<dashboard script="button.js" theme="dark">
<label>Menu</label>
<row id="temp">
<panel>
<html>
<div class="dropdown-menu export-menu shared-poptart" id="newmenu" style="display: none; top: 0px; left: 83%; margin-left: -189px; bottom: auto;">
<div class="arrow" style="margin-left: 40px;"/>
<ul id="rk">
</ul>
</div>
</html>
</panel>
</row>
<row>
<panel>
<table>
<title>$form.selected_agent$</title>
<search>
<query>index=_internal|stats count by sourcetype</query>
<earliest>-15m</earliest>
<latest>now</latest>
<sampleRatio>1</sampleRatio>
</search>
<option name="count">20</option>
<option name="dataOverlayMode">none</option>
<option name="drilldown">none</option>
<option name="percentagesRow">false</option>
<option name="rowNumbers">false</option>
<option name="totalsRow">false</option>
<option name="wrap">true</option>
</table>
</panel>
</row>
</dashboard>
javascript:
require([
"jquery",
"splunkjs/mvc",
"splunkjs/mvc/simplexml/ready!"], function($, mvc) {
var SearchManager = require("splunkjs/mvc/searchmanager");
var searchString = '| inputlookup dashboard.csv';
new SearchManager({
id: "dashboardSearch",
search: searchString,
cache: false
});
var mainSearch = splunkjs.mvc.Components.get("dashboardSearch");
var myResults = mainSearch.data("results");
myResults.on("data", function() {
resultArray = myResults.data().rows;
resultArray.forEach(myFunction);
function myFunction(item, index) {
url = " <li><a target='_blank' href="+ '"'+resultArray[index][0]+'"'+">"+resultArray[index][1]+"</a></li>"
$("#rk").append(url);
}
});
$( "#newmenu" ).parent().attr('style','background-color: #31373e');
var temp='<a class="btn" href="#" id="newbtn" >New Button <span class="caret"></span></a>'
$("div[data-view='views/dashboard/header/EditMenu']").prepend(temp);
$("#newbtn").click(function() {
var div = document.getElementById('newmenu');
if (div.style.display !== 'none') {
div.style.display = 'none';
}
else {
div.style.display = 'block';
}
});
$(document).mouseup(function (e){
var container = $("#newmenu");
if (!container.is(e.target) && container.has(e.target).length === 0){
container.fadeOut();
}
});
});
lookup: dashboard.csv
Source,Destination
Integrity Check of Installed Files,/app/search/integrity_check_of_installed_files
Orphaned Scheduled Searches,/app/search/orphaned_scheduled_searches
Thanks for solution @vnravikumar .
But may be I haven't explain lookup part clearly. In lookup source means the which dashboard should have destination links. In above example I created dashboard name menu and my lookup looks like below-
Source |Destination
/app/search/menu | /app/search/integrity_check_of_installed_files
/app/search/menu | /app/search/orphaned_scheduled_searches
/app/search/integrity_check_of_installed_files| /app/search/menu
so as per lookup file for dashboard name menu I want to show links for dashboard integrity_check_of_installed_files and orphaned_scheduled_searches. while for dashboard name integrity_check_of_installed_files I want to show link of menu dashboard only.
so basically lookup acts as master file from which I can control which links of dashboard to show in which dashboard.
If required we can add name columns to lookup to specify dashboard names.
thanks.
Hi @ips_mandar
Please check the below code, based on the source match I'm displaying the corresponding destination in menu
Dashboard:
<dashboard script="button.js" theme="dark">
<label>Menu</label>
<search>
<query>| makeresults
| eval path ="/app/"."$env:app$"."/$env:page$"</query>
<done>
<set token="path">$result.path$</set>
</done>
</search>
<row >
<panel>
<html>
<div class="dropdown-menu export-menu shared-poptart" id="newmenu" style="display: none; top: 0px; left: 83%; margin-left: -189px; bottom: auto;">
<div class="arrow" style="margin-left: 40px;"/>
<ul id="rk">
</ul>
</div>
</html>
</panel>
</row>
</dashboard>
Js:
require([
"jquery",
"splunkjs/mvc",
"splunkjs/mvc/simplexml/ready!"], function($, mvc) {
var SearchManager = require("splunkjs/mvc/searchmanager");
var searchString = '| inputlookup dashboard.csv |where Source="$path$"';
new SearchManager({
id: "dashboardSearch",
search: searchString,
cache: false
}, {tokens: true});
var mainSearch = splunkjs.mvc.Components.get("dashboardSearch");
var myResults = mainSearch.data("results");
myResults.on("data", function() {
resultArray = myResults.data().rows;
resultArray.forEach(myFunction);
function myFunction(item, index) {
url = " <li><a target='_blank' href="+ '"'+resultArray[index][0]+'"'+">"+resultArray[index][0]+"</a></li>"
$("#rk").append(url);
}
});
$( "#newmenu" ).parent().attr('style','background-color: #31373e');
var temp='<a class="btn" href="#" id="newbtn" >New Button <span class="caret"></span></a>'
$("div[data-view='views/dashboard/header/EditMenu']").prepend(temp);
$("#newbtn").click(function() {
var div = document.getElementById('newmenu');
if (div.style.display !== 'none') {
div.style.display = 'none';
}
else {
div.style.display = 'block';
}
});
$(document).mouseup(function (e){
var container = $("#newmenu");
if (!container.is(e.target) && container.has(e.target).length === 0){
container.fadeOut();
}
});
});
lookup:
Source,Destination
/app/search/button_new,/app/search/integrity_check_of_installed_files
/app/search/button_new,/app/search/orphaned_scheduled_searches
Here my current dashboard is /app/search/button_new
Thank you so much @vnravikumar This is what I was expecting and now testing all scenarios.
one question If I want to include -?form.time_range.earliest=$form.time_range.earliest$&form.time_range.latest=$form.time_range.latest
in all my url then how can I modify href in js to take these token after dashboard url.
thanks.
Hey sorry i couldn't get your requirement. Can you explain in detail?
so basically from lookup destination column my url become for ex. /app/search/integrity_check_of_installed_files
now I want at end of url to include token and these tokens are common for all dashboard so my url will become-
/app/search/integrity_check_of_installed_files?form.time_range.earliest=$form.time_range.earliest$&form.time_range.latest=$form.time_range.latest$
so I want to include few fixed tokens at end of all url using js.
thanks.
Hi
Check this and let me know
<form script="button.js" theme="dark">
<label>Menu</label>
<search>
<query>| makeresults
| eval path ="/app/"."$env:app$"."/$env:page$"</query>
<done>
<set token="path">$result.path$</set>
</done>
</search>
<fieldset submitButton="false">
<input type="time" token="time">
<label></label>
<default>
<earliest>1588291200</earliest>
<latest>1588809600</latest>
</default>
</input>
</fieldset>
<row>
<panel>
<html>
<div class="dropdown-menu export-menu shared-poptart" id="newmenu" style="display: none; top: -80px; left: 83%; margin-left: -189px; bottom: auto;">
<div class="arrow" style="margin-left: 40px;"/>
<ul id="rk">
</ul>
</div>
</html>
</panel>
</row>
</form>
js:
require([
"jquery",
"splunkjs/mvc",
"splunkjs/mvc/simplexml/ready!"], function($, mvc) {
var SearchManager = require("splunkjs/mvc/searchmanager");
var searchString = '| inputlookup dashboard.csv |where Source="$path$"';
new SearchManager({
id: "dashboardSearch",
search: searchString,
cache: false
}, {tokens: true});
var mainSearch = splunkjs.mvc.Components.get("dashboardSearch");
var myResults = mainSearch.data("results");
myResults.on("data", function() {
var defaultTokenModel = splunkjs.mvc.Components.get("default");
var earliest = defaultTokenModel.get("form.time.earliest");
var latest = defaultTokenModel.get("form.time.latest");
resultArray = myResults.data().rows;
resultArray.forEach(myFunction);
function myFunction(item, index) {
url = " <li><a target='_blank' href="+ '"'+resultArray[index][0]+"?form.time_range.earliest="+earliest+"&form.time_range.latest="+latest +'"'+">"+resultArray[index][0]+"</a></li>"
$("#rk").append(url);
}
});
$( "#newmenu" ).parent().attr('style','background-color: #31373e');
var temp='<a class="btn" href="#" id="newbtn" >New Button <span class="caret"></span></a>'
$("div[data-view='views/dashboard/header/EditMenu']").prepend(temp);
$("#newbtn").click(function() {
var div = document.getElementById('newmenu');
if (div.style.display !== 'none') {
div.style.display = 'none';
}
else {
div.style.display = 'block';
}
});
$(document).mouseup(function (e){
var container = $("#newmenu");
if (!container.is(e.target) && container.has(e.target).length === 0){
container.fadeOut();
}
});
});
@vnravikumar For above dashboard it is not updating token when input is changed .
for ex. above if I change time value it should update in url as well but it is not updating value.
thanks
Hi
Please check this
<form script="button.js" theme="dark">
<label>Menu</label>
<search>
<query>| makeresults
| eval path ="/app/"."$env:app$"."/$env:page$"</query>
<done>
<set token="path">$result.path$</set>
</done>
</search>
<fieldset submitButton="false">
<input type="time" token="time" id="time">
<label></label>
<default>
<earliest>1588291200</earliest>
<latest>1588809600</latest>
</default>
</input>
</fieldset>
<row>
<panel>
<html>
<div class="dropdown-menu export-menu shared-poptart" id="newmenu" style="display: none; top: -80px; left: 83%; margin-left: -189px; bottom: auto;">
<div class="arrow" style="margin-left: 40px;"/>
<ul id="rk">
</ul>
</div>
</html>
</panel>
</row>
</form>
js:
require([
"jquery",
"splunkjs/mvc",
"splunkjs/mvc/simplexml/ready!"], function($, mvc) {
var time = mvc.Components.get('time');
time.on('change', function() {
$("#rk").empty();
buildMenu();
});
var SearchManager = require("splunkjs/mvc/searchmanager");
var searchString = '| inputlookup dashboard.csv |where Source="$path$"';
new SearchManager({
id: "dashboardSearch",
search: searchString,
cache: false
}, {tokens: true});
buildMenu();
function buildMenu(){
var mainSearch = splunkjs.mvc.Components.get("dashboardSearch");
var myResults = mainSearch.data("results");
myResults.on("data", function() {
var defaultTokenModel = splunkjs.mvc.Components.get("default");
var earliest = defaultTokenModel.get("form.time.earliest");
var latest = defaultTokenModel.get("form.time.latest");
resultArray = myResults.data().rows;
resultArray.forEach(myFunction);
function myFunction(item, index) {
url = " <li><a target='_blank' href="+ '"'+resultArray[index][0]+"?form.time_range.earliest="+earliest+"&form.time_range.latest="+latest +'"'+">"+resultArray[index][0]+"</a></li>"
$("#rk").append(url);
console.log(url);
}
});
}
$( "#newmenu" ).parent().attr('style','background-color: #31373e');
var temp='<a class="btn" href="#" id="newbtn" >New Button <span class="caret"></span></a>'
$("div[data-view='views/dashboard/header/EditMenu']").prepend(temp);
$("#newbtn").click(function() {
var div = document.getElementById('newmenu');
if (div.style.display !== 'none') {
div.style.display = 'none';
}
else {
div.style.display = 'block';
}
});
$(document).mouseup(function (e){
var container = $("#newmenu");
if (!container.is(e.target) && container.has(e.target).length === 0){
container.fadeOut();
}
});
});
Thank you @vnravikumar .It is working now. I was trying to remove dependency of xml code for new button feature for which I included below working code in js to avoid |makeresults
query in xml to set path token.
var envTokenModel = mvc.Components.get('env');
var test="/app/"+envTokenModel.get('app')+"/"+envTokenModel.get('page');
var tok = mvc.Components.get("default");
tok.set("path ",test);
Now remaining is below code in xml which I want to convert into js-
<row>
<panel>
<html>
<div class="dropdown-menu export-menu shared-poptart" id="newmenu" style="display: none; top: -80px; left: 83%; margin-left: -189px; bottom: auto;">
<div class="arrow" style="margin-left: 40px;"/>
<ul id="rk">
</ul>
</div>
</html>
</panel>
</row>
Now I want above xml code to be replaced in js. The reason behind it is I want all code to add new button feature in js only so that by simply referring js code I am able to add new button feature in multiple dashboards.
Thanks.
Hi @ips_mandar
Please check the modified code and ensure to have `
</html>
</panel>
</row>` in your dashboard to add menu
<form script="button.js" theme="dark">
<label>Menu</label>
<fieldset submitButton="false">
<input type="time" token="time" id="time">
<label></label>
<default>
<earliest>1588291200</earliest>
<latest>1588809600</latest>
</default>
</input>
</fieldset>
<row>
<panel>
<html id="menu">
</html>
</panel>
</row>
</form>
require([
"jquery",
"splunkjs/mvc",
"splunkjs/mvc/simplexml/ready!"], function($, mvc) {
var menu_div='<html><div class="dropdown-menu export-menu shared-poptart" id="newmenu" style="display: none; top: -80px; left: 83%; margin-left: -189px; bottom: auto;">'+
'<div class="arrow" style="margin-left: 40px;"/><ul id="rk"></ul> </div></html>';
$("#menu").append(menu_div);
var envTokenModel = mvc.Components.get('env');
var path="/app/"+envTokenModel.get('app')+"/"+envTokenModel.get('page');
var time = mvc.Components.get('time');
time.on('change', function() {
$("#rk").empty();
buildMenu();
});
var SearchManager = require("splunkjs/mvc/searchmanager");
var searchString = "| inputlookup dashboard.csv |where Source="+'"'+path+'"';
console.log(searchString);
new SearchManager({
id: "dashboardSearch",
search: searchString,
cache: false
}, {tokens: true});
buildMenu();
function buildMenu(){
var mainSearch = splunkjs.mvc.Components.get("dashboardSearch");
var myResults = mainSearch.data("results");
myResults.on("data", function() {
var defaultTokenModel = splunkjs.mvc.Components.get("default");
var earliest = defaultTokenModel.get("form.time.earliest");
var latest = defaultTokenModel.get("form.time.latest");
resultArray = myResults.data().rows;
resultArray.forEach(myFunction);
function myFunction(item, index) {
url = " <li><a target='_blank' href="+ '"'+resultArray[index][0]+"?form.time_range.earliest="+earliest+"&form.time_range.latest="+latest +'"'+">"+resultArray[index][0]+"</a></li>"
$("#rk").append(url);
console.log(url);
}
});
}
$( "#newmenu" ).parent().attr('style','background-color: #31373e');
var temp='<a class="btn" href="#" id="newbtn" >New Button <span class="caret"></span></a>'
$("div[data-view='views/dashboard/header/EditMenu']").prepend(temp);
$("#newbtn").click(function() {
var div = document.getElementById('newmenu');
if (div.style.display !== 'none') {
div.style.display = 'none';
}
else {
div.style.display = 'block';
}
});
$(document).mouseup(function (e){
var container = $("#newmenu");
if (!container.is(e.target) && container.has(e.target).length === 0){
container.fadeOut();
}
});
});
@vnravikumar when I add |where Source="+'"'+path+'"';
in js it is not working.
else everything working fine.
What error are you getting in the console?
sorry I missed double quotes var searchString = "
I didn't notice it as earlier it was single quotes.
Perfect! Thank you so much @vnravikumar for your time and patience for resolving issue 🙂
Welcome 🙂
Splunkers, any idea how can I achieve this please?
Basically I have for ex. one dashboard with name dashboard1 and I have lookup file like below-
source | destination
dashboard1 | dashboard2
dashboard1 | dashboard3
dashboard1 | dashboard4
so as per lookup I want to show dashboard2,dashboard3,dashboard4 links in one button for dashboard1.
below html panel I am using
<panel>
<html>
<div class="dropdown-menu export-menu shared-poptart open" id="newmenu" style="display: none; top: -95px; left: 83%; margin-left: -189px; bottom: auto;">
<div class="arrow" style="margin-left: 40px;"/>
<ul class="first-group">
<li>
<a href="/app/search/dashboard2?form.selected_agent=$form.selected_agent$" class="">Option1</a>
</li>
<li>
<a href="/app/search/dashboard3?form.selected_agent=$form.selected_agent$" " class="">Option2</a>
</li>
<li>
<a href="/app/search/dashboard4?form.selected_agent=$form.selected_agent$" " class="">Option3</a>
</li>
</ul>
</div>
</html>
</panel>
and below js-
require([
"jquery",
"splunkjs/mvc",
"splunkjs/mvc/simplexml/ready!"], function($, mvc) {
$( "#newmenu" ).parent().attr('style','background-color: #3c444d');
var temp='<a class="btn" href="#" id="newbtn" >New Button <span class="caret"></span></a>'
$("div[data-view='views/dashboard/header/EditMenu']").prepend(temp);
$("#newbtn").click(function() {
var div = document.getElementById('newmenu');
if (div.style.display !== 'none') {
div.style.display = 'none';
}
else {
div.style.display = 'block';
}
});
$(document).mouseup(function (e){
var container = $("#newmenu");
if (!container.is(e.target) && container.has(e.target).length === 0){
container.fadeOut();
}
});
});
Now I want the links to be dynamically get updated as per lookup file.
can any one guide me?
Thanks,