Merge branch 'ent-9029-Mejora-estética-en-header-vista-agente' into 'develop'

Ent 9029 mejora estética en header vista agente

See merge request artica/pandorafms!5003
This commit is contained in:
Diego Muñoz-Reja 2022-07-13 12:54:54 +00:00
commit 74d19b3dbd
8 changed files with 188 additions and 22 deletions

View File

@ -4294,3 +4294,140 @@ function agents_get_offspring(int $id_agent)
return $return;
}
function agents_get_starmap(int $id_agent, float $width=0, float $height=0)
{
ui_require_css_file('heatmap');
$all_modules = agents_get_modules($id_agent);
if (empty($all_modules)) {
return null;
}
$total_modules = count($all_modules);
// Best square.
$high = (float) max($width, $height);
$low = 0.0;
while (abs($high - $low) > 0.000001) {
$mid = (($high + $low) / 2.0);
$midval = (floor($width / $mid) * floor($height / $mid));
if ($midval >= $total_modules) {
$low = $mid;
} else {
$high = $mid;
}
}
$square_length = min(($width / floor($width / $low)), ($height / floor($height / $low)));
// Print starmap.
$html = sprintf(
'<svg id="svg_%s" style="width: %spx; height: %spx;">',
$id_agent,
$width,
$height
);
$html .= '<g>';
$row = 0;
$column = 0;
$x = 0;
$y = 0;
$cont = 1;
foreach ($all_modules as $key => $value) {
// Colour by status.
$status = modules_get_agentmodule_status($key);
switch ($status) {
case 0:
case 4:
case 300:
$status = 'normal';
break;
case 1:
case 100:
$status = 'critical';
break;
case 2:
case 200:
$status = 'warning';
break;
case 3:
$status = 'unknown';
break;
case 5:
$status = 'notinit';
break;
}
$html .= sprintf(
'<rect id="%s" x="%s" y="%s" row="%s" col="%s" width="%s" height="%s" class="%s_%s"></rect>',
'rect_'.$cont,
$x,
$y,
$row,
$column,
$square_length,
$square_length,
$status,
random_int(1, 10)
);
$y += $square_length;
$row++;
if ((int) ($y + $square_length) > (int) $height) {
$y = 0;
$x += $square_length;
$row = 0;
$column++;
}
if ((int) ($x + $square_length) > (int) $width) {
$x = 0;
$y += $square_length;
$column = 0;
$row++;
}
$cont++;
}
?>
<script type="text/javascript">
$(document).ready(function() {
const total_modules = '<?php echo $total_modules; ?>';
function getRandomInteger(min, max) {
return Math.floor(Math.random() * max) + min;
}
function oneSquare(solid, time) {
var randomPoint = getRandomInteger(1, total_modules);
let target = $(`#rect_${randomPoint}`);
let class_name = target.attr('class');
class_name = class_name.split('_')[0];
setTimeout(function() {
target.removeClass();
target.addClass(`${class_name}_${solid}`);
oneSquare(getRandomInteger(1, 10), getRandomInteger(100, 900));
}, time);
}
let cont = 0;
while (cont < Math.ceil(total_modules / 3)) {
oneSquare(getRandomInteger(1, 10), getRandomInteger(100, 900));
cont ++;
}
});
</script>
<?php
$html .= '</g>';
$html .= '</svg>';
return $html;
}

View File

@ -2558,7 +2558,8 @@ function combined_graph_summatory_average(
function graphic_agentaccess(
int $id_agent,
int $period=0,
?bool $return=false
?bool $return=false,
?bool $agent_view=false
) {
global $config;
@ -2599,6 +2600,10 @@ function graphic_agentaccess(
$options = [];
$options['grid']['hoverable'] = true;
if ($agent_view === true) {
$options['agent_view'] = true;
}
if ($return === true) {
return vbar_graph($data_array, $options, 1);
} else {

View File

@ -494,7 +494,7 @@ function vbar_graph(
'weight' => $options['x']['font']['weight'],
'family' => $options['x']['font']['family'],
'variant' => $options['x']['font']['variant'],
'color' => $options['x']['font']['color'],
'color' => ($options['agent_view'] === true) ? 'black' : $options['x']['font']['color'],
],
'show' => $options['x']['show'],
'position' => $options['x']['position'],
@ -516,7 +516,7 @@ function vbar_graph(
'weight' => $options['y']['font']['weight'],
'family' => $options['y']['font']['family'],
'variant' => $options['y']['font']['variant'],
'color' => $options['y']['font']['color'],
'color' => ($options['agent_view'] === true) ? 'black' : $options['y']['font']['color'],
],
'show' => $options['y']['show'],
'position' => $options['y']['position'],
@ -534,8 +534,8 @@ function vbar_graph(
'aboveData' => $options['grid']['aboveData'],
'color' => $options['grid']['color'],
'backgroundColor' => $options['grid']['backgroundColor'],
'margin' => $options['grid']['margin'],
'labelMargin' => $options['grid']['labelMargin'],
'margin' => ($options['agent_view'] === true) ? 6 : $options['grid']['margin'],
'labelMargin' => ($options['agent_view'] === true) ? 12 : $options['grid']['labelMargin'],
'axisMargin' => $options['grid']['axisMargin'],
'markings' => $options['grid']['markings'],
'borderWidth' => $options['grid']['borderWidth'],
@ -561,6 +561,10 @@ function vbar_graph(
],
];
if ($options['agent_view'] === true) {
$params['agent_view'] = true;
}
if (empty($params['data']) === true) {
return graph_nodata_image(
0,

View File

@ -670,6 +670,10 @@ function flot_vcolumn_chart(array $options)
$style .= 'height:'.$options['generals']['pdf']['height'].'px;';
}
if ($options['agent_view'] === true) {
$style = 'width: 95%; height: 85px';
}
$class = '';
if ($options['generals']['rotate'] === true) {
$class = 'bars-graph-rotate';

View File

@ -2869,7 +2869,7 @@ function donutNarrowGraph(
arc = d3.svg
.arc()
.outerRadius(radius)
.innerRadius(radius - radius / 6);
.innerRadius(radius - radius / 4);
svg = donutbody
.append("svg")

View File

@ -159,10 +159,26 @@
fill: #cccccc;
}
.notinit_10,
.notinit_9,
.notinit_8,
.notinit {
fill: #4a83f3;
}
.notinit_7,
.notinit_6,
.notinit_5,
.notinit_4 {
fill: #6695f5;
}
.notinit_3,
.notinit_2,
.notinit_1 {
fill: #79a3f6;
}
.hover {
cursor: pointer;
}

View File

@ -5614,12 +5614,12 @@ div#bullets_modules div {
}
.agent_details_col_left {
width: 40%;
min-width: 300px;
width: 49%;
min-width: 450px;
}
.agent_details_col_right {
width: 59%;
min-width: 480px;
width: 49%;
min-width: 450px;
}
.agent_access_rate_events {
@ -5630,14 +5630,15 @@ div#bullets_modules div {
}
.white_table_graph#table_access_rate {
flex: 1 1 auto;
min-width: 450px;
margin-right: 1%;
margin-left: 1px;
margin-right: 1px;
width: 49%;
}
.white_table_graph#table_events {
flex: 1 1 auto;
min-width: 450px;
margin-left: 1px;
margin-right: 1px;
width: 49%;
}
@media screen and (max-width: 1150px) {
@ -5676,7 +5677,7 @@ div#status_pie {
justify-content: flex-end;
align-items: center;
border-bottom: 1px solid #e2e2e2;
padding: 6px 20px;
padding: 8px 20px;
}
.agent_details_content {

View File

@ -74,9 +74,7 @@ if (! check_acl_one_of_groups($config['id_user'], $all_groups, 'AR')
return;
}
$alive_animation = agents_get_status_animation(
agents_get_interval_status($agent, false)
);
$alive_animation = agents_get_starmap($id_agente, 200, 50);
/*
* START: TABLE AGENT BUILD.
@ -170,10 +168,10 @@ $status_img = agents_detail_view_status_img(
$table_agent_header .= '<div class="icono_right">'.$status_img.'</div>';
// Fixed width non interactive charts.
$status_chart_width = 180;
$graph_width = 180;
$status_chart_width = 150;
$graph_width = 150;
$table_agent_graph = '<div id="status_pie" style="width: '.$status_chart_width.'px;">';
$table_agent_graph = '<div id="status_pie" style="width: '.$graph_width.'px;">';
$table_agent_graph .= graph_agent_status(
$id_agente,
$graph_width,
@ -604,6 +602,7 @@ if ($config['agentaccess'] && $access_agent > 0) {
$table_access_rate .= graphic_agentaccess(
$id_agente,
SECONDS_1DAY,
true,
true
);
$table_access_rate .= '</div>';