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
This commit is contained in:
Tony Murray
2024-05-22 21:23:39 -05:00
committed by GitHub
parent df6a42f2a3
commit f0966f4d23
18 changed files with 542 additions and 365 deletions

View File

@@ -26,8 +26,10 @@
namespace App\Http\Controllers\Widgets;
use App\Models\Device;
use Illuminate\Http\JsonResponse;
use Illuminate\Http\Request;
use LibreNMS\Config;
use LibreNMS\Util\Url;
class WorldMapController extends WidgetController
{
@@ -37,11 +39,11 @@ class WorldMapController extends WidgetController
{
$this->defaults = [
'title' => null,
'title_url' => Config::get('leaflet.tile_url', '{s}.tile.openstreetmap.org'),
'init_lat' => Config::get('leaflet.default_lat', 51.4800),
'init_lng' => Config::get('leaflet.default_lng', 0),
'init_zoom' => Config::get('leaflet.default_zoom', 2),
'group_radius' => Config::get('leaflet.group_radius', 80),
'init_lat' => Config::get('leaflet.default_lat'),
'init_lng' => Config::get('leaflet.default_lng'),
'init_zoom' => Config::get('leaflet.default_zoom'),
'init_layer' => Config::get('geoloc.layer'),
'group_radius' => Config::get('leaflet.group_radius'),
'status' => '0,1',
'device_group' => null,
];
@@ -50,17 +52,39 @@ class WorldMapController extends WidgetController
public function getView(Request $request)
{
$settings = $this->getSettings();
$status = explode(',', $settings['status']);
$settings['dimensions'] = $request->get('dimensions');
$settings['status'] = array_map('intval', explode(',', $settings['status']));
$settings['map_config'] = [
'engine' => Config::get('geoloc.engine'),
'api_key' => Config::get('geoloc.api_key'),
'tile_url' => Config::get('leaflet.tile_url'),
'lat' => $settings['init_lat'],
'lng' => $settings['init_lng'],
'zoom' => $settings['init_zoom'],
'layer' => $settings['init_layer'],
];
$devices = Device::hasAccess($request->user())
return view('widgets.worldmap', $settings);
}
public function getData(Request $request): JsonResponse
{
$this->validate($request, [
'status' => 'array',
'status.*' => 'int',
'device_group' => 'int',
]);
return response()->json($this->getMarkerData($request, $request->status ?? [0, 1], $request->device_group ?? 0));
}
public function getMarkerData(Request $request, array $status, int $device_group_id): array
{
return Device::hasAccess($request->user())
->with('location')
->isActive()
->whereIn('status', $status)
->when($settings['device_group'], function ($query) use ($settings) {
$query->inDeviceGroup($settings['device_group']);
})
->when($device_group_id, fn ($q) => $q->inDeviceGroup($device_group_id))
->get()
->filter(function ($device) use ($status) {
/** @var Device $device */
@@ -68,31 +92,23 @@ class WorldMapController extends WidgetController
return false;
}
// add extra data
/** @phpstan-ignore-next-line */
$device->markerIcon = 'greenMarker';
/** @phpstan-ignore-next-line */
$device->zOffset = 0;
if ($device->status == 0) {
$device->markerIcon = 'redMarker';
$device->zOffset = 10000;
if ($device->isUnderMaintenance()) {
if (in_array(0, $status)) {
return false;
}
$device->markerIcon = 'blueMarker';
$device->zOffset = 5000;
}
// hide devices under maintenance if only showing down devices
if ($status == [0] && $device->isUnderMaintenance()) {
return false;
}
return true;
});
$settings['devices'] = $devices;
return view('widgets.worldmap', $settings);
})->map(function (Device $device) {
return [
'name' => $device->displayName(),
'lat' => $device->location->lat,
'lng' => $device->location->lng,
'icon' => $device->icon,
'url' => Url::deviceUrl($device),
// status: 0 = down, 1 = up, 3 = down + under maintenance
'status' => (int) ($device->status ?: ($device->isUnderMaintenance() ? 3 : 0)),
];
})->values()->all();
}
public function getSettingsView(Request $request)