Implement content refresh control next to dropdown tab

refs #7968

library/Icinga/Web/StyleSheet.php

@@ -10,6 +10,7 @@ use Icinga\Web\LessCompiler;
 class StyleSheet
 {
     protected static $lessFiles = array(
+        '../application/fonts/fontello-ifont/css/animation.css',
         '../application/fonts/fontello-ifont/css/ifont-embedded.css',
         'css/vendor/tipsy.css',
         'css/icinga/defaults.less',

library/Icinga/Web/Widget/Tabs.php

@@ -4,6 +4,7 @@
 namespace Icinga\Web\Widget;
 
 use Icinga\Exception\ProgrammingError;
+use Icinga\Web\Url;
 use Icinga\Web\Widget\Tabextension\Tabextension;
 use Icinga\Application\Icinga;
 use Countable;
@@ -23,6 +24,7 @@ class Tabs extends AbstractWidget implements Countable
 <ul class="tabs">
   {TABS}
   {DROPDOWN}
+  {REFRESH}
   {CLOSE}
 </ul>
 EOT;
@@ -59,6 +61,16 @@ EOT;
 </li>
 EOT;
 
+    /**
+     * Template used for the refresh icon
+     *
+     * @var string
+     */
+    private $refreshTpl = <<< 'EOT'
+<li>
+  <a class="refresh" href="{URL}"><i aria-hidden="true" class="icon-cw" data-load-class="icon-spin6 animate-spin"></i></a>
+</li>
+EOT;
 
     /**
      * This is where single tabs added to this container will be stored
@@ -102,6 +114,13 @@ EOT;
      */
     private $title;
 
+    /**
+     * Whether the tabs should contain a refresh icon
+     *
+     * @var bool
+     */
+    private $refreshTab = true;
+
     /**
      * Set whether the current tab is closable
      */
@@ -308,6 +327,14 @@ EOT;
         return $this->closeTpl;
     }
 
+    private function renderRefreshTab()
+    {
+        $url = Url::fromRequest()->without('renderLayout');
+        $tpl = str_replace('{URL}', $url, $this->refreshTpl);
+
+        return $tpl;
+    }
+
     /**
      * Render to HTML
      *
@@ -323,11 +350,13 @@ EOT;
             $drop = $this->renderDropdownTabs();
         }
         $close = $this->closeTab ? $this->renderCloseTab() : '';
+        $refresh = $this->refreshTab ? $this->renderRefreshTab() : '';
 
         return str_replace(
             array(
                 '{TABS}',
                 '{DROPDOWN}',
+                '{REFRESH}',
                 '{CLOSE}',
                 '{HEADER}'
             ),
@@ -335,6 +364,7 @@ EOT;
                 $tabs,
                 $drop,
                 $close,
+                $refresh,
                 $this->renderHeader()
             ),
             $this->baseTpl

public/js/icinga/events.js

@@ -115,6 +115,8 @@
             $(document).on('click', 'a', { self: this }, this.linkClicked);
             $(document).on('click', 'tr[href]', { self: this }, this.linkClicked);
 
+            $(document).on('click', '.refresh', { self: this }, this.refreshContent);
+
             // Select a table row
             $(document).on('click', 'table.multiselect tr[href]', { self: this }, this.rowSelected);
 
@@ -481,6 +483,11 @@
             return false;
         },
 
+        refreshContent: function () {
+            var $icon = $(this).children('i');
+            $icon.addClass($icon.data('load-class'));
+        },
+
         /**
          * Detect the link/form target for a given element (link, form, whatever)
          */