Hello Everyone,
My aim is to get the dropdown selected value as a token so that I can use it in searchmanager query,
also I am using dependent dropdown, so how to pass token of portfolio dropdown to application_code dropdown and when portfolio dropdown value changes then application_code dropdown should repopulate and show the data related to current selected portfolio value, also the default value of application_code dropdown should be default.
I am attaching the piece of code I am using, could someone please help me and explain how token works in js, I am new in splunk js.
xml:
<form script="demo.js"> <label>Demo</label> <row> <panel> <html> <div id="mydropdownview1"/> <div id="mydropdownview2"/> <div id="mytimerangeview"/> <div id="singleid0"/> <div id="singleid1"/> <div id="singleid2"/> <div id="singleid3"/> <div id="singleid4"/> <div id="singleid5"/> <div id="singleid6"/> <div id="singleid7"/> <div id="singleid8"/> <div id="singleid9"/> <div id="singleid10"/> <div id="singleid11"/> </html> </panel> </row> </form>
demo.js
require(["splunkjs/ready!"], function (mvc) { var deps = [ "jquery", "splunkjs/mvc/dropdownview", "splunkjs/ready!", "splunkjs/mvc/searchmanager", "splunkjs/mvc/tableview", "splunkjs/mvc/singleview", "splunkjs/mvc/timerangeview", "splunkjs/mvc" ]; require(deps, function(mvc) { // var randomid = () => Math.random() const searchId = Date.now() + ''; const searchId1 = searchId + Date.now() + ''; const searchId2 = searchId1 + Date.now() + ''; const searchId3 = searchId2 + Date.now() + ''; const searchId4 = searchId3 + Date.now() + ''; const searchId5 = searchId4 + Date.now() + ''; const searchId6 = searchId5 + Date.now() + ''; const searchId7 = searchId6 + Date.now() + ''; const searchId8 = searchId7 + Date.now() + ''; const searchId9 = searchId8 + Date.now() + ''; const searchId10= searchId9 + Date.now() + ''; const searchId11= searchId10 + Date.now() + ''; const dropdownsearch1= searchId11 + Date.now() + ''; const dropdownsearch2= dropdownsearch1 + Date.now() + ''; var SearchManager = require("splunkjs/mvc/searchmanager"); var DropdownView = require("splunkjs/mvc/dropdownview"); var m = require("splunkjs/mvc"); var TimeRangeView = require("splunkjs/mvc/timerangeview");
var mychoices = [ {label:"ALL", value: "*"}, ];
// Access the "default" token model var tokens = m.Components.get("default"); // Retrieve the value of a token $mytoken$ // portfolio_token = tokens.get("portfolio_token");
/**Dropdowns */ var portfolio = new DropdownView({ id: "dropdownid1", managerid: dropdownsearch1, default: "demo_portfolio_value", labelField: "portfolio", valueField: "portfolio", el: $("#mydropdownview1") }).render();
new SearchManager({ id: dropdownsearch1, search: `| inputlookup demo_portfolio_filter.csv | table portfolio | dedup portfolio | sort portfolio` }); // defaultTokenModel.set("portfolio_token", "*"); // var portfolio_dropdown = tokens.get("portfolio_token")
var application_code = new DropdownView({ id: "dropdownid2", choices: mychoices, managerid: dropdownsearch2, // default: "ALL", selectFirstChoice:"true", labelField: "application_name", valueField: "application_code", el: $("#mydropdownview2") }).render();
var portfolio_search = new SearchManager({ id: dropdownsearch2, search: `| inputlookup demo_portfolio_filter.csv |search portfolio=${portfolio.val()} |eval application_name=application_code."-".application_name |table application_name application_code |sort application_code` });
// Instantiate a view using the default time range picker var mytimerange = new TimeRangeView({ id: "example-timerange", managerid: "example-search", preset: "-4h@m", el: $("#mytimerangeview") }).render();
var Controlm_NOK = new SearchManager({ id: searchId, label:"NOK Percent Controlm", earliest_time: mytimerange.val().earliest_time, latest_time: mytimerange.val().latest_time, search: `somebasesearch | stats values(percentage) by application_code`, preview: true, autostart: true, cache: true
}); /**OK Percent */ const search1 = new SearchManager({ id:searchId1, label:"OK Percent Controlm", earliest_time: mytimerange.val().earliest_time, latest_time: mytimerange.val().latest_time, search: `somebasesearch | stats values(OK_Percentage) by application_code`, preview: true, autostart: true, cache: true
});
var SingleView = require('splunkjs/mvc/singleview'); new SingleView({ id: "single0", managerid: searchId, underLabel:"singleview nok", colorMode: "block", drilldown: "none", rangeColors: "[\"0x6db7c6\",\"0x65a637\",\"0xf7bc38\",\"0xd93f3c\"]", rangeValues: "[0,80,95]", useColors: true, "trellis.enabled": true, "trellis.splitBy": "Location_Name", "trellis.size": "medium", el: $("#singleid0") }).render(); var SingleView = require('splunkjs/mvc/singleview'); new SingleView({ id: "single1", underLabel:"singleview ok", managerid: searchId1, colorMode: "block", drilldown: "none", rangeColors: "[\"0x6db7c6\",\"0x65a637\",\"0xf7bc38\",\"0xd93f3c\"]", rangeValues: "[0,80,95]", useColors: true, "trellis.enabled": true, "trellis.splitBy": "Location_Name", "trellis.size": "medium", el: $("#singleid1") }).render();
}); });
... View more