WIP heatmap 2
This commit is contained in:
Daniel Maya
parent
d73fd0450d
commit
74996e3cc0
|
|
@ -0,0 +1,277 @@
|
|||
<?php
|
||||
/**
|
||||
* Heatmap.
|
||||
*
|
||||
* @category Heatmap
|
||||
* @package Pandora FMS
|
||||
* @subpackage Community
|
||||
* @version 1.0.0
|
||||
* @license See below
|
||||
*
|
||||
* ______ ___ _______ _______ ________
|
||||
* | __ \.-----.--.--.--| |.-----.----.-----. | ___| | | __|
|
||||
* | __/| _ | | _ || _ | _| _ | | ___| |__ |
|
||||
* |___| |___._|__|__|_____||_____|__| |___._| |___| |__|_|__|_______|
|
||||
*
|
||||
* ============================================================================
|
||||
* Copyright (c) 2005-2021 Artica Soluciones Tecnologicas
|
||||
* Please see http://pandorafms.org for full contribution list
|
||||
* This program is free software; you can redistribute it and/or
|
||||
* modify it under the terms of the GNU General Public License
|
||||
* as published by the Free Software Foundation for version 2.
|
||||
* This program is distributed in the hope that it will be useful,
|
||||
* but WITHOUT ANY WARRANTY; without even the implied warranty of
|
||||
* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
|
||||
* GNU General Public License for more details.
|
||||
* ============================================================================
|
||||
*/
|
||||
|
||||
if (is_ajax() === true) {
|
||||
global $config;
|
||||
|
||||
// Login check.
|
||||
check_login();
|
||||
|
||||
$getFilters = (bool) get_parameter('getFilters', 0);
|
||||
$getFilterType = (bool) get_parameter('getFilterType', 0);
|
||||
$getInfo = (bool) get_parameter('getInfo', 0);
|
||||
$type = get_parameter('type', 0);
|
||||
|
||||
if ($getFilters === true) {
|
||||
$refresh = get_parameter('refresh', 30);
|
||||
$search = get_parameter('search', '');
|
||||
|
||||
echo '<form id="form_dialog" method="post">';
|
||||
echo '<div class="div-dialog">';
|
||||
echo '<p class="label-dialog">'.__('Refresh').'</p>';
|
||||
echo html_print_select(
|
||||
[
|
||||
'30' => __('30 seconds'),
|
||||
(string) SECONDS_1MINUTE => __('1 minute'),
|
||||
'180' => __('3 minute'),
|
||||
(string) SECONDS_5MINUTES => __('5 minutes'),
|
||||
],
|
||||
'refresh',
|
||||
$refresh,
|
||||
'',
|
||||
'',
|
||||
0,
|
||||
true,
|
||||
false,
|
||||
false,
|
||||
'',
|
||||
false,
|
||||
'margin-top: 3px;'
|
||||
);
|
||||
echo '</div>';
|
||||
|
||||
echo '<div class="div-dialog">';
|
||||
echo '<p class="label-dialog">'.__('Search').'</p>';
|
||||
echo html_print_input_text('search', $search, '', 30, 255, true);
|
||||
echo '</div>';
|
||||
|
||||
echo '<div class="div-dialog">';
|
||||
echo '<p class="label-dialog">'.__('Type').'</p>';
|
||||
echo html_print_select(
|
||||
[
|
||||
0 => __('Group agents'),
|
||||
1 => __('Group modules by tag'),
|
||||
2 => __('Group modules by module group'),
|
||||
],
|
||||
'type',
|
||||
$type,
|
||||
'',
|
||||
'',
|
||||
0,
|
||||
true,
|
||||
false,
|
||||
false,
|
||||
'',
|
||||
false,
|
||||
'margin-top: 3px;width:70%'
|
||||
);
|
||||
echo '</div>';
|
||||
echo '</form>';
|
||||
}
|
||||
|
||||
|
||||
if ($getFilterType === true) {
|
||||
$filter = get_parameter('filter', 0);
|
||||
echo '<div id="filter_type" class="div-dialog">';
|
||||
switch ($type) {
|
||||
case 0:
|
||||
default:
|
||||
echo '<p style="width:42%;font-weight: bold;">'.__('Group').'</p>';
|
||||
echo html_print_input(
|
||||
[
|
||||
'type' => 'select_groups',
|
||||
'returnAllGroup' => true,
|
||||
'name' => 'filter[]',
|
||||
'selected' => $filter,
|
||||
'return' => true,
|
||||
'required' => true,
|
||||
'privilege' => 'AR',
|
||||
]
|
||||
);
|
||||
break;
|
||||
|
||||
case 1:
|
||||
echo '<p class="label-dialog">'.__('Tag').'</p>';
|
||||
if (tags_has_user_acl_tags($config['id_user']) === false) {
|
||||
echo html_print_select_from_sql(
|
||||
'SELECT id_tag, name
|
||||
FROM ttag
|
||||
WHERE id_tag NOT IN (
|
||||
SELECT a.id_tag
|
||||
FROM ttag a, ttag_module b
|
||||
WHERE a.id_tag = b.id_tag)
|
||||
ORDER BY name',
|
||||
'filter[]',
|
||||
$filter,
|
||||
'',
|
||||
'',
|
||||
'',
|
||||
true,
|
||||
true,
|
||||
false,
|
||||
false,
|
||||
'width: 200px',
|
||||
'5'
|
||||
);
|
||||
} else {
|
||||
$user_tags = tags_get_user_tags($config['id_user'], 'AR');
|
||||
if (!empty($user_tags)) {
|
||||
$id_user_tags = array_keys($user_tags);
|
||||
|
||||
echo html_print_select_from_sql(
|
||||
'SELECT id_tag, name
|
||||
FROM ttag
|
||||
WHERE id_tag IN ('.implode(',', $id_user_tags).') AND
|
||||
id_tag NOT IN (
|
||||
SELECT a.id_tag
|
||||
FROM ttag a, ttag_module b
|
||||
WHERE a.id_tag = b.id_tag)
|
||||
ORDER BY name',
|
||||
'filter[]',
|
||||
$filter,
|
||||
'',
|
||||
'',
|
||||
'',
|
||||
true,
|
||||
true,
|
||||
false,
|
||||
false,
|
||||
'width: 200px',
|
||||
'5'
|
||||
);
|
||||
} else {
|
||||
echo html_print_select_from_sql(
|
||||
'SELECT id_tag, name
|
||||
FROM ttag
|
||||
WHERE id_tag NOT IN (
|
||||
SELECT a.id_tag
|
||||
FROM ttag a, ttag_module b
|
||||
WHERE a.id_tag = b.id_tag)
|
||||
ORDER BY name',
|
||||
'filter[]',
|
||||
$filter,
|
||||
'',
|
||||
'',
|
||||
'',
|
||||
true,
|
||||
true,
|
||||
false,
|
||||
false,
|
||||
'width: 200px',
|
||||
'5'
|
||||
);
|
||||
}
|
||||
}
|
||||
break;
|
||||
|
||||
case 2:
|
||||
$module_groups = modules_get_modulegroups();
|
||||
echo '<p class="label-dialog">'.__('Module group').'</p>';
|
||||
echo html_print_select(
|
||||
$module_groups,
|
||||
'filter[]',
|
||||
$filter,
|
||||
'',
|
||||
_('Not assigned'),
|
||||
'',
|
||||
true,
|
||||
false,
|
||||
false,
|
||||
'',
|
||||
false,
|
||||
'width: 70%'
|
||||
);
|
||||
break;
|
||||
}
|
||||
|
||||
echo '</div>';
|
||||
}
|
||||
|
||||
if ($getInfo === true) {
|
||||
$id = get_parameter('id', 0);
|
||||
switch ($type) {
|
||||
case 2:
|
||||
break;
|
||||
|
||||
case 1:
|
||||
break;
|
||||
|
||||
case 0:
|
||||
default:
|
||||
$data = agents_get_agent($id);
|
||||
|
||||
// Alias.
|
||||
echo '<div class="div-dialog">';
|
||||
echo '<p style="width:40%;font-weight: bold;padding-left: 20px;">'.__('Agent').'</p>';
|
||||
echo '<a style="width:60%;font-weight: bold;">'.$data['alias'].'</a>';
|
||||
echo '</div>';
|
||||
|
||||
// Ip.
|
||||
echo '<div class="div-dialog">';
|
||||
echo '<p style="width:40%;font-weight: bold;padding-left: 20px;">'.__('IP').'</p>';
|
||||
echo '<p style="width:60%;font-weight: bold;">'.$data['direccion'].'</p>';
|
||||
echo '</div>';
|
||||
|
||||
// OS.
|
||||
echo '<div class="div-dialog">';
|
||||
echo '<p style="width:40%;font-weight: bold;padding-left: 20px;">'.__('OS').'</p>';
|
||||
echo '<p style="width:60%;font-weight: bold;">'.ui_print_os_icon($data['id_os'], true, true).'</p>';
|
||||
echo '</div>';
|
||||
|
||||
// Description.
|
||||
echo '<div class="div-dialog">';
|
||||
echo '<p style="width:40%;font-weight: bold;padding-left: 20px;">'.__('Description').'</p>';
|
||||
echo '<p style="width:60%;font-weight: bold;">'.$data['comentarios'].'</p>';
|
||||
echo '</div>';
|
||||
|
||||
// Group.
|
||||
echo '<div class="div-dialog">';
|
||||
echo '<p style="width:40%;font-weight: bold;padding-left: 20px;">'.__('Group').'</p>';
|
||||
echo '<p style="width:60%;font-weight: bold;">'.groups_get_name($data['id_grupo']).'</p>';
|
||||
echo '</div>';
|
||||
|
||||
// Events.
|
||||
echo '<div class="div-dialog">';
|
||||
echo graph_graphic_agentevents(
|
||||
$id,
|
||||
100,
|
||||
40,
|
||||
SECONDS_1DAY,
|
||||
'',
|
||||
true,
|
||||
false,
|
||||
false,
|
||||
1
|
||||
);
|
||||
echo '</div>';
|
||||
break;
|
||||
}
|
||||
}
|
||||
|
||||
return;
|
||||
}
|
||||
|
|
@ -67,6 +67,27 @@ class Heatmap
|
|||
*/
|
||||
protected $refresh = null;
|
||||
|
||||
/**
|
||||
* Heatmap width.
|
||||
*
|
||||
* @var integer
|
||||
*/
|
||||
protected $width = null;
|
||||
|
||||
/**
|
||||
* Heatmap height.
|
||||
*
|
||||
* @var integer
|
||||
*/
|
||||
protected $height = null;
|
||||
|
||||
/**
|
||||
* Heatmap search.
|
||||
*
|
||||
* @var string
|
||||
*/
|
||||
protected $search = null;
|
||||
|
||||
|
||||
/**
|
||||
* Constructor function
|
||||
|
|
@ -75,22 +96,31 @@ class Heatmap
|
|||
* @param array $filter Heatmap filter.
|
||||
* @param string $randomId Heatmap random id.
|
||||
* @param integer $refresh Heatmap refresh.
|
||||
* @param integer $width Width.
|
||||
* @param integer $height Height.
|
||||
* @param string $search Heatmap search.
|
||||
*/
|
||||
public function __construct(
|
||||
int $type=0,
|
||||
array $filter=[],
|
||||
string $randomId=null,
|
||||
int $refresh=300
|
||||
int $refresh=300,
|
||||
int $width=0,
|
||||
int $height=0,
|
||||
string $search=null
|
||||
) {
|
||||
$this->type = $type;
|
||||
$this->filter = $filter;
|
||||
(empty($randomId) === true) ? $this->randomId = uniqid() : $this->randomId = $randomId;
|
||||
$this->refresh = $refresh;
|
||||
$this->width = $width;
|
||||
$this->height = $height;
|
||||
$this->search = $search;
|
||||
}
|
||||
|
||||
|
||||
/**
|
||||
* Show .
|
||||
* Run.
|
||||
*
|
||||
* @return void
|
||||
*/
|
||||
|
|
@ -114,6 +144,7 @@ class Heatmap
|
|||
'type' => $this->type,
|
||||
'filter' => $this->filter,
|
||||
'refresh' => $this->refresh,
|
||||
'search' => $this->search,
|
||||
],
|
||||
];
|
||||
|
||||
|
|
@ -121,13 +152,16 @@ class Heatmap
|
|||
?>
|
||||
<script type="text/javascript">
|
||||
$(document).ready(function() {
|
||||
const randomId = '<?php echo 'div_'.$this->randomId; ?>';
|
||||
const randomId = '<?php echo $this->randomId; ?>';
|
||||
const refresh = '<?php echo $this->refresh; ?>';
|
||||
let setting = <?php echo json_encode($settings); ?>;
|
||||
setting['data']['height'] = $(`#div_${randomId}`).height();
|
||||
setting['data']['width'] = $(`#div_${randomId}`).width();
|
||||
|
||||
// Initial charge.
|
||||
ajaxRequest(
|
||||
randomId,
|
||||
<?php echo json_encode($settings); ?>
|
||||
`div_${randomId}`,
|
||||
setting
|
||||
);
|
||||
|
||||
// Refresh.
|
||||
|
|
@ -135,28 +169,69 @@ class Heatmap
|
|||
function() {
|
||||
refreshMap();
|
||||
},
|
||||
(refresh * 10)
|
||||
(refresh * 1000)
|
||||
);
|
||||
|
||||
function refreshMap() {
|
||||
$.ajax({
|
||||
type: 'GET',
|
||||
url: '<?php echo ui_get_full_url('ajax.php', false, false, false); ?>',
|
||||
data: {
|
||||
page: "operation/heatmap",
|
||||
method: 'getDataJson',
|
||||
randomId: randomId,
|
||||
type: '<?php echo $this->type; ?>',
|
||||
refresh: '<?php echo $this->refresh; ?>'
|
||||
},
|
||||
dataType: 'json',
|
||||
success: function(data) {
|
||||
const total = Object.keys(data).length;
|
||||
if (total === $(`#svg_${randomId} rect`).length) {
|
||||
// Object to array.
|
||||
let lista = Object.values(data);
|
||||
// randomly sort.
|
||||
lista = lista.sort(function() {return Math.random() - 0.5});
|
||||
|
||||
const countPerSecond = total / refresh;
|
||||
|
||||
let cont = 0;
|
||||
let limit = countPerSecond - 1;
|
||||
|
||||
const timer = setInterval(
|
||||
function() {
|
||||
while (cont <= limit) {
|
||||
if ($(`#${randomId}_${lista[cont]['id']}`).hasClass(`${lista[cont]['status']}`)) {
|
||||
let test = $(`#${randomId}_${lista[cont]['id']}`).css("filter");
|
||||
if (test !== 'none') {
|
||||
// console.log(test)
|
||||
// console.log(test.match('/(\d+\.\d|\d)/'));
|
||||
} else {
|
||||
$(`#${randomId}_${lista[cont]['id']}`).css("filter", "brightness(1.1)");
|
||||
}
|
||||
} else {
|
||||
$(`#${randomId}_${lista[cont]['id']}`).removeClass("normal critical warning unknown");
|
||||
$(`#${randomId}_${lista[cont]['id']}`).addClass(`${lista[cont]['status']}`);
|
||||
$(`#${randomId}_${lista[cont]['id']}`).css("filter", "brightness(1)");
|
||||
}
|
||||
|
||||
cont++;
|
||||
}
|
||||
limit = limit + countPerSecond;
|
||||
},
|
||||
1000
|
||||
);
|
||||
|
||||
setTimeout(
|
||||
function(){
|
||||
clearInterval(timer);
|
||||
},
|
||||
(refresh * 1000)
|
||||
);
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
});
|
||||
|
||||
|
||||
function refreshMap() {
|
||||
$.ajax({
|
||||
type: 'GET',
|
||||
url: '<?php echo ui_get_full_url('ajax.php', false, false, false); ?>',
|
||||
data: {
|
||||
page: "operation/heatmap",
|
||||
method: 'getDataJson',
|
||||
randomId: '<?php echo $this->randomId; ?>',
|
||||
type: '<?php echo $this->type; ?>',
|
||||
refresh: '<?php echo $this->refresh; ?>'
|
||||
},
|
||||
dataType: 'json',
|
||||
success: function(data) {
|
||||
console.log(data);
|
||||
}
|
||||
});
|
||||
};
|
||||
</script>
|
||||
<?php
|
||||
echo '</div>';
|
||||
|
|
@ -202,6 +277,17 @@ class Heatmap
|
|||
}
|
||||
|
||||
|
||||
/**
|
||||
* Getter for randomId
|
||||
*
|
||||
* @return string
|
||||
*/
|
||||
public function getRandomId()
|
||||
{
|
||||
return $this->randomId;
|
||||
}
|
||||
|
||||
|
||||
/**
|
||||
* Get all agents
|
||||
*
|
||||
|
|
@ -209,15 +295,21 @@ class Heatmap
|
|||
*/
|
||||
protected function getAllAgents()
|
||||
{
|
||||
$filter['disabled'] = 0;
|
||||
|
||||
if (empty($this->search) === false) {
|
||||
$filter['search'] = ' AND alias LIKE "%'.$this->search.'%"';
|
||||
}
|
||||
|
||||
if (empty($this->filter) === false) {
|
||||
$filter['id_grupo'] = current($this->filter);
|
||||
}
|
||||
|
||||
// All agents.
|
||||
$result = agents_get_agents(
|
||||
$filter,
|
||||
[
|
||||
'disabled' => 0,
|
||||
// 'search_custom' => $search_sql_custom,
|
||||
// 'search' => $search_sql,
|
||||
],
|
||||
[
|
||||
'id_agente',
|
||||
'id_agente as id',
|
||||
'alias',
|
||||
'id_grupo',
|
||||
'normal_count',
|
||||
|
|
@ -237,7 +329,7 @@ class Heatmap
|
|||
|
||||
$agents = [];
|
||||
// Agent status.
|
||||
foreach ($result as $agent) {
|
||||
foreach ($result as $key => $agent) {
|
||||
if ($agent['total_count'] === 0 || $agent['total_count'] === $agent['notinit_count']) {
|
||||
$status = 'notinit';
|
||||
} else if ($agent['critical_count'] > 0) {
|
||||
|
|
@ -250,26 +342,18 @@ class Heatmap
|
|||
$status = 'normal';
|
||||
}
|
||||
|
||||
$agents[$agent['id_agente']] = $agent;
|
||||
$agents[$agent['id_agente']]['status'] = $status;
|
||||
$agents[$key] = $agent;
|
||||
$agents[$key]['status'] = $status;
|
||||
}
|
||||
|
||||
$status = [
|
||||
'normal',
|
||||
'critical',
|
||||
'warning',
|
||||
'unknown',
|
||||
'normal',
|
||||
];
|
||||
|
||||
// -------------------Agent generator--------------------
|
||||
$a = 1;
|
||||
$agents = [];
|
||||
$total = 1000;
|
||||
$total = 1010;
|
||||
while ($a <= $total) {
|
||||
$agents[$a]['id_agente'] = $a;
|
||||
$agents[$a]['id'] = $a;
|
||||
$agents[$a]['status'] = $this->statusColour(rand(4, 0));
|
||||
$agents[$a]['id_grupo'] = ceil($a / 10);
|
||||
$agents[$a]['id_grupo'] = ceil($a / 20);
|
||||
$a++;
|
||||
}
|
||||
|
||||
|
|
@ -287,12 +371,12 @@ class Heatmap
|
|||
{
|
||||
$return = $this->getAllAgents();
|
||||
echo json_encode($return);
|
||||
return;
|
||||
return '';
|
||||
}
|
||||
|
||||
|
||||
/**
|
||||
* Get colour by status
|
||||
* Get class by status
|
||||
*
|
||||
* @param integer $status Status.
|
||||
*
|
||||
|
|
@ -330,14 +414,15 @@ class Heatmap
|
|||
/**
|
||||
* Get max. number of y-axis
|
||||
*
|
||||
* @param integer $total Total.
|
||||
* @param integer $total Total.
|
||||
* @param float $relation Aspect relation.
|
||||
*
|
||||
* @return integer
|
||||
*/
|
||||
protected function getYAxis(int $total)
|
||||
protected function getYAxis(int $total, float $relation)
|
||||
{
|
||||
$yAxis = ceil(sqrt(($total / 2)));
|
||||
return (integer) $yAxis;
|
||||
$yAxis = sqrt(($total / $relation));
|
||||
return $yAxis;
|
||||
|
||||
}
|
||||
|
||||
|
|
@ -369,83 +454,179 @@ class Heatmap
|
|||
break;
|
||||
}
|
||||
|
||||
$Yaxis = $this->getYAxis(count($result));
|
||||
$Xaxis = ($Yaxis * 2);
|
||||
$scale = ($this->width / $this->height);
|
||||
|
||||
$Yaxis = $this->getYAxis(count($result), $scale);
|
||||
$Xaxis = (int) ceil($Yaxis * $scale);
|
||||
$Yaxis = ceil($Yaxis);
|
||||
|
||||
$viewBox = sprintf(
|
||||
'0 0 %d %d',
|
||||
$Xaxis,
|
||||
$Yaxis
|
||||
);
|
||||
|
||||
echo '<svg id="svg_'.$this->randomId.'" width=95% viewBox="'.$viewBox.'">';
|
||||
echo '<svg id="svg_'.$this->randomId.'" width="'.$this->width.'"
|
||||
height="'.$this->height.'" viewBox="'.$viewBox.'">';
|
||||
|
||||
$groups = [];
|
||||
$contX = 0;
|
||||
$contY = 0;
|
||||
// $auxdata = 0;
|
||||
// $auxY = 0;
|
||||
foreach ($result as $key => $value) {
|
||||
echo '<rect id="'.$value['id_agente'].'"
|
||||
class="'.$value['status'].' hover"
|
||||
foreach ($result as $value) {
|
||||
echo '<rect id="'.$this->randomId.'_'.$value['id'].'" class="'.$value['status'].' hover"
|
||||
width="1" height="1" x ="'.$contX.' "y="'.$contY.'" />';
|
||||
|
||||
// Top.
|
||||
// if ($auxdata !== $value['id_grupo'] || $contY === 0) {
|
||||
// if ($auxdata !== $value['id_grupo']) {
|
||||
// $auxdata = $value['id_grupo'];
|
||||
// $auxY = 1;
|
||||
// }
|
||||
// $point = sprintf(
|
||||
// '%d,%d %d,%d',
|
||||
// $contX,
|
||||
// $contY,
|
||||
// ($contX + 1),
|
||||
// $contY
|
||||
// );
|
||||
// echo '<polygon class="group" points="'.$point.'" />';
|
||||
// }
|
||||
// Left.
|
||||
// if ($contX === 0 || $auxY === 1) {
|
||||
// $point = sprintf(
|
||||
// '%d,%d %d,%d',
|
||||
// $contX,
|
||||
// $contY,
|
||||
// $contX,
|
||||
// ($contY + 1)
|
||||
// );
|
||||
// echo '<polygon class="group" points="'.$point.'" />';
|
||||
// }
|
||||
// Bottom.
|
||||
// if (($contY + 1) === $Yaxis) {
|
||||
// $point = sprintf(
|
||||
// '%d,%d %d,%d',
|
||||
// $contX,
|
||||
// ($contY + 1),
|
||||
// ($contX + 1),
|
||||
// ($contY + 1)
|
||||
// );
|
||||
// echo '<polygon class="group" points="'.$point.'" />';
|
||||
// }
|
||||
// Right.
|
||||
// if (($contX + 1) === $Xaxis) {
|
||||
// hd('entra');
|
||||
// $point = sprintf(
|
||||
// '%d,%d %d,%d',
|
||||
// ($contX + 1),
|
||||
// $contY,
|
||||
// ($contX + 1),
|
||||
// ($contY + 1)
|
||||
// );
|
||||
// echo '<polygon class="group" points="'.$point.'" />';
|
||||
// }
|
||||
$contY++;
|
||||
if ($contY === $Yaxis) {
|
||||
$contX++;
|
||||
$contY = 0;
|
||||
$auxY = 0;
|
||||
$contX++;
|
||||
if ($contX >= $Xaxis) {
|
||||
$contY++;
|
||||
$contX = 0;
|
||||
}
|
||||
|
||||
if (empty($groups[$value['id_grupo']]) === true) {
|
||||
$groups[$value['id_grupo']] = 1;
|
||||
} else {
|
||||
$groups[$value['id_grupo']] += 1;
|
||||
}
|
||||
}
|
||||
|
||||
?>
|
||||
<script type="text/javascript">
|
||||
$('rect').click(function() {
|
||||
const type = <?php echo $this->type; ?>;
|
||||
const hash = '<?php echo $this->randomId; ?>';
|
||||
const id = this.id.replace(`${hash}_`, '');
|
||||
|
||||
$("#info_dialog").dialog({
|
||||
resizable: true,
|
||||
draggable: true,
|
||||
modal: true,
|
||||
closeOnEscape: true,
|
||||
height: 400,
|
||||
width: 430,
|
||||
title: '<?php echo __('Info'); ?>',
|
||||
open: function() {
|
||||
$.ajax({
|
||||
type: 'GET',
|
||||
url: '<?php echo ui_get_full_url('ajax.php', false, false, false); ?>',
|
||||
data: {
|
||||
page: "include/ajax/heatmap.ajax",
|
||||
getInfo: 1,
|
||||
type: type,
|
||||
id: id,
|
||||
},
|
||||
dataType: 'html',
|
||||
success: function(data) {
|
||||
$('#info_dialog').empty();
|
||||
$('#info_dialog').append(data);
|
||||
}
|
||||
});
|
||||
},
|
||||
});
|
||||
});
|
||||
</script>
|
||||
<?php
|
||||
$x_back = 0;
|
||||
$y_back = 0;
|
||||
echo '<polyline points="0,0 0,1" class="polyline" />';
|
||||
echo '<polyline points="'.$contX.','.$contY.' '.$contX.','.($contY + 1).'" class="polyline" />';
|
||||
echo '<polyline points="'.$contX.','.$contY.' '.$Xaxis.','.$contY.'" class="polyline" />';
|
||||
foreach ($groups as $group) {
|
||||
if (($x_back + $group) <= $Xaxis) {
|
||||
$x_position = ($x_back + $group);
|
||||
$y_position = $y_back;
|
||||
|
||||
$points = sprintf(
|
||||
'%d,%d %d,%d %d,%d %d,%d',
|
||||
$x_position,
|
||||
$y_back,
|
||||
$x_back,
|
||||
$y_back,
|
||||
$x_back,
|
||||
($y_position + 1),
|
||||
$x_position,
|
||||
($y_position + 1)
|
||||
);
|
||||
|
||||
echo '<polyline points="'.$points.'" class="polyline" />';
|
||||
|
||||
$x_back = $x_position;
|
||||
if ($x_position === $Xaxis) {
|
||||
$points = sprintf(
|
||||
'%d,%d %d,%d',
|
||||
$x_position,
|
||||
$y_back,
|
||||
$x_position,
|
||||
($y_back + 1)
|
||||
);
|
||||
|
||||
echo '<polyline points="'.$points.'" class="polyline" />';
|
||||
|
||||
$y_back ++;
|
||||
$x_back = 0;
|
||||
}
|
||||
} else {
|
||||
$round = (int) floor(($x_back + $group) / $Xaxis);
|
||||
$y_position = ($round + $y_back);
|
||||
|
||||
// Top of the first line.
|
||||
$points = sprintf(
|
||||
'%d,%d %d,%d %d,%d',
|
||||
$x_back,
|
||||
($y_back + 1),
|
||||
$x_back,
|
||||
$y_back,
|
||||
$Xaxis,
|
||||
$y_back
|
||||
);
|
||||
|
||||
echo '<polyline points="'.$points.'" class="polyline" />';
|
||||
|
||||
if ($round === 1) {
|
||||
// One line.
|
||||
$x_position = (($x_back + $group) - $Xaxis);
|
||||
|
||||
// Bottom of last line.
|
||||
$points = sprintf(
|
||||
'%d,%d %d,%d',
|
||||
0,
|
||||
($y_position + 1),
|
||||
$x_position,
|
||||
($y_position + 1)
|
||||
);
|
||||
|
||||
echo '<polyline points="'.$points.'" class="polyline" />';
|
||||
} else {
|
||||
// Two or more lines.
|
||||
$x_position = (($x_back + $group) - ($Xaxis * $round));
|
||||
if ($x_position === 0) {
|
||||
$x_position = $Xaxis;
|
||||
}
|
||||
|
||||
// Bottom of last line.
|
||||
$points = sprintf(
|
||||
'%d,%d %d,%d',
|
||||
0,
|
||||
($y_position + 1),
|
||||
$x_position,
|
||||
($y_position + 1)
|
||||
);
|
||||
|
||||
echo '<polyline points="'.$points.'" class="polyline" />';
|
||||
}
|
||||
|
||||
if ($x_position === $Xaxis) {
|
||||
$x_position = 0;
|
||||
}
|
||||
|
||||
$x_back = $x_position;
|
||||
$y_back = $y_position;
|
||||
}
|
||||
}
|
||||
|
||||
echo '</svg>';
|
||||
|
||||
// Dialog.
|
||||
echo '<div id="info_dialog" style="padding:15px" class="invisible"></div>';
|
||||
}
|
||||
|
||||
|
||||
|
|
|
|||
|
|
@ -2,6 +2,8 @@
|
|||
width: 100%;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
min-height: 750px;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.normal {
|
||||
|
|
@ -24,6 +26,10 @@
|
|||
fill: #4a83f3;
|
||||
}
|
||||
|
||||
.hover {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.hover:hover {
|
||||
filter: brightness(1.5);
|
||||
stroke-width: 0.009;
|
||||
|
|
@ -35,3 +41,67 @@
|
|||
stroke-width: 0.03;
|
||||
stroke: black;
|
||||
}
|
||||
|
||||
body.pure {
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
div#main_pure {
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
div#heatmap-controls {
|
||||
position: fixed;
|
||||
top: 30px;
|
||||
right: 20px;
|
||||
width: 350px;
|
||||
background-color: #ececec;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
padding: 5px;
|
||||
border-radius: 3px;
|
||||
}
|
||||
|
||||
div#heatmap-controls div#menu_tab {
|
||||
margin: 0px;
|
||||
}
|
||||
|
||||
div#heatmap-controls ul.white-box-content {
|
||||
background-color: #ececec;
|
||||
border: 0px;
|
||||
}
|
||||
|
||||
div#heatmap-controls div.heatmap-title,
|
||||
div#heatmap-controls div.heatmap-refr {
|
||||
margin-top: 15px;
|
||||
margin-left: 3px;
|
||||
margin-right: 3px;
|
||||
}
|
||||
div#heatmap-controls div.heatmap-refr > div {
|
||||
display: inline;
|
||||
}
|
||||
|
||||
.refr-form {
|
||||
margin-bottom: 0 !important;
|
||||
padding: 0 !important;
|
||||
}
|
||||
|
||||
.label-dialog {
|
||||
width: 30%;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.div-dialog {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: left;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.polyline {
|
||||
fill: none;
|
||||
stroke: black;
|
||||
stroke-width: 0.05;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -42,8 +42,50 @@ if ($agent_a === false && $agent_w === false) {
|
|||
|
||||
require_once $config['homedir'].'/include/class/Heatmap.class.php';
|
||||
|
||||
$pure = (bool) get_parameter('pure', false);
|
||||
$type = get_parameter('type', 0);
|
||||
$randomId = get_parameter('randomId', null);
|
||||
$refresh = get_parameter('refresh', 30);
|
||||
$height = get_parameter('height', 0);
|
||||
$width = get_parameter('width', 0);
|
||||
$search = get_parameter('search', '');
|
||||
$filter = get_parameter('filter', []);
|
||||
|
||||
if (is_array($filter) === false) {
|
||||
$filter = explode(',', $filter);
|
||||
}
|
||||
|
||||
|
||||
$is_ajax = is_ajax();
|
||||
if (!$is_ajax) {
|
||||
if ($is_ajax === false && $pure === false) {
|
||||
$viewtab['config'] = '<a id="config" href="">'.html_print_image(
|
||||
'images/setup.png',
|
||||
true,
|
||||
[
|
||||
'title' => __('Config'),
|
||||
'class' => 'invert_filter',
|
||||
]
|
||||
).'</a>';
|
||||
|
||||
$url = sprintf(
|
||||
'index.php?sec=view&sec2=operation/heatmap&pure=1&type=%s&refresh=%s&search=%s&filter=%s',
|
||||
$type,
|
||||
$refresh,
|
||||
$search,
|
||||
implode(',', $filter)
|
||||
);
|
||||
|
||||
$viewtab['full_screen'] = '<a id="full_screen" href="'.$url.'">'.html_print_image(
|
||||
'images/full_screen.png',
|
||||
true,
|
||||
[
|
||||
'title' => __('Full screen'),
|
||||
'class' => 'invert_filter',
|
||||
]
|
||||
).'</a>';
|
||||
|
||||
|
||||
|
||||
// Header.
|
||||
ui_print_standard_header(
|
||||
__('Heatmap view'),
|
||||
|
|
@ -51,7 +93,7 @@ if (!$is_ajax) {
|
|||
false,
|
||||
'',
|
||||
false,
|
||||
[],
|
||||
$viewtab,
|
||||
[
|
||||
[
|
||||
'link' => '',
|
||||
|
|
@ -65,15 +107,85 @@ if (!$is_ajax) {
|
|||
);
|
||||
}
|
||||
|
||||
$type = get_parameter('type', 0);
|
||||
$filter = get_parameter('filter', []);
|
||||
$randomId = get_parameter('randomId', null);
|
||||
$refresh = get_parameter('refresh', 300);
|
||||
if ($is_ajax === false && $pure === true) {
|
||||
// Floating menu - Start.
|
||||
echo '<div id="heatmap-controls" class="zindex999">';
|
||||
|
||||
echo '<div id="menu_tab" method="post">';
|
||||
echo '<ul class="mn white-box-content box-shadow flex-row">';
|
||||
|
||||
// Name.
|
||||
echo '<li class="nomn">';
|
||||
|
||||
html_print_div(
|
||||
[
|
||||
'class' => 'heatmap-title',
|
||||
'content' => 'Heatmap',
|
||||
]
|
||||
);
|
||||
|
||||
echo '</li>';
|
||||
|
||||
// Countdown.
|
||||
echo '<li class="nomn">';
|
||||
echo '<div class="heatmap-refr">';
|
||||
|
||||
echo '<div id="heatmap-refr-form">';
|
||||
echo '<form id="refr-form" class="refr-form" method="post">';
|
||||
echo __('Refresh').':';
|
||||
echo html_print_select(
|
||||
[
|
||||
'30' => __('30 seconds'),
|
||||
(string) SECONDS_1MINUTE => __('1 minute'),
|
||||
'180' => __('3 minute'),
|
||||
(string) SECONDS_5MINUTES => __('5 minutes'),
|
||||
],
|
||||
'refresh-control',
|
||||
$refresh,
|
||||
'',
|
||||
'',
|
||||
0,
|
||||
true,
|
||||
false,
|
||||
false
|
||||
);
|
||||
// Hidden.
|
||||
html_print_input_hidden('refresh', $refresh);
|
||||
html_print_input_hidden('type', $type);
|
||||
html_print_input_hidden('search', $search);
|
||||
html_print_input_hidden('filter', implode(',', $filter));
|
||||
echo '</form>';
|
||||
echo '</div>';
|
||||
echo '</div>';
|
||||
echo '</li>';
|
||||
|
||||
// Quit fullscreen.
|
||||
echo '<li class="nomn">';
|
||||
$urlNoFull = sprintf(
|
||||
'index.php?sec=view&sec2=operation/heatmap&pure=0&type=%s&refresh=%s&search=%s&filter=%s',
|
||||
$type,
|
||||
$refresh,
|
||||
$search,
|
||||
implode(',', $filter)
|
||||
);
|
||||
|
||||
echo '<a href="'.$urlNoFull.'">';
|
||||
echo html_print_image('images/normal_screen.png', true, ['title' => __('Back to normal mode'), 'class' => 'invert_filter']);
|
||||
echo '</a>';
|
||||
echo '</li>';
|
||||
|
||||
echo '</ul>';
|
||||
|
||||
// Hidden.
|
||||
echo '</div>';
|
||||
|
||||
echo '</div>';
|
||||
}
|
||||
|
||||
// Control call flow.
|
||||
try {
|
||||
// Heatmap construct.
|
||||
$heatmap = new Heatmap($type, $filter, $randomId, $refresh);
|
||||
$heatmap = new Heatmap($type, $filter, $randomId, $refresh, $width, $height, $search);
|
||||
} catch (Exception $e) {
|
||||
if (is_ajax() === true) {
|
||||
echo json_encode(['error' => '[Heatmap]'.$e->getMessage() ]);
|
||||
|
|
@ -105,4 +217,89 @@ if ($is_ajax === true) {
|
|||
} else {
|
||||
// Run.
|
||||
$heatmap->run();
|
||||
|
||||
// Dialog.
|
||||
echo '<div id="config_dialog" style="padding:15px" class="invisible"></div>';
|
||||
}
|
||||
|
||||
?>
|
||||
|
||||
<script type="text/javascript">
|
||||
$(document).ready(function() {
|
||||
$('#config').click(function(e) {
|
||||
e.preventDefault();
|
||||
$('#config_dialog').empty();
|
||||
$("#config_dialog").dialog({
|
||||
resizable: false,
|
||||
draggable: false,
|
||||
modal: true,
|
||||
closeOnEscape: true,
|
||||
height: 370,
|
||||
width: 330,
|
||||
title: '<?php echo __('Config'); ?>',
|
||||
position: {
|
||||
my: "right top",
|
||||
at: "right bottom",
|
||||
of: $('#config')
|
||||
},
|
||||
overlay: {
|
||||
opacity: 0.5,
|
||||
background: "black"
|
||||
},
|
||||
buttons:[{
|
||||
class: 'ui-widget ui-state-default ui-corner-all ui-button-text-only sub upd submit-next',
|
||||
text: "<?php echo __('Show'); ?>",
|
||||
click: function() {
|
||||
// Dialog close.
|
||||
$(this).dialog("close");
|
||||
$("#form_dialog").submit();
|
||||
}
|
||||
}],
|
||||
open: function() {
|
||||
$.ajax({
|
||||
type: 'GET',
|
||||
url: '<?php echo ui_get_full_url('ajax.php', false, false, false); ?>',
|
||||
data: {
|
||||
page: "include/ajax/heatmap.ajax",
|
||||
getFilters: 1,
|
||||
type: '<?php echo $type; ?>',
|
||||
refresh: '<?php echo $refresh; ?>',
|
||||
search: '<?php echo $search; ?>',
|
||||
},
|
||||
dataType: 'html',
|
||||
success: function(data) {
|
||||
$('#config_dialog').append(data);
|
||||
$('#type').on('change', function() {
|
||||
$.ajax({
|
||||
type: 'GET',
|
||||
url: '<?php echo ui_get_full_url('ajax.php', false, false, false); ?>',
|
||||
data: {
|
||||
page: "include/ajax/heatmap.ajax",
|
||||
getFilterType: 1,
|
||||
type: this.value,
|
||||
filter: <?php echo json_encode($filter); ?>
|
||||
},
|
||||
dataType: 'html',
|
||||
success: function(data) {
|
||||
$('#filter_type').remove();
|
||||
$('#form_dialog').append(data);
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
$('#type').trigger('change');
|
||||
}
|
||||
});
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
const controls = document.getElementById('heatmap-controls');
|
||||
autoHideElement(controls, 1000);
|
||||
|
||||
$('#refresh-control').change(function(e) {
|
||||
$('#hidden-refresh').val(this.value);
|
||||
$('#refr-form').submit();
|
||||
});
|
||||
});
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -63,7 +63,7 @@ if (check_acl($config['id_user'], 0, 'AR')) {
|
|||
|
||||
enterprise_hook('tag_view_submenu');
|
||||
|
||||
$sub2['operation/agentes/alerts_status']['text'] = __('Alert details');
|
||||
$sub2['operation/agentes/alerts_status']['text'] = __('Alert detail');
|
||||
$sub2['operation/agentes/alerts_status']['refr'] = 0;
|
||||
|
||||
$sub2['operation/heatmap']['text'] = __('Heatmap view');
|
||||
|
|
|
|||
Loading…
Reference in New Issue