Merge pull request #3274 from Icinga/bugfix/inner-donut-labels-firefox-3226

Donut: place HTML tags outside <svg>

library/Icinga/Chart/Donut.php

@@ -22,6 +22,13 @@ class Donut
      */
     protected $labelBigUrl;
 
+    /**
+     * Whether the big label shall be eye-catching
+     *
+     * @var bool
+     */
+    protected $labelBigEyeCatching = true;
+
     /**
      * Small label in the lower part of the donuts hole
      *
@@ -180,6 +187,30 @@ class Donut
         return $this->labelBigUrl;
     }
 
+    /**
+     * Get whether the big label shall be eye-catching
+     *
+     * @return bool
+     */
+    public function getLabelBigEyeCatching()
+    {
+        return $this->labelBigEyeCatching;
+    }
+
+    /**
+     * Set whether the big label shall be eye-catching
+     *
+     * @param bool $labelBigEyeCatching
+     *
+     * @return $this
+     */
+    public function setLabelBigEyeCatching($labelBigEyeCatching = true)
+    {
+        $this->labelBigEyeCatching = $labelBigEyeCatching;
+
+        return $this;
+    }
+
     /**
      * Set the text of the small label
      *
@@ -274,7 +305,15 @@ class Donut
             $offset -= $slice[0];
         }
 
-        if ($this->getLabelBig() || $this->getLabelSmall()) {
+        $result = array(
+            'tag'     => 'div',
+            'content' => array($svg)
+        );
+
+        $labelBig = (string) $this->getLabelBig();
+        $labelSmall = (string) $this->getLabelSmall();
+
+        if ($labelBig !== '' || $labelSmall !== '') {
             $labels = array(
                 'tag' => 'div',
                 'attributes' => array(
@@ -283,19 +322,21 @@ class Donut
                 'content' => array()
             );
 
-            if ($this->getLabelBig()) {
+            if ($labelBig !== '') {
                 $labels['content'][] =
                     array(
                         'tag' => 'a',
                         'attributes' => array(
                             'href' => $this->getLabelBigUrl() ? $this->getLabelBigUrl()->getAbsoluteUrl() : null,
-                            'class' => 'donut-label-big'
+                            'class' => $this->labelBigEyeCatching
+                                ? 'donut-label-big donut-label-big-eye-catching'
+                                : 'donut-label-big'
                         ),
-                        'content' => $this->shortenLabel($this->getLabelBig())
+                        'content' => $this->shortenLabel($labelBig)
                     );
             }
 
-            if ($this->getLabelSmall()) {
+            if ($labelSmall !== '') {
                 $labels['content'][] = array(
                     'tag' => 'p',
                     'attributes' => array(
@@ -303,14 +344,14 @@ class Donut
                         'x' => '50%',
                         'y' => '50%'
                     ),
-                    'content' => $this->getLabelSmall()
+                    'content' => $labelSmall
                 );
             }
 
-            $svg['content'][] = $labels;
+            $result['content'][] = $labels;
         }
 
-        return $svg;
+        return $result;
     }
 
     /**

modules/monitoring/application/controllers/TacticalController.php

@@ -61,12 +61,10 @@ class TacticalController extends Controller
             ->addSlice($summary->hosts_unreachable_handled, array('class' => 'slice-state-unreachable-handled'))
             ->addSlice($summary->hosts_unreachable_unhandled, array('class' => 'slice-state-unreachable'))
             ->addSlice($summary->hosts_pending, array('class' => 'slice-state-pending'))
-            ->addSlice($summary->hosts_not_checked, array('class' => 'slice-state-not-checked'));
-        if ($summary->hosts_down_unhandled > 0) {
-            $hostSummaryChart
-                ->setLabelBig($summary->hosts_down_unhandled)
-                ->setLabelSmall($this->translate('hosts down'));
-        }
+            ->addSlice($summary->hosts_not_checked, array('class' => 'slice-state-not-checked'))
+            ->setLabelBig($summary->hosts_down_unhandled)
+            ->setLabelBigEyeCatching($summary->hosts_down_unhandled > 0)
+            ->setLabelSmall($this->translate('hosts down'));
 
         $serviceSummaryChart = new Donut();
         $serviceSummaryChart
@@ -78,12 +76,10 @@ class TacticalController extends Controller
             ->addSlice($summary->services_unknown_handled, array('class' => 'slice-state-unknown-handled'))
             ->addSlice($summary->services_unknown_unhandled, array('class' => 'slice-state-unknown'))
             ->addSlice($summary->services_pending, array('class' => 'slice-state-pending'))
-            ->addSlice($summary->services_not_checked, array('class' => 'slice-state-not-checked'));
-        if ($summary->services_critical_unhandled > 0) {
-            $serviceSummaryChart
-                ->setLabelBig($summary->services_critical_unhandled)
-                ->setLabelSmall($this->translate('services critical'));
-        }
+            ->addSlice($summary->services_not_checked, array('class' => 'slice-state-not-checked'))
+            ->setLabelBig($summary->services_critical_unhandled)
+            ->setLabelBigEyeCatching($summary->services_critical_unhandled > 0)
+            ->setLabelSmall($this->translate('services critical'));
 
         $this->view->hostStatusSummaryChart = $hostSummaryChart
             ->setLabelBigUrl($this->view->url(

public/css/icinga/widgets.less

@@ -424,7 +424,7 @@ ul.tree li a.error:hover {
 }
 
 .donut-label-big {
-  color: @color-critical;
+  color: @gray-light;
   font-size: 6em;
   line-height: 0;
   text-anchor: middle;
@@ -433,6 +433,10 @@ ul.tree li a.error:hover {
   }
 }
 
+.donut-label-big-eye-catching {
+  color: @color-critical;
+}
+
 .donut-label-small {
   fill: @text-color;
   font-size: 1.2em;