feature: Added ability to output graphs as svg (#5959)

* feature: Added ability to output graphs as svg * Update graph.inc.php * added ability to gzip various files for web servers
librenms · Feb 22, 2017 · a869168 · a869168
1 parent 1c9cbc4
commit a869168
Show file tree

Hide file tree

Showing 10 changed files with 48 additions and 12 deletions.
diff --git a/doc/Installation/Installation-CentOS-7-Nginx.md b/doc/Installation/Installation-CentOS-7-Nginx.md
@@ -99,6 +99,8 @@ server {
  index       index.php;
  access_log  /opt/librenms/logs/access_log;
  error_log   /opt/librenms/logs/error_log;
+ gzip on;
+ gzip_types text/css application/x-javascript text/richtext image/svg+xml text/plain    text/xsd text/xsl text/xml image/x-icon;
  location / {
   try_files $uri $uri/ @librenms;
  }

diff --git a/doc/Installation/Installation-Ubuntu-1404-Nginx.md b/doc/Installation/Installation-Ubuntu-1404-Nginx.md
@@ -123,6 +123,8 @@ server {
  index       index.php;
  access_log  /opt/librenms/logs/access_log;
  error_log   /opt/librenms/logs/error_log;
+ gzip on;
+ gzip_types text/css application/x-javascript text/richtext image/svg+xml text/plain    text/xsd text/xsl text/xml image/x-icon;
  location / {
   try_files $uri $uri/ @librenms;
  }

diff --git a/doc/Installation/Installation-Ubuntu-1604-Nginx.md b/doc/Installation/Installation-Ubuntu-1604-Nginx.md
@@ -79,6 +79,8 @@ server {
  index       index.php;
  access_log  /opt/librenms/logs/access_log;
  error_log   /opt/librenms/logs/error_log;
+ gzip on;
+ gzip_types text/css application/x-javascript text/richtext image/svg+xml text/plain    text/xsd text/xsl text/xml image/x-icon;
  location / {
   try_files $uri $uri/ @librenms;
  }

diff --git a/html/.htaccess b/html/.htaccess
@@ -3,6 +3,9 @@
 
 Options FollowSymlinks Multiviews
 
+AddType image/svg+xml .svg
+AddOutputFilterByType DEFLATE image/svg+xml
+
 RewriteEngine on
 RewriteBase /
 RewriteCond %{REQUEST_FILENAME} !-f

diff --git a/html/includes/api_functions.inc.php b/html/includes/api_functions.inc.php
@@ -72,7 +72,7 @@ function get_graph_by_port_hostname()
     $vars['height'] = $_GET['height'] ?: 300;
     $auth           = '1';
     $vars['id']     = dbFetchCell("SELECT `P`.`port_id` FROM `ports` AS `P` JOIN `devices` AS `D` ON `P`.`device_id` = `D`.`device_id` WHERE `D`.`hostname`=? AND `P`.`$port`=? AND `deleted` = 0 LIMIT 1", array($hostname, $vars['port']));
-    $app->response->headers->set('Content-Type', 'image/png');
+    $app->response->headers->set(set_image_type());
     rrdtool_initialize(false);
     include 'includes/graphs/graph.inc.php';
     rrdtool_close();
@@ -149,7 +149,7 @@ function get_graph_generic_by_hostname()
     $vars['height'] = $_GET['height'] ?: 300;
     $auth           = '1';
     $vars['device'] = dbFetchCell('SELECT `D`.`device_id` FROM `devices` AS `D` WHERE `D`.`hostname`=?', array($hostname));
-    $app->response->headers->set('Content-Type', 'image/png');
+    $app->response->headers->set(set_image_type());
     rrdtool_initialize(false);
     include 'includes/graphs/graph.inc.php';
     rrdtool_close();
@@ -514,7 +514,7 @@ function get_graph_by_portgroup()
     unset($seperator);
     $vars['type'] = 'multiport_bits_separate';
     $vars['id']   = $if_list;
-    $app->response->headers->set('Content-Type', 'image/png');
+    $app->response->headers->set(set_image_type());
     rrdtool_initialize(false);
     include 'includes/graphs/graph.inc.php';
     rrdtool_close();

diff --git a/html/includes/functions.inc.php b/html/includes/functions.inc.php
@@ -1419,3 +1419,17 @@ function eventlog_severity($eventlog_severity)
             break;
     }
 } // end eventlog_severity
+
+/**
+ *
+ */
+function set_image_type()
+{
+    global $config;
+
+    if ($config['webui']['graph_type'] === 'svg') {
+        return header('Content-type: image/svg+xml');
+    } else {
+        return header('Content-type: image/png');
+    }
+}
diff --git a/html/includes/graphs/common.inc.php b/html/includes/graphs/common.inc.php
@@ -9,15 +9,15 @@
 }
 
 if ($_GET['width']) {
-    $width = mres($_GET['width']);
+    $width = mres($vars['width']);
 }
 
 if ($config['trim_tobias']) {
     $width += 12;
 }
 
 if ($_GET['height']) {
-    $height = mres($_GET['height']);
+    $height = mres($vars['height']);
 }
 
 if ($_GET['inverse']) {

diff --git a/html/includes/graphs/graph.inc.php b/html/includes/graphs/graph.inc.php
@@ -31,7 +31,7 @@
 
 $prev_from = ($from - $period);
 
-$graphfile = $config['temp_dir'].'/'.strgen().'.png';
+$graphfile = $config['temp_dir'].'/'.strgen();
 
 $type    = $graphtype['type'];
 $subtype = $graphtype['subtype'];
@@ -102,6 +102,10 @@ function graph_error($string)
     }
 } else {
     // $rrd_options .= " HRULE:0#999999";
+    if ($config['webui']['graph_type'] === 'svg') {
+        $rrd_options .= " --imgformat=SVG -m 0.75";
+    }
+
     if ($no_file) {
         if ($width < 200) {
             graph_error('No RRD');
@@ -125,8 +129,8 @@ function graph_error($string)
 
             if (is_file($graphfile)) {
                 if (!$debug) {
-                    header('Content-type: image/png');
-                    if ($config['trim_tobias']) {
+                    set_image_type();
+                    if ($config['trim_tobias'] && $config['webui']['graph_type'] !== 'svg') {
                         list($w, $h, $type, $attr) = getimagesize($graphfile);
                         $src_im                    = imagecreatefrompng($graphfile);
                         $src_x = '0';
@@ -156,7 +160,7 @@ function graph_error($string)
                     }
                 } else {
                     echo `ls -l $graphfile`;
-                    echo '<img src="'.data_uri($graphfile, 'image/png').'" alt="graph" />';
+                    echo '<img src="'.data_uri($graphfile, 'image/svg+xml').'" alt="graph" />';
                 }
                 unlink($graphfile);
             } else {

diff --git a/html/pages/settings/webui.inc.php b/html/pages/settings/webui.inc.php
@@ -12,9 +12,17 @@
 );
 
 $graph_conf = array(
-    array('name'               => 'webui.min_graph_height',
-          'descr'              => 'Set the minimum graph height',
-          'type'               => 'text',
+    array('name'             => 'webui.min_graph_height',
+        'descr'              => 'Set the minimum graph height',
+        'type'               => 'text',
+    ),
+    array('name'             => 'webui.graph_type',
+        'descr'              => 'Set the graph type',
+        'type'               => 'select',
+        'options'            => array(
+            'png' => 'png',
+            'svg' => 'svg',
+        ),
     ),
 );
 

diff --git a/sql-schema/166.sql b/sql-schema/166.sql
@@ -0,0 +1 @@
+INSERT INTO config (config_name,config_value,config_default,config_descr,config_group,config_group_order,config_sub_group,config_sub_group_order,config_hidden,config_disabled) values ('webui.graph_type','png','png','Set the default graph type','webui',0,'graph',0,'0','0');