Dashboards & Visualizations

How to implement future proof customization for Splunk elements using CSS and JS?

fabio_lourenco
Explorer

Hello.

I am developing an app for Splunk and I am facing an issue that possibly many of you are facing too, the changes in the classes and DOM of Splunk elements such as dropdown boxes, for example, between Splunk versions.
Since I changed Splunk elements in my app via CSS or JS, some of my customized changes disappear from version to version (already happened from version 7.0 to 7.1 and from 7.1 to 7.2) forcing me to redo the customizations.

Can someone share with me how are you addressing this issue? How can I ensure that my customizations will persist when a new Splunk version is released?

Thanks in advance.

Best Regards,
Fábio Lourenço

Tags (1)
1 Solution

alacercogitatus
SplunkTrust
SplunkTrust

Following up from Slack: Here is some sample code that can be used with SimpleXML + JS injection to query the components on the page, and only return the dropdowns. Then you cycle through, and apply the changes to each. Or use this as a starting point and move on from there.

require([
    'splunkjs/mvc',
    "jquery",
    'underscore'
], function (mvc,
             $,
             _) {
        _(mvc.Components.toJSON()).chain().filter(function (el) {
                if (el.hasOwnProperty('options')){
                        if (el.options.hasOwnProperty("type")){
                                if (el.options.type === "dropdown") {
                                return el; }
                        }
                }
}).each(function(el){
    console.log({"filtered_el": el});
    /// DO YOUR STUFF TO DROPDOWNS HERE
});
});

View solution in original post

alacercogitatus
SplunkTrust
SplunkTrust

Following up from Slack: Here is some sample code that can be used with SimpleXML + JS injection to query the components on the page, and only return the dropdowns. Then you cycle through, and apply the changes to each. Or use this as a starting point and move on from there.

require([
    'splunkjs/mvc',
    "jquery",
    'underscore'
], function (mvc,
             $,
             _) {
        _(mvc.Components.toJSON()).chain().filter(function (el) {
                if (el.hasOwnProperty('options')){
                        if (el.options.hasOwnProperty("type")){
                                if (el.options.type === "dropdown") {
                                return el; }
                        }
                }
}).each(function(el){
    console.log({"filtered_el": el});
    /// DO YOUR STUFF TO DROPDOWNS HERE
});
});

fabio_lourenco
Explorer

Thank you @alacercogitatus.

0 Karma

niketn
Legend

@fabio_lourenco can you give some examples of CSS and JS that changed from 7.0 to 7.1 and from 7.1 to 7.2?

____________________________________________
| makeresults | eval message= "Happy Splunking!!!"
0 Karma

fabio_lourenco
Explorer

Hello @niketnilay thank you for answering.

Currently I only have access to the versions 7.0.3 and 7.2.0.
Here are some examples:

Time Picker dropdown
7.0.3
<span class="time-label" title="Last 30 days">Last 30 days</span>

7.2.0
<span class="sc-ckVGcZ juLrif" data-test="label">Last 30 days</span>

Example dropdown
7.0.3

<span class="select2-chosen" id="select2-chosen-2" title="Example1">Example1</span>

7.2.0

<span class="sc-ckVGcZ juLrif" data-test="label">Example1</span>

Dropdown complete
7.0.3:

<div class="select2-container select2-allowclear" id="s2id_autogen13">
    <a href="javascript:void(0)" class="select2-choice" tabindex="-1">
        <span class="select2-chosen" id="select2-chosen-14" title="Last 10">Last 10</span>
        <abbr class="select2-search-choice-close"></abbr>
        <span class="select2-arrow" role="presentation">
            <b role="presentation"></b>
        </span>
    </a>
    <label for="s2id_autogen14" class="select2-offscreen"></label>
    <input class="select2-focusser select2-offscreen" type="text" aria-haspopup="true" role="button" aria-labelledby="select2-chosen-14" id="s2id_autogen14">
</div>
<input type="hidden" tabindex="-1" title="" class="select2-offscreen" value="10">
    <div class="splunk-choice-input-message">
        <span title="" data-original-title=""></span>
    </div>
</div>
(...)

7.2.0:

<div>
    <div data-component="splunk-core:/splunkjs/mvc/components/Dropdown" style="width: 200px; display: flex;">
        <div class="sc-kIPQKe hLccNI sc-esjQYD cFVFyW sc-Rmtcm fZMhOZ" data-test="select" data-test-popover-id="popover-2ccf8d17-8809-4644-9774-708f78de17f5" data-test-value="10" data-select-appearance="default" style="flex: 1 0 0%; min-width: 0px;">
            <button class="sc-kpOJdX hWESIZ sc-kGXeez kfKfzb sc-jTzLTM eKAABD" data-test="toggle" data-appearance="default" aria-haspopup="true" label="Last 10" role="listbox" aria-label="Last 10" aria-owns="popover-2ccf8d17-8809-4644-9774-708f78de17f5" aria-expanded="false" id="toggle-543adb92-8349-422e-abc0-3001e01619ae" data-is-menu="true" data-size="medium" type="button" style="min-width: 100%;">
                <span class="sc-dxgOiQ aqMQq">
                    <span class="sc-ckVGcZ juLrif" data-test="label">
                        Last 10
                    </span>
                    <svg focusable="false" height="0.3184em" width="0.5000em" viewBox="0 0 1063 677" aria-hidden="true" preserveAspectRatio="xMidYMid" xmlns="http://www.w3.org/2000/svg" class="inline_SVG_c491dc3498332fcb_95de17 main_SVG_c491dc3498332fcb_95de17">
                        <path d="M458.024 633l-397-458c-35-41-61-72-61-102-1-43 30-73 73-73h918c43 0 71 30 71 73 0 30-13 58-43 94l-415 466c-32 35-47 44-73 44-22 0-37-9-73-44z"></path>
                    </svg>
                </span>
            </button>
        </div>
    </div>
</div>
<div class="splunk-choice-input-message">
    <span class="sc-jzJRlG bCobxp" data-test="tooltip" data-test-open="false" data-test-popover-id="popover-136a2565-7172-4544-9b5d-c00d0bdc5113" data-component="splunk-core:/splunkjs/mvc/components/ChoiceViewMessage">
        <span class="sc-kAzzGY AnYHI" data-test="toggle">
            <div style="font-size: 11px; height: 0px; overflow: visible;">
            </div>
        </span>
    </span>
</div>
0 Karma

niketn
Legend

Seems like all meaningful selectors have moved to data-test attribute. So maybe CSS selector change like the following is required for existing selectors.

div[data-test="label"]
____________________________________________
| makeresults | eval message= "Happy Splunking!!!"
0 Karma

fabio_lourenco
Explorer

I have already made the necessary fixes.
My question is if there is a good practice to avoid the need to change my CSS and JS in every Splunk's minor and major release.

0 Karma
Get Updates on the Splunk Community!

What's new in Splunk Cloud Platform 9.1.2312?

Hi Splunky people! We are excited to share the newest updates in Splunk Cloud Platform 9.1.2312! Analysts can ...

What’s New in Splunk Security Essentials 3.8.0?

Splunk Security Essentials (SSE) is an app that can amplify the power of your existing Splunk Cloud Platform, ...

Let’s Get You Certified – Vegas-Style at .conf24

Are you ready to level up your Splunk game? Then, let’s get you certified live at .conf24 – our annual user ...