Widget hot refresh & worldmap cleanup (#16053)

* Iterate in javascript and separate processing

* Widget refresh/destroy events

* Remove old dom and unbind events

* fix whitespace

* Fix up bootgrid tables, they inserted a div before the first div breaking event propagation
switch to regular js function to scope variables instead of jquery

* Handle settings the same way as the normal widget

* Use standard init_map and add layer control

* May need L.Control.Locate now

* Set maxZoom for marker cluster

* Try setMaxZoom

* worldmap size 100 and resize on refresh/widget resize

* Add resize event (and throttle it a bit)

* Further worldmap cleanup

* Move most javascript to common js, will cause js errors until page is reloaded, but better in the long run

resources/views/layouts/librenmsv1.blade.php

@@ -42,7 +42,7 @@
     <link href="{{ asset('css/query-builder.default.min.css') }}" rel="stylesheet">
     <link href="{{ asset('css/app.css') }}" rel="stylesheet">
     <link href="{{ asset('css/bootstrap.min.css') }}" rel="stylesheet">
-    <link href="{{ asset(LibreNMS\Config::get('stylesheet', 'css/styles.css')) }}?ver=20230928" rel="stylesheet">
+    <link href="{{ asset(LibreNMS\Config::get('stylesheet', 'css/styles.css')) }}?ver=22052024" rel="stylesheet">
     <link href="{{ asset('css/' . LibreNMS\Config::get('applied_site_style', 'light') . '.css?ver=632417643') }}" rel="stylesheet">
     @foreach(LibreNMS\Config::get('webui.custom_css', []) as $custom_css)
         <link href="{{ $custom_css }}" rel="stylesheet">
@@ -76,7 +76,7 @@
         });
         var ajax_url = "{{ url('/ajax') }}";
     </script>
-    <script src="{{ asset('js/librenms.js?ver=12052024') }}"></script>
+    <script src="{{ asset('js/librenms.js?ver=22052024') }}"></script>
     <script type="text/javascript" src="{{ asset('js/overlib_mini.js') }}"></script>
     <script type="text/javascript" src="{{ asset('js/flasher.min.js?ver=0.6.1') }}"></script>
     <script type="text/javascript" src="{{ asset('js/toastr.min.js?ver=05072021') }}"></script>

resources/views/overview/default.blade.php

@@ -322,7 +322,7 @@
         } else {
             obj.data('settings','1');
         }
-        widget_reload(obj.attr('id'),obj.data('type'));
+        widget_reload(obj.attr('id'), obj.data('type'), true);
     });
 
 
@@ -582,18 +582,14 @@
     return false;
     }
 
-    function widget_reload(id, data_type, forceDomInject) {
+    function widget_reload(id, data_type, forceDomInject = false) {
         const $widget_body = $('#widget_body_' + id);
-        const $widget_bootgrid = $('#widget_body_' + id + ' .bootgrid-table');
-        const settings = $widget_body.parent().data('settings') == 1 ? 1 : 0;
+        const $widget = $widget_body.children().first();
 
-        if (settings === 1 || forceDomInject) {
-            $widget_bootgrid.bootgrid('destroy');
-            $('#widget_body_' + id + ' *').off();
-        } else if ($widget_bootgrid[0] && $widget_bootgrid.data('ajax') === true) {
-            // Check to see if a bootgrid already exists and has ajax reloading enabled.
-            // If so, use bootgrid to refresh the data instead of injecting the DOM in request.
-            return $widget_bootgrid.bootgrid('reload');
+        // skip html reload and sned refresh event instead
+        if (!forceDomInject && $widget.data('reload') === false) {
+            $widget.trigger('refresh', $widget); // send refresh event
+            return; // skip html reload
         }
 
         $.ajax({
@@ -602,11 +598,14 @@
             data: {
                 id: id,
                 dimensions: {x: $widget_body.width(), y: $widget_body.height()},
-                settings: settings
+                settings: $widget_body.parent().data('settings') == 1 ? 1 : 0
             },
             dataType: 'json',
             success: function (data) {
                 if (data.status === 'ok') {
+                    $widget.trigger('destroy', $widget); // send destroy event
+                    $widget_body.children().unbind().html("").remove(); // clear old contents and unbind events
+
                     $('#widget_title_' + id).html(data.title);
                     $widget_body.html(data.html);
                     $widget_body.parent().data('settings', data.show_settings).data('refresh', data.settings.refresh);
@@ -621,19 +620,25 @@
     }
 
     function grab_data(id, data_type) {
-        const $parent = $('#widget_body_' + id).parent();
-
-        if($parent.data('settings') == 0) {
-            widget_reload(id, data_type);
-        }
+        const refresh = $('#widget_body_' + id).parent().data('refresh');
+        widget_reload(id, data_type);
 
         setTimeout(function () {
             grab_data(id, data_type);
-        }, ($parent.data('refresh') > 0 ? $parent.data('refresh') : 60) * 1000);
+        }, (refresh > 0 ? refresh : 60) * 1000);
     }
 
     // make sure gridster stays disabled when the window is resized
+    var resizeTrigger = null;
     addEvent(window, "resize", function(event) {
+        // emit resize event, but only once every 100ms
+        if (resizeTrigger === null) {
+            resizeTrigger = setTimeout(() => {
+                resizeTrigger = null;
+                $('.widget_body').children().first().trigger('resize');
+            }, 100);
+        }
+
         setTimeout(function(){
             if(!gridster_state) {
                 gridster.disable();

resources/views/widgets/alertlog.blade.php

@@ -1,59 +1,64 @@
-<div class="table-responsive">
-    <table id="alertlog_{{ $id }}" class="table table-hover table-condensed alerts" data-ajax="true">
-        <thead>
-        <tr>
-            <th data-column-id="status" data-sortable="false"></th>
-            <th data-column-id="time_logged" data-order="desc">{{ __('Timestamp') }}</th>
-            <th data-column-id="details" data-sortable="false">&nbsp;</th>
-            <th data-column-id="hostname">{{ __('Device') }}</th>
-            <th data-column-id="alert">{{ __('Alert') }}</th>
-        </tr>
-        </thead>
-    </table>
+<div id="alertlog_container-{{ $id }}" data-reload="false">
+    <div class="table-responsive">
+        <table id="alertlog_{{ $id }}" class="table table-hover table-condensed alerts">
+            <thead>
+            <tr>
+                <th data-column-id="status" data-sortable="false"></th>
+                <th data-column-id="time_logged" data-order="desc">{{ __('Timestamp') }}</th>
+                <th data-column-id="details" data-sortable="false">&nbsp;</th>
+                <th data-column-id="hostname">{{ __('Device') }}</th>
+                <th data-column-id="alert">{{ __('Alert') }}</th>
+            </tr>
+            </thead>
+        </table>
+    </div>
 </div>
 <script>
-    var grid = $("#alertlog_{{ $id }}").bootgrid({
-        ajax: true,
-        rowCount: [50, 100, 250, -1],
-        navigation: ! {{ $hidenavigation }},
-        post: function () {
-            return {
-                id: "alertlog",
-                device_id: "",
-                device_group: "{{ $device_group }}",
-                state: '{{ $state }}',
-                min_severity: '{{ $min_severity }}',
-            };
-        },
-        url: "ajax_table.php"
-    }).on("loaded.rs.jquery.bootgrid", function () {
-
-        var results = $("div.infos").text().split(" ");
-        low = results[1] - 1;
-        high = results[3];
-        max = high - low;
-        search = $('.search-field').val();
-
-        grid.find(".incident-toggle").each(function () {
-            $(this).parent().addClass('incident-toggle-td');
-        }).on("click", function (e) {
-            var target = $(this).data("target");
-            $(target).collapse('toggle');
-            $(this).toggleClass('fa-plus fa-minus');
-        });
-        grid.find(".incident").each(function () {
-            $(this).parent().addClass('col-lg-4 col-md-4 col-sm-4 col-xs-4');
-            $(this).parent().parent().on("mouseenter", function () {
-                $(this).find(".incident-toggle").fadeIn(200);
-            }).on("mouseleave", function () {
-                $(this).find(".incident-toggle").fadeOut(200);
-            }).on("click", "td:not(.incident-toggle-td)", function () {
-                var target = $(this).parent().find(".incident-toggle").data("target");
-                if ($(this).parent().find(".incident-toggle").hasClass('fa-plus')) {
-                    $(this).parent().find(".incident-toggle").toggleClass('fa-plus fa-minus');
-                    $(target).collapse('toggle');
-                }
+    (function () {
+        var grid = $("#alertlog_{{ $id }}").bootgrid({
+            ajax: true,
+            rowCount: [50, 100, 250, -1],
+            navigation: ! {{ $hidenavigation }},
+            post: function () {
+                return {
+                    id: "alertlog",
+                    device_id: "",
+                    device_group: "{{ $device_group }}",
+                    state: '{{ $state }}',
+                    min_severity: '{{ $min_severity }}',
+                };
+            },
+            url: "ajax_table.php"
+        }).on("loaded.rs.jquery.bootgrid", function () {
+            grid.find(".incident-toggle").each(function () {
+                $(this).parent().addClass('incident-toggle-td');
+            }).on("click", function (e) {
+                var target = $(this).data("target");
+                $(target).collapse('toggle');
+                $(this).toggleClass('fa-plus fa-minus');
+            });
+            grid.find(".incident").each(function () {
+                $(this).parent().addClass('col-lg-4 col-md-4 col-sm-4 col-xs-4');
+                $(this).parent().parent().on("mouseenter", function () {
+                    $(this).find(".incident-toggle").fadeIn(200);
+                }).on("mouseleave", function () {
+                    $(this).find(".incident-toggle").fadeOut(200);
+                }).on("click", "td:not(.incident-toggle-td)", function () {
+                    var target = $(this).parent().find(".incident-toggle").data("target");
+                    if ($(this).parent().find(".incident-toggle").hasClass('fa-plus')) {
+                        $(this).parent().find(".incident-toggle").toggleClass('fa-plus fa-minus');
+                        $(target).collapse('toggle');
+                    }
+                });
             });
         });
-    });
+
+        $('#alertlog_container-{{ $id }}').on('refresh', function (event) {
+            grid.bootgrid('reload');
+        });
+        $('#alertlog_container-{{ $id }}').on('destroy', function (event) {
+            grid.bootgrid('destroy');
+            delete grid;
+        });
+    })();
 </script>

resources/views/widgets/alertlog_stats.blade.php

@@ -1,27 +1,39 @@
-<div class="table-responsive">
-    <table id="alertlog-stats_{{ $id }}" class="table table-hover table-condensed table-striped" data-ajax="true">
-        <thead>
-        <tr>
-            <th data-column-id="count">{{ __('Count') }}</th>
-            <th data-column-id="hostname">{{ __('Device') }}</th>
-            <th data-column-id="alert_rule">{{ __('Alert rule') }}</th>
-        </tr>
-        </thead>
-    </table>
+<div id="alertlog_stats_container-{{ $id }}" data-reload="false">
+    <div class="table-responsive">
+        <table id="alertlog_stats-{{ $id }}" class="table table-hover table-condensed table-striped">
+            <thead>
+            <tr>
+                <th data-column-id="count">{{ __('Count') }}</th>
+                <th data-column-id="hostname">{{ __('Device') }}</th>
+                <th data-column-id="alert_rule">{{ __('Alert rule') }}</th>
+            </tr>
+            </thead>
+        </table>
+    </div>
 </div>
 <script>
-    $("#alertlog-stats_{{ $id }}").bootgrid({
-        ajax: true,
-        rowCount: [50, 100, 250, -1],
-        navigation: ! {{ $hidenavigation }},
-        post: function () {
-            return {
-                id: "alertlog-stats",
-                device_id: "",
-                min_severity: '{{ $min_severity }}',
-                time_interval: '{{ $time_interval }}'
-            };
-        },
-        url: "ajax_table.php"
-    });
+    (function () {
+        var grid = $("#alertlog_stats-{{ $id }}").bootgrid({
+            ajax: true,
+            rowCount: [50, 100, 250, -1],
+            navigation: ! {{ $hidenavigation }},
+            post: function () {
+                return {
+                    id: "alertlog-stats",
+                    device_id: "",
+                    min_severity: '{{ $min_severity }}',
+                    time_interval: '{{ $time_interval }}'
+                };
+            },
+            url: "ajax_table.php"
+        });
+
+        $('#alertlog_stats_container-{{ $id }}').on('refresh', function (event) {
+            grid.bootgrid('reload');
+        });
+        $('#alertlog_stats_container-{{ $id }}').on('destroy', function (event) {
+            grid.bootgrid('destroy');
+            delete grid;
+        });
+    })();
 </script>

resources/views/widgets/alerts.blade.php

@@ -1,75 +1,87 @@
-<div class="table-responsive">
-    <table id="alerts_{{ $id }}" class="table table-hover table-condensed alerts" data-ajax="true">
-        <thead>
-        <tr>
-            <th data-column-id="severity"></th>
-            <th data-column-id="timestamp">{{ __('Timestamp') }}</th>
-            <th data-column-id="rule">{{ __('Rule') }}</th>
-            <th data-column-id="details" data-sortable="false"></th>
-            <th data-column-id="hostname">{{ __('Hostname') }}</th>
-            <th data-column-id="location" data-visible="{{ $location ? 'true' : 'false' }}">{{ __('Location') }}</th>
-            <th data-column-id="ack_ico" data-sortable="false">{{ __('ACK') }}</th>
-            <th data-column-id="notes" data-sortable="false">{{ __('Notes') }}</th>
-            <th data-column-id="proc" data-sortable="false" data-visible="{{ $proc ? 'true' : 'false' }}">URL</th>
-        </tr>
-        </thead>
-    </table>
+<div id="alerts_container-{{ $id }}" data-reload="false">
+    <div class="table-responsive">
+        <table id="alerts-{{ $id }}" class="table table-hover table-condensed alerts">
+            <thead>
+            <tr>
+                <th data-column-id="severity"></th>
+                <th data-column-id="timestamp">{{ __('Timestamp') }}</th>
+                <th data-column-id="rule">{{ __('Rule') }}</th>
+                <th data-column-id="details" data-sortable="false"></th>
+                <th data-column-id="hostname">{{ __('Hostname') }}</th>
+                <th data-column-id="location" data-visible="{{ $location ? 'true' : 'false' }}">{{ __('Location') }}</th>
+                <th data-column-id="ack_ico" data-sortable="false">{{ __('ACK') }}</th>
+                <th data-column-id="notes" data-sortable="false">{{ __('Notes') }}</th>
+                <th data-column-id="proc" data-sortable="false" data-visible="{{ $proc ? 'true' : 'false' }}">URL</th>
+            </tr>
+            </thead>
+        </table>
+    </div>
 </div>
 <script>
-    var alerts_grid = $("#alerts_{{ $id }}").bootgrid({
-        ajax: true,
-        requestHandler: request => ({
-            ...request,
-            id: "alerts",
-            acknowledged: '{{ $acknowledged }}',
-            unreachable: '{{ $unreachable }}',
-            fired: '{{ $fired }}',
-            min_severity: '{{ $min_severity }}',
-            group: '{{ $device_group }}',
-            proc: '{{ $proc }}',
-            sort: '{{ $sort }}',
-            uncollapse_key_count: '{{ $uncollapse_key_count }}',
-            device_id: '{{ $device }}'
-        }),
-        responseHandler: response => {
-            $("#widget_title_counter_{{ $id }}").text(response.total ? ` (${response.total})` : '')
+    (function () {
+        var alerts_grid = $("#alerts-{{ $id }}").bootgrid({
+            ajax: true,
+            requestHandler: request => ({
+                ...request,
+                id: "alerts",
+                acknowledged: '{{ $acknowledged }}',
+                unreachable: '{{ $unreachable }}',
+                fired: '{{ $fired }}',
+                min_severity: '{{ $min_severity }}',
+                group: '{{ $device_group }}',
+                proc: '{{ $proc }}',
+                sort: '{{ $sort }}',
+                uncollapse_key_count: '{{ $uncollapse_key_count }}',
+                device_id: '{{ $device }}'
+            }),
+            responseHandler: response => {
+                $("#widget_title_counter_{{ $id }}").text(response.total ? ` (${response.total})` : '')
 
-            return response
-        },
-        url: "ajax_table.php",
-        navigation: ! {{ $hidenavigation }},
-        rowCount: [50, 100, 250, -1]
-    }).on("loaded.rs.jquery.bootgrid", function() {
-        alerts_grid = $(this);
-        alerts_grid.find(".incident-toggle").each( function() {
-            $(this).parent().addClass('incident-toggle-td');
-        }).on("click", function(e) {
-            var target = $(this).data("target");
-            $(target).collapse('toggle');
-            $(this).toggleClass('fa-plus fa-minus');
-        });
-        alerts_grid.find(".incident").each( function() {
-            $(this).parent().addClass('col-lg-4 col-md-4 col-sm-4 col-xs-4');
-            $(this).parent().parent().on("mouseenter", function() {
-                $(this).find(".incident-toggle").fadeIn(200);
-            }).on("mouseleave", function() {
-                $(this).find(".incident-toggle").fadeOut(200);
+                return response
+            },
+            url: "ajax_table.php",
+            navigation: ! {{ $hidenavigation }},
+            rowCount: [50, 100, 250, -1]
+        }).on("loaded.rs.jquery.bootgrid", function() {
+            alerts_grid = $(this);
+            alerts_grid.find(".incident-toggle").each( function() {
+                $(this).parent().addClass('incident-toggle-td');
+            }).on("click", function(e) {
+                var target = $(this).data("target");
+                $(target).collapse('toggle');
+                $(this).toggleClass('fa-plus fa-minus');
+            });
+            alerts_grid.find(".incident").each( function() {
+                $(this).parent().addClass('col-lg-4 col-md-4 col-sm-4 col-xs-4');
+                $(this).parent().parent().on("mouseenter", function() {
+                    $(this).find(".incident-toggle").fadeIn(200);
+                }).on("mouseleave", function() {
+                    $(this).find(".incident-toggle").fadeOut(200);
+                });
+            });
+            alerts_grid.find(".command-ack-alert").on("click", function(e) {
+                e.preventDefault();
+                var alert_state = $(this).data("alert_state");
+                var alert_id = $(this).data('alert_id');
+                $('#ack_alert_id').val(alert_id);
+                $('#ack_alert_state').val(alert_state);
+                $('#ack_msg').val('');
+                $("#alert_ack_modal").modal('show');
+            });
+            alerts_grid.find(".command-alert-note").on("click", function(e) {
+                e.preventDefault();
+                var alert_id = $(this).data('alert_id');
+                $('#alert_id').val(alert_id);
+                $("#alert_notes_modal").modal('show');
             });
         });
-        alerts_grid.find(".command-ack-alert").on("click", function(e) {
-            e.preventDefault();
-            var alert_state = $(this).data("alert_state");
-            var alert_id = $(this).data('alert_id');
-            $('#ack_alert_id').val(alert_id);
-            $('#ack_alert_state').val(alert_state);
-            $('#ack_msg').val('');
-            $("#alert_ack_modal").modal('show');
+
+        $('#alerts_container-{{ $id }}').on('refresh', function (event) {
+            alerts_grid.bootgrid('reload');
         });
-        alerts_grid.find(".command-alert-note").on("click", function(e) {
-            e.preventDefault();
-            var alert_id = $(this).data('alert_id');
-            $('#alert_id').val(alert_id);
-            $("#alert_notes_modal").modal('show');
+        $('#alerts_container-{{ $id }}').on('destroy', function (event) {
+            alerts_grid.bootgrid('destroy');
+            delete alerts_grid;
         });
-    });
+    })();
 </script>

resources/views/widgets/eventlog.blade.php

@@ -1,29 +1,41 @@
-<div class="table-responsive">
-    <table id="eventlog" class="table table-hover table-condensed table-striped" data-ajax="true">
-        <thead>
-        <tr>
-            <th data-column-id="datetime" data-order="desc">{{ __('Timestamp') }}</th>
-            <th data-column-id="type">{{ __('Type') }}</th>
-            <th data-column-id="device_id">{{ __('Hostname') }}</th>
-            <th data-column-id="message">{{ __('Message') }}</th>
-            <th data-column-id="username">{{ __('User') }}</th>
-        </tr>
-        </thead>
-    </table>
+<div id="eventlog_container-{{ $id }}" data-reload="false">
+    <div class="table-responsive">
+        <table id="eventlog-{{ $id }}" class="table table-hover table-condensed table-striped">
+            <thead>
+            <tr>
+                <th data-column-id="datetime" data-order="desc">{{ __('Timestamp') }}</th>
+                <th data-column-id="type">{{ __('Type') }}</th>
+                <th data-column-id="device_id">{{ __('Hostname') }}</th>
+                <th data-column-id="message">{{ __('Message') }}</th>
+                <th data-column-id="username">{{ __('User') }}</th>
+            </tr>
+            </thead>
+        </table>
+    </div>
 </div>
 <script>
-    $("#eventlog").bootgrid({
-        ajax: true,
-        rowCount: [50, 100, 250, -1],
-        navigation: ! {{ $hidenavigation }},
-        post: function ()
-        {
-            return {
-                device: "{{ $device }}",
-                device_group: "{{ $device_group }}",
-                eventtype: "{{ $eventtype }}"
-            };
-        },
-        url: "{{ url('/ajax/table/eventlog') }}"
+    $(function () {
+        var grid = $("#eventlog-{{ $id }}").bootgrid({
+            ajax: true,
+            rowCount: [50, 100, 250, -1],
+            navigation: ! {{ $hidenavigation }},
+            post: function ()
+            {
+                return {
+                    device: "{{ $device }}",
+                    device_group: "{{ $device_group }}",
+                    eventtype: "{{ $eventtype }}"
+                };
+            },
+            url: "{{ url('/ajax/table/eventlog') }}"
+        });
+
+        $('#eventlog_container-{{ $id }}').on('refresh', function (event) {
+            grid.bootgrid('reload');
+        });
+        $('#eventlog_container-{{ $id }}').on('destroy', function (event) {
+            grid.bootgrid('destroy');
+            delete grid;
+        });
     });
 </script>

resources/views/widgets/graylog.blade.php

@@ -1,42 +1,54 @@
-<div class="table-responsive">
-    <table id="graylog-{{ $id }}" class="table table-hover table-condensed graylog" data-ajax="true">
-        <thead>
-        <tr>
-            <th data-column-id="severity" data-sortable="false"></th>
-            <th data-column-id="origin">{{ __('Origin') }}</th>
-            <th data-column-id="timestamp" data-formatter="browserTime">{{ __('Timestamp') }}</th>
-            <th data-column-id="level" data-sortable="false">{{ __('Level') }}</th>
-            <th data-column-id="source">{{ __('Source') }}</th>
-            <th data-column-id="message" data-sortable="false">{{ __('Message') }}</th>
-            <th data-column-id="facility" data-sortable="false">{{ __('Facility') }}</th>
-        </tr>
-        </thead>
-    </table>
+<div id="graylog_container-{{ $id }}" data-reload="false">
+    <div class="table-responsive">
+        <table id="graylog-{{ $id }}" class="table table-hover table-condensed graylog">
+            <thead>
+            <tr>
+                <th data-column-id="severity" data-sortable="false"></th>
+                <th data-column-id="origin">{{ __('Origin') }}</th>
+                <th data-column-id="timestamp" data-formatter="browserTime">{{ __('Timestamp') }}</th>
+                <th data-column-id="level" data-sortable="false">{{ __('Level') }}</th>
+                <th data-column-id="source">{{ __('Source') }}</th>
+                <th data-column-id="message" data-sortable="false">{{ __('Message') }}</th>
+                <th data-column-id="facility" data-sortable="false">{{ __('Facility') }}</th>
+            </tr>
+            </thead>
+        </table>
+    </div>
 </div>
 
 <script>
-    $("#graylog-{{ $id }}").bootgrid({
-        ajax: true,
-        rowCount: ['{{ $limit }}', 25,50,100,250,-1],
-        navigation: ! {{ $hidenavigation }},
-        formatters: {
-            "browserTime": function(column, row) {
-                @config('graylog.timezone')
-                    return row.timestamp;
-                @else
-                    return moment.parseZone(row.timestamp).local().format("YYYY-MM-DD HH:MM:SS");
-                @endconfig
-            }
-        },
-        post: function ()
-        {
-            return {
-                stream: "{{ $stream }}",
-                device: "{{ $device }}",
-                range: "{{ $range }}",
-                loglevel: "{{ $loglevel }}"
-            };
-        },
-        url: "{{ url('/ajax/table/graylog') }}"
-    });
+    (function () {
+        var grid = $("#graylog-{{ $id }}").bootgrid({
+            ajax: true,
+            rowCount: ['{{ $limit }}', 25,50,100,250,-1],
+            navigation: ! {{ $hidenavigation }},
+            formatters: {
+                "browserTime": function(column, row) {
+                    @config('graylog.timezone')
+                        return row.timestamp;
+                    @else
+                        return moment.parseZone(row.timestamp).local().format("YYYY-MM-DD HH:MM:SS");
+                    @endconfig
+                }
+            },
+            post: function ()
+            {
+                return {
+                    stream: "{{ $stream }}",
+                    device: "{{ $device }}",
+                    range: "{{ $range }}",
+                    loglevel: "{{ $loglevel }}"
+                };
+            },
+            url: "{{ url('/ajax/table/graylog') }}"
+        });
+
+        $('#graylog_container-{{ $id }}').on('refresh', function (event) {
+            grid.bootgrid('reload');
+        });
+        $('#graylog_container-{{ $id }}').on('destroy', function (event) {
+            grid.bootgrid('destroy');
+            delete grid;
+        });
+    })();
 </script>

resources/views/widgets/settings/base.blade.php

@@ -1,4 +1,4 @@
-<form role="form" class="dashboard-widget-settings" onsubmit="widget_settings(this); return false;">
+<form role="form" class="dashboard-widget-settings" onsubmit="widget_settings(this); return false;" data-reload="false">
     @csrf
     @yield('form')
 

resources/views/widgets/settings/worldmap.blade.php

@@ -22,6 +22,14 @@
         <input class="form-control" name="init_zoom" id="init_zoom-{{ $id }}" type="number" min="0" max="18" step="0.1" value="{{ $init_zoom }}" placeholder="{{ __('ie. 5.8') }}">
     </div>
 
+    <div class="form-group">
+        <label for="init_layer-{{ $id }}" class="control-label">{{ __('Initial Layer') }}</label>
+        <select class="form-control" name="init_layer" id="init_layer-{{ $id }}">
+            <option value="Streets" @if($init_layer == 'Streets') selected @endif>{{ __('Streets') }}</option>
+            <option value="Satellite" @if($init_layer == 'Satellite') selected @endif>{{ __('Satellite') }}</option>
+        </select>
+    </div>
+
     <div class="form-group">
         <label for="group_radius-{{ $id }}" class="control-label">{{ __('Grouping radius') }}</label>
         <input class="form-control" name="group_radius" id="group_radius-{{ $id }}" type="number" value="{{ $group_radius }}" placeholder="{{ __('default 80') }}">

resources/views/widgets/syslog.blade.php

@@ -1,31 +1,43 @@
-<div class="table-responsive">
-    <table id="syslog" class="table table-hover table-condensed table-striped" data-ajax="true">
-        <thead>
-        <tr>
-            <th data-column-id="label"></th>
-            <th data-column-id="timestamp" data-order="desc">{{ __('Timestamp') }}</th>
-            <th data-column-id="level">{{ __('Level') }}</th>
-            <th data-column-id="device_id">{{ __('Hostname') }}</th>
-            <th data-column-id="program">{{ __('Program') }}</th>
-            <th data-column-id="msg">{{ __('Message') }}</th>
-            <th data-column-id="priority">{{ __('Priority') }}</th>
-        </tr>
-        </thead>
-    </table>
+<div id="syslog_container-{{ $id }}" data-reload="false">
+    <div class="table-responsive">
+        <table id="syslog-{{ $id }}" class="table table-hover table-condensed table-striped">
+            <thead>
+            <tr>
+                <th data-column-id="label"></th>
+                <th data-column-id="timestamp" data-order="desc">{{ __('Timestamp') }}</th>
+                <th data-column-id="level">{{ __('Level') }}</th>
+                <th data-column-id="device_id">{{ __('Hostname') }}</th>
+                <th data-column-id="program">{{ __('Program') }}</th>
+                <th data-column-id="msg">{{ __('Message') }}</th>
+                <th data-column-id="priority">{{ __('Priority') }}</th>
+            </tr>
+            </thead>
+        </table>
+    </div>
 </div>
 <script type="application/javascript">
-    $("#syslog").bootgrid({
-        ajax: true,
-        rowCount: [50, 100, 250, -1],
-        navigation: ! {{ $hidenavigation }},
-        post: function ()
-        {
-            return {
-                device: '{{ $device ?: '' }}',
-                device_group: '{{ $device_group }}',
-                level: '{{ $level }}'
-            };
-        },
-        url: "{{ url('/ajax/table/syslog') }}"
-    });
+    (function () {
+        var grid = $("#syslog-{{ $id }}").bootgrid({
+            ajax: true,
+            rowCount: [50, 100, 250, -1],
+            navigation: ! {{ $hidenavigation }},
+            post: function ()
+            {
+                return {
+                    device: '{{ $device ?: '' }}',
+                    device_group: '{{ $device_group }}',
+                    level: '{{ $level }}'
+                };
+            },
+            url: "{{ url('/ajax/table/syslog') }}"
+        });
+
+        $('#syslog_container-{{ $id }}').on('refresh', function (event) {
+            grid.bootgrid('reload');
+        });
+        $('#syslog_container-{{ $id }}').on('destroy', function (event) {
+            grid.bootgrid('destroy');
+            delete grid;
+        });
+    })();
 </script>

resources/views/widgets/worldmap.blade.php

@@ -1,63 +1,36 @@
-<div id="leaflet-map-{{ $id }}" style="width: {{ $dimensions['x'] }}px; height: {{ $dimensions['y'] }}px;"></div>
+<div id="worldmap_widget-{{ $id }}" class="worldmap_widget" data-reload="false"></div>
 
 <script type="application/javascript">
-    loadjs('js/leaflet.js', function() {
-    loadjs('js/leaflet.markercluster.js', function () {
-    loadjs('js/leaflet.awesome-markers.min.js', function () {
-        var map = L.map('leaflet-map-{{ $id }}', { zoomSnap: 0.1 } ).setView(['{{ $init_lat }}', '{{ $init_lng }}'], '{{ sprintf('%01.1f', $init_zoom) }}');
-        L.tileLayer('//{{ $title_url }}/{z}/{x}/{y}.png', {
-            attribution: '&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
-        }).addTo(map);
+    (function () {
+        const map_id = 'worldmap_widget-{{ $id }}';
+        const status = {{ Js::from($status) }};
+        const device_group = {{ (int) $device_group }};
+        const map_config = {{ Js::from($map_config) }};
+        const group_radius = {{ (int) $group_radius }};
 
-        var markers = L.markerClusterGroup({
-            maxClusterRadius: '{{ $group_radius }}',
-            iconCreateFunction: function (cluster) {
-                var markers = cluster.getAllChildMarkers();
-                var color = "green";
-                var newClass = "Cluster marker-cluster marker-cluster-small leaflet-zoom-animated leaflet-clickable";
-                for (var i = 0; i < markers.length; i++) {
-                    if (markers[i].options.icon.options.markerColor == "blue" && color != "red") {
-                        color = "blue";
-                    }
-                    if (markers[i].options.icon.options.markerColor == "red") {
-                        color = "red";
-                    }
-                }
-                return L.divIcon({ html: cluster.getChildCount(), className: color+newClass, iconSize: L.point(40, 40) });
-            }
-        });
-        var redMarker = L.AwesomeMarkers.icon({
-            icon: 'server',
-            markerColor: 'red', prefix: 'fa', iconColor: 'white'
-        });
-        var blueMarker = L.AwesomeMarkers.icon({
-            icon: 'server',
-            markerColor: 'blue', prefix: 'fa', iconColor: 'white'
-        });
-        var greenMarker = L.AwesomeMarkers.icon({
-            icon: 'server',
-            markerColor: 'green', prefix: 'fa', iconColor: 'white'
-        });
+        loadjs('js/leaflet.js', function () {
+            loadjs('js/leaflet.markercluster.js', function () {
+                loadjs('js/leaflet.awesome-markers.min.js', function () {
+                    loadjs('js/L.Control.Locate.min.js', function () {
+                        init_map(map_id, map_config).scrollWheelZoom.disable();
+                        populate_map_markers(map_id, group_radius, status, device_group);
 
-        @foreach($devices as $device)
-            @if($status != '0' or !$device->isUnderMaintenance())
-                var title = '<a href="@deviceUrl($device)"><img src="{{ $device->icon }}" width="32" height="32" alt=""> {{ $device->displayName() }}</a>';
-                var tooltip = '{{ $device->displayName() }}';
-                var marker = L.marker(new L.LatLng('{{ $device->location->lat }}', '{{ $device->location->lng }}'), {title: tooltip, icon: {{ $device->markerIcon }}, zIndexOffset: {{ $device->zOffset }}});
-                marker.bindPopup(title);
-                markers.addLayer(marker);
-            @endif
-        @endforeach
-
-        map.addLayer(markers);
-        map.scrollWheelZoom.disable();
-        $(document).ready(function() {
-            $("#leaflet-map-{{ $id }}").on("click", function (event) {
-                map.scrollWheelZoom.enable();
-            }).on("mouseleave", function (event) {
-                map.scrollWheelZoom.disable();
+                        // register listeners
+                        $('#' + map_id).on('click', function (event) {
+                            get_map(map_id).scrollWheelZoom.enable();
+                        }).on('mouseleave', function (event) {
+                            get_map(map_id).scrollWheelZoom.disable();
+                        }).on('resize', function (event) {
+                            get_map(map_id).invalidateSize();
+                        }).on('refresh', function (event) {
+                            get_map(map_id).invalidateSize();
+                            populate_map_markers(map_id, group_radius, status, device_group);
+                        }).on('destroy', function (event) {
+                            destroy_map(map_id);
+                        });
+                    });
+                });
             });
         });
-
-    });});});
+    })();
 </script>