Dashboards & Visualizations

Splunk HTML/JS Cache

jeffrey_charbon
Explorer

I am looking to add a Splunk footer link and another div to display a message to the footer. I've made several changes to html and js files without seeing the results in splunkweb though. I've emptied out the cache in splunk/var/run/splunk/appserver, tried the _bump url and set the 3 cache variables in web.conf. I am still unable to see any changes in the webpages.

Files Changed:

(added in a test div between the footer tags)
- splunk/share/splunk/search_mrsparkle/exposed/build/simplexml/index.js
- splunk/share/splunk/search_mrsparkle/exposed/js/build/simplexml.min/config.js
- splunk/share/splunk/search_mrsparkle/exposed/js/build/simplexml/config.js
- splunk/share/splunk/search_mrsparkle/exposed/js/build/splunkjs.min/config.js
- splunk/share/splunk/search_mrsparkle/exposed/js/build/splunkjs/config.js
- splunk/shate/splunk/search_mrsparkle/exposed/js/views/shared/Page.js

(attempted to append to the html)
- splunk/share/splunk/search_mrsparkle/exposed/js/splunkjs/mvc/footerview.js

(added a link)
- splunk/share/splunk/search_mrsparkle/exposed/js/views/shared/footer/Master.html

0 Karma
1 Solution

alacercogitatus
SplunkTrust
SplunkTrust

No, no, no. 😄 You should never edit search_mrsparkle. The better way is to write some JS modules, and include them into the dashboard. This will update your footers dynamically on dashboard load. Much javascript, better, wow.

EDIT: So, for any links that you want, put them in the new_links array.

Put this in $APP_HOME/appserver/static/dashboard.js. Then hit the _bump endpoint.

require(['jquery', 'underscore', 'splunkjs/mvc', 'splunkjs/mvc/simplexml/ready!'],
function ($, _, mvc) {
var re = /^footer$/i,
    new_links = [ {"href": "www.google.com", "text": "Google"}]
_(mvc.Components.toJSON()).chain().filter(function (el) {
        var myId = $(el).attr("id") || "undefined",
        should_include = false;
    var isMyIDUndefined = (myId === "undefined");
    if (!isMyIDUndefined) {
        var matches = myId.match(re);
        var isMatchesNull = (matches === null);
        if (!isMatchesNull) {
            should_include = true;
        }
    }
    if (should_include) {
        console.log("returning " + $(el).attr("id"));
        return el;
    }
}).each(function (mytableView) {
    console.log(mytableView);
    var footer_div = $(mytableView.$el[0].childNodes[0].childNodes[0]);
    for (var k = 0; k < new_links.length; k++){
        footer_div.append('<a href="'+new_links[k].href+'" target="_blank">'+new_links[k].text+'</a>')
    }
    console.log(footer_div);
});
});

View solution in original post

alacercogitatus
SplunkTrust
SplunkTrust

No, no, no. 😄 You should never edit search_mrsparkle. The better way is to write some JS modules, and include them into the dashboard. This will update your footers dynamically on dashboard load. Much javascript, better, wow.

EDIT: So, for any links that you want, put them in the new_links array.

Put this in $APP_HOME/appserver/static/dashboard.js. Then hit the _bump endpoint.

require(['jquery', 'underscore', 'splunkjs/mvc', 'splunkjs/mvc/simplexml/ready!'],
function ($, _, mvc) {
var re = /^footer$/i,
    new_links = [ {"href": "www.google.com", "text": "Google"}]
_(mvc.Components.toJSON()).chain().filter(function (el) {
        var myId = $(el).attr("id") || "undefined",
        should_include = false;
    var isMyIDUndefined = (myId === "undefined");
    if (!isMyIDUndefined) {
        var matches = myId.match(re);
        var isMatchesNull = (matches === null);
        if (!isMatchesNull) {
            should_include = true;
        }
    }
    if (should_include) {
        console.log("returning " + $(el).attr("id"));
        return el;
    }
}).each(function (mytableView) {
    console.log(mytableView);
    var footer_div = $(mytableView.$el[0].childNodes[0].childNodes[0]);
    for (var k = 0; k < new_links.length; k++){
        footer_div.append('<a href="'+new_links[k].href+'" target="_blank">'+new_links[k].text+'</a>')
    }
    console.log(footer_div);
});
});

jeffrey_charbon
Explorer

You Sir/Madam are a credit to society and deserve a medal!

I largely considered this impossible without a large rewrite of their code and nothing to find on Google. Since you're here (the other things I wrote off), instead of dashboard.js, is there another named.js to get the changes site wide? Also, do you happen to have a suggestion on adding a new div to the footer? So the html would read:

<footer role="contentinfo">
     <div>
          <div class="nav-pages>
              <a href>About</a>
              <a href>Support</a>
              <a href>etc...</a>
          </div>
          <div class="copyright-pages-enterprise></div>
     </div>
     <new div></new div>
</footer>
0 Karma

alacercogitatus
SplunkTrust
SplunkTrust

Well, I do have a fez. 😄 Adding a new div is easy. Just modify lines 23-25 in the example to do whatever you feel like to the Footer div. Append away!

And no, the most "site wide" you can do is dashboard.js in each app you have. And it only then applies to dashboards. There is not a "globally overwritten" js that I am aware of.

0 Karma

alacercogitatus
SplunkTrust
SplunkTrust

also, @jeffrey_charbonnet, find me in Slack or IRC. Lots of good resources for stuff like this. http://splk.it/slack

0 Karma

richgalloway
SplunkTrust
SplunkTrust

Have you tried restarting Splunk?

---
If this reply helps you, Karma would be appreciated.
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 ...