From d0c56126b864b64a052082181f32b638fc231d05 Mon Sep 17 00:00:00 2001 From: Matthias Jentsch Date: Wed, 7 May 2014 17:03:27 +0200 Subject: [PATCH] Fix inline pie reload. refs #6124 --- library/Icinga/Web/Widget/Chart/InlinePie.php | 10 +++---- .../application/views/helpers/Perfdata.php | 15 ++++++----- .../views/scripts/list/services.phtml | 3 +-- public/js/icinga/events.js | 26 ++++--------------- public/js/icinga/loader.js | 11 +++++--- public/js/icinga/ui.js | 26 +++++++++++++++++++ 6 files changed, 52 insertions(+), 39 deletions(-) diff --git a/library/Icinga/Web/Widget/Chart/InlinePie.php b/library/Icinga/Web/Widget/Chart/InlinePie.php index c2ff99314..4b9152b88 100644 --- a/library/Icinga/Web/Widget/Chart/InlinePie.php +++ b/library/Icinga/Web/Widget/Chart/InlinePie.php @@ -50,12 +50,10 @@ class InlinePie extends AbstractWidget * @var string */ private $template =<<<'EOD' -
- -
+ /> 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 diff --git a/modules/monitoring/application/views/helpers/Perfdata.php b/modules/monitoring/application/views/helpers/Perfdata.php index 49e88cae6..ae2c74141 100644 --- a/modules/monitoring/application/views/helpers/Perfdata.php +++ b/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,16 +24,19 @@ class Zend_View_Helper_Perfdata extends Zend_View_Helper_Abstract $pieChart->setTitle( htmlspecialchars($label) . ': ' . htmlspecialchars($this->formatPerfdataValue($perfdata)) ); - $pieChart->setStyle('float: right;'); - $result .= $pieChart->render(); + if (!$float) { + $result .= $pieChart->render(); + } else { + $result .= '
' . $pieChart->render() . '
'; + } } 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[] = '' . $pieChart->render() . htmlspecialchars($label) - . '' + . ' ' . htmlspecialchars($this->formatPerfdataValue($perfdata)) . - ''; + ' '; } } diff --git a/modules/monitoring/application/views/scripts/list/services.phtml b/modules/monitoring/application/views/scripts/list/services.phtml index 111d3336a..35ae7a473 100644 --- a/modules/monitoring/application/views/scripts/list/services.phtml +++ b/modules/monitoring/application/views/scripts/list/services.phtml @@ -54,8 +54,7 @@ foreach ($services as $service): - - perfdata($service->service_perfdata, true) ?> + perfdata($service->service_perfdata, true, true) ?> service_handled && $service->service_state > 0): ?> icon('unhandled.png', 'Unhandled') ?> diff --git a/public/js/icinga/events.js b/public/js/icinga/events.js index d78229a16..93f10d6d3 100644 --- a/public/js/icinga/events.js +++ b/public/js/icinga/events.js @@ -68,28 +68,12 @@ $('input.autofocus', el).focus(); - $('div.inlinepie', el).each(function() { - var $img = $(this).find('img'); - 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 - } - ); + $('img.inlinepie', el).each(function() { + icinga.ui.initializeSparklines($(this)); }); + + // replace all sparklines + $('span.sparkline', el).sparkline('html', { enableTagOptions: true }); }, /** diff --git a/public/js/icinga/loader.js b/public/js/icinga/loader.js index 5d2679d55..3d33aa6d7 100644 --- a/public/js/icinga/loader.js +++ b/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(); diff --git a/public/js/icinga/ui.js b/public/js/icinga/ui.js index e71310d62..bdb9dc714 100644 --- a/public/js/icinga/ui.js +++ b/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( + '' + ); + }, + initializeControls: function (parent) { var self = this;