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

Fix mini graphs (#12738)

Browse Source 
Remove the polyfill, if the noscript tag isn't removed it breaks graphs
Ajax tables should not use lazy loading anyway...
This commit is contained in:
Tony Murray
2021-04-11 19:40:47 -05:00
committed by GitHub
parent dec1ed1e45
commit c36fe928e4
9 changed files with 6 additions and 15 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
LibreNMS/Util/Url.php
View File

@@ -355,7 +355,7 @@ class Url
$tag = '<img class="img-responsive" src="' . url('graph.php') . '?' . implode('&amp;', $urlargs) . '" style="border:0;"';
if (Config::get('enable_lazy_load', true)) {
return '<noscript class="loading-lazy">' . $tag . ' loading="lazy" /></noscript>';
return $tag . ' loading="lazy" />';
}
return $tag . ' />';

2
app/Http/Controllers/Table/MempoolsController.php
View File

@@ -110,7 +110,7 @@ class MempoolsController extends TableController
$link = Url::generate(['page' => 'graphs'], Arr::only($graph, ['id', 'type', 'from']));
return Url::overlibLink($link, Url::lazyGraphTag($graph), Url::graphTag(['height' => 150, 'width' => 400] + $graph));
return Url::overlibLink($link, Url::graphTag($graph), Url::graphTag(['height' => 150, 'width' => 400] + $graph));
}
private function barLink(Mempool $mempool)

1
html/js/intersection-observer.js
View File

File diff suppressed because one or more lines are too long

6
html/js/loading-attribute-polyfill.min.js vendored
View File

@@ -1,6 +0,0 @@
/*
* Loading attribute polyfill - https://github.com/mfranzke/loading-attribute-polyfill
* @license Copyright(c) 2019 by Maximilian Franzke
* Credits for the initial kickstarter / script to @Sora2455, and supported by @cbirdsong, @eklingen, @DaPo, @nextgenthemes, @diogoterremoto, @dracos, @Flimm, @TomS- and @vinyfc93 - many thanks for that !
*/
!function(e,t){"use strict";var r,a,o={rootMargin:"256px 0px",threshold:.01,lazyImage:'img[loading="lazy"]',lazyIframe:'iframe[loading="lazy"]'},n={loading:"loading"in HTMLImageElement.prototype&&"loading"in HTMLIFrameElement.prototype,scrolling:"onscroll"in window};function i(e){var t,r,a=[];"picture"===e.parentNode.tagName.toLowerCase()&&(t=e.parentNode,(r=t.querySelector("source[data-lazy-remove]"))&&t.removeChild(r),a=Array.prototype.slice.call(e.parentNode.querySelectorAll("source"))),a.push(e),a.forEach((function(e){e.hasAttribute("data-lazy-srcset")&&(e.setAttribute("srcset",e.getAttribute("data-lazy-srcset")),e.removeAttribute("data-lazy-srcset"))})),e.setAttribute("src",e.getAttribute("data-lazy-src")),e.removeAttribute("data-lazy-src")}function c(e){var t=document.createElement("div");for(t.innerHTML=function(e){var t=e.textContent||e.innerHTML,a="data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 "+((t.match(/width=['"](\d+)['"]/)||!1)[1]||1)+" "+((t.match(/height=['"](\d+)['"]/)||!1)[1]||1)+"%27%3E%3C/svg%3E";return!n.loading&&n.scrolling&&(void 0===r?t=t.replace(/(?:\r\n|\r|\n|\t| )src=/g,' lazyload="1" src='):("picture"===e.parentNode.tagName.toLowerCase()&&(t='<source srcset="'+a+'" data-lazy-remove="true"></source>'+t),t=t.replace(/(?:\r\n|\r|\n|\t| )srcset=/g," data-lazy-srcset=").replace(/(?:\r\n|\r|\n|\t| )src=/g,' src="'+a+'" data-lazy-src='))),t}(e);t.firstChild;)n.loading||!n.scrolling||void 0===r||!t.firstChild.tagName||"img"!==t.firstChild.tagName.toLowerCase()&&"iframe"!==t.firstChild.tagName.toLowerCase()||r.observe(t.firstChild),e.parentNode.insertBefore(t.firstChild,e);e.parentNode.removeChild(e)}function d(){document.querySelectorAll("noscript."+e).forEach(c),void 0!==window.matchMedia&&window.matchMedia("print").addListener((function(e){e.matches&&document.querySelectorAll(o.lazyImage+"[data-lazy-src],"+o.lazyIframe+"[data-lazy-src]").forEach((function(e){i(e)}))}))}"undefined"!=typeof NodeList&&NodeList.prototype&&!NodeList.prototype.forEach&&(NodeList.prototype.forEach=Array.prototype.forEach),"IntersectionObserver"in window&&(r=new IntersectionObserver((function(e,t){e.forEach((function(e){if(0!==e.intersectionRatio){var r=e.target;t.unobserve(r),i(r)}}))}),o)),a="requestAnimationFrame"in window?window.requestAnimationFrame:function(e){e()},/comp|inter/.test(document.readyState)?a(d):"addEventListener"in document?document.addEventListener("DOMContentLoaded",(function(){a(d)})):document.attachEvent("onreadystatechange",(function(){"complete"===document.readyState&&d()}))}("loading-lazy");

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

@@ -66,7 +66,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 = \LibreNMS\Util\Url::overlibLink($link, \LibreNMS\Util\Url::lazyGraphTag($graph_array), \LibreNMS\Util\Url::graphTag($graph_array_zoom));
$mini_graph = \LibreNMS\Util\Url::overlibLink($link, \LibreNMS\Util\Url::graphTag($graph_array), \LibreNMS\Util\Url::graphTag($graph_array_zoom));
$background = \LibreNMS\Util\Colors::percentage($perc, $processor['processor_perc_warn']);
$bar_link = \LibreNMS\Util\Url::overlibLink($link, print_percentage_bar(400, 20, $perc, $perc . '%', 'ffffff', $background['left'], (100 - $perc) . '%', 'ffffff', $background['right']), \LibreNMS\Util\Url::graphTag($graph_array_zoom));

2
includes/html/table/sensors-common.php
View File

@@ -112,7 +112,7 @@ foreach (dbFetchRows($sql, $param) as $sensor) {
$graph_array['bg'] = 'ffffff00';
// the 00 at the end makes the area transparent.
$graph_array['from'] = Config::get('time.day');
$sensor_minigraph = \LibreNMS\Util\Url::lazyGraphTag($graph_array);
$sensor_minigraph = \LibreNMS\Util\Url::graphTag($graph_array);
$sensor['sensor_descr'] = substr($sensor['sensor_descr'], 0, 48);

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

@@ -78,7 +78,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 = \LibreNMS\Util\Url::overlibLink($link, \LibreNMS\Util\Url::lazyGraphTag($graph_array), \LibreNMS\Util\Url::graphTag($graph_array_zoom));
$mini_graph = \LibreNMS\Util\Url::overlibLink($link, \LibreNMS\Util\Url::graphTag($graph_array), \LibreNMS\Util\Url::graphTag($graph_array_zoom));
$background = \LibreNMS\Util\Colors::percentage($perc, $drive['storage_perc_warn']);
$bar_link = \LibreNMS\Util\Url::overlibLink($link, print_percentage_bar(400, 20, $perc, "$used / $total", 'ffffff', $background['left'], $free, 'ffffff', $background['right']), \LibreNMS\Util\Url::graphTag($graph_array_zoom));

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

@@ -69,7 +69,7 @@ foreach (dbFetchRows($sql, $param) as $toner) {
$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 = \LibreNMS\Util\Url::overlibLink($link, \LibreNMS\Util\Url::lazyGraphTag($graph_array), \LibreNMS\Util\Url::graphTag($graph_array_zoom));
$mini_graph = \LibreNMS\Util\Url::overlibLink($link, \LibreNMS\Util\Url::graphTag($graph_array), \LibreNMS\Util\Url::graphTag($graph_array_zoom));
$background = \LibreNMS\Util\Colors::percentage(100 - $perc, null);
$bar_link = print_percentage_bar(400, 20, $perc, "$perc%", 'ffffff', $background['left'], $free, 'ffffff', $background['right']);

2
resources/views/layouts/librenmsv1.blade.php
View File

@@ -50,8 +50,6 @@
@stack('styles')
<script src="{{ asset('js/polyfill.min.js') }}"></script>
<script src="{{ asset('js/intersection-observer.js') }}"></script>
<script src="{{ asset('js/loading-attribute-polyfill.min.js') }}"></script>
<script src="{{ asset('js/jquery.min.js') }}"></script>
<script src="{{ asset('js/bootstrap.min.js') }}"></script>
<script src="{{ asset('js/bootstrap-hover-dropdown.min.js') }}"></script>