My simple xml code is:
<form stylesheet="table_hide.css" script="main_panel.js">
<label>Pannello principale Change</label>
<description>Pannello principale change configurazioni</description>
<fieldset autorun="0" submitButton="true">
<input type="time" token="orario">
<label>Selezionare orario</label>
<default>
<earliestTime>-24h@h</earliestTime>
<latestTime>now</latestTime>
</default>
</input>
</fieldset>
<row>
<panel>
<chart id="main_change_chart">
<title>Timeline change per host/tipologia</title>
<searchString><![CDATA[ tag=change_sum | eval host_eventtype=host . " (" . eventtype . ")"
| rex field=host_eventtype "(?<HOST>^.*) \((?<EVENTTYPE>.*)\)"
| timechart count by host_eventtype ]]></searchString>
<earliestTime>$orario.earliest$</earliestTime>
<latestTime>$orario.latest$</latestTime>
<option name="charting.axisLabelsX.majorLabelStyle.overflowMode">ellipsisNone</option>
<option name="charting.axisLabelsX.majorLabelStyle.rotation">-90</option>
<option name="charting.axisTitleX.visibility">visible</option>
<option name="charting.axisTitleY.visibility">visible</option>
<option name="charting.axisTitleY2.visibility">visible</option>
<option name="charting.axisX.scale">linear</option>
<option name="charting.axisY.scale">linear</option>
<option name="charting.axisY2.enabled">false</option>
<option name="charting.axisY2.scale">inherit</option>
<option name="charting.chart">column</option>
<option name="charting.chart.nullValueMode">gaps</option>
<option name="charting.chart.sliceCollapsingThreshold">0.01</option>
<option name="charting.chart.stackMode">stacked</option>
<option name="charting.chart.style">shiny</option>
<option name="charting.drilldown">all</option>
<option name="charting.layout.splitSeries">0</option>
<option name="charting.legend.labelStyle.overflowMode">ellipsisMiddle</option>
<option name="charting.legend.placement">right</option>
<option name="charting.data.fieldListMode">show_hide</option>
<!--<option name="charting.data.fieldHideList">[field_to_hide]</option>-->
<option name="height">400</option>
<drilldown target="_blank">
<set token="clicked_earliest">$earliest$</set>
<set token="clicked_latest">$latest$</set>
<set token="clicked_eventtype">$click.name2$</set>
<link>
<![CDATA[/app/cgt/detail_panel_$click.name2$?host=$click.name2&orario.earliest=$clicked_earliest$&orario.latest=$clicked_latest$]]>
</link>
</drilldown>
</chart>
</panel>
</row>
</form>
What I want to do is to split $click.name2$ into two variables.
For example, if tha value of $click.name2$ is "AAA (xxx_bbb)", I want it to split in "AAA" and "xxx_bbb". The first value "AAA" would be the drilldown host parameter, the second one would be the name of the drilldown destination form.
The only I found to do this was to convert the form to HTML and then edit the chart onclick function this way:
main_change_chart.on("click", function(e) {
if (e.field !== undefined) {
e.preventDefault();
setToken("clicked_earliest", TokenUtils.replaceTokenNames("$earliest$", _.extend(submittedTokenModel.toJSON(), e.data)));
setToken("clicked_latest", TokenUtils.replaceTokenNames("$latest$", _.extend(submittedTokenModel.toJSON(), e.data)));
setToken("clicked_eventtype", TokenUtils.replaceTokenNames("$click.name2$", _.extend(submittedTokenModel.toJSON(), e.data)));
var tempurl = TokenUtils.replaceTokenNames("{{SPLUNKWEB_URL_PREFIX}}/app/skylogic_cgt/detail_panel_$click.name2$?host=$click.name2$&orario.earliest=$clicked_earliest$&orario.latest=$clicked_latest$", _.extend(submittedTokenModel.toJSON(), e.data), TokenUtils.getEscaper('url'));
// regex per impostare il nome host senza eventtype
var tempurl_dest = tempurl.replace(/(.+)%20\(([a-zA-Z0-9_]+)\)/, "$1_$2")
tempurl_dest = tempurl_dest.replace(/(.+)%20\(([a-zA-Z0-9_]+)\)/, "$1_$2");
tempurl_dest = tempurl_dest.replace(/panel_[a-zA-Z0-9]+_change/g, "panel_change");
var url = tempurl_dest.replace(/host=(\w+)_\w+_\w+/, "host=$1")
// debug a video
// window.alert(url);
utils.redirect(url, false, "_blank");
}
});
I was wondering if it was possible to change tokens in an external javascript, but since I am a newbie with js and jquery the only script I was able to write is this:
require([
'underscore',
'jquery',
'splunkjs/mvc',
'splunkjs/mvc/chartview',
'splunkjs/mvc/simplexml/ready!'
], function(_, $, mvc, ChartView) {
// Get the table view by id
//mvc.Components.get('main_change_chart').getVisualization(function(chartView){
mychart = mvc.Components.getInstance("main_change_chart");
mychart.on("click:chart", function (e) {
e.preventDefault();
// To do: respond to events
console.log("Clicked chart: ", e.name);
console.log("Clicked chart: ", e.name2);
console.log("Clicked chart: ", e.value);
console.log("Clicked chart: ", e.value2);
console.log("Clicked chart: ", e.earliest);
console.log("Clicked chart: ", e.latest);
var newValue = e.data['click.name2'];
console.log(newValue);
});
});
Note that values like e.earliest, e.latest and e.data seems to be "undefined" in javascript log console.
Any help would be appreciated.
Many thanks in advance!
... View more