Skip to content

Commit

Permalink
Mimic footer <select> behavior in header (switch plugin/node/group)
Browse files Browse the repository at this point in the history
  • Loading branch information
@quentin-st
quentin-st committed May 1, 2015
1 parent a2fca2b commit b33395a
Show file tree
Hide file tree
Showing 9 changed files with 206 additions and 63 deletions.
55 changes: 53 additions & 2 deletions web/static/css/style-2.1.css
View file

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

44 changes: 42 additions & 2 deletions web/static/css/style-2.1.scss
View file
Expand Up @@ -228,14 +228,14 @@ a.graphLink.icrit { background-color: #ff0000; }
width: 100%;
@include box-sizing(border-box);

a {
a, span {
color: #fff;
@include transition-duration(200ms);
padding: 2px 6px;
@include border-radius(2px);
border: 1px solid transparent;
}
a:hover {
a:hover, span:hover {
color: #fff;
border-color: rgba(0, 0, 0, 0.15);
background-color: rgba(0, 0, 0, 0.15);
Expand Down Expand Up @@ -926,5 +926,45 @@ td {
h3 { display: block; }
}

.switchable:after {
content: "\25BE";
margin-left: 8px;
font-size: 12px;
@include opacity(0.9);
vertical-align: 10%;
}
.switchable:hover {
cursor: pointer;
}
.switchable_content {
display: none;
margin: 0;
padding: 6px 0;
position: absolute;
background-color: #fff;
width: auto;
@include border-radius(2px);
@include box-shadow(0 1px 4px rgba(0, 0, 0, 0.25));
max-height: 350px;
overflow-y: auto;

a {
display: block;
padding: 0 32px 0 24px;
list-style: none;
height: 32px;
line-height: 32px;
white-space: nowrap;
color: #333;
text-align: left;
font-family: Helvetica, sans-serif;
@include transition-duration(150ms);
}
a:hover {
text-decoration: none;
background-color: rgba(0, 0, 0, 0.05);
}
}

/* Include _style-2.1-responsive file */
@import 'style-2.1-responsive';
3 changes: 3 additions & 0 deletions web/static/js/munin-domainview.js
View file
Expand Up @@ -51,4 +51,7 @@ $(document).ready(function() {
$(this).parent().show();
});
});

// Switch node on header
prepareSwitchable('header');
});
75 changes: 39 additions & 36 deletions web/static/js/munin-nodeview.js
View file
Expand Up @@ -3,15 +3,15 @@
*/

var content,
graphs,
h4s,
tabs;
graphs,
h4s,
tabs;

$(document).ready(function() {
content = $('#content');
graphs = $('.graph');
h4s = $('h4');
tabs = $('.tabs').find('li');
content = $('#content');
graphs = $('.graph');
h4s = $('h4');
tabs = $('.tabs').find('li');

// Append a loading <img> on each graph img
graphs.after('<img src="/static/img/loading.gif" class="graph_loading" style="display:none" />');
Expand All @@ -21,12 +21,12 @@ $(document).ready(function() {

// Prepare filter
prepareFilter('Filter graphs', function(val) {
if (val.length == 0)
showTabs();
else
hideTabs();
if (val.length == 0)
showTabs();
else
hideTabs();

graphs.each(function() {
graphs.each(function() {
var pluginName = $(this).attr('alt');
var src = $(this).attr('src');
var pluginId = src.substr(src.lastIndexOf('/')+1, src.lastIndexOf('-')-src.lastIndexOf('/')-1);
Expand Down Expand Up @@ -55,15 +55,15 @@ $(document).ready(function() {
}
});

// If tabs aren't enabled, they are used as anchors links
if (content.attr('data-tabsenabled') == 'false') {
tabs.each(function() {
if (filterMatches(val, $(this).text()))
$(this).show();
else
$(this).hide();
});
}
// If tabs aren't enabled, they are used as anchors links
if (content.attr('data-tabsenabled') == 'false') {
tabs.each(function() {
if (filterMatches(val, $(this).text()))
$(this).show();
else
$(this).hide();
});
}

// Hide unneccary categories names
$('div[data-category]').each(function() {
Expand All @@ -75,21 +75,24 @@ $(document).ready(function() {
});


// Back to top button
var backToTop = $('#backToTop');
var offset = 300;
// Back to top button
var backToTop = $('#backToTop');
var offset = 300;

$(window).scroll(function() {
if ($(this).scrollTop() > offset)
backToTop.addClass('visible');
else
backToTop.removeClass('visible');
});
$(window).scroll(function() {
if ($(this).scrollTop() > offset)
backToTop.addClass('visible');
else
backToTop.removeClass('visible');
});

backToTop.click(function(e) {
e.preventDefault();
$('body, html').animate({
scrollTop: 0
}, 500);
});

backToTop.click(function(e) {
e.preventDefault();
$('body, html').animate({
scrollTop: 0
}, 500);
});
// Node switch
prepareSwitchable('header');
});
13 changes: 8 additions & 5 deletions web/static/js/munin-serviceview.js
View file
Expand Up @@ -26,13 +26,16 @@ $(document).ready(function() {
}
});

prepareTooltips(typeTds, function(td) {
return td.find('.tooltip');
});
prepareTooltips(typeTds, function(td) {
return td.find('.tooltip');
});

// Append a loading <img> on each graph img
$('.graph').after('<img src="/static/img/loading.gif" class="graph_loading" style="display:none" />');
// Append a loading <img> on each graph img
$('.graph').after('<img src="/static/img/loading.gif" class="graph_loading" style="display:none" />');

// Graphs auto-refresh
startAutoRefresh();

// Switch to another graph in the same node
prepareSwitchable('header');
});
24 changes: 24 additions & 0 deletions web/static/js/script.js
View file
Expand Up @@ -22,6 +22,30 @@ $(document).ready(function() {
$('#filter').parent().hide();
});

/**
* Binds click listener on one switchable (with the data-switch="id" attribute)
* @param switchId Switch name
*/
function prepareSwitchable(switchId) {
$('.switchable[data-switch=' + switchId + ']').click(function() {
var switchableContent = $('.switchable_content[data-switch=' + switchId + ']');
switchableContent.css('left', $(this).position().left);
switchableContent.css('top', $(this).position().top + $(this).height() + 10);
switchableContent.show();

// When clicking outside, hide the div
$(document).bind('mouseup.switchable', function(e) {
if (!switchableContent.is(e.target) // If we're neither clicking on
&& switchableContent.has(e.target).length === 0) { // nor on a descendent
switchableContent.hide();

// Unbind this event
$(document).unbind('click.switchable');
}
});
});
}

/**
* Called by each page to setup header filter
* @param placeholder Input placeholder
Expand Down
30 changes: 15 additions & 15 deletions web/templates/munin-overview.tmpl
View file
Expand Up @@ -19,9 +19,9 @@
<li <TMPL_IF NAME="__LAST__">class="last"</TMPL_IF>>
<TMPL_IF NAME="NCATEGORIES"><span class="host"><TMPL_ELSE><span class="domain"></TMPL_IF><a href="<TMPL_VAR NAME="URL">"><TMPL_VAR ESCAPE="HTML" NAME="NAME"></a></span>
<TMPL_IF NAME="NCATEGORIES">
<div class="overview-sparkline">
<img src="<TMPL_VAR NAME="URL">load-hour.png?&only_graph=1&size_x=90&size_y=28" class="sparkline" alt="Load average by hour for <TMPL_VAR ESCAPE="HTML" NAME="NAME">" />
</div>
<div class="overview-sparkline">
<img src="<TMPL_VAR NAME="URL">load-hour.png?&only_graph=1&size_x=90&size_y=28" class="sparkline" alt="Load average by hour for <TMPL_VAR ESCAPE="HTML" NAME="NAME">" />
</div>
</TMPL_IF>
<TMPL_IF NAME="COMPARE">
<div class="compare">
Expand All @@ -44,10 +44,10 @@
<li <TMPL_IF NAME="__LAST__">class="last"</TMPL_IF>>
<TMPL_IF NAME="NCATEGORIES"><span class="host"><TMPL_ELSE><span class="domain"></TMPL_IF><a href="<TMPL_VAR NAME="URL">"><TMPL_VAR ESCAPE="HTML" NAME="NAME"></a></span>
<TMPL_IF NAME="NCATEGORIES">
<div class="overview-sparkline">
<img src="<TMPL_VAR NAME="URL">load-hour.png?&only_graph=1&size_x=90&size_y=28" class="sparkline" alt="Load average by hour for <TMPL_VAR ESCAPE="HTML" NAME="NAME">" />
</div>
</TMPL_IF>
<div class="overview-sparkline">
<img src="<TMPL_VAR NAME="URL">load-hour.png?&only_graph=1&size_x=90&size_y=28" class="sparkline" alt="Load average by hour for <TMPL_VAR ESCAPE="HTML" NAME="NAME">" />
</div>
</TMPL_IF>
<TMPL_IF NAME="COMPARE">
<div class="compare">
<img src="/static/img/icons/glyphicons-429-git-compare.png" class="glyphicon-compare" alt="Compare" />
Expand All @@ -69,10 +69,10 @@
<li <TMPL_IF NAME="__LAST__">class="last"</TMPL_IF>>
<TMPL_IF NAME="NCATEGORIES"><span class="host"><TMPL_ELSE><span class="domain"></TMPL_IF><a href="<TMPL_VAR NAME="URL">"><TMPL_VAR ESCAPE="HTML" NAME="NAME"></a></span>
<TMPL_IF NAME="NCATEGORIES">
<div class="overview-sparkline">
<img src="<TMPL_VAR NAME="URL">load-hour.png?&only_graph=1&size_x=90&size_y=28" class="sparkline" alt="Load average by hour for <TMPL_VAR ESCAPE="HTML" NAME="NAME">" />
</div>
</TMPL_IF>
<div class="overview-sparkline">
<img src="<TMPL_VAR NAME="URL">load-hour.png?&only_graph=1&size_x=90&size_y=28" class="sparkline" alt="Load average by hour for <TMPL_VAR ESCAPE="HTML" NAME="NAME">" />
</div>
</TMPL_IF>
<TMPL_IF NAME="COMPARE">
<div class="compare">
<img src="/static/img/icons/glyphicons-429-git-compare.png" class="glyphicon-compare" alt="Compare" />
Expand All @@ -94,10 +94,10 @@
<li <TMPL_IF NAME="__LAST__">class="last"</TMPL_IF>>
<TMPL_IF NAME="NCATEGORIES"><span class="host"><TMPL_ELSE><span class="domain"></TMPL_IF><a href="<TMPL_VAR NAME="URL">"><TMPL_VAR ESCAPE="HTML" NAME="NAME"></a></span>
<TMPL_IF NAME="NCATEGORIES">
<div class="overview-sparkline">
<img src="<TMPL_VAR NAME="URL">load-hour.png?&only_graph=1&size_x=90&size_y=28" class="sparkline" alt="Load average by hour for <TMPL_VAR ESCAPE="HTML" NAME="NAME">" />
</div>
</TMPL_IF>
<div class="overview-sparkline">
<img src="<TMPL_VAR NAME="URL">load-hour.png?&only_graph=1&size_x=90&size_y=28" class="sparkline" alt="Load average by hour for <TMPL_VAR ESCAPE="HTML" NAME="NAME">" />
</div>
</TMPL_IF>
<TMPL_IF NAME="COMPARE">
<div class="compare">
<img src="/static/img/icons/glyphicons-429-git-compare.png" class="glyphicon-compare" alt="Compare" />
Expand Down
4 changes: 2 additions & 2 deletions web/templates/munin-serviceview.tmpl
View file
Expand Up @@ -168,7 +168,7 @@
</div>
</div>
<TMPL_INCLUDE NAME="partial/footer.tmpl">
<script src="/static/autorefresh.js"></script>
<script src="/static/munin-serviceview.js"></script>
<script src="/static/js/autorefresh.js"></script>
<script src="/static/js/munin-serviceview.js"></script>
</body>
</html>

0 comments on commit b33395a

Please sign in to comment.