summaryrefslogtreecommitdiffstats
path: root/public/js/module.js
diff options
context:
space:
mode:
Diffstat (limited to 'public/js/module.js')
-rw-r--r--public/js/module.js628
1 files changed, 628 insertions, 0 deletions
diff --git a/public/js/module.js b/public/js/module.js
new file mode 100644
index 0000000..8201104
--- /dev/null
+++ b/public/js/module.js
@@ -0,0 +1,628 @@
+(function (Icinga) {
+
+ function colorMarker(worstState, icon) {
+ var markerColor = 'awesome-marker';
+
+ // TODO: Different marker icon for not-OK states
+ // if(worstState > 0) {
+ // markerColor = markerColor + ' awesome-marker-square';
+ // }
+
+ var marker = L.AwesomeMarkers.icon({
+ icon: icon,
+ markerColor: state2color(worstState),
+ className: markerColor
+ });
+
+ return marker
+ }
+
+ function state2color(state) {
+ switch (parseInt(state)) {
+ case 0:
+ return "green";
+ case 1:
+ return "orange";
+ case 2:
+ return "red";
+ case 3:
+ return "purple";
+ default:
+ return "blue";
+ }
+ }
+
+ function isFilterParameter(parameter) {
+ return (parameter.charAt(0) === '(' || parameter.match('^[_]{0,1}(host|service)') || parameter.match('^(object|state)Type') || parameter.match('^problems'));
+ }
+
+ function getParameters(id) {
+ var params = decodeURIComponent($('#map-' + id).closest('.module-map').data('icingaUrl')).split('&');
+
+ // remove module path from url parameters
+ if (params.length > 0) {
+ params[0] = params[0].replace(/^.*\?/, '')
+ }
+
+ return params
+ }
+
+ function unique(list) {
+ var result = [];
+ $.each(list, function (i, e) {
+ if ($.inArray(e, result) == -1) result.push(e);
+ });
+ return result;
+ }
+
+ function filterParams(id, extra) {
+ var sURLVariables = getParameters(id);
+ var params = [],
+ i;
+
+ if (extra !== undefined) {
+ sURLVariables = $.merge(extra.split('&'), sURLVariables);
+ sURLVariables = unique(sURLVariables);
+ }
+
+ for (i = 0; i < sURLVariables.length; i++) {
+ // Protect Icinga filter syntax
+ if (isFilterParameter(sURLVariables[i])) {
+ params.push(sURLVariables[i]);
+ continue;
+ }
+ }
+
+ return params.join("&")
+ }
+
+ function showDefaultView() {
+ if (map_default_lat !== null && map_default_long !== null) {
+ if (map_default_zoom !== null) {
+ cache[id].map.setView([map_default_lat, map_default_long], map_default_zoom);
+ } else {
+ cache[id].map.setView([map_default_lat, map_default_long]);
+ }
+ } else {
+ cache[id].map.fitWorld()
+ }
+ }
+
+ function toggleFullscreen() {
+ icinga.ui.toggleFullscreen();
+ cache[id].map.invalidateSize();
+ cache[id].fullscreen = !cache[id].fullscreen;
+ if (cache[id].fullscreen) {
+ $('.controls').hide();
+ } else {
+ $('.controls').show();
+ }
+ }
+
+ // TODO: Allow update of multiple parameters
+ function updateUrl(pkey, pvalue) {
+ // Don't update URL if in dashlet mode
+ if (dashlet) {
+ return;
+ }
+
+ var $target = $('.module-map');
+ var $currentUrl = $target.data('icingaUrl');
+ var basePath = $currentUrl.replace(/\?.*$/, '');
+ var searchPath = $currentUrl.replace(/^.*\?/, '');
+
+ var sURLVariables = (searchPath === basePath ? [] : searchPath.split('&'));
+
+ var updated = false;
+ for (var i = 0; i < sURLVariables.length; i++) {
+ // Don't replace Icinga filters
+ if (isFilterParameter(sURLVariables[i])) {
+ continue;
+ }
+
+ var tmp = sURLVariables[i].split('=');
+ if (tmp[0] == pkey) {
+ sURLVariables[i] = tmp[0] + '=' + pvalue;
+ updated = true;
+ break;
+ }
+ }
+
+ // Parameter is to be added
+ if (!updated) {
+ sURLVariables.push(pkey + "=" + pvalue);
+ }
+
+ $target.data('icingaUrl', basePath + '?' + sURLVariables.join('&'));
+ icinga.history.pushCurrentState();
+ }
+
+ function getWorstState(states) {
+ var worstState = 0;
+ var allPending = -1;
+ var allUnknown = -1;
+ var last = -1;
+
+ if (states.length == 1) {
+ return states[0];
+ }
+
+ for (var i = 0, len = states.length; i < len; i++) {
+ var state = states[i];
+ if (state < 3) {
+ if (allPending == 1) {
+ allPending = 0;
+ } else if (allUnknown == 1) {
+ allUnknown = 0;
+ }
+ }
+
+ if (state > 2) {
+ // PENDING
+ if (state == 99) {
+ if (allPending < 0 && last < 0) {
+ allPending = 1;
+ }
+
+ // OK -> PENDING -> UNKNOWN -> WARNING -> CRITICAL
+ state = 0.25;
+ }
+
+ // UNKNOWN
+ if (state == 3) {
+ if (allUnknown < 0 && last < 0) {
+ allUnknown = 1;
+ }
+
+ // OK -> PENDING -> UNKNOWN -> WARNING -> CRITICAL
+ state = 0.5;
+ }
+ }
+
+ if (state > worstState) {
+ worstState = state;
+ }
+
+ last = state;
+ }
+
+ if (allPending == 1) {
+ worstState = 99;
+ }
+
+ if (allUnknown == 1) {
+ worstState = 3;
+ }
+
+ // Restore PENDING and UNKNOWN
+ if (worstState == 0.25) {
+ worstState = 99;
+ } else if (worstState == 0.5) {
+ worstState = 3;
+ }
+
+ return worstState;
+ }
+
+ function mapCenter(hostname) {
+ if (cache[id].hostMarkers[hostname]) {
+ var el = cache[id].hostMarkers[hostname];
+ cache[id].map.panTo(cache[id].hostMarkers[hostname].getLatLng())
+ }
+ }
+
+ var cache = {};
+
+ var Map = function (module) {
+ this.module = module;
+ this.initialize();
+ this.timer;
+ this.module.icinga.logger.debug('Map module loaded');
+ };
+
+ Map.prototype = {
+
+ initialize: function () {
+ this.timer = {};
+ this.module.on('rendered', this.onRenderedContainer);
+ this.registerTimer()
+ },
+
+ registerTimer: function (id) {
+ this.timer = this.module.icinga.timer.register(
+ this.updateAllMapData,
+ this,
+ 10000
+ );
+ return this;
+ },
+
+ removeTimer: function (id) {
+ this.module.icinga.timer.unregister(this.timer);
+ return this
+ },
+
+ onPopupOpen: function (evt) {
+ $('.detail-link').on("click", function (ievt) {
+ mapCenter(evt.popup._source.options.id);
+ cache[id].map.invalidateSize();
+ });
+ },
+
+ updateAllMapData: function () {
+ var _this = this;
+
+ if (cache.length == 0) {
+ this.removeTimer(id)
+ return this
+ }
+
+ $.each(cache, function (id) {
+ if (!$('#map-' + id).length) {
+ delete cache[id]
+ } else {
+ _this.updateMapData({id: id})
+ }
+ });
+ },
+
+ updateMapData: function (parameters) {
+ var id = parameters.id;
+ var show_host = parameters.show_host;
+ var $that = this;
+
+ function showHost(hostname) {
+ if (cache[id].hostMarkers[hostname]) {
+ var el = cache[id].hostMarkers[hostname];
+ cache[id].markers.zoomToShowLayer(el, function () {
+ el.openPopup();
+ })
+ }
+ }
+
+ function removeOldMarkers(id, data) {
+ // remove old markers
+ $.each(cache[id].hostMarkers, function (identifier, d) {
+ if ((data['hosts'] && !data['hosts'][identifier]) && (data['services'] && !data['services'][identifier])) {
+ cache[id].markers.removeLayer(d);
+ delete cache[id].hostMarkers[identifier];
+ }
+ });
+ }
+
+ function errorMessage(msg) {
+ cache[id].map.spin(false);
+ $map = cache[id].map;
+ $map.openModal({
+ content: "<p>Could not fetch data from API:</p><pre>" + msg + "</pre>",
+ onShow: function (evt) {
+ $that.removeTimer(id)
+ },
+ onHide: function (evt) {
+ $that.registerTimer(id);
+ }
+ });
+ }
+
+ function processData(json) {
+ if (json['message']) {
+ errorMessage(json['message']);
+ return;
+ }
+ removeOldMarkers(id, json);
+
+ $.each(json, function (type, element) {
+ $.each(element, function (identifier, data) {
+ if (data.length < 1 || data['coordinates'] == "") {
+ console.log('found empty coordinates: ' + data)
+ return true
+ }
+
+ var states = [];
+ var icon;
+ var services;
+ var worstState;
+ var display_name = (data['host_display_name'] ? data['host_display_name'] : hostname);
+
+ if (type === 'hosts') {
+ states.push((data['host_state'] == 1 ? 2 : data['host_state']))
+ }
+
+ services = '<div class="map-popup-services">';
+ services += '<h1><span class="icon-services"></span> Services</h1>';
+ services += '<div class="scroll-view">';
+ services += '<table class="icinga-module module-monitoring">';
+ services += '<tbody>';
+
+ $.each(data['services'], function (service_display_name, service) {
+ states.push(service['service_state']);
+
+ service_handled = "";
+ if ((data['host_state'] == 1 && data['host_acknowledged']) || (service['service_acknowledged'] == 1 || service['service_in_downtime'] == 1)) {
+ service_handled = " handled";
+ }
+
+ services += '<tr>';
+
+ services += '<td class="';
+ services += "state-col";
+ services += " state-" + service_status[service['service_state']][1].toLowerCase();
+ services += "" + service_handled;
+ services += '">';
+ services += '<div class="state-label">';
+ services += service_status[service['service_state']][0];
+ services += '</div>';
+ services += '</td>';
+
+ services += '<td>';
+ services += '<div class="state-header">';
+ services += '<a data-hostname="' + data['host_name'] + '" data-base-target="_next" href="'
+ + icinga.config.baseUrl
+ + '/monitoring/service/show?host='
+ + data['host_name']
+ + '&service='
+ + service['service_name']
+ + '">';
+ services += service_display_name;
+ services += '</a>'
+ services += '</div>'
+ services += '</td>';
+
+ services += '</tr>';
+
+ if (type === 'services') {
+ display_name = service_display_name + " (" + display_name + ")";
+ }
+ });
+
+ services += '</tbody>';
+ services += '</table>';
+ services += '</div>';
+ services += '</div>';
+
+ worstState = getWorstState(states);
+
+ var marker_icon = (type === 'hosts' ? 'host' : 'service');
+ if (data['icon']) {
+ marker_icon = data['icon'];
+ }
+
+ icon = colorMarker(worstState, marker_icon);
+
+ var host_icon = "";
+ if (data['host_icon_image'] != "") {
+ host_icon = '<img src="' + icinga.config.baseUrl + '/img/icons/'
+ + data['host_icon_image']
+ + '"'
+ + ((data['host_icon_image_alt'] != "") ? ' alt="' + data['host_icon_image_alt'] + '"' : '')
+ + ' class="host-icon-image icon">';
+ }
+
+ var host_status = type === 'hosts' && data['host_state'] == 1 ? "<div id=\"hoststatus\">" + translation['host-down'] + "</div>" : "";
+
+ var info = '<div class="map-popup">';
+ info += '<h1>';
+ info += '<a class="detail-link" data-hostname="' + data['host_name'] + '" data-base-target="_next" href="'
+ + icinga.config.baseUrl
+ + '/monitoring/host/show?host='
+ + data['host_name']
+ + '">';
+ info += ' <span class="icon-eye"></span> ';
+ info += '</a>';
+ info += data['host_display_name'] + '</h1>';
+ info += host_status;
+
+ info += services;
+ info += '</div>';
+
+ var marker;
+
+ if (cache[id].hostMarkers[identifier]) {
+ marker = cache[id].hostMarkers[identifier];
+ marker.options.state = worstState;
+ marker.setIcon(icon);
+ } else {
+ marker = L.marker(data['coordinates'],
+ {
+ icon: icon,
+ title: display_name,
+ riseOnHover: true,
+ id: identifier,
+ state: worstState,
+ }).addTo(cache[id].markers);
+
+ cache[id].hostMarkers[identifier] = marker;
+ cache[id].hostData[identifier] = data
+ }
+
+ marker.bindPopup(info);
+ })
+ });
+
+ cache[id].markers.refreshClusters();
+ cache[id].map.spin(false);
+
+ // TODO: Should be updated instant and not only on data refresh
+ cache[id].map.invalidateSize();
+
+ if (show_host != "") {
+ showHost(show_host);
+ show_host = ""
+ }
+ }
+
+ var url = icinga.config.baseUrl + '/map/data/points?' + filterParams(id, cache[id].parameters);
+ $.getJSON(url, processData)
+ .fail(function (jqxhr, textStatus, error) {
+ errorMessage(error);
+ });
+ },
+
+ onRenderedContainer: function (event) {
+ // in module configuration we don't have a map, so return peacefully
+ if (typeof id === 'undefined') {
+ return;
+ }
+
+ cache[id] = {};
+ cache[id].map = L.map('map-' + id, {
+ zoomControl: false,
+ worldCopyJump: true
+ }
+ );
+
+ var osm = L.tileLayer(tile_url, {
+ attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a>',
+ subdomains: ['a', 'b', 'c'],
+ maxNativeZoom: map_max_native_zoom,
+ maxZoom: map_max_zoom,
+ minZoom: map_min_zoom
+ });
+ osm.addTo(cache[id].map);
+
+ cache[id].markers = new L.MarkerClusterGroup({
+ iconCreateFunction: function (cluster) {
+ var childCount = cluster_problem_count ? 0 : cluster.getChildCount();
+
+ var states = [];
+ $.each(cluster.getAllChildMarkers(), function (id, el) {
+ states.push(el.options.state);
+
+ if (cluster_problem_count && el.options.state > 0) {
+ childCount++;
+ }
+ });
+
+ var worstState = getWorstState(states);
+ var c = ' marker-cluster-' + worstState;
+
+ return new L.DivIcon({
+ html: '<div><span>' + childCount + '</span></div>',
+ className: 'marker-cluster' + c,
+ iconSize: new L.Point(40, 40)
+ });
+ },
+ maxClusterRadius: function (zoom) {
+ return (zoom <= disable_cluster_at_zoom) ? 80 : 1; // radius in pixels
+ },
+ });
+
+ cache[id].hostMarkers = {};
+ cache[id].hostData = {};
+
+ cache[id].fullscreen = false;
+ cache[id].parameters = url_parameters;
+
+ // TODO: fixme
+ // var basePath = $currentUrl.replace(/\?.*$/, '');
+ // var initialUrl = icinga.
+ // $('#map-' + id).closest('.module-map').data('icingaUrl', url_parameters);
+
+ showDefaultView();
+
+ cache[id].map.on('popupopen', this.onPopupOpen);
+
+ L.control.zoom({
+ zoomInTitle: translation['btn-zoom-in'],
+ zoomOutTitle: translation['btn-zoom-in']
+ }
+ ).addTo(cache[id].map);
+
+ if (!dashlet) {
+ L.easyButton({
+ states: [{
+ icon: 'icon-dashboard', title: translation['btn-dashboard'], onClick: function (btn, map) {
+ var dashletUri = "map" + window.location.search;
+ var uri = icinga.config.baseUrl + "/" + "dashboard/new-dashlet?url=" + encodeURIComponent(dashletUri);
+
+ window.open(uri, "_self")
+ }
+ }]
+ }).addTo(cache[id].map);
+
+ L.easyButton({
+ states: [{
+ icon: 'icon-resize-full-alt',
+ title: translation['btn-fullscreen'],
+ onClick: function (btn, map) {
+ toggleFullscreen();
+ }
+ }]
+ }).addTo(cache[id].map);
+
+ L.easyButton({
+ states: [{
+ icon: 'icon-globe', title: translation['btn-default'], onClick: function (btn, map) {
+ showDefaultView();
+ }
+ }]
+ }).addTo(cache[id].map);
+
+
+ L.control.locate({
+ icon: 'icon-pin',
+ strings: {title: translation['btn-locate']}
+ }).addTo(cache[id].map);
+
+ cache[id].map.on('map-container-resize', function () {
+ map.invalidateSize();
+ console.log("Resize")
+ });
+
+ cache[id].map.on('moveend', function (e) {
+ var center = cache[id].map.getCenter();
+
+ var lat = center.lat;
+ var lng = center.lng;
+
+ updateUrl('default_lat', lat);
+ updateUrl('default_long', lng)
+ });
+
+ cache[id].map.on('zoomend', function (e) {
+ var zoomLevel = cache[id].map.getZoom();
+ updateUrl('default_zoom', zoomLevel)
+ });
+
+ cache[id].map.on('click', function (e) {
+ // only for debugging needed
+ // var id = e.target._container.id.replace('map-', '');
+
+ if (e.originalEvent.ctrlKey) {
+ var coord = 'vars.geolocation = "'
+ + e.latlng.lat.toFixed(6)
+ + ','
+ + e.latlng.lng.toFixed(6)
+ + '"';
+
+ var popup = "<h1>Location selected</h1>"
+ + "<p>To use this location with your host(s) or service(s), just add the following config to your object definition:</p>"
+ + "<pre>" + coord + "</pre>";
+
+ var marker;
+ marker = L.marker(e.latlng, {icon: colorMarker(99, 'globe')});
+ marker.bindPopup(popup);
+ marker.addTo(cache[id].markers);
+
+ marker.on('popupclose', function (evt) {
+ cache[id].markers.removeLayer(marker);
+ });
+
+ cache[id].markers.zoomToShowLayer(marker, function () {
+ marker.openPopup();
+ })
+ }
+ });
+ }
+
+ cache[id].markers.addTo(cache[id].map);
+
+ cache[id].map.spin(true);
+ this.updateMapData({id: id, show_host: map_show_host})
+
+ }
+ };
+
+ Icinga.availableModules.map = Map;
+
+}(Icinga));
generated by cgit v1.2.3 (git 2.39.1) at 2024-11-20 13:02:57 +0000