Problem with whitespace in category name

[kionez]

There's a problem when the category has a namespace, such as "Power dns" [1], the generated tab has "power dns" as ID and you can't click and open it on corresponding label with href "#power dns". I don't know what templating engine is used, but maybe there is a "strip whitespace" option, I'll try to fix it :)

1: https://github.com/munin-monitoring/contrib/blob/master/plugins/network/dns/pdns_queries

[jonnymccullagh]

This issue has been raised a few times. Unfortuntely I can't solve it from the template end so I can only recommend changing the category names in the munin plugins with an underscore instead of a space e.g. power_dns rather than power dns

[stromsoe]

Instead of using the category, modify munin-nodeview.tmpl (not sure if anything else needs to be edited) use a placeholder and the counter variable to increment inside the href and the id. Something like:
<TMPL_INCLUDE NAME="partial/head.tmpl">

<ul id="tabs" class="nav nav-tabs" data-tabs="tabs">
  <TMPL_LOOP NAME="CATEGORIES">
    <li <TMPL_IF NAME="__FIRST__"> class="active" </TMPL_IF>>
      <a href="#tab<TMPL_VAR NAME="__counter__">" data-toggle="tab"><TMPL_VAR ESCAPE="HTML" NAME="NAME"></a>
    </li>
  </TMPL_LOOP>
</ul>

<div id="my-tab-content" class="tab-content">
  <TMPL_LOOP NAME="CATEGORIES">
    <div class="tab-pane fade <TMPL_IF NAME="__FIRST__">in active</TMPL_IF>" id="tab<TMPL_VAR NAME="__counter__">">
      <TMPL_LOOP NAME="SERVICES">
        <div class="row">
          <div class="col-md-6">
            <a href="<TMPL_VAR NAME="URLX">">
              <img class="img-responsive i<TMPL_IF NAME="STATE_WARNING"> warn</TMPL_IF><TMPL_IF NAME="STATE_CRITICAL"> crit</TMPL_IF>"
               src="<TMPL_VAR NAME="IMGDAY">"
               alt="<TMPL_VAR ESCAPE="HTML" NAME="NAME">"
                   <TMPL_IF NAME="IMGDAYWIDTH">width="<TMPL_VAR NAME="IMGDAYWIDTH">" </TMPL_IF>
               <TMPL_IF NAME="IMGDAYHEIGHT">height="<TMPL_VAR NAME="IMGDAYHEIGHT">"</TMPL_IF>/>
            </a>
          </div>
          <div class="col-md-6">
            <a href="<TMPL_VAR NAME="URLX">">
              <img class="img-responsive i<TMPL_IF NAME="STATE_WARNING"> warn</TMPL_IF><TMPL_IF NAME="STATE_CRITICAL"> crit</TMPL_IF>"
               src="<TMPL_VAR NAME="IMGWEEK">"
               alt="<TMPL_VAR ESCAPE="HTML" NAME="NAME">"
               <TMPL_IF NAME="IMGWEEKWIDTH">width="<TMPL_VAR NAME="IMGWEEKWIDTH">" </TMPL_IF>
               <TMPL_IF NAME="IMGWEEKHEIGHT">height="<TMPL_VAR NAME="IMGWEEKHEIGHT">"</TMPL_IF>/>
            </a>
          </div>
        </div>
      </TMPL_LOOP>
    </div>
  </TMPL_LOOP>
</div>

<TMPL_INCLUDE NAME="partial/footer.tmpl">

[kionez]

I've fixed it in javascript langage (because I know better than templating language used), adding a small js to footer.tmpl

$(document).ready(function() {
    $('ul#tabs').find('li').each(function(a,b){
        $(b).find('a').each(function(c,d) {
            var h = $(d).attr('href');
            $(d).attr('href',h.replace(/ /g, '_'));
        });
    });
    $('div.tab-pane').each(function(a,b){
        var i = $(b).attr('id');
        $(b).attr('id',i.replace(/ /g, '_'));
    });
})