mirror of
https://github.com/EDCD/EDDN.git
synced 2025-06-10 12:22:10 +03:00
Add drilldown to software monitor status
This commit is contained in:
AnthorNet
parent
c781fedfaa
commit
63561453ca
@ -241,7 +241,7 @@
|
|||||||
<table class="table">
|
<table class="table">
|
||||||
<thead>
|
<thead>
|
||||||
<tr>
|
<tr>
|
||||||
<th style="width: 20px;"></th>
|
<th style="width: 30px;"></th>
|
||||||
<th style="width: 50%;"></th>
|
<th style="width: 50%;"></th>
|
||||||
<th>Today hits</th>
|
<th>Today hits</th>
|
||||||
<th>Yesterday hits</th>
|
<th>Yesterday hits</th>
|
||||||
@ -389,6 +389,7 @@
|
|||||||
<!-- Include all compiled plugins (below), or include individual files as needed -->
|
<!-- Include all compiled plugins (below), or include individual files as needed -->
|
||||||
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
|
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
|
||||||
<script src="http://code.highcharts.com/4.1.5/highcharts.js"></script>
|
<script src="http://code.highcharts.com/4.1.5/highcharts.js"></script>
|
||||||
|
<script src="http://code.highcharts.com/4.1.5/modules/drilldown.js"></script>
|
||||||
<script src="./js/eddn.js"></script>
|
<script src="./js/eddn.js"></script>
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
@ -54,6 +54,11 @@ secondsToDurationString = function(seconds) {
|
|||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
|
var drillDownSoftware = false;
|
||||||
|
|
||||||
|
var softwaresTotal = {};
|
||||||
|
var softwaresVersion = {};
|
||||||
|
|
||||||
var doUpdateSoftwares = function()
|
var doUpdateSoftwares = function()
|
||||||
{
|
{
|
||||||
var dToday = new Date(),
|
var dToday = new Date(),
|
||||||
@ -69,15 +74,38 @@ var doUpdateSoftwares = function()
|
|||||||
$.ajax({
|
$.ajax({
|
||||||
dataType: "json",
|
dataType: "json",
|
||||||
url: monitorEndPoint + 'getTotalSoftwares/',
|
url: monitorEndPoint + 'getTotalSoftwares/',
|
||||||
success: function(softwaresTotal){
|
success: function(softwaresTotalData){
|
||||||
var chart = $('#softwares .chart').highcharts(),
|
var chart = $('#softwares .chart').highcharts(),
|
||||||
series = chart.get('softwares');
|
series = chart.get('softwares');
|
||||||
|
|
||||||
|
// Count total by software, all versions included
|
||||||
|
var softwareName = {};
|
||||||
|
$.each(softwaresTotalData, function(software, hits){
|
||||||
|
softwareSplit = software.split(' | ');
|
||||||
|
|
||||||
|
if(!softwareName[softwareSplit[0]])
|
||||||
|
softwareName[softwareSplit[0]] = [0,0, parseInt(hits)];
|
||||||
|
else
|
||||||
|
softwareName[softwareSplit[0]][2] += parseInt(hits);
|
||||||
|
|
||||||
|
softwareName[softwareSplit[0]][0] += parseInt(softwares[today][software] || 0);
|
||||||
|
softwareName[softwareSplit[0]][1] += parseInt(softwares[yesterday][software] || 0);
|
||||||
|
});
|
||||||
|
|
||||||
|
// Sort by total DESC
|
||||||
|
var tmp = new Array();
|
||||||
|
$.each(softwareName, function(software, hits){ tmp.push({name: software, today: hits[0], yesterday: hits[1], total: hits[2]}); });
|
||||||
|
tmp.sort(function(a,b) { return b.total - a.total; });
|
||||||
|
softwaresTotal = tmp;
|
||||||
|
|
||||||
$('#softwares .table tbody').empty();
|
$('#softwares .table tbody').empty();
|
||||||
|
|
||||||
$.each(softwaresTotal, function(software, hits){
|
// Prepare drilldowns
|
||||||
|
$.each(softwaresTotalData, function(software, hits){
|
||||||
|
softwareSplit = software.split(' | ');
|
||||||
|
|
||||||
$('#softwares .table tbody').append(
|
$('#softwares .table tbody').append(
|
||||||
newTr = $('<tr>').attr('data-name', software).on('mouseover', function(){
|
newTr = $('<tr>').attr('data-type', 'drilldown').attr('data-parent', softwareSplit[0]).attr('data-name', software).on('mouseover', function(){
|
||||||
chart.get('software-' + makeSlug(software)).setState('hover');
|
chart.get('software-' + makeSlug(software)).setState('hover');
|
||||||
chart.tooltip.refresh(chart.get('software-' + makeSlug(software)));
|
chart.tooltip.refresh(chart.get('software-' + makeSlug(software)));
|
||||||
}).on('mouseout', function(){
|
}).on('mouseout', function(){
|
||||||
@ -86,7 +114,7 @@ var doUpdateSoftwares = function()
|
|||||||
}).append(
|
}).append(
|
||||||
$('<td>').addClass('square')
|
$('<td>').addClass('square')
|
||||||
).append(
|
).append(
|
||||||
$('<td>').html('<strong>' + software + '</strong>')
|
$('<td>').html('<strong>' + softwareSplit[1] + '</strong>')
|
||||||
)
|
)
|
||||||
.append(
|
.append(
|
||||||
$('<td>').addClass('stat today').html(formatNumber(softwares[today][software] || 0))
|
$('<td>').addClass('stat today').html(formatNumber(softwares[today][software] || 0))
|
||||||
@ -96,15 +124,99 @@ var doUpdateSoftwares = function()
|
|||||||
)
|
)
|
||||||
.append(
|
.append(
|
||||||
$('<td>').addClass('stat total').html('<strong>' + formatNumber(hits) + '</strong>')
|
$('<td>').addClass('stat total').html('<strong>' + formatNumber(hits) + '</strong>')
|
||||||
|
).hide()
|
||||||
|
);
|
||||||
|
|
||||||
|
if(!softwaresVersion[softwareSplit[0]])
|
||||||
|
softwaresVersion[softwareSplit[0]] = {};
|
||||||
|
if(!softwaresVersion[softwareSplit[0]][software])
|
||||||
|
softwaresVersion[softwareSplit[0]][software] = {
|
||||||
|
today: (softwares[today][software] || 0), yesterday: (softwares[yesterday][software] || 0), total: hits
|
||||||
|
};
|
||||||
|
});
|
||||||
|
|
||||||
|
// Add main softwares
|
||||||
|
$.each(softwaresTotal, function(key, values){
|
||||||
|
$('#softwares .table tbody').append(
|
||||||
|
newTr = $('<tr>').attr('data-type', 'parent').attr('data-name', values.name).on('click', function(event){
|
||||||
|
event.stopImmediatePropagation();
|
||||||
|
currentSoftware = $(this).attr('data-name');
|
||||||
|
|
||||||
|
if(!drillDownSoftware)
|
||||||
|
{
|
||||||
|
$('#softwares .table thead th:eq(0)').html('<span class="glyphicon glyphicon-remove" aria-hidden="true"></span>')
|
||||||
|
.css('cursor','pointer')
|
||||||
|
.on('click', function(){
|
||||||
|
chart.showDrillUpButton();
|
||||||
|
$('#softwares .table thead th:eq(0)').html('');
|
||||||
|
$('#softwares .table thead th:eq(1)').html('');
|
||||||
|
$('#softwares .table tbody tr[data-type=parent]').show();
|
||||||
|
$('#softwares .table tbody tr[data-type=drilldown]').hide();
|
||||||
|
drillDownSoftware = !drillDownSoftware;
|
||||||
|
chart.drillUp();
|
||||||
|
});
|
||||||
|
$('#softwares .table thead th:eq(1)').html(currentSoftware);
|
||||||
|
$('#softwares .table tbody tr[data-type=parent]').hide();
|
||||||
|
$('#softwares .table tbody tr[data-type=drilldown][data-parent="' + currentSoftware + '"').show();
|
||||||
|
|
||||||
|
var currentData = [];
|
||||||
|
|
||||||
|
$.each(softwaresVersion[currentSoftware], function(key, value){
|
||||||
|
currentData.push({
|
||||||
|
id: 'software-' + makeSlug(key),
|
||||||
|
name: key,
|
||||||
|
y: parseInt(value.total)
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
|
chart.addSeriesAsDrilldown(chart.get('software-' + makeSlug(currentSoftware)), {
|
||||||
|
id: 'softwareDrilldown-' + makeSlug(currentSoftware),
|
||||||
|
type: 'pie',
|
||||||
|
name: currentSoftware,
|
||||||
|
data: currentData
|
||||||
|
});
|
||||||
|
chart.redraw();
|
||||||
|
|
||||||
|
if(chart.drillUpButton)
|
||||||
|
chart.drillUpButton = chart.drillUpButton.destroy();
|
||||||
|
|
||||||
|
$('#softwares .table tbody tr[data-type=drilldown][data-parent="' + currentSoftware + '"').each(function(){
|
||||||
|
$(this).find('.square').css('background', chart.get('software-' + makeSlug($(this).attr('data-name'))).color);
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
drillDownSoftware = !drillDownSoftware;
|
||||||
|
}).on('mouseover', function(){
|
||||||
|
chart.get('software-' + makeSlug(values.name)).setState('hover');
|
||||||
|
chart.tooltip.refresh(chart.get('software-' + makeSlug(values.name)));
|
||||||
|
}).on('mouseout', function(){
|
||||||
|
if(chart.get('software-' + makeSlug(values.name)))
|
||||||
|
chart.get('software-' + makeSlug(values.name)).setState('');
|
||||||
|
chart.tooltip.hide();
|
||||||
|
}).append(
|
||||||
|
$('<td>').addClass('square')
|
||||||
|
).append(
|
||||||
|
$('<td>').html('<strong>' + values.name + '</strong>').css('cursor','pointer')
|
||||||
|
)
|
||||||
|
.append(
|
||||||
|
$('<td>').addClass('stat today').html(formatNumber(values.today || 0))
|
||||||
|
)
|
||||||
|
.append(
|
||||||
|
$('<td>').addClass('stat yesterday').html(formatNumber(values.yesterday || 0))
|
||||||
|
)
|
||||||
|
.append(
|
||||||
|
$('<td>').addClass('stat total').html('<strong>' + formatNumber(values.total) + '</strong>')
|
||||||
)
|
)
|
||||||
);
|
);
|
||||||
|
|
||||||
if(!chart.get('software-' + makeSlug(software)))
|
if(!chart.get('software-' + makeSlug(values.name)))
|
||||||
series.addPoint({id: 'software-' + makeSlug(software), name: software, y: parseInt(hits)}, false);
|
{
|
||||||
|
series.addPoint({id: 'software-' + makeSlug(values.name), name: values.name, y: parseInt(values.total), drilldown: true}, false);
|
||||||
|
}
|
||||||
else
|
else
|
||||||
chart.get('software-' + makeSlug(software)).update(parseInt(hits), false);
|
chart.get('software-' + makeSlug(values.name)).update(parseInt(values.total), false);
|
||||||
|
|
||||||
newTr.find('.square').css('background', chart.get('software-' + makeSlug(software)).color);
|
newTr.find('.square').css('background', chart.get('software-' + makeSlug(values.name)).color);
|
||||||
});
|
});
|
||||||
|
|
||||||
chart.redraw();
|
chart.redraw();
|
||||||
@ -467,6 +579,7 @@ var start = function(){
|
|||||||
plotOptions: {pie: {allowPointSelect: false,dataLabels: { enabled: false }}},
|
plotOptions: {pie: {allowPointSelect: false,dataLabels: { enabled: false }}},
|
||||||
series: [{
|
series: [{
|
||||||
id: 'softwares',
|
id: 'softwares',
|
||||||
|
name: 'Softwares',
|
||||||
type: 'pie',
|
type: 'pie',
|
||||||
data: []
|
data: []
|
||||||
}]
|
}]
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user