I am trying to use the idea in the below link to make a pop-up window in my dashboard.
reference link : https://www.hurricanelabs.com/splunk-tutorials/splunk-custom-modal-view-creation-part-1-revealing-a-path-toward-enhanced-visibility-and-functionality
But unfortunately, for even a simple xml dashboard, I am not able to get the pop-up at all (I am not even sure if the javascript is loading)
Below are the codes...
Simple xml dashboard :
<dashboard script="app.js">
<label>Modal Demo</label>
<row>
<panel>
<table id="master">
<title>Master</title>
<search>
<query>index=_internal | stats count by sourcetype</query>
<earliest>-60m@m</earliest>
<latest>now</latest>
</search>
<option name="drilldown">row</option>
</table>
</panel>
app.js : (placed inside $SPLUNK_HOME$/apps/retail/appserver/static)
require.config({
paths: {
ModalView: '../app/retail/ModalView'
}
});
require([
'underscore',
'backbone',
'splunkjs/mvc',
'splunkjs/mvc/tableview',
'ModalView',
'splunkjs/mvc/simplexml/ready!'
], function(_, Backbone, mvc, ModalView) {
//get an instance of the master table
var master = mvc.Components.get('master');
master.on("click", function(e) {
e.preventDefault();
if (e.field === "sourcetype") {
e.preventDefault();
//pass the value of the item we clicked on to the title variable
var _title = e.data['click.value'];
var modal = new ModalView({ title : _title });
modal.show();
}
});
});
ModalView.js (placed inside $SPLUNK_HOME$/apps/retail/appserver/static/components )
define([
'underscore',
'backbone',
'jquery',
'splunkjs/mvc/searchmanager'
], function(_, Backbone, $, SearchManager) {
var modalTemplate = "" +
"<div class=\"modal-header\"><h3><%- title %></h3><button class=\"close\">Close</button></div>" +
"<div class=\"modal-body\"></div>" +
"<div class=\"modal-footer\"></div>" +
"</div>" +
"<div class=\"modal-backdrop\"></div>";
var ModalView = Backbone.View.extend({
defaults: {
/*default values if none are given i.e the modal’s title*/
title: 'Not Set'
},
initialize: function(options) {
/* Where initial values passed in to an instance
of this view will be handled */
//the options parameter allows us to pass values to our view
this.options = options;
//this checks for values in the default object or if a title was
//actually passed through the options parameter
this.options = _.extend({}, this.defaults, this.options);
this.template = _.template(modalTemplate);
//for testing purposes we will log out the title
console.log('Hello from Modal View: ' + this.options.title);
},
events: {
/* events such as the click of a button */
},
render: function() {
/* renders the view */
/* Define the data object where we specifically set
the title value here it is what we pass into the new instance of
the this view in app.js
*/
var data = { title : this.options.title }
//take our data object and pass it to our template
this.$el.html(this.template(data));
return this;
},
show: function() {
/* actually shows the modal window*/
//append the modal to the document.body and call this view’s
//render function
$(document.body).append(this.render().el);
},
close: function() {
/* handles the closing of the modal window */
this.unbind();
this.remove();
}
});
//return the modal in order to access it
return ModalView;
});
Can somebody please help me in this regard..??
... View more