fixed mobile console donut charts

This commit is contained in:
Daniel Barbero Martin 2020-09-21 15:13:07 +02:00
parent 89714f3fd1
commit c6165fbdee
7 changed files with 101 additions and 124 deletions

View File

@ -258,7 +258,7 @@ if (!$new_agent && $alias != '') {
$table_qr_code .= '<p class="input_label">'.__('QR Code Agent view').'</p>';
$table_qr_code .= '<div id="qr_container_image"></div>';
if ($id_agente) {
$table_qr_code .= "<a id='qr_code_agent_view' href='javascript: show_dialog_qrcode(null, \"".ui_get_full_url('mobile/index.php?page=agent&id='.$id_agente)."\" );'></a>";
$table_qr_code .= "<a id='qr_code_agent_view' href='".ui_get_full_url('mobile/index.php?page=agent&id='.$id_agente).");'></a>";
}
// Add Custom id div.

View File

@ -2554,20 +2554,35 @@ function truncate_negatives(&$element)
/**
* Print a pie graph with events data of agent or all agents (if id_agent = false)
* Print a pie graph with events
* data of agent or all agents (if id_agent = false).
*
* @param integer id_agent Agent ID
* @param integer width pie graph width
* @param integer height pie graph height
* @param bool return or echo flag
* @param bool show_not_init flag
* @param integer $id_agent Agent ID.
* @param integer $width Pie graph width.
* @param integer $height Pie graph height.
* @param boolean $return Flag.
* @param boolean $show_not_init Flag.
* @param array $data_agents Data.
* @param boolean $donut_narrow_graph Flag type graph.
*
* @return string Html chart.
*/
function graph_agent_status($id_agent=false, $width=300, $height=200, $return=false, $show_not_init=false, $data_agents=false, $donut_narrow_graph=false)
{
function graph_agent_status(
$id_agent=false,
$width=300,
$height=200,
$return=false,
$show_not_init=false,
$data_agents=false,
$donut_narrow_graph=false
) {
global $config;
if ($data_agents == false) {
$groups = implode(',', array_keys(users_get_groups(false, 'AR', false)));
$groups = implode(
',',
array_keys(users_get_groups(false, 'AR', false))
);
$p_table = 'tagente';
$s_table = 'tagent_secondary_group';
if (is_metaconsole()) {
@ -2575,10 +2590,8 @@ function graph_agent_status($id_agent=false, $width=300, $height=200, $return=fa
$s_table = 'tmetaconsole_agent_secondary_group';
}
$data = db_get_row_sql(
sprintf(
'SELECT
SUM(critical_count) AS Critical,
$sql = sprintf(
'SELECT SUM(critical_count) AS Critical,
SUM(warning_count) AS Warning,
SUM(normal_count) AS Normal,
SUM(unknown_count) AS Unknown
@ -2589,19 +2602,20 @@ function graph_agent_status($id_agent=false, $width=300, $height=200, $return=fa
ta.disabled = 0 AND
%s
(ta.id_grupo IN (%s) OR tasg.id_group IN (%s))',
$show_not_init ? ', SUM(notinit_count) "Not init"' : '',
$p_table,
$s_table,
empty($id_agent) ? '' : "ta.id_agente = $id_agent AND",
$groups,
$groups
)
$show_not_init ? ', SUM(notinit_count) "Not init"' : '',
$p_table,
$s_table,
(empty($id_agent) === true) ? '' : 'ta.id_agente = '.$id_agent.' AND',
$groups,
$groups
);
$data = db_get_row_sql($sql);
} else {
$data = $data_agents;
}
if (empty($data)) {
if (empty($data) === true) {
$data = [];
}
@ -2610,11 +2624,15 @@ function graph_agent_status($id_agent=false, $width=300, $height=200, $return=fa
if ($config['fixed_graph'] == false) {
$water_mark = [
'file' => $config['homedir'].'/images/logo_vertical_water.png',
'url' => ui_get_full_url('images/logo_vertical_water.png', false, false, false),
'url' => ui_get_full_url(
'images/logo_vertical_water.png',
false,
false,
false
),
];
}
// $colors = array(COL_CRITICAL, COL_WARNING, COL_NORMAL, COL_UNKNOWN);
$colors['Critical'] = COL_CRITICAL;
$colors['Warning'] = COL_WARNING;
$colors['Normal'] = COL_NORMAL;

View File

@ -39,7 +39,6 @@ function include_javascript_dependencies_flot_graph($return=false, $mobile=false
// NOTE: jquery.flot.threshold is not te original file. Is patched to allow multiple thresholds and filled area
$output .= '
<!--[if lte IE 8]><script language="javascript" type="text/javascript" src="'.ui_get_full_url($metaconsole_hack.'/include/graphs/flot/excanvas.js').'"></script><![endif]-->
<script language="javascript" type="text/javascript" src="'.ui_get_full_url($metaconsole_hack.'/include/graphs/flot/jquery.flot.js').'"></script>
<script language="javascript" type="text/javascript" src="'.ui_get_full_url($metaconsole_hack.'/include/graphs/flot/jquery.flot.min.js').'"></script>
<script language="javascript" type="text/javascript" src="'.ui_get_full_url($metaconsole_hack.'/include/graphs/flot/jquery.flot.time.js').'"></script>
<script language="javascript" type="text/javascript" src="'.ui_get_full_url($metaconsole_hack.'/include/graphs/flot/jquery.flot.pie.js').'"></script>
@ -79,7 +78,7 @@ function include_javascript_dependencies_flot_graph($return=false, $mobile=false
percent = parseFloat(obj.series.percent).toFixed(2);
alert(''+obj.series.label+': '+obj.series.data[0][1]+' ('+percent+'%)');
}
</script>";
</script>";
if (!$return) {
echo $output;

View File

@ -779,6 +779,7 @@ class Ui
echo " </head>\n";
echo " <body>\n";
echo include_javascript_dependencies_flot_graph(false, false);
echo " <div class='ui-loader-background'> </div>";
if (!empty($this->dialogs)) {
if (!empty($this->dialogs['onStart'])) {

View File

@ -108,30 +108,6 @@ class Agent
}
public function ajax($parameter2=false)
{
$system = System::getInstance();
if (!$this->correct_acl) {
return;
} else {
switch ($parameter2) {
case 'render_events_bar':
$agent_id = $system->getRequest('agent_id', '0');
$width = $system->getRequest('width', '400');
graph_graphic_agentevents(
$agent_id,
$width,
30,
SECONDS_1DAY,
ui_get_full_url(false)
);
exit;
}
}
}
private function show_agent()
{
$ui = Ui::getInstance();
@ -194,24 +170,14 @@ class Agent
}
$address = $this->agent['direccion'];
// ~ foreach ($addresses as $k => $add) {
// ~ if ($add == $address) {
// ~ unset($addresses[$k]);
// ~ }
// ~ }
// ~ $ip = html_print_image('images/world.png',
// ~ true, array('title' => __('IP address'))) .
// ~ '&nbsp;&nbsp;';
$ip .= empty($address) ? '<em>'.__('N/A').'</em>' : $address;
$ip .= (empty($address) === true) ? '<em>'.__('N/A').'</em>' : $address;
$last_contact = '<b>'.__('Last contact').'</b>:&nbsp;';
$last_contact .= ui_print_timestamp(
$this->agent['ultimo_contacto'],
true
);
// ~ if (!empty($addresses)) {
// ~ $ip .= ui_print_help_tip(__('Other IP addresses') .
// ~ ': ' . implode(', ',$addresses), true);
// ~ }
$last_contact = '<b>'.__('Last contact').'</b>:&nbsp;'.ui_print_timestamp($this->agent['ultimo_contacto'], true);
// ~ $description = '<b>' . __('Description') . ':</b>&nbsp;';
if (empty($agent['comentarios'])) {
if (empty($agent['comentarios']) === true) {
$description .= '<i>'.__('N/A').'</i>';
} else {
$description .= $this->agent['comentarios'];
@ -241,6 +207,34 @@ class Agent
$html .= $description;
$html .= '</div>';
$ui->contentGridAddCell($html, 'agent_details');
ob_start();
// Fixed width non interactive charts.
$status_chart_width = 160;
$graph_width = 160;
hd($this->agent, true);
$html = '<div class="agent_graphs">';
$html .= '<b>'.__('Modules by status').'</b>';
$html .= '<div id="status_pie" style="margin: auto; width: '.$status_chart_width.'px; margin-bottom: 10px;">';
$html .= graph_agent_status(
$this->id,
$graph_width,
160,
true,
false,
false,
true
);
$html .= '</div>';
$graph_js = ob_get_clean();
$html = $graph_js.$html;
unset($this->agent['fired_count']);
if ($system->getConfig('metaconsole')) {
metaconsole_connect(
null,
@ -248,24 +242,6 @@ class Agent
);
}
$ui->contentGridAddCell($html, 'agent_details');
ob_start();
// Fixed width non interactive charts
$status_chart_width = 160;
$graph_width = 160;
$html = '<div class="agent_graphs">';
$html .= '<b>'.__('Modules by status').'</b>';
$html .= '<div id="status_pie" style="margin: auto; width: '.$status_chart_width.'px;">';
$html .= graph_agent_status($this->id, $graph_width, 160, true);
$html .= '</div>';
$graph_js = ob_get_clean();
$html = $graph_js.$html;
unset($this->agent['fired_count']);
if ($this->agent['total_count'] > 0) {
$html .= '<div class="agents_tiny_stats agents_tiny_stats_tactical">'.reporting_tiny_stats($this->agent, true, 'agent', '&nbsp;').' </div>';
}
@ -273,7 +249,20 @@ class Agent
$html .= '</div>';
$html .= '<div class="events_bar">';
$html .= '<b>'.__('Events (24h)').'</b>';
$html .= '<div id="events_bar"></div>';
$html .= '<div id="events_bar" style ="display: flex; flex-direction: row; flex-wrap: wrap; align-items: center; justify-content: center; width: 100%; height: 96px;" >';
$html .= graph_graphic_agentevents(
$this->id,
95,
45,
SECONDS_1DAY,
'',
true,
false,
true,
1,
''
);
$html .= '</div>';
$html .= '</div>';
$ui->contentGridAddCell($html, 'agent_graphs');
@ -306,7 +295,10 @@ class Agent
$ui->contentEndCollapsible();
if ($system->getConfig('metaconsole')) {
metaconsole_connect(null, $this->agent['id_tmetaconsole_setup']);
metaconsole_connect(
null,
$this->agent['id_tmetaconsole_setup']
);
}
$alerts = new Alerts();
@ -371,46 +363,19 @@ class Agent
$('.agent_details').height(max_height);
}
}
if ($('.ui-block-a').css('float') != 'none') {
set_same_heigth();
}
$('.ui-collapsible').bind('expand', function () {
refresh_link_listener_last_agent_events();
refresh_link_listener_list_agent_Modules();
});
function ajax_load_events_bar() {
$('#events_bar').html('<div style=\"text-align: center\"> ".__('Loading...')."<br /><img src=\"images/ajax-loader.gif\" /></div>');
var bar_width = $('.agent_graphs').width() * 0.9;
postvars = {};
postvars[\"action\"] = \"ajax\";
postvars[\"parameter1\"] = \"agent\";
postvars[\"parameter2\"] = \"render_events_bar\";
postvars[\"agent_id\"] = \"".$this->id."\";
postvars[\"width\"] = bar_width;
$.post(\"index.php\",
postvars,
function (data) {
$('#events_bar').html(data);
if ($('.ui-block-a').css('float') != 'none') {
set_same_heigth();
}
},
\"html\");
}
ajax_load_events_bar();
// Detect orientation change to refresh dinamic content
$(window).on({
orientationchange: function(e) {
// Refresh events bar
ajax_load_events_bar();
// Keep same height on boxes
if ($('.ui-block-a').css('float') == 'none') {
$('.agent_graphs').height('auto');
@ -419,14 +384,13 @@ class Agent
else {
set_same_heigth();
}
}
});
if ($('.ui-block-a').css('float') != 'none') {
set_same_heigth();
}
});
});
</script>"
);

View File

@ -270,9 +270,6 @@ class ModuleGraph
global $config;
echo include_javascript_dependencies_flot_graph(true);
ui_require_javascript_file('pandora', 'include/javascript/', true);
?>
<script type="text/javascript">
$(document).ready(function() {

View File

@ -30,8 +30,6 @@ class Tactical
} else {
$this->correct_acl = false;
}
include_javascript_dependencies_flot_graph(false, true);
}