mirror/librenms-librenms
1
0
Fork 0
mirror of https://github.com/librenms/librenms.git synced 2024-10-07 16:52:45 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

lazyload refactoring to be less intrusive

Browse Source
This commit is contained in:
Travis Hegner
2015-07-07 09:29:27 -04:00
parent 32e1a5d216
commit 1f5f32ce06
22 changed files with 36 additions and 34 deletions
Download Patch File Download Diff File Expand all files Collapse all files

15
html/includes/functions.inc.php
View File

@@ -191,7 +191,7 @@ function overlib_link($url, $text, $contents, $class)
if ($config['web_mouseover'] === FALSE) {
$output .= ">";
} else {
$output .= " onmouseover=\"return wrap_overlib('".str_replace('data-original', 'src', $contents)."'".$config['overlib_defaults'].",WRAP,HAUTO,VAUTO); \" onmouseout=\"return nd();\">";
$output .= " onmouseover=\"return overlib('".$contents."'".$config['overlib_defaults'].",WRAP,HAUTO,VAUTO); \" onmouseout=\"return nd();\">";
}
$output .= $text."</a>";
@@ -336,6 +336,17 @@ function print_graph_tag($args)
function generate_graph_tag($args)
{
$urlargs = array();
foreach ($args as $key => $arg)
{
$urlargs[] = $key."=".urlencode($arg);
}
return '<img src="graph.php?' . implode('&amp;',$urlargs).'" border="0" />';
}
function generate_lazy_graph_tag($args) {
$urlargs = array();
$w = 0;
$h = 0;
@@ -347,12 +358,12 @@ function generate_graph_tag($args)
break;
case 'height':
$h = $arg;
break;
}
$urlargs[] = $key."=".urlencode($arg);
}
return '<img class="lazy" width="'.$w.'" height="'.$h.'" data-original="graph.php?' . implode('&amp;',$urlargs).'" border="0" />';
}
function generate_graph_js_state($args) {

4
html/includes/print-graphrow.inc.php
View File

@@ -29,9 +29,9 @@ foreach ($periods as $period)
$link = generate_url($link_array);
if ($return_data === TRUE) {
$graph_data[] = overlib_link($link, generate_graph_tag($graph_array), generate_graph_tag($graph_array_zoom), 'lazy');
$graph_data[] = overlib_link($link, generate_lazy_graph_tag($graph_array), generate_graph_tag($graph_array_zoom), NULL);
} else {
echo(overlib_link($link, generate_graph_tag($graph_array), generate_graph_tag($graph_array_zoom), 'lazy'));
echo(overlib_link($link, generate_lazy_graph_tag($graph_array), generate_graph_tag($graph_array_zoom), NULL));
}
}

2
html/includes/table/mempool.inc.php
View File

@@ -43,7 +43,7 @@ foreach (dbFetchRows($sql,$param) as $mempool) {
$graph_array_zoom['height'] = "150";
$graph_array_zoom['width'] = "400";
$link = "graphs/id=" . $graph_array['id'] . "/type=" . $graph_array['type'] . "/from=" . $graph_array['from'] . "/to=" . $graph_array['to'] . "/";
$mini_graph = overlib_link($link, generate_graph_tag($graph_array), generate_graph_tag($graph_array_zoom), NULL);
$mini_graph = overlib_link($link, generate_lazy_graph_tag($graph_array), generate_graph_tag($graph_array_zoom), NULL);
$background = get_percentage_colours($perc);
$bar_link = overlib_link($link, print_percentage_bar (400, 20, $perc, "$used / $total", "ffffff", $background['left'], $free, "ffffff", $background['right']), generate_graph_tag($graph_array_zoom), NULL);

2
html/includes/table/processor.inc.php
View File

@@ -40,7 +40,7 @@ foreach (dbFetchRows($sql,$param) as $processor) {
$graph_array_zoom['height'] = "150";
$graph_array_zoom['width'] = "400";
$link = "graphs/id=" . $graph_array['id'] . "/type=" . $graph_array['type'] . "/from=" . $graph_array['from'] . "/to=" . $graph_array['to'] . "/";
$mini_graph = overlib_link($link, generate_graph_tag($graph_array), generate_graph_tag($graph_array_zoom), NULL);
$mini_graph = overlib_link($link, generate_lazy_graph_tag($graph_array), generate_graph_tag($graph_array_zoom), NULL);
$background = get_percentage_colours($perc);
$bar_link = overlib_link($link, print_percentage_bar (400, 20, $perc, $perc."%", "ffffff", $background['left'], (100 - $perc)."%" , "ffffff", $background['right']), generate_graph_tag($graph_array_zoom), NULL);

2
html/includes/table/storage.inc.php
View File

@@ -59,7 +59,7 @@ foreach (dbFetchRows($sql,$param) as $drive) {
$graph_array_zoom['height'] = "150";
$graph_array_zoom['width'] = "400";
$link = "graphs/id=" . $graph_array['id'] . "/type=" . $graph_array['type'] . "/from=" . $graph_array['from'] . "/to=" . $graph_array['to'] . "/";
$mini_graph = overlib_link($link, generate_graph_tag($graph_array), generate_graph_tag($graph_array_zoom), NULL);
$mini_graph = overlib_link($link, generate_lazy_graph_tag($graph_array), generate_graph_tag($graph_array_zoom), NULL);
$background = get_percentage_colours($perc);
$bar_link = overlib_link($link, print_percentage_bar (400, 20, $perc, "$used / $total", "ffffff", $background['left'], $free, "ffffff", $background['right']), generate_graph_tag($graph_array_zoom), NULL);

9
html/js/lazyload.js
View File

@@ -29,15 +29,6 @@ $(document).ready(function(){
});
});
//We have to wrap the original overlib library to remove the WxH attributes
function wrap_overlib() {
var ret = overlib.apply(null,arguments);
//Since RRD takes the width and height params for only the canvas, we must unset them
//from the final (larger) image to prevent the browser from resizing them.
$('div#overDiv img').removeAttr('width').removeAttr('height').removeClass('lazy');
return ret;
}
function lazyload_done() {
//Since RRD takes the width and height params for only the canvas, we must unset them
//from the final (larger) image to prevent the browser from resizing them.

2
html/pages/apps/default.inc.php
View File

@@ -33,7 +33,7 @@ foreach ($app_devices as $app_device)
$link = generate_url(array('page' => 'device', 'device' => $app_device['device_id'],'tab'=>'apps','app'=>$vars['app']));
echo(overlib_link($link, generate_graph_tag($graph_array), generate_graph_tag($graph_array_zoom), NULL));
echo(overlib_link($link, generate_lazy_graph_tag($graph_array), generate_graph_tag($graph_array_zoom), NULL));
}
echo('</td>');

4
html/pages/device/hrdevice.inc.php
View File

@@ -25,7 +25,7 @@ foreach (dbFetchRows("SELECT * FROM `hrDevice` WHERE `device_id` = ? ORDER BY `h
$graph_array['from'] = $config['time']['day'];
$graph_array_zoom = $graph_array; $graph_array_zoom['height'] = "150"; $graph_array_zoom['width'] = "400";
$mini_graph = overlib_link($proc_url, generate_graph_tag($graph_array), generate_graph_tag($graph_array_zoom), NULL);
$mini_graph = overlib_link($proc_url, generate_lazy_graph_tag($graph_array), generate_graph_tag($graph_array_zoom), NULL);
echo('<td>'.$mini_graph.'</td>');
}
@@ -46,7 +46,7 @@ foreach (dbFetchRows("SELECT * FROM `hrDevice` WHERE `device_id` = ? ORDER BY `h
$graph_array_zoom = $graph_array; $graph_array_zoom['height'] = "150"; $graph_array_zoom['width'] = "400";
// FIXME click on graph should also link to port, but can't use generate_port_link here...
$mini_graph = overlib_link(generate_port_url($interface), generate_graph_tag($graph_array), generate_graph_tag($graph_array_zoom), NULL);
$mini_graph = overlib_link(generate_port_url($interface), generate_lazy_graph_tag($graph_array), generate_graph_tag($graph_array_zoom), NULL);
echo("<td>$mini_graph</td>");
} else {

2
html/pages/device/overview/c6kxbar.inc.php
View File

@@ -76,7 +76,7 @@ foreach ($entity_state['group']['c6kxbar'] as $index => $entry)
$graph_array['width'] = 80; $graph_array['height'] = 20; $graph_array['bg'] = 'ffffff00'; # the 00 at the end makes the area transparent.
$minigraph = generate_graph_tag($graph_array);
$minigraph = generate_lazy_graph_tag($graph_array);
echo("<tr>
<td></td>

2
html/pages/device/overview/generic/sensor.inc.php
View File

@@ -54,7 +54,7 @@ if (count($sensors))
$graph_array['width'] = 80; $graph_array['height'] = 20; $graph_array['bg'] = 'ffffff00'; # the 00 at the end makes the area transparent.
$graph_array['from'] = $config['time']['day'];
$sensor_minigraph = generate_graph_tag($graph_array);
$sensor_minigraph = generate_lazy_graph_tag($graph_array);
$sensor['sensor_descr'] = truncate($sensor['sensor_descr'], 48, '');

2
html/pages/device/overview/mempools.inc.php
View File

@@ -55,7 +55,7 @@ if (count($mempools))
$graph_array['width'] = 80; $graph_array['height'] = 20; $graph_array['bg'] = 'ffffff00'; # the 00 at the end makes the area transparent.
$minigraph = generate_graph_tag($graph_array);
$minigraph = generate_lazy_graph_tag($graph_array);
echo("<tr>
<td>".overlib_link($link, $text_descr, $overlib_content)."</td>

2
html/pages/device/overview/ports.inc.php
View File

@@ -18,7 +18,7 @@ if ($ports['total'])
$graph_array['type'] = "device_bits";
$graph_array['from'] = $config['time']['day'];
$graph_array['legend'] = "no";
$graph = generate_graph_tag($graph_array);
$graph = generate_lazy_graph_tag($graph_array);
$link_array = $graph_array;
$link_array['page'] = "graphs";

2
html/pages/device/overview/processors.inc.php
View File

@@ -45,7 +45,7 @@ if (count($processors))
$graph_array['width'] = 80; $graph_array['height'] = 20; $graph_array['bg'] = 'ffffff00'; # the 00 at the end makes the area transparent.
$minigraph = generate_graph_tag($graph_array);
$minigraph = generate_lazy_graph_tag($graph_array);
echo("<tr>
<td>".overlib_link($link, $text_descr, $overlib_content)."</td>

2
html/pages/device/overview/storage.inc.php
View File

@@ -68,7 +68,7 @@ if (count($drives))
$graph_array['width'] = 80; $graph_array['height'] = 20; $graph_array['bg'] = 'ffffff00'; # the 00 at the end makes the area transparent.
$minigraph = generate_graph_tag($graph_array);
$minigraph = generate_lazy_graph_tag($graph_array);
echo("<tr>
<td>".overlib_link($link, $drive['storage_descr'], $overlib_content)."</td>

2
html/pages/device/overview/toner.inc.php
View File

@@ -42,7 +42,7 @@ if (count($toners))
$graph_array['width'] = 80; $graph_array['height'] = 20; $graph_array['bg'] = 'ffffff00'; # the 00 at the end makes the area transparent.
$minigraph = generate_graph_tag($graph_array);
$minigraph = generate_lazy_graph_tag($graph_array);
echo("<tr>
<td>".overlib_link($link, $toner['toner_descr'], $overlib_content)."</td>

2
html/pages/device/port/junose-atm-vp.inc.php
View File

@@ -28,7 +28,7 @@ foreach (dbFetchRows("SELECT * FROM juniAtmVp WHERE port_id = ?", array($interfa
{
$graph_array['from'] = $$period;
$graph_array_zoom = $graph_array; $graph_array_zoom['height'] = "150"; $graph_array_zoom['width'] = "400";
echo(overlib_link("#", generate_graph_tag($graph_array), generate_graph_tag($graph_array_zoom), NULL));
echo(overlib_link("#", generate_lazy_graph_tag($graph_array), generate_graph_tag($graph_array_zoom), NULL));
}
echo('</td></tr>');

2
html/pages/devices.inc.php
View File

@@ -168,7 +168,7 @@ $query .= " ORDER BY hostname";
<div style=\'font-size: 16px; padding:5px; font-weight: bold; color: #e5e5e5;\'>".$device['hostname']." - ".$interface['ifDescr']."</div>\
<img src=\'graph.php?type=$graph_type&amp;device=".$device['device_id']."&amp;from=".$config['time']['day']."&amp;to=".$config['time']['now']."&amp;width=450&amp;height=150&amp;title=yes\'>\
', CENTER, LEFT, FGCOLOR, '#e5e5e5', BGCOLOR, '#e5e5e5', WIDTH, 400, HEIGHT, 150);\" onmouseout=\"return nd();\" >".
"<img src='graph.php?type=$graph_type&amp;device=".$device['device_id']."&amp;from=".$config['time']['day']."&amp;to=".$config['time']['now']."&amp;width=".$width."&amp;height=110&amp;legend=no&amp;title=yes'>
"<img class='lazy' height='110' width='$width' data-original='graph.php?type=$graph_type&amp;device=".$device['device_id']."&amp;from=".$config['time']['day']."&amp;to=".$config['time']['now']."&amp;width=".$width."&amp;height=110&amp;legend=no&amp;title=yes'>
</a>
</div>");
}

4
html/pages/graphs.inc.php
View File

@@ -98,7 +98,7 @@ if (!$auth)
echo('<td align=center>');
echo('<span class="device-head">'.$text.'</span><br />');
echo('<a href="'.$link.'">');
echo(generate_graph_tag($graph_array));
echo(generate_lazy_graph_tag($graph_array));
echo('</a>');
echo('</td>');
@@ -201,7 +201,7 @@ if (!$auth)
echo generate_graph_js_state($graph_array);
echo('<div style="width: '.$graph_array['width'].'; margin: auto;">');
echo(generate_graph_tag($graph_array));
echo(generate_lazy_graph_tag($graph_array));
echo("</div>");
if (isset($config['graph_descr'][$vars['type']]))

2
html/pages/health/sensors.inc.php
View File

@@ -71,7 +71,7 @@ foreach (dbFetchRows($sql, $param) as $sensor)
$graph_array['width'] = 80; $graph_array['height'] = 20; $graph_array['bg'] = 'ffffff00'; # the 00 at the end makes the area transparent.
$graph_array['from'] = $config['time']['day'];
$sensor_minigraph = generate_graph_tag($graph_array);
$sensor_minigraph = generate_lazy_graph_tag($graph_array);
$sensor['sensor_descr'] = truncate($sensor['sensor_descr'], 48, '');

2
html/pages/health/toner.inc.php
View File

@@ -30,7 +30,7 @@ foreach (dbFetchRows("SELECT * FROM `toner` AS S, `devices` AS D WHERE S.device_
$graph_array_zoom['height'] = "150";
$graph_array_zoom['width'] = "400";
$link = "graphs/id=" . $graph_array['id'] . "/type=" . $graph_array['type'] . "/from=" . $graph_array['from'] . "/to=" . $graph_array['to'] . "/";
$mini_graph = overlib_link($link, generate_graph_tag($graph_array), generate_graph_tag($graph_array_zoom), NULL);
$mini_graph = overlib_link($link, generate_lazy_graph_tag($graph_array), generate_graph_tag($graph_array_zoom), NULL);
$background = get_percentage_colours(100 - $perc);

2
html/pages/ports/graph.inc.php
View File

@@ -40,7 +40,7 @@ foreach ($ports as $port)
$overlib_content = generate_overlib_content($graph_array, $port['hostname'] . " - " . $port['label']);
$graph_array['title'] = "yes";
$graph_array['width'] = $width; $graph_array['height'] = 119;
$graph = generate_graph_tag($graph_array);
$graph = generate_lazy_graph_tag($graph_array);
echo("<div style='display: block; padding: 1px; margin: 2px; min-width: ".$width_div."px; max-width:".$width_div."px; min-height:180px; max-height:180px; text-align: center; float: left; background-color: #f5f5f5;'>");
echo(overlib_link($link, $graph, $overlib_content));

2
html/pages/services.inc.php
View File

@@ -88,7 +88,7 @@ if ($_SESSION['userlevel'] >= '5')
{
$graph_array['from'] = $$period;
$graph_array_zoom = $graph_array; $graph_array_zoom['height'] = "150"; $graph_array_zoom['width'] = "400";
echo(overlib_link("", generate_graph_tag($graph_array), generate_graph_tag($graph_array_zoom), NULL));
echo(overlib_link("", generate_lazy_graph_tag($graph_array), generate_graph_tag($graph_array_zoom), NULL));
}
echo("</td></tr>");
}