diff --git a/web/static/css/style-2.1.css b/web/static/css/style-2.1.css index c7ae2a1338..7cc8185beb 100644 --- a/web/static/css/style-2.1.css +++ b/web/static/css/style-2.1.css @@ -281,7 +281,7 @@ a.graphLink.icrit { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; } -.header .pageTitle a { +.header .pageTitle a, .header .pageTitle span { color: #fff; -webkit-transition-duration: 200ms; -moz-transition-duration: 200ms; @@ -294,7 +294,7 @@ a.graphLink.icrit { border-radius: 2px; border: 1px solid transparent; } -.header .pageTitle a:hover { +.header .pageTitle a:hover, .header .pageTitle span:hover { color: #fff; border-color: rgba(0, 0, 0, 0.15); background-color: rgba(0, 0, 0, 0.15); @@ -1122,6 +1122,57 @@ td { display: block; } +.switchable:after { + content: "\25BE"; + margin-left: 8px; + font-size: 12px; + opacity: 0.9; + filter: alpha(opacity=90); + vertical-align: 10%; +} + +.switchable:hover { + cursor: pointer; +} + +.switchable_content { + display: none; + margin: 0; + padding: 6px 0; + position: absolute; + background-color: #fff; + width: auto; + -webkit-border-radius: 2px; + -moz-border-radius: 2px; + -ms-border-radius: 2px; + border-radius: 2px; + -webkit-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.25); + -moz-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.25); + -o-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.25); + box-shadow: 0 1px 4px rgba(0, 0, 0, 0.25); + max-height: 350px; + overflow-y: auto; +} +.switchable_content 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; + -webkit-transition-duration: 150ms; + -moz-transition-duration: 150ms; + -o-transition-duration: 150ms; + transition-duration: 150ms; +} +.switchable_content a:hover { + text-decoration: none; + background-color: rgba(0, 0, 0, 0.05); +} + /* Include _style-2.1-responsive file */ /* * This file contains everything that makes munin responsive, and is included in style-2.1 diff --git a/web/static/css/style-2.1.scss b/web/static/css/style-2.1.scss index c641745bbf..fa2a826467 100644 --- a/web/static/css/style-2.1.scss +++ b/web/static/css/style-2.1.scss @@ -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); @@ -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'; diff --git a/web/static/js/munin-domainview.js b/web/static/js/munin-domainview.js index c672a05bdc..f367ae0829 100644 --- a/web/static/js/munin-domainview.js +++ b/web/static/js/munin-domainview.js @@ -51,4 +51,7 @@ $(document).ready(function() { $(this).parent().show(); }); }); + + // Switch node on header + prepareSwitchable('header'); }); diff --git a/web/static/js/munin-nodeview.js b/web/static/js/munin-nodeview.js index 6da91da8c2..d18c2f0b22 100644 --- a/web/static/js/munin-nodeview.js +++ b/web/static/js/munin-nodeview.js @@ -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 on each graph img graphs.after(''); @@ -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); @@ -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() { @@ -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'); }); diff --git a/web/static/js/munin-serviceview.js b/web/static/js/munin-serviceview.js index 0af6481aa4..16666b44dd 100644 --- a/web/static/js/munin-serviceview.js +++ b/web/static/js/munin-serviceview.js @@ -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 on each graph img - $('.graph').after(''); + // Append a loading on each graph img + $('.graph').after(''); // Graphs auto-refresh startAutoRefresh(); + + // Switch to another graph in the same node + prepareSwitchable('header'); }); diff --git a/web/static/js/script.js b/web/static/js/script.js index 781cf5d935..8f78d1f00b 100644 --- a/web/static/js/script.js +++ b/web/static/js/script.js @@ -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 diff --git a/web/templates/munin-overview.tmpl b/web/templates/munin-overview.tmpl index ecf439b569..8c9e06b876 100644 --- a/web/templates/munin-overview.tmpl +++ b/web/templates/munin-overview.tmpl @@ -19,9 +19,9 @@
  • class="last"> "> -
    - load-hour.png?&only_graph=1&size_x=90&size_y=28" class="sparkline" alt="Load average by hour for " /> -
    +
    + load-hour.png?&only_graph=1&size_x=90&size_y=28" class="sparkline" alt="Load average by hour for " /> +
    @@ -44,10 +44,10 @@
  • class="last"> "> -
    - load-hour.png?&only_graph=1&size_x=90&size_y=28" class="sparkline" alt="Load average by hour for " /> -
    -     +
    + load-hour.png?&only_graph=1&size_x=90&size_y=28" class="sparkline" alt="Load average by hour for " /> +
    +
    Compare @@ -69,10 +69,10 @@
  • class="last"> "> -
    - load-hour.png?&only_graph=1&size_x=90&size_y=28" class="sparkline" alt="Load average by hour for " /> -
    -     +
    + load-hour.png?&only_graph=1&size_x=90&size_y=28" class="sparkline" alt="Load average by hour for " /> +
    +
    Compare @@ -94,10 +94,10 @@
  • class="last"> "> -
    - load-hour.png?&only_graph=1&size_x=90&size_y=28" class="sparkline" alt="Load average by hour for " /> -
    -     +
    + load-hour.png?&only_graph=1&size_x=90&size_y=28" class="sparkline" alt="Load average by hour for " /> +
    +
    Compare diff --git a/web/templates/munin-serviceview.tmpl b/web/templates/munin-serviceview.tmpl index 6ffe365271..f8cc3384a4 100644 --- a/web/templates/munin-serviceview.tmpl +++ b/web/templates/munin-serviceview.tmpl @@ -168,7 +168,7 @@
    - - + + diff --git a/web/templates/partial/logo_navigation.tmpl b/web/templates/partial/logo_navigation.tmpl index ddadcf65df..18e61bf7f5 100644 --- a/web/templates/partial/logo_navigation.tmpl +++ b/web/templates/partial/logo_navigation.tmpl @@ -8,7 +8,17 @@

    • - "> + + "> + + + + + + + + + Overview @@ -27,4 +37,13 @@
    + +
    + + href=""> + + + +
    +