mirror of
https://github.com/librenms/librenms.git
synced 2024-10-07 16:52:45 +00:00
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>
This commit is contained in:
Rémy Jacquin
committed by
Neil Lathwood
Neil Lathwood
parent
c14efbf904
commit
8d4fca33b1
@@ -5,7 +5,7 @@ LibreNMS comes with a configurable Geo Map based on World Map Widget to visualiz
|
||||
|
||||
### World Map Widget
|
||||
|
||||
World Map Widget, requires you to have properly formatted addresses in sysLocation or sysLocation override. As part of the standard poller these addresses will be Geocoded by Google and stored in the database.
|
||||
World Map Widget, requires you to have properly formatted addresses in sysLocation or sysLocation override. As part of the standard poller these addresses will be Geocoded by Google and stored in the database.
|
||||
|
||||
Location resolution happens as follows
|
||||
|
||||
@@ -17,11 +17,11 @@ Location resolution happens as follows
|
||||
Example:
|
||||
|
||||
[40.424521, -86.912755]
|
||||
|
||||
|
||||
or
|
||||
|
||||
|
||||
1100 Congress Ave, Austin, TX 78701
|
||||
|
||||
|
||||
|
||||
We have two current mapping engines available:
|
||||
|
||||
@@ -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:
|
||||
|
||||
|
||||
|
||||
@@ -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);
|
||||
@@ -2183,4 +2193,4 @@ label {
|
||||
display: inline-block;
|
||||
margin-right: 8px;
|
||||
float: left;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -4,12 +4,12 @@
|
||||
* it under the terms of the GNU General Public License as published by
|
||||
* the Free Software Foundation, either version 3 of the License, or
|
||||
* (at your option) any later version.
|
||||
*
|
||||
*
|
||||
* This program is distributed in the hope that it will be useful,
|
||||
* but WITHOUT ANY WARRANTY; without even the implied warranty of
|
||||
* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.See the
|
||||
* GNU General Public License for more details.
|
||||
*
|
||||
*
|
||||
* You should have received a copy of the GNU General Public License
|
||||
* along with this program. If not, see <http://www.gnu.org/licenses/>. */
|
||||
|
||||
@@ -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,8 +192,17 @@ var greenMarker = L.AwesomeMarkers.icon({
|
||||
$map_devices['lng'] = $tmp_loc['lng'];
|
||||
}
|
||||
if ($map_devices['status'] == 0) {
|
||||
$icon = 'redMarker';
|
||||
$z_offset = 10000; // move marker to foreground
|
||||
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)."';
|
||||
@@ -194,10 +213,10 @@ marker.bindPopup(title);
|
||||
$temp_output .= 'map.addLayer(markers);
|
||||
map.scrollWheelZoom.disable();
|
||||
$(document).ready(function(){
|
||||
$("#leaflet-map").on("click", function(event) {
|
||||
$("#leaflet-map").on("click", function(event) {
|
||||
map.scrollWheelZoom.enable();
|
||||
});
|
||||
$("#leaflet-map").mouseleave(function(event) {
|
||||
$("#leaflet-map").mouseleave(function(event) {
|
||||
map.scrollWheelZoom.disable();
|
||||
});
|
||||
});
|
||||
|
||||
Reference in New Issue
Block a user