laipower/wp-content/plugins/w3-total-cache/UsageStatistics_Page_View.js

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();
})
});