Unverified Commit 3cfd72d7 authored by aclotudrzal's avatar aclotudrzal Committed by GitHub
Browse files

enh(lib): use apexcharts to display pie chart + allow to hide table (#18)

*  Chart library changed to Apexcharts and add functionnalitie : hide table

* optimize and coding style fixes

* improving the code using Smarty
parent f80bc2de
......@@ -12,11 +12,12 @@
<autoRefresh>10</autoRefresh>
<preferences>
<preference label="Services/Hosts" name="hosts_services" defaultValue="hosts" type="list">
<option value="hosts" label="Show hosts"/>
<option value="hosts" label="Show Hosts"/>
<option value="services" label="Show Services"/>
</preference>
<preference label="Hostgroup" name="hostgroup" defaultValue="" type="hostgroup"/>
<preference label="Servicegroup" name="servicegroup" defaultValue="" type="servicegroup"/>
<preference label="Refresh Interval (seconds)" name="refresh_interval" defaultValue="30" type="text" header="Misc"/>
<preference label="Hide table" name="hide_table" defaultValue="0" type="boolean" header="Table"/>
</preferences>
</configs>
......@@ -32,7 +32,6 @@
* For more information : contact@centreon.com
*
*/
require_once "../require.php";
require_once $centreon_path . 'bootstrap.php';
require_once $centreon_path . 'www/class/centreon.class.php';
......@@ -66,7 +65,6 @@ try {
echo $e->getMessage() . "<br/>";
exit;
}
?>
<html>
<head>
......@@ -81,8 +79,7 @@ try {
<script type="text/javascript" src="../../include/common/javascript/widgetUtils.js"></script>
<script type="text/javascript"
src="../../include/common/javascript/jquery/plugins/treeTable/jquery.treeTable.min.js"></script>
<script src="../../include/common/javascript/charts/d3.min.js" language="javascript"></script>
<script src="../../include/common/javascript/charts/c3.min.js" language="javascript"></script>
<script src="./lib/apexcharts.min.js" language="javascript"></script>
</head>
<body>
<div id='global_health'></div>
......@@ -104,7 +101,7 @@ try {
loadPage();
});
/**
/*
* Load page
*/
function loadPage() {
......@@ -120,7 +117,6 @@ try {
var h = jQuery("#global_health").prop("scrollHeight") + 36;
parent.iResize(window.name, h);
});
}
});
if (autoRefresh) {
......@@ -131,4 +127,4 @@ try {
}
}
</script>
</html>
\ No newline at end of file
</html>
This source diff could not be displayed because it is too large. You can view the blob instead.
......@@ -77,6 +77,7 @@ $centreon = $_SESSION['centreon'];
$widgetId = $_REQUEST['widgetId'];
$widgetObj = new CentreonWidget($centreon, $db);
$preferences = $widgetObj->getWidgetPreferences($widgetId);
$template->assign('preferences', $preferences);
$oreon = $_SESSION['centreon'];
/**
......
......@@ -7,100 +7,118 @@
{/literal}
</style>
<h3 style="text-align: center;"> Global health of Hosts </h3>
<div id="global_health_host_div" style="text-align:center;display:inline-block;vertical-align: middle;"></div>
<div class="global_health_div_tab" style="display:inline-block;vertical-align: middle;" >
<table>
<thead>
<th>
</th>
<th>
<small>Number</small>
</th>
<th>
<small>Ack</small>
</th>
<th>
<small>DT</small>
</th>
<th>
<small>%</small>
</th>
</thead>
<tbody>
<tr>
<td> <span class="ListColCenter state_badge" style="background:#88b917"></span> <b> Ok </b> </td>
<td> {$hosts.UP.value} </td>
<td> {$hosts.UP.acknowledged} </td>
<td> {$hosts.UP.downtime} </td>
<td> {$hosts.UP.percent} </td>
</tr>
<tr>
<div id="container" style="text-align:center">
<div id="global_health_host_div" style="text-align:center;display:inline-block;vertical-align: middle;"></div>
{if $preferences.hide_table != 1}<div id="global_health_table_div" class="global_health_div_tab" style="display:inline-block;vertical-align: middle;" >
<table>
<thead>
<th>
</th>
<th>
<small>Number</small>
</th>
<th>
<small>Ack</small>
</th>
<th>
<small>DT</small>
</th>
<th>
<small>%</small>
</th>
</thead>
<tbody>
<tr>
<td> <span class="ListColCenter state_badge" style="background:#87BD23"></span> <b> Ok </b> </td>
<td> {$hosts.UP.value} </td>
<td> {$hosts.UP.acknowledged} </td>
<td> {$hosts.UP.downtime} </td>
<td> {$hosts.UP.percent} </td>
</tr>
<tr>
<td> <span class="ListColCenter state_badge" style="background:#e00b3d"></span> <b> Down </b> </td>
<td> {$hosts.DOWN.value} </td>
<td> {$hosts.DOWN.acknowledged} </td>
<td> {$hosts.DOWN.downtime} </td>
<td> {$hosts.DOWN.percent} </td>
</tr>
<tr>
<td> <span class="ListColCenter state_badge" style="background:#0072ce"></span> <b> Unreachable </b> </td>
<td> {$hosts.UNREACHABLE.value} </td>
<td> {$hosts.UNREACHABLE.acknowledged} </td>
<td> {$hosts.UNREACHABLE.downtime} </td>
<td> {$hosts.UNREACHABLE.percent} </td>
</tr>
<tr>
<td> <span class="ListColCenter state_badge" style="background:#bcbdc0"></span> <b> Pending </b> </td>
<td> {$hosts.PENDING.value} </td>
<td> {$hosts.PENDING.acknowledged} </td>
<td> {$hosts.PENDING.downtime} </td>
<td> {$hosts.PENDING.percent} </td>
</tr>
</tbody>
</table>
<td> <span class="ListColCenter state_badge" style="background:#ED1B23"></span> <b> Down </b> </td>
<td> {$hosts.DOWN.value} </td>
<td> {$hosts.DOWN.acknowledged} </td>
<td> {$hosts.DOWN.downtime} </td>
<td> {$hosts.DOWN.percent} </td>
</tr>
<tr>
<td> <span class="ListColCenter state_badge" style="background: #CDCDCD "></span> <b> Unreachable </b> </td>
<td> {$hosts.UNREACHABLE.value} </td>
<td> {$hosts.UNREACHABLE.acknowledged} </td>
<td> {$hosts.UNREACHABLE.downtime} </td>
<td> {$hosts.UNREACHABLE.percent} </td>
</tr>
<tr>
<td> <span class="ListColCenter state_badge" style="background:#2AD1D4 "></span> <b> Pending </b> </td>
<td> {$hosts.PENDING.value} </td>
<td> {$hosts.PENDING.acknowledged} </td>
<td> {$hosts.PENDING.downtime} </td>
<td> {$hosts.PENDING.percent} </td>
</tr>
</tbody>
</table>
{/if}</div>
</div>
<script>
{literal}
jQuery(function () {
c3.generate({
bindto: d3.select('#global_health_host_div'),
data: {
// iris data from R
columns: [
['Up', {/literal}{$hosts.UP.percent}{literal}],
['Down', {/literal}{$hosts.DOWN.percent}{literal}],
['Unreachable', {/literal}{$hosts.UNREACHABLE.percent}{literal}],
['Pending', {/literal}{$hosts.PENDING.percent}{literal}]
],
link : [
['Up','google.com'],
['Down','google.com'],
['Unreachable','google.com'],
['Pending','google.com'],
],
type : 'pie',
colors : {
'Up' : '#88b917',
'Down' : '#e00b3d',
'Unreachable' : '#0072ce',
'Pending' : '#bcbdc0'
}
},
legend: {
show: false
},
size: {
height: 180,
width: 290
}
});
{literal}
let UP = {/literal}{$hosts.UP.percent}{literal};
let DOWN = {/literal}{$hosts.DOWN.percent}{literal};
let UNREACHABLE = {/literal}{$hosts.UNREACHABLE.percent}{literal};
let PENDING = {/literal}{$hosts.PENDING.percent}{literal};
});
let options = {
chart: {
id:'hosts',
width:260,
type:'pie',
height:200,
},
legend: {
show:false,
position:'bottom',
},
responsive: [{
breakpoint:480,
options: {
chart: {
width:230
}
}
}],
dataLabels: {
style: {
fontSize:'12px',
fontFamily:'Arial, sans-serif',
colors:['#000000']
},
},
tooltip: {
fillSeriesColor: false,
},
plotOptions: {
pie: {
dataLabels: {
offset:0,
minAngleToShowLabel:25
},
},
},
labels:['Up', 'Down', 'Unreachable', 'Pending'],
series:[UP, DOWN, UNREACHABLE, PENDING],
colors:['#87BD23', '#ED1B23', '#CDCDCD','#2AD1D4']
};
//The legend appear when the user hide the table because the table include it originally
{/literal}{if $preferences.hide_table}
options.legend.show = true;
{/if}{literal}
{/literal}
</script>
\ No newline at end of file
const chart = new ApexCharts(
document.querySelector("#global_health_host_div"),
options
);
chart.render();
{/literal}
</script>
......@@ -7,104 +7,124 @@
{/literal}
</style>
<h3 style="text-align: center;" > Global health of Services </h3>
<div id="global_health_svc_div" style="text-align:center;display:inline-block;vertical-align: middle;"></div>
<div class="global_health_div_tab" style="display:inline-block;vertical-align: middle;" >
<table>
<thead>
<th>
</th>
<th>
<small>Number</small>
</th>
<th>
<small>Ack</small>
</th>
<th>
<small>DT</small>
</th>
<th>
<small>%</small>
</th>
</thead>
<tbody>
<tr>
<td> <span class="ListColCenter state_badge" style="background:#88b917"></span> <b> Ok </b> </td>
<td> {$services.OK.value} </td>
<td> {$services.OK.acknowledged} </td>
<td> {$services.OK.downtime} </td>
<td> {$services.OK.percent}</td>
</tr>
<tr>
<td> <span class="ListColCenter state_badge" style="background:#ff9a13"></span> <b> Warning </b> </td>
<td> {$services.WARNING.value} </td>
<td> {$services.WARNING.acknowledged} </td>
<td> {$services.WARNING.downtime} </td>
<td> {$services.WARNING.percent} </td>
</tr>
<tr>
<td> <span class="ListColCenter state_badge" style="background:#e00b3d"></span> <b> Critical </b> </td>
<td> {$services.CRITICAL.value} </td>
<td> {$services.CRITICAL.acknowledged}</td>
<td> {$services.CRITICAL.downtime}</td>
<td> {$services.CRITICAL.percent}</td>
</tr>
<tr>
<td> <span class="ListColCenter state_badge" style="background:#0072ce"></span> <b> Unknown </b> </td>
<td> {$services.UNKNOWN.value} </td>
<td> {$services.UNKNOWN.acknowledged} </td>
<td> {$services.UNKNOWN.downtime} </td>
<td> {$services.UNKNOWN.percent} </td>
</tr>
<tr>
<td> <span class="ListColCenter state_badge" style="background:#bcbdc0"></span> <b> Pending </b> </td>
<td> {$services.PENDING.value} </td>
<td> {$services.PENDING.acknowledged} </td>
<td> {$services.PENDING.downtime} </td>
<td> {$services.PENDING.percent} </td>
</tr>
</tbody>
</table>
<div id="container" style="text-align:center;">
<div id="global_health_svc_div" style="text-align:center;display:inline-block;vertical-align: middle;"></div>
{if $preferences.hide_table != 1}<div id="global_health_table_div" class="global_health_div_tab" style="display:inline-block;vertical-align: middle;" >
<table>
<thead>
<th>
</th>
<th>
<small>Number</small>
</th>
<th>
<small>Ack</small>
</th>
<th>
<small>DT</small>
</th>
<th>
<small>%</small>
</th>
</thead>
<tbody>
<tr>
<td> <span class="ListColCenter state_badge" style="background:#87BD23"></span> <b> Ok </b> </td>
<td> {$services.OK.value} </td>
<td> {$services.OK.acknowledged} </td>
<td> {$services.OK.downtime} </td>
<td> {$services.OK.percent}</td>
</tr>
<tr>
<td> <span class="ListColCenter state_badge" style="background:#FF4125"></span> <b> Warning </b> </td>
<td> {$services.WARNING.value} </td>
<td> {$services.WARNING.acknowledged} </td>
<td> {$services.WARNING.downtime} </td>
<td> {$services.WARNING.percent} </td>
</tr>
<tr>
<td> <span class="ListColCenter state_badge" style="background:#ED1B23"></span> <b> Critical </b> </td>
<td> {$services.CRITICAL.value} </td>
<td> {$services.CRITICAL.acknowledged}</td>
<td> {$services.CRITICAL.downtime}</td>
<td> {$services.CRITICAL.percent}</td>
</tr>
<tr>
<td> <span class="ListColCenter state_badge" style="background:#CDCDCD"></span> <b> Unknown </b> </td>
<td> {$services.UNKNOWN.value} </td>
<td> {$services.UNKNOWN.acknowledged} </td>
<td> {$services.UNKNOWN.downtime} </td>
<td> {$services.UNKNOWN.percent} </td>
</tr>
<tr>
<td> <span class="ListColCenter state_badge" style="background:#2AD1D4"></span> <b> Pending </b> </td>
<td> {$services.PENDING.value} </td>
<td> {$services.PENDING.acknowledged} </td>
<td> {$services.PENDING.downtime} </td>
<td> {$services.PENDING.percent} </td>
</tr>
</tbody>
</table>
{/if}</div>
</div>
<script>
{literal}
jQuery(function () {
c3.generate({
bindto: d3.select('#global_health_svc_div'),
data: {
// iris data from R
columns: [
['Ok', {/literal}{$services.OK.percent}{literal}],
['Warning', {/literal}{$services.WARNING.percent}{literal}],
['Critical', {/literal}{$services.CRITICAL.percent}{literal}],
['Unknown', {/literal}{$services.UNKNOWN.percent}{literal}],
['Pending', {/literal}{$services.PENDING.percent}{literal}]
],
type : 'pie',
colors : {
'Ok' : '#88b917',
'Warning' : '#ff9a13',
'Critical' : '#e00b3d',
'Unknown' : '#0072ce',
'Pending' : '#bcbdc0'
}
},
legend: {
show: false
},
size: {
height: 180,
width: 290
}
});
{literal}
let OK = {/literal}{$services.OK.percent}{literal};
let WARNING = {/literal}{$services.WARNING.percent}{literal};
let CRITICAL = {/literal}{$services.CRITICAL.percent}{literal};
let UNKNOWN = {/literal}{$services.UNKNOWN.percent}{literal};
let PENDING = {/literal}{$services.PENDING.percent}{literal};
});
let options = {
chart: {
id:'svc',
width:260,
type:'pie',
height:200,
},
legend: {
show:false,
position:'bottom'
},
responsive: [{
breakpoint:480,
options: {
chart: {
width:230
}
}
}],
dataLabels: {
style: {
fontSize:'12px',
fontFamily:'Arial, sans-serif',
colors:['#000000']
},
},
tooltip:{
fillSeriesColor: false,
},
plotOptions: {
pie: {
dataLabels: {
offset:0,
minAngleToShowLabel:25
},
},
},
labels:['Ok', 'Warning', 'Critical','Unknown', 'Pending'],
series:[OK, WARNING, CRITICAL,UNKNOWN, PENDING],
colors:['#87BD23','#FF4125', '#ED1B23', '#CDCDCD','#2AD1D4']
};
//The legend appear when the user hide the table because the table include it originally
{/literal}{if $preferences.hide_table}
options.legend.show = true;
{/if}{literal}
const chart = new ApexCharts(
document.querySelector("#global_health_svc_div"),
options
);
chart.render();
{/literal}
</script>
\ No newline at end of file
</script>
Supports Markdown
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment