Merge remote-tracking branch 'origin/QA_4_2' into QA_4_2

ChangeLog

@@ -9,6 +9,7 @@ phpMyAdmin - ChangeLog
 - bug       Respect ['ShowCreateDb'] in the navi panel
 - bug #4392 Cannot see databases in nav panel on databases grouping when disabled database expansion
 - bug #4419 No more calendar into search tab
+- bug #4398 Monitor should fit into screen width
 
 4.2.1.0 (2014-05-13)
 - bug #4380 Cannot display table structure with enums containing special characters

js/server_status_monitor.js

@@ -3,7 +3,8 @@ var runtime = {},
     server_time_diff,
     server_os,
     is_superuser,
-    server_db_isLocal;
+    server_db_isLocal,
+    chartSize;
 AJAX.registerOnload('server_status_monitor.js', function () {
     var $js_data_form = $('#js_data');
     server_time_diff  = new Date().getTime() - $js_data_form.find("input[name=server_time]").val();
@@ -383,7 +384,7 @@ AJAX.registerOnload('server_status_monitor.js', function () {
             $("#chartGrid").sortableTable({
                 ignoreRect: {
                     top: 8,
-                    left: chartSize().width - 63,
+                    left: chartSize.width - 63,
                     width: 54,
                     height: 24
                 }
@@ -400,10 +401,13 @@ AJAX.registerOnload('server_status_monitor.js', function () {
     $('div.popupContent select[name="chartColumns"]').change(function () {
         monitorSettings.columns = parseInt(this.value, 10);
 
-        var newSize = chartSize();
-
+        calculateChartSize();
         // Empty cells should keep their size so you can drop onto them
-        $('#chartGrid tr td').css('width', newSize.width + 'px');
+        $('#chartGrid tr td').css('width', chartSize.width + 'px');
+        $('#chartGrid .monitorChart').css({
+            width: chartSize.width + 'px',
+            height: chartSize.height + 'px'
+        });
 
         /* Reorder all charts that it fills all column cells */
         var numColumns;
@@ -441,7 +445,7 @@ AJAX.registerOnload('server_status_monitor.js', function () {
         }
 
         if (monitorSettings.gridMaxPoints == 'auto') {
-            runtime.gridMaxPoints = Math.round((newSize.width - 40) / 12);
+            runtime.gridMaxPoints = Math.round((chartSize.width - 40) / 12);
         }
 
         runtime.xmin = new Date().getTime() - server_time_diff - runtime.gridMaxPoints * monitorSettings.gridRefresh;
@@ -451,6 +455,7 @@ AJAX.registerOnload('server_status_monitor.js', function () {
             $("#chartGrid").sortableTable('refresh');
         }
 
+        refreshChartGrid();
         saveMonitor(); // Save settings
     });
 
@@ -999,7 +1004,8 @@ AJAX.registerOnload('server_status_monitor.js', function () {
         }
 
         // Empty cells should keep their size so you can drop onto them
-        $('#chartGrid tr td').css('width', chartSize().width + 'px');
+        calculateChartSize();
+        $('#chartGrid tr td').css('width', chartSize.width + 'px');
 
         buildRequiredDataList();
         refreshChartGrid();
@@ -1026,11 +1032,18 @@ AJAX.registerOnload('server_status_monitor.js', function () {
     }
 
     /* Calculactes the dynamic chart size that depends on the column width */
-    function chartSize() {
-        var wdt = $('#logTable').innerWidth() / monitorSettings.columns - (monitorSettings.columns - 1) * chartSpacing.width;
-        return {
-            width: wdt,
-            height: 0.75 * wdt
+    function calculateChartSize() {
+        var panelWidth;
+        if ($("body").height() > $(window).height()) { // has vertical scroll bar
+            panelWidth = $('#logTable').innerWidth();
+        } else {
+            panelWidth = $('#logTable').innerWidth() - 10; // leave some space for vertical scroll bar
+        }
+
+        var wdt = (panelWidth - monitorSettings.columns * chartSpacing.width) / monitorSettings.columns;
+        chartSize = {
+            width: Math.floor(wdt),
+            height: Math.floor(0.75 * wdt)
         };
     }
 
@@ -1115,10 +1128,15 @@ AJAX.registerOnload('server_status_monitor.js', function () {
                 $('#chartGrid').append('<tr></tr>');
             }
 
+            if (!chartSize) {
+                calculateChartSize();
+            }
             $('#chartGrid tr:last').append(
                 '<td><div id="gridChartContainer' + runtime.chartAI + '" class="">' +
-                '<div class="ui-state-default monitorChart" id="' +
-                'gridchart' + runtime.chartAI + '"></div></div></td>'
+                '<div class="ui-state-default monitorChart"' +
+                ' id="gridchart' + runtime.chartAI + '"' +
+                ' style="width:' + chartSize.width + 'px; height:' + chartSize.height + 'px;"></div>' +
+                '</div></td>'
             );
         }
 

libraries/server_status_monitor.lib.php

@@ -345,10 +345,6 @@ function PMA_getHtmlForSettingsDialog()
     $retval .= '<option>4</option>';
     $retval .= '<option>5</option>';
     $retval .= '<option>6</option>';
-    $retval .= '<option>7</option>';
-    $retval .= '<option>8</option>';
-    $retval .= '<option>9</option>';
-    $retval .= '<option>10</option>';
     $retval .= '</select>';
     $retval .= '</div>';
     $retval .= '<div class="clearfloat paddingtop">';

themes/original/css/common.css.php

@@ -1023,10 +1023,15 @@ div#chartVariableSettings {
     margin-left:10px;
 }
 
+table#chartGrid td {
+    padding: 3px;
+    margin: 0;
+}
+
 table#chartGrid div.monitorChart {
     background: #EBEBEB;
-    width: 400px;
-    height: 300px;
+    overflow: hidden;
+    border: none;
 }
 
 div#serverstatus div.tabLinks {

themes/pmahomme/css/common.css.php

@@ -1336,10 +1336,15 @@ div#chartVariableSettings {
     margin-left: 10px;
 }
 
+table#chartGrid td {
+    padding: 3px;
+    margin: 0;
+}
+
 table#chartGrid div.monitorChart {
     background: #EBEBEB;
-    width: 400px;
-    height: 300px;
+    overflow: hidden;
+    border: none;
 }
 
 div#serverstatus div.tabLinks {