Solved: Why MVC at all? - Most efficient way to change cli...

jkat54 · ‎02-02-2022

So far, this is one of the only ways i've figured out how to change the onclick of the trellis single value view so that the entire block is clickable (like in ITSI)

on the dashboard, i create a single value search, with trellis view, and colors inverted so the entire square shows the color status, AND finally I added script="mycode.js" to the form tag, and id="main" to it's search tag in the xml:

<form theme="dark" script="mycode.js">

<search id="main">

I also added styling to force the labels down into the blocks:

<panel>
<html> 
<p/>
<style>
.facet-label {top:30% !important;}
.facet-label {z-index:1 !important;}
.facet-label {font-size:20px !important;}
.facet-label {font-size:1.125vw !important;}
.facet-label {display:inline !important;}
text.single-result {z-index:1 !important;} 
</style>
</html>
</panel>
Then i placed the js here:

/opt/splunk/etc/apps/search/appserver/static/mycode.js

mycode.js:

require(['splunkjs/mvc','splunkjs/mvc/simplexml/ready!','splunkjs/ready!'], function(mvc){ var main = mvc.Components.get('main'); main.on("search:progress", function() { $('.svg-container').on("click", function (e) { $($('a.single-drilldown', $(e.currentTarget))[0]).click(); }); }); main.on("change", function() { $('.svg-container').on("click", function (e) { $($('a.single-drilldown', $(e.currentTarget))[0]).click(); }); }); main.on("data", function() { $('.svg-container').on("click", function (e) { $($('a.single-drilldown', $(e.currentTarget))[0]).click(); }); }); });

Final result: (each block is clickable and leads to the intended drilldown)

Now, the question is... why cant I just cram in the JS like below:
$('.svg-container').on("click", function (e) { $($('a.single-drilldown', $(e.currentTarget))[0]).click(); });

why am i being forced to use mvc at all?

jkat54 · ‎02-03-2022

My code was executing, just once at page start and I'm doing things to manipulate objects on the page.

The eventual solution was below, but this solution blows up the js stack when the click occurs.

require(['splunkjs/mvc','splunkjs/mvc/simplexml/ready!','splunkjs/ready!'], function(mvc){
        var search = mvc.Components.get('searchId');
        search.on("search:done", function() {
                $(document).on("click", '.shared-singlevalue-lazysinglevalue', function (e) {
                        $($('a.single-drilldown', $(e.currentTarget))[0]).click();
                });
        });
});

View solution in original post

splunkian · ‎02-02-2022

I believe the splunkjs/mvc piece is so you can access components on your dashboard and interact with them such as:

var myTable = splunkjs.mvc.Components.get("myTable");

Loading in the splunkjs/mvc/simplexml/ready! ensures that your dashboard has everything it needs in order to run your code. I believe this is especially important when your JavaScript is actually interacting with your dashboard components in some way.

So, when you do:

require(['splunkjs/mvc','splunkjs/mvc/simplexml/ready!','splunkjs/ready!'], function(mvc){ 
...your code here...
});

You're just waiting for Splunk to load in all its necessary dashboard stuff before your code will be loaded.

Hopefully that answers your question.

jkat54 · ‎02-02-2022

The issue being, my code doesnt get loaded unless i sneak it into some function of mvc, or SearchManager, etc

I can put console.log("hi") in place of "... your code here..." and it never executes.

require(['splunkjs/mvc','splunkjs/mvc/simplexml/ready!','splunkjs/ready!'], function(mvc){ 
...your code here...
});

jkat54 · ‎02-03-2022

My code was executing, just once at page start and I'm doing things to manipulate objects on the page.

The eventual solution was below, but this solution blows up the js stack when the click occurs.

require(['splunkjs/mvc','splunkjs/mvc/simplexml/ready!','splunkjs/ready!'], function(mvc){
        var search = mvc.Components.get('searchId');
        search.on("search:done", function() {
                $(document).on("click", '.shared-singlevalue-lazysinglevalue', function (e) {
                        $($('a.single-drilldown', $(e.currentTarget))[0]).click();
                });
        });
});

splunkian · ‎02-03-2022

You could try something like this (just make sure to add the id to the panel containing the Trellis viz):

$("#panelID").one('click', '.single-value', function() {
	$(this).children().find('.single-drilldown').trigger('click');
});

That will tell it to trigger a click only once.

jkat54 · ‎02-04-2022

I tried playing with this but ultimately failed to make it work inside a search:done function or outside of one. it looks really good in theory and I had high hopes, but i couldnt get it going on v7.3.

I did change "one" to "on" and #panelID to the correct one for me, but no luck.

Why MVC at all? - Most efficient way to change click event on single value trellis so that outer square is a link

javascript

Earn a $35 Gift Card for Answering our Splunk Admins & App Developer Survey

Continuing Innovation & New Integrations Unlock Full Stack Observability For Your ...

Monitoring Amazon Elastic Kubernetes Service (EKS)