#11490 added new widget group status map

This commit is contained in:
Daniel Cebrian 2023-08-16 16:11:35 +02:00
parent aa3dfe606f
commit 5ee4dbee87
5 changed files with 129 additions and 38 deletions

View File

@ -83,7 +83,7 @@ function d3_relationship_graph($elements, $matrix, $width=700, $return=false, $h
}
function d3_tree_map_graph($data, $width=700, $height=700, $return=false, $id_container='tree_map')
function d3_tree_map_graph($data, $width=700, $height=700, $return=false, $id_container='tree_map', $child_links=false)
{
global $config;
@ -139,8 +139,18 @@ function d3_tree_map_graph($data, $width=700, $height=700, $return=false, $id_co
}
</style>';
$output .= "<script language=\"javascript\" type=\"text/javascript\">
treeMap('#$id_container', $data, '$width', '$height');
treeMap('#$id_container', $data, '$width', '$height', $child_links);
</script>";
if ($child_links === true) {
$output .= html_print_input_image(
'resize_parent',
'/images/normal_screen.png',
1,
'background-color: white !important; padding: 4px !important;',
true,
['class' => 'resize_button invisible']
);
}
if (!$return) {
echo $output;

View File

@ -402,7 +402,7 @@ function chordDiagram(recipient, elements, matrix, width, height) {
// }
// ]
// };
function treeMap(recipient, data, width, height) {
function treeMap(recipient, data, width, height, childLinks = false) {
//var isIE = BrowserDetect.browser == 'Explorer';
var isIE = true;
var chartWidth = width;
@ -437,6 +437,9 @@ function treeMap(recipient, data, width, height) {
var transitionDuration = 500;
var root;
var node;
var resize_button = $(recipient)
.parent()
.find(".resize_button");
var treemap = d3.layout
.treemap()
@ -474,6 +477,7 @@ function treeMap(recipient, data, width, height) {
.attr("class", "cell parent")
.on("click", function(d) {
zoom(d);
resize_button.show();
})
.append("svg")
.attr("class", "clip")
@ -527,6 +531,10 @@ function treeMap(recipient, data, width, height) {
// remove transition
parentCells.exit().remove();
$(resize_button).on("click", function() {
zoom(root);
$(this).hide();
});
// create children cells
var childrenCells = chart
.selectAll("g.cell.child")
@ -540,14 +548,22 @@ function treeMap(recipient, data, width, height) {
.append("g")
.attr("class", "cell child")
.on("click", function(d) {
if (childLinks) {
if (node === d.parent) {
window.location.href = d.link;
} else {
resize_button.show();
zoom(d.parent);
}
} else {
zoom(node === d.parent ? root : d.parent);
}
})
.on("mouseover", over_user)
.on("mouseout", out_user)
.on("mousemove", move_tooltip)
.append("svg")
.attr("class", "clip");
$(recipient).on("mouseover", over_user);
$(recipient).on("mouseout", out_user);
$(recipient).on("mousemove", move_tooltip);
childEnterTransition
.append("rect")
.classed("background", true)
@ -752,9 +768,8 @@ function treeMap(recipient, data, width, height) {
}
function move_tooltip(d) {
x = d3.event.layerX + 15;
y = d3.event.layerY + 15;
x = d.offsetX + 40;
y = d.offsetY + 40;
$("#tooltip_" + uniqueId).css("left", x + "px");
$("#tooltip_" + uniqueId).css("top", y + "px");
}
@ -782,10 +797,10 @@ function treeMap(recipient, data, width, height) {
$(recipient).append(
$("<div></div>")
.attr("id", "tooltip_" + uniqueId)
.html(d.tooltip_content)
.html(d.target.__data__.tooltip_content)
);
} else {
$("#tooltip_" + uniqueId).html(d.tooltip_content);
$("#tooltip_" + uniqueId).html(d.target.__data__.tooltip_content);
}
$("#tooltip_" + uniqueId).attr(
@ -811,11 +826,12 @@ function treeMap(recipient, data, width, height) {
}
function show_tooltip(d) {
x = d3.event.pageX + 10;
y = d3.event.pageY + 10;
x = d.offsetX + 10;
y = d.offsetY + 10;
if (d.target.__data__) {
create_tooltip(d, x, y);
}
}
function hide_tooltip() {
$("#tooltip_" + uniqueId).hide();

View File

@ -278,6 +278,41 @@ class GroupsStatusMapWidget extends Widget
}
}
if (is_metaconsole() === true) {
$where = '';
if (in_array('0', $groups_array) === false && count($groups_array) > 0) {
// Names are used instead of ids because it can't be the same id as in node.
$names = [];
foreach ($groups_array as $key => $group) {
$names[] = '\''.groups_get_name($group).'\'';
}
$where = ' WHERE g.nombre IN ('.implode(',', $names).') ';
}
$servers = metaconsole_get_servers();
$rows = [];
if (isset($servers) === true && is_array($servers) === true
) {
foreach ($servers as $server) {
if (metaconsole_connect($server) == NOERR) {
$sql = 'SELECT g.id_grupo, g.nombre, estado, count(*) AS total_modules
FROM tagente a
LEFT JOIN tgrupo g ON g.id_grupo = a.id_grupo
LEFT JOIN tagente_modulo m ON a.id_agente = m.id_agente
LEFT JOIN tagente_estado es ON es.id_agente_modulo = m.id_agente_modulo
'.$where.'
GROUP BY a.id_grupo, estado';
$result = db_process_sql($sql);
if ($result !== false) {
$rows = array_merge_recursive($result, $rows);
}
}
metaconsole_restore_db();
}
}
} else {
$where = '';
if (in_array('0', $groups_array) === false && count($groups_array) > 0) {
$where = ' WHERE g.id_grupo IN ('.implode(',', $groups_array).') ';
@ -290,13 +325,25 @@ class GroupsStatusMapWidget extends Widget
LEFT JOIN tagente_estado es ON es.id_agente_modulo = m.id_agente_modulo
'.$where.'
GROUP BY a.id_grupo, estado';
$rows = db_process_sql($sql);
}
if ($rows === false || (is_array($rows) === true && count($rows) === 0)) {
$output = ui_print_info_message(
[
'no_close' => true,
'message' => __('No data found.'),
]
);
return $output;
}
$level1 = [
'name' => __('Module status map'),
'children' => [],
];
$names = [];
foreach ($rows as $key => $row) {
$color = '';
$name_status = '';
@ -324,38 +371,46 @@ class GroupsStatusMapWidget extends Widget
case '4':
$color = '#4a83f3';
$name_status = __('No data');
$row['estado'] = 6;
break;
default:
$row['estado'] = 6;
$color = '#B2B2B2';
$name_status = __('Unknown');
continue;
}
$level1['children'][$row['id_grupo']][] = [
if (empty($level1['children'][$row['nombre']][$row['estado']]['value']) === false) {
$total = ($row['total_modules'] + $level1['children'][$row['nombre']][$row['estado']]['value']);
} else {
$total = $row['total_modules'];
}
$level1['children'][$row['nombre']][$row['estado']] = [
'id' => uniqid(),
'name' => $row['estado'],
'value' => $row['total_modules'],
'value' => $total,
'color' => $color,
'tooltip_content' => $row['total_modules'].__(' Modules(%s)', $name_status),
'tooltip_content' => $total.__(' Modules(%s)', $name_status),
'link' => 'index.php?sec=view&sec2=operation/agentes/status_monitor&refr=0&ag_group='.$row['id_grupo'].'&ag_freestring=&module_option=1&ag_modulename=&moduletype=&datatype=&status='.$row['estado'].'&sort_field=&sort=none&pure=',
];
$names[$row['id_grupo']] = $row['nombre'];
}
$level2 = [
'name' => __('Module status map'),
'name' => __('Group status map'),
'children' => [],
];
foreach ($level1['children'] as $key => $group) {
foreach ($level1['children'] as $name => $group) {
$level2['children'][] = [
'id' => uniqid(),
'name' => $names[$key],
'name' => $name,
'children' => $group,
];
}
$id_container = 'tree_map_'.uniqid();
$output = d3_tree_map_graph($level2, $size['width'], $size['height'], true, $id_container);
$output = d3_tree_map_graph($level2, $size['width'], $size['height'], true, $id_container, true);
return $output;
}

View File

@ -937,3 +937,13 @@ div.basic-chart-title span {
font-size: 20px;
font-weight: bold;
}
input.resize_button {
position: absolute;
background-color: white !important;
padding: 4px !important;
border-radius: 20px;
width: 28px;
bottom: 3%;
right: 6%;
}

View File

@ -696,7 +696,7 @@ if (empty($draw) === false) {
$config['style']
);
$netflowContainerClass = ($chart_type === 'netflow_data' || $chart_type === 'netflow_summary' || $chart_type === 'netflow_top_N') ? '' : 'white_box';
$netflowContainerClass = ($chart_type === 'netflow_data' || $chart_type === 'netflow_summary' || $chart_type === 'netflow_top_N') ? '' : 'white_box relative';
// Draw the netflow chart.
html_print_div(