Organized tables into jQuery tabs to reduce odd scrolling effects when filtering variables
This commit is contained in:
tyron
parent
f8656fb0f8
commit
c0749d5563
@ -3,15 +3,22 @@ $(function() {
|
||||
var alertFilter = false;
|
||||
var odd_row=false;
|
||||
|
||||
$('#statusTabs').tabs({
|
||||
// Fixes line break in the menu bar when the page overflows and scrollbar appears
|
||||
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");
|
||||
|
||||
// Filter options are invisible for disabled js users
|
||||
$('#serverstatusvars fieldset').css('display','');
|
||||
|
||||
$('#serverstatusquerieschart a').first().click(function() {
|
||||
$.get('server_status.php',window.parent.common_query+'&query_chart_ajax=1', function(data) {
|
||||
$('#serverstatusquerieschart').html(data);
|
||||
});
|
||||
return false;
|
||||
$.get('server_status.php',window.parent.common_query+'&query_chart_ajax=1', function(data) {
|
||||
$('#serverstatusquerieschart').html(data);
|
||||
// Init imagemap again
|
||||
imageMap.init();
|
||||
});
|
||||
|
||||
$('#serverstatusquerieschart div.notice').css('display','none');
|
||||
|
||||
$('#filterAlert').change(function() {
|
||||
|
||||
@ -25,16 +25,10 @@ require_once './libraries/chart.lib.php';
|
||||
* Ajax request
|
||||
*/
|
||||
if (isset($_REQUEST["query_chart_ajax"])) {
|
||||
$com_vars = PMA_DBI_fetch_result("SHOW GLOBAL STATUS LIKE 'Com_%'", 0, 1);
|
||||
arsort($com_vars);
|
||||
// remove all zero values from the end
|
||||
// variable empty for Drizzle
|
||||
if ($com_vars) {
|
||||
while (end($com_vars) == 0) {
|
||||
array_pop($com_vars);
|
||||
}
|
||||
exit(PMA_chart_status($com_vars));
|
||||
}
|
||||
header("Cache-Control: no-cache, must-revalidate"); // HTTP/1.1
|
||||
header("Expires: Sat, 26 Jul 1977 05:00:00 GMT"); // Date in the past
|
||||
|
||||
exit(createQueryChart());
|
||||
}
|
||||
|
||||
/**
|
||||
@ -43,6 +37,7 @@ if (isset($_REQUEST["query_chart_ajax"])) {
|
||||
|
||||
$GLOBALS['js_include'][] = 'pMap.js';
|
||||
$GLOBALS['js_include'][] = 'server_status.js';
|
||||
$GLOBALS['js_include'][] = 'jquery/jquery-ui-1.8.custom.js';
|
||||
|
||||
/**
|
||||
* Does the common work
|
||||
@ -493,6 +488,27 @@ $hour_factor = 3600 / $server_status['Uptime'];
|
||||
<?php echo PMA_showMySQLDocu('server_status_variables','server_status_variables'); ?>
|
||||
</div>
|
||||
-->
|
||||
|
||||
<!--<div id="sectionlinks">
|
||||
<?php
|
||||
/*foreach ($sections as $section_name => $section) {
|
||||
if (! empty($section['vars']) && ! empty($section['title'])) {
|
||||
echo '<a href="' . $PMA_PHP_SELF . '?' .
|
||||
PMA_generate_common_url() . '#' . $section_name . '">' .
|
||||
$section['title'] . '</a>' . "\n";
|
||||
}
|
||||
}*/
|
||||
?>
|
||||
</div>-->
|
||||
|
||||
<div id="statusTabs">
|
||||
<ul>
|
||||
<li><a href="#statusTabs1">Server traffic</a></li>
|
||||
<li><a href="#statusTabs2">Query statistics</a></li>
|
||||
<li><a href="#statusTabs3">Status variables</a></li>
|
||||
</ul>
|
||||
|
||||
<div id="statusTabs1">
|
||||
<p>
|
||||
<?php
|
||||
echo sprintf(__('This MySQL server has been running for %s. It started up on %s.'),
|
||||
@ -516,18 +532,6 @@ if ($server_master_status || $server_slave_status) {
|
||||
}
|
||||
?>
|
||||
|
||||
<!--<div id="sectionlinks">
|
||||
<?php
|
||||
/*foreach ($sections as $section_name => $section) {
|
||||
if (! empty($section['vars']) && ! empty($section['title'])) {
|
||||
echo '<a href="' . $PMA_PHP_SELF . '?' .
|
||||
PMA_generate_common_url() . '#' . $section_name . '">' .
|
||||
$section['title'] . '</a>' . "\n";
|
||||
}
|
||||
}*/
|
||||
?>
|
||||
</div>-->
|
||||
|
||||
<h3><?php echo __('<b>Server traffic</b>: These tables show the network traffic statistics of this MySQL server since its startup.'); ?></h3>
|
||||
|
||||
<table id="serverstatustraffic" class="data">
|
||||
@ -574,6 +578,7 @@ if ($server_master_status || $server_slave_status) {
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
|
||||
<table id="serverstatusconnections" class="data">
|
||||
<thead>
|
||||
@ -632,7 +637,9 @@ if ($server_master_status || $server_slave_status) {
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
<hr class="clearfloat" />
|
||||
</div>
|
||||
<div id="statusTabs2">
|
||||
|
||||
|
||||
<h3 id="serverstatusqueries"><?php echo
|
||||
sprintf(__('<b>Query statistics</b>: Since its startup, %s queries have been sent to the server.'),
|
||||
@ -668,7 +675,6 @@ if ($server_master_status || $server_slave_status) {
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
<div id="serverstatusqueriesdetails">
|
||||
<?php
|
||||
|
||||
$used_queries = $sections['com']['vars'];
|
||||
@ -690,17 +696,8 @@ $odd_row = true;
|
||||
$count_displayed_rows = 0;
|
||||
$perc_factor = 100 / ($server_status['Questions'] - $server_status['Connections']);
|
||||
|
||||
foreach ($used_queries as $name => $value) {
|
||||
$current_table++;
|
||||
if ($count_displayed_rows === 0 || $count_displayed_rows === $max_rows_per_table) {
|
||||
$odd_row = true;
|
||||
if ($count_displayed_rows === $max_rows_per_table) {
|
||||
echo ' </tbody>' . "\n";
|
||||
echo ' </table>' . "\n";
|
||||
$count_displayed_rows = 0;
|
||||
}
|
||||
?>
|
||||
<table id="serverstatusqueriesdetails<?php echo $current_table; ?>" class="data">
|
||||
<table id="serverstatusqueriesdetails" class="data">
|
||||
<col class="namecol" />
|
||||
<col class="valuecol" span="3" />
|
||||
<thead>
|
||||
@ -710,11 +707,11 @@ foreach ($used_queries as $name => $value) {
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
|
||||
<?php
|
||||
} else {
|
||||
$odd_row = !$odd_row;
|
||||
}
|
||||
$count_displayed_rows++;
|
||||
foreach ($used_queries as $name => $value) {
|
||||
$current_table++;
|
||||
$odd_row = !$odd_row;
|
||||
|
||||
// For the percentage column, use Questions - Connections, because
|
||||
// the number of connections is not an item of the Query types
|
||||
@ -735,8 +732,6 @@ foreach ($used_queries as $name => $value) {
|
||||
?>
|
||||
</tbody>
|
||||
</table>
|
||||
<div class="clearfloat"></div>
|
||||
</div>
|
||||
|
||||
<?php if ($used_queries): ?>
|
||||
<div id="serverstatusquerieschart">
|
||||
@ -748,13 +743,17 @@ foreach ($used_queries as $name => $value) {
|
||||
. __('Show query chart') . ']</a>';
|
||||
PMA_Message::notice( __('Note: Generating the query chart can take a long time.'))->display();
|
||||
} else {
|
||||
echo PMA_chart_status($used_queries);
|
||||
echo createQueryChart($used_queries);
|
||||
}
|
||||
?>
|
||||
</div>
|
||||
<?php endif; ?>
|
||||
|
||||
</div>
|
||||
<div id="statusTabs3">
|
||||
|
||||
|
||||
<div id="serverstatusvars">
|
||||
<h3><b>Status variables</b></h3>
|
||||
<fieldset style="display:none;">
|
||||
<legend>Filters</legend>
|
||||
<div class="formelement">
|
||||
@ -858,6 +857,7 @@ unset($section_name, $section, $sections, $server_status, $odd_row, $alerts);
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
<?php
|
||||
/* if the server works as master or slave in replication process, display useful information */
|
||||
if ($server_master_status || $server_slave_status)
|
||||
@ -881,6 +881,31 @@ if ($server_master_status || $server_slave_status)
|
||||
</div>
|
||||
|
||||
<?php
|
||||
|
||||
function createQueryChart($com_vars=FALSE) {
|
||||
if(!$com_vars)
|
||||
$com_vars = PMA_DBI_fetch_result("SHOW GLOBAL STATUS LIKE 'Com\_%'", 0, 1);
|
||||
|
||||
arsort($com_vars);
|
||||
|
||||
$merge_minimum = array_sum($com_vars) * 0.005;
|
||||
$merged_value = 0;
|
||||
|
||||
// remove zero values from the end, as well as merge together every value that is below 0.5%
|
||||
// variable empty for Drizzle
|
||||
if ($com_vars) {
|
||||
while (($last_element=end($com_vars)) <= $merge_minimum) {
|
||||
array_pop($com_vars);
|
||||
$merged_value += $last_element;
|
||||
}
|
||||
|
||||
$com_vars['Other'] = $merged_value;
|
||||
return PMA_chart_status($com_vars);
|
||||
}
|
||||
|
||||
return '';
|
||||
}
|
||||
|
||||
/**
|
||||
* Sends the footer
|
||||
*/
|
||||
|
||||
@ -964,13 +964,16 @@ div#serverstatus table caption a.top {
|
||||
float: <?php echo $right; ?>;
|
||||
}
|
||||
|
||||
div#serverstatus div#serverstatusqueriesdetails table,
|
||||
div#serverstatusquerieschart {
|
||||
float:<?php echo $right; ?>;
|
||||
}
|
||||
|
||||
div#serverstatus table#serverstatusqueriesdetails,
|
||||
div#serverstatus table#serverstatustraffic,
|
||||
div#serverstatus table#serverstatusconnections {
|
||||
float: <?php echo $left; ?>;
|
||||
}
|
||||
|
||||
#serverstatussection,
|
||||
.clearfloat {
|
||||
clear: both;
|
||||
}
|
||||
@ -1432,12 +1435,12 @@ select#db_select, select#table_select {
|
||||
}
|
||||
|
||||
.export_sub_options li.subgroup {
|
||||
display: inline-block;
|
||||
margin-top: 0;
|
||||
display: inline-block;
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
.export_sub_options li {
|
||||
margin-bottom: 0;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
#quick_or_custom, #output_quick_export {
|
||||
@ -1613,7 +1616,7 @@ iframe.IE_hack {
|
||||
padding: 0;
|
||||
list-style: none;
|
||||
color: #9A0000;
|
||||
font-size: small;
|
||||
font-size: small;
|
||||
}
|
||||
|
||||
.config-form fieldset th {
|
||||
|
||||
@ -88,7 +88,7 @@ a:hover {
|
||||
}
|
||||
|
||||
#initials_table {
|
||||
background:#f3f3f3;
|
||||
background:#f3f3f3;
|
||||
border:1px solid #aaa;
|
||||
margin-bottom:10px;
|
||||
-moz-border-radius:5px;
|
||||
@ -152,7 +152,7 @@ form {
|
||||
}
|
||||
|
||||
input[type=text]{
|
||||
border-radius:2px;
|
||||
border-radius:2px;
|
||||
-moz-border-radius:2px;
|
||||
-webkit-border-radius:2px;
|
||||
|
||||
@ -169,7 +169,7 @@ input[type=text]{
|
||||
}
|
||||
|
||||
input[type=password]{
|
||||
border-radius:2px;
|
||||
border-radius:2px;
|
||||
-moz-border-radius:2px;
|
||||
-webkit-border-radius:2px;
|
||||
|
||||
@ -177,7 +177,7 @@ input[type=password]{
|
||||
-moz-box-shadow:0 1px 2px #ddd;
|
||||
-webkit-box-shadow:0 1px 2px #ddd;
|
||||
|
||||
background:url(./themes/pmahomme/img/input_bg.gif);
|
||||
background:url(./themes/pmahomme/img/input_bg.gif);
|
||||
border:1px solid #aaa;
|
||||
color:#555555;
|
||||
padding:4px;
|
||||
@ -188,17 +188,17 @@ input[type=password]{
|
||||
input[type=submit]{
|
||||
font-weight:bold;
|
||||
margin-left:14px;
|
||||
border: 1px solid #aaa;
|
||||
padding: 3px 7px;
|
||||
color: #111;
|
||||
text-decoration: none;
|
||||
background: #ddd;
|
||||
border: 1px solid #aaa;
|
||||
padding: 3px 7px;
|
||||
color: #111;
|
||||
text-decoration: none;
|
||||
background: #ddd;
|
||||
|
||||
border-radius: 12px;
|
||||
-webkit-border-radius: 12px;
|
||||
-moz-border-radius: 12px;
|
||||
-webkit-border-radius: 12px;
|
||||
-moz-border-radius: 12px;
|
||||
|
||||
text-shadow: 0px 1px 0px #fff;
|
||||
text-shadow: 0px 1px 0px #fff;
|
||||
|
||||
background-image: url(./themes/svg_gradient.php?from=ffffff&to=cccccc);
|
||||
background-size: 100% 100%;
|
||||
@ -219,8 +219,8 @@ input[type=submit]:hover{ position: relative;
|
||||
}
|
||||
|
||||
input[type=submit]:active{ position: relative;
|
||||
top: 1px;
|
||||
left: 1px;
|
||||
top: 1px;
|
||||
left: 1px;
|
||||
}
|
||||
textarea {
|
||||
overflow: visible;
|
||||
@ -237,7 +237,7 @@ fieldset {
|
||||
padding: 1.5em;
|
||||
background: #eee;
|
||||
text-shadow:0 1px 0 #fff;
|
||||
-moz-box-shadow: 1px 1px 2px #fff inset;
|
||||
-moz-box-shadow: 1px 1px 2px #fff inset;
|
||||
-webkit-box-shadow: 1px 1px 2px #fff inset;
|
||||
box-shadow: 1px 1px 2px #fff inset;
|
||||
}
|
||||
@ -297,7 +297,7 @@ select{
|
||||
border-radius:2px;
|
||||
|
||||
-moz-box-shadow:0 1px 2px #ddd;
|
||||
-webkit-box-shadow:0 1px 2px #ddd;
|
||||
-webkit-box-shadow:0 1px 2px #ddd;
|
||||
box-shadow:0 1px 2px #ddd;
|
||||
|
||||
border:1px solid #aaa;
|
||||
@ -483,7 +483,7 @@ img.lightbulb {
|
||||
|
||||
/* MySQL Parser */
|
||||
.syntax {
|
||||
font-family: Verdan, Arial, Tahoma;
|
||||
font-family: Verdan, Arial, Tahoma;
|
||||
font-size: 110%;
|
||||
}
|
||||
|
||||
@ -656,7 +656,7 @@ div.footnotes {
|
||||
}
|
||||
|
||||
.error {
|
||||
border:1px solid maroon !important;
|
||||
border:1px solid maroon !important;
|
||||
color: #000;
|
||||
background:pink;
|
||||
}
|
||||
@ -932,7 +932,7 @@ ul#topmenu > li {
|
||||
|
||||
/* default tab styles */
|
||||
ul#topmenu a, ul#topmenu span {
|
||||
padding:10px;
|
||||
padding:10px;
|
||||
}
|
||||
|
||||
ul#topmenu ul a {
|
||||
@ -1168,7 +1168,11 @@ div#serverstatus table caption a.top {
|
||||
float: <?php echo $right; ?>;
|
||||
}
|
||||
|
||||
div#serverstatus div#serverstatusqueriesdetails table,
|
||||
div#serverstatusquerieschart {
|
||||
float:<?php echo $right; ?>;
|
||||
}
|
||||
|
||||
div#serverstatus table#serverstatusqueriesdetails,
|
||||
div#serverstatus table#serverstatustraffic,
|
||||
div#serverstatus table#serverstatusconnections {
|
||||
float: <?php echo $left; ?>;
|
||||
@ -1180,11 +1184,11 @@ div#serverstatus table#serverstatusconnections {
|
||||
table#serverstatusvariables {
|
||||
width: 100%;
|
||||
margin-bottom: 1em;
|
||||
margin-top:1em;
|
||||
margin-top:1em;
|
||||
}
|
||||
table#serverstatusvariables .name {
|
||||
width: 18em;
|
||||
white-space:nowrap;
|
||||
white-space:nowrap;
|
||||
}
|
||||
table#serverstatusvariables .value {
|
||||
width: 6em;
|
||||
@ -1258,40 +1262,40 @@ div#querywindowcontainer fieldset {
|
||||
#serverstatus p a{color:#fff;text-decoration:underline;}
|
||||
#serverstatus h3
|
||||
{
|
||||
margin:35px 0px;font-weight:normal;color:#999;font-size:1.7em;
|
||||
margin:35px 0px;font-weight:normal;color:#999;font-size:1.7em;
|
||||
}
|
||||
#sectionlinks{
|
||||
padding:16px;
|
||||
padding:16px;
|
||||
background:#f3f3f3;
|
||||
border:1px solid #aaa;
|
||||
border-radius:5px;
|
||||
-webkit-border-radius:5px;
|
||||
-moz-border-radius:5px;
|
||||
|
||||
box-shadow:0px 1px 1px #fff inset;
|
||||
box-shadow:0px 1px 1px #fff inset;
|
||||
-webkit-box-shadow:0px 1px 1px #fff inset;
|
||||
-moz-box-shadow:0px 1px 1px #fff inset;
|
||||
|
||||
}
|
||||
#sectionlinks a, #statuslinks a{
|
||||
font-size:0.88em;
|
||||
font-size:0.88em;
|
||||
font-weight:bold;
|
||||
text-shadow: 0px 1px 0px #fff;
|
||||
line-height:35px;
|
||||
margin-left:7px;
|
||||
border: 1px solid #aaa;
|
||||
padding: 5px 10px;
|
||||
color: #111;
|
||||
text-decoration: none;
|
||||
background: #ddd;
|
||||
border-radius: 20px;
|
||||
-webkit-border-radius: 20px;
|
||||
-moz-border-radius: 20px;
|
||||
box-shadow: 1px 1px 2px rgba(0,0,0,.5);
|
||||
/*
|
||||
margin-left:7px;
|
||||
border: 1px solid #aaa;
|
||||
padding: 5px 10px;
|
||||
color: #111;
|
||||
text-decoration: none;
|
||||
background: #ddd;
|
||||
border-radius: 20px;
|
||||
-webkit-border-radius: 20px;
|
||||
-moz-border-radius: 20px;
|
||||
box-shadow: 1px 1px 2px rgba(0,0,0,.5);
|
||||
/*
|
||||
-webkit-box-shadow: 1px 1px 2px rgba(0,0,0,.5);
|
||||
-moz-box-shadow: 1px 1px 2px rgba(0,0,0,.5);
|
||||
text-shadow: #fff 0px 1px 0px;
|
||||
-moz-box-shadow: 1px 1px 2px rgba(0,0,0,.5);
|
||||
text-shadow: #fff 0px 1px 0px;
|
||||
*/
|
||||
background-image: url(./themes/svg_gradient.php?from=ffffff&to=cccccc);
|
||||
background-size: 100% 100%;
|
||||
@ -1333,9 +1337,9 @@ textarea#sqlquery {
|
||||
-moz-border-radius:4px;
|
||||
-webkit-border-radius:4px;
|
||||
border-raduis:4px
|
||||
border:1px solid #aaa;
|
||||
padding:5px;
|
||||
font-family:inherit;
|
||||
border:1px solid #aaa;
|
||||
padding:5px;
|
||||
font-family:inherit;
|
||||
}
|
||||
textarea#sql_query_edit{
|
||||
height:7em;
|
||||
@ -1574,7 +1578,7 @@ code.sql, div.sqlvalidate {
|
||||
background-color: #bbb;
|
||||
padding: 0.1em 0.3em;
|
||||
margin-top: 0;
|
||||
color:#fff;
|
||||
color:#fff;
|
||||
font-size:1.6em;
|
||||
font-weight:normal;
|
||||
text-shadow:0 1px 0 #777;
|
||||
@ -1711,17 +1715,17 @@ input[type=text].invalid_value,
|
||||
.exportoptions #buttonGo, .importoptions #buttonGo {
|
||||
font-weight:bold;
|
||||
margin-left:14px;
|
||||
border: 1px solid #aaa;
|
||||
padding: 5px 12px;
|
||||
color: #111;
|
||||
text-decoration: none;
|
||||
background: #ddd;
|
||||
border: 1px solid #aaa;
|
||||
padding: 5px 12px;
|
||||
color: #111;
|
||||
text-decoration: none;
|
||||
background: #ddd;
|
||||
|
||||
border-radius: 12px;
|
||||
-webkit-border-radius: 12px;
|
||||
-moz-border-radius: 12px;
|
||||
-webkit-border-radius: 12px;
|
||||
-moz-border-radius: 12px;
|
||||
|
||||
text-shadow: 0px 1px 0px #fff;
|
||||
text-shadow: 0px 1px 0px #fff;
|
||||
|
||||
background-image: url(./themes/svg_gradient.php?from=ffffff&to=cccccc);
|
||||
background-size: 100% 100%;
|
||||
@ -1771,12 +1775,12 @@ select#db_select, select#table_select {
|
||||
}
|
||||
|
||||
.export_sub_options li.subgroup {
|
||||
display: inline-block;
|
||||
margin-top: 0;
|
||||
display: inline-block;
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
.export_sub_options li {
|
||||
margin-bottom: 0;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
#quick_or_custom, #output_quick_export {
|
||||
@ -1964,7 +1968,7 @@ iframe.IE_hack {
|
||||
padding: 0;
|
||||
list-style: none;
|
||||
color: #9A0000;
|
||||
font-size: small;
|
||||
font-size: small;
|
||||
}
|
||||
|
||||
.config-form fieldset th {
|
||||
|
||||
Loading…
Reference in New Issue
Block a user
