Width of embedded Grafana Dashboard is not changable

[kordickf]

If you want to change the size of the embedded Grafana dashboard, the new values set for the width don't change the size of the dashboard in Icinga. Even though changing the height works, the width just stays the same.

Expected Behavior

Changing the width of the dashboard should change the size of the dashboard and, for example, should make the dashboard bigger or smaller. I've changed the Grapher.php file in order to make this work, the solution is listed below.

Current Behavior

The width of the graph stays just the same, no matter which width is selected - even though changing the height of the dashboard is working as expected. So also changing the width and displaying the graph in the new size should work as needed.

Possible Solution

I've figured out a solution in order to make this work. The Grapher.php file (located in /usr/share/icingaweb2/modules/grafana/library/Grafana/ProvidedHook) needs to be changed as the following:

1. Line 249 currently contains the following line of code:
   $iframehtml = '<iframe src="%s://%s/d-solo/%s/%s?var-hostname=%s&var-service=%s&var-command=%s%s&panelId=%s&orgId=%s&theme=%s&from=%s&to=%s" alt="%s" height="%d" frameBorder="0" style="width: 100%%;"></iframe>';

   This line must be changed to:
   $iframehtml = '<iframe src="%s://%s/d-solo/%s/%s?var-hostname=%s&var-service=%s&var-command=%s%s&panelId=%s&orgId=%s&theme=%s&from=%s&to=%s" alt="%s" height="%d" width="%d" frameBorder="0"></iframe>'; // also include the width in the iframe

2. You then have to add the following variable in order to make this work in line 269:
   $this->width // Add width to implement in iframe

   Also don't forget to add the comma after height in the line above.

3. Last of all, you have to add the following piece of code in line 414:
   $this->width = "100%"; // Add width variable

Steps to Reproduce (for bugs)

1. Login to your Icinga2-Webinterface
2. Go to "Settings"
3. Open "Modules" and select "grafana"
4. Choose "Graphs" and select any Graph you want to change the size of the width
5. Click "Update Graph" and notice that there might not be a change to the size of the width of the graph

Context

I am simply trying to display the graph a bit larger in order to get it more viewable. This shows more information and provides better user experience.

Your Environment

• Icinga Web 2 Grafana version (System - About): v9.3.6
• Icinga Web 2 version and modules (System - About): grafana, monitoring
• Version used (icinga2 --version): r2.13.7-1
• Operating System and version:

System information:
  Platform: Ubuntu
  Platform version: 22.04.2 LTS (Jammy Jellyfish)
  Kernel: Linux
  Kernel version: 5.15.0-60-generic
  Architecture: x86_64

Build information:
  Compiler: GNU 11.3.0
  Build host: runner-hh8q3bz2-project-575-concurrent-0
  OpenSSL version: OpenSSL 3.0.2 15 Mar 2022

• Enabled features (icinga2 feature list): checker command ido-mysql influxdb mainlog notification
• Config validation (icinga2 daemon -C):

[2023-02-28 09:31:15 +0000] information/cli: Icinga application loader (version: r2.13.7-1)
[2023-02-28 09:31:15 +0000] information/cli: Loading configuration file(s).
[2023-02-28 09:31:15 +0000] information/ConfigItem: Committing config item(s).
[2023-02-28 09:31:15 +0000] information/ConfigItem: Instantiated 13 Notifications.
[2023-02-28 09:31:15 +0000] information/ConfigItem: Instantiated 1 IcingaApplication.
[2023-02-28 09:31:15 +0000] information/ConfigItem: Instantiated 2 HostGroups.
[2023-02-28 09:31:15 +0000] information/ConfigItem: Instantiated 1 Host.
[2023-02-28 09:31:15 +0000] information/ConfigItem: Instantiated 1 FileLogger.
[2023-02-28 09:31:15 +0000] information/ConfigItem: Instantiated 1 Downtime.
[2023-02-28 09:31:15 +0000] information/ConfigItem: Instantiated 1 IdoMysqlConnection.
[2023-02-28 09:31:15 +0000] information/ConfigItem: Instantiated 1 CheckerComponent.
[2023-02-28 09:31:15 +0000] information/ConfigItem: Instantiated 1 InfluxdbWriter.
[2023-02-28 09:31:15 +0000] information/ConfigItem: Instantiated 3 Zones.
[2023-02-28 09:31:15 +0000] information/ConfigItem: Instantiated 1 ExternalCommandListener.
[2023-02-28 09:31:15 +0000] information/ConfigItem: Instantiated 1 Endpoint.
[2023-02-28 09:31:15 +0000] information/ConfigItem: Instantiated 1 NotificationComponent.
[2023-02-28 09:31:15 +0000] information/ConfigItem: Instantiated 244 CheckCommands.
[2023-02-28 09:31:15 +0000] information/ConfigItem: Instantiated 1 UserGroup.
[2023-02-28 09:31:15 +0000] information/ConfigItem: Instantiated 3 ServiceGroups.
[2023-02-28 09:31:15 +0000] information/ConfigItem: Instantiated 3 TimePeriods.
[2023-02-28 09:31:15 +0000] information/ConfigItem: Instantiated 1 User.
[2023-02-28 09:31:15 +0000] information/ConfigItem: Instantiated 1 ScheduledDowntime.
[2023-02-28 09:31:15 +0000] information/ConfigItem: Instantiated 12 Services.
[2023-02-28 09:31:15 +0000] information/ConfigItem: Instantiated 2 NotificationCommands.
[2023-02-28 09:31:15 +0000] information/ScriptGlobal: Dumping variables to file '/var/cache/icinga2/icinga2.vars'
[2023-02-28 09:31:15 +0000] information/cli: Finished validating the configuration file(s).

[Mikesch-mp]

For iframe the width is 100% of the available space. setting a width for iframe makes no sense

[kordickf]

But why shouldn't it be possible to change the width of the graph? That makes no sense

[Mikesch-mp]

Its for the rendered image mode. Iam happy if you provide a pr that takes of this options when iframe is choosen/active.