808 lines
17 KiB
JavaScript
808 lines
17 KiB
JavaScript
|
jQuery(document).ready(function($) {
|
||
|
|
var lastData;
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
function load() {
|
||
|
|
top_object = $('.ustats_top');
|
||
|
|
$('.ustats_loading').removeClass('w3tc_hidden');
|
||
|
|
$('.ustats_content').addClass('w3tc_hidden');
|
||
|
|
$('.ustats_error').addClass('w3tc_none');
|
||
|
|
$('.ustats_nodata').addClass('w3tc_none');
|
||
|
|
|
||
|
|
$.getJSON(ajaxurl + '?action=w3tc_ajax&_wpnonce=' + w3tc_nonce +
|
||
|
|
'&w3tc_action=ustats_get',
|
||
|
|
function(data) {
|
||
|
|
lastData = data;
|
||
|
|
|
||
|
|
// show sections with data
|
||
|
|
for (p in data) {
|
||
|
|
var v = data[p];
|
||
|
|
jQuery('.ustats_' + p).css('display', 'flex');
|
||
|
|
}
|
||
|
|
|
||
|
|
setValues(data, 'ustats_');
|
||
|
|
|
||
|
|
if (data.period.seconds)
|
||
|
|
$('.ustats_content').removeClass('w3tc_hidden');
|
||
|
|
else
|
||
|
|
$('.ustats_nodata').removeClass('w3tc_none');
|
||
|
|
|
||
|
|
$('.ustats_loading').addClass('w3tc_hidden');
|
||
|
|
|
||
|
|
setCharts(data);
|
||
|
|
|
||
|
|
setRefresh(
|
||
|
|
(data && data.period ? data.period.to_update_secs : 0));
|
||
|
|
|
||
|
|
showMetaboxes();
|
||
|
|
}
|
||
|
|
).fail(function() {
|
||
|
|
$('.ustats_error').removeClass('w3tc_none');
|
||
|
|
$('.ustats_content').addClass('w3tc_hidden');
|
||
|
|
$('.ustats_loading').addClass('w3tc_hidden');
|
||
|
|
});
|
||
|
|
}
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
//
|
||
|
|
// chart commons
|
||
|
|
//
|
||
|
|
var chartOptions = {
|
||
|
|
//aspectRatio: 4,
|
||
|
|
maintainAspectRatio: false,
|
||
|
|
animation: false,
|
||
|
|
legend: false,
|
||
|
|
scales: {
|
||
|
|
yAxes: [{
|
||
|
|
ticks: {
|
||
|
|
beginAtZero: true
|
||
|
|
}
|
||
|
|
}]
|
||
|
|
}
|
||
|
|
};
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
var chartDateLabels = [];
|
||
|
|
var chartGraphValues = {};
|
||
|
|
var charts = {};
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
function setCharts(data) {
|
||
|
|
// collect functors that prepare data for their own chart
|
||
|
|
var processors = [];
|
||
|
|
processors.push(setChartsPageCache());
|
||
|
|
processors.push(setChartsDb());
|
||
|
|
processors.push(setChartsOc());
|
||
|
|
processors.push(setChartsPhp());
|
||
|
|
processors.push(setChartsCpu());
|
||
|
|
processors.push(setChartsWpdb());
|
||
|
|
processors.push(setChartsAccessLog());
|
||
|
|
processors.push(setChartsMemcached());
|
||
|
|
processors.push(setChartsRedis());
|
||
|
|
processors.push(setChartsApc());
|
||
|
|
|
||
|
|
// prepare collections
|
||
|
|
var columnsToCollect = [];
|
||
|
|
|
||
|
|
for (var i = 0; i < processors.length; i++) {
|
||
|
|
for (var id in processors[i].chartDatasets) {
|
||
|
|
var datasets = [];
|
||
|
|
for (var i2 = 0; i2 < processors[i].chartDatasets[id].length; i2++) {
|
||
|
|
var datasetTemplate = processors[i].chartDatasets[id][i2];
|
||
|
|
var dataColumnString;
|
||
|
|
if (Array.isArray(datasetTemplate.dataColumn)) {
|
||
|
|
dataColumnString = datasetTemplate.dataColumn.join('.');
|
||
|
|
} else {
|
||
|
|
dataColumnString = datasetTemplate.dataColumn;
|
||
|
|
}
|
||
|
|
|
||
|
|
chartGraphValues[dataColumnString] = [];
|
||
|
|
columnsToCollect.push({
|
||
|
|
target: dataColumnString,
|
||
|
|
column: datasetTemplate.dataColumn
|
||
|
|
});
|
||
|
|
datasets.push({
|
||
|
|
label: datasetTemplate.label,
|
||
|
|
data: chartGraphValues[dataColumnString],
|
||
|
|
backgroundColor: datasetTemplate.backgroundColor
|
||
|
|
});
|
||
|
|
}
|
||
|
|
|
||
|
|
charts[id].data.datasets = datasets;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
// collect data for charts
|
||
|
|
var history = data.history;
|
||
|
|
chartDateLabels.length = 0;
|
||
|
|
for (var i = 0; i < history.length; i++) {
|
||
|
|
var historyItem = history[i];
|
||
|
|
var dateFormatted = '';
|
||
|
|
if (history[i].timestamp_start) {
|
||
|
|
var d = new Date(parseInt(history[i].timestamp_start) * 1000);
|
||
|
|
dateFormatted = dateFormat(d);
|
||
|
|
}
|
||
|
|
|
||
|
|
chartDateLabels.push(dateFormatted);
|
||
|
|
|
||
|
|
// custom preprocess history row
|
||
|
|
for (var i2 = 0; i2 < processors.length; i2++) {
|
||
|
|
if (processors[i2].preprocess) {
|
||
|
|
processors[i2].preprocess(historyItem);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
// collect metrics for graphs
|
||
|
|
for (var i2 = 0; i2 < columnsToCollect.length; i2++) {
|
||
|
|
var c = columnsToCollect[i2];
|
||
|
|
var v;
|
||
|
|
if (Array.isArray(c.column)) {
|
||
|
|
if (v = historyItem[c.column[0]]) {
|
||
|
|
v = historyItem[c.column[0]][c.column[1]];
|
||
|
|
}
|
||
|
|
} else {
|
||
|
|
v = historyItem[c.column];
|
||
|
|
}
|
||
|
|
|
||
|
|
chartGraphValues[c.target].push(v);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
// visualize
|
||
|
|
for (var c in charts) {
|
||
|
|
charts[c].update();
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
$('.w3tcus_chart_check').click(function() {
|
||
|
|
setCharts(lastData);
|
||
|
|
});
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
//
|
||
|
|
// PageCache chart
|
||
|
|
//
|
||
|
|
function setChartsPageCache() {
|
||
|
|
if (!charts['pagecache']) {
|
||
|
|
var ctx = $('#w3tcus_pagecache_chart');
|
||
|
|
charts['pagecache'] = new Chart(ctx, {
|
||
|
|
type: 'bar',
|
||
|
|
data: {
|
||
|
|
labels: chartDateLabels,
|
||
|
|
},
|
||
|
|
options: chartOptions
|
||
|
|
});
|
||
|
|
}
|
||
|
|
|
||
|
|
|
||
|
|
return {
|
||
|
|
chartDatasets: {
|
||
|
|
pagecache: [{
|
||
|
|
label: 'Time (ms)',
|
||
|
|
dataColumn: 'pagecache_requests_time_ms',
|
||
|
|
backgroundColor: '#0073aa'
|
||
|
|
}
|
||
|
|
]
|
||
|
|
},
|
||
|
|
preprocess: function(historyItem) {
|
||
|
|
v = 0;
|
||
|
|
if (historyItem.pagecache_requests_time_10ms && historyItem.php_requests) {
|
||
|
|
v = ((historyItem.pagecache_requests_time_10ms * 10) /
|
||
|
|
historyItem.php_requests).toFixed(0);
|
||
|
|
}
|
||
|
|
historyItem.pagecache_requests_time_ms = v;
|
||
|
|
}
|
||
|
|
};
|
||
|
|
}
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
//
|
||
|
|
// Database chart
|
||
|
|
//
|
||
|
|
function setChartsDb() {
|
||
|
|
if (!charts['db']) {
|
||
|
|
var ctx = $('#w3tcus_dbcache_chart');
|
||
|
|
charts['db'] = new Chart(ctx, {
|
||
|
|
type: 'bar',
|
||
|
|
data: {
|
||
|
|
labels: chartDateLabels,
|
||
|
|
},
|
||
|
|
options: chartOptions
|
||
|
|
});
|
||
|
|
|
||
|
|
var ctx = $('#w3tcus_dbcache_time_chart');
|
||
|
|
charts['db_time'] = new Chart(ctx, {
|
||
|
|
type: 'bar',
|
||
|
|
data: {
|
||
|
|
labels: chartDateLabels,
|
||
|
|
},
|
||
|
|
options: chartOptions
|
||
|
|
});
|
||
|
|
}
|
||
|
|
|
||
|
|
|
||
|
|
return {
|
||
|
|
chartDatasets: {
|
||
|
|
db_time: [{
|
||
|
|
label: 'Time (ms)',
|
||
|
|
dataColumn: 'dbcache_time_ms',
|
||
|
|
backgroundColor: '#0073aa'
|
||
|
|
}
|
||
|
|
],
|
||
|
|
db: [{
|
||
|
|
label: 'Calls',
|
||
|
|
dataColumn: 'dbcache_calls_total',
|
||
|
|
backgroundColor: '#0073aa'
|
||
|
|
}, {
|
||
|
|
label: 'Hits',
|
||
|
|
dataColumn: 'dbcache_calls_hits',
|
||
|
|
backgroundColor: 'green'
|
||
|
|
}
|
||
|
|
]
|
||
|
|
}
|
||
|
|
};
|
||
|
|
}
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
//
|
||
|
|
// OC chart
|
||
|
|
//
|
||
|
|
function setChartsOc(data) {
|
||
|
|
if (!charts['oc']) {
|
||
|
|
var ctx = $('#w3tcus_objectcache_chart');
|
||
|
|
charts['oc'] = new Chart(ctx, {
|
||
|
|
type: 'bar',
|
||
|
|
data: {
|
||
|
|
labels: chartDateLabels
|
||
|
|
},
|
||
|
|
options: chartOptions
|
||
|
|
});
|
||
|
|
|
||
|
|
var ctx = $('#w3tcus_objectcache_time_chart');
|
||
|
|
charts['oc_time'] = new Chart(ctx, {
|
||
|
|
type: 'bar',
|
||
|
|
data: {
|
||
|
|
labels: chartDateLabels
|
||
|
|
},
|
||
|
|
options: chartOptions
|
||
|
|
});
|
||
|
|
}
|
||
|
|
|
||
|
|
return {
|
||
|
|
chartDatasets: {
|
||
|
|
oc_time: [{
|
||
|
|
label: 'Time (ms)',
|
||
|
|
dataColumn: 'objectcache_time_ms',
|
||
|
|
backgroundColor: '#0073aa'
|
||
|
|
}
|
||
|
|
],
|
||
|
|
oc: [{
|
||
|
|
label: 'Gets',
|
||
|
|
dataColumn: 'objectcache_get_total',
|
||
|
|
backgroundColor: '#0073aa'
|
||
|
|
}, {
|
||
|
|
label: 'Hits',
|
||
|
|
dataColumn: 'objectcache_get_hits',
|
||
|
|
backgroundColor: 'green'
|
||
|
|
}, {
|
||
|
|
label: 'Sets',
|
||
|
|
dataColumn: 'objectcache_sets',
|
||
|
|
backgroundColor: 'red'
|
||
|
|
}
|
||
|
|
]
|
||
|
|
}
|
||
|
|
};
|
||
|
|
}
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
//
|
||
|
|
// PHP chart
|
||
|
|
//
|
||
|
|
function setChartsPhp(data) {
|
||
|
|
if (!charts['phpMemory']) {
|
||
|
|
var ctx = $('#w3tcus_php_memory_chart');
|
||
|
|
charts['phpMemory'] = new Chart(ctx, {
|
||
|
|
type: 'bar',
|
||
|
|
data: {
|
||
|
|
labels: chartDateLabels,
|
||
|
|
},
|
||
|
|
options: chartOptions
|
||
|
|
});
|
||
|
|
}
|
||
|
|
if (!charts['phpRequests']) {
|
||
|
|
var ctx = $('#w3tcus_php_requests_chart');
|
||
|
|
charts['phpRequests'] = new Chart(ctx, {
|
||
|
|
type: 'bar',
|
||
|
|
data: {
|
||
|
|
labels: chartDateLabels
|
||
|
|
},
|
||
|
|
options: chartOptions
|
||
|
|
});
|
||
|
|
}
|
||
|
|
|
||
|
|
var phpRequestsDatasets = [];
|
||
|
|
$('.w3tcus_chart_check').each(function() {
|
||
|
|
if ($(this).is(':checked')) {
|
||
|
|
var dataColumn = $(this).data('column');
|
||
|
|
var backgroundColor = $(this).data('background');
|
||
|
|
if (!backgroundColor) {
|
||
|
|
backgroundColor = '#0073aa';
|
||
|
|
}
|
||
|
|
|
||
|
|
if (startsWith(dataColumn, 'php_php_requests')) {
|
||
|
|
phpRequestsDatasets.push({
|
||
|
|
label: $(this).data('name'),
|
||
|
|
dataColumn: dataColumn.substr(4),
|
||
|
|
backgroundColor: backgroundColor
|
||
|
|
});
|
||
|
|
}
|
||
|
|
}
|
||
|
|
});
|
||
|
|
|
||
|
|
return {
|
||
|
|
chartDatasets: {
|
||
|
|
phpMemory: [{
|
||
|
|
label: 'MB',
|
||
|
|
dataColumn: 'php_memory_mb',
|
||
|
|
backgroundColor: '#0073aa'
|
||
|
|
}
|
||
|
|
],
|
||
|
|
phpRequests: phpRequestsDatasets
|
||
|
|
},
|
||
|
|
preprocess: function(historyItem) {
|
||
|
|
var v = 0;
|
||
|
|
if (historyItem.php_requests) {
|
||
|
|
v = (historyItem.php_memory_100kb / 100.0 / historyItem.php_requests).toFixed(2)
|
||
|
|
}
|
||
|
|
historyItem.php_memory_mb = v;
|
||
|
|
|
||
|
|
historyItem.php_requests_pagecache_miss =
|
||
|
|
historyItem.php_requests - historyItem.php_requests_pagecache_hit;
|
||
|
|
}
|
||
|
|
};
|
||
|
|
}
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
//
|
||
|
|
// CPU chart
|
||
|
|
//
|
||
|
|
function setChartsCpu(data) {
|
||
|
|
if (!charts['cpu']) {
|
||
|
|
var ctx = $('#w3tcus_cpu_chart');
|
||
|
|
charts['cpu'] = new Chart(ctx, {
|
||
|
|
type: 'bar',
|
||
|
|
data: {
|
||
|
|
labels: chartDateLabels,
|
||
|
|
},
|
||
|
|
options: chartOptions
|
||
|
|
});
|
||
|
|
}
|
||
|
|
|
||
|
|
return {
|
||
|
|
chartDatasets: {
|
||
|
|
cpu: [{
|
||
|
|
label: 'CPU',
|
||
|
|
dataColumn: 'cpu',
|
||
|
|
backgroundColor: '#0073aa'
|
||
|
|
}
|
||
|
|
]
|
||
|
|
}
|
||
|
|
};
|
||
|
|
}
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
//
|
||
|
|
// WPDB chart
|
||
|
|
//
|
||
|
|
function setChartsWpdb(data) {
|
||
|
|
if (!charts['wpdb']) {
|
||
|
|
var ctx = $('#w3tcus_wpdb_chart');
|
||
|
|
charts['wpdb'] = new Chart(ctx, {
|
||
|
|
type: 'bar',
|
||
|
|
data: {
|
||
|
|
labels: chartDateLabels,
|
||
|
|
},
|
||
|
|
options: chartOptions
|
||
|
|
});
|
||
|
|
}
|
||
|
|
|
||
|
|
return {
|
||
|
|
chartDatasets: {
|
||
|
|
wpdb: [{
|
||
|
|
label: 'Total',
|
||
|
|
dataColumn: 'wpdb_calls_total',
|
||
|
|
backgroundColor: '#0073aa'
|
||
|
|
}]
|
||
|
|
}
|
||
|
|
};
|
||
|
|
}
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
//
|
||
|
|
// Access Log chart
|
||
|
|
//
|
||
|
|
function setChartsAccessLog(data) {
|
||
|
|
if (!charts['accessLogRequests']) {
|
||
|
|
var ctx = $('#w3tcus_access_log_chart_requests');
|
||
|
|
charts['accessLogRequests'] = new Chart(ctx, {
|
||
|
|
type: 'bar',
|
||
|
|
data: {
|
||
|
|
labels: chartDateLabels,
|
||
|
|
},
|
||
|
|
options: chartOptions
|
||
|
|
});
|
||
|
|
}
|
||
|
|
if (!charts['accessLogTiming']) {
|
||
|
|
var ctx = $('#w3tcus_access_log_chart_timing');
|
||
|
|
charts['accessLogTiming'] = new Chart(ctx, {
|
||
|
|
type: 'bar',
|
||
|
|
data: {
|
||
|
|
labels: chartDateLabels
|
||
|
|
},
|
||
|
|
options: chartOptions
|
||
|
|
});
|
||
|
|
}
|
||
|
|
|
||
|
|
return {
|
||
|
|
chartDatasets: {
|
||
|
|
accessLogRequests: [{
|
||
|
|
label: 'Dynamic',
|
||
|
|
dataColumn: ['access_log', 'dynamic_count'],
|
||
|
|
backgroundColor: '#0073aa'
|
||
|
|
}, {
|
||
|
|
label: 'Static',
|
||
|
|
dataColumn: ['access_log', 'static_count'],
|
||
|
|
backgroundColor: '#0073aa'
|
||
|
|
}
|
||
|
|
],
|
||
|
|
accessLogTiming: [{
|
||
|
|
label: 'Dynamic',
|
||
|
|
dataColumn: ['access_log', 'dynamic_timing'],
|
||
|
|
backgroundColor: '#0073aa'
|
||
|
|
}, {
|
||
|
|
label: 'Static',
|
||
|
|
dataColumn: ['access_log', 'static_timing'],
|
||
|
|
backgroundColor: '#0073aa'
|
||
|
|
}
|
||
|
|
]
|
||
|
|
},
|
||
|
|
preprocess: function(historyItem) {
|
||
|
|
var dc = 0, sc = 0, dt = 0, st = 0;
|
||
|
|
if (historyItem.access_log) {
|
||
|
|
var a = historyItem.access_log;
|
||
|
|
dc = a.dynamic_count;
|
||
|
|
if (dc) {
|
||
|
|
dt = (a.dynamic_timetaken_ms / dc).toFixed(2);
|
||
|
|
}
|
||
|
|
|
||
|
|
sc = a.static_count;
|
||
|
|
if (sc) {
|
||
|
|
st = (a.static_timetaken_ms / dc).toFixed(2);
|
||
|
|
}
|
||
|
|
|
||
|
|
historyItem['access_log']['dynamic_timing'] = dt;
|
||
|
|
historyItem['access_log']['static_timing'] = st;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
};
|
||
|
|
}
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
//
|
||
|
|
// Memcached chart
|
||
|
|
//
|
||
|
|
function setChartsMemcached(data) {
|
||
|
|
if (!charts['memcachedSize']) {
|
||
|
|
var ctx = $('#w3tcus_memcached_size_chart');
|
||
|
|
charts['memcachedSize'] = new Chart(ctx, {
|
||
|
|
type: 'bar',
|
||
|
|
data: {
|
||
|
|
labels: chartDateLabels
|
||
|
|
},
|
||
|
|
options: chartOptions
|
||
|
|
});
|
||
|
|
}
|
||
|
|
|
||
|
|
if (!charts['memcachedHit']) {
|
||
|
|
var ctx = $('#w3tcus_memcached_hit_chart');
|
||
|
|
charts['memcachedHit'] = new Chart(ctx, {
|
||
|
|
type: 'bar',
|
||
|
|
data: {
|
||
|
|
labels: chartDateLabels
|
||
|
|
},
|
||
|
|
options: chartOptions
|
||
|
|
});
|
||
|
|
}
|
||
|
|
|
||
|
|
var prevCalls = -1;
|
||
|
|
var prevHits = -1;
|
||
|
|
|
||
|
|
return {
|
||
|
|
chartDatasets: {
|
||
|
|
memcachedSize: [{
|
||
|
|
label: 'MB',
|
||
|
|
dataColumn: 'memcached_size_mb',
|
||
|
|
backgroundColor: '#0073aa'
|
||
|
|
}],
|
||
|
|
memcachedHit: [{
|
||
|
|
label: 'Calls',
|
||
|
|
dataColumn: 'memcached_requests_total',
|
||
|
|
backgroundColor: '#0073aa'
|
||
|
|
}, {
|
||
|
|
label: 'Hits',
|
||
|
|
dataColumn: 'memcached_requests_hits',
|
||
|
|
backgroundColor: 'green'
|
||
|
|
}
|
||
|
|
]
|
||
|
|
},
|
||
|
|
preprocess: function(historyItem) {
|
||
|
|
var size = 0;
|
||
|
|
var calls = 0;
|
||
|
|
var hits = 0;
|
||
|
|
if (historyItem.memcached && historyItem.memcached.size_used) {
|
||
|
|
size = (historyItem.memcached.size_used / 1024.0 / 1024.0).toFixed(2);
|
||
|
|
if (prevCalls >= 0 && historyItem.memcached.get_calls >= prevCalls) {
|
||
|
|
calls = historyItem.memcached.get_calls - prevCalls;
|
||
|
|
hits = historyItem.memcached.get_hits - prevHits;
|
||
|
|
}
|
||
|
|
|
||
|
|
if (calls > 10000) {
|
||
|
|
calls = 0;
|
||
|
|
hits = 0;
|
||
|
|
}
|
||
|
|
prevCalls = historyItem.memcached.get_calls;
|
||
|
|
prevHits = historyItem.memcached.get_hits;
|
||
|
|
}
|
||
|
|
|
||
|
|
historyItem.memcached_size_mb = size;
|
||
|
|
historyItem.memcached_requests_total = calls;
|
||
|
|
historyItem.memcached_requests_hits = hits;
|
||
|
|
}
|
||
|
|
};
|
||
|
|
}
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
//
|
||
|
|
// Redis chart
|
||
|
|
//
|
||
|
|
function setChartsRedis(data) {
|
||
|
|
if (!charts['redisSize']) {
|
||
|
|
var ctx = $('#w3tcus_redis_size_chart');
|
||
|
|
charts['redisSize'] = new Chart(ctx, {
|
||
|
|
type: 'bar',
|
||
|
|
data: {
|
||
|
|
labels: chartDateLabels
|
||
|
|
},
|
||
|
|
options: chartOptions
|
||
|
|
});
|
||
|
|
}
|
||
|
|
|
||
|
|
if (!charts['redisHit']) {
|
||
|
|
var ctx = $('#w3tcus_redis_hit_chart');
|
||
|
|
charts['redisHit'] = new Chart(ctx, {
|
||
|
|
type: 'bar',
|
||
|
|
data: {
|
||
|
|
labels: chartDateLabels
|
||
|
|
},
|
||
|
|
options: chartOptions
|
||
|
|
});
|
||
|
|
}
|
||
|
|
|
||
|
|
var prevCalls = -1;
|
||
|
|
var prevHits = -1;
|
||
|
|
|
||
|
|
return {
|
||
|
|
chartDatasets: {
|
||
|
|
redisSize: [{
|
||
|
|
label: 'MB',
|
||
|
|
dataColumn: 'redis_size_mb',
|
||
|
|
backgroundColor: '#0073aa'
|
||
|
|
}],
|
||
|
|
redisHit: [{
|
||
|
|
label: 'Calls',
|
||
|
|
dataColumn: 'redis_requests_total',
|
||
|
|
backgroundColor: '#0073aa'
|
||
|
|
}, {
|
||
|
|
label: 'Hits',
|
||
|
|
dataColumn: 'redis_requests_hits',
|
||
|
|
backgroundColor: 'green'
|
||
|
|
}
|
||
|
|
]
|
||
|
|
},
|
||
|
|
preprocess: function(historyItem) {
|
||
|
|
var size = 0;
|
||
|
|
var calls = 0;
|
||
|
|
var hits = 0;
|
||
|
|
if (historyItem.redis && historyItem.redis.size_used) {
|
||
|
|
size = (historyItem.redis.size_used / 1024.0 / 1024.0).toFixed(2);
|
||
|
|
if (prevCalls >= 0 && historyItem.redis.get_calls >= prevCalls) {
|
||
|
|
calls = historyItem.redis.get_calls - prevCalls;
|
||
|
|
hits = historyItem.redis.get_hits - prevHits;
|
||
|
|
}
|
||
|
|
|
||
|
|
if (calls > 10000) {
|
||
|
|
calls = 0;
|
||
|
|
hits = 0;
|
||
|
|
}
|
||
|
|
prevCalls = historyItem.redis.get_calls;
|
||
|
|
prevHits = historyItem.redis.get_hits;
|
||
|
|
}
|
||
|
|
|
||
|
|
historyItem.redis_size_mb = size;
|
||
|
|
historyItem.redis_requests_total = calls;
|
||
|
|
historyItem.redis_requests_hits = hits;
|
||
|
|
}
|
||
|
|
};
|
||
|
|
}
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
//
|
||
|
|
// APC chart
|
||
|
|
//
|
||
|
|
function setChartsApc(data) {
|
||
|
|
if (!charts['apcSize']) {
|
||
|
|
var ctx = $('#w3tcus_apc_size_chart');
|
||
|
|
charts['apcSize'] = new Chart(ctx, {
|
||
|
|
type: 'bar',
|
||
|
|
data: {
|
||
|
|
labels: chartDateLabels
|
||
|
|
},
|
||
|
|
options: chartOptions
|
||
|
|
});
|
||
|
|
}
|
||
|
|
|
||
|
|
if (!charts['apcHit']) {
|
||
|
|
var ctx = $('#w3tcus_apc_hit_chart');
|
||
|
|
charts['apcHit'] = new Chart(ctx, {
|
||
|
|
type: 'bar',
|
||
|
|
data: {
|
||
|
|
labels: chartDateLabels
|
||
|
|
},
|
||
|
|
options: chartOptions
|
||
|
|
});
|
||
|
|
}
|
||
|
|
|
||
|
|
var prevCalls = -1;
|
||
|
|
var prevHits = -1;
|
||
|
|
|
||
|
|
return {
|
||
|
|
chartDatasets: {
|
||
|
|
apcSize: [{
|
||
|
|
label: 'MB',
|
||
|
|
dataColumn: 'apc_size_mb',
|
||
|
|
backgroundColor: '#0073aa'
|
||
|
|
}],
|
||
|
|
apcHit: [{
|
||
|
|
label: 'Calls',
|
||
|
|
dataColumn: 'apc_requests_total',
|
||
|
|
backgroundColor: '#0073aa'
|
||
|
|
}, {
|
||
|
|
label: 'Hits',
|
||
|
|
dataColumn: 'apc_requests_hits',
|
||
|
|
backgroundColor: 'green'
|
||
|
|
}
|
||
|
|
]
|
||
|
|
},
|
||
|
|
preprocess: function(historyItem) {
|
||
|
|
var size = 0;
|
||
|
|
var calls = 0;
|
||
|
|
var hits = 0;
|
||
|
|
if (historyItem.apc && historyItem.apc.size_used) {
|
||
|
|
size = (historyItem.apc.size_used / 1024.0 / 1024.0).toFixed(2);
|
||
|
|
if (prevCalls >= 0 && historyItem.apc.get_total >= prevCalls) {
|
||
|
|
calls = historyItem.apc.get_total - prevCalls;
|
||
|
|
hits = historyItem.apc.get_hits - prevHits;
|
||
|
|
}
|
||
|
|
|
||
|
|
if (calls > 10000) {
|
||
|
|
calls = 0;
|
||
|
|
hits = 0;
|
||
|
|
}
|
||
|
|
prevCalls = historyItem.apc.get_total;
|
||
|
|
prevHits = historyItem.apc.get_hits;
|
||
|
|
}
|
||
|
|
|
||
|
|
historyItem.apc_size_mb = size;
|
||
|
|
historyItem.apc_requests_total = calls;
|
||
|
|
historyItem.apc_requests_hits = hits;
|
||
|
|
}
|
||
|
|
};
|
||
|
|
}
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
//
|
||
|
|
// Utils
|
||
|
|
//
|
||
|
|
function startsWith(s, prefix) {
|
||
|
|
return s && s.substr(0, prefix.length) == prefix;
|
||
|
|
}
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
function dateFormat(d) {
|
||
|
|
return ("0" + d.getUTCHours()).slice(-2) + ":" +
|
||
|
|
("0" + d.getUTCMinutes()).slice(-2);
|
||
|
|
}
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
function setValues(data, css_class_prefix) {
|
||
|
|
for (p in data) {
|
||
|
|
var v = data[p];
|
||
|
|
if (typeof(v) != 'string' && typeof(v) != 'number')
|
||
|
|
setValues(v, css_class_prefix + p + '_');
|
||
|
|
else {
|
||
|
|
jQuery('.' + css_class_prefix + p + ' span').html(v);
|
||
|
|
if (jQuery('.' + css_class_prefix + p).hasClass('w3tcus_inline')) {
|
||
|
|
jQuery('.' + css_class_prefix + p).css('display', 'inline');
|
||
|
|
} else {
|
||
|
|
jQuery('.' + css_class_prefix + p).css('display', 'block');
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
var seconds_timer_id;
|
||
|
|
function setRefresh(new_seconds_till_refresh) {
|
||
|
|
clearTimeout(seconds_timer_id);
|
||
|
|
var seconds_till_refresh = new_seconds_till_refresh;
|
||
|
|
|
||
|
|
seconds_timer_id = setInterval(function() {
|
||
|
|
seconds_till_refresh--;
|
||
|
|
if (seconds_till_refresh <= 0) {
|
||
|
|
clearTimeout(seconds_timer_id);
|
||
|
|
seconds_timer_id = null;
|
||
|
|
load();
|
||
|
|
return;
|
||
|
|
}
|
||
|
|
|
||
|
|
jQuery('.ustats_reload').text('Will be recalculated in ' +
|
||
|
|
seconds_till_refresh + ' second' +
|
||
|
|
(seconds_till_refresh > 1 ? 's' : ''));
|
||
|
|
}, 1000);
|
||
|
|
}
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
function showMetaboxes() {
|
||
|
|
jQuery('.metabox-holder').each(function() {
|
||
|
|
var visible = false;
|
||
|
|
jQuery(this).find('.ustats_block').each(function() {
|
||
|
|
visible |= jQuery(this).css('display') != 'none';
|
||
|
|
});
|
||
|
|
|
||
|
|
jQuery(this).css('display', (visible ? '' : 'none'));
|
||
|
|
});
|
||
|
|
}
|
||
|
|
|
||
|
|
|
||
|
|
//
|
||
|
|
// Main entry
|
||
|
|
//
|
||
|
|
load();
|
||
|
|
|
||
|
|
$('.ustats_reload').click(function(e) {
|
||
|
|
event.preventDefault();
|
||
|
|
load();
|
||
|
|
})
|
||
|
|
});
|