Hi,
i have a HTML dashboard converted from xml....and i have checkboxes group with around 25-27 checkboxes, and when the dashboard is loaded, i want that checkboxes checked automatically so the chart contains all possibilities
I tried by using Javascript...i took a look at the splunkjs documentation, but found nothing that worked. Every time the code is executed before the checkbox choices are loaded, so the code has no effect.
Here is my full dashboard code :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<title>Backlogs | Splunk</title>
<link rel="shortcut icon" href="{{SPLUNKWEB_URL_PREFIX}}/static/img/favicon.ico" />
<link rel="stylesheet" type="text/css" href="/en-US/static/@241817/css/build/bootstrap.min.css" />
<link rel="stylesheet" type="text/css" href="/en-US/static/@241817/css/build/pages/dashboard-simple-bootstrap.min.css" />
<link rel="stylesheet" type="text/css" href="https://splunk.canam.ws/canamvault/backlog-custom-layout.css" />
<!--[if IE 7]><link rel="stylesheet" href="{{SPLUNKWEB_URL_PREFIX}}/static/css/sprites-ie7.css" /><![endif]-->
</head>
<body class="simplexml preload locale-en">
<!--
BEGIN LAYOUT
This section contains the layout for the dashboard. Splunk uses proprietary
styles in <div> tags, similar to Bootstrap's grid system.
-->
<a class="navSkip" href="#navSkip" tabindex="1">Screen reader users, click here to skip the navigation bar</a>
<div class="header splunk-header">
<div id="placeholder-splunk-bar">
<a href="{{SPLUNKWEB_URL_PREFIX}}/app/launcher/home" class="brand" title="splunk > listen to your data">splunk<strong>></strong></a>
</div>
<div id="placeholder-app-bar"></div>
</div>
<a id="navSkip"></a>
<div class="dashboard-body container-fluid main-section-body" data-role="main">
<div class="dashboard-header clearfix">
<h2>Backlogs</h2>
</div>
<div id="row1" class="dashboard-row dashboard-row1">
<div id="panelServerInput" class="dashboard-cell" style="width: 50%;">
<div class="dashboard-panel clearfix">
<h2 class="panel-title">Servers</h2>
<div class="fieldset">
<button type="button" onclick="checkAll('#panelServerInput .checkbox .btn .icon-check','btnCheckServers')" id="btnCheckServers" class="btn">Check All</button>
<div class="input input-checkboxgroup" id="input1">
</div>
</div>
</div>
</div>
<div id="panel2" class="dashboard-cell" style="width: 50%;">
<div class="dashboard-panel clearfix">
<h2 class="panel-title">Backlogs per server over the last 7 days (freq=60min)</h2>
<div class="panel-element-row">
<div id="element1" class="dashboard-element chart" style="width: 100%">
<div class="panel-body"></div>
</div>
</div>
</div>
</div>
</div>
<div id="row2" class="dashboard-row dashboard-row2">
<div id="panelFoldersInput" class="dashboard-cell" style="width: 50%;">
<div class="dashboard-panel clearfix">
<h2 class="panel-title">Replicated folder</h2>
<div class="fieldset">
<button type="button" onclick="checkAll('#panelFoldersInput .checkbox .btn .icon-check','btnCheckFolders')" id="btnCheckFolders" class="btn">Check All</button>
<div class="input input-checkboxgroup" id="input2">
</div>
</div>
</div>
</div>
<div id="panel4" class="dashboard-cell" style="width: 50%;">
<div class="dashboard-panel clearfix">
<h2 class="panel-title">Backlogs per replicated folder over the last 7 days (freq=60min)</h2>
<div class="panel-element-row">
<div id="element2" class="dashboard-element chart" style="width: 100%">
<div class="panel-body"></div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="footer"></div>
<!--
END LAYOUT
-->
<script src="{{SPLUNKWEB_URL_PREFIX}}/config?autoload=1"></script>
<script src="{{SPLUNKWEB_URL_PREFIX}}/static/js/i18n.js"></script>
<script src="{{SPLUNKWEB_URL_PREFIX}}/i18ncatalog?autoload=1"></script>
<script src="{{SPLUNKWEB_URL_PREFIX}}/static/js/build/simplexml.min/config.js"></script>
<script type="text/javascript">
require.config({
baseUrl: "{{SPLUNKWEB_URL_PREFIX}}/static/js",
waitSeconds: 0 // Disable require.js load timeout
});
//
// LIBRARY REQUIREMENTS
//
// In the require function, we include the necessary libraries and modules for
// the HTML dashboard. Then, we pass variable names for these libraries and
// modules as function parameters, in order.
//
// When you add libraries or modules, remember to retain this mapping order
// between the library or module and its function parameter. You can do this by
// adding to the end of these lists, as shown in the commented examples below.
require([
"splunkjs/mvc",
"splunkjs/mvc/utils",
"splunkjs/mvc/tokenutils",
"underscore",
"jquery",
"splunkjs/mvc/simplexml",
"splunkjs/mvc/headerview",
"splunkjs/mvc/footerview",
"splunkjs/mvc/simplexml/dashboardview",
"splunkjs/mvc/simplexml/dashboard/panelref",
"splunkjs/mvc/simplexml/element/chart",
"splunkjs/mvc/simplexml/element/event",
"splunkjs/mvc/simplexml/element/html",
"splunkjs/mvc/simplexml/element/list",
"splunkjs/mvc/simplexml/element/map",
"splunkjs/mvc/simplexml/element/single",
"splunkjs/mvc/simplexml/element/table",
"splunkjs/mvc/simpleform/formutils",
"splunkjs/mvc/simplexml/eventhandler",
"splunkjs/mvc/simpleform/input/dropdown",
"splunkjs/mvc/simpleform/input/radiogroup",
"splunkjs/mvc/simpleform/input/multiselect",
"splunkjs/mvc/simpleform/input/checkboxgroup",
"splunkjs/mvc/simpleform/input/text",
"splunkjs/mvc/simpleform/input/timerange",
"splunkjs/mvc/simpleform/input/submit",
"splunkjs/mvc/searchmanager",
"splunkjs/mvc/savedsearchmanager",
"splunkjs/mvc/postprocessmanager",
"splunkjs/mvc/simplexml/urltokenmodel"
// Add comma-separated libraries and modules manually here, for example:
// ..."splunkjs/mvc/simplexml/urltokenmodel",
// "splunkjs/mvc/checkboxview"
],
function(
mvc,
utils,
TokenUtils,
_,
$,
DashboardController,
HeaderView,
FooterView,
Dashboard,
PanelRef,
ChartElement,
EventElement,
HtmlElement,
ListElement,
MapElement,
SingleElement,
TableElement,
FormUtils,
EventHandler,
DropdownInput,
RadioGroupInput,
MultiSelectInput,
CheckboxGroupInput,
TextInput,
TimeRangeInput,
SubmitButton,
SearchManager,
SavedSearchManager,
PostProcessManager,
UrlTokenModel
// Add comma-separated parameter names here, for example:
// ...UrlTokenModel,
// CheckboxView
) {
var pageLoading = true;
//
// TOKENS
//
// Create token namespaces
var urlTokenModel = new UrlTokenModel();
mvc.Components.registerInstance('url', urlTokenModel);
var defaultTokenModel = mvc.Components.getInstance('default', {create: true});
var submittedTokenModel = mvc.Components.getInstance('submitted', {create: true});
urlTokenModel.on('url:navigate', function() {
defaultTokenModel.set(urlTokenModel.toJSON());
if (!_.isEmpty(urlTokenModel.toJSON()) && !_.all(urlTokenModel.toJSON(), _.isUndefined)) {
submitTokens();
} else {
submittedTokenModel.clear();
}
});
// Initialize tokens
defaultTokenModel.set(urlTokenModel.toJSON());
function submitTokens() {
// Copy the contents of the defaultTokenModel to the submittedTokenModel and urlTokenModel
FormUtils.submitForm({ replaceState: pageLoading });
}
function setToken(name, value) {
defaultTokenModel.set(name, value);
submittedTokenModel.set(name, value);
}
function unsetToken(name) {
defaultTokenModel.unset(name);
submittedTokenModel.unset(name);
}
//
// SEARCH MANAGERS
//
var search1 = new SearchManager({
"id": "search1",
"search": "index=\"vaultlogs\" earliest=-7d | spath Message | search Message=BacklogsPerServer | spath Properties.BL.ReceivingMemberLocationName output=location | where $servers$ | timechart span=1h sum(Properties.BL.Backlog) by Properties.BL.ReceivingMemberServerOnly limit=100",
"latest_time": "$latest$",
"earliest_time": "-7d",
"cancelOnUnload": true,
"status_buckets": 0,
"app": utils.getCurrentApp(),
"auto_cancel": 90,
"preview": true,
"runWhenTimeIsUndefined": false
}, {tokens: true, tokenNamespace: "submitted"});
var search2 = new SearchManager({
"id": "search2",
"search": "index=\"vaultlogs\" earliest=-7d | spath Message | search Message=ReplicationCheckerTask $replicatedFolder$ | spath Properties.RC.LocationName output=location |where $servers$ | timechart span=1h sum(Properties.RC.Count) by Properties.RC.FolderNameWLocation limit=20",
"latest_time": "$latest$",
"earliest_time": "-7d",
"cancelOnUnload": true,
"status_buckets": 0,
"app": utils.getCurrentApp(),
"auto_cancel": 90,
"preview": true,
"runWhenTimeIsUndefined": false
}, {tokens: true, tokenNamespace: "submitted"});
new SearchManager({
"id": "search3",
"search": "index=\"vaultlogs\" earliest=-24h | spath Message | search Message=SplunkTaskServerList Properties.ServerInfo.ServerName!=\"dc-apps17\" | stats count by Properties.ServerInfo.LocationName Properties.ServerInfo.ServerName",
"latest_time": "now",
"earliest_time": "-24h",
"cancelOnUnload": true,
"status_buckets": 0,
"app": utils.getCurrentApp(),
"auto_cancel": 90,
"preview": true,
"runWhenTimeIsUndefined": false
}, {tokens: true});
var search4 = new SearchManager({
"id": "search4",
"search": "index=\"vaultlogs\" | spath Message | search Message=ReplicationCheckerTask | spath Properties.RC.Count output=nbr | where nbr>0 | stats count by Properties.RC.FolderName",
"latest_time": "now",
"earliest_time": "-7d",
"cancelOnUnload": true,
"status_buckets": 0,
"app": utils.getCurrentApp(),
"auto_cancel": 90,
"preview": true,
"runWhenTimeIsUndefined": false
}, {tokens: true});
//
// SPLUNK HEADER AND FOOTER
//
new HeaderView({
id: 'header',
section: 'dashboards',
el: $('.header'),
acceleratedAppNav: true,
useSessionStorageCache: true,
splunkbar: true,
appbar: true,
litebar: false,
}, {tokens: true}).render();
new FooterView({
id: 'footer',
el: $('.footer')
}, {tokens: true}).render();
//
// DASHBOARD EDITOR
//
var d =new Dashboard({
id: 'dashboard',
el: $('.dashboard-body'),
showTitle: true,
editable: true
}, {tokens: true}).render();
//
// VIEWS: VISUALIZATION ELEMENTS
//
var element1 = new ChartElement({
"id": "element1",
"charting.chart.style": "shiny",
"charting.legend.labelStyle.overflowMode": "ellipsisMiddle",
"charting.chart.bubbleMaximumSize": "50",
"charting.chart": "line",
"charting.chart.bubbleMinimumSize": "10",
"charting.axisTitleX.visibility": "collapsed",
"charting.layout.splitSeries": "0",
"charting.axisY.scale": "linear",
"charting.axisTitleY2.visibility": "visible",
"charting.legend.placement": "right",
"charting.chart.stackMode": "default",
"charting.drilldown": "all",
"charting.chart.nullValueMode": "zero",
"charting.axisY2.scale": "inherit",
"charting.axisY2.enabled": "false",
"charting.chart.sliceCollapsingThreshold": "0.01",
"charting.axisX.scale": "linear",
"charting.axisLabelsX.majorLabelStyle.rotation": "0",
"charting.axisTitleY.visibility": "visible",
"charting.axisTitleY.text": "Backlogs",
"charting.chart.bubbleSizeBy": "area",
"resizable": true,
"charting.axisLabelsX.majorLabelStyle.overflowMode": "ellipsisNone",
"managerid": "search1",
"el": $('#element1')
}, {tokens: true, tokenNamespace: "submitted"}).render();
var element2 = new ChartElement({
"id": "element2",
"charting.chart.style": "shiny",
"charting.legend.labelStyle.overflowMode": "ellipsisMiddle",
"charting.chart.bubbleMaximumSize": "50",
"charting.chart": "line",
"charting.chart.bubbleMinimumSize": "10",
"charting.axisTitleX.visibility": "collapsed",
"charting.layout.splitSeries": "0",
"charting.axisY.scale": "linear",
"charting.axisTitleY2.visibility": "visible",
"charting.legend.placement": "right",
"charting.chart.stackMode": "default",
"charting.drilldown": "all",
"charting.chart.nullValueMode": "zero",
"charting.axisY2.scale": "inherit",
"charting.axisY2.enabled": "false",
"charting.chart.sliceCollapsingThreshold": "0.01",
"charting.axisX.scale": "linear",
"charting.axisLabelsX.majorLabelStyle.rotation": "0",
"charting.axisTitleY.visibility": "visible",
"charting.axisTitleY.text": "Backlogs",
"charting.chart.bubbleSizeBy": "area",
"resizable": true,
"charting.axisLabelsX.majorLabelStyle.overflowMode": "ellipsisNone",
"managerid": "search2",
"el": $('#element2')
}, {tokens: true, tokenNamespace: "submitted"}).render();
//
// VIEWS: FORM INPUTS
//
var input1 = new CheckboxGroupInput({
"id": "input1",
"choices": [],
"valueSuffix": "\"",
"searchWhenChanged": true,
"labelField": "Properties.ServerInfo.LocationName",
"delimiter": " OR ",
"valueField": "Properties.ServerInfo.LocationName",
"valuePrefix": "location=\"",
"value": "$form.servers$",
"managerid": "search3",
"el": $('#input1')
}, {tokens: true}).render();
input1.on("change", function(newValue) {
FormUtils.handleValueChange(input1);
});
var input2 = new CheckboxGroupInput({
"id": "input2",
"choices": [],
"valueSuffix": "\"",
"searchWhenChanged": true,
"labelField": "Properties.RC.FolderName",
"delimiter": " OR ",
"valueField": "Properties.RC.FolderName",
"valuePrefix": "Properties.RC.FolderName=\"",
"value": "$form.replicatedFolder$",
"managerid": "search4",
"el": $('#input2')
}, {tokens: true}).render();
input2.on("change", function(newValue) {
FormUtils.handleValueChange(input2);
});
// Initialize time tokens to default
if (!defaultTokenModel.has('earliest') && !defaultTokenModel.has('latest')) {
defaultTokenModel.set({ earliest: '0', latest: '' });
}
submitTokens();
//
// DASHBOARD READY
//
DashboardController.ready();
pageLoading = false;
}
);
</script>
<script src="https://splunk.canam.ws/canamvault/custom_layout_width.js"></script>
</body>
</html>
There is probably something quite simple to add a event when all panels,inputs,chart...is loaded..
anyone could help me...thanks!!
... View more