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