Auto expand a nested list in a JSON log

[0xlc]

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

[rokxer]

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.