From c36fe928e496e26619737a4d462043d1f76bb888 Mon Sep 17 00:00:00 2001 From: Tony Murray Date: Sun, 11 Apr 2021 19:40:47 -0500 Subject: [PATCH] Fix mini graphs (#12738) Remove the polyfill, if the noscript tag isn't removed it breaks graphs Ajax tables should not use lazy loading anyway... --- LibreNMS/Util/Url.php | 2 +- app/Http/Controllers/Table/MempoolsController.php | 2 +- html/js/intersection-observer.js | 1 - html/js/loading-attribute-polyfill.min.js | 6 ------ includes/html/table/processor.inc.php | 2 +- includes/html/table/sensors-common.php | 2 +- includes/html/table/storage.inc.php | 2 +- includes/html/table/toner.inc.php | 2 +- resources/views/layouts/librenmsv1.blade.php | 2 -- 9 files changed, 6 insertions(+), 15 deletions(-) delete mode 100644 html/js/intersection-observer.js delete mode 100644 html/js/loading-attribute-polyfill.min.js diff --git a/LibreNMS/Util/Url.php b/LibreNMS/Util/Url.php index 30c60c2f18..274db12146 100644 --- a/LibreNMS/Util/Url.php +++ b/LibreNMS/Util/Url.php @@ -355,7 +355,7 @@ class Url $tag = '' . $tag . ' loading="lazy" />'; + return $tag . ' loading="lazy" />'; } return $tag . ' />'; diff --git a/app/Http/Controllers/Table/MempoolsController.php b/app/Http/Controllers/Table/MempoolsController.php index 3bb5369731..689d1855d6 100644 --- a/app/Http/Controllers/Table/MempoolsController.php +++ b/app/Http/Controllers/Table/MempoolsController.php @@ -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) diff --git a/html/js/intersection-observer.js b/html/js/intersection-observer.js deleted file mode 100644 index a6549704a6..0000000000 --- a/html/js/intersection-observer.js +++ /dev/null @@ -1 +0,0 @@ -!function(){"use strict";if("object"==typeof window)if("IntersectionObserver"in window&&"IntersectionObserverEntry"in window&&"intersectionRatio"in window.IntersectionObserverEntry.prototype)"isIntersecting"in window.IntersectionObserverEntry.prototype||Object.defineProperty(window.IntersectionObserverEntry.prototype,"isIntersecting",{get:function(){return this.intersectionRatio>0}});else{var t=function(t){for(var e=window.document,o=i(e);o;)o=i(e=o.ownerDocument);return e}(),e=[],o=null,n=null;s.prototype.THROTTLE_TIMEOUT=100,s.prototype.POLL_INTERVAL=null,s.prototype.USE_MUTATION_OBSERVER=!0,s._setupCrossOriginUpdater=function(){return o||(o=function(t,o){n=t&&o?l(t,o):{top:0,bottom:0,left:0,right:0,width:0,height:0},e.forEach(function(t){t._checkForIntersections()})}),o},s._resetCrossOriginUpdater=function(){o=null,n=null},s.prototype.observe=function(t){if(!this._observationTargets.some(function(e){return e.element==t})){if(!t||1!=t.nodeType)throw new Error("target must be an Element");this._registerInstance(),this._observationTargets.push({element:t,entry:null}),this._monitorIntersections(t.ownerDocument),this._checkForIntersections()}},s.prototype.unobserve=function(t){this._observationTargets=this._observationTargets.filter(function(e){return e.element!=t}),this._unmonitorIntersections(t.ownerDocument),0==this._observationTargets.length&&this._unregisterInstance()},s.prototype.disconnect=function(){this._observationTargets=[],this._unmonitorAllIntersections(),this._unregisterInstance()},s.prototype.takeRecords=function(){var t=this._queuedEntries.slice();return this._queuedEntries=[],t},s.prototype._initThresholds=function(t){var e=t||[0];return Array.isArray(e)||(e=[e]),e.sort().filter(function(t,e,o){if("number"!=typeof t||isNaN(t)||t<0||t>1)throw new Error("threshold must be a number between 0 and 1 inclusively");return t!==o[e-1]})},s.prototype._parseRootMargin=function(t){var e=(t||"0px").split(/\s+/).map(function(t){var e=/^(-?\d*\.?\d+)(px|%)$/.exec(t);if(!e)throw new Error("rootMargin must be specified in pixels or percent");return{value:parseFloat(e[1]),unit:e[2]}});return e[1]=e[1]||e[0],e[2]=e[2]||e[0],e[3]=e[3]||e[1],e},s.prototype._monitorIntersections=function(e){var o=e.defaultView;if(o&&-1==this._monitoringDocuments.indexOf(e)){var n=this._checkForIntersections,r=null,s=null;this.POLL_INTERVAL?r=o.setInterval(n,this.POLL_INTERVAL):(h(o,"resize",n,!0),h(e,"scroll",n,!0),this.USE_MUTATION_OBSERVER&&"MutationObserver"in o&&(s=new o.MutationObserver(n)).observe(e,{attributes:!0,childList:!0,characterData:!0,subtree:!0})),this._monitoringDocuments.push(e),this._monitoringUnsubscribes.push(function(){var t=e.defaultView;t&&(r&&t.clearInterval(r),c(t,"resize",n,!0)),c(e,"scroll",n,!0),s&&s.disconnect()});var u=this.root&&(this.root.ownerDocument||this.root)||t;if(e!=u){var a=i(e);a&&this._monitorIntersections(a.ownerDocument)}}},s.prototype._unmonitorIntersections=function(e){var o=this._monitoringDocuments.indexOf(e);if(-1!=o){var n=this.root&&(this.root.ownerDocument||this.root)||t;if(!this._observationTargets.some(function(t){var o=t.element.ownerDocument;if(o==e)return!0;for(;o&&o!=n;){var r=i(o);if((o=r&&r.ownerDocument)==e)return!0}return!1})){var r=this._monitoringUnsubscribes[o];if(this._monitoringDocuments.splice(o,1),this._monitoringUnsubscribes.splice(o,1),r(),e!=n){var s=i(e);s&&this._unmonitorIntersections(s.ownerDocument)}}}},s.prototype._unmonitorAllIntersections=function(){var t=this._monitoringUnsubscribes.slice(0);this._monitoringDocuments.length=0,this._monitoringUnsubscribes.length=0;for(var e=0;e=0&&m>=0&&{top:c,bottom:a,left:f,right:d,width:g,height:m}||null),!v)break;_=_&&p(_)}return v}},s.prototype._getRootRect=function(){var e;if(this.root&&!d(this.root))e=u(this.root);else{var o=d(this.root)?this.root:t,n=o.documentElement,i=o.body;e={top:0,left:0,right:n.clientWidth||i.clientWidth,width:n.clientWidth||i.clientWidth,bottom:n.clientHeight||i.clientHeight,height:n.clientHeight||i.clientHeight}}return this._expandRectByRootMargin(e)},s.prototype._expandRectByRootMargin=function(t){var e=this._rootMarginValues.map(function(e,o){return"px"==e.unit?e.value:e.value*(o%2?t.width:t.height)/100}),o={top:t.top-e[0],right:t.right+e[1],bottom:t.bottom+e[2],left:t.left-e[3]};return o.width=o.right-o.left,o.height=o.bottom-o.top,o},s.prototype._hasCrossedThreshold=function(t,e){var o=t&&t.isIntersecting?t.intersectionRatio||0:-1,n=e.isIntersecting?e.intersectionRatio||0:-1;if(o!==n)for(var i=0;i'+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"); diff --git a/includes/html/table/processor.inc.php b/includes/html/table/processor.inc.php index b781c2b350..7bbc344247 100644 --- a/includes/html/table/processor.inc.php +++ b/includes/html/table/processor.inc.php @@ -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)); diff --git a/includes/html/table/sensors-common.php b/includes/html/table/sensors-common.php index 76bcfb5e10..db70476216 100644 --- a/includes/html/table/sensors-common.php +++ b/includes/html/table/sensors-common.php @@ -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); diff --git a/includes/html/table/storage.inc.php b/includes/html/table/storage.inc.php index 922cde4ea6..06988fb4f9 100644 --- a/includes/html/table/storage.inc.php +++ b/includes/html/table/storage.inc.php @@ -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)); diff --git a/includes/html/table/toner.inc.php b/includes/html/table/toner.inc.php index 851661b665..ddd15830e4 100644 --- a/includes/html/table/toner.inc.php +++ b/includes/html/table/toner.inc.php @@ -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']); diff --git a/resources/views/layouts/librenmsv1.blade.php b/resources/views/layouts/librenmsv1.blade.php index 5b88743497..4697be870d 100644 --- a/resources/views/layouts/librenmsv1.blade.php +++ b/resources/views/layouts/librenmsv1.blade.php @@ -50,8 +50,6 @@ @stack('styles') - -