From 379ee445f52e331828a3a551db866e69f7fd540d Mon Sep 17 00:00:00 2001 From: "Alexander A. Klimov" Date: Wed, 4 Oct 2017 10:48:22 +0200 Subject: [PATCH 1/3] Graphs widget: allow additional CSS classes refs #59 --- library/Graphite/Web/Widget/Graphs.php | 37 +++++++++++++++++++++++++- 1 file changed, 36 insertions(+), 1 deletion(-) diff --git a/library/Graphite/Web/Widget/Graphs.php b/library/Graphite/Web/Widget/Graphs.php index fe65078..3706377 100644 --- a/library/Graphite/Web/Widget/Graphs.php +++ b/library/Graphite/Web/Widget/Graphs.php @@ -55,6 +55,13 @@ abstract class Graphs extends AbstractWidget */ protected $compact = false; + /** + * Additional CSS classes for the
s around the images + * + * @var string[] + */ + protected $classes = []; + /** * Factory, based on the given object * @@ -106,13 +113,17 @@ abstract class Graphs extends AbstractWidget $templates = static::getAllTemplates()->getTemplates(); $templateNames = array_keys($templates); + $classes = $this->classes; + $classes[] = 'images'; + $div = '
'; + shuffle($templateNames); foreach ($templateNames as $templateName) { if ($this->designedForMyMonitoredObjectType($templates[$templateName])) { $charts = $templates[$templateName]->getCharts(static::getMetricsDataSource(), $filter); if (! empty($charts)) { - $result[] = '
'; + $result[] = $div; if (! $this->compact) { $result[] = '

'; @@ -265,4 +276,28 @@ abstract class Graphs extends AbstractWidget return $this; } + + /** + * Get additional CSS classes for the
s around the images + * + * @return string[] + */ + public function getClasses() + { + return $this->classes; + } + + /** + * Set additional CSS classes for the
s around the images + * + * @param string[] $classes + * + * @return $this + */ + public function setClasses($classes) + { + $this->classes = $classes; + + return $this; + } } From fe479a4b327cfa01041714bf44ef26ba42786461 Mon Sep 17 00:00:00 2001 From: "Alexander A. Klimov" Date: Wed, 4 Oct 2017 12:42:19 +0200 Subject: [PATCH 2/3] Enlarge div.images in detail view refs #59 --- .../Graphite/ProvidedHook/Monitoring/DetailviewExtension.php | 1 + public/css/module.less | 4 ++++ 2 files changed, 5 insertions(+) diff --git a/library/Graphite/ProvidedHook/Monitoring/DetailviewExtension.php b/library/Graphite/ProvidedHook/Monitoring/DetailviewExtension.php index c785f0f..7450167 100644 --- a/library/Graphite/ProvidedHook/Monitoring/DetailviewExtension.php +++ b/library/Graphite/ProvidedHook/Monitoring/DetailviewExtension.php @@ -20,6 +20,7 @@ class DetailviewExtension extends DetailviewExtensionHook ->setCompact() ->setWidth(440) ->setHeight(220) + ->setClasses(['monitored-object-detail-view']) ->handleRequest(); } } diff --git a/public/css/module.less b/public/css/module.less index 5ee9fdf..b0fc0e8 100644 --- a/public/css/module.less +++ b/public/css/module.less @@ -13,6 +13,10 @@ div.images { } +div.images.monitored-object-detail-view { + display: block; +} + ul.legend { background: #eee; list-style-type: none; From 84f765808f529a88245e2c2fb40a8a7f22e33606 Mon Sep 17 00:00:00 2001 From: "Alexander A. Klimov" Date: Wed, 4 Oct 2017 15:17:30 +0200 Subject: [PATCH 3/3] Auto-resize graphs in monitored objects detail views on window resize refs #59 --- public/css/module.less | 4 +++ public/js/module.js | 61 ++++++++++++++++++++++++++++++++++++++++++ 2 files changed, 65 insertions(+) diff --git a/public/css/module.less b/public/css/module.less index b0fc0e8..8699853 100644 --- a/public/css/module.less +++ b/public/css/module.less @@ -15,6 +15,10 @@ div.images { div.images.monitored-object-detail-view { display: block; + + img.graphiteImg { + width: 100%; + } } ul.legend { diff --git a/public/js/module.js b/public/js/module.js index c3e5743..b0c0e7b 100644 --- a/public/js/module.js +++ b/public/js/module.js @@ -103,3 +103,64 @@ }(Icinga)); +(function(Icinga, $) { + 'use strict'; + + var extractUrlParams = /^([^?]*)\?(.+)$/; + var parseUrlParam = /^([^=]+)=(.*)$/; + + function updateGraphSizes() { + $("div.images.monitored-object-detail-view img.graphiteImg").each(function() { + var e = $(this); + var src = e.attr("src"); + + if (typeof(src) !== "undefined") { + var matchParams = extractUrlParams.exec(src); + + if (matchParams !== null) { + var urlParams = Object.create(null); + + matchParams[2].split("&").forEach(function(urlParam) { + var matchParam = parseUrlParam.exec(urlParam); + if (matchParam !== null) { + urlParams[matchParam[1]] = matchParam[2]; + } + }); + + if (typeof(urlParams.width) !== "undefined") { + var realWidth = e.width().toString(); + + if (urlParams.width !== realWidth) { + urlParams.width = realWidth; + + var renderedUrlParams = []; + + for (var urlParam in urlParams) { + renderedUrlParams.push(urlParam + "=" + urlParams[urlParam]); + } + + e.attr("src", matchParams[1] + "?" + renderedUrlParams.join("&")); + } + } + } + } + }); + } + + function MonitoredObjectDetailViewExtensionUpdater(icinga) { + Icinga.EventListener.call(this, icinga); + + this.on('rendered', this.onRendered, this); + } + + MonitoredObjectDetailViewExtensionUpdater.prototype = Object.create(Icinga.EventListener.prototype); + + MonitoredObjectDetailViewExtensionUpdater.prototype.onRendered = function() { + $(window).on('resize', updateGraphSizes); + updateGraphSizes(); + }; + + Icinga.Behaviors = Icinga.Behaviors || {}; + + Icinga.Behaviors.MonitoredObjectDetailViewGraphiteExtensionUpdater = MonitoredObjectDetailViewExtensionUpdater; +}(Icinga, jQuery));