New maps in progress... (contextual menus)

pandora_console/include/ajax/map.ajax.php

@@ -24,6 +24,7 @@ if (is_ajax ()) {
 	
 	
 	$getNodeData = (bool)get_parameter('getNodeData', 0);
+	$getNodeDetails = (bool)get_parameter('getNodeDetails', 0);
 	
 	if ($getNodeData) {
 		$id_node_data = (int)get_parameter('id_node_data');
@@ -106,7 +107,6 @@ if (is_ajax ()) {
 					$return_data);
 				break;
 			case ITEM_TYPE_MODULE_NETWORKMAP:
-
 				$node_data = db_get_all_rows_sql("SELECT descripcion
 													FROM tagente_modulo
 													WHERE id_agente_modulo = " . $id_node_data);
@@ -150,6 +150,114 @@ if (is_ajax ()) {
 		echo json_encode($return_data);
 		return;
 	}
+	else if ($getNodeDetails) {
+		$id_node_data = (int)get_parameter('id_node_data');
+		$type = (int)get_parameter('type');
+		$id_map = (int)get_parameter('id_map');
+		$data_graph_id = (int)get_parameter('data_graph_id');
+		$node_id = get_parameter('node_id');
+
+		switch ($type) {
+			case ITEM_TYPE_AGENT_NETWORKMAP:
+				$details = str_replace(
+					"{data_graph_id}",
+					$data_graph_id,
+					$details);
+				$details = str_replace(
+					"{node_id}",
+					$node_id,
+					$details);
+				$details = str_replace(
+					"{title}",
+					agents_get_name($id_node_data),
+					$details);
+				
+				
+				$agent_group = groups_get_name(
+					db_get_value('id_grupo', 'tagente', 'id_agente', $id_node_data));
+				
+				ob_start();
+				?>
+				<span>
+					<strong><?php echo __('IP Address');?>: </strong>
+					<?php echo agents_get_address($id_node_data);?>
+				</span><br />
+				<span>
+					<strong><?php echo __('OS');?>: </strong>
+					<?php echo os_get_name(agents_get_os($id_node_data));?>
+				</span><br />
+				<span>
+					<strong><?php echo __('Description');?>: </strong>
+					<?php echo db_get_value('comentarios', 'tagente', 'id_agente', $id_node_data);?>
+				</span> <br/>
+				<span>
+					<strong><?php echo __('Group');?>: </strong>
+					<?php echo $agent_group;?>
+				</span><br />
+				<span>
+					<strong><?php echo __('Agent Version');?>: </strong>
+					<?php echo db_get_value('agent_version', 'tagente', 'id_agente', $id_node_data);?>
+				</span><br />
+				<span>
+					<strong><?php echo __('Last Contact');?>: </strong>
+					<?php echo db_get_value('ultimo_contacto', 'tagente', 'id_agente', $id_node_data);?>
+				</span><br />
+				<span>
+					<strong><?php echo __('Remote');?>: </strong>
+					<?php echo db_get_value('ultimo_contacto_remoto', 'tagente', 'id_agente', $id_node_data);?>
+				</span>
+				<?php
+				$body = ob_get_clean();
+				
+				$details = str_replace(
+					"{body}",
+					$body,
+					$details);
+
+				break;
+			case ITEM_TYPE_MODULE_NETWORKMAP:
+				$node_data = db_get_all_rows_sql("SELECT descripcion
+													FROM tagente_modulo
+													WHERE id_agente_modulo = " . $id_node_data);
+
+				$node_data = $node_data[0];
+
+				$details = str_replace(
+					"{data_graph_id}",
+					$data_graph_id,
+					$details);
+				$details = str_replace(
+					"{node_id}",
+					$node_id,
+					$details);
+				$details = str_replace(
+					"{title}",
+					modules_get_agentmodule_name($id_node_data),
+					$details);
+
+				ob_start();
+				?>
+				<span>
+					<strong><?php echo __('Agent Name');?>: </strong>
+					<?php echo agents_get_name(modules_get_agentmodule_agent($id_node_data));?>
+				</span> <br/>
+				<span>
+					<strong><?php echo __('Description');?>: </strong>
+					<?php echo db_get_value('descripcion', 'tagente_modulo', 'id_agente_modulo', $id_node_data);?>
+				</span> <br/>
+				<?php
+				$body = ob_get_clean();
+
+				$details = str_replace(
+					"{body}",
+					$body,
+					$details);
+				break;
+		}
+
+		echo json_encode($details);
+		return;
+	}
 
 }
 ?>

pandora_console/include/javascript/d3-context-menu.js

@@ -0,0 +1,78 @@
+(function(root, factory) {
+	if (typeof module === 'object' && module.exports) {
+		module.exports = function(d3) {
+			d3.contextMenu = factory(d3);
+			return d3.contextMenu;
+		};
+	} else {
+		root.d3.contextMenu = factory(root.d3);
+	}
+}(	this, 
+	function(d3) {
+		return function (menu, opts) {
+
+			var openCallback,
+				closeCallback;
+
+			if (typeof opts === 'function') {
+				openCallback = opts;
+			} else {
+				opts = opts || {};
+				openCallback = opts.onOpen;
+				closeCallback = opts.onClose;
+			}
+
+			// create the div element that will hold the context menu
+			d3.selectAll('.d3-context-menu').data([1])
+				.enter()
+				.append('div')
+				.attr('class', 'd3-context-menu');
+
+			// close menu
+			d3.select('body').on('click.d3-context-menu', function() {
+				d3.select('.d3-context-menu').style('display', 'none');
+				if (closeCallback) {
+					closeCallback();
+				}
+			});
+
+			// this gets executed when a contextmenu event occurs
+			return function(data, index) {
+				var elm = this;
+
+				d3.selectAll('.d3-context-menu').html('');
+				var list = d3.selectAll('.d3-context-menu').append('ul');
+				list.selectAll('li').data(typeof menu === 'function' ? menu(data) : menu).enter()
+					.append('li')
+					.html(function(d) {
+						return (typeof d.title === 'string') ? d.title : d.title(data);
+					})
+					.on('click', function(d, i) {
+						d.action(elm, data, index);
+						d3.select('.d3-context-menu').style('display', 'none');
+
+						if (closeCallback) {
+							closeCallback();
+						}
+					});
+
+				// the openCallback allows an action to fire before the menu is displayed
+				// an example usage would be closing a tooltip
+				if (openCallback) {
+					if (openCallback(data, index) === false) {
+						return;
+					}
+				}
+
+				// display context menu
+				d3.select('.d3-context-menu')
+					.style('left', (d3.event.pageX - 2) + 'px')
+					.style('top', (d3.event.pageY - 2) + 'px')
+					.style('display', 'block');
+
+				d3.event.preventDefault();
+				d3.event.stopPropagation();
+			};
+		};
+	}
+));

pandora_console/include/javascript/map/MapController.js

@@ -156,10 +156,6 @@ MapController.prototype.init_map = function() {
 		.property("step", Math.log(MAX_ZOOM_LEVEL) * 2 / MAX_ZOOM_LEVEL)
 		.on("input", slided);
 
-	$("svg").on("contextmenu", function() {
-        return false;
-    });
-
 	d3.select("#map .zoom_box .home_zoom")
 		.on("click", home_zoom);
 	
@@ -169,7 +165,6 @@ MapController.prototype.init_map = function() {
 	d3.select("#map .zoom_box .zoom_out")
 		.on("click", zoom_out);
 	
-	
 	self.paint_nodes();
 	
 	this.init_events();
@@ -355,18 +350,35 @@ MapController.prototype.init_events = function(principalObject) {
 	
 	var node_menu = [
 		{
-			title: 'Ejemplo 1',
+			title: 'Show details',
 			action: function(elm, d, i) {
-				console.log('Primer elemento!!');
+				self.openNodeDetais(self, elm);
 			}
 		},
 		{
-			title: 'Ejemplo 1',
+			title: 'Edit',
 			action: function(elm, d, i) {
-				console.log('Segundo elemento!!');
+				console.log('Edit node!!');
+			}
+		},
+		{
+			title: 'Delete',
+			action: function(elm, d, i) {
+				console.log('Delete node!!');
 			}
 		}
-	]
+	];
+
+	var map_menu = [
+		{
+			title: 'Edit map',
+			action: function(elm, d, i) {
+				console.log('Edit map!!');
+			}
+		}
+	];
+
+	d3.select("#map").on("contextmenu", d3.contextMenu(map_menu));
 
 	$(this._target + " svg *, " + this._target + " svg")
 		.off("mousedown", {map: this}, this.click_event);
@@ -488,6 +500,50 @@ MapController.prototype.tooltip_map_create = function(self, target) {
 	nodeTarget.tooltipster("show");
 }
 
+/**
+* Function openNodeDetais
+* Return void
+* This function shows node details in extra window
+*/
+MapController.prototype.openNodeDetais = function(self, target) {
+	var nodeTarget = $(target);
+	
+	var type = parseInt(nodeTarget.data("type"));
+	var data_id = parseInt(nodeTarget.data("id"));
+	var data_graph_id = parseInt(nodeTarget.data("graph_id"));
+	var node_id = nodeTarget.attr("id");
+
+	var link = self.nodeGetDetails(data_id, type, self._id, data_graph_id, node_id);
+
+	//window.open(link);
+}
+
+/**
+* Function nodeGetDetails
+* Return link
+* This function returns a link with node details
+*/
+MapController.prototype.nodeGetDetails = function(data_id, type, id_map, data_graph_id, node_id) {
+	var params = {};
+	params["getNodeDetails"] = 1;
+	params["id_node_data"] = data_id;
+	params["type"] = type;
+	params["id_map"] = id_map;
+	params["data_graph_id"] = data_graph_id;
+	params["node_id"] = node_id;
+	params["page"] = "include/ajax/map.ajax";
+	
+	jQuery.ajax ({
+		data: params,
+		dataType: "json",
+		type: "POST",
+		url: "ajax.php",
+		success: function (data) {
+			window.open(data);
+		}
+	});
+}
+
 /**
 * Function close_all_tooltips
 * Return void

pandora_console/include/styles/d3-context-menu.css

@@ -0,0 +1,29 @@
+.d3-context-menu {
+	position: absolute;
+	display: none;
+	background-color: #f2f2f2;
+	border-radius: 4px;
+
+	font-family: Arial, sans-serif;
+	font-size: 14px;
+	min-width: 150px;
+	border: 1px solid #d4d4d4;
+
+	z-index:1200;
+}
+
+.d3-context-menu ul {
+	list-style-type: none;
+	margin: 4px 0px;
+	padding: 0px;
+	cursor: default;
+}
+
+.d3-context-menu ul li {
+	padding: 4px 16px;
+}
+
+.d3-context-menu ul li:hover {
+	background-color: #4677f8;
+	color: #fefefe;
+}