webui: Devices in maintenance show as blue on worldmap widget (#8207)

* Added new worldmap widget setting:
The user can chose how down devices under maintenance are shown
Signed-off-by: Rémy Jacquin <remy@remyj.fr>

* Added documentation related to this feature

Signed-off-by: Rémy Jacquin <remy@remyj.fr>

* Change icon to light blue and remove option
Reverted "Added new worldmap widget setting"
Signed-off-by: Rémy Jacquin <remy@remyj.fr>

doc/Extensions/World-Map.md

@@ -31,6 +31,11 @@ We have two current mapping engines available:
 
 ### World Map Widget Settings
 
+- *Initial Latitude / Longitude*: The map will be centered on those coordinates.
+- *Initial Zoom*: Initial zoom of the map. [More information about zoom levels](https://wiki.openstreetmap.org/wiki/Zoom_levels).
+- *Grouping radius*: Markers are grouped by area. This value define the maximum size of grouping areas.
+- *Show devices*: Show devices based on there status.
+
 Example Settings:
 
 ![Example World Map Settings](/img/world-map-widget-settings.png)

html/css/styles.css

@@ -1884,6 +1884,16 @@ label {
     color: white;
 }
 
+.blueCluster {
+    background-color: rgba(23,162,184, 0);
+    background-color: rgba(23,162,184,0.7);
+    text-align: center;
+    width: 25px !important;
+    height: 25px !important;
+    font-size: 14px;
+    color: white;
+}
+
 .greenCluster {
     background-color: rgba(0,255,0, 0);
     background-color: rgba(110, 204, 57, 0.6);

html/includes/common/worldmap.inc.php

@@ -21,6 +21,8 @@
  * @package LibreNMS
  * @subpackage Frontpage
  */
+require_once $config['install_dir'] . '/includes/alerts.inc.php';
+require_once $config['install_dir'] . '/includes/device-groups.inc.php';
 
 if ($config['map']['engine'] == 'leaflet') {
     if (defined('SHOW_SETTINGS') && $config['front_page'] == "pages/front/tiles.php") {
@@ -136,19 +138,27 @@ var markers = L.markerClusterGroup({
     iconCreateFunction: function (cluster) {
         var markers = cluster.getAllChildMarkers();
         var n = 0;
-        newClass = "greenCluster marker-cluster marker-cluster-small leaflet-zoom-animated leaflet-clickable";
+        color = "green"
+        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") {
-                newClass = "redCluster marker-cluster marker-cluster-small leaflet-zoom-animated leaflet-clickable";
+                color = "red";
             }
         }
-        return L.divIcon({ html: cluster.getChildCount(), className: newClass, iconSize: L.point(40, 40) });
+        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\'
@@ -182,9 +192,18 @@ var greenMarker = L.AwesomeMarkers.icon({
                 $map_devices['lng'] = $tmp_loc['lng'];
             }
             if ($map_devices['status'] == 0) {
+                if (IsMaintenance($map_devices['device_id'])) {
+                    if ($widget_settings['status'] == '0') { // Don't show icon if only down devices should be shown
+                        continue;
+                    } else {
+                        $icon = 'blueMarker';
+                        $z_offset = 5000;
+                    }
+                } else {
                     $icon = 'redMarker';
                     $z_offset = 10000;  // move marker to foreground
                 }
+            }
             $temp_output .= "var title = '<a href=\"" . generate_device_url($map_devices) . "\"><img src=\"".getIcon($map_devices)."\" width=\"32\" height=\"32\" alt=\"\"> ".format_hostname($map_devices)."</a>';
 var tooltip = '".format_hostname($map_devices)."';
 var marker = L.marker(new L.LatLng(".$map_devices['lat'].", ".$map_devices['lng']."), {title: tooltip, icon: $icon, zIndexOffset: $z_offset});