Mikesch-mp / icingaweb2-module-grafana

Grafana module for Icinga Web 2 (supports InfluxDB & Graphite)
https://icinga.com/community/
GNU General Public License v2.0
240 stars 93 forks source link

display graph in full width #280

Closed puseidr closed 1 year ago

puseidr commented 2 years ago

i've noticesd that the graphes are (mostly but not everytime) not shown in full width (i think, older versions of the module displayed the graphes at 100% of the width on the page)

i'm accessing grafana with the iFrame option and the datasource is influxdb and 98% of the graphes have a fixed width of 613px is this a bug or a feature?

here an example: image

but there are also a few checks/graphes wich are using the full width, but i've not configured the width parameter in the graph settings, dont know why this few graphes are displayed with 100% width. image

is it possible to show all graphes with 100% available width?

PS: when i enable the debug mode the graphes use nearly 90% of the width image

marcorauch commented 2 years ago

+1

cadirol commented 2 years ago

@puseidr See here #268 - same issue, including a workaround

ecm75 commented 2 years ago

@puseidr I don't know if this is still of interest, but here's what is happening in your examples: The width of the div (content) in which the iframe is embedded is determined by other output on that page. In the first screenshot the Plugin Output is so llong that the div is extended to all of the right, same with the debug output. The module declares the iframe to use a width 100%, that is 100% of the containing module div not the content div.

To make the graph always use the complete width of the content div you'd need to change the this:

diff --git a/library/Grafana/ProvidedHook/Grapher.php b/library/Grafana/ProvidedHook/Grapher.php
index 2fa799d..a618c39 100644
--- a/library/Grafana/ProvidedHook/Grapher.php
+++ b/library/Grafana/ProvidedHook/Grapher.php
@@ -444,6 +444,6 @@ class Grapher extends GrapherHook
             $return_html .= " </tbody></table>";

         }
-        return '<div class="icinga-module module-grafana" style="display: inline-block;">' . $this->title . $menu . $return_html . '</div>';
+        return '<div class="icinga-module module-grafana" style="display: inline-block; width: 100%">' . $this->title . $menu . $return_html . '</div>';
     }
 }
puseidr commented 2 years ago

@ecm75 thank you for the explanation, i didn't noticed this before

your fix is exactly the solution i wanted for this problem, hopefully this will be implemented in the next version

Mikesch-mp commented 1 year ago

will be in 2.0.0