From 573a4ea12f312be92ccbe2b2a420ae26427ac7cb Mon Sep 17 00:00:00 2001 From: Matthias Jentsch Date: Thu, 28 Aug 2014 16:14:59 +0200 Subject: [PATCH 01/10] Fix spelling mistakes --- library/Icinga/Chart/PieChart.php | 2 +- library/Icinga/Chart/Render/RenderContext.php | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/library/Icinga/Chart/PieChart.php b/library/Icinga/Chart/PieChart.php index 7f7541e4e..ed8ae28ea 100644 --- a/library/Icinga/Chart/PieChart.php +++ b/library/Icinga/Chart/PieChart.php @@ -16,7 +16,7 @@ use Icinga\Chart\Render\LayoutBox; /** * Graphing component for rendering Pie Charts. * - * See the graphs.md documentation for futher information about how to use this component + * See the graphs.md documentation for further information about how to use this component */ class PieChart extends Chart { diff --git a/library/Icinga/Chart/Render/RenderContext.php b/library/Icinga/Chart/Render/RenderContext.php index 476d36554..a5d308c6e 100644 --- a/library/Icinga/Chart/Render/RenderContext.php +++ b/library/Icinga/Chart/Render/RenderContext.php @@ -132,7 +132,7 @@ class RenderContext * @param int $x The relative x coordinate * @param int $y The relative y coordinate * - * @return array An x,y tupel containing absolute coordinates + * @return array An x,y tuple containing absolute coordinates * @see RenderContext::toRelative */ public function toAbsolute($x, $y) From f77cd9cafa754761bc487c1d6e18299ceb6061f1 Mon Sep 17 00:00:00 2001 From: Matthias Jentsch Date: Thu, 28 Aug 2014 16:15:51 +0200 Subject: [PATCH 02/10] Fix coding guidelines --- library/Icinga/Chart/PieChart.php | 1 + library/Icinga/Chart/Primitive/PieSlice.php | 2 +- library/Icinga/Chart/Render/Rotator.php | 9 +++------ public/css/icinga/widgets.less | 8 ++++---- 4 files changed, 9 insertions(+), 11 deletions(-) diff --git a/library/Icinga/Chart/PieChart.php b/library/Icinga/Chart/PieChart.php index ed8ae28ea..3e8fb378c 100644 --- a/library/Icinga/Chart/PieChart.php +++ b/library/Icinga/Chart/PieChart.php @@ -337,3 +337,4 @@ class PieChart extends Chart $clipBox->addElement($rect); } } + diff --git a/library/Icinga/Chart/Primitive/PieSlice.php b/library/Icinga/Chart/Primitive/PieSlice.php index 90572a641..d56a73ba5 100644 --- a/library/Icinga/Chart/Primitive/PieSlice.php +++ b/library/Icinga/Chart/Primitive/PieSlice.php @@ -32,7 +32,7 @@ class PieSlice extends Animatable implements Drawable * * @var float */ - private $endRadian= 0; + private $endRadian = 0; /** * The x position of the pie slice's center diff --git a/library/Icinga/Chart/Render/Rotator.php b/library/Icinga/Chart/Render/Rotator.php index 934b784b6..56c1a4685 100644 --- a/library/Icinga/Chart/Render/Rotator.php +++ b/library/Icinga/Chart/Render/Rotator.php @@ -1,10 +1,7 @@ .handle { - background-image: url('../img/tree/tree-plus.gif'); + background-image: url('../img/tree/tree-plus.gif'); } ul.tree li.collapsed > ul { @@ -110,7 +110,7 @@ ul.tree li.collapsed > ul { ul.tree li::before, ul.tree li::after { content: ''; - position: absolute; + position: absolute; right: auto; left: -0.2em; border-color: #aaa; @@ -122,7 +122,7 @@ ul.tree li::before, ul.tree li::after { ul.tree li::before { border-left-width: 1px; top: 0; - width: 1em; + width: 1em; height: 100%; bottom: 1em; } From a9eec0d672c86a89175ba22d9421d377f6cd56dd Mon Sep 17 00:00:00 2001 From: Matthias Jentsch Date: Thu, 28 Aug 2014 16:33:38 +0200 Subject: [PATCH 03/10] Remove useless width and height properties from PieChart --- library/Icinga/Chart/PieChart.php | 45 +------------------------------ 1 file changed, 1 insertion(+), 44 deletions(-) diff --git a/library/Icinga/Chart/PieChart.php b/library/Icinga/Chart/PieChart.php index 3e8fb378c..7e80738ac 100644 --- a/library/Icinga/Chart/PieChart.php +++ b/library/Icinga/Chart/PieChart.php @@ -51,46 +51,6 @@ class PieChart extends Chart */ private $noCaption = false; - /** - * Scaling level of the rendered svgs width in percent. - * - * @var float - */ - private $width = 100; - - /** - * Scaling level of the rendered svgs height in percent. - * - * @var int - */ - private $height = 100; - - /** - * Set the size of the rendered pie-chart svg. - * - * @param $width int The width in percent. - * - * @return self Fluent interface - */ - public function setWidth($width) - { - $this->width = $width; - return $this; - } - - /** - * Set the size of the rendered pie-chart svg. - * - * @param $height int The height in percent. - * - * @return self Fluent interface - */ - public function setHeight($height) - { - $this->height = $height; - return $this; - } - /** * Test if the given pies have the correct format * @@ -111,10 +71,7 @@ class PieChart extends Chart */ protected function build() { - $this->renderer = new SVGRenderer( - $this->type === self::STACKED ? $this->width : count($this->pies) * $this->width, - $this->width - ); + $this->renderer = new SVGRenderer(($this->type === self::STACKED) ? 1 : count($this->pies), 1); foreach ($this->pies as &$pie) { $this->normalizeDataSet($pie); } From 98809a144752e20e3a829e2889b69bae70148581 Mon Sep 17 00:00:00 2001 From: Matthias Jentsch Date: Thu, 28 Aug 2014 16:37:21 +0200 Subject: [PATCH 04/10] Do not use width and height as width and height percentages in the outer SVG element Height and width are solely used to define the SVGs ratio and should not cause side effects on the SVGs size in the site context. --- library/Icinga/Chart/SVGRenderer.php | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/library/Icinga/Chart/SVGRenderer.php b/library/Icinga/Chart/SVGRenderer.php index 69a3ce285..da6015ceb 100644 --- a/library/Icinga/Chart/SVGRenderer.php +++ b/library/Icinga/Chart/SVGRenderer.php @@ -127,8 +127,8 @@ class SVGRenderer $svg = $this->document->createElement('svg'); $svg->setAttribute('xmlns', 'http://www.w3.org/2000/svg'); $svg->setAttribute('xmlns:xlink', 'http://www.w3.org/1999/xlink'); - $svg->setAttribute('width', $this->width . '%'); - $svg->setAttribute('height', $this->height . '%'); + $svg->setAttribute('width', '100%'); + $svg->setAttribute('height', '100%'); $svg->setAttribute( 'viewBox', sprintf( From c5cface661133336f045c19279430ccff986a26b Mon Sep 17 00:00:00 2001 From: Matthias Jentsch Date: Thu, 28 Aug 2014 16:40:34 +0200 Subject: [PATCH 05/10] Improve readability of small pie charts Use a bigger font, to ensure that small pie charts still have readable labels. --- library/Icinga/Chart/Primitive/PieSlice.php | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/library/Icinga/Chart/Primitive/PieSlice.php b/library/Icinga/Chart/Primitive/PieSlice.php index d56a73ba5..631013d69 100644 --- a/library/Icinga/Chart/Primitive/PieSlice.php +++ b/library/Icinga/Chart/Primitive/PieSlice.php @@ -176,7 +176,7 @@ class PieSlice extends Animatable implements Drawable // Draw the text box $text = new Text($rel[0]+1.5, $rel[1], $this->caption); - $text->setFontSize('2.5em'); + $text->setFontSize('5em'); $text->setAlignment(($midRadius > M_PI ? Text::ALIGN_END : Text::ALIGN_START)); $group->appendChild($path->toSvg($ctx)); From 00a2d225a2d01edae0af8625f38a71ea89c7e1ae Mon Sep 17 00:00:00 2001 From: Matthias Jentsch Date: Thu, 28 Aug 2014 16:42:31 +0200 Subject: [PATCH 06/10] Ensure that PieCharts are centered and that labels dont leave the viewBox Add scaling and transformations to move the PieChart into a valid coordinate system and reduce the offset of the labels to make more efficient use of available space. --- library/Icinga/Chart/PieChart.php | 2 +- library/Icinga/Chart/Primitive/PieSlice.php | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/library/Icinga/Chart/PieChart.php b/library/Icinga/Chart/PieChart.php index 7e80738ac..ac3772428 100644 --- a/library/Icinga/Chart/PieChart.php +++ b/library/Icinga/Chart/PieChart.php @@ -122,7 +122,7 @@ class PieChart extends Chart */ public function toSvg(RenderContext $ctx) { - $outerBox = new Canvas('outerGraph', new LayoutBox(0, 0, 100, 100)); + $outerBox = new Canvas('outerGraph', new LayoutBox(33, -5, 40, 40)); $innerBox = new Canvas('graph', new LayoutBox(0, 0, 100, 100)); $labelBox = $ctx->getDocument()->createElement('g'); if (!$this->noCaption) { diff --git a/library/Icinga/Chart/Primitive/PieSlice.php b/library/Icinga/Chart/Primitive/PieSlice.php index 631013d69..33f3cbee7 100644 --- a/library/Icinga/Chart/Primitive/PieSlice.php +++ b/library/Icinga/Chart/Primitive/PieSlice.php @@ -159,7 +159,7 @@ class PieSlice extends Animatable implements Drawable // Draw the handle $path = new Path(array($midX, $midY)); - $midX += ($addOffset + $r/1.8) * ($midRadius > M_PI ? -1 : 1); + $midX += ($addOffset + $r/3) * ($midRadius > M_PI ? -1 : 1); $path->append(array($midX, $midY))->toAbsolute(); $midX += intval($r/2 * sin(M_PI/9)) * ($midRadius > M_PI ? -1 : 1); From 648debff88504cd994d635cfc6d21b1f2ebd32cd Mon Sep 17 00:00:00 2001 From: Matthias Jentsch Date: Thu, 28 Aug 2014 16:50:29 +0200 Subject: [PATCH 07/10] Draw charts for single ServiceGroups as PieChart --- .../controllers/ChartController.php | 81 +++++++++++++------ 1 file changed, 56 insertions(+), 25 deletions(-) diff --git a/modules/monitoring/application/controllers/ChartController.php b/modules/monitoring/application/controllers/ChartController.php index a5d85851e..8fda70909 100644 --- a/modules/monitoring/application/controllers/ChartController.php +++ b/modules/monitoring/application/controllers/ChartController.php @@ -98,7 +98,7 @@ class Monitoring_ChartController extends Controller $this->view->height = intval($this->getParam('height', 500)); $this->view->width = intval($this->getParam('width', 500)); if (count($query) === 1) { - $this->drawGroupPie($query[0]); + $this->drawHostGroupPie($query[0]); } else { $this->drawHostGroupChart($query); } @@ -123,8 +123,12 @@ class Monitoring_ChartController extends Controller $this->view->height = intval($this->getParam('height', 500)); $this->view->width = intval($this->getParam('width', 500)); - $this->drawServiceGroupChart($query); + if (count($query) === 1) { + $this->drawServiceGroupPie($query[0]); + } else { + $this->drawServiceGroupChart($query); + } } private function drawServiceGroupChart($query) @@ -219,30 +223,11 @@ class Monitoring_ChartController extends Controller ); } - private function drawGroupPie($query) + private function drawServiceGroupPie($query) { $this->view->chart = new PieChart(); $this->view->chart->alignTopLeft(); - if (isset($query->hosts_up)) { - $this->view->chart->drawPie(array( - 'data' => array( - (int) $query->hosts_up, - (int) $query->hosts_down_handled, - (int) $query->hosts_down_unhandled, - (int) $query->hosts_unreachable_handled, - (int) $query->hosts_unreachable_unhandled, - (int) $query->hosts_pending - ), - 'colors' => array('#44bb77', '#ff4444', '#ff0000', '#E066FF', '#f099FF', '#fefefe'), - 'labels'=> array( - (int) $query->hosts_up . ' Up Hosts', - (int) $query->hosts_down_handled . t(' Down Hosts (Handled)'), - (int) $query->hosts_down_unhandled . t(' Down Hosts (Unhandled)'), - (int) $query->hosts_unreachable_handled . t(' Unreachable Hosts (Handled)'), - (int) $query->hosts_unreachable_unhandled . t(' Unreachable Hosts (Unhandled)'), - (int) $query->hosts_pending . t(' Pending Hosts') - ) - ), array( + $this->view->chart->drawPie(array( 'data' => array( (int) $query->services_ok, (int) $query->services_warning_unhandled, @@ -263,8 +248,54 @@ class Monitoring_ChartController extends Controller $query->services_unknown_handled . t(' Unreachable Services (Handled)'), $query->services_unknown_unhandled . t(' Unreachable Services (Unhandled)'), $query->services_pending . t(' Pending Services') - ) + ) + )); + } + + private function drawHostGroupPie($query) + { + $this->view->chart = new PieChart(); + $this->view->chart->alignTopLeft(); + $this->view->chart->drawPie(array( + 'data' => array( + (int) $query->hosts_up, + (int) $query->hosts_down_handled, + (int) $query->hosts_down_unhandled, + (int) $query->hosts_unreachable_handled, + (int) $query->hosts_unreachable_unhandled, + (int) $query->hosts_pending + ), + 'colors' => array('#44bb77', '#ff4444', '#ff0000', '#E066FF', '#f099FF', '#fefefe'), + 'labels'=> array( + (int) $query->hosts_up . ' Up Hosts', + (int) $query->hosts_down_handled . t(' Down Hosts (Handled)'), + (int) $query->hosts_down_unhandled . t(' Down Hosts (Unhandled)'), + (int) $query->hosts_unreachable_handled . t(' Unreachable Hosts (Handled)'), + (int) $query->hosts_unreachable_unhandled . t(' Unreachable Hosts (Unhandled)'), + (int) $query->hosts_pending . t(' Pending Hosts') + ) + ), array( + 'data' => array( + (int) $query->services_ok, + (int) $query->services_warning_unhandled, + (int) $query->services_warning_handled, + (int) $query->services_critical_unhandled, + (int) $query->services_critical_handled, + (int) $query->services_unknown_unhandled, + (int) $query->services_unknown_handled, + (int) $query->services_pending + ), + 'colors' => array('#44bb77', '#ff4444', '#ff0000', '#ffff00', '#ffff33', '#E066FF', '#f099FF', '#fefefe'), + 'labels'=> array( + $query->services_ok . ' Up Services', + $query->services_warning_handled . t(' Warning Services (Handled)'), + $query->services_warning_unhandled . t(' Warning Services (Unhandled)'), + $query->services_critical_handled . t(' Down Services (Handled)'), + $query->services_critical_unhandled . t(' Down Services (Unhandled)'), + $query->services_unknown_handled . t(' Unreachable Services (Handled)'), + $query->services_unknown_unhandled . t(' Unreachable Services (Unhandled)'), + $query->services_pending . t(' Pending Services') + ) )); - } } } From e799d65d3ff883f026ea0675ea2ab42f1d3bb1b1 Mon Sep 17 00:00:00 2001 From: Matthias Jentsch Date: Thu, 28 Aug 2014 16:52:02 +0200 Subject: [PATCH 08/10] Only apply SVG responsiveness when not rendered in compact mode Don't let SVGs grow vertically in when displayed in the dashboard, to avoid wasted space --- .../application/controllers/ChartController.php | 5 +++++ .../application/views/scripts/chart/hostgroup.phtml | 13 ++++++++----- .../views/scripts/chart/servicegroup.phtml | 12 +++++++----- public/css/icinga/widgets.less | 5 +++-- 4 files changed, 23 insertions(+), 12 deletions(-) diff --git a/modules/monitoring/application/controllers/ChartController.php b/modules/monitoring/application/controllers/ChartController.php index 8fda70909..305ff92bc 100644 --- a/modules/monitoring/application/controllers/ChartController.php +++ b/modules/monitoring/application/controllers/ChartController.php @@ -22,6 +22,11 @@ use Icinga\Chart\Unit\StaticAxis; class Monitoring_ChartController extends Controller { + public function init() + { + $this->view->compact = $this->_request->getParam('view') === 'compact'; + } + public function testAction() { $this->chart = new GridChart(); diff --git a/modules/monitoring/application/views/scripts/chart/hostgroup.phtml b/modules/monitoring/application/views/scripts/chart/hostgroup.phtml index b319d9a06..22a8a8c05 100644 --- a/modules/monitoring/application/views/scripts/chart/hostgroup.phtml +++ b/modules/monitoring/application/views/scripts/chart/hostgroup.phtml @@ -1,6 +1,9 @@ -
-render(); -?> -
+compact) { ?> +
+ render(); ?> + render() : ''; ?> +
+ + render(); ?> + diff --git a/modules/monitoring/application/views/scripts/chart/servicegroup.phtml b/modules/monitoring/application/views/scripts/chart/servicegroup.phtml index b319d9a06..f24efe5ba 100644 --- a/modules/monitoring/application/views/scripts/chart/servicegroup.phtml +++ b/modules/monitoring/application/views/scripts/chart/servicegroup.phtml @@ -1,6 +1,8 @@ -
-render(); -?> -
+compact) { ?> +
+ render(); ?> +
+ + render(); ?> + diff --git a/public/css/icinga/widgets.less b/public/css/icinga/widgets.less index 7ea480a73..a5c540a1e 100644 --- a/public/css/icinga/widgets.less +++ b/public/css/icinga/widgets.less @@ -175,6 +175,7 @@ ul.tree li a.error:hover { } /* charts should grow as much as possible but never beyond the current viewport's size */ -div.chart { - height: 90vh; +.svg-container-responsive { + padding: 1.5em; + height: 80vh; } From a26370bb121a842ea9f485a2d9277915e6c98a0a Mon Sep 17 00:00:00 2001 From: Matthias Jentsch Date: Thu, 28 Aug 2014 18:25:19 +0200 Subject: [PATCH 09/10] Adjust PieCharts that are rendered without labels Center and resize PieCharts to use the full width and height of the available view port --- library/Icinga/Chart/Inline/PieChart.php | 2 +- library/Icinga/Chart/PieChart.php | 9 +++++++-- 2 files changed, 8 insertions(+), 3 deletions(-) diff --git a/library/Icinga/Chart/Inline/PieChart.php b/library/Icinga/Chart/Inline/PieChart.php index 7b2108720..f42034ebd 100644 --- a/library/Icinga/Chart/Inline/PieChart.php +++ b/library/Icinga/Chart/Inline/PieChart.php @@ -18,11 +18,11 @@ class PieChart extends Inline public function render($output = true) { $pie = new PieChartRenderer(); + $pie->alignTopLeft(); $pie->disableLegend(); $pie->drawPie(array( 'data' => $this->data, 'colors' => $this->colors, 'labels' => $this->labels )); - $pie->setWidth($this->width)->setHeight($this->height); if ($output) { echo $pie->render(); } else { diff --git a/library/Icinga/Chart/PieChart.php b/library/Icinga/Chart/PieChart.php index ac3772428..cc51f85b3 100644 --- a/library/Icinga/Chart/PieChart.php +++ b/library/Icinga/Chart/PieChart.php @@ -122,11 +122,16 @@ class PieChart extends Chart */ public function toSvg(RenderContext $ctx) { - $outerBox = new Canvas('outerGraph', new LayoutBox(33, -5, 40, 40)); - $innerBox = new Canvas('graph', new LayoutBox(0, 0, 100, 100)); $labelBox = $ctx->getDocument()->createElement('g'); if (!$this->noCaption) { + // Scale SVG to make room for captions + $outerBox = new Canvas('outerGraph', new LayoutBox(33, -5, 40, 40)); + $innerBox = new Canvas('graph', new LayoutBox(0, 0, 100, 100)); $innerBox->getLayout()->setPadding(10, 10, 10, 10); + } else { + $outerBox = new Canvas('outerGraph', new LayoutBox(1.5, -10, 124, 124)); + $innerBox = new Canvas('graph', new LayoutBox(0, 0, 100, 100)); + $innerBox->getLayout()->setPadding(0, 0, 0, 0); } $this->createContentClipBox($innerBox); $this->renderPies($innerBox, $labelBox); From 3642b7b6fc3ad0c66be78c3d4d190fe2418cecff Mon Sep 17 00:00:00 2001 From: Matthias Jentsch Date: Thu, 28 Aug 2014 18:27:30 +0200 Subject: [PATCH 10/10] Adjust CSS for inlinePies to be centered on the current line --- library/Icinga/Web/Widget/Chart/InlinePie.php | 2 +- modules/monitoring/application/views/helpers/Perfdata.php | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/library/Icinga/Web/Widget/Chart/InlinePie.php b/library/Icinga/Web/Widget/Chart/InlinePie.php index e4621ba09..da63ec403 100644 --- a/library/Icinga/Web/Widget/Chart/InlinePie.php +++ b/library/Icinga/Web/Widget/Chart/InlinePie.php @@ -50,7 +50,7 @@ class InlinePie extends AbstractWidget sparkType="pie"> diff --git a/modules/monitoring/application/views/helpers/Perfdata.php b/modules/monitoring/application/views/helpers/Perfdata.php index f4cffaea7..3c3c411b9 100644 --- a/modules/monitoring/application/views/helpers/Perfdata.php +++ b/modules/monitoring/application/views/helpers/Perfdata.php @@ -34,7 +34,7 @@ class Zend_View_Helper_Perfdata extends Zend_View_Helper_Abstract // TODO: Should we trust sprintf-style placeholders in perfdata titles? $pieChart->setTooltipFormat('{{label}}: {{formatted}} ({{percent}}%)'); } - $pieChart->setStyle('margin: 0.2em 0.5em 0.2em 0.5em;'); + // $pieChart->setStyle('margin: 0.2em 0.5em 0.2em 0.5em;'); $table[] = '' . $pieChart->render() . htmlspecialchars($perfdata->getLabel()) . ' '