tyler.durden/pandorafms
1
0
Fork 0
mirror of https://github.com/pandorafms/pandorafms.git synced 2025-07-31 01:35:36 +02:00
Code Issues Packages Projects Releases Wiki Activity

Improved user experience networkmaps

Browse Source 
Former-commit-id: bd665ad24124b227c4aba763648e4735f61770c3
This commit is contained in:
fbsanchez 2019-03-21 20:52:01 +01:00
parent da3602fbc5
commit 26d231e78c
3 changed files with 114 additions and 223 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

45
pandora_console/include/class/NetworkMap.class.php
View File

@ -2275,16 +2275,11 @@ class NetworkMap
); );
} }
$center = [
'x' => $node_center['x'],
'y' => $node_center['y'],
];
$this->map['center_x'] = $center['x'];
$this->map['center_y'] = $center['y'];
db_process_sql_update( db_process_sql_update(
'tmap', 'tmap',
[ [
'width' => $this->map['width'],
'height' => $this->map['height'],
'center_x' => $this->map['center_x'], 'center_x' => $this->map['center_x'],
'center_y' => $this->map['center_y'], 'center_y' => $this->map['center_y'],
], ],
@ -3081,6 +3076,42 @@ class NetworkMap
$output .= $this->loadSimpleInterface(); $output .= $this->loadSimpleInterface();
} }
$output .= '
<script type="text/javascript">
(function() {
var hidden = "hidden";
// Standards:
if (hidden in document)
document.addEventListener("visibilitychange", onchange);
else if ((hidden = "mozHidden") in document)
document.addEventListener("mozvisibilitychange", onchange);
else if ((hidden = "webkitHidden") in document)
document.addEventListener("webkitvisibilitychange", onchange);
else if ((hidden = "msHidden") in document)
document.addEventListener("msvisibilitychange", onchange);
// IE 9 and lower:
else if ("onfocusin" in document)
document.onfocusin = document.onfocusout = onchange;
// All others:
else
window.onpageshow = window.onpagehide
= window.onfocus = window.onblur = onchange;
function onchange (evt) {
// Reset all action status variables. Window is not in focus or visible.
flag_multiple_selection = false
disabled_drag_zoom = false;
flag_multiple_selection_running = false;
selected = undefined;
}
// set the initial state (but only if browser supports the Page Visibility API)
if( document[hidden] !== undefined )
onchange({type: document[hidden] ? "blur" : "focus"});
})();
</script>
';
if ($return === false) { if ($return === false) {
echo $output; echo $output;
} }

288
pandora_console/include/javascript/functions_pandora_networkmap.js
View File

@ -19,12 +19,28 @@
/* global layer_graph_links */ /* global layer_graph_links */
/* global ellipsize */ /* global ellipsize */
/* global d3 */ /* global d3 */
/* global node_selected */ /* global dialog_node_edit_title */
/* global click_menu_position_svg */
/* global show_labels:true */
/* global show_minimap:true */
/* global layer_graph */
/* global zoom_obj */
/* global disabled_drag_zoom */
/* global scale:true */
/* global link */
/* global siblingCount:true */
/* global xRotation:true */
/* global largeArc:true */
/* global node */
/* exported delete_link */ /* exported delete_link */
/* exported update_fictional_node */ /* exported update_fictional_node */
/* exported update_node_name */ /* exported update_node_name */
/* exported change_shape */ /* exported change_shape */
/* exported add_agent_node_from_the_filter_group */
/* exported hide_labels */
/* exported toggle_minimap */
/* exported over_node */
function draw_minimap() { function draw_minimap() {
// Clean the canvas. // Clean the canvas.
@ -391,7 +407,6 @@ function change_shape(id_db_node) {
return d.y - d.image_height / 2; return d.y - d.image_height / 2;
}) })
.attr("width", function(d) { .attr("width", function(d) {
console.log(d);
return node_radius / 0.8; return node_radius / 0.8;
}) })
.attr("height", function(d) { .attr("height", function(d) {
@ -776,9 +791,9 @@ function edit_node(data_node, dblClick) {
var id_networkmap_lenght = networkmap_id.toString().length; var id_networkmap_lenght = networkmap_id.toString().length;
var id_node_length = id.length - id_networkmap_lenght; var id_node_length = id.length - id_networkmap_lenght;
id = id.substring(0, id_node_length); id = id.substring(0, id_node_length);
node_selected = graph.nodes[id]; var node_selected = graph.nodes[id];
selected_links = get_relations(node_selected); var selected_links = get_relations(node_selected);
$( $(
"select[name='shape'] option[value='" + node_selected.shape + "']" "select[name='shape'] option[value='" + node_selected.shape + "']"
@ -806,7 +821,7 @@ function edit_node(data_node, dblClick) {
data: params.join("&"), data: params.join("&"),
dataType: "json", dataType: "json",
type: "POST", type: "POST",
url: (action = "ajax.php"), url: "ajax.php",
success: function(data) { success: function(data) {
$("#node_details-0-1").html( $("#node_details-0-1").html(
'<a href="index.php?sec=estado&sec2=operation/agentes/ver_agente&id_agente=' + '<a href="index.php?sec=estado&sec2=operation/agentes/ver_agente&id_agente=' +
@ -822,7 +837,7 @@ function edit_node(data_node, dblClick) {
addresses += data["adressess"][i] + "<br>"; addresses += data["adressess"][i] + "<br>";
} }
} else { } else {
for (address in data["adressess"]) { for (var address in data["adressess"]) {
addresses += address + "<br>"; addresses += address + "<br>";
} }
} }
@ -895,7 +910,7 @@ function get_interface_data_to_table(node_selected, selected_links) {
data: params.join("&"), data: params.join("&"),
dataType: "json", dataType: "json",
type: "POST", type: "POST",
url: (action = "ajax.php"), url: "ajax.php",
success: function(data) { success: function(data) {
if (data.length == 0) { if (data.length == 0) {
$("#interface_information") $("#interface_information")
@ -907,10 +922,11 @@ function get_interface_data_to_table(node_selected, selected_links) {
); );
} else { } else {
jQuery.each(data, function(j, interface) { jQuery.each(data, function(j, interface) {
var interf_graph;
if (interface["graph"] == "") { if (interface["graph"] == "") {
var interf_graph = "--"; interf_graph = "--";
} else { } else {
var interf_graph = interface["graph"]; interf_graph = interface["graph"];
} }
$("#interface_information") $("#interface_information")
.find("tbody") .find("tbody")
@ -982,7 +998,7 @@ function load_interfaces(selected_links) {
type: "POST", type: "POST",
async: true, async: true,
cache: false, cache: false,
url: (action = "ajax.php"), url: "ajax.php",
success: function(data) { success: function(data) {
if (data["correct"]) { if (data["correct"]) {
$( $(
@ -1102,7 +1118,7 @@ function add_node() {
} }
function add_agent_node_from_the_filter_group() { function add_agent_node_from_the_filter_group() {
agents = $("select[name='agents_filter_group']").val(); var agents = $("select[name='agents_filter_group']").val();
add_agent_node(agents); add_agent_node(agents);
} }
@ -1149,7 +1165,7 @@ function add_agent_node(agents) {
data: params.join("&"), data: params.join("&"),
dataType: "json", dataType: "json",
type: "POST", type: "POST",
url: (action = "ajax.php"), url: "ajax.php",
success: function(data) { success: function(data) {
if (data["correct"]) { if (data["correct"]) {
$("#agent_name").val(""); $("#agent_name").val("");
@ -1237,24 +1253,17 @@ function add_agent_node(agents) {
var temp_node = {}; var temp_node = {};
temp_node["id"] = graph.nodes.length; temp_node["id"] = graph.nodes.length;
temp_node["id_db"] = data["id_node"]; temp_node["id_db"] = graph.nodes.length;
temp_node["id_agent"] = data["id_agent"]; temp_node["id_agent"] = id_agent;
temp_node["id_module"] = ""; temp_node["id_module"] = "";
temp_node["px"] = data["x"]; temp_node["px"] = x;
temp_node["py"] = data["y"]; temp_node["py"] = y;
temp_node["x"] = data["x"]; temp_node["x"] = x;
temp_node["y"] = data["y"]; temp_node["y"] = y;
temp_node["z"] = 0; temp_node["z"] = 0;
temp_node["fixed"] = true; temp_node["fixed"] = true;
temp_node["type"] = 0; temp_node["type"] = 0;
temp_node["color"] = data["status"]; temp_node["map_id"] = networkmap_id;
temp_node["shape"] = data["shape"];
temp_node["text"] = data["text"];
temp_node["image_url"] = data["image_url"];
temp_node["image_width"] = data["width"];
temp_node["image_height"] = data["height"];
temp_node["map_id"] = data["map_id"];
temp_node["state"] = data["state"];
graph.nodes.push(temp_node); graph.nodes.push(temp_node);
} }
@ -1347,9 +1356,10 @@ function delete_nodes() {
data: params.join("&"), data: params.join("&"),
dataType: "json", dataType: "json",
type: "POST", type: "POST",
url: (action = "ajax.php"), url: "ajax.php",
success: function(data) { success: function(data) {
if (data["correct"]) { if (data["correct"]) {
var found = -1;
do { do {
found = -1; found = -1;
jQuery.each(graph.links, function(i, element) { jQuery.each(graph.links, function(i, element) {
@ -1627,7 +1637,7 @@ function set_positions_graph() {
} }
function over_node(d) { function over_node(d) {
over = d3.select("#id_node_" + d.id + networkmap_id).classed("node_over"); var over = d3.select("#id_node_" + d.id + networkmap_id).classed("node_over");
in_a_node = !in_a_node; in_a_node = !in_a_node;
@ -1683,7 +1693,7 @@ function update_networkmap() {
data: params.join("&"), data: params.join("&"),
dataType: "json", dataType: "json",
type: "POST", type: "POST",
url: (action = "ajax.php"), url: "ajax.php",
success: function(data) { success: function(data) {
d3.select( d3.select(
"#id_node_" + d.id + networkmap_id + " .node_shape" "#id_node_" + d.id + networkmap_id + " .node_shape"
@ -1695,7 +1705,7 @@ function update_networkmap() {
link.each(function(d) { link.each(function(d) {
if (d.id_module_start != 0 || d.id_module_end != 0) { if (d.id_module_start != 0 || d.id_module_end != 0) {
if (d.id_module_start != 0) { if (d.id_module_start && d.id_module_start > 0) {
var params = []; var params = [];
params.push("module_get_status=1"); params.push("module_get_status=1");
params.push("page=operation/agentes/pandora_networkmap.view"); params.push("page=operation/agentes/pandora_networkmap.view");
@ -1704,7 +1714,7 @@ function update_networkmap() {
data: params.join("&"), data: params.join("&"),
dataType: "json", dataType: "json",
type: "POST", type: "POST",
url: (action = "ajax.php"), url: "ajax.php",
success: function(data) { success: function(data) {
d3.selectAll(".id_module_start_" + d.id_module_start).attr( d3.selectAll(".id_module_start_" + d.id_module_start).attr(
"marker-start", "marker-start",
@ -1718,7 +1728,7 @@ function update_networkmap() {
}); });
} }
if (d.id_module_end != 0) { if (d.id_module_end && d.id_module_end > 0) {
var params = []; var params = [];
params.push("module_get_status=1"); params.push("module_get_status=1");
params.push("page=operation/agentes/pandora_networkmap.view"); params.push("page=operation/agentes/pandora_networkmap.view");
@ -1727,7 +1737,7 @@ function update_networkmap() {
data: params.join("&"), data: params.join("&"),
dataType: "json", dataType: "json",
type: "POST", type: "POST",
url: (action = "ajax.php"), url: "ajax.php",
success: function(data) { success: function(data) {
d3.selectAll(".id_module_end_" + d.id_module_end).attr( d3.selectAll(".id_module_end_" + d.id_module_end).attr(
"marker-end", "marker-end",
@ -2232,7 +2242,7 @@ function add_interface_link(data_parent) {
data: params.join("&"), data: params.join("&"),
dataType: "json", dataType: "json",
type: "POST", type: "POST",
url: (action = "ajax.php"), url: "ajax.php",
success: function(data) { success: function(data) {
var parent_name = data_parent.text; var parent_name = data_parent.text;
var child_name = child_data.text; var child_name = child_data.text;
@ -2299,7 +2309,7 @@ function add_interface_link_js() {
data: params.join("&"), data: params.join("&"),
dataType: "json", dataType: "json",
type: "POST", type: "POST",
url: (action = "ajax.php"), url: "ajax.php",
success: function(data) { success: function(data) {
if (data["correct"]) { if (data["correct"]) {
var temp_link = {}; var temp_link = {};
@ -2352,8 +2362,8 @@ function add_interface_link_js() {
} }
function refresh_holding_area() { function refresh_holding_area() {
holding_pos_x = d3.select("#holding_area_" + networkmap_id).attr("x"); var holding_pos_x = d3.select("#holding_area_" + networkmap_id).attr("x");
holding_pos_y = d3.select("#holding_area_" + networkmap_id).attr("y"); var holding_pos_y = d3.select("#holding_area_" + networkmap_id).attr("y");
var pos_x = parseInt(holding_pos_x) + parseInt(node_radius); var pos_x = parseInt(holding_pos_x) + parseInt(node_radius);
var pos_y = parseInt(holding_pos_y) + parseInt(node_radius); var pos_y = parseInt(holding_pos_y) + parseInt(node_radius);
@ -2369,7 +2379,7 @@ function refresh_holding_area() {
data: params.join("&"), data: params.join("&"),
dataType: "json", dataType: "json",
type: "POST", type: "POST",
url: (action = "ajax.php"), url: "ajax.php",
success: function(data) { success: function(data) {
if (data["correct"]) { if (data["correct"]) {
window.holding_area = data["holding_area"]; window.holding_area = data["holding_area"];
@ -2578,7 +2588,7 @@ function proceed_to_restart_map() {
data: params.join("&"), data: params.join("&"),
dataType: "html", dataType: "html",
type: "POST", type: "POST",
url: (action = "ajax.php"), url: "ajax.php",
success: function(data) { success: function(data) {
$("#restart_map_form").html(data); $("#restart_map_form").html(data);
$("#restart_map_form").dialog("open"); $("#restart_map_form").dialog("open");
@ -2596,7 +2606,7 @@ function reset_map_from_form(new_elements) {
data: params.join("&"), data: params.join("&"),
dataType: "json", dataType: "json",
type: "POST", type: "POST",
url: (action = "ajax.php"), url: "ajax.php",
success: function(data) { success: function(data) {
window.location = window.location =
"index.php?sec=network&sec2=operation/agentes/pandora_networkmap&tab=view&id_networkmap=" + "index.php?sec=network&sec2=operation/agentes/pandora_networkmap&tab=view&id_networkmap=" +
@ -2661,7 +2671,7 @@ function set_parent(parent_data) {
data: params.join("&"), data: params.join("&"),
dataType: "json", dataType: "json",
type: "POST", type: "POST",
url: (action = "ajax.php"), url: "ajax.php",
success: function(data) { success: function(data) {
if (data["correct"]) { if (data["correct"]) {
//Add the relationship and paint //Add the relationship and paint
@ -2752,23 +2762,25 @@ function init_drag_and_drop() {
var selection = d3.selectAll(".node_selected"); var selection = d3.selectAll(".node_selected");
if (enterprise_installed) { if (enterprise_installed) {
holding_pos_x = d3.select("#holding_area_" + networkmap_id).attr("x"); var holding_pos_x = d3
holding_pos_y = d3.select("#holding_area_" + networkmap_id).attr("y"); .select("#holding_area_" + networkmap_id)
.attr("x");
var holding_pos_y = d3
.select("#holding_area_" + networkmap_id)
.attr("y");
delete d.raw_text; delete d.raw_text;
selection.each(function(d) { selection.each(function(d) {
var params = [];
params.push("update_node=1");
params.push("node=" + JSON.stringify(d));
params.push("x=" + holding_pos_x);
params.push("y=" + holding_pos_y);
params.push(
"page=enterprise/operation/agentes/pandora_networkmap.view"
);
jQuery.ajax({ jQuery.ajax({
data: params.join("&"),
dataType: "json", dataType: "json",
type: "POST", type: "POST",
url: (action = "ajax.php"), url: "ajax.php",
data: {
node: JSON.stringify(d),
x: holding_pos_x,
y: holding_pos_y,
update_node: 1,
page: "enterprise/operation/agentes/pandora_networkmap.view"
},
success: function(data) { success: function(data) {
if (d.state == "holding_area") { if (d.state == "holding_area") {
//It is out the holding area //It is out the holding area
@ -2802,7 +2814,7 @@ function init_drag_and_drop() {
data: params.join("&"), data: params.join("&"),
dataType: "json", dataType: "json",
type: "POST", type: "POST",
url: (action = "ajax.php"), url: "ajax.php",
success: function(data) { success: function(data) {
if (data["correct"]) { if (data["correct"]) {
$("#open_version_dialog").dialog(); $("#open_version_dialog").dialog();
@ -2865,7 +2877,7 @@ function add_fictional_node() {
data: params.join("&"), data: params.join("&"),
dataType: "json", dataType: "json",
type: "POST", type: "POST",
url: (action = "ajax.php"), url: "ajax.php",
success: function(data) { success: function(data) {
if (data["correct"]) { if (data["correct"]) {
$("#dialog_node_add").dialog("close"); $("#dialog_node_add").dialog("close");
@ -4016,7 +4028,7 @@ function choose_group_for_show_agents() {
data: params.join("&"), data: params.join("&"),
dataType: "json", dataType: "json",
type: "POST", type: "POST",
url: (action = "ajax.php"), url: "ajax.php",
success: function(data) { success: function(data) {
if (data["correct"]) { if (data["correct"]) {
$("#agents_filter_group").html(""); $("#agents_filter_group").html("");
@ -4038,162 +4050,6 @@ function choose_group_for_show_agents() {
'<option value="-1">' + translation_none + "</option>" '<option value="-1">' + translation_none + "</option>"
); );
$("#spinner_group").css("display", "none"); $("#spinner_group").css("display", "none");
function show_networkmap_node(id_agent_param, refresh_state) {
id_agent = id_agent_param;
canvas = $("#node_info");
context_popup = canvas[0].getContext("2d");
dirty_popup = true;
self.setInterval("check_popup_modification()", 1000 / 30);
$("#node_info").mousemove(function(event) {
var x = event.pageX - $("#node_info").offset().left;
var y = event.pageY - $("#node_info").offset().top;
module_inner = inner_module(x, y);
if (module_inner != null) {
document.body.style.cursor = "pointer";
} else {
document.body.style.cursor = "default";
}
});
$("#node_info").mousedown(function(event) {
var x = event.pageX - $("#node_info").offset().left;
var y = event.pageY - $("#node_info").offset().top;
if (module_inner != null) {
show_tooltip(module_inner, x, y);
}
event.stopPropagation();
return false;
});
$("#node_info").mouseup(function(event) {
var x = event.pageX - $("#node_info").offset().left;
var y = event.pageY - $("#node_info").offset().top;
drag = false;
drag_x = 0;
drag_y = 0;
dirty_popup = true;
document.body.style.cursor = "default";
module_inner = null;
event.stopPropagation();
return false;
});
$("#node_info").mouseout(function(event) {
var x = event.pageX - $("#node_info").offset().left;
var y = event.pageY - $("#node_info").offset().top;
drag = false;
drag_x = 0;
drag_y = 0;
dirty_popup = true;
document.body.style.cursor = "default";
module_inner = null;
event.stopPropagation();
return false;
});
$(window).resize(function() {
function show_networkmap_node(id_agent_param, refresh_state) {
id_agent = id_agent_param;
canvas = $("#node_info");
context_popup = canvas[0].getContext("2d");
dirty_popup = true;
self.setInterval("check_popup_modification()", 1000 / 30);
$("#node_info").mousemove(function(event) {
var x = event.pageX - $("#node_info").offset().left;
var y = event.pageY - $("#node_info").offset().top;
module_inner = inner_module(x, y);
if (module_inner != null) {
document.body.style.cursor = "pointer";
} else {
document.body.style.cursor = "default";
}
});
$("#node_info").mousedown(function(event) {
var x = event.pageX - $("#node_info").offset().left;
var y = event.pageY - $("#node_info").offset().top;
if (module_inner != null) {
show_tooltip(module_inner, x, y);
}
event.stopPropagation();
return false;
});
$("#node_info").mouseup(function(event) {
var x = event.pageX - $("#node_info").offset().left;
var y = event.pageY - $("#node_info").offset().top;
drag = false;
drag_x = 0;
drag_y = 0;
dirty_popup = true;
document.body.style.cursor = "default";
module_inner = null;
event.stopPropagation();
return false;
});
$("#node_info").mouseout(function(event) {
var x = event.pageX - $("#node_info").offset().left;
var y = event.pageY - $("#node_info").offset().top;
drag = false;
drag_x = 0;
drag_y = 0;
dirty_popup = true;
document.body.style.cursor = "default";
module_inner = null;
event.stopPropagation();
return false;
});
$(window).resize(function() {
pos_scroll = Math.floor(
$("#content_node_info").width() / 2
);
$("#content_node_info").scrollLeft(pos_scroll);
dirty_popup = true;
check_popup_modification();
});
}
pos_scroll = Math.floor($("#content_node_info").width() / 2);
$("#content_node_info").scrollLeft(pos_scroll);
dirty_popup = true;
check_popup_modification();
});
}
} }
} }
}); });
@ -4238,7 +4094,7 @@ function get_status_node() {
data: params.join("&"), data: params.join("&"),
dataType: "json", dataType: "json",
type: "POST", type: "POST",
url: (action = "../../../ajax.php"), url: "../../../ajax.php",
success: function(data) { success: function(data) {
if (data["correct"]) { if (data["correct"]) {
color_status_node = data["status_agent"]; color_status_node = data["status_agent"];
@ -4260,7 +4116,7 @@ function get_status_module() {
data: params.join("&"), data: params.join("&"),
dataType: "json", dataType: "json",
type: "POST", type: "POST",
url: (action = "../../../ajax.php"), url: "../../../ajax.php",
success: function(data) { success: function(data) {
if (data["correct"]) { if (data["correct"]) {
modules[data["id"]].status_color = data["status_color"]; modules[data["id"]].status_color = data["status_color"];
@ -4358,7 +4214,7 @@ function show_tooltip_content(id) {
data: params.join("&"), data: params.join("&"),
dataType: "json", dataType: "json",
type: "POST", type: "POST",
url: (action = "../../../ajax.php"), url: "../../../ajax.php",
success: function(data) { success: function(data) {
if (data["correct"]) { if (data["correct"]) {
$("#tooltip").html(data["content"]); $("#tooltip").html(data["content"]);
@ -4378,7 +4234,7 @@ function show_tooltip(id, x, y) {
jQuery.ajax({ jQuery.ajax({
data: params1.join("&"), data: params1.join("&"),
type: "POST", type: "POST",
url: (action = "../../../ajax.php"), url: "../../../ajax.php",
success: function(data) { success: function(data) {
$("#tooltip").html(data); $("#tooltip").html(data);
$("#tooltip").css("display", ""); $("#tooltip").css("display", "");

4
pandora_console/operation/agentes/pandora_networkmap.view.php
View File

@ -80,6 +80,10 @@ if (is_ajax()) {
if ($module_get_status) { if ($module_get_status) {
$id = (int) get_parameter('id', 0); $id = (int) get_parameter('id', 0);
if ($id == 0) {
return;
}
$return = []; $return = [];
$return['correct'] = true; $return['correct'] = true;
$return['status'] = modules_get_agentmodule_status( $return['status'] = modules_get_agentmodule_status(