Fix inline pie reload.

refs #6124

library/Icinga/Web/Widget/Chart/InlinePie.php

@@ -50,12 +50,10 @@ class InlinePie extends AbstractWidget
      * @var string
      */
     private $template =<<<'EOD'
-    <div class="inlinepie">
+    <img class="inlinepie"
-    <img
         title="{title}" src="{url}" style="width: {width}px; height: {height}px; {style}"
         data-icinga-colors="{colors}" data-icinga-values="{data}"
-    ></img>
+    />
-    </div>
 EOD;
 
     /**
@@ -75,14 +73,14 @@ EOD;
      *
      * @var int The value in px
      */
-    private $width = 31;
+    private $width = 28;
 
     /**
      * The height of the rendered chart
      *
      * @var int The value in px
      */
-    private $height = 31;
+    private $height = 28;
 
     /**
      * The title of the chart

modules/monitoring/application/views/helpers/Perfdata.php

@@ -9,7 +9,7 @@ use Icinga\Module\Monitoring\Plugin\PerfdataSet;
 
 class Zend_View_Helper_Perfdata extends Zend_View_Helper_Abstract
 {
-    public function perfdata($perfdataStr, $compact = false)
+    public function perfdata($perfdataStr, $compact = false, $float = false)
     {
         $result = '';
         $table = array();
@@ -24,11 +24,14 @@ class Zend_View_Helper_Perfdata extends Zend_View_Helper_Abstract
                 $pieChart->setTitle(
                     htmlspecialchars($label) . ': ' . htmlspecialchars($this->formatPerfdataValue($perfdata))
                 );
-                $pieChart->setStyle('float: right;');
+                if (!$float) {
                     $result .= $pieChart->render();
+                } else {
+                    $result .= '<div style="float: right;">' . $pieChart->render() . '</div>';
+                }
             } else {
                 $pieChart->setTitle(htmlspecialchars($label));
-                $pieChart->setStyle('float: left; margin: 0.2em 0.5em 0.2em 0;');
+                $pieChart->setStyle('float: left; margin: 0.2em 0.5em 0.2em 0.5em;');
                 $table[] = '<tr><th>' . $pieChart->render()
                     . htmlspecialchars($label)
                     . '</th><td> '

modules/monitoring/application/views/scripts/list/services.phtml

@@ -54,8 +54,7 @@ foreach ($services as $service):
       </td>
 
       <td>
-
+        <?= $this->perfdata($service->service_perfdata, true, true) ?>
-        <?= $this->perfdata($service->service_perfdata, true) ?>
 
         <?php if (!$service->service_handled && $service->service_state > 0): ?>
         <?= $this->icon('unhandled.png', 'Unhandled') ?>

public/js/icinga/events.js

@@ -68,28 +68,12 @@
 
             $('input.autofocus', el).focus();
 
-            $('div.inlinepie', el).each(function() {
+            $('img.inlinepie', el).each(function() {
-                var $img   = $(this).find('img');
+                icinga.ui.initializeSparklines($(this));
-                var title  = $img.attr('title'),
-                    values = $img.data('icinga-values'),
-                    colors = $img.data('icinga-colors'),
-                    width  = $img.css('width'),
-                    height = $img.css('height');
-                if (colors) {
-                    colors = colors.split(',');
-                }
-                $img.replaceWith(values);
-                $(this).sparkline(
-                    'html',
-                    {
-                        type:   'pie',
-                        sliceColors: colors || ['#44bb77', '#ffaa44', '#ff5566', '#dcd'],
-                        width:  width,
-                        height: height,
-                        tooltipChartTitle: title
-                    }
-                );
             });
+
+            // replace all sparklines
+            $('span.sparkline', el).sparkline('html', { enableTagOptions: true });
         },
 
         /**

public/js/icinga/loader.js

@@ -392,11 +392,14 @@
             }
             this.icinga.ui.initializeTriStates($resp);
 
-            /**
+            // Make multiselection-tables not selectable.
-             * Make multiselection-tables not selectable.
-             */
             this.icinga.ui.prepareMultiselectTables($resp);
 
+            // Replace images with sparklines.
+            $resp.find('img.inlinepie').each(function(){
+                self.icinga.ui.initializeSparklines($(this));
+            });
+
             /* Should we try to fiddle with responses containing full HTML? */
             /*
             if ($('body', $resp).length) {
@@ -442,7 +445,7 @@
                     if (!focusedUrl) {
                         $container = $('document').first();
                     } else {
-                        $container = $('.container[data-icinga-url="' + focusedUrl + '"]');;
+                        $container = $('.container[data-icinga-url="' + focusedUrl + '"]');
                     }
 
                     var $table = $container.find('table.action').first();

public/js/icinga/ui.js

@@ -644,6 +644,32 @@
             }
         },
 
+        /**
+         * Search and replace all inlinepies with html for sparklines.
+         *
+         * @param parent
+         */
+        initializeSparklines: function($container) {
+
+            // replace all remaining images with sparklines
+            var title  = $container.attr('title'),
+                values = $container.data('icinga-values'),
+                colors = $container.data('icinga-colors'),
+                width  = $container.css('width'),
+                height = $container.css('height');
+            if (!values) {
+                return;
+            }
+            $container.replaceWith(
+                '<span sparkTitle="' + title +
+                    '" sparkWidth="'  + width  +
+                    '" sparkHeight="' + height +
+                    '" sparkType="pie" sparkWidth="20" sparkSliceColors="[' +
+                    colors + ']" sparkHeight="20" values="' +
+                    values + '" class="sparkline"></span>'
+            );
+        },
+
         initializeControls: function (parent) {
 
             var self = this;