mirror of
https://github.com/ntop/ntopng.git
synced 2026-10-31 19:12:03 +00:00
260 lines
8.4 KiB
Text
260 lines
8.4 KiB
Text
<div class="row">
|
|
<div class='col-md-12 col-lg-12 col-xs-12 mb-4'>
|
|
<div id="hosts-geomap-menu" class="dropdown" style="text-align: end;">
|
|
<button id="hosts-geomap-default-hosts" type="button" class="btn btn-link dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
|
|
Active Hosts
|
|
</button>
|
|
<ul class="dropdown-menu">
|
|
<li><a id="hosts-geomap-active-hosts" class="dropdown-item" href="#">Active Hosts</a></li>
|
|
<li><a id="hosts-geomap-alerted-hosts" class="dropdown-item" href="#">Alerted Hosts</a></li>
|
|
</ul>
|
|
</div>
|
|
<div id='geomap-alert' style="display: none" role="alert" class='alert alert-danger'>
|
|
<span id='error-message'></span>
|
|
<button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
|
|
</div>
|
|
<div class="d-flex justify-content-center align-items-center" style="height: 720px" id="map-canvas">
|
|
<div class="spinner-border text-primary" role="status">
|
|
<span class="sr-only">Loading...</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<script type='text/javascript'>
|
|
|
|
const zoomIP = undefined;
|
|
|
|
const display_localized_error = (error_code) => {
|
|
$('#geomap-alert #error-message').html(`<b>{* i18n("geo_map.geolocation_warning") *}</b>: {* i18n("geo_map.using_default_location") *}`);
|
|
$('#geomap-alert').removeClass('alert-danger').addClass('alert-warning').show();
|
|
}
|
|
|
|
const display_localized_no_geolocation_msg = () => {
|
|
$('#geomap-alert p').html(`{* i18n("geo_map.unavailable_geolocation") .. ' ' .. i18n("geo_map.using_default_location") *}`);
|
|
$('#geomap-alert').addClass('alert-info').removeClass('alert-danger').show();
|
|
}
|
|
|
|
const red_marker = L.icon();
|
|
|
|
const info_key_names = {
|
|
"score": i18n_ext.score,
|
|
"asname": i18n_ext.as,
|
|
"html": i18n_ext.nation,
|
|
"active_alerted_flows": i18n_ext.alerted_flows,
|
|
"num_blacklisted_flows": i18n_ext.blacklisted_flows,
|
|
"bytes.sent": i18n_ext.traffic_sent,
|
|
"bytes.rcvd": i18n_ext.traffic_rcvd,
|
|
"total_flows": i18n_ext.flows,
|
|
};
|
|
|
|
const formatters = {
|
|
"bytes.sent": NtopUtils.bytesToSize,
|
|
"bytes.rcvd": NtopUtils.bytesToSize,
|
|
}
|
|
|
|
const default_coords = [41.9, 12.4833333];
|
|
const zoom_level = 4;
|
|
let addRefToHost = true;
|
|
let endpoint = http_prefix + "/lua/rest/v2/get/geo_map/hosts.lua?";
|
|
let baseEndpoint = "";
|
|
|
|
// initialize alert api
|
|
//$('#geomap-alert').alert();
|
|
|
|
const create_marker = (h) => {
|
|
h = JSON.parse(JSON.stringify(h));
|
|
const settings = { title: h.name };
|
|
if (h.isRoot) settings.icon = red_marker;
|
|
|
|
const ip = h.ip
|
|
const lat = h.lat;
|
|
const lng = h.lng;
|
|
const name = h.name;
|
|
let name_ip = ip;
|
|
let extra_info = '';
|
|
|
|
h.ip = null;
|
|
h.lat = null;
|
|
h.lng = null;
|
|
h.name = null;
|
|
h.isRoot = null;
|
|
|
|
// Formatting the extra info to print into the Geo Map
|
|
for (const key in h) {
|
|
if(formatters[key])
|
|
h[key] = formatters[key](h[key])
|
|
|
|
if(h[key] && info_key_names[key])
|
|
extra_info = extra_info + info_key_names[key] + ": <b>" + h[key] + "</b></br>";
|
|
}
|
|
|
|
if(h["flow_status"]) {
|
|
let flow_status = i18n_ext.flow_status + ":</br>";
|
|
for (const prop in h["flow_status"]) {
|
|
flow_status = flow_status + "<b>" + h["flow_status"][prop]["num_flows"] + " Flows, " + h["flow_status"][prop]["label"] + "</b></br>";
|
|
}
|
|
extra_info = extra_info + flow_status;
|
|
}
|
|
|
|
if(name)
|
|
name_ip = name + "</br>" + name_ip;
|
|
|
|
const marker = `<div class='infowin'>
|
|
<a href='${http_prefix}/lua/host_details.lua?host=${ip}'>${name_ip}</a>
|
|
<hr>
|
|
${extra_info}
|
|
</div>`
|
|
|
|
return L.marker(L.latLng(lat, lng), settings).bindPopup(marker);
|
|
}
|
|
|
|
// return true if the status code is different from 200
|
|
const check_status_code = (status_code, status_text, $error_label) => {
|
|
|
|
const is_different = (status_code != 200);
|
|
|
|
if (is_different && $error_label != null) {
|
|
$error_label.find('p').text(`${i18n_ext.request_failed_message}: ${status_code} - ${status_text}`).show();
|
|
}
|
|
else if (is_different && $error_label == null) {
|
|
alert(`${i18n_ext.request_failed_message}: ${status_code} - ${status_text}`);
|
|
}
|
|
|
|
return is_different;
|
|
}
|
|
|
|
const display_errors = (errors) => {
|
|
const error_messages = {
|
|
1: 'Permission denied',
|
|
2: 'Position unavailable',
|
|
3: 'Request timeout'
|
|
};
|
|
const error_code = error_messages[errors.code];
|
|
|
|
show_positions({ coords: { latitude: 0, longitude: 0 }});
|
|
|
|
if (errors.code != 1) {
|
|
display_localized_error(error_code);
|
|
}
|
|
}
|
|
|
|
const init_map = (newEndpoint = null, _baseEndpoint = null) => {
|
|
endpoint = newEndpoint || endpoint;
|
|
baseEndpoint = _baseEndpoint;
|
|
|
|
if (navigator.geolocation) {
|
|
navigator.geolocation.getCurrentPosition(show_positions, display_errors,
|
|
{
|
|
enableHighAccuracy: true,
|
|
timeout: 10000,
|
|
maximumAge: 0
|
|
}
|
|
);
|
|
}
|
|
}
|
|
|
|
const draw_markers = (hosts, map_markers, map) => {
|
|
hosts.forEach(h => {
|
|
map_markers.addLayer(
|
|
create_marker(h)
|
|
);
|
|
|
|
// make a transitions to the root host
|
|
if (h.isRoot) {
|
|
map.flyTo([h.lat, h.lng], zoom_level);
|
|
}
|
|
});
|
|
map.addLayer(map_markers);
|
|
}
|
|
|
|
let hosts = null;
|
|
let map = null;
|
|
let markers = null;
|
|
|
|
const redraw_hosts = (show_only_alert_hosts, redo_query = false, extra_endpoint_params = null) => {
|
|
if (markers == null || map == null || hosts == null) {
|
|
console.error("map isn't initialized!");
|
|
return;
|
|
}
|
|
markers.clearLayers();
|
|
|
|
if(redo_query == true) {
|
|
$.get(`${baseEndpoint}?${extra_endpoint_params}&ifid=${interfaceID}&${zoomIP || ''}`)
|
|
.then((data) => {
|
|
hosts = data.rsp;
|
|
draw_markers(data.rsp, markers, map);
|
|
})
|
|
.fail(({ status, statusText }) => {
|
|
NtopUtils.check_status_code(status, statusText, $("#geomap-alert"));
|
|
});
|
|
} else {
|
|
//map.removeLayer(markers);
|
|
let temp_hosts = hosts.filter((h) => h.isAlert == true || !show_only_alert_hosts);
|
|
draw_markers(temp_hosts, markers, map);
|
|
}
|
|
}
|
|
|
|
const show_positions = (current_user_position) => {
|
|
// these are two map providers provided by: https://leaflet-extras.github.io/leaflet-providers/preview/
|
|
const layers = {
|
|
light: "https://tile.openstreetmap.org/{z}/{x}/{y}.png",
|
|
// dark: "https://tiles.stadiamaps.com/tiles/alidade_smooth_dark/{z}/{x}/{y}{r}.png"
|
|
};
|
|
// select the right layer
|
|
const layer = layers.light;
|
|
const user_coords = [current_user_position.coords.latitude, current_user_position.coords.longitude];
|
|
|
|
if (user_coords[0] == 0 && user_coords[1] == 0) {
|
|
/* Do not even report the info/error to the user, this is
|
|
* not relevant as the map functionality is not impacted */
|
|
//display_localized_no_geolocation_msg();
|
|
console.log("Geolocation unavailable, using default location");
|
|
|
|
user_coords[0] = default_coords[0], user_coords[1] = default_coords[1];
|
|
}
|
|
//document.getElementById('map-canvas').innerHTML = "<div id='map' style='width: 100%; height: 100%;'></div>";
|
|
const hosts_map = L.map('map-canvas').setView(user_coords || default_coords, zoom_level);
|
|
map = hosts_map;
|
|
const map_markers = L.markerClusterGroup({
|
|
maxClusterRadius: 100,
|
|
spiderLegPolylineOptions: {
|
|
opacity: 0
|
|
}
|
|
});
|
|
markers = map_markers;
|
|
map = hosts_map;
|
|
|
|
L.tileLayer(layer, {
|
|
attribution: '© <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
|
|
}).addTo(hosts_map);
|
|
|
|
if (hosts != null) {
|
|
draw_markers(hosts, map_markers, hosts_map);
|
|
return;
|
|
}
|
|
|
|
$.get(`${endpoint}&ifid=${interfaceID}&${zoomIP || ''}`)
|
|
.then((data) => {
|
|
hosts = data.rsp;
|
|
draw_markers(data.rsp, map_markers, hosts_map);
|
|
})
|
|
.fail(({ status, statusText }) => {
|
|
NtopUtils.check_status_code(status, statusText, $("#geomap-alert"));
|
|
});
|
|
|
|
}
|
|
|
|
$(document).ready(function() {
|
|
init_map();
|
|
$("#hosts-geomap-active-hosts").on("click", function(t) {
|
|
$("#hosts-geomap-default-hosts").text(" Active Hosts ")
|
|
redraw_hosts(false);
|
|
});
|
|
$("#hosts-geomap-alerted-hosts").on("click", function(t) {
|
|
$("#hosts-geomap-default-hosts").text(" Alerted Hosts ")
|
|
redraw_hosts(true);
|
|
});
|
|
|
|
});
|
|
|
|
</script>
|