Dashlet: Add support for CSS animated progress labels

refs #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);

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;
+  }
+}