From b33395ab6b6f1dc52b8f226e41e0ff9f041a04c1 Mon Sep 17 00:00:00 2001
From: Quentin S <chteuchteu@gmail.com>
Date: Fri, 1 May 2015 22:14:38 +0200
Subject: [PATCH] Mimic footer <select> behavior in header (switch
 plugin/node/group)

---
 web/static/css/style-2.1.css               | 55 +++++++++++++++-
 web/static/css/style-2.1.scss              | 44 ++++++++++++-
 web/static/js/munin-domainview.js          |  3 +
 web/static/js/munin-nodeview.js            | 75 +++++++++++-----------
 web/static/js/munin-serviceview.js         | 13 ++--
 web/static/js/script.js                    | 24 +++++++
 web/templates/munin-overview.tmpl          | 30 ++++-----
 web/templates/munin-serviceview.tmpl       |  4 +-
 web/templates/partial/logo_navigation.tmpl | 21 +++++-
 9 files changed, 206 insertions(+), 63 deletions(-)

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 <img> on each graph img
 	graphs.after('<img src="/static/img/loading.gif" class="graph_loading" style="display:none" />');
@@ -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 <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');
 });
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 @@
 					<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">
@@ -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" />
@@ -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" />
@@ -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" />
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 @@
 	</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>
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 @@
 		<h1>
 			<TMPL_LOOP NAME="PATH">
 				<TMPL_IF NAME="PATHNAME"> &bull;
-					<TMPL_IF NAME="PATH"><a href="<TMPL_VAR NAME="PATH">"></TMPL_IF><TMPL_VAR NAME="PATHNAME"><TMPL_IF NAME="PATH"></a></TMPL_IF>
+					<TMPL_IF NAME="PATH">
+						<a href="<TMPL_VAR NAME="PATH">">
+					<TMPL_ELSE>
+						<span class="switchable" data-switch="header">
+					</TMPL_IF>
+					<TMPL_VAR NAME="PATHNAME">
+					<TMPL_IF NAME="PATH">
+						</a>
+					<TMPL_ELSE>
+						</span>
+					</TMPL_IF>
 				<TMPL_ELSE>
 					<a href="/">Overview</a>
 				</TMPL_IF>
@@ -27,4 +37,13 @@
 		</div>
 	</div>
 	<div class="clear"></div>
+	<TMPL_IF NAME="LARGESET">
+		<div class="switchable_content" data-switch="header">
+			<TMPL_LOOP NAME="PEERS">
+				<a <TMPL_IF NAME="LINK">href="<TMPL_VAR NAME="LINK">"</TMPL_IF>>
+					<TMPL_VAR NAME="NAME">
+				</a>
+			</TMPL_LOOP>
+		</div>
+	</TMPL_IF>
 </div>