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:
commit
74d19b3dbd
|
@ -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;
|
||||
}
|
||||
|
|
|
@ -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 {
|
||||
|
|
|
@ -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,
|
||||
|
|
|
@ -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';
|
||||
|
|
|
@ -2869,7 +2869,7 @@ function donutNarrowGraph(
|
|||
arc = d3.svg
|
||||
.arc()
|
||||
.outerRadius(radius)
|
||||
.innerRadius(radius - radius / 6);
|
||||
.innerRadius(radius - radius / 4);
|
||||
|
||||
svg = donutbody
|
||||
.append("svg")
|
||||
|
|
|
@ -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;
|
||||
}
|
||||
|
|
|
@ -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 {
|
||||
|
|
|
@ -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>';
|
||||
|
|
Loading…
Reference in New Issue