I am trying to have a dashboard coded in XML with JS included but I am not sure where the script tags go. When I run my dashboard its clear that the JS isnt being hit in the code. I want to have it all in one file and not two separate files if possible. my code is below.
<dashboard>
<label>Modal Demo</label>
<fieldset submitButton="false">
<!--
Create an input to store the drilldown value. It will be hidden using custom javascript when
the dashboard is loaded.
-->
<input type="text" token="sourcetype" searchWhenChanged="true"></input>
</fieldset>
<row>
<panel>
<table id="master">
<title>Master</title>
<searchString>index=_internal | stats count by sourcetype</searchString>
<earliestTime>-60m@m</earliestTime>
<latestTime>now</latestTime>
<!-- Set the type of of drilldown, since we will always consume the same field, use row-->
<option name="drilldown">row</option>
</table>
</panel>
</row>
<html>
<script >require([
'underscore',
'backbone',
'../app/dev_app/components/ModalView',
'splunkjs/mvc',
'splunkjs/mvc/searchmanager',
'splunkjs/mvc/simplexml/ready!'
], function(_, Backbone, ModalView, mvc, SearchManager) {
var master = mvc.Components.get("master");
var tokens = mvc.Components.getInstance("submitted");
var detailSearch = new SearchManager({
id: "detailSearch",
earliest_time: "-24h@h",
latest_time: "now",
preview: true,
cache: false,
search: "index=_internal sourcetype=$sourcetype$ | timechart count"
}, {tokens: true, tokenNamespace: "submitted"});
master.on("click", function(e) {
if(e.field === "sourcetype") {
e.preventDefault();
var _title = e.data['click.value'];
tokens.set('sourcetype', _title);
var modal = new ModalView({ title: _title, search: detailSearch });
modal.show();
}
});
});
define([
'underscore',
'backbone',
'jquery',
'splunkjs/mvc',
'splunkjs/mvc/searchmanager',
'splunkjs/mvc/simplexml/element/table'
], function(_, Backbone, $, mvc, SearchManager, TableElement) {
var modalTemplate = "<div id="pivotModal" class="modal">" +
"<div class="modal-header"><h3>Blah</h3></div>" +
"<div class="modal-body"></div>" +
"<div class="modal-footer"><button class="close">Close</button></div>" +
"</div>" +
"<div class="modal-backdrop"></div>";
var ModalView = Backbone.View.extend({
defaults: {
title: 'Not set'
},
initialize: function(options) {
this.options = options;
this.options = _.extend({}, this.defaults, this.options);
this.childViews = [];
console.log('Hello from the modal window: ', this.options.title);
this.template = _.template(modalTemplate);
},
events: {
'click .close': 'close',
'click .modal-backdrop': 'close'
},
render: function() {
var data = { title : this.options.title }
this.$el.html(this.template(data));
return this;
},
show: function() {
$(document.body).append(this.render().el);
$(this.el).find('.modal-body').append('<div id="modalVizualization"/>');
$(this.el).find('.modal').css({
width:'90%',
height:'auto',
left: '5%',
'margin-left': '0',
'max-height':'100%'
});
var search = mvc.Components.get(this.options.search.id);
var detailTable = new TableElement({
id: "detailTable",
managerid: search.name,
pageSize: "5",
el: $('#modalVizualization')
}).render();
this.childViews.push(detailTable);
search.startSearch();
},
close: function() {
this.unbind();
this.remove();
_.each(this.childViews, function(childView) {
childView.unbind();
childView.remove();
});
}
});
return ModalView;
});</script></html>
</dashboard>
... View more