Hi, It would be really helpful if someone help me to resolve the below problem. We have wriitten a modal popup when click the any of the row in the table. It is working as expected but we are faci...
See more...
Hi, It would be really helpful if someone help me to resolve the below problem. We have wriitten a modal popup when click the any of the row in the table. It is working as expected but we are facing the below problem. if I trying to click the any row for the first it is working but when we are trying to click the same row second modal popup is not triggering. Below is the Javascript and XML:
Javascript :
require([
'underscore',
'jquery',
'splunkjs/mvc',
'splunkjs/mvc/tableview',
'splunkjs/mvc/chartview',
'splunkjs/mvc/simplexml/ready!'
], function (_, $, mvc, TableView, ChartView) {
var tokens = mvc.Components.get("default");
function displayChart(i, searchId, chartType) {
$('#modalPanel' + i).modal();
var epoch = (new Date).getTime();
var chartItem = new ChartView({
id: "chart" + epoch,
type: chartType,
drilldown: "none",
managerid: searchId,
el: $("#modalChart" + i)
})
chartItem.render();
}
function displayTable(i, searchId) {
$('#modalPanel' + i).modal();
var epoch = (new Date).getTime();
var tableItem = new TableView({
id: "table" + count,
pageSize: "10",
drilldown: "none",
managerid: searchId,
el: $("#modalChart" + i)
})
tableItem.render();
console.log(searchId);
}
function displayModal(i) {
var checkAreaChart = mvc.Components.get("modalAreaChartSearch" + i);
var checkBarChart = mvc.Components.get("modalBarChartSearch" + i);
var checkColumnChart = mvc.Components.get("modalColumnChartSearch" + i);
var checkLineChart = mvc.Components.get("modalLineChartSearch" + i);
var checkTableChart = mvc.Components.get("modalTableChartSearch" + i);
if (typeof (checkAreaChart) !== "undefined") {
displayChart(i, "modalAreaChartSearch" + i, "area");
} else if (typeof (checkBarChart) !== "undefined") {
displayChart(i, "modalBarChartSearch" + i, "bar");
} else if (typeof (checkColumnChart) !== "undefined") {
displayChart(i, "modalColumnChartSearch" + i, "column");
} else if (typeof (checkLineChart) !== "undefined") {
displayChart(i, "modalLineChartSearch" + i, "line");
} else if (typeof (checkTableChart) !== "undefined") {
displayTable(i, "modalTableChartSearch" + i);
} else {
//console.log("i:"+i);
displayTable(i, "modalSearch" + i);
//console.log("clicked");
}
console.log("click");
}
tokens.on("change:modalToken1", function (model, value, options) {
displayModal(1);
});
//tokens.off("change:modalToken1",function(model, value, options){
//});
tokens.on("change:modalToken2", function (model, value, options) {
displayModal(2);
});
tokens.on("change:modalToken3", function (model, value, options) {
displayModal(3);
console.log("clicked");
});
tokens.on("change:modalToken4", function (model, value, options) {
displayModal(4);
});
tokens.on("change:modalToken5", function (model, value, options) {
displayModal(5);
});
tokens.on("change:modalToken6", function (model, value, options) {
displayModal(6);
});
});
XML:
<dashboard script="modalchart.js">
<label>Modal Popup</label>
<search id="modalAreaChartSearch1">
<query>
index=_internal sourcetype=$modalToken1$ | timechart count by sourcetype
</query>
<earliest>-24h</earliest>
<latest>now</latest>
</search>
<search id="modalLineChartSearch2">
<query>
index=_internal source=$modalToken2$ | timechart count by sourcetype
</query>
<earliest>-24h</earliest>
<latest>now</latest>
</search>
<search id="modalTableChartSearch3">
<query>
index=_internal sourcetype=$modalToken3$ | timechart span=1h count
</query>
<earliest>-24h</earliest>
<latest>now</latest>
</search>
<row>
<panel>
<table>
<title>$modalToken1$</title>
<search>
<query>index=_internal
| dedup sourcetype
| table index sourcetype source</query>
<earliest>-15m</earliest>
<latest>now</latest>
<sampleRatio>1</sampleRatio>
</search>
<option name="drilldown">row</option>
<option name="refresh.display">progressbar</option>
<drilldown>
<set token="modalToken1">$row.sourcetype$</set>
</drilldown>
</table>
</panel>
<panel>
<table>
<title>$modalToken2$</title>
<search>
<query>index=_internal
| dedup sourcetype
| table index sourcetype source</query>
<earliest>-15m</earliest>
<latest>now</latest>
<sampleRatio>1</sampleRatio>
</search>
<option name="drilldown">row</option>
<option name="refresh.display">progressbar</option>
<drilldown>
<set token="modalToken2">$row.source$</set>
</drilldown>
</table>
</panel>
</row>
<row>
<panel>
<table>
<title>$modalToken3$</title>
<search>
<query>index=_internal | dedup sourcetype
| table index sourcetype source</query>
<earliest>-15m</earliest>
<latest>now</latest>
<sampleRatio>1</sampleRatio>
</search>
<option name="drilldown">row</option>
<option name="refresh.display">progressbar</option>
<drilldown>
<set token="modalToken3">$row.sourcetype$</set>
</drilldown>
</table>
</panel>
</row>
<row>
<panel>
<html>
<div class="modal fade" id="modalPanel1" tabindex="-1" role="dialog" aria-labelledby="modalLabel1" aria-hidden="true">
<div class="modal-dialog modal-lg" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="modalLabel1">$modalToken1$</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true"/></button>
</div>
<div class="modal-body">
<div id="modalChart1"/>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-primary" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
<div class="modal fade" id="modalPanel2" tabindex="-1" role="dialog" aria-labelledby="modalLabel2" aria-hidden="true">
<div class="modal-dialog modal-lg" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="modalLabel2">$modalToken2$</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true"/></button>
</div>
<div class="modal-body">
<div id="modalChart2"/>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-primary" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
<div class="modal fade" id="modalPanel3" tabindex="-1" role="dialog" aria-labelledby="modalLabel3" aria-hidden="true">
<div class="modal-dialog modal-lg" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="modalLabel3">$modalToken3$</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true"/></button>
</div>
<div class="modal-body">
<div id="modalChart3"/>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-primary" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
</html>
</panel>
</row>
</dashboard>