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!

Index This | I am a number, but when you add ‘G’ to me, I go away. What number am I?

March 2024 Edition Hayyy Splunk Education Enthusiasts and the Eternally Curious!  We’re back with another ...

What’s New in Splunk App for PCI Compliance 5.3.1?

The Splunk App for PCI Compliance allows customers to extend the power of their existing Splunk solution with ...

Extending Observability Content to Splunk Cloud

Register to join us !   In this Extending Observability Content to Splunk Cloud Tech Talk, you'll see how to ...