Merge branch 'feature/refresh-control-7968'

resolves #7968

application/fonts/fontello-ifont/LICENSE.txt

@@ -37,3 +37,12 @@ Font license info
    Homepage:  http://www.entypo.com
 
 
+## Fontelico
+
+   Copyright (C) 2012 by Fontello project
+
+   Author:    Crowdsourced, for Fontello project
+   License:   SIL (http://scripts.sil.org/OFL)
+   Homepage:  http://fontello.com
+
+

application/fonts/fontello-ifont/config.json

@@ -6,6 +6,12 @@
   "units_per_em": 1000,
   "ascent": 850,
   "glyphs": [
+    {
+      "uid": "9bc2902722abb366a213a052ade360bc",
+      "css": "spin6",
+      "code": 59508,
+      "src": "fontelico"
+    },
     {
       "uid": "9dd9e835aebe1060ba7190ad2b2ed951",
       "css": "search",

application/fonts/fontello-ifont/css/ifont-codes.css

@@ -114,4 +114,5 @@
 .icon-chart-area:before { content: '\e870'; } /* '' */
 .icon-chart-bar:before { content: '\e871'; } /* '' */
 .icon-beaker:before { content: '\e872'; } /* '' */
-.icon-magic:before { content: '\e873'; } /* '' */
+.icon-magic:before { content: '\e873'; } /* '' */
+.icon-spin6:before { content: '\e874'; } /* '' */

application/fonts/fontello-ifont/css/ifont-ie7-codes.css

@@ -114,4 +114,5 @@
 .icon-chart-area { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = ' '); }
 .icon-chart-bar { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = ' '); }
 .icon-beaker { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = ' '); }
-.icon-magic { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = ' '); }
+.icon-magic { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = ' '); }
+.icon-spin6 { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = ' '); }

application/fonts/fontello-ifont/css/ifont-ie7.css

@@ -125,4 +125,5 @@
 .icon-chart-area { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = ' '); }
 .icon-chart-bar { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = ' '); }
 .icon-beaker { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = ' '); }
-.icon-magic { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = ' '); }
+.icon-magic { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = ' '); }
+.icon-spin6 { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = ' '); }

application/fonts/fontello-ifont/css/ifont.css

@@ -1,10 +1,10 @@
 @font-face {
   font-family: 'ifont';
-  src: url('../font/ifont.eot?81587324');
+  src: url('../font/ifont.eot?6491776');
-  src: url('../font/ifont.eot?81587324#iefix') format('embedded-opentype'),
+  src: url('../font/ifont.eot?6491776#iefix') format('embedded-opentype'),
-       url('../font/ifont.woff?81587324') format('woff'),
+       url('../font/ifont.woff?6491776') format('woff'),
-       url('../font/ifont.ttf?81587324') format('truetype'),
+       url('../font/ifont.ttf?6491776') format('truetype'),
-       url('../font/ifont.svg?81587324#ifont') format('svg');
+       url('../font/ifont.svg?6491776#ifont') format('svg');
   font-weight: normal;
   font-style: normal;
 }
@@ -14,7 +14,7 @@
 @media screen and (-webkit-min-device-pixel-ratio:0) {
   @font-face {
     font-family: 'ifont';
-    src: url('../font/ifont.svg?81587324#ifont') format('svg');
+    src: url('../font/ifont.svg?6491776#ifont') format('svg');
   }
 }
 */
@@ -165,4 +165,5 @@
 .icon-chart-area:before { content: '\e870'; } /* '' */
 .icon-chart-bar:before { content: '\e871'; } /* '' */
 .icon-beaker:before { content: '\e872'; } /* '' */
-.icon-magic:before { content: '\e873'; } /* '' */
+.icon-magic:before { content: '\e873'; } /* '' */
+.icon-spin6:before { content: '\e874'; } /* '' */

application/fonts/fontello-ifont/demo.html

@@ -428,6 +428,9 @@ body {
         <div title="Code: 0xe872" class="the-icons span3"><i class="icon-beaker"></i> <span class="i-name">icon-beaker</span><span class="i-code">0xe872</span></div>
         <div title="Code: 0xe873" class="the-icons span3"><i class="icon-magic"></i> <span class="i-name">icon-magic</span><span class="i-code">0xe873</span></div>
       </div>
+      <div class="row">
+        <div title="Code: 0xe874" class="the-icons span3"><i class="icon-spin6 animate-spin"></i> <span class="i-name">icon-spin6</span><span class="i-code">0xe874</span></div>
+      </div>
     </div>
     <div class="container footer">Generated by <a href="http://fontello.com">fontello.com</a></div>
   </body>

library/Icinga/Web/StyleSheet.php

@@ -13,6 +13,7 @@ class StyleSheet
         '../application/fonts/fontello-ifont/css/ifont-embedded.css',
         'css/vendor/tipsy.css',
         'css/icinga/defaults.less',
+        'css/icinga/animation.less',
         'css/icinga/layout-colors.less',
         'css/icinga/layout-structure.less',
         'css/icinga/menu.less',

library/Icinga/Web/Widget/Tab.php

@@ -42,6 +42,11 @@ class Tab extends AbstractWidget
      */
     private $title = '';
 
+    /**
+     * The label displayed for this tab
+     *
+     * @var string
+     */
     private $label = '';
 
     /**
@@ -118,11 +123,26 @@ class Tab extends AbstractWidget
         return $this->name;
     }
 
+    /**
+     * Set the tab label
+     *
+     * @param string $label
+     */
     public function setLabel($label)
     {
         $this->label = $label;
     }
 
+    /**
+     * Get the tab label
+     *
+     * @return string
+     */
+    public function getLabel()
+    {
+        return $this->label;
+    }
+
     /**
      * @param mixed $title
      */

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,18 @@ EOT;
 </li>
 EOT;
 
+    /**
+     * Template used for the refresh icon
+     *
+     * @var string
+     */
+    private $refreshTpl = <<< 'EOT'
+<li>
+  <a class="spinner" href="{URL}" title="{TITLE}" aria-label="{LABEL}">
+    <i aria-hidden="true" class="icon-cw"></i>
+  </a>
+</li>
+EOT;
 
     /**
      * This is where single tabs added to this container will be stored
@@ -308,6 +322,39 @@ EOT;
         return $this->closeTpl;
     }
 
+    private function renderRefreshTab()
+    {
+        $url = Url::fromRequest()->without('renderLayout');
+        $tab = $this->get($this->getActiveName());
+
+        if ($tab !== null) {
+            $caption = $this->view()->escape(
+                $tab->getLabel()
+            );
+        } else {
+            $caption = t('Content');
+        }
+
+        $label = t(sprintf('Refresh the %s', $caption));
+        $title = $label;
+
+        $tpl = str_replace(
+            array(
+                '{URL}',
+                '{TITLE}',
+                '{LABEL}'
+            ),
+            array(
+                $url,
+                $title,
+                $label
+            ),
+            $this->refreshTpl
+        );
+
+        return $tpl;
+    }
+
     /**
      * Render to HTML
      *
@@ -323,11 +370,13 @@ EOT;
             $drop = $this->renderDropdownTabs();
         }
         $close = $this->closeTab ? $this->renderCloseTab() : '';
+        $refresh = $this->renderRefreshTab();
 
         return str_replace(
             array(
                 '{TABS}',
                 '{DROPDOWN}',
+                '{REFRESH}',
                 '{CLOSE}',
                 '{HEADER}'
             ),
@@ -335,6 +384,7 @@ EOT;
                 $tabs,
                 $drop,
                 $close,
+                $refresh,
                 $this->renderHeader()
             ),
             $this->baseTpl

modules/monitoring/application/forms/Command/Object/CheckNowCommandForm.php

@@ -39,7 +39,7 @@ class CheckNowCommandForm extends ObjectsCommandForm
                         . $this->translate('Check now'),
                     'decorators'    => array('ViewHelper'),
                     'escape'        => false,
-                    'class'         => 'link-like',
+                    'class'         => 'link-like spinner',
                     'title'         => $this->translate('Schedule the next active check to run immediately')
                 )
             )

public/css/icinga/animation.less

@@ -0,0 +1,82 @@
+.animate(@animate) {
+  -moz-animation: @animate;
+  -o-animation: @animate;
+  -webkit-animation: @animate;
+  animation: @animate;
+}
+
+@-moz-keyframes spin {
+  0% {
+    -moz-transform: rotate(0deg);
+    -o-transform: rotate(0deg);
+    -webkit-transform: rotate(0deg);
+    transform: rotate(0deg);
+  }
+
+  100% {
+    -moz-transform: rotate(359deg);
+    -o-transform: rotate(359deg);
+    -webkit-transform: rotate(359deg);
+    transform: rotate(359deg);
+  }
+}
+@-webkit-keyframes spin {
+  0% {
+    -moz-transform: rotate(0deg);
+    -o-transform: rotate(0deg);
+    -webkit-transform: rotate(0deg);
+    transform: rotate(0deg);
+  }
+
+  100% {
+    -moz-transform: rotate(359deg);
+    -o-transform: rotate(359deg);
+    -webkit-transform: rotate(359deg);
+    transform: rotate(359deg);
+  }
+}
+@-o-keyframes spin {
+  0% {
+    -moz-transform: rotate(0deg);
+    -o-transform: rotate(0deg);
+    -webkit-transform: rotate(0deg);
+    transform: rotate(0deg);
+  }
+
+  100% {
+    -moz-transform: rotate(359deg);
+    -o-transform: rotate(359deg);
+    -webkit-transform: rotate(359deg);
+    transform: rotate(359deg);
+  }
+}
+@-ms-keyframes spin {
+  0% {
+    -moz-transform: rotate(0deg);
+    -o-transform: rotate(0deg);
+    -webkit-transform: rotate(0deg);
+    transform: rotate(0deg);
+  }
+
+  100% {
+    -moz-transform: rotate(359deg);
+    -o-transform: rotate(359deg);
+    -webkit-transform: rotate(359deg);
+    transform: rotate(359deg);
+  }
+}
+@keyframes spin {
+  0% {
+    -moz-transform: rotate(0deg);
+    -o-transform: rotate(0deg);
+    -webkit-transform: rotate(0deg);
+    transform: rotate(0deg);
+  }
+
+  100% {
+    -moz-transform: rotate(359deg);
+    -o-transform: rotate(359deg);
+    -webkit-transform: rotate(359deg);
+    transform: rotate(359deg);
+  }
+}

public/css/icinga/tabs.less

@@ -136,3 +136,15 @@ ul.tabs img.icon {
 a.close-tab {
   display: none;
 }
+
+.spinner > i {
+  line-height: 1;
+}
+
+.spinner.active > i  {
+  .animate(spin 2s infinite linear);
+  &:before {
+    // icon-spin6
+    content: '\e874';
+  }
+}

public/font/ifont.svg

@@ -1,7 +1,7 @@
 <?xml version="1.0" standalone="no"?>
 <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
 <svg xmlns="http://www.w3.org/2000/svg">
-<metadata>Copyright (C) 2014 by original authors @ fontello.com</metadata>
+<metadata>Copyright (C) 2015 by original authors @ fontello.com</metadata>
 <defs>
 <font id="ifont" horiz-adv-x="1000" >
 <font-face font-family="ifont" font-weight="400" font-stretch="normal" units-per-em="1000" ascent="850" descent="-150" />
@@ -122,6 +122,7 @@
 <glyph glyph-name="chart-bar" unicode="&#xe871;" d="m357 350v-286h-143v286h143z m214 286v-572h-142v572h142z m572-643v-72h-1143v858h71v-786h1072z m-357 500v-429h-143v429h143z m214 214v-643h-143v643h143z" horiz-adv-x="1142.9" />
 <glyph glyph-name="beaker" unicode="&#xe872;" d="m852 42q31-50 12-85t-78-36h-643q-59 0-79 36t12 85l281 442v223h-36q-14 0-25 11t-10 25 10 25 25 11h286q15 0 25-11t11-25-11-25-25-11h-36v-223z m-435 405l-151-240h397l-152 240-11 17v243h-71v-243z" horiz-adv-x="928.6" />
 <glyph glyph-name="magic" unicode="&#xe873;" d="m664 526l164 163-60 60-164-164z m249 163q0-15-10-25l-717-718q-10-10-25-10t-25 10l-111 111q-10 10-10 25t10 25l718 718q10 10 25 10t25-10l110-111q10-10 10-25z m-753 106l54-16-54-17-17-55-17 55-55 17 55 16 17 55z m195-90l109-34-109-33-34-109-33 109-109 33 109 34 33 109z m519-267l55-17-55-16-17-55-17 55-54 16 54 17 17 55z m-357 357l54-16-54-17-17-55-17 55-54 17 54 16 17 55z" horiz-adv-x="928.6" />
+<glyph glyph-name="spin6" unicode="&#xe874;" d="m855 9c-189-190-520-172-705 13-190 190-200 494-28 695 11 13 21 26 35 34 36 23 85 18 117-13 30-31 35-76 16-112-5-9-9-15-16-22-140-151-145-379-8-516 153-153 407-121 542 34 106 122 142 297 77 451-83 198-305 291-510 222l0 1c236 82 492-24 588-252 71-167 37-355-72-493-11-15-23-29-36-42z" horiz-adv-x="1000" />
 </font>
 </defs>
 </svg>

public/js/icinga/events.js

@@ -226,6 +226,11 @@
             event.stopPropagation();
             event.preventDefault();
 
+            // activate spinner indicator
+            if ($button.hasClass('spinner')) {
+                $button.addClass('active');
+            }
+
             icinga.logger.debug('Submitting form: ' + method + ' ' + url, method);
 
             $target = self.getLinkTargetFor($form);
@@ -438,6 +443,11 @@
                 return;
             }
 
+            // activate spinner indicator
+            if ($a.hasClass('spinner')) {
+                $a.addClass('active');
+            }
+
             // If link has hash tag...
             if (href.match(/#/)) {
                 if (href === '#') {