#10194 new graph for license and changes in design
This commit is contained in:
Daniel Cebrian
parent
9b675868b9
commit
2c352ad9dd
|
|
@ -64,7 +64,10 @@ $(document).ready(function() {
|
|||
},
|
||||
type: "POST",
|
||||
success: function(data) {
|
||||
$("#heatmap-group").html(data);
|
||||
var title = $(data)[1];
|
||||
var heatmap = $(data)[0];
|
||||
$("#heatmap-group").html(heatmap);
|
||||
$("#heatmap-title").html($(title).html());
|
||||
}
|
||||
});
|
||||
});
|
||||
|
|
|
|||
|
|
@ -147,10 +147,11 @@ class Database extends Element
|
|||
*/
|
||||
public function getEvents():string
|
||||
{
|
||||
// TODO connect to automonitorization.
|
||||
$data = $this->valueMonitoring('last_events_24h');
|
||||
$value = round($data[0]['datos']);
|
||||
return html_print_div(
|
||||
[
|
||||
'content' => '9.999.999',
|
||||
'content' => $value,
|
||||
'class' => 'text-l',
|
||||
'id' => 'total-events',
|
||||
'style' => 'margin: 0px 10px 10px 10px;',
|
||||
|
|
|
|||
|
|
@ -103,6 +103,8 @@ class Events extends Element
|
|||
];
|
||||
}
|
||||
|
||||
$graph_values = array_slice($graph_values, -24);
|
||||
|
||||
$danger = $max_value;
|
||||
$ok = ($max_value / 3);
|
||||
|
||||
|
|
|
|||
|
|
@ -81,11 +81,11 @@ class Groups extends Element
|
|||
$agents = agents_get_agents();
|
||||
if (is_array($agents) === true && count($agents) >= 10) {
|
||||
$this->title = __('My monitored agents');
|
||||
return $this->getStatusHeatMapAgents();
|
||||
return $this->getStatusHeatMapAgents().'<span id="heatmap-title">'.$this->title.'</span>';
|
||||
}
|
||||
|
||||
$this->title = __('My monitored modules');
|
||||
return $this->getStatusHeatMapModules();
|
||||
return $this->getStatusHeatMapModules().'<span id="heatmap-title">'.$this->title.'</span>';
|
||||
}
|
||||
|
||||
|
||||
|
|
|
|||
|
|
@ -153,27 +153,25 @@ class Overview extends Element
|
|||
*/
|
||||
public function getLicenseUsageGraph():string
|
||||
{
|
||||
// TODO connect to automonitorization.
|
||||
$options = [
|
||||
'labels' => [
|
||||
'Agents used',
|
||||
'Free agents',
|
||||
// TODO: show real data.
|
||||
$data = [
|
||||
'free_agents' => [
|
||||
'label' => __('Free agents'),
|
||||
'perc' => 40,
|
||||
'color' => '#5C63A2',
|
||||
],
|
||||
'colors' => [
|
||||
'#1C4E6B',
|
||||
'#5C63A2',
|
||||
'agents_used' => [
|
||||
'label' => __('Agents used'),
|
||||
'perc' => 60,
|
||||
'color' => '#1C4E6B',
|
||||
],
|
||||
'legend' => [
|
||||
'position' => 'bottom',
|
||||
'align' => 'right',
|
||||
],
|
||||
'cutout' => 80,
|
||||
];
|
||||
$pie = ring_graph([60, 40], $options);
|
||||
|
||||
$bar = $this->printHorizontalBar($data);
|
||||
$output = html_print_div(
|
||||
[
|
||||
'content' => $pie,
|
||||
'style' => 'margin: 0 auto; max-width: 320px',
|
||||
'content' => $bar,
|
||||
'style' => 'margin: 0 auto;',
|
||||
],
|
||||
true
|
||||
);
|
||||
|
|
@ -183,11 +181,60 @@ class Overview extends Element
|
|||
|
||||
|
||||
/**
|
||||
* Returns the html of a graph with the processed xmls
|
||||
* Print horizontal bar divided by percentage.
|
||||
*
|
||||
* @param array $data Required [perc, color, label].
|
||||
*
|
||||
* @return string
|
||||
*/
|
||||
public function getXmlProcessedGraph():string
|
||||
private function printHorizontalBar(array $data):string
|
||||
{
|
||||
$output = '<div id="horizontalBar">';
|
||||
$output .= '<div class="labels">';
|
||||
foreach ($data as $key => $value) {
|
||||
$output .= html_print_div(
|
||||
[
|
||||
'content' => '<div style="background: '.$value['color'].'"></div>'.$value['label'],
|
||||
'class' => 'label',
|
||||
],
|
||||
true
|
||||
);
|
||||
}
|
||||
|
||||
$output .= '</div>';
|
||||
$output .= '<div class="bar">';
|
||||
foreach ($data as $key => $value) {
|
||||
$output .= html_print_div(
|
||||
[
|
||||
'content' => $value['perc'].' %',
|
||||
'style' => 'width: '.$value['perc'].'%; background-color: '.$value['color'].';',
|
||||
],
|
||||
true
|
||||
);
|
||||
}
|
||||
|
||||
$output .= '</div>';
|
||||
$output .= '
|
||||
<div class="marks">
|
||||
<div class="mark"><div class="line"></div><span class="number">0 %</span></div>
|
||||
<div class="mark"><div class="line"></div><span class="number">20 %</span></div>
|
||||
<div class="mark"><div class="line"></div><span class="number">40 %</span></div>
|
||||
<div class="mark"><div class="line"></div><span class="number">60 %</span></div>
|
||||
<div class="mark"><div class="line"></div><span class="number">80 %</span></div>
|
||||
<div class="mark"><div class="line"></div><span class="number">100 %</span></div>
|
||||
</div>';
|
||||
$output .= '</div>';
|
||||
|
||||
return $output;
|
||||
}
|
||||
|
||||
|
||||
/**
|
||||
* Returns the html of a graph with the cpu load.
|
||||
*
|
||||
* @return string
|
||||
*/
|
||||
public function getCPULoadGraph():string
|
||||
{
|
||||
$sql = 'SELECT
|
||||
utimestamp,
|
||||
|
|
@ -199,14 +246,13 @@ class Overview extends Element
|
|||
ORDER BY hour;';
|
||||
|
||||
$rows = db_process_sql($sql);
|
||||
|
||||
$data_last24h = $this->valueMonitoring('CPU Load', (time() - 86400), time());
|
||||
$dates = [];
|
||||
$xml_proccessed = [];
|
||||
$cpu_load = [];
|
||||
$total = 0;
|
||||
foreach ($rows as $key => $raw_data) {
|
||||
$dates[] = date('H:00:00', $raw_data['utimestamp']);
|
||||
$total += $raw_data['xml_proccessed'];
|
||||
$xml_proccessed[] = $raw_data['xml_proccessed'];
|
||||
foreach ($data_last24h as $key => $raw_data) {
|
||||
$dates[] = date('H:m:s', $raw_data['utimestamp']);
|
||||
$cpu_load[] = $raw_data['datos'];
|
||||
}
|
||||
|
||||
$options = [
|
||||
|
|
@ -215,8 +261,9 @@ class Overview extends Element
|
|||
'tooltips' => [ 'display' => false ],
|
||||
'scales' => [
|
||||
'y' => [
|
||||
'grid' => ['display' => false],
|
||||
'ticks' => ['display' => false],
|
||||
'grid' => ['display' => false],
|
||||
'ticks' => ['display' => false],
|
||||
'display' => false,
|
||||
],
|
||||
'x' => [
|
||||
'grid' => ['display' => false],
|
||||
|
|
@ -231,7 +278,7 @@ class Overview extends Element
|
|||
'borderColor' => '#009D9E',
|
||||
'pointBackgroundColor' => '#009D9E',
|
||||
'pointHoverBorderColor' => '#009D9E',
|
||||
'data' => $xml_proccessed,
|
||||
'data' => $cpu_load,
|
||||
],
|
||||
];
|
||||
|
||||
|
|
@ -239,7 +286,7 @@ class Overview extends Element
|
|||
[
|
||||
'content' => line_graph($data, $options),
|
||||
'class' => 'margin-top-5 w100p h100p',
|
||||
'style' => 'max-height: 330px;',
|
||||
'style' => 'max-height: 50px;',
|
||||
],
|
||||
true
|
||||
);
|
||||
|
|
@ -252,7 +299,7 @@ class Overview extends Element
|
|||
true
|
||||
);
|
||||
|
||||
$output = $total.$graph_area;
|
||||
$output = $graph_area;
|
||||
|
||||
return $output;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -131,6 +131,64 @@
|
|||
padding: 10px 10px 5px 10px;
|
||||
}
|
||||
|
||||
#Agents > .row {
|
||||
min-height: 550px;
|
||||
}
|
||||
#horizontalBar {
|
||||
padding: 0px 20px;
|
||||
position: relative;
|
||||
}
|
||||
#horizontalBar .bar {
|
||||
display: flex;
|
||||
color: white;
|
||||
height: 43px;
|
||||
}
|
||||
|
||||
#horizontalBar .bar div {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.marks {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
margin-top: 20px;
|
||||
}
|
||||
.marks .line {
|
||||
height: 76px;
|
||||
background: #00000033;
|
||||
width: 1px;
|
||||
position: absolute;
|
||||
top: 24px;
|
||||
margin-left: 11px;
|
||||
}
|
||||
.mark:nth-child(1) .line {
|
||||
margin-left: 0px;
|
||||
}
|
||||
|
||||
.mark:nth-last-child(1) .line {
|
||||
margin-left: 31px;
|
||||
}
|
||||
|
||||
.labels {
|
||||
display: flex;
|
||||
margin-bottom: 19px;
|
||||
}
|
||||
.label {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
margin-right: 10px;
|
||||
}
|
||||
.label div {
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
border-radius: 2px;
|
||||
margin-right: 3px;
|
||||
}
|
||||
|
||||
.indicative-text {
|
||||
color: #6e7079;
|
||||
font-size: 12px;
|
||||
|
|
|
|||
|
|
@ -12,9 +12,9 @@
|
|||
</div>
|
||||
<div class="content br-t">
|
||||
<div class="row">
|
||||
<div class="col-6">
|
||||
<div class="col-12">
|
||||
<div class="row">
|
||||
<div class="col-6">
|
||||
<div class="col-4">
|
||||
<div class="padding10">
|
||||
<span class="subtitle">
|
||||
<?php echo __('Pandora FMS log size'); ?>
|
||||
|
|
@ -22,7 +22,7 @@
|
|||
<?php echo $Overview->getLogSizeStatus(); ?>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-6 br-l">
|
||||
<div class="col-4 br-l">
|
||||
<div class="padding10">
|
||||
<span class="subtitle">
|
||||
<?php echo __('Server status'); ?>
|
||||
|
|
@ -30,6 +30,14 @@
|
|||
<?php echo $Overview->getServerStatus(); ?>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-4 br-l">
|
||||
<div class="padding10">
|
||||
<span class="subtitle">
|
||||
<?php echo __('System CPU Load'); ?>
|
||||
</span>
|
||||
<?php echo $Overview->getCPULoadGraph(); ?>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="br-t">
|
||||
<div class="padding10">
|
||||
|
|
@ -40,12 +48,6 @@
|
|||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-6 br-l relative">
|
||||
<div class="subtitle link padding10 padding2">
|
||||
<?php echo __('XML packets processed (last 24 hrs)'); ?> <a href=""><?php echo __('Info'); ?></a>
|
||||
</div>
|
||||
<?php echo $Overview->getXmlProcessedGraph(); ?>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -150,7 +152,7 @@
|
|||
<div class="row">
|
||||
<div class="col-6 pdd_5px">
|
||||
<div class="container">
|
||||
<div class="title br-b">
|
||||
<div class="title br-b" id="heatmap-title">
|
||||
<?php echo $Groups->title; ?>
|
||||
</div>
|
||||
<div class="subtitle link padding10 padding2">
|
||||
|
|
@ -337,7 +339,7 @@
|
|||
</div>
|
||||
</div>
|
||||
<div class="col-xl-6">
|
||||
<div class="container mrgn_5px" id="Agents">
|
||||
<div class="container mrgn_5px">
|
||||
<div class="title br-b">
|
||||
<?php echo $Configurations->title; ?>
|
||||
</div>
|
||||
|
|
|
|||
Loading…
Reference in New Issue