Feature/optimize for actual mobile devices

application/controllers/LayoutController.php

@@ -3,13 +3,15 @@
 
 namespace Icinga\Controllers;
 
-use Icinga\Web\Controller\ActionController;
 use Icinga\Web\Menu;
+use Icinga\Web\Navigation\Mobile\MobileConfigMenu;
+use Icinga\Web\Navigation\Mobile\MobileMenu;
+use ipl\Web\Compat\CompatController;
 
 /**
  * Create complex layout parts
  */
-class LayoutController extends ActionController
+class LayoutController extends CompatController
 {
     /**
      * Render the menu
@@ -21,6 +23,22 @@ public function menuAction()
         $this->view->menuRenderer = (new Menu())->getRenderer();
     }
 
+    public function mobileConfigMenuAction()
+    {
+        $this->setAutorefreshInterval(15);
+        $this->_helper->layout()->disableLayout();
+        $this->view->compact = true;
+        $this->getDocument()->addHtml(new MobileConfigMenu());
+    }
+
+    public function mobileMenuAction()
+    {
+        $this->setAutorefreshInterval(15);
+        $this->_helper->layout()->disableLayout();
+        $this->view->compact = true;
+        $this->getDocument()->addHtml(new MobileMenu());
+    }
+
     public function announcementsAction()
     {
         $this->_helper->layout()->disableLayout();

application/layouts/scripts/body.phtml

@@ -1,8 +1,11 @@
 <?php
 
-use Icinga\Web\Url;
-use Icinga\Web\Notification;
 use Icinga\Authentication\Auth;
+use Icinga\Web\Navigation\Mobile\MobileConfigMenu;
+use Icinga\Web\Navigation\Mobile\MobileMenu;
+use Icinga\Web\Notification;
+use Icinga\Web\Url;
+use Icinga\Web\Widget\SearchDashboard;
 use ipl\Html\HtmlString;
 use ipl\Web\Widget\Icon;
 
@@ -24,6 +27,9 @@ if ($this->layout()->inlineLayout) {
     $inlineLayoutScript = 'inline.phtml';
 }
 
+$searchDashboard = new SearchDashboard();
+$searchDashboard->setUser($this->Auth()->getUser());
+
 ?>
 <div id="header">
     <div id="announcements" class="container">
@@ -44,9 +50,18 @@ if ($this->layout()->inlineLayout) {
                     'id'                => 'header-logo'
                 )
             ); ?>
-            <div id="mobile-menu-toggle">
-                <button type="button"><?= $this->icon('menu') ?><?= $this->icon('cancel') ?></button>
-            </div>
+        </div>
+    <?php if ($searchDashboard->search('dummy')->getPane('search')->hasDashlets()): ?>
+        <form id="mobile-searchbar" action="<?= $this->href('search') ?>" method="get" role="search" class="search-control">
+            <input type="text" name="q" id="search" class="search search-input" required
+                   placeholder="<?= $this->translate('Search everything') ?> &hellip;"
+                   autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="false">
+            <button class="search-reset icon-cancel" type="reset"></button>
+        </form>
+    <?php endif; ?>
+        <div id="mobile-config-menu" data-last-update="-1" data-base-target="_main" class="container"
+             data-icinga-url="<?= $this->href('layout/mobile-config-menu') ?>"  data-icinga-refresh="15">
+            <?= new MobileConfigMenu() ?>
         </div>
         <?= $this->render('parts/navigation.phtml'); ?>
     </div>
@@ -68,7 +83,6 @@ if ($this->layout()->inlineLayout) {
 </div>
 <div id="footer">
   <ul role="alert" id="notifications"><?php
-
     $notifications = Notification::getInstance();
     if ($notifications->hasMessages()) {
         foreach ($notifications->popMessages() as $m) {
@@ -95,4 +109,8 @@ if ($this->layout()->inlineLayout) {
     }
   ?></ul>
   <div id="application-state-summary" class="container" data-icinga-url="<?= $this->url('application-state/summary') ?>" data-last-update="-1" data-icinga-refresh="60"></div>
+    <div id="mobile-menu" data-last-update="-1" data-base-target="_main" class="container"
+         data-icinga-url="<?= $this->href('layout/mobile-menu') ?>"  data-icinga-refresh="15">
+        <?= new MobileMenu() ?>
+    </div>
 </div>

application/layouts/scripts/layout.phtml

@@ -34,6 +34,7 @@ $innerLayoutScript = $this->layout()->innerLayout . '.phtml';
   <meta name="apple-mobile-web-app-capable" content="yes">
   <meta name="application-name" content="Icinga Web 2">
   <meta name="apple-mobile-web-app-title" content="Icinga">
+  <link rel="manifest" href=<?= $this->baseUrl('img/manifest.json') ?>>
   <link rel="mask-icon" href="<?= $this->baseUrl('img/website-icon.svg') ?>" color="#0096BF">
 <?php if ($isIframe): ?>
   <base target="_parent">

application/layouts/scripts/parts/navigation.phtml

@@ -20,7 +20,7 @@ if (! $this->auth()->isAuthenticated()) {
     </ul>
 </div>
 <div id="menu" data-last-update="-1" data-base-target="_main" class="container"
-      data-icinga-url="<?= $this->href('layout/menu') ?>"  data-icinga-refresh="15">
+      data-icinga-url="<?= $this->href('layout/menu') ?>" data-icinga-refresh="15">
     <?= $this->partial(
         'layout/menu.phtml',
         'default',

library/Icinga/Common/HealthBadgeTrait.php

@@ -0,0 +1,78 @@
+<?php
+/* Icinga Web 2 | (c) 2022 Icinga GmbH | GPLv2+ */
+
+namespace Icinga\Common;
+
+use Icinga\Application\Hook\HealthHook;
+use ipl\Web\Widget\StateBadge;
+
+trait HealthBadgeTrait
+{
+    private $STATE_OK = 'ok';
+    private $STATE_CRITICAL = 'critical';
+    private $STATE_WARNING = 'warning';
+    private $STATE_PENDING = 'pending';
+    private $STATE_UNKNOWN = 'unknown';
+
+    /** @var string The state of the worst health problem item */
+    protected $state;
+
+    /** @var string The message of the worst health problem item */
+    protected $title;
+
+    /**
+     * Create Health Badge
+     *
+     * @return StateBadge $stateBadge
+     */
+    protected function createHealthBadge()
+    {
+        $stateBadge = null;
+        if ($this->getHealthCount() > 0) {
+            $stateBadge = new StateBadge($this->getHealthCount(), $this->state);
+            $stateBadge->addAttributes(['class' => 'disabled', 'title' => $this->title]);
+        }
+
+        return $stateBadge;
+    }
+
+    /**
+     * Get the number of health problems
+     *
+     * @return int $count
+     */
+    protected function getHealthCount()
+    {
+        $count = 0;
+        $title = null;
+        $worstState = null;
+        foreach (HealthHook::collectHealthData()->select() as $result) {
+            if ($worstState === null || $result->state > $worstState) {
+                $worstState = $result->state;
+                $title = $result->message;
+                $count = 1;
+            } elseif ($worstState === $result->state) {
+                $count++;
+            }
+        }
+
+        switch ($worstState) {
+            case HealthHook::STATE_OK:
+                $count = 0;
+                break;
+            case HealthHook::STATE_WARNING:
+                $this->state = $this->STATE_WARNING;
+                break;
+            case HealthHook::STATE_CRITICAL:
+                $this->state = $this->STATE_CRITICAL;
+                break;
+            case HealthHook::STATE_UNKNOWN:
+                $this->state = $this->STATE_UNKNOWN;
+                break;
+        }
+
+        $this->title = $title;
+
+        return $count;
+    }
+}

library/Icinga/Web/JavaScript.php

@@ -36,6 +36,7 @@ class JavaScript
         'js/icinga/behavior/dropdown.js',
         'js/icinga/behavior/navigation.js',
         'js/icinga/behavior/form.js',
+        'js/icinga/behavior/flyout-menu.js',
         'js/icinga/behavior/actiontable.js',
         'js/icinga/behavior/flyover.js',
         'js/icinga/behavior/filtereditor.js',

library/Icinga/Web/Navigation/ConfigMenu.php

@@ -3,25 +3,19 @@
 
 namespace Icinga\Web\Navigation;
 
-use Icinga\Application\Hook\HealthHook;
 use Icinga\Application\Icinga;
-use Icinga\Application\Logger;
 use Icinga\Authentication\Auth;
+use Icinga\Common\HealthBadgeTrait;
 use ipl\Html\Attributes;
 use ipl\Html\BaseHtmlElement;
 use ipl\Html\HtmlElement;
 use ipl\Html\Text;
 use ipl\Web\Url;
 use ipl\Web\Widget\Icon;
-use ipl\Web\Widget\StateBadge;
 
 class ConfigMenu extends BaseHtmlElement
 {
-    const STATE_OK = 'ok';
-    const STATE_CRITICAL = 'critical';
-    const STATE_WARNING = 'warning';
-    const STATE_PENDING = 'pending';
-    const STATE_UNKNOWN = 'unknown';
+    use HealthBadgeTrait;
 
     protected $tag = 'ul';
 
@@ -35,6 +29,10 @@ class ConfigMenu extends BaseHtmlElement
 
     protected $state;
 
+    protected $healthBadge;
+
+    protected $flyoutID = 'config-menu-flyout';
+
     public function __construct()
     {
         $this->children = [
@@ -89,6 +87,7 @@ public function __construct()
                 'items' => [
                     'logout' => [
                         'label' => t('Logout'),
+                        'icon' => 'power-off',
                         'atts'  => [
                             'target' => '_self',
                             'class' => 'nav-item-logout'
@@ -99,13 +98,7 @@ public function __construct()
             ]
         ];
 
-        if (Logger::writesToFile()) {
-            $this->children['system']['items']['application_log'] = [
-                'label'       => t('Application Log'),
-                'url'         => 'list/applicationlog',
-                'permission'  => 'application/log'
-            ];
-        }
+        $this->healthBadge = $this->createHealthBadge();
     }
 
     protected function assembleUserMenuItem(BaseHtmlElement $userMenuItem)
@@ -165,7 +158,7 @@ protected function assembleLevel2Nav(BaseHtmlElement $level2Nav)
                 ));
             }
 
-            $ul = HtmlElement::create('ul', ['class' => 'nav']);
+            $ul = HtmlElement::create('ul', ['class' => 'nav flyout-menu']);
             foreach ($c['items'] as $key => $item) {
                 $ul->add($this->createLevel2MenuItem($item, $key));
             }
@@ -176,41 +169,6 @@ protected function assembleLevel2Nav(BaseHtmlElement $level2Nav)
         $level2Nav->add($navContent);
     }
 
-    protected function getHealthCount()
-    {
-        $count = 0;
-        $title = null;
-        $worstState = null;
-        foreach (HealthHook::collectHealthData()->select() as $result) {
-            if ($worstState === null || $result->state > $worstState) {
-                $worstState = $result->state;
-                $title = $result->message;
-                $count = 1;
-            } elseif ($worstState === $result->state) {
-                $count++;
-            }
-        }
-
-        switch ($worstState) {
-            case HealthHook::STATE_OK:
-                $count = 0;
-                break;
-            case HealthHook::STATE_WARNING:
-                $this->state = self::STATE_WARNING;
-                break;
-            case HealthHook::STATE_CRITICAL:
-                $this->state = self::STATE_CRITICAL;
-                break;
-            case HealthHook::STATE_UNKNOWN:
-                $this->state = self::STATE_UNKNOWN;
-                break;
-        }
-
-        $this->title = $title;
-
-        return $count;
-    }
-
     protected function isSelectedItem($item)
     {
         if ($item !== null && Icinga::app()->getRequest()->getUrl()->matches($item['url'])) {
@@ -221,22 +179,11 @@ protected function isSelectedItem($item)
         return false;
     }
 
-    protected function createHealthBadge()
-    {
-        $stateBadge = null;
-        if ($this->getHealthCount() > 0) {
-            $stateBadge = new StateBadge($this->getHealthCount(), $this->state);
-            $stateBadge->addAttributes(['class' => 'disabled']);
-        }
-
-        return $stateBadge;
-    }
-
     protected function createLevel2Menu()
     {
         $level2Nav = HtmlElement::create(
             'div',
-            Attributes::create(['class' => 'nav-level-1 flyout'])
+            Attributes::create(['class' => 'nav-level-1 flyout', 'id' => $this->flyoutID ])
         );
 
         $this->assembleLevel2Nav($level2Nav);
@@ -251,10 +198,16 @@ protected function createLevel2MenuItem($item, $key)
         }
 
         $healthBadge = null;
-        $class = null;
+        $class = '';
         if ($key === 'health') {
             $class = 'badge-nav-item';
-            $healthBadge = $this->createHealthBadge();
+            $healthBadge = $this->healthBadge;
+        }
+
+        $icon = null;
+        if (isset($item['icon'])) {
+            $icon = new Icon($item['icon']);
+            $class .= ' has-icon';
         }
 
         $li = HtmlElement::create(
@@ -265,6 +218,7 @@ protected function createLevel2MenuItem($item, $key)
                     'a',
                     Attributes::create(['href' => Url::fromPath($item['url'])]),
                     [
+                        $icon,
                         $item['label'],
                         isset($healthBadge) ? $healthBadge : ''
                     ]
@@ -292,7 +246,10 @@ protected function createUserMenuItem()
 
     protected function createCogMenuItem()
     {
-        $cogMenuItem = HtmlElement::create('li', ['class' => 'config-nav-item']);
+        $cogMenuItem = HtmlElement::create('li', [
+            'class' => 'config-nav-item',
+            'data-flyout-target' => $this->flyoutID
+        ]);
 
         $this->assembleCogMenuItem($cogMenuItem);