Auto refresh menu

Put the navigation into a container and reload it once every 15 seconds from a distinct menu action. Include the current path into an URL param to still be able to mark the current menu item as active. fixes #6955
Icinga · Sep 8, 2014 · 545db94 · 545db94
1 parent e8d526f
commit 545db94
Show file tree

Hide file tree

Showing 4 changed files with 45 additions and 13 deletions.
diff --git a/application/controllers/LayoutController.php b/application/controllers/LayoutController.php
@@ -18,10 +18,11 @@ class LayoutController extends ActionController
      */
     public function menuAction()
     {
+        $this->setAutorefreshInterval(15);
         $this->_helper->layout()->disableLayout();
-        $this->view->menuRenderer = new MenuRenderer(
-            Menu::load(), Url::fromRequest()->without('renderLayout')->getRelativeUrl()
-        );
+
+        $url = Url::fromPath($this->getParam('url'));
+        $this->view->menuRenderer = new MenuRenderer(Menu::load(), $url->getRelativeUrl());
     }
 
     /**

diff --git a/application/layouts/scripts/parts/navigation.phtml b/application/layouts/scripts/parts/navigation.phtml
@@ -9,13 +9,20 @@ use Icinga\Web\Widget\SearchDashboard;
 if (! $this->auth()->isAuthenticated()) {
     return;
 }
+$dataIcingaUrl = $this->href(
+    'layout/menu',
+    array('url' => Url::fromRequest()->without('renderLayout')->getAbsoluteUrl())
+);
 
 ?>
-<div id="menu" data-base-target="_main">
+<div
+    id="menu" data-base-target="_main" class="container" data-icinga-url="<?= $dataIcingaUrl?>" data-icinga-refresh="15"
+>
   <? if (SearchDashboard::search('dummy')->getPane('search')->hasComponents()): ?>
-  <form action="<?= $this->href('search') ?>" method="get" role="search">
-    <input type="text" name="q" class="search autofocus" placeholder="<?= $this->translate('Search...') ?>" autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="false" />
-  </form>
+      <form action="<?= $this->href('search') ?>" method="get" role="search">
+        <input type="text" name="q" class="search autofocus" placeholder="<?= $this->translate('Search...') ?>"
+               autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="false" />
+      </form>
   <? endif; ?>
-<?= new MenuRenderer(Menu::load(), Url::fromRequest()->without('renderLayout')->getRelativeUrl()); ?>
+  <?= new MenuRenderer(Menu::load(), Url::fromRequest()->without('renderLayout')->getRelativeUrl()); ?>
 </div>
diff --git a/application/views/scripts/layout/menu.phtml b/application/views/scripts/layout/menu.phtml
@@ -1 +1,13 @@
-<?= $menuRenderer; ?>
+<?php
+use Icinga\Web\Widget\SearchDashboard;
+?>
+
+<? if (SearchDashboard::search('dummy')->getPane('search')->hasComponents()): ?>
+    <form action="<?= $this->href('search') ?>" method="get" role="search">
+        <input
+            type="text" name="q" class="search autofocus" placeholder="<?= $this->translate('Search...') ?>"
+            autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="false"
+        />
+    </form>
+<? endif; ?>
+<?= $menuRenderer; ?>
diff --git a/public/js/icinga/events.js b/public/js/icinga/events.js
@@ -10,6 +10,8 @@
 
     'use strict';
 
+    var activeMenuId;
+
     var mouseX, mouseY;
 
     Icinga.Events = function (icinga) {
@@ -133,22 +135,25 @@
                 if (!icinga.utils.elementsOverlap(arrow, el)) {
                     return;
                 }
-
                 var title = $(this).find('.tipsy-inner').html();
                 var atMouse = document.elementFromPoint(mouseX, mouseY);
                 var nearestTip = $(atMouse)
                     .closest('[original-title="' + title + '"]')[0];
                 if (nearestTip) {
-                    console.log ('migrating orphan...');
                     var tipsy = $.data(nearestTip, 'tipsy');
                     tipsy.$tip = $(this);
                     $.data(this, 'tipsy-pointee', nearestTip);
                 } else {
                     // doesn't match delete
-                    console.log ('deleting orphan...');
                     $(this).remove();
                 }
             });
+
+            // restore menu state
+            if (activeMenuId) {
+                $('#menu .active').removeClass('active');
+                $('#' + activeMenuId).addClass('active');
+            }
         },
 
         /**
@@ -569,7 +574,9 @@
                     $li = $a.closest('li');
                     $('#menu .active').removeClass('active');
                     $li.addClass('active');
+                    activeMenuId = $($li).attr('id');
                     if ($li.hasClass('hover')) {
+                        $('#menu .active').removeClass('active');
                         $li.removeClass('hover');
                     }
                 }
@@ -600,8 +607,13 @@
             // Load link URL
             icinga.loader.loadUrl(href, $target);
 
-            // Menu links should remove all but the first layout column
             if (isMenuLink) {
+                // update target url of the menu container to the clicked link
+                var menuDataUrl = icinga.utils.parseUrl($('#menu').data('icinga-url'));
+                menuDataUrl = icinga.utils.addUrlParams(menuDataUrl.path, { url: href });
+                $('#menu').data('icinga-url', menuDataUrl);
+
+                // Menu links should remove all but the first layout column
                 icinga.ui.layout1col();
             }