From c2fbe0cc2590819de594b93c1f2ecf8a410f87d9 Mon Sep 17 00:00:00 2001
From: Tyron Madlener <tyronx@gmail.com>
Date: Sat, 9 Jul 2011 23:15:50 +0300
Subject: [PATCH] More usability improvements

---
 js/server_status.js                     | 64 +++++++++++++++++++++----
 server_status.php                       | 12 ++++-
 themes/pmahomme/css/theme_right.css.php |  5 +-
 3 files changed, 68 insertions(+), 13 deletions(-)

diff --git a/js/server_status.js b/js/server_status.js
index 75cf740f78..8b87504175 100644
--- a/js/server_status.js
+++ b/js/server_status.js
@@ -80,7 +80,41 @@ $(function() {
     var tabStatus = new Object();
     // Holds the current chart instances for each tab
     var tabChart = new Object();
-
+    
+    
+    /*** Table sort tooltip ***/
+    
+    var $tableSortHint = $('<div class="dHint" style="display:none;">' + 'Click to sort' + '</div>');
+    $('body').append($tableSortHint);
+    
+    $('table#serverstatusqueriesdetails thead th, table#serverstatusvariables thead th, div#logTable table thead th').live('mouseover mouseout',function(e) {
+        if(e.type == 'mouseover') {
+            $tableSortHint
+                .stop(true, true)
+                .css({
+                    top: e.clientY + 15,
+                    left: e.clientX + 15
+                })
+                .show('fast')
+                .data('shown',true);
+        } else {
+            $tableSortHint
+                .stop(true, true)
+                .hide(300,function() {
+                    $(this).data('shown',false);
+                });
+        }
+    });
+    
+    $(document).mousemove(function(e) {
+        if($tableSortHint.data('shown') == true)
+            $tableSortHint.css({
+                top: e.clientY + 15,
+                left: e.clientX + 15
+            })
+    });
+    
+    
     // Tell highcarts not to use UTC dates (global setting)    
     Highcharts.setOptions({
         global: {
@@ -540,6 +574,8 @@ $(function() {
     
     var xmin=-1, xmax=-1;
     
+    
+    
     // Allows drag and drop rearrange and print/edit icons on charts
     var editMode = false;
     
@@ -775,7 +811,7 @@ $(function() {
         var $dialog = $('div#monitorInstructionsDialog');
         
         $dialog.dialog({
-            width: 585,
+            width: 595,
             height: 'auto'
         }).find('img.ajaxIcon').show();
         
@@ -808,14 +844,20 @@ $(function() {
                     str += '<img src="' + pma_theme_image + icon + '" alt=""/> ' + msg + '<br />';
                     
                     if(logVars['log_output'] != 'TABLE')
-                        str += '<img src="' + pma_theme_image + 's_error.png" alt=""/> ' + 'log_output is not set to TABLE' + '<br />';
+                        str += '<img src="' + pma_theme_image + 's_error.png" alt=""/> ' + 'log_output is not set to TABLE.' + '<br />';
                     else 
-                        str += '<img src="' + pma_theme_image + 's_success.png" alt=""/> ' + 'log_output is set to TABLE' + '<br />';
+                        str += '<img src="' + pma_theme_image + 's_success.png" alt=""/> ' + 'log_output is set to TABLE.' + '<br />';
                     
-                    if(logVars['slow_query_log'] == 'ON' && logVars['long_query_time'] > 2) {
-                        str += '<img src="' + pma_theme_image + 's_attention.png" alt=""/> '
-                            + $.sprintf('slow_query_log is enabled, but the server logs only queries that take longer than %d seconds. It is advisable to set this long_query_time 1 second, depending on your system.', logVars['long_query_time'])
-                            + '<br />';
+                    if(logVars['slow_query_log'] == 'ON') {
+                        if(logVars['long_query_time'] > 2)
+                            str += '<img src="' + pma_theme_image + 's_attention.png" alt=""/> '
+                                + $.sprintf('slow_query_log is enabled, but the server logs only queries that take longer than %d seconds. It is advisable to set this long_query_time 0-2 seconds, depending on your system.', logVars['long_query_time'])
+                                + '<br />';
+                        
+                        if(logVars['long_query_time'] < 2)
+                            str += '<img src="' + pma_theme_image + 's_success.png" alt=""/> '
+                                + $.sprintf('long_query_time is set to %d second(s).', logVars['long_query_time'])
+                                + '<br />';
                     }
                     
                     str += '</div>';
@@ -1191,7 +1233,7 @@ $(function() {
                 var cols = new Array();
                 
                 if(rows.length != 0) {
-                    tableStr = '<table border="0">';
+                    tableStr = '<table border="0" class="sortable">';
                     
                     for(var i=0; i < rows.length; i++) {
                         if(i == 0) {
@@ -1238,6 +1280,10 @@ $(function() {
                         widgets: ['zebra']
                     });
                     
+                    $('div#logTable table thead th')
+                        .append('<img class="sortableIcon" src="' + pma_theme_image + 'cleardot.gif" alt="">');
+
+                    
                     $('#loadingLogsDialog').html('<p>Log data loaded. Queries executed in this time span:</p>');
                     $.each(data.sum, function(key, value) {
                         key = key.charAt(0).toUpperCase() + key.slice(1).toLowerCase();
diff --git a/server_status.php b/server_status.php
index 883177447e..a1edc656af 100644
--- a/server_status.php
+++ b/server_status.php
@@ -209,12 +209,19 @@ if (isset($_REQUEST['ajax_request']) && $_REQUEST['ajax_request'] == true) {
             while ($row = PMA_DBI_fetch_assoc($result)) {
                 preg_match('/^(\w+)\s/',$row['argument'],$match);
                 $type = strtolower($match[1]);
-                $return['sum'][$type]++;
+                // Ignore undefined index warning, just increase counter by one
+                @$return['sum'][$type]++;
                 if($type=='insert') {
+                    // Group inserts if selected
                     if(isset($_REQUEST['groupInserts']) && $_REQUEST['groupInserts'] && preg_match('/^INSERT INTO (`|\'|"|)([^\s\\1]+)\\1/i',$row['argument'],$matches)) {
                         $insertTables[$matches[2]]++;
                         if ($insertTables[$matches[2]] > 1) {
                             $return['rows'][$insertTablesFirst]['#'] = $insertTables[$matches[2]];
+                            
+                            // Add a ... to the end of this query to indicate that there's been other queries
+                            $return['rows'][$insertTablesFirst]['argument'][strlen($return['rows'][$insertTablesFirst]['argument'])-1] != '.';
+                                $return['rows'][$insertTablesFirst]['argument'] .= '<br/>...';
+                                
                             // Group this value, thus do not add to the result list
                             continue;
                         } else {
@@ -223,8 +230,9 @@ if (isset($_REQUEST['ajax_request']) && $_REQUEST['ajax_request'] == true) {
                         }
                     }
                         
+                    // Cut off big selects, but append byte count therefor
                     if(strlen($row['argument']) > 300)
-                        $row['argument'] = substr($row['argument'],0,301) . '... [' . strlen($row['argument']). ' Bytes]';
+                        $row['argument'] = substr($row['argument'],0,301) . '... [' . PMA_localizeNumber(number_format(strlen($row['argument']), 2)). ' Bytes]';
                 }
                 $return['rows'][] = $row;
                 $i++;
diff --git a/themes/pmahomme/css/theme_right.css.php b/themes/pmahomme/css/theme_right.css.php
index b6225bb6e5..4fc102f620 100644
--- a/themes/pmahomme/css/theme_right.css.php
+++ b/themes/pmahomme/css/theme_right.css.php
@@ -1175,10 +1175,11 @@ h3#serverstatusqueries span {
     display:inline;
 }
 
-table#serverstatusqueriesdetails th.headerSortUp img.sortableIcon, table#serverstatusvariables th.headerSortUp img.sortableIcon {
+th.headerSortUp img.sortableIcon {
     background-image:url(<?php echo $_SESSION['PMA_Theme']->getImgPath(); ?>s_asc.png);
 }
-table#serverstatusqueriesdetails th.headerSortDown img.sortableIcon, table#serverstatusvariables th.headerSortDown img.sortableIcon {
+
+th.headerSortDown img.sortableIcon {
     background-image:url(<?php echo $_SESSION['PMA_Theme']->getImgPath(); ?>s_desc.png);
 }