Merge branch 'feature/show-activity-indicator-for-dashlets-8848'

resolves #8848

library/Icinga/Web/Widget/Dashboard/Dashlet.php

@@ -3,8 +3,6 @@
 
 namespace Icinga\Web\Widget\Dashboard;
 
-use Zend_Form_Element_Button;
-use Icinga\Web\Form;
 use Icinga\Web\Url;
 use Icinga\Data\ConfigObject;
 use Icinga\Exception\IcingaException;
@@ -43,6 +41,13 @@ class Dashlet extends UserWidget
      */
     private $disabled = false;
 
+    /**
+     * The progress label being used
+     *
+     * @var string
+     */
+    private $progressLabel;
+
     /**
      * The template string used for rendering this widget
      *
@@ -52,6 +57,7 @@ class Dashlet extends UserWidget
 
     <div class="container" data-icinga-url="{URL}">
         <h1><a href="{FULL_URL}" aria-label="{TOOLTIP}" title="{TOOLTIP}" data-base-target="col1">{TITLE}</a></h1>
+        <p class="progress-label">{PROGRESS_LABEL}<span>.</span><span>.</span><span>.</span></p>
         <noscript>
             <iframe
                 src="{IFRAME_URL}"
@@ -147,6 +153,33 @@ EOD;
         return $this->disabled;
     }
 
+    /**
+     * Set the progress label to use
+     *
+     * @param   string  $label
+     *
+     * @return  $this
+     */
+    public function setProgressLabel($label)
+    {
+        $this->progressLabel = $label;
+        return $this;
+    }
+
+    /**
+     * Return the progress label to use
+     *
+     * @return  string
+     */
+    public function getProgressLabe()
+    {
+        if ($this->progressLabel === null) {
+            return $this->view()->translate('Loading');
+        }
+
+        return $this->progressLabel;
+    }
+
     /**
      * Return this dashlet's structure as array
      *
@@ -185,7 +218,8 @@ EOD;
             '{FULL_URL}',
             '{TOOLTIP}',
             '{TITLE}',
-            '{TITLE_PREFIX}'
+            '{TITLE_PREFIX}',
+            '{PROGRESS_LABEL}'
         );
 
         $replaceTokens = array(
@@ -194,7 +228,8 @@ EOD;
             $url->getUrlWithout(array('view', 'limit')),
             sprintf($view->translate('Show %s', 'dashboard.dashlet.tooltip'), $view->escape($this->getTitle())),
             $view->escape($this->getTitle()),
-            $view->translate('Dashlet') . ': '
+            $view->translate('Dashlet') . ': ',
+            $this->getProgressLabe()
         );
 
         return str_replace($searchTokens, $replaceTokens, $this->template);

library/Icinga/Web/Widget/Dashboard/Pane.php

@@ -191,6 +191,21 @@ class Pane extends UserWidget
         return implode("\n", $dashlets) . "\n";
     }
 
+    /**
+     * Create, add and return a new dashlet
+     *
+     * @param   string  $title
+     * @param   string  $url
+     *
+     * @return  Dashlet
+     */
+    public function createDashlet($title, $url = null)
+    {
+        $dashlet = new Dashlet($title, $url, $this);
+        $this->addDashlet($dashlet);
+        return $dashlet;
+    }
+
     /**
      * Add a dashlet to this pane, optionally creating it if $dashlet is a string
      *
@@ -206,7 +221,7 @@ class Pane extends UserWidget
         if ($dashlet instanceof Dashlet) {
             $this->dashlets[$dashlet->getTitle()] = $dashlet;
         } elseif (is_string($dashlet) && $url !== null) {
-             $this->dashlets[$dashlet] = new Dashlet($dashlet, $url, $this);
+             $this->createDashlet($dashlet, $url);
         } else {
             throw new ConfigurationError('Invalid dashlet added: %s', $dashlet);
         }

library/Icinga/Web/Widget/SearchDashboard.php

@@ -69,10 +69,10 @@ class SearchDashboard extends Dashboard
         usort($searchUrls, array($this, 'compareSearchUrls'));
 
         foreach (array_reverse($searchUrls) as $searchUrl) {
-            $pane->addDashlet(
+            $pane->createDashlet(
                 $searchUrl->title . ': ' . $searchString,
                 Url::fromPath($searchUrl->url, array('q' => $searchString))
-            );
+            )->setProgressLabel($this->view()->translate('Searching'));
         }
 
         return $this;

public/css/icinga/animation.less

@@ -330,4 +330,18 @@
     -webkit-transform: translate(0, -100%);
     transform: translate(0, -100%);
   }
+}
+
+@keyframes blink {
+  0% {
+    opacity: 0.2;
+  }
+
+  20% {
+    opacity: 1;
+  }
+
+  100% {
+    opacity: 0.2;
+  }
 }

public/css/icinga/widgets.less

@@ -338,3 +338,15 @@ li li .badge {
   text-overflow: ellipsis;
 }
 
+.progress-label span {
+  font-size: 1.5em;
+  .animate(blink 1.4s infinite both);
+
+  &:nth-child(2) {
+    animation-delay: .2s;
+  }
+
+  &:nth-child(3) {
+    animation-delay: .4s;
+  }
+}