New maps in progress... (contextual menus)
This commit is contained in:
Arturo Gonzalez
parent
92afe7614d
commit
39a9ef4c28
pandora_console/include
|
|
@ -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;
|
||||
}
|
||||
|
||||
}
|
||||
?>
|
||||
|
|
|
|||
|
|
@ -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();
|
||||
};
|
||||
};
|
||||
}
|
||||
));
|
||||
|
|
@ -155,10 +155,6 @@ MapController.prototype.init_map = function() {
|
|||
.property("max", Math.log(MAX_ZOOM_LEVEL))
|
||||
.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
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
Loading…
Reference in New Issue