Merge branch 'feature/enlarge-graphs-dynamically-59'

fixes #59

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();
     }
 }

library/Graphite/Web/Widget/Graphs.php

@@ -55,6 +55,13 @@ abstract class Graphs extends AbstractWidget
      */
     protected $compact = false;
 
+    /**
+     * Additional CSS classes for the <div/>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 = '<div class="' . implode(' ', $classes) . '">';
+
         shuffle($templateNames);
 
         foreach ($templateNames as $templateName) {
             if ($this->designedForMyMonitoredObjectType($templates[$templateName])) {
                 $charts = $templates[$templateName]->getCharts(static::getMetricsDataSource(), $filter);
                 if (! empty($charts)) {
-                    $result[] = '<div class="images">';
+                    $result[] = $div;
 
                     if (! $this->compact) {
                         $result[] = '<h3>';
@@ -265,4 +276,28 @@ abstract class Graphs extends AbstractWidget
 
         return $this;
     }
+
+    /**
+     * Get additional CSS classes for the <div/>s around the images
+     *
+     * @return string[]
+     */
+    public function getClasses()
+    {
+        return $this->classes;
+    }
+
+    /**
+     * Set additional CSS classes for the <div/>s around the images
+     *
+     * @param string[] $classes
+     *
+     * @return $this
+     */
+    public function setClasses($classes)
+    {
+        $this->classes = $classes;
+
+        return $this;
+    }
 }

public/css/module.less

@@ -13,6 +13,14 @@ div.images {
 
 }
 
+div.images.monitored-object-detail-view {
+  display: block;
+
+  img.graphiteImg {
+    width: 100%;
+  }
+}
+
 ul.legend {
   background: #eee;
   list-style-type: none;

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));