- Implemented more reusable code for realtime charting
- added 'queries per second' chart in the query statistics tab - removed test chart - fixed kill process url
This commit is contained in:
Tyron Madlener
parent
ba20375ba6
commit
4885b174da
@ -1,12 +1,14 @@
|
||||
$(function() {
|
||||
// Filters for status variables
|
||||
var textFilter=null;
|
||||
var alertFilter = false;
|
||||
var categoryFilter='';
|
||||
var odd_row=false;
|
||||
var text='';
|
||||
var text=''; // Holds filter text
|
||||
|
||||
// Process chart
|
||||
initChart();
|
||||
// Holds the tab contents when realtime charts are being displayed
|
||||
var tabCache = new Object();
|
||||
var tabStatus = new Object();
|
||||
|
||||
// Add tabs
|
||||
$('#serverStatusTabs').tabs({
|
||||
@ -14,6 +16,7 @@ $(function() {
|
||||
cookie: { name: 'pma_serverStatusTabs', expires: 1 },
|
||||
show: function() { menuResize(); }
|
||||
});
|
||||
|
||||
// Fixes wrong tab height with floated elements. See also http://bugs.jqueryui.com/ticket/5601
|
||||
$(".ui-widget-content:not(.ui-tabs):not(.ui-helper-clearfix)").addClass("ui-helper-clearfix");
|
||||
|
||||
@ -28,8 +31,44 @@ $(function() {
|
||||
imageMap.init();
|
||||
});
|
||||
|
||||
// Ajax reload of variables
|
||||
$('.statuslinks a').click(function() { return refreshHandler(this); });
|
||||
// Ajax reload of variables (always the first link)
|
||||
$('.statuslinks a:nth-child(1)').click(function() { return refreshHandler(this); });
|
||||
// Realtime charting of variables (always the second link)
|
||||
$('.statuslinks a:nth-child(2)').click(function() {
|
||||
// ui-tabs-panel class is added by the jquery tabs feature
|
||||
var tab=$(this).parents('div.ui-tabs-panel');
|
||||
|
||||
if(tabStatus[tab.attr('id')]!='realtime') {
|
||||
var series, title;
|
||||
var settings = {container:tab.attr('id')+"_chart_cnt"};
|
||||
|
||||
switch(tab.attr('id')) {
|
||||
case 'statustabs_traffic':
|
||||
break;
|
||||
case 'statustabs_queries':
|
||||
settings.series = [{name: 'Queries per second',
|
||||
data: []
|
||||
}];
|
||||
settings.differentialData = true;
|
||||
settings.dataType = 'queries';
|
||||
settings.chartTitle = 'Queries per second';
|
||||
break;
|
||||
|
||||
default:
|
||||
return;
|
||||
}
|
||||
|
||||
tabStatus[tab.attr('id')]='realtime';
|
||||
tabCache[tab.attr('id')]=tab.find('.tabInnerContent').html();
|
||||
tab.find('.tabInnerContent').html('<div style="width:700px; height:400px; padding-bottom:80px;" id="'+tab.attr('id')+'_chart_cnt"></div>');
|
||||
//alert(tab.find('.tabInnerContent #'+tab.attr('id')+'_chart_cnt').length);
|
||||
initChart(settings);
|
||||
} else {
|
||||
tab.find('.tabInnerContent').html(tabCache[tab.attr('id')]);
|
||||
tabStatus[tab.attr('id')]='data';
|
||||
}
|
||||
return false;
|
||||
});
|
||||
|
||||
/* 3 Filtering functions */
|
||||
$('#filterAlert').change(function() {
|
||||
@ -53,18 +92,15 @@ $(function() {
|
||||
function initTab(tab,data) {
|
||||
switch(tab.attr('id')) {
|
||||
case 'statustabs_traffic':
|
||||
tab.html(data);
|
||||
tab.find('.tabInnerContent').html(data);
|
||||
initTooltips();
|
||||
$('#statustabs_traffic .statuslinks a').click(function() { return refreshHandler(this); });
|
||||
break;
|
||||
case 'statustabs_queries':
|
||||
tab.html(data);
|
||||
$('#statustabs_queries .statuslinks a').click(function() { return refreshHandler(this); });
|
||||
tab.find('.tabInnerContent').html(data);
|
||||
break;
|
||||
case 'statustabs_allvars':
|
||||
tab.find('#serverstatusvariables').html(data);
|
||||
tab.find('.tabInnerContent').html(data);
|
||||
filterVariables();
|
||||
tab.find('.statuslinks a img').hide();
|
||||
break;
|
||||
}
|
||||
}
|
||||
@ -75,11 +111,14 @@ $(function() {
|
||||
|
||||
// Show ajax load icon
|
||||
$(element).find('img').show();
|
||||
|
||||
|
||||
$.get($(element).attr('href'),{ajax_request:1},function(data) {
|
||||
initTab(tab,data);
|
||||
$(element).find('img').hide();
|
||||
});
|
||||
|
||||
tabStatus[tab.attr('id')]='data';
|
||||
|
||||
return false;
|
||||
}
|
||||
|
||||
@ -126,35 +165,60 @@ $(function() {
|
||||
});
|
||||
}
|
||||
|
||||
function initChart() {
|
||||
function initChart(settings) {
|
||||
if(settings.differentialData == undefined)
|
||||
settings.differentialData = false;
|
||||
if(settings.seriesType == undefined)
|
||||
settings.seriesType = 'spline';
|
||||
if(settings.numPoints == undefined)
|
||||
settings.numPoints=30;
|
||||
|
||||
var numLoadedPoints=0;
|
||||
|
||||
chart = new Highcharts.Chart({
|
||||
chart: {
|
||||
renderTo: 'container',
|
||||
defaultSeriesType: 'spline',
|
||||
renderTo: settings.container,
|
||||
defaultSeriesType: settings.seriesType,
|
||||
marginRight: 10,
|
||||
events: {
|
||||
load: function() {
|
||||
|
||||
var thisChart = this;
|
||||
// set up the updating of the chart each second
|
||||
var series = this.series[0];
|
||||
var lastValue=new Array();
|
||||
|
||||
var addnewPoint = function() {
|
||||
$.get('server_status.php?'+url_query,{ajax_request:1, chart_data:1},function(data) {
|
||||
var x=parseInt(data.split(',')[0]),
|
||||
y=parseInt(data.split(',')[1]);
|
||||
|
||||
series.addPoint([x,y], true, true);
|
||||
// Stop loading data, if the chart has been removed
|
||||
if($('#'+settings.container).length==0) return;
|
||||
|
||||
$.get('server_status.php?'+url_query,{ajax_request:1, chart_data:1,type:settings.dataType},function(data) {
|
||||
var splitData = data.split(',');
|
||||
var x,y;
|
||||
for(var i=0; i*2<=splitData.length; i++) {
|
||||
x=parseFloat(splitData[i*2]);
|
||||
y=parseFloat(splitData[i*2+1]);
|
||||
|
||||
if(settings.differentialData) {
|
||||
if(lastValue[i]!=undefined && thisChart.series[i]!=undefined) {
|
||||
thisChart.series[i].addPoint([x,1000*(y-lastValue[i][1])/(x-lastValue[i][0])], true, numLoadedPoints++ >= settings.numPoints);
|
||||
}
|
||||
} else thisChart.series[i].addPoint([x,y], true, numLoadedPoints++ >= settings.numPoints);
|
||||
|
||||
lastValue[i] = [x,y];
|
||||
}
|
||||
|
||||
setTimeout(addnewPoint, 2000);
|
||||
});
|
||||
}
|
||||
|
||||
setTimeout(addnewPoint, 2000);
|
||||
|
||||
addnewPoint();
|
||||
}
|
||||
}
|
||||
},
|
||||
credits: {
|
||||
enabled:false
|
||||
},
|
||||
title: {
|
||||
text: 'Processes'
|
||||
text: settings.chartTitle
|
||||
},
|
||||
xAxis: {
|
||||
type: 'datetime',
|
||||
@ -183,22 +247,7 @@ $(function() {
|
||||
exporting: {
|
||||
enabled: false
|
||||
},
|
||||
series: [{
|
||||
name: '# Processes',
|
||||
data: (function() {
|
||||
// generate an array of random data
|
||||
var data = [],
|
||||
time = (new Date()).getTime(),
|
||||
i;
|
||||
for (i = -19; i <= 0; i++) {
|
||||
data.push({
|
||||
x: time + i * 2000,
|
||||
y: 0 //Math.random()
|
||||
});
|
||||
}
|
||||
return data;
|
||||
})()
|
||||
}]
|
||||
series: settings.series
|
||||
});
|
||||
}
|
||||
});
|
||||
@ -31,9 +31,17 @@ if (isset($_REQUEST['ajax_request'])) {
|
||||
exit(createQueryChart());
|
||||
}
|
||||
if(isset($_REQUEST['chart_data'])) {
|
||||
$result = PMA_DBI_query('SHOW PROCESSLIST');
|
||||
$num_procs = PMA_DBI_num_rows($result);
|
||||
exit((time()*1000).','.$num_procs);
|
||||
switch($_REQUEST['type']) {
|
||||
case 'proc':
|
||||
$result = PMA_DBI_query('SHOW PROCESSLIST');
|
||||
$num_procs = PMA_DBI_num_rows($result);
|
||||
exit((microtime(true)*1000).','.$num_procs);
|
||||
case 'queries':
|
||||
$result = PMA_DBI_query('SHOW GLOBAL STATUS LIKE \'Questions\'');
|
||||
$status = PMA_DBI_fetch_result($result);
|
||||
// print_r($status);
|
||||
exit((microtime(true)*1000).','.$status[0]['Value']);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -81,7 +89,7 @@ if (!empty($_REQUEST['kill'])) {
|
||||
$message = PMA_Message::error(__('phpMyAdmin was unable to kill thread %s. It probably has already been closed.'));
|
||||
}
|
||||
$message->addParam($_REQUEST['kill']);
|
||||
$message->display();
|
||||
//$message->display();
|
||||
}
|
||||
|
||||
|
||||
@ -263,8 +271,8 @@ $links['qcache'][__('Flush query cache')]
|
||||
PMA_generate_common_url();
|
||||
$links['qcache']['doc'] = 'query_cache';
|
||||
|
||||
$links['threads'][__('Show processes')]
|
||||
= 'server_processlist.php?' . PMA_generate_common_url();
|
||||
//$links['threads'][__('Show processes')]
|
||||
// = 'server_processlist.php?' . PMA_generate_common_url();
|
||||
$links['threads']['doc'] = 'mysql_threads';
|
||||
|
||||
$links['key']['doc'] = 'myisam_key_cache';
|
||||
@ -359,67 +367,83 @@ echo __('Runtime Information');
|
||||
</ul>
|
||||
|
||||
<div id="statustabs_traffic">
|
||||
<?php printServerTraffic(); ?>
|
||||
<div id="container" style="width: 700px; height: 400px;"></div>
|
||||
<div class="statuslinks">
|
||||
<a href="<?php echo $PMA_PHP_SELF . '?show=server_traffic&' . PMA_generate_common_url(); ?>" >
|
||||
<img src="<?php echo $GLOBALS['pmaThemeImage'];?>ajax_clock_small.gif" alt="ajax clock" style="display: none;" />
|
||||
<?php echo __('Refresh'); ?>
|
||||
</a>
|
||||
</div>
|
||||
<div class="tabInnerContent">
|
||||
<?php printServerTraffic(); ?>
|
||||
</div>
|
||||
</div>
|
||||
<div id="statustabs_queries">
|
||||
<?php printQueryStatistics(); ?>
|
||||
<div class="statuslinks">
|
||||
<a href="<?php echo $PMA_PHP_SELF . '?show=query_statistics&' . PMA_generate_common_url(); ?>" >
|
||||
<img src="<?php echo $GLOBALS['pmaThemeImage'];?>ajax_clock_small.gif" alt="ajax clock" style="display: none;" />
|
||||
<?php echo __('Refresh'); ?>
|
||||
</a>
|
||||
<a href="#">
|
||||
<?php echo __('Realtime chart'); ?>
|
||||
</a>
|
||||
</div>
|
||||
<div class="tabInnerContent">
|
||||
<?php printQueryStatistics(); ?>
|
||||
</div>
|
||||
</div>
|
||||
<div id="statustabs_allvars">
|
||||
<div id="serverstatusvars">
|
||||
<fieldset id="tableFilter">
|
||||
<div class="statuslinks">
|
||||
<a href="<?php echo $PMA_PHP_SELF . '?show=variables_table&' . PMA_generate_common_url(); ?>" >
|
||||
<img src="<?php echo $GLOBALS['pmaThemeImage'];?>ajax_clock_small.gif" alt="ajax clock" style="display: none;" />
|
||||
<?php echo __('Refresh'); ?>
|
||||
</a>
|
||||
</div>
|
||||
<legend>Filters</legend>
|
||||
<div class="formelement">
|
||||
<label for="filterText"><?php echo __('Containing the word:'); ?></label>
|
||||
<input name="filterText" type="text" id="filterText" style="vertical-align: baseline;" />
|
||||
</div>
|
||||
<div class="formelement">
|
||||
<input type="checkbox" name="filterAlert" id="filterAlert">
|
||||
<label for="filterAlert"><?php echo __('Show only alert values'); ?></label>
|
||||
</div>
|
||||
<div class="formelement">
|
||||
<select id="filterCategory" name="filterCategory">
|
||||
<option value=''><?php echo __('Filter by category...'); ?></option>
|
||||
<?php
|
||||
foreach($sections as $section_id=>$section_name) {
|
||||
?>
|
||||
<option value='<?php echo $section_id; ?>'><?php echo $section_name; ?></option>
|
||||
<?php
|
||||
}
|
||||
|
||||
?>
|
||||
</select>
|
||||
</div>
|
||||
</fieldset>
|
||||
<div id="linkSuggestions" class="defaultLinks" style="display:none">
|
||||
<p><?php echo __('Related links:'); ?>
|
||||
<?php
|
||||
foreach ($links as $section_name => $section_links) {
|
||||
echo '<span class="status_'.$section_name.'"> ';
|
||||
$i=0;
|
||||
foreach ($section_links as $link_name => $link_url) {
|
||||
if($i>0) echo ', ';
|
||||
if ('doc' == $link_name) {
|
||||
echo PMA_showMySQLDocu($link_url, $link_url);
|
||||
} else {
|
||||
echo '<a href="' . $link_url . '">' . $link_name . '</a>';
|
||||
}
|
||||
$i++;
|
||||
}
|
||||
echo '</span>';
|
||||
}
|
||||
unset($link_url, $link_name, $i);
|
||||
?>
|
||||
</p>
|
||||
<fieldset id="tableFilter">
|
||||
<div class="statuslinks">
|
||||
<a href="<?php echo $PMA_PHP_SELF . '?show=variables_table&' . PMA_generate_common_url(); ?>" >
|
||||
<img src="<?php echo $GLOBALS['pmaThemeImage'];?>ajax_clock_small.gif" alt="ajax clock" style="display: none;" />
|
||||
<?php echo __('Refresh'); ?>
|
||||
</a>
|
||||
</div>
|
||||
<legend>Filters</legend>
|
||||
<div class="formelement">
|
||||
<label for="filterText"><?php echo __('Containing the word:'); ?></label>
|
||||
<input name="filterText" type="text" id="filterText" style="vertical-align: baseline;" />
|
||||
</div>
|
||||
<div class="formelement">
|
||||
<input type="checkbox" name="filterAlert" id="filterAlert">
|
||||
<label for="filterAlert"><?php echo __('Show only alert values'); ?></label>
|
||||
</div>
|
||||
<div class="formelement">
|
||||
<select id="filterCategory" name="filterCategory">
|
||||
<option value=''><?php echo __('Filter by category...'); ?></option>
|
||||
<?php
|
||||
foreach($sections as $section_id=>$section_name) {
|
||||
?>
|
||||
<option value='<?php echo $section_id; ?>'><?php echo $section_name; ?></option>
|
||||
<?php
|
||||
}
|
||||
|
||||
?>
|
||||
</select>
|
||||
</div>
|
||||
</fieldset>
|
||||
<div id="linkSuggestions" class="defaultLinks" style="display:none">
|
||||
<p><?php echo __('Related links:'); ?>
|
||||
<?php
|
||||
foreach ($links as $section_name => $section_links) {
|
||||
echo '<span class="status_'.$section_name.'"> ';
|
||||
$i=0;
|
||||
foreach ($section_links as $link_name => $link_url) {
|
||||
if($i>0) echo ', ';
|
||||
if ('doc' == $link_name) {
|
||||
echo PMA_showMySQLDocu($link_url, $link_url);
|
||||
} else {
|
||||
echo '<a href="' . $link_url . '">' . $link_name . '</a>';
|
||||
}
|
||||
$i++;
|
||||
}
|
||||
echo '</span>';
|
||||
}
|
||||
unset($link_url, $link_name, $i);
|
||||
?>
|
||||
</p>
|
||||
</div>
|
||||
<div>
|
||||
<div class="tabInnerContent">
|
||||
<?php printVariablesTable(); ?>
|
||||
</div>
|
||||
</div>
|
||||
@ -436,13 +460,6 @@ function printQueryStatistics() {
|
||||
$total_queries = array_sum($used_queries);
|
||||
|
||||
?>
|
||||
<div class="statuslinks">
|
||||
<a href="<?php echo $PMA_PHP_SELF . '?show=query_statistics&' . PMA_generate_common_url(); ?>" >
|
||||
<img src="<?php echo $GLOBALS['pmaThemeImage'];?>ajax_clock_small.gif" alt="ajax clock" style="display: none;" />
|
||||
<?php echo __('Refresh'); ?>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<h3 id="serverstatusqueries"><?php echo
|
||||
//sprintf(__('<b>Query statistics</b>: Since its startup, %s queries have been sent to the server.'),
|
||||
//PMA_formatNumber($server_status['Questions'], 0));
|
||||
@ -536,13 +553,6 @@ function printServerTraffic() {
|
||||
'SELECT UNIX_TIMESTAMP() - ' . $server_status['Uptime']);
|
||||
|
||||
?>
|
||||
<div class="statuslinks">
|
||||
<a href="<?php echo $PMA_PHP_SELF . '?show=server_traffic&' . PMA_generate_common_url(); ?>" >
|
||||
<img src="<?php echo $GLOBALS['pmaThemeImage'];?>ajax_clock_small.gif" alt="ajax clock" style="display: none;" />
|
||||
<?php echo __('Refresh'); ?>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<h3><?php /* echo __('<b>Server traffic</b>: These tables show the network traffic statistics of this MySQL server since its startup.');*/
|
||||
echo sprintf(__('Network traffic since startup: %s'),
|
||||
implode(' ', PMA_formatByteDown( $server_status['Bytes_received'] + $server_status['Bytes_sent'], 3, 1))
|
||||
@ -699,10 +709,10 @@ function printServerTraffic() {
|
||||
if (! empty($_REQUEST['full'])) {
|
||||
$sql_query = 'SHOW FULL PROCESSLIST';
|
||||
$url_params['full'] = 1;
|
||||
$full_text_link = 'server_processlist.php' . PMA_generate_common_url(array(), 'html', '?');
|
||||
$full_text_link = 'server_status.php' . PMA_generate_common_url(array(), 'html', '?');
|
||||
} else {
|
||||
$sql_query = 'SHOW PROCESSLIST';
|
||||
$full_text_link = 'server_processlist.php' . PMA_generate_common_url(array('full' => 1));
|
||||
$full_text_link = 'server_status.php' . PMA_generate_common_url(array('full' => 1));
|
||||
}
|
||||
$result = PMA_DBI_query($sql_query);
|
||||
|
||||
@ -747,7 +757,7 @@ function printServerTraffic() {
|
||||
}
|
||||
}
|
||||
$url_params['kill'] = $process['Id'];
|
||||
$kill_process = 'server_processlist.php' . PMA_generate_common_url($url_params);
|
||||
$kill_process = 'server_status.php' . PMA_generate_common_url($url_params);
|
||||
?>
|
||||
<tr class="noclick <?php echo $odd_row ? 'odd' : 'even'; ?>">
|
||||
<td><a href="<?php echo $kill_process ; ?>"><?php echo __('Kill'); ?></a></td>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user
