The branch, master has been updated via d404fd72d66cce1cc876fed87c8d9944689f21a4 (commit) via d7fc94529cef1f3bbdb1ec302c2d22dcfd039112 (commit) via d26cace15bee541f8af9cac0d1ff157ab9e559db (commit) from 4b73c39775b8234b66fd375aa3ac7387e945d704 (commit)
- Log ----------------------------------------------------------------- commit d404fd72d66cce1cc876fed87c8d9944689f21a4 Merge: 4b73c39775b8234b66fd375aa3ac7387e945d704 d7fc94529cef1f3bbdb1ec302c2d22dcfd039112 Author: Michal Čihař mcihar@novell.com Date: Tue Jun 14 17:21:30 2011 +0200
Merge remote-tracking branch 'tyron/master'
Conflicts: server_status.php
commit d7fc94529cef1f3bbdb1ec302c2d22dcfd039112 Author: Tyron Madlener tyronx@gmail.com Date: Tue Jun 14 17:08:15 2011 +0200
Fix for Live charting stopping when changing tabs in Firefox
commit d26cace15bee541f8af9cac0d1ff157ab9e559db Author: Tyron Madlener tyronx@gmail.com Date: Mon Jun 13 23:36:07 2011 +0200
Traffic charting for traffic tab on status page
-----------------------------------------------------------------------
Summary of changes: js/functions.js | 5 +- js/messages.php | 5 +- js/server_status.js | 291 ++++++++++++++--------- server_status.php | 19 +- themes/original/css/theme_right.css.php | 1 + themes/original/jquery/jquery-ui-1.8.custom.css | 7 +- themes/pmahomme/css/theme_right.css.php | 1 + themes/pmahomme/jquery/jquery-ui-1.8.custom.css | 7 +- 8 files changed, 211 insertions(+), 125 deletions(-)
diff --git a/js/functions.js b/js/functions.js index 6266ba6..4ad7c77 100644 --- a/js/functions.js +++ b/js/functions.js @@ -1419,8 +1419,6 @@ function PMA_createChart(passedSettings) {
thisChart.options.realtime.timeoutCallBack = function() { $.get(passedSettings.realtime.url,{ajax_request:1, chart_data:1, type:passedSettings.realtime.type},function(data) { - if(chart_activeTimeouts[container]==null) return; - curValue = jQuery.parseJSON(data); //if(lastValue==null) lastValue = curValue;
@@ -1433,6 +1431,9 @@ function PMA_createChart(passedSettings) {
lastValue = curValue; numLoadedPoints++; + + // Timeout has been cleared => don't start a new timeout + if(chart_activeTimeouts[container]==null) return; chart_activeTimeouts[container] = setTimeout(thisChart.options.realtime.timeoutCallBack, thisChart.options.realtime.refreshRate);
}); diff --git a/js/messages.php b/js/messages.php index a09078e..01aede4 100644 --- a/js/messages.php +++ b/js/messages.php @@ -61,7 +61,10 @@ $js_messages['strRemovingSelectedUsers'] = __('Removing Selected Users'); $js_messages['strClose'] = __('Close');
/* for server_status.js */ -$js_messages['strRealtimeChart'] = __('Realtime chart'); +$js_messages['strLiveTrafficChart'] = __('Live traffic chart'); +$js_messages['strLiveConnChart'] = __('Live conn./process chart'); +$js_messages['strLiveQueryChart'] = __('Live query chart'); + $js_messages['strStaticData'] = __('Static data'); /* l10n: Total number of queries */ $js_messages['strTotal'] = __('Total'); diff --git a/js/server_status.js b/js/server_status.js index 75894ad..4413c80 100644 --- a/js/server_status.js +++ b/js/server_status.js @@ -51,7 +51,7 @@ $(function() { var tabStatus = new Object(); // Holds the current chart instances for each tab var tabChart = new Object(); - + // Add tabs $('#serverStatusTabs').tabs({ // Tab persistence @@ -64,7 +64,10 @@ $(function() { $(".ui-widget-content:not(.ui-tabs):not(.ui-helper-clearfix)").addClass("ui-helper-clearfix");
// Initialize each tab - $('div.ui-tabs-panel').each(function() { initTab($(this),null); }); + $('div.ui-tabs-panel').each(function() { + initTab($(this),null); + tabStatus[$(this).attr('id')] = 'static'; + });
$('.statuslinks select').change(function() { var chart=tabChart[$(this).parents('div.ui-tabs-panel').attr('id')]; @@ -93,83 +96,145 @@ $(function() { return false; });
- /** Realtime charting of variables (always the third element) **/ - $('.statuslinks a.tabChart').click(function() { + + /** Realtime charting of variables **/ + + // Live traffic charting + $('.statuslinks a.livetrafficLink').click(function() { // ui-tabs-panel class is added by the jquery tabs feature - var tab=$(this).parents('div.ui-tabs-panel'); + var $tab=$(this).parents('div.ui-tabs-panel'); + var tabstat = tabStatus[$tab.attr('id')];
- if(tabStatus[tab.attr('id')]!='realtime') { - var series, title; - var settings = new Object(); + if(tabstat=='static' || tabstat=='liveconnections') { + var settings = { + series: [{name:'kB sent since last refresh',data:[]},{name:'kB received since last refresh',data:[]}], + title: {text:'Server traffic (in kB)'}, + realtime:{ url:'server_status.php?'+url_query, + type: 'traffic', + callback: function(chartObj, curVal, lastVal,numLoadedPoints) { + if(lastVal==null) return; + chartObj.series[0].addPoint( + { x:curVal.x, y:(curVal.y_sent-lastVal.y_sent)/1024}, + false, numLoadedPoints >= chartObj.options.realtime.numMaxPoints + ); + chartObj.series[1].addPoint( + { x:curVal.x, y:(curVal.y_received-lastVal.y_received)/1024}, + true, numLoadedPoints >= chartObj.options.realtime.numMaxPoints + ); + } + } + }
- switch(tab.attr('id')) { - case 'statustabs_traffic': - settings = { - series: [{name:'Connections since last refresh', data:[]},{name:'Processes', data:[]}], - title: {text:'Connections / Processes'}, - realtime:{ url:'server_status.php?'+url_query, - type: 'proc', - callback: function(chartObj, curVal, lastVal,numLoadedPoints) { - if(lastVal==null) return; - chartObj.series[0].addPoint( - { x:curVal.x, y:curVal.y_conn-lastVal.y_conn }, - false, numLoadedPoints >= chartObj.options.realtime.numMaxPoints - ); - chartObj.series[1].addPoint( - { x:curVal.x, y:curVal.y_proc }, - true, numLoadedPoints >= chartObj.options.realtime.numMaxPoints - ); - } - } - }; - break; - case 'statustabs_queries': - settings = { - series: [{name:'Issued queries since last refresh', data:[]}], - title: {text:'Issued queries'}, - tooltip: { formatter:function() { return this.point.name; } }, - realtime:{ url:'server_status.php?'+url_query, - type: 'queries', - callback: function(chartObj, curVal, lastVal,numLoadedPoints) { - if(lastVal==null) return; - chartObj.series[0].addPoint( - { x:curVal.x, y:curVal.y-lastVal.y, name:sortedQueriesPointInfo(curVal,lastVal) }, - true, numLoadedPoints >= chartObj.options.realtime.numMaxPoints - ); - } - } - }; - break; + setupLiveChart($tab,this,settings); + if(tabstat=='liveconnections') $tab.find('.statuslinks a.liveconnectionsLink').html(PMA_messages['strLiveConnChart']); + tabStatus[$tab.attr('id')]='livetraffic'; + } else { + $(this).html(PMA_messages['strLiveTrafficChart']); + setupLiveChart($tab,this,null); + } + + return false; + }); + + // Live connection/process charting + $('.statuslinks a.liveconnectionsLink').click(function() { + var $tab=$(this).parents('div.ui-tabs-panel'); + var tabstat = tabStatus[$tab.attr('id')]; + + if(tabstat=='static' || tabstat=='livetraffic') { + var settings = { + series: [{name:'Connections since last refresh', data:[]},{name:'Processes', data:[]}], + title: {text:'Connections / Processes'}, + realtime:{ url:'server_status.php?'+url_query, + type: 'proc', + callback: function(chartObj, curVal, lastVal,numLoadedPoints) { + if(lastVal==null) return; + chartObj.series[0].addPoint( + { x:curVal.x, y:curVal.y_conn-lastVal.y_conn }, + false, numLoadedPoints >= chartObj.options.realtime.numMaxPoints + ); + chartObj.series[1].addPoint( + { x:curVal.x, y:curVal.y_proc }, + true, numLoadedPoints >= chartObj.options.realtime.numMaxPoints + ); + } + } + }; + + setupLiveChart($tab,this,settings); + if(tabstat=='livetraffic') $tab.find('.statuslinks a.livetrafficLink').html(PMA_messages['strLiveTrafficChart']); + tabStatus[$tab.attr('id')]='liveconnections'; + } else { + $(this).html(PMA_messages['strLiveConnChart']); + setupLiveChart($tab,this,null); + } + + return false; + });
- default: - return; + // Live query charting + $('.statuslinks a.livequeriesLink').click(function() { + var $tab=$(this).parents('div.ui-tabs-panel'); + var settings=null; + + if(tabStatus[$tab.attr('id')]=='static') { + settings = { + series: [{name:'Issued queries since last refresh', data:[]}], + title: {text:'Issued queries'}, + tooltip: { formatter:function() { return this.point.name; } }, + realtime:{ url:'server_status.php?'+url_query, + type: 'queries', + callback: function(chartObj, curVal, lastVal,numLoadedPoints) { + if(lastVal==null) return; + chartObj.series[0].addPoint( + { x:curVal.x, y:curVal.y-lastVal.y, name:sortedQueriesPointInfo(curVal,lastVal) }, + true, numLoadedPoints >= chartObj.options.realtime.numMaxPoints + ); + } + } + }; + } else { + $(this).html(PMA_messages['strLiveQueryChart']); + } + + setupLiveChart($tab,this,settings); + tabStatus[$tab.attr('id')]='livequeries'; + return false; + }); + + function setupLiveChart($tab,link,settings) { + if(settings!=null) { + // Loading a chart with existing chart => remove old chart first + if(tabStatus[$tab.attr('id')]!='static') { + clearTimeout(chart_activeTimeouts[$tab.attr('id')+"_chart_cnt"]); + chart_activeTimeouts[$tab.attr('id')+"_chart_cnt"]=null; + tabChart[$tab.attr('id')].destroy(); + // Also reset the select list + $tab.find('.statuslinks select').get(0).selectedIndex=0; } - + if(!settings.chart) settings.chart = {}; - settings.chart.renderTo=tab.attr('id')+"_chart_cnt"; + settings.chart.renderTo=$tab.attr('id')+"_chart_cnt";
- tab.find('.tabInnerContent') + $tab.find('.tabInnerContent') .hide() - .after('<div style="clear:both; min-width:500px; height:400px; padding-bottom:80px;" id="'+tab.attr('id')+'_chart_cnt"></div>'); - tabStatus[tab.attr('id')]='realtime'; - tabChart[tab.attr('id')]=PMA_createChart(settings); - $(this).html(PMA_messages['strStaticData']); - tab.find('.statuslinks a.tabRefresh').hide(); - tab.find('.statuslinks select').show(); + .after('<div style="clear:both; min-width:500px; height:400px; padding-bottom:80px;" id="'+$tab.attr('id')+'_chart_cnt"></div>'); + tabChart[$tab.attr('id')]=PMA_createChart(settings); + $(link).html(PMA_messages['strStaticData']); + $tab.find('.statuslinks a.tabRefresh').hide(); + $tab.find('.statuslinks select').show(); } else { - clearTimeout(chart_activeTimeouts[tab.attr('id')+"_chart_cnt"]); - chart_activeTimeouts[tab.attr('id')+"_chart_cnt"]=null; - tab.find('.tabInnerContent').show(); - tab.find('div#'+tab.attr('id')+'_chart_cnt').remove(); - tabStatus[tab.attr('id')]='data'; - tabChart[tab.attr('id')].destroy(); - $(this).html(PMA_messages['strRealtimeChart']); - tab.find('.statuslinks a.tabRefresh').show(); - tab.find('.statuslinks select').hide(); + clearTimeout(chart_activeTimeouts[$tab.attr('id')+"_chart_cnt"]); + chart_activeTimeouts[$tab.attr('id')+"_chart_cnt"]=null; + $tab.find('.tabInnerContent').show(); + $tab.find('div#'+$tab.attr('id')+'_chart_cnt').remove(); + tabStatus[$tab.attr('id')]='static'; + tabChart[$tab.attr('id')].destroy(); + $tab.find('.statuslinks a.tabRefresh').show(); + $tab.find('.statuslinks select').get(0).selectedIndex=0; + $tab.find('.statuslinks select').hide(); } - return false; - }); - + }
/* 3 Filtering functions */ $('#filterAlert').change(function() { @@ -197,54 +262,54 @@ $(function() { initTooltips(); break; case 'statustabs_queries': - if(data!=null) { - queryPieChart.destroy(); - tab.find('.tabInnerContent').html(data); - } + if(data!=null) { + queryPieChart.destroy(); + tab.find('.tabInnerContent').html(data); + }
- // Build query statistics chart - var cdata = new Array(); - $.each(jQuery.parseJSON($('#serverstatusquerieschart').html()),function(key,value) { - cdata.push([key,parseInt(value)]); - }); - - queryPieChart=PMA_createChart({ - chart: { - renderTo: 'serverstatusquerieschart' - - }, - title: { - text:'', - margin:0 - }, - series: [{ - type:'pie', - name: 'Query statistics', - data: cdata - }], - plotOptions: { - pie: { - allowPointSelect: true, - cursor: 'pointer', - dataLabels: { - enabled: true, - formatter: function() { - return '<b>'+ this.point.name +'</b><br> '+ Highcharts.numberFormat(this.percentage, 2) +' %'; - } - } - } - }, - tooltip: { - formatter: function() { return '<b>'+ this.point.name +'</b><br/>'+Highcharts.numberFormat(this.y, 2)+'<br/>('+Highcharts.numberFormat(this.percentage, 2) +' %)'; } - } - }); + // Build query statistics chart + var cdata = new Array(); + $.each(jQuery.parseJSON($('#serverstatusquerieschart').html()),function(key,value) { + cdata.push([key,parseInt(value)]); + }); + + queryPieChart=PMA_createChart({ + chart: { + renderTo: 'serverstatusquerieschart' + + }, + title: { + text:'', + margin:0 + }, + series: [{ + type:'pie', + name: 'Query statistics', + data: cdata + }], + plotOptions: { + pie: { + allowPointSelect: true, + cursor: 'pointer', + dataLabels: { + enabled: true, + formatter: function() { + return '<b>'+ this.point.name +'</b><br> '+ Highcharts.numberFormat(this.percentage, 2) +' %'; + } + } + } + }, + tooltip: { + formatter: function() { return '<b>'+ this.point.name +'</b><br/>'+Highcharts.numberFormat(this.y, 2)+'<br/>('+Highcharts.numberFormat(this.percentage, 2) +' %)'; } + } + }); break; - + case 'statustabs_allvars': if(data!=null) { - tab.find('.tabInnerContent').html(data); - filterVariables(); - } + tab.find('.tabInnerContent').html(data); + filterVariables(); + } break; }
diff --git a/server_status.php b/server_status.php index 0ebfa0f..cba7266 100644 --- a/server_status.php +++ b/server_status.php @@ -44,10 +44,12 @@ if (isset($_REQUEST['ajax_request'])) { cleanDeprecated($queries); // admin commands are not queries unset($queries['Com_admin_commands']); - $sum=array_sum($queries); - - $ret = Array('x'=>(microtime(true)*1000),'y'=>$sum,'pointInfo'=>$queries,'numQueries'=>count($queries)); + $ret = Array('x'=>(microtime(true)*1000),'y'=>$sum,'pointInfo'=>$queries); + exit(json_encode($ret)); + case 'traffic': + $traffic = PMA_DBI_fetch_result('SHOW GLOBAL STATUS WHERE Variable_name="Bytes_received" OR Variable_name="Bytes_sent"', 0, 1); + $ret = Array('x'=>(microtime(true)*1000),'y_sent'=>$traffic['Bytes_sent'],'y_received'=>$traffic['Bytes_received']); exit(json_encode($ret)); } } @@ -387,8 +389,11 @@ echo __('Runtime Information'); <option value="600">10 <?php echo __('minutes'); ?></option> </select>
- <a class="tabChart" href="#"> - <?php echo __('Realtime chart'); ?> + <a class="tabChart livetrafficLink" href="#"> + <?php echo __('Live traffic chart'); ?> + </a> + <a class="tabChart liveconnectionsLink" href="#"> + <?php echo __('Live conn./process chart'); ?> </a> </div> <div class="tabInnerContent"> @@ -414,8 +419,8 @@ echo __('Runtime Information'); <option value="300">5 <?php echo __('minutes'); ?></option> <option value="600">10 <?php echo __('minutes'); ?></option> </select> - <a class="tabChart" href="#"> - <?php echo __('Realtime chart'); ?> + <a class="tabChart livequeriesLink" href="#"> + <?php echo __('Live query chart'); ?> </a> </div> <div class="tabInnerContent"> diff --git a/themes/original/css/theme_right.css.php b/themes/original/css/theme_right.css.php index f2bbfb8..94ed5fe 100644 --- a/themes/original/css/theme_right.css.php +++ b/themes/original/css/theme_right.css.php @@ -972,6 +972,7 @@ table#serverstatusqueriesdetails th.headerSortDown img.sortableIcon, table#serve
.statuslinks { float: <?php echo $right; ?>; + white-space: nowrap; }
/* Also used for the variables page */ diff --git a/themes/original/jquery/jquery-ui-1.8.custom.css b/themes/original/jquery/jquery-ui-1.8.custom.css index b2ad14f..f9cc5b7 100644 --- a/themes/original/jquery/jquery-ui-1.8.custom.css +++ b/themes/original/jquery/jquery-ui-1.8.custom.css @@ -414,7 +414,12 @@ button.ui-button::-moz-focus-inner { border: 0; padding: 0; } /* reset extra pad .ui-tabs .ui-tabs-nav li.ui-tabs-selected a, .ui-tabs .ui-tabs-nav li.ui-state-disabled a, .ui-tabs .ui-tabs-nav li.ui-state-processing a { cursor: text; } .ui-tabs .ui-tabs-nav li a, .ui-tabs.ui-tabs-collapsible .ui-tabs-nav li.ui-tabs-selected a { cursor: pointer; } /* first selector in group seems obsolete, but required to overcome bug in Opera applying cursor: text overall if defined elsewhere... */ .ui-tabs .ui-tabs-panel { display: block; border: 0; padding: 1em 1.4em; background: none; } -.ui-tabs .ui-tabs-hide { display: none !important; } +/*.ui-tabs .ui-tabs-hide { display: none !important; }*/ +/* Firefox has issues rendering SVG in display:none elements. See also http://jqueryui.com/demos/tabs/#...my_slider.2C_Google_Map.2C_sIFR_etc._not_... */ +.ui-tabs .ui-tabs-hide { + position: absolute; + left: -10000px; +} /* Datepicker ----------------------------------*/ .ui-datepicker { width: 17em; padding: .2em .2em 0; } diff --git a/themes/pmahomme/css/theme_right.css.php b/themes/pmahomme/css/theme_right.css.php index 7092358..c403698 100644 --- a/themes/pmahomme/css/theme_right.css.php +++ b/themes/pmahomme/css/theme_right.css.php @@ -1175,6 +1175,7 @@ table#serverstatusqueriesdetails th.headerSortDown img.sortableIcon, table#serve
.statuslinks { float: <?php echo $right; ?>; + white-space: nowrap; }
/* Also used for the variables page */ diff --git a/themes/pmahomme/jquery/jquery-ui-1.8.custom.css b/themes/pmahomme/jquery/jquery-ui-1.8.custom.css index d6a599f..9946953 100644 --- a/themes/pmahomme/jquery/jquery-ui-1.8.custom.css +++ b/themes/pmahomme/jquery/jquery-ui-1.8.custom.css @@ -414,7 +414,12 @@ button.ui-button::-moz-focus-inner { border: 0; padding: 0; } /* reset extra pad .ui-tabs .ui-tabs-nav li.ui-tabs-selected a, .ui-tabs .ui-tabs-nav li.ui-state-disabled a, .ui-tabs .ui-tabs-nav li.ui-state-processing a { cursor: text; } .ui-tabs .ui-tabs-nav li a, .ui-tabs.ui-tabs-collapsible .ui-tabs-nav li.ui-tabs-selected a { cursor: pointer; } /* first selector in group seems obsolete, but required to overcome bug in Opera applying cursor: text overall if defined elsewhere... */ .ui-tabs .ui-tabs-panel { display: block; border: 0; padding: 1em 1.4em; background: none; } -.ui-tabs .ui-tabs-hide { display: none !important; } +/*.ui-tabs .ui-tabs-hide { display: none !important; }*/ +/* Firefox has issues rendering SVG in display:none elements. See also http://jqueryui.com/demos/tabs/#...my_slider.2C_Google_Map.2C_sIFR_etc._not_... */ +.ui-tabs .ui-tabs-hide { + position: absolute; + left: -10000px; +} /* Datepicker ----------------------------------*/ .ui-datepicker { width: 17em; padding: .2em .2em 0; }
hooks/post-receive
-
Michal Čihař