Nodeview: save current category in URL and restore it. Fix conflict w…

…ith filter
munin-monitoring · May 3, 2015 · e00cd70 · e00cd70
1 parent 5b709b8
commit e00cd70
Show file tree

Hide file tree

Showing 3 changed files with 82 additions and 59 deletions.
diff --git a/web/static/js/munin-nodeview-tabs.js b/web/static/js/munin-nodeview-tabs.js
@@ -4,76 +4,89 @@
  */
 
 var tabsEnabled,
-    content,
-    tabsContainer,
-    tabs,
-    activeTab;
+	content,
+	tabsContainer,
+	tabs,
+	activeTab;
 
 $(document).ready(function() {
-    content = $('#content');
-    tabsEnabled = content.attr('data-tabsenabled') == 'true';
-    tabsContainer = $('.tabs');
-    tabs = tabsContainer.find('li');
-    activeTab = tabs.first();
-
-
-    // If tabs are disabled, they will serve as links to jump to categories
-    if (!tabsEnabled) {
-        tabs.each(function() {
-            var text = $(this).text();
-            $(this).html('<a href="#' + text + '">' + text + '</a>');
-        });
-
-        return;
-    }
-
-
-    activeTab.addClass('active');
-
-    tabs.click(function() {
-        activeTab = $(this);
-
-        tabs.removeClass('active');
-        activeTab.addClass('active');
-
-        // Hide all categories
-        $('div[data-category]').hide();
-        $('div[data-category="' + activeTab.text() + '"]').show();
-    });
-
-    showTabs();
+	content = $('#content');
+	tabsEnabled = content.attr('data-tabsenabled') == 'true';
+	tabsContainer = $('.tabs');
+	tabs = tabsContainer.find('li');
+
+	// Get active tab
+	var qs = new Querystring();
+	if (qs.contains('cat'))
+		activeTab = tabs.filter(function() { return $(this).text().trim() == qs.get('cat'); });
+	else
+		activeTab = tabs.first();
+
+
+	// If tabs are disabled, they will serve as links to jump to categories
+	if (!tabsEnabled) {
+		tabs.each(function() {
+			var text = $(this).text();
+			$(this).html('<a href="#' + text + '">' + text + '</a>');
+		});
+
+		return;
+	}
+
+	activeTab.addClass('active');
+
+	tabs.click(function() {
+		activeTab = $(this);
+
+		tabs.removeClass('active');
+		activeTab.addClass('active');
+
+		// Hide all categories
+		$('div[data-category]').hide();
+		// Show the right one
+		$('div[data-category="' + activeTab.text() + '"]').show();
+
+		// Save state in URL
+		saveState('cat', activeTab.text());
+	});
+
+	// If there's an active filter, hide tabs
+	if (qs.contains('filter'))
+		hideTabs();
+	else
+		showTabs();
 });
 
 /**
  * Called on filter search begins
  */
 function showTabs() {
-    if (!tabsEnabled)
-        return;
+	if (!tabsEnabled)
+		return;
 
-    // If tabs are already shown, don't do anything
-    if (content.attr('data-tabs') == 'true')
-        return;
+	// If tabs are already shown, don't do anything
+	if (content.attr('data-tabs') == 'true')
+		return;
 
-    content.attr('data-tabs', 'true');
+	content.attr('data-tabs', 'true');
 
-    // Only show activeTab
-    $('div[data-category]').not('[data-category="' + activeTab.text() + '"]').hide();
+	// Only show activeTab category
+	$('div[data-category]').not('[data-category="' + activeTab.text() + '"]').hide();
 }
 
 /**
  * Called on filter search ends
  */
 function hideTabs() {
-    if (!tabsEnabled)
-        return;
+	if (!tabsEnabled)
+		return;
 
-    // If tabs are already hidden, don't do anything
-    if (content.attr('data-tabs') == 'false')
-        return;
+	// If tabs are already hidden, don't do anything
+	if (content.attr('data-tabs') == 'false')
+		return;
 
-    content.attr('data-tabs', 'false');
+	content.attr('data-tabs', 'false');
 
-    // Show back every hidden tabs
-    $('div[data-category]').show();
+	// Show back every hidden category
+	$('div[data-category]').show();
 }
diff --git a/web/static/js/munin-nodeview-timerangeswitch.js b/web/static/js/munin-nodeview-timerangeswitch.js
@@ -98,7 +98,8 @@ function updateURL() {
 	// Get result as URL-ready string
 	var url = $.param(qs.params);
 
-	window.history.replaceState('', 'Overview', '?' + url);
+	var pageName = $(document).find('title').text();
+	window.history.replaceState('', pageName, '?' + url);
 }
 
 /**

diff --git a/web/static/js/script.js b/web/static/js/script.js
@@ -49,7 +49,6 @@ function prepareSwitchable(switchId) {
 
 	// Gray out current element in switchable_content
 	$('.switchable_content[data-switch=' + switchId + ']').children().filter(function() {
-		console.log('Comparing ' + switchable.text() + ' ' + $(this).text());
 		return switchable.text().trim() == $(this).text().trim();
 	}).addClass('current');
 }
@@ -127,17 +126,27 @@ function updateFilterInURL() {
 	// Put the filter query in the URL (to keep it when refreshing the page)
 	var query = $('#filter').val();
 
-	// Add it in current URL parameters list
+	saveState('filter', query);
+}
+
+/**
+ * Saves a var in URL
+ * @param key
+ * @param val
+ */
+function saveState(key, val) {
+	// Encode key=val in URL
 	var qs = new Querystring();
-	qs.set('filter', query);
+	qs.set(key, val);
 
 	// Replace URL
 	var url = $.param(qs.params);
-	var pageName = $(document).find("title").text();
-	window.history.replaceState('', pageName, '?' + url);
+	// Add leading '?'
+	url = url.length > 0 ? '?' + url : '';
+	var pageName = $(document).find('title').text();
+	window.history.replaceState('', pageName, url);
 }
 
-
 /* Tooltips */
 /**
  * Prepares tooltips for current page