Splunk Dev

Auto expand a nested list in a JSON log

0xlc
Path Finder

Hi,

i got a nested list in a json log file, problem is to open it i have every time to expand it using the + sign.

there is any way to to this automatically? i would like to show it withtin the event and not separated using spath and mvexpand

Thanks guys

Tags (1)

rokxer
Explorer

Here is what I did for v9.1.5

Add CSS to
/opt/splunk/share/splunk/search_mrsparkle/exposed/build/css/bootstrap-dark.css
/opt/splunk/share/splunk/search_mrsparkle/exposed/build/css/bootstrap-light.css
------------------

 /* The switch - the box around the slider*/
.autoexpand {
margin-top: 2px;
}
.autoexpandtext {
margin-right: 5px;
}
.switch {
position: relative;
display: inline-block;
width: 43px;
height: 18px;
margin-top:5px;
margin-bottom:0px;
}
/* Hide default HTML checkbox */
.switch input {
opacity: 0;
width: 0;
height: 0;
}
/* The slider */
.slider {
position: absolute;
cursor: pointer;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: #ccc;
-webkit-transition: .4s;
transition: .4s;
}
.slider:before {
position: absolute;
content: "";
height: 10px;
width: 10px;
left: 4px;
bottom: 4px;
background-color: white;
-webkit-transition: .4s;
transition: .4s;
}
input:checked + .slider {
background-color: rgb(92, 192, 92);
}
input:focus + .slider {
box-shadow: 0 0 1px #2196F3;
}
input:checked + .slider:before {
-webkit-transform: translateX(26px);
-ms-transform: translateX(26px);
transform: translateX(26px);
}
/* Rounded sliders */
.slider.round {
border-radius: 34px;
}
.slider.round:before {
border-radius: 50%;
}



In
/opt/splunk/share/splunk/search_mrsparkle/exposed/build/pages/dark/search.js
/opt/splunk/share/splunk/search_mrsparkle/exposed/build/pages/light/search.js
search for "pull-right jobstatus-control-grouping" and add this text in that div element

-----------------

<div class="autoexpand"><span class="autoexpandtext">AutoexpandJSON</span><label class="switch"><input type="checkbox" checked><span class="slider round"></span></label></div> 

------------------

In the same search.js files 
/opt/splunk/share/splunk/search_mrsparkle/exposed/build/pages/dark/search.js
/opt/splunk/share/splunk/search_mrsparkle/exposed/build/pages/light/search.js

add this scripts to the bottom

------------------

let autoExpandPropertyName='jsonAutoExpand';
let autoExpandSetting = localStorage.getItem(autoExpandPropertyName);
let observer2Added =false;
$(document).ready(function() {
if (autoExpandSetting === null)
{
localStorage.setItem(autoExpandPropertyName, '1');
autoExpandSetting = '1';
}
if(autoExpandSetting === '1')
{
function autoExpand(){
// console.log("autoExpand started");
$(".jsexpands").each(function() {
if($(this).html() == '[+]') {
$(this)[0].click();
}
})};
setTimeout(()=> {
console.log("Delayed");
// select the target node
var target = $(".shared-eventsviewer")[0];
console.log(target);
// create an observer instance
var observer6 = new MutationObserver(function(mutations) {
mutations.forEach((mutation) => {
if (!mutation.addedNodes) return
autoExpand();
$(".events-controls-inner").click(); //does not refresh table if missing
})
});
// configuration of the observer:
var config = { attributes: false, childList: true, characterData: true, subtree:true};
// pass in the target node, as well as the observer options
observer6.observe(target, config);
}, "500");
}


function toggleAutoexpand(mutation){
const slider = document.querySelector('.slider');
if (slider === undefined ||slider === null) return;
if(observer2Added) return;
observer2Added = true;
if(autoExpandSetting === '0')
{
$(".switch")[0].childNodes[0].checked =false;
}
slider.addEventListener('click', () => {
let storageValue = localStorage.getItem(autoExpandPropertyName);
if ( storageValue === '1')
localStorage.setItem(autoExpandPropertyName, '0');
else
localStorage.setItem(autoExpandPropertyName, '1');
location.reload();
});
observer2.disconnect();
};
let observer2 = new MutationObserver((mutations) => {
mutations.forEach((mutation) => {
if (!mutation.addedNodes) return
toggleAutoexpand(mutation);
})
})
setTimeout(()=> {
observer2.observe($(".shared-eventsviewer")[0], {
childList: true
, subtree: true
, attributes: false
, characterData: false
})
}, "500");
})

------------------

To refresh the splunk css and js caching use link: https://yourinstance:8000/en-GB/_bump

On the next splunk update you have to repeat the process if everything remains the same.
I couldn't find any other way.

0 Karma
Get Updates on the Splunk Community!

Why You Can't Miss .conf25: Unleashing the Power of Agentic AI with Splunk & Cisco

The Defining Technology Movement of Our Lifetime The advent of agentic AI is arguably the defining technology ...

Deep Dive into Federated Analytics: Unlocking the Full Power of Your Security Data

In today’s complex digital landscape, security teams face increasing pressure to protect sprawling data across ...

Your summer travels continue with new course releases

Summer in the Northern hemisphere is in full swing, and is often a time to travel and explore. If your summer ...