#11490 added new widget group status map
This commit is contained in:
parent
aa3dfe606f
commit
5ee4dbee87
|
@ -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;
|
||||
|
|
|
@ -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) {
|
||||
zoom(node === d.parent ? root : d.parent);
|
||||
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,10 +826,11 @@ function treeMap(recipient, data, width, height) {
|
|||
}
|
||||
|
||||
function show_tooltip(d) {
|
||||
x = d3.event.pageX + 10;
|
||||
y = d3.event.pageY + 10;
|
||||
|
||||
create_tooltip(d, x, y);
|
||||
x = d.offsetX + 10;
|
||||
y = d.offsetY + 10;
|
||||
if (d.target.__data__) {
|
||||
create_tooltip(d, x, y);
|
||||
}
|
||||
}
|
||||
|
||||
function hide_tooltip() {
|
||||
|
|
|
@ -278,25 +278,72 @@ class GroupsStatusMapWidget extends Widget
|
|||
}
|
||||
}
|
||||
|
||||
$where = '';
|
||||
if (in_array('0', $groups_array) === false && count($groups_array) > 0) {
|
||||
$where = ' WHERE g.id_grupo IN ('.implode(',', $groups_array).') ';
|
||||
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).') ';
|
||||
}
|
||||
|
||||
$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';
|
||||
|
||||
$rows = db_process_sql($sql);
|
||||
}
|
||||
|
||||
$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';
|
||||
$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;
|
||||
}
|
||||
|
||||
|
|
|
@ -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%;
|
||||
}
|
||||
|
|
|
@ -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(
|
||||
|
|
Loading…
Reference in New Issue