1 /* vim: set expandtab sw=4 ts=4 sts=4: */
4 $('div#statustabs_charting div.tabLinks').show();
5 $('div#statustabs_charting img#loadingMonitorIcon').remove();
6 // Codemirror is loaded on demand so we might need to initialize it
7 if (! codemirror_editor) {
8 var elm = $('#sqlquery');
9 if (elm.length > 0 && typeof CodeMirror != 'undefined') {
10 codemirror_editor = CodeMirror.fromTextArea(elm[0], { lineNumbers: true, matchBrackets: true, indentUnit: 4, mode: "text/x-mysql" });
13 // Timepicker is loaded on demand so we need to initialize datetime fields from the 'load log' dialog
14 $('div#logAnalyseDialog .datetimefield').each(function() {
15 PMA_addDatepicker($(this));
18 /**** Monitor charting implementation ****/
19 /* Saves the previous ajax response for differential values */
20 var oldChartData = null;
21 // Holds about to created chart
25 // Whenever the monitor object (runtime.charts) or the settings object (monitorSettings)
26 // changes in a way incompatible to the previous version, increase this number
27 // It will reset the users monitor and settings object in his localStorage to the default configuration
28 var monitorProtocolVersion = '1.0';
30 // Runtime parameter of the monitor, is being fully set in initGrid()
32 // Holds all visible charts in the grid
34 // Stores the timeout handler so it can be cleared
36 // Stores the GET request to refresh the charts
38 // Chart auto increment
40 // To play/pause the monitor
42 // Object that contains a list of nodes that need to be retrieved from the server for chart updates
44 // Current max points per chart (needed for auto calculation)
46 // displayed time frame
51 var monitorSettings = null;
53 var defaultMonitorSettings = {
55 chartSize: { width: 295, height: 250 },
56 // Max points in each chart. Settings it to 'auto' sets gridMaxPoints to (chartwidth - 40) / 12
57 gridMaxPoints: 'auto',
58 /* Refresh rate of all grid charts in ms */
62 // Allows drag and drop rearrange and print/edit icons on charts
65 /* List of preconfigured charts that the user may select */
67 // Query cache efficiency
69 title: PMA_messages['strQueryCacheEfficiency'],
71 label: PMA_messages['strQueryCacheEfficiency']
74 dataPoints: [{type: 'statusvar', name: 'Qcache_hits'}, {type: 'statusvar', name: 'Com_select'}],
81 title: PMA_messages['strQueryCacheUsage'],
83 label: PMA_messages['strQueryCacheUsed']
86 dataPoints: [{type: 'statusvar', name: 'Qcache_free_memory'}, {type: 'servervar', name: 'query_cache_size'}],
93 // time span selection
94 var selectionTimeDiff = new Array();
95 var selectionStartX, selectionStartY, selectionEndX, selectionEndY;
96 var drawTimeSpan = false;
101 /* Add OS specific system info charts to the preset chart list */
104 $.extend(presetCharts, {
106 title: PMA_messages['strSystemCPUUsage'],
108 label: PMA_messages['strAverageLoad']
111 dataPoints: [{ type: 'cpu', name: 'loadavg'}]
117 title: PMA_messages['strSystemMemory'],
119 label: PMA_messages['strTotalMemory'],
124 label: PMA_messages['strUsedMemory'],
128 nodes: [{ dataPoints: [{ type: 'memory', name: 'MemTotal' }], valueDivisor: 1024 },
129 { dataPoints: [{ type: 'memory', name: 'MemUsed' }], valueDivisor: 1024 }
135 title: PMA_messages['strSystemSwap'],
137 label: PMA_messages['strTotalSwap'],
141 label: PMA_messages['strUsedSwap'],
145 nodes: [{ dataPoints: [{ type: 'memory', name: 'SwapTotal' }]},
146 { dataPoints: [{ type: 'memory', name: 'SwapUsed' }]}
154 $.extend(presetCharts, {
156 title: PMA_messages['strSystemCPUUsage'],
158 label: PMA_messages['strAverageLoad']
160 nodes: [{ dataPoints: [{ type: 'cpu', name: 'irrelevant' }], transformFn: 'cpu-linux'}],
164 title: PMA_messages['strSystemMemory'],
166 { label: PMA_messages['strUsedMemory'], fill:true, stackSeries: true},
167 { label: PMA_messages['strCachedMemory'], fill:true, stackSeries: true},
168 { label: PMA_messages['strBufferedMemory'], fill:true, stackSeries: true},
169 { label: PMA_messages['strFreeMemory'], fill:true, stackSeries: true}
172 { dataPoints: [{ type: 'memory', name: 'MemUsed' }], valueDivisor: 1024 },
173 { dataPoints: [{ type: 'memory', name: 'Cached' }], valueDivisor: 1024 },
174 { dataPoints: [{ type: 'memory', name: 'Buffers' }], valueDivisor: 1024 },
175 { dataPoints: [{ type: 'memory', name: 'MemFree' }], valueDivisor: 1024 }
180 title: PMA_messages['strSystemSwap'],
182 { label: PMA_messages['strUsedSwap'], fill:true, stackSeries: true},
183 { label: PMA_messages['strCachedSwap'], fill:true, stackSeries: true},
184 { label: PMA_messages['strFreeSwap'], fill:true, stackSeries: true}
187 { dataPoints: [{ type: 'memory', name: 'SwapUsed' }], valueDivisor: 1024 },
188 { dataPoints: [{ type: 'memory', name: 'SwapCached' }], valueDivisor: 1024 },
189 { dataPoints: [{ type: 'memory', name: 'SwapFree' }], valueDivisor: 1024 }
197 $.extend(presetCharts, {
199 title: PMA_messages['strSystemCPUUsage'],
201 label: PMA_messages['strAverageLoad']
204 dataPoints: [{ type: 'cpu', name: 'loadavg'}]
209 title: PMA_messages['strSystemMemory'],
211 { label: PMA_messages['strUsedMemory'], fill:true, stackSeries: true},
212 { label: PMA_messages['strFreeMemory'], fill:true, stackSeries: true}
215 { dataPoints: [{ type: 'memory', name: 'MemUsed' }], valueDivisor: 1024 },
216 { dataPoints: [{ type: 'memory', name: 'MemFree' }], valueDivisor: 1024 }
221 title: PMA_messages['strSystemSwap'],
223 { label: PMA_messages['strUsedSwap'], fill:true, stackSeries: true},
224 { label: PMA_messages['strFreeSwap'], fill:true, stackSeries: true}
227 { dataPoints: [{ type: 'memory', name: 'SwapUsed' }], valueDivisor: 1024 },
228 { dataPoints: [{ type: 'memory', name: 'SwapFree' }], valueDivisor: 1024 }
236 // Default setting for the chart grid
238 'c0': { title: PMA_messages['strQuestions'],
239 series: [{label: PMA_messages['strQuestions']}],
240 nodes: [{dataPoints: [{ type: 'statusvar', name: 'Questions' }], display: 'differential' }],
244 title: PMA_messages['strChartConnectionsTitle'],
245 series: [ { label: PMA_messages['strConnections']},
246 { label: PMA_messages['strProcesses']} ],
247 nodes: [ { dataPoints: [{ type: 'statusvar', name: 'Connections' }], display: 'differential' },
248 { dataPoints: [{ type: 'proc', name: 'processes' }] }
253 title: PMA_messages['strTraffic'],
255 { label: PMA_messages['strBytesSent']},
256 { label: PMA_messages['strBytesReceived']}
259 { dataPoints: [{ type: 'statusvar', name: 'Bytes_sent' }], display: 'differential', valueDivisor: 1024 },
260 { dataPoints: [{ type: 'statusvar', name: 'Bytes_received' }], display: 'differential', valueDivisor: 1024 }
266 // Server is localhost => We can add cpu/memory/swap to the default chart
267 if (server_db_isLocal) {
268 defaultChartGrid['c3'] = presetCharts['cpu'];
269 defaultChartGrid['c4'] = presetCharts['memory'];
270 defaultChartGrid['c5'] = presetCharts['swap'];
273 /* Buttons that are on the top right corner of each chart */
277 symbol: 'url(' + pmaThemeImage + 's_cog.png)',
279 symbolFill: '#B5C9DF',
280 hoverSymbolFill: '#779ABF',
281 _titleKey: 'settings',
282 menuName: 'gridsettings',
284 textKey: 'editChart',
285 onclick: function() {
289 textKey: 'removeChart',
290 onclick: function() {
297 $('a[href="#rearrangeCharts"], a[href="#endChartEditMode"]').click(function() {
298 editMode = !editMode;
299 if ($(this).attr('href') == '#endChartEditMode') {
303 // Icon graphics have zIndex 19, 20 and 21. Let's just hope nothing else has the same zIndex
304 $('table#chartGrid div svg').find('*[zIndex=20], *[zIndex=21], *[zIndex=19]').toggle(editMode)
306 $('a[href="#endChartEditMode"]').toggle(editMode);
309 // Close the settings popup
310 $('#statustabs_charting .popupContent').hide().removeClass('openedPopup');
312 $("#chartGrid").sortableTable({
315 left: chartSize().width - 63,
320 // Drop event. The drag child element is moved into the drop element
321 // and vice versa. So the parameters are switched.
322 drop: function(drag, drop, pos) {
323 var dragKey, dropKey, dropRender;
324 var dragRender = $(drag).children().first().attr('id');
326 if ($(drop).children().length > 0) {
327 dropRender = $(drop).children().first().attr('id');
330 // Find the charts in the array
331 $.each(runtime.charts, function(key, value) {
332 if (value.chart.options.chart.renderTo == dragRender) {
335 if (dropRender && value.chart.options.chart.renderTo == dropRender) {
340 // Case 1: drag and drop are charts -> Switch keys
343 dragChart = runtime.charts[dragKey];
344 runtime.charts[dragKey] = runtime.charts[dropKey];
345 runtime.charts[dropKey] = dragChart;
347 // Case 2: drop is a empty cell => just completely rebuild the ids
349 var dropKeyNum = parseInt(dropKey.substr(1));
350 var insertBefore = pos.col + pos.row * monitorSettings.columns;
352 var newChartList = {};
355 $.each(runtime.charts, function(key, value) {
356 if (key != dropKey) {
363 // Rebuilds all ids, with the dragged chart correctly inserted
364 for (var i = 0; i<keys.length; i++) {
365 if (keys[i] == insertBefore) {
366 newChartList['c' + (c++)] = runtime.charts[dropKey];
367 insertBefore = -1; // Insert ok
369 newChartList['c' + (c++)] = runtime.charts[keys[i]];
372 // Not inserted => put at the end
373 if (insertBefore != -1) {
374 newChartList['c' + (c++)] = runtime.charts[dropKey];
377 runtime.charts = newChartList;
387 $("#chartGrid").sortableTable('destroy');
388 saveMonitor(); // Save settings
395 $('div#statustabs_charting div.popupContent select[name="chartColumns"]').change(function() {
396 monitorSettings.columns = parseInt(this.value);
398 var newSize = chartSize();
400 // Empty cells should keep their size so you can drop onto them
401 $('table#chartGrid tr td').css('width', newSize.width + 'px');
403 /* Reorder all charts that it fills all column cells */
405 var $tr = $('table#chartGrid tr:first');
407 while($tr.length != 0) {
409 // To many cells in one row => put into next row
410 $tr.find('td').each(function() {
411 if (numColumns > monitorSettings.columns) {
412 if ($tr.next().length == 0) {
413 $tr.after('<tr></tr>');
415 $tr.next().prepend($(this));
420 // To little cells in one row => for each cell to little, move all cells backwards by 1
421 if ($tr.next().length > 0) {
422 var cnt = monitorSettings.columns - $tr.find('td').length;
423 for (var i = 0; i < cnt; i++) {
424 $tr.append($tr.next().find('td:first'));
425 $tr.nextAll().each(function() {
426 if ($(this).next().length != 0) {
427 $(this).append($(this).next().find('td:first'));
437 /* Apply new chart size to all charts */
438 $.each(runtime.charts, function(key, value) {
446 if (monitorSettings.gridMaxPoints == 'auto') {
447 runtime.gridMaxPoints = Math.round((newSize.width - 40) / 12);
450 runtime.xmin = new Date().getTime() - server_time_diff - runtime.gridMaxPoints * monitorSettings.gridRefresh;
451 runtime.xmax = new Date().getTime() - server_time_diff + monitorSettings.gridRefresh;
454 $("#chartGrid").sortableTable('refresh');
457 saveMonitor(); // Save settings
460 $('div#statustabs_charting div.popupContent select[name="gridChartRefresh"]').change(function() {
461 monitorSettings.gridRefresh = parseInt(this.value) * 1000;
462 clearTimeout(runtime.refreshTimeout);
464 if (runtime.refreshRequest) {
465 runtime.refreshRequest.abort();
468 runtime.xmin = new Date().getTime() - server_time_diff - runtime.gridMaxPoints * monitorSettings.gridRefresh;
469 runtime.xmax = new Date().getTime() - server_time_diff + monitorSettings.gridRefresh;
471 $.each(runtime.charts, function(key, value) {
472 value.chart['axes']['xaxis']['max'] = runtime.xmax;
473 value.chart['axes']['xaxis']['min'] = runtime.xmin;
476 runtime.refreshTimeout = setTimeout(refreshChartGrid, monitorSettings.gridRefresh);
478 saveMonitor(); // Save settings
481 $('a[href="#addNewChart"]').click(function() {
482 var dlgButtons = { };
484 dlgButtons[PMA_messages['strAddChart']] = function() {
485 var type = $('input[name="chartType"]:checked').val();
487 if (type == 'preset') {
488 newChart = presetCharts[$('div#addChartDialog select[name="presetCharts"]').prop('value')];
490 // If user builds his own chart, it's being set/updated each time he adds a series
491 // So here we only warn if he didn't add a series yet
492 if (! newChart || ! newChart.nodes || newChart.nodes.length == 0) {
493 alert(PMA_messages['strAddOneSeriesWarning']);
498 newChart.title = $('input[name="chartTitle"]').attr('value');
499 // Add a cloned object to the chart grid
500 addChart($.extend(true, {}, newChart));
504 saveMonitor(); // Save settings
506 $(this).dialog("close");
509 dlgButtons[PMA_messages['strClose']] = function() {
511 $('span#clearSeriesLink').hide();
512 $('#seriesPreview').html('');
513 $(this).dialog("close");
516 var $presetList = $('div#addChartDialog select[name="presetCharts"]');
517 if ($presetList.html().length == 0) {
518 $.each(presetCharts, function(key, value) {
519 $presetList.append('<option value="' + key + '">' + value.title + '</option>');
521 $presetList.change(function() {
522 $('input#chartPreset').trigger('click');
523 $('input[name="chartTitle"]').attr('value', presetCharts[$(this).prop('value')].title);
527 $('div#addChartDialog').dialog({
533 $('div#addChartDialog #seriesPreview').html('<i>' + PMA_messages['strNone'] + '</i>');
538 $('a[href="#exportMonitorConfig"]').click(function() {
541 $.each(runtime.charts, function(key, elem) {
543 gridCopy[key].nodes = elem.nodes;
544 gridCopy[key].settings = elem.settings;
545 gridCopy[key].title = elem.title;
549 monitorCharts: gridCopy,
550 monitorSettings: monitorSettings
554 $('body').append($form = $('<form method="post" action="file_echo.php?' + url_query + '&filename=1" style="display:none;"></form>'));
556 $form.append('<input type="hidden" name="monitorconfig" value="' + encodeURI($.toJSON(exportData)) + '">');
561 $('a[href="#importMonitorConfig"]').click(function() {
562 $('div#emptyDialog').dialog({title: PMA_messages['strImportDialogTitle']});
563 $('div#emptyDialog').html(PMA_messages['strImportDialogMessage'] + ':<br/><form action="file_echo.php?' + url_query + '&import=1" method="post" enctype="multipart/form-data">' +
564 '<input type="file" name="file"> <input type="hidden" name="import" value="1"> </form>');
568 dlgBtns[PMA_messages['strImport']] = function() {
570 $('body').append($iframe = $('<iframe id="monitorConfigUpload" style="display:none;"></iframe>'));
571 var d = $iframe[0].contentWindow.document;
575 $iframe.load(function() {
578 // Try loading config
580 var data = $('body', $('iframe#monitorConfigUpload')[0].contentWindow.document).html();
581 // Chrome wraps around '<pre style="word-wrap: break-word; white-space: pre-wrap;">' to any text content -.-
582 json = $.secureEvalJSON(data.substring(data.indexOf("{"), data.lastIndexOf("}") + 1));
584 alert(PMA_messages['strFailedParsingConfig']);
585 $('div#emptyDialog').dialog('close');
589 // Basic check, is this a monitor config json?
590 if (!json || ! json.monitorCharts || ! json.monitorCharts) {
591 alert(PMA_messages['strFailedParsingConfig']);
592 $('div#emptyDialog').dialog('close');
596 // If json ok, try applying config
598 window.localStorage['monitorCharts'] = $.toJSON(json.monitorCharts);
599 window.localStorage['monitorSettings'] = $.toJSON(json.monitorSettings);
602 alert(PMA_messages['strFailedBuildingGrid']);
603 // If an exception is thrown, load default again
604 window.localStorage.removeItem('monitorCharts');
605 window.localStorage.removeItem('monitorSettings');
609 $('div#emptyDialog').dialog('close');
612 $("body", d).append($form = $('div#emptyDialog').find('form'));
614 $('div#emptyDialog').append('<img class="ajaxIcon" src="' + pmaThemeImage + 'ajax_clock_small.gif" alt="">');
617 dlgBtns[PMA_messages['strCancel']] = function() {
618 $(this).dialog('close');
622 $('div#emptyDialog').dialog({
629 $('a[href="#clearMonitorConfig"]').click(function() {
630 window.localStorage.removeItem('monitorCharts');
631 window.localStorage.removeItem('monitorSettings');
632 window.localStorage.removeItem('monitorVersion');
637 $('a[href="#pauseCharts"]').click(function() {
638 runtime.redrawCharts = ! runtime.redrawCharts;
639 if (! runtime.redrawCharts) {
640 $(this).html(PMA_getImage('play.png') + ' ' + PMA_messages['strResumeMonitor']);
642 $(this).html(PMA_getImage('pause.png') + ' ' + PMA_messages['strPauseMonitor']);
643 if (! runtime.charts) {
645 $('a[href="#settingsPopup"]').show();
651 $('a[href="#monitorInstructionsDialog"]').click(function() {
652 var $dialog = $('div#monitorInstructionsDialog');
657 }).find('img.ajaxIcon').show();
659 var loadLogVars = function(getvars) {
660 vars = { ajax_request: true, logging_vars: true };
662 $.extend(vars, getvars);
665 $.get('server_status.php?' + url_query, vars,
667 var logVars = $.parseJSON(data),
668 icon = PMA_getImage('s_success.png'), msg='', str='';
670 if (logVars['general_log'] == 'ON') {
671 if (logVars['slow_query_log'] == 'ON') {
672 msg = PMA_messages['strBothLogOn'];
674 msg = PMA_messages['strGenLogOn'];
678 if (msg.length == 0 && logVars['slow_query_log'] == 'ON') {
679 msg = PMA_messages['strSlowLogOn'];
682 if (msg.length == 0) {
683 icon = PMA_getImage('s_error.png');
684 msg = PMA_messages['strBothLogOff'];
687 str = '<b>' + PMA_messages['strCurrentSettings'] + '</b><br><div class="smallIndent">';
688 str += icon + msg + '<br />';
690 if (logVars['log_output'] != 'TABLE') {
691 str += PMA_getImage('s_error.png') + ' ' + PMA_messages['strLogOutNotTable'] + '<br />';
693 str += PMA_getImage('s_success.png') + ' ' + PMA_messages['strLogOutIsTable'] + '<br />';
696 if (logVars['slow_query_log'] == 'ON') {
697 if (logVars['long_query_time'] > 2) {
698 str += PMA_getImage('s_attention.png') + ' '
699 + $.sprintf(PMA_messages['strSmallerLongQueryTimeAdvice'], logVars['long_query_time'])
703 if (logVars['long_query_time'] < 2) {
704 str += PMA_getImage('s_success.png') + ' '
705 + $.sprintf(PMA_messages['strLongQueryTimeSet'], logVars['long_query_time'])
713 str += '<p></p><b>' + PMA_messages['strChangeSettings'] + '</b>';
714 str += '<div class="smallIndent">';
715 str += PMA_messages['strSettingsAppliedGlobal'] + '<br/>';
717 var varValue = 'TABLE';
718 if (logVars['log_output'] == 'TABLE') {
722 str += '- <a class="set" href="#log_output-' + varValue + '">'
723 + $.sprintf(PMA_messages['strSetLogOutput'], varValue)
726 if (logVars['general_log'] != 'ON') {
727 str += '- <a class="set" href="#general_log-ON">'
728 + $.sprintf(PMA_messages['strEnableVar'], 'general_log')
731 str += '- <a class="set" href="#general_log-OFF">'
732 + $.sprintf(PMA_messages['strDisableVar'], 'general_log')
736 if (logVars['slow_query_log'] != 'ON') {
737 str += '- <a class="set" href="#slow_query_log-ON">'
738 + $.sprintf(PMA_messages['strEnableVar'], 'slow_query_log')
741 str += '- <a class="set" href="#slow_query_log-OFF">'
742 + $.sprintf(PMA_messages['strDisableVar'], 'slow_query_log')
747 if (logVars['long_query_time'] > 2) {
751 str += '- <a class="set" href="#long_query_time-' + varValue + '">'
752 + $.sprintf(PMA_messages['setSetLongQueryTime'], varValue)
756 str += PMA_messages['strNoSuperUser'] + '<br/>';
761 $dialog.find('div.monitorUse').toggle(
762 logVars['log_output'] == 'TABLE' && (logVars['slow_query_log'] == 'ON' || logVars['general_log'] == 'ON')
765 $dialog.find('div.ajaxContent').html(str);
766 $dialog.find('img.ajaxIcon').hide();
767 $dialog.find('a.set').click(function() {
768 var nameValue = $(this).attr('href').split('-');
769 loadLogVars({ varName: nameValue[0].substr(1), varValue: nameValue[1]});
770 $dialog.find('img.ajaxIcon').show();
782 $('input[name="chartType"]').change(function() {
783 $('#chartVariableSettings').toggle(this.checked && this.value == 'variable');
784 var title = $('input[name="chartTitle"]').attr('value');
785 if (title == PMA_messages['strChartTitle']
786 || title == $('label[for="' + $('input[name="chartTitle"]').data('lastRadio') + '"]').text()
788 $('input[name="chartTitle"]')
789 .data('lastRadio', $(this).attr('id'))
790 .attr('value', $('label[for="' + $(this).attr('id') + '"]').text());
795 $('input[name="useDivisor"]').change(function() {
796 $('span.divisorInput').toggle(this.checked);
798 $('input[name="useUnit"]').change(function() {
799 $('span.unitInput').toggle(this.checked);
802 $('select[name="varChartList"]').change(function () {
803 if (this.selectedIndex != 0) {
804 $('#variableInput').attr('value', this.value);
808 $('a[href="#kibDivisor"]').click(function() {
809 $('input[name="valueDivisor"]').attr('value', 1024);
810 $('input[name="valueUnit"]').attr('value', PMA_messages['strKiB']);
811 $('span.unitInput').toggle(true);
812 $('input[name="useUnit"]').prop('checked', true);
816 $('a[href="#mibDivisor"]').click(function() {
817 $('input[name="valueDivisor"]').attr('value', 1024*1024);
818 $('input[name="valueUnit"]').attr('value', PMA_messages['strMiB']);
819 $('span.unitInput').toggle(true);
820 $('input[name="useUnit"]').prop('checked', true);
824 $('a[href="#submitClearSeries"]').click(function() {
825 $('#seriesPreview').html('<i>' + PMA_messages['strNone'] + '</i>');
827 $('span#clearSeriesLink').hide();
830 $('a[href="#submitAddSeries"]').click(function() {
831 if ($('input#variableInput').attr('value').length == 0) {
835 if (newChart == null) {
836 $('#seriesPreview').html('');
839 title: $('input[name="chartTitle"]').attr('value'),
845 dataPoints: [{ type: 'statusvar', name: $('input#variableInput').attr('value') }],
846 name: $('input#variableInput').attr('value'),
847 display: $('input[name="differentialValue"]').attr('checked') ? 'differential' : ''
850 if (serie.dataPoint == 'Processes') {
851 serie.dataType='proc';
854 if ($('input[name="useDivisor"]').attr('checked')) {
855 serie.valueDivisor = parseInt($('input[name="valueDivisor"]').attr('value'));
858 if ($('input[name="useUnit"]').attr('checked')) {
859 serie.unit = $('input[name="valueUnit"]').attr('value');
862 var str = serie.display == 'differential' ? ', ' + PMA_messages['strDifferential'] : '';
863 str += serie.valueDivisor ? (', ' + $.sprintf(PMA_messages['strDividedBy'], serie.valueDivisor)) : '';
864 str += serie.unit ? (', ' + PMA_messages['strUnit'] + ': ' + serie.unit) : '';
866 $('#seriesPreview').append('- ' + serie.name + str + '<br>');
868 newChart.nodes.push(serie);
870 $('input#variableInput').attr('value', '');
871 $('input[name="differentialValue"]').attr('checked', true);
872 $('input[name="useDivisor"]').attr('checked', false);
873 $('input[name="useUnit"]').attr('checked', false);
874 $('input[name="useDivisor"]').trigger('change');
875 $('input[name="useUnit"]').trigger('change');
876 $('select[name="varChartList"]').get(0).selectedIndex = 0;
878 $('span#clearSeriesLink').show();
883 $("input#variableInput").autocomplete({
884 source: variableNames
887 /* Initializes the monitor, called only once */
888 function initGrid() {
890 /* Apply default values & config */
891 if (window.localStorage) {
892 if (window.localStorage['monitorCharts']) {
893 runtime.charts = $.parseJSON(window.localStorage['monitorCharts']);
895 if (window.localStorage['monitorSettings']) {
896 monitorSettings = $.parseJSON(window.localStorage['monitorSettings']);
899 $('a[href="#clearMonitorConfig"]').toggle(runtime.charts != null);
901 if (runtime.charts != null && monitorProtocolVersion != window.localStorage['monitorVersion']) {
902 $('div#emptyDialog').dialog({title: PMA_messages['strIncompatibleMonitorConfig']});
903 $('div#emptyDialog').html(PMA_messages['strIncompatibleMonitorConfigDescription']);
906 dlgBtns[PMA_messages['strClose']] = function() { $(this).dialog('close'); };
908 $('div#emptyDialog').dialog({
915 if (runtime.charts == null) {
916 runtime.charts = defaultChartGrid;
918 if (monitorSettings == null) {
919 monitorSettings = defaultMonitorSettings;
922 $('select[name="gridChartRefresh"]').attr('value', monitorSettings.gridRefresh / 1000);
923 $('select[name="chartColumns"]').attr('value', monitorSettings.columns);
925 if (monitorSettings.gridMaxPoints == 'auto') {
926 runtime.gridMaxPoints = Math.round((monitorSettings.chartSize.width - 40) / 12);
928 runtime.gridMaxPoints = monitorSettings.gridMaxPoints;
931 runtime.xmin = new Date().getTime() - server_time_diff - runtime.gridMaxPoints * monitorSettings.gridRefresh;
932 runtime.xmax = new Date().getTime() - server_time_diff + monitorSettings.gridRefresh;
934 /* Calculate how much spacing there is between each chart */
935 $('table#chartGrid').html('<tr><td></td><td></td></tr><tr><td></td><td></td></tr>');
937 width: $('table#chartGrid td:nth-child(2)').offset().left
938 - $('table#chartGrid td:nth-child(1)').offset().left,
939 height: $('table#chartGrid tr:nth-child(2) td:nth-child(2)').offset().top
940 - $('table#chartGrid tr:nth-child(1) td:nth-child(1)').offset().top
942 $('table#chartGrid').html('');
944 /* Add all charts - in correct order */
946 $.each(runtime.charts, function(key, value) {
950 for (var i = 0; i<keys.length; i++)
951 addChart(runtime.charts[keys[i]], true);
953 /* Fill in missing cells */
954 var numCharts = $('table#chartGrid .monitorChart').length;
955 var numMissingCells = (monitorSettings.columns - numCharts % monitorSettings.columns) % monitorSettings.columns;
956 for (var i = 0; i < numMissingCells; i++) {
957 $('table#chartGrid tr:last').append('<td></td>');
960 // Empty cells should keep their size so you can drop onto them
961 $('table#chartGrid tr td').css('width', chartSize().width + 'px');
963 buildRequiredDataList();
967 /* Destroys all monitor related resources */
968 function destroyGrid() {
969 if (runtime.charts) {
970 $.each(runtime.charts, function(key, value) {
972 value.chart.destroy();
978 runtime.refreshRequest.abort();
981 clearTimeout(runtime.refreshTimeout);
984 $('table#chartGrid').html('');
986 runtime.charts = null;
988 monitorSettings = null;
991 /* Calls destroyGrid() and initGrid(), but before doing so it saves the chart
992 * data from each chart and restores it after the monitor is initialized again */
993 function rebuildGrid() {
995 if (runtime.charts) {
997 $.each(runtime.charts, function(key, chartObj) {
998 for (var i = 0; i < chartObj.nodes.length; i++) {
999 oldData[chartObj.nodes[i].dataPoint] = [];
1000 for (var j = 0; j < chartObj.chart.series[i].data.length; j++)
1001 oldData[chartObj.nodes[i].dataPoint].push([chartObj.chart.series[i].data[j].x, chartObj.chart.series[i].data[j].y]);
1010 $.each(runtime.charts, function(key, chartObj) {
1011 for (var j = 0; j < chartObj.nodes.length; j++) {
1012 if (oldData[chartObj.nodes[j].dataPoint]) {
1013 chartObj.chart.series[j].setData(oldData[chartObj.nodes[j].dataPoint]);
1020 /* Calculactes the dynamic chart size that depends on the column width */
1021 function chartSize() {
1022 var wdt = $('div#logTable').innerWidth() / monitorSettings.columns - (monitorSettings.columns - 1) * chartSpacing.width;
1029 /* Adds a chart to the chart grid */
1030 function addChart(chartObj, initialize) {
1033 title: chartObj.title,
1037 background: 'rgba(0,0,0,0)'
1041 renderer: $.jqplot.DateAxisRenderer,
1043 formatString: '%H:%M:%S',
1066 settings.series = chartObj.series;
1068 if ($('#' + 'gridchart' + runtime.chartAI).length == 0) {
1069 var numCharts = $('table#chartGrid .monitorChart').length;
1071 if (numCharts == 0 || !( numCharts % monitorSettings.columns)) {
1072 $('table#chartGrid').append('<tr></tr>');
1075 $('table#chartGrid tr:last').append('<td><div class="ui-state-default monitorChart" id="' + 'gridchart' + runtime.chartAI + '"></div></td>');
1079 var emptyArr = new Array(2);
1080 for (i in chartObj.series){
1081 series.push([emptyArr]);
1084 chartObj.chart = $.jqplot('gridchart' + runtime.chartAI, series, settings);
1085 chartObj.numPoints = 0;
1087 if (initialize != true) {
1088 runtime.charts['c' + runtime.chartAI] = chartObj;
1089 buildRequiredDataList();
1092 // time span selection
1093 $('#gridchart' + runtime.chartAI).bind('jqplotMouseDown', function(ev, gridpos, datapos, neighbor, plot) {
1094 drawTimeSpan = true;
1095 selectionTimeDiff.push(datapos.xaxis);
1096 if($('#selection_box').length) {
1097 $('#selection_box').remove();
1099 selectionBox = $('<div id="selection_box" style="z-index:1000;height:250px;position:absolute;background-color:#87CEEB;opacity:0.4;filter:alpha(opacity=40);pointer-events:none;">');
1100 $(document.body).append(selectionBox);
1101 selectionStartX = ev.pageX;
1102 selectionStartY = ev.pageY;
1104 .attr({id: 'selection_box'})
1106 top: selectionStartY-gridpos.y,
1107 left: selectionStartX
1112 $('#gridchart' + runtime.chartAI).bind('jqplotMouseUp', function(ev, gridpos, datapos, neighbor, plot) {
1116 selectionTimeDiff.push(datapos.xaxis);
1118 if(selectionTimeDiff[1] < selectionTimeDiff[0]) {
1119 selectionTimeDiff = [];
1122 //get date from timestamp
1123 var min = new Date(Math.ceil(selectionTimeDiff[0]));
1124 var max = new Date(Math.ceil(selectionTimeDiff[1]));
1125 PMA_getLogAnalyseDialog(min, max);
1126 selectionTimeDiff = [];
1127 drawTimeSpan = false;
1130 $('#gridchart' + runtime.chartAI).bind('jqplotMouseMove', function(ev, gridpos, datapos, neighbor, plot) {
1132 if(neighbor != null) {
1133 if ($('#tooltip_box').length) {
1136 left: ev.pageX + 15,
1142 var xVal = new Date(Math.ceil(neighbor.data[0]));
1143 var xValHours = xVal.getHours();
1144 (xValHours < 10) ? (xValHours = "0" + xValHours) : "";
1146 var xValMinutes = xVal.getMinutes();
1147 (xValMinutes < 10) ? (xValMinutes = "0" + xValMinutes) : "";
1149 var xValSeconds = xVal.getSeconds();
1150 (xValSeconds < 10) ? (xValSeconds = "0" + xValSeconds) : "";
1152 xVal = xValHours + ":" + xValMinutes + ":" + xValSeconds;
1153 var s = '<b>' + xVal + '<br/>' + neighbor.data[1] + '</b>';
1155 $('#tooltip_box').html(s);
1161 if (selectionStartX != undefined) {
1164 width: Math.ceil(ev.pageX - selectionStartX)
1171 $('#gridchart' + runtime.chartAI).bind('jqplotMouseEnter', function(ev, gridpos, datapos, neighbor, plot) {
1172 if($('#tooltip_box').length) {
1173 tooltipBox.remove();
1175 tooltipBox = $('<div style="z-index:1000;height:40px;position:absolute;background-color:#FFFFFD;opacity:0.8;filter:alpha(opacity=80);">');
1176 $(document.body).append(tooltipBox);
1178 .attr({id: 'tooltip_box'})
1186 $('#gridchart' + runtime.chartAI).bind('jqplotMouseLeave', function(ev, gridpos, datapos, neighbor, plot) {
1187 if($('#tooltip_box').length) {
1188 tooltipBox.remove();
1190 drawTimeSpan = false;
1193 $(document.body).mouseup(function() {
1194 if($('#selection_box').length) {
1195 selectionBox.remove();
1199 // Edit, Print icon only in edit mode
1200 $('table#chartGrid div svg').find('*[zIndex=20], *[zIndex=21], *[zIndex=19]').toggle(editMode)
1205 /* Opens a dialog that allows one to edit the title and series labels of the supplied chart */
1206 function editChart(chartObj) {
1207 var htmlnode = chartObj.options.chart.renderTo;
1213 var chartKey = null;
1214 $.each(runtime.charts, function(key, value) {
1215 if (value.chart.options.chart.renderTo == htmlnode) {
1222 if (chart == null) {
1226 var htmlStr = '<p><b>' + PMA_messages['strChartTitle'] + ': </b> <br/> <input type="text" size="35" name="chartTitle" value="' + chart.title + '" />';
1227 htmlStr += '</p><p><b>' + PMA_messages['strSeries'] + ':</b> </p><ol>';
1228 for (var i = 0; i<chart.nodes.length; i++) {
1229 htmlStr += '<li><i>' + chart.nodes[i].dataPoints[0].name + ': </i><br/><input type="text" name="chartSerie-' + i + '" value="' + chart.nodes[i].name + '" /></li>';
1233 dlgBtns[PMA_messages['strSave']] = function() {
1234 runtime.charts[chartKey].title = $('div#emptyDialog input[name="chartTitle"]').attr('value');
1235 runtime.charts[chartKey].chart.setTitle({ text: runtime.charts[chartKey].title });
1237 $('div#emptyDialog input[name*="chartSerie"]').each(function() {
1238 var idx = $(this).attr('name').split('-')[1];
1239 runtime.charts[chartKey].nodes[idx].name = $(this).attr('value');
1240 runtime.charts[chartKey].chart.series[idx].name = $(this).attr('value');
1243 $(this).dialog('close');
1246 dlgBtns[PMA_messages['strCancel']] = function() {
1247 $(this).dialog('close');
1250 $('div#emptyDialog').html(htmlStr + '</ol>');
1251 $('div#emptyDialog').dialog({
1252 title: PMA_messages['strChartEdit'],
1259 function PMA_getLogAnalyseDialog(min, max) {
1260 $('#logAnalyseDialog input[name="dateStart"]')
1261 .attr('value', formatDate(min, 'yyyy-MM-dd HH:mm:ss'));
1262 $('#logAnalyseDialog input[name="dateEnd"]')
1263 .attr('value', formatDate(max, 'yyyy-MM-dd HH:mm:ss'));
1267 dlgBtns[PMA_messages['strFromSlowLog']] = function() {
1268 loadLog('slow', min, max);
1269 $(this).dialog("close");
1272 dlgBtns[PMA_messages['strFromGeneralLog']] = function() {
1273 loadLog('general', min, max);
1274 $(this).dialog("close");
1277 $('#logAnalyseDialog').dialog({
1284 function loadLog(type, min, max) {
1285 var dateStart = Date.parse($('#logAnalyseDialog input[name="dateStart"]').prop('value')) || min;
1286 var dateEnd = Date.parse($('#logAnalyseDialog input[name="dateEnd"]').prop('value')) || max;
1292 removeVariables: $('input#removeVariables').prop('checked'),
1293 limitTypes: $('input#limitTypes').prop('checked')
1298 /* Removes a chart from the grid */
1299 function removeChart(chartObj) {
1300 var htmlnode = chartObj.options.chart.renderTo;
1305 $.each(runtime.charts, function(key, value) {
1306 if (value.chart.options.chart.renderTo == htmlnode) {
1307 delete runtime.charts[key];
1312 buildRequiredDataList();
1314 // Using settimeout() because clicking the remove link fires an onclick event
1315 // which throws an error when the chart is destroyed
1316 setTimeout(function() {
1318 $('div#' + htmlnode).remove();
1321 saveMonitor(); // Save settings
1324 /* Called in regular intervalls, this function updates the values of each chart in the grid */
1325 function refreshChartGrid() {
1326 /* Send to server */
1327 runtime.refreshRequest = $.post('server_status.php?' + url_query, {
1331 requiredData: $.toJSON(runtime.dataList)
1335 chartData = $.parseJSON(data);
1337 return serverResponseError();
1342 /* Update values in each graph */
1343 $.each(runtime.charts, function(orderKey, elem) {
1344 var key = elem.chartID;
1346 // If newly added chart, we have no data for it yet
1347 if (! chartData[key]) {
1351 for (var j = 0; j < elem.nodes.length; j++) {
1353 if (i == 0 && j == 0) {
1354 if (oldChartData == null) {
1355 diff = chartData.x - runtime.xmax;
1357 diff = parseInt(chartData.x - oldChartData.x);
1360 runtime.xmin += diff;
1361 runtime.xmax += diff;
1364 //elem.chart.xAxis[0].setExtremes(runtime.xmin, runtime.xmax, false);
1365 /* Calculate y value */
1367 // If transform function given, use it
1368 if (elem.nodes[j].transformFn) {
1369 value = chartValueTransform(
1370 elem.nodes[j].transformFn,
1372 // Check if first iteration (oldChartData==null), or if newly added chart oldChartData[key]==null
1373 (oldChartData == null || oldChartData[key] == null ? null : oldChartData[key][j])
1376 // Otherwise use original value and apply differential and divisor if given,
1377 // in this case we have only one data point per series - located at chartData[key][j][0]
1379 value = parseFloat(chartData[key][j][0].value);
1381 if (elem.nodes[j].display == 'differential') {
1382 if (oldChartData == null || oldChartData[key] == null) {
1385 value -= oldChartData[key][j][0].value;
1388 if (elem.nodes[j].valueDivisor) {
1389 value = value / elem.nodes[j].valueDivisor;
1393 // Set y value, if defined
1394 if (value != undefined) {
1395 elem.chart.series[j].data.push([chartData.x, value]);
1396 maxVal = (maxVal > value) ? maxVal : value;
1399 if(elem.maxYLabel.length == 0) {
1400 elem.maxYLabel.push([runtime.xmax, 1]);
1403 if(maxVal > elem.maxYLabel[elem.maxYLabel.length - 1][1]) {
1404 elem.maxYLabel.push([chartData.x, (Math.ceil(maxVal*1.2))]);
1405 } else if(maxVal > elem.maxYLabel[0][1]) {
1406 elem.maxYLabel.splice(1,0,[chartData.x, (Math.ceil(maxVal*1.2))]);
1409 if(elem.maxYLabel.length > 1
1410 && elem.maxYLabel[elem.maxYLabel.length - 1][0] < runtime.xmin
1412 elem.maxYLabel.pop();
1413 elem.maxYLabel.sort(function(a,b){return a[1]-b[1]});
1415 // update chart options
1416 elem.chart['axes']['xaxis']['max'] = runtime.xmax;
1417 elem.chart['axes']['xaxis']['min'] = runtime.xmin;
1418 elem.chart['axes']['yaxis']['max'] = elem.maxYLabel[elem.maxYLabel.length - 1][1];
1419 elem.chart['axes']['yaxis']['tickInterval'] = elem.maxYLabel[elem.maxYLabel.length - 1][1]/5;
1421 runtime.charts[orderKey].numPoints++;
1422 if (runtime.redrawCharts) {
1423 elem.chart.replot();
1427 oldChartData = chartData;
1429 runtime.refreshTimeout = setTimeout(refreshChartGrid, monitorSettings.gridRefresh);
1433 /* Function that supplies special value transform functions for chart values */
1434 function chartValueTransform(name, cur, prev) {
1440 // cur and prev are datapoint arrays, but containing only 1 element for cpu-linux
1441 cur = cur[0], prev = prev[0];
1443 var diff_total = cur.busy + cur.idle - (prev.busy + prev.idle);
1444 var diff_idle = cur.idle - prev.idle;
1445 return 100 * (diff_total - diff_idle) / diff_total;
1447 // Query cache efficiency (%)
1452 // cur[0].value is Qcache_hits, cur[1].value is Com_select
1453 var diffQHits = cur[0].value - prev[0].value;
1454 // No NaN please :-)
1455 if (cur[1].value - prev[1].value == 0) return 0;
1457 return diffQHits / (cur[1].value - prev[1].value + diffQHits) * 100;
1459 // Query cache usage (%)
1461 if (cur[1].value == 0) return 0;
1462 // cur[0].value is Qcache_free_memory, cur[1].value is query_cache_size
1463 return 100 - cur[0].value / cur[1].value * 100;
1469 /* Build list of nodes that need to be retrieved from server.
1470 * It creates something like a stripped down version of the runtime.charts object.
1472 function buildRequiredDataList() {
1473 runtime.dataList = {};
1474 // Store an own id, because the property name is subject of reordering,
1475 // thus destroying our mapping with runtime.charts <=> runtime.dataList
1477 $.each(runtime.charts, function(key, chart) {
1478 runtime.dataList[chartID] = [];
1479 for(var i=0; i < chart.nodes.length; i++) {
1480 runtime.dataList[chartID][i] = chart.nodes[i].dataPoints;
1482 runtime.charts[key].chartID = chartID;
1487 /* Loads the log table data, generates the table and handles the filters */
1488 function loadLogStatistics(opts) {
1490 var logRequest = null;
1492 if (! opts.removeVariables) {
1493 opts.removeVariables = false;
1495 if (! opts.limitTypes) {
1496 opts.limitTypes = false;
1499 $('#emptyDialog').dialog({title: PMA_messages['strAnalysingLogsTitle']});
1500 $('#emptyDialog').html(PMA_messages['strAnalysingLogs'] +
1501 ' <img class="ajaxIcon" src="' + pmaThemeImage +
1502 'ajax_clock_small.gif" alt="">');
1505 dlgBtns[PMA_messages['strCancelRequest']] = function() {
1506 if (logRequest != null) {
1510 $(this).dialog("close");
1513 $('#emptyDialog').dialog({
1520 logRequest = $.get('server_status.php?' + url_query,
1521 { ajax_request: true,
1524 time_start: Math.round(opts.start / 1000),
1525 time_end: Math.round(opts.end / 1000),
1526 removeVariables: opts.removeVariables,
1527 limitTypes: opts.limitTypes
1532 logData = $.parseJSON(data);
1534 return serverResponseError();
1537 if (logData.rows.length != 0) {
1538 runtime.logDataCols = buildLogTable(logData);
1540 /* Show some stats in the dialog */
1541 $('#emptyDialog').dialog({title: PMA_messages['strLoadingLogs']});
1542 $('#emptyDialog').html('<p>' + PMA_messages['strLogDataLoaded'] + '</p>');
1543 $.each(logData.sum, function(key, value) {
1544 key = key.charAt(0).toUpperCase() + key.slice(1).toLowerCase();
1545 if (key == 'Total') {
1546 key = '<b>' + key + '</b>';
1548 $('#emptyDialog').append(key + ': ' + value + '<br/>');
1551 /* Add filter options if more than a bunch of rows there to filter */
1552 if (logData.numRows > 12) {
1553 $('div#logTable').prepend(
1554 '<fieldset id="logDataFilter">' +
1555 ' <legend>' + PMA_messages['strFiltersForLogTable'] + '</legend>' +
1556 ' <div class="formelement">' +
1557 ' <label for="filterQueryText">' + PMA_messages['strFilterByWordRegexp'] + '</label>' +
1558 ' <input name="filterQueryText" type="text" id="filterQueryText" style="vertical-align: baseline;" />' +
1560 ((logData.numRows > 250) ? ' <div class="formelement"><button name="startFilterQueryText" id="startFilterQueryText">' + PMA_messages['strFilter'] + '</button></div>' : '') +
1561 ' <div class="formelement">' +
1562 ' <input type="checkbox" id="noWHEREData" name="noWHEREData" value="1" /> ' +
1563 ' <label for="noWHEREData"> ' + PMA_messages['strIgnoreWhereAndGroup'] + '</label>' +
1568 $('div#logTable input#noWHEREData').change(function() {
1569 filterQueries(true);
1572 if (logData.numRows > 250) {
1573 $('div#logTable button#startFilterQueryText').click(filterQueries);
1575 $('div#logTable input#filterQueryText').keyup(filterQueries);
1581 dlgBtns[PMA_messages['strJumpToTable']] = function() {
1582 $(this).dialog("close");
1583 $(document).scrollTop($('div#logTable').offset().top);
1586 $('#emptyDialog').dialog( "option", "buttons", dlgBtns);
1589 $('#emptyDialog').dialog({title: PMA_messages['strNoDataFoundTitle']});
1590 $('#emptyDialog').html('<p>' + PMA_messages['strNoDataFound'] + '</p>');
1593 dlgBtns[PMA_messages['strClose']] = function() {
1594 $(this).dialog("close");
1597 $('#emptyDialog').dialog( "option", "buttons", dlgBtns );
1602 /* Handles the actions performed when the user uses any of the log table filters
1603 * which are the filter by name and grouping with ignoring data in WHERE clauses
1605 * @param boolean Should be true when the users enabled or disabled to group queries ignoring data in WHERE clauses
1607 function filterQueries(varFilterChange) {
1608 var odd_row = false, cell, textFilter;
1609 var val = $('div#logTable input#filterQueryText').val();
1611 if (val.length == 0) {
1614 textFilter = new RegExp(val, 'i');
1617 var rowSum = 0, totalSum = 0, i = 0, q;
1618 var noVars = $('div#logTable input#noWHEREData').attr('checked');
1619 var equalsFilter = /([^=]+)=(\d+|((\'|"|).*?[^\\])\4((\s+)|$))/gi;
1620 var functionFilter = /([a-z0-9_]+)\(.+?\)/gi;
1621 var filteredQueries = {}, filteredQueriesLines = {};
1622 var hide = false, rowData;
1623 var queryColumnName = runtime.logDataCols[runtime.logDataCols.length - 2];
1624 var sumColumnName = runtime.logDataCols[runtime.logDataCols.length - 1];
1625 var isSlowLog = opts.src == 'slow';
1626 var columnSums = {};
1628 // For the slow log we have to count many columns (query_time, lock_time, rows_examined, rows_sent, etc.)
1629 var countRow = function(query, row) {
1630 var cells = row.match(/<td>(.*?)<\/td>/gi);
1631 if (!columnSums[query]) {
1632 columnSums[query] = [0, 0, 0, 0];
1635 // lock_time and query_time and displayed in timespan format
1636 columnSums[query][0] += timeToSec(cells[2].replace(/(<td>|<\/td>)/gi, ''));
1637 columnSums[query][1] += timeToSec(cells[3].replace(/(<td>|<\/td>)/gi, ''));
1638 // rows_examind and rows_sent are just numbers
1639 columnSums[query][2] += parseInt(cells[4].replace(/(<td>|<\/td>)/gi, ''));
1640 columnSums[query][3] += parseInt(cells[5].replace(/(<td>|<\/td>)/gi, ''));
1643 // We just assume the sql text is always in the second last column, and that the total count is right of it
1644 $('div#logTable table tbody tr td:nth-child(' + (runtime.logDataCols.length - 1) + ')').each(function() {
1645 // If query is a SELECT and user enabled or disabled to group queries ignoring data in where statements, we
1646 // need to re-calculate the sums of each row
1647 if (varFilterChange && $(this).html().match(/^SELECT/i)) {
1649 // Group on => Sum up identical columns, and hide all but 1
1651 q = $(this).text().replace(equalsFilter, '$1=...$6').trim();
1652 q = q.replace(functionFilter, ' $1(...)');
1654 // Js does not specify a limit on property name length, so we can abuse it as index :-)
1655 if (filteredQueries[q]) {
1656 filteredQueries[q] += parseInt($(this).next().text());
1657 totalSum += parseInt($(this).next().text());
1660 filteredQueries[q] = parseInt($(this).next().text());;
1661 filteredQueriesLines[q] = i;
1665 countRow(q, $(this).parent().html());
1669 // Group off: Restore original columns
1671 rowData = $(this).parent().data('query');
1673 $(this).text(rowData[queryColumnName]);
1674 // Restore total count
1675 $(this).next().text(rowData[sumColumnName]);
1676 // Restore slow log columns
1678 $(this).parent().children('td:nth-child(3)').text(rowData['query_time']);
1679 $(this).parent().children('td:nth-child(4)').text(rowData['lock_time']);
1680 $(this).parent().children('td:nth-child(5)').text(rowData['rows_sent']);
1681 $(this).parent().children('td:nth-child(6)').text(rowData['rows_examined']);
1686 // If not required to be hidden, do we need to hide because of a not matching text filter?
1687 if (! hide && (textFilter != null && ! textFilter.exec($(this).text()))) {
1691 // Now display or hide this column
1693 $(this).parent().css('display', 'none');
1695 totalSum += parseInt($(this).next().text());
1698 odd_row = ! odd_row;
1699 $(this).parent().css('display', '');
1701 $(this).parent().addClass('odd');
1702 $(this).parent().removeClass('even');
1704 $(this).parent().addClass('even');
1705 $(this).parent().removeClass('odd');
1713 // We finished summarizing counts => Update count values of all grouped entries
1714 if (varFilterChange) {
1716 var numCol, row, $table = $('div#logTable table tbody');
1717 $.each(filteredQueriesLines, function(key, value) {
1718 if (filteredQueries[key] <= 1) {
1722 row = $table.children('tr:nth-child(' + (value + 1) + ')');
1723 numCol = row.children(':nth-child(' + (runtime.logDataCols.length) + ')');
1724 numCol.text(filteredQueries[key]);
1727 row.children('td:nth-child(3)').text(secToTime(columnSums[key][0]));
1728 row.children('td:nth-child(4)').text(secToTime(columnSums[key][1]));
1729 row.children('td:nth-child(5)').text(columnSums[key][2]);
1730 row.children('td:nth-child(6)').text(columnSums[key][3]);
1735 $('div#logTable table').trigger("update");
1736 setTimeout(function() {
1737 $('div#logTable table').trigger('sorton', [[[runtime.logDataCols.length - 1, 1]]]);
1741 // Display some stats at the bottom of the table
1742 $('div#logTable table tfoot tr')
1743 .html('<th colspan="' + (runtime.logDataCols.length - 1) + '">' +
1744 PMA_messages['strSumRows'] + ' ' + rowSum + '<span style="float:right">' +
1745 PMA_messages['strTotal'] + '</span></th><th align="right">' + totalSum + '</th>');
1749 /* Turns a timespan (12:12:12) into a number */
1750 function timeToSec(timeStr) {
1751 var time = timeStr.split(':');
1752 return parseInt(time[0]*3600) + parseInt(time[1]*60) + parseInt(time[2]);
1755 /* Turns a number into a timespan (100 into 00:01:40) */
1756 function secToTime(timeInt) {
1757 hours = Math.floor(timeInt / 3600);
1758 timeInt -= hours*3600;
1759 minutes = Math.floor(timeInt / 60);
1760 timeInt -= minutes*60;
1763 hours = '0' + hours;
1766 minutes = '0' + minutes;
1769 timeInt = '0' + timeInt;
1772 return hours + ':' + minutes + ':' + timeInt;
1775 /* Constructs the log table out of the retrieved server data */
1776 function buildLogTable(data) {
1777 var rows = data.rows;
1778 var cols = new Array();
1779 var $table = $('<table border="0" class="sortable"></table>');
1780 var $tBody, $tRow, $tCell;
1782 $('#logTable').html($table);
1784 var formatValue = function(name, value) {
1787 return value.replace(/(\[.*?\])+/g, '');
1792 for (var i = 0; i < rows.length; i++) {
1794 $.each(rows[0], function(key, value) {
1797 $table.append( '<thead>' +
1798 '<tr><th class="nowrap">' + cols.join('</th><th class="nowrap">') + '</th></tr>' +
1801 $table.append($tBody = $('<tbody></tbody>'));
1804 $tBody.append($tRow = $('<tr class="noclick"></tr>'));
1806 for (var j = 0; j < cols.length; j++) {
1807 // Assuming the query column is the second last
1808 if (j == cols.length - 2 && rows[i][cols[j]].match(/^SELECT/i)) {
1809 $tRow.append($tCell = $('<td class="linkElem">' + formatValue(cols[j], rows[i][cols[j]]) + '</td>'));
1810 $tCell.click(openQueryAnalyzer);
1812 $tRow.append('<td>' + formatValue(cols[j], rows[i][cols[j]]) + '</td>');
1815 $tRow.data('query', rows[i]);
1819 $table.append('<tfoot>' +
1820 '<tr><th colspan="' + (cols.length - 1) + '">' + PMA_messages['strSumRows'] +
1821 ' ' + data.numRows + '<span style="float:right">' + PMA_messages['strTotal'] +
1822 '</span></th><th align="right">' + data.sum.TOTAL + '</th></tr></tfoot>');
1824 // Append a tooltip to the count column, if there exist one
1825 if ($('#logTable th:last').html() == '#') {
1826 $('#logTable th:last').append(' ' + PMA_getImage('b_docs.png', '', {'class': 'qroupedQueryInfoIcon'}));
1828 var qtipContent = PMA_messages['strCountColumnExplanation'];
1830 qtipContent += '<p>' + PMA_messages['strMoreCountColumnExplanation'] + '</p>';
1833 $('img.qroupedQueryInfoIcon').qtip({
1834 content: qtipContent,
1837 target: 'bottomMiddle',
1842 hide: { delay: 1000 }
1846 $('div#logTable table').tablesorter({
1847 sortList: [[cols.length - 1, 1]],
1848 widgets: ['fast-zebra']
1851 $('div#logTable table thead th')
1852 .append('<img class="icon sortableIcon" src="themes/dot.gif" alt="">');
1857 /* Opens the query analyzer dialog */
1858 function openQueryAnalyzer() {
1859 var rowData = $(this).parent().data('query');
1860 var query = rowData.argument || rowData.sql_text;
1862 query = PMA_SQLPrettyPrint(query);
1863 codemirror_editor.setValue(query);
1864 // Codemirror is bugged, it doesn't refresh properly sometimes. Following lines seem to fix that
1865 setTimeout(function() {
1866 codemirror_editor.refresh()
1869 var profilingChart = null;
1872 dlgBtns[PMA_messages['strAnalyzeQuery']] = function() {
1873 loadQueryAnalysis(rowData);
1875 dlgBtns[PMA_messages['strClose']] = function() {
1876 if (profilingChart != null) {
1877 profilingChart.destroy();
1879 $('div#queryAnalyzerDialog div.placeHolder').html('');
1880 codemirror_editor.setValue('');
1881 $(this).dialog("close");
1884 $('div#queryAnalyzerDialog').dialog({
1892 /* Loads and displays the analyzed query data */
1893 function loadQueryAnalysis(rowData) {
1894 var db = rowData.db || '';
1896 $('div#queryAnalyzerDialog div.placeHolder').html(
1897 PMA_messages['strAnalyzing'] + ' <img class="ajaxIcon" src="' +
1898 pmaThemeImage + 'ajax_clock_small.gif" alt="">');
1900 $.post('server_status.php?' + url_query, {
1902 query_analyzer: true,
1903 query: codemirror_editor.getValue(),
1906 data = $.parseJSON(data);
1910 $('div#queryAnalyzerDialog div.placeHolder').html('<div class="error">' + data.error + '</div>');
1914 // Float sux, I'll use table :(
1915 $('div#queryAnalyzerDialog div.placeHolder')
1916 .html('<table width="100%" border="0"><tr><td class="explain"></td><td class="chart"></td></tr></table>');
1918 var explain = '<b>' + PMA_messages['strExplainOutput'] + '</b> ' + explain_docu;
1919 if (data.explain.length > 1) {
1921 for (var i = 0; i < data.explain.length; i++) {
1925 explain += '<a href="#showExplain-' + i + '">' + i + '</a>';
1929 explain += '<p></p>';
1930 for (var i = 0; i < data.explain.length; i++) {
1931 explain += '<div class="explain-' + i + '"' + (i>0? 'style="display:none;"' : '' ) + '>';
1932 $.each(data.explain[i], function(key, value) {
1933 value = (value == null)?'null':value;
1935 if (key == 'type' && value.toLowerCase() == 'all') {
1936 value = '<span class="attention">' + value + '</span>';
1938 if (key == 'Extra') {
1939 value = value.replace(/(using (temporary|filesort))/gi, '<span class="attention">$1</span>');
1941 explain += key + ': ' + value + '<br />';
1943 explain += '</div>';
1946 explain += '<p><b>' + PMA_messages['strAffectedRows'] + '</b> ' + data.affectedRows;
1948 $('div#queryAnalyzerDialog div.placeHolder td.explain').append(explain);
1950 $('div#queryAnalyzerDialog div.placeHolder a[href*="#showExplain"]').click(function() {
1951 var id = $(this).attr('href').split('-')[1];
1952 $(this).parent().find('div[class*="explain"]').hide();
1953 $(this).parent().find('div[class*="explain-' + id + '"]').show();
1956 if (data.profiling) {
1958 var numberTable = '<table class="queryNums"><thead><tr><th>' + PMA_messages['strStatus'] + '</th><th>' + PMA_messages['strTime'] + '</th></tr></thead><tbody>';
1961 for (var i = 0; i < data.profiling.length; i++) {
1962 duration = parseFloat(data.profiling[i].duration);
1964 chartData.push([data.profiling[i].state, duration]);
1965 totalTime += duration;
1967 numberTable += '<tr><td>' + data.profiling[i].state + ' </td><td> ' + PMA_prettyProfilingNum(duration, 2) + '</td></tr>';
1969 numberTable += '<tr><td><b>' + PMA_messages['strTotalTime'] + '</b></td><td>' + PMA_prettyProfilingNum(totalTime, 2) + '</td></tr>';
1970 numberTable += '</tbody></table>';
1972 $('div#queryAnalyzerDialog div.placeHolder td.chart').append(
1973 '<b>' + PMA_messages['strProfilingResults'] + ' ' + profiling_docu + '</b> ' +
1974 '(<a href="#showNums">' + PMA_messages['strTable'] + '</a>, <a href="#showChart">' + PMA_messages['strChart'] + '</a>)<br/>' +
1975 numberTable + ' <div id="queryProfiling"></div>');
1977 $('div#queryAnalyzerDialog div.placeHolder a[href="#showNums"]').click(function() {
1978 $('div#queryAnalyzerDialog div#queryProfiling').hide();
1979 $('div#queryAnalyzerDialog table.queryNums').show();
1983 $('div#queryAnalyzerDialog div.placeHolder a[href="#showChart"]').click(function() {
1984 $('div#queryAnalyzerDialog div#queryProfiling').show();
1985 $('div#queryAnalyzerDialog table.queryNums').hide();
1989 profilingChart = PMA_createProfilingChartJqplot(
1994 $('div#queryProfiling').resizable();
1999 /* Saves the monitor to localstorage */
2000 function saveMonitor() {
2003 $.each(runtime.charts, function(key, elem) {
2005 gridCopy[key].nodes = elem.nodes;
2006 gridCopy[key].settings = elem.settings;
2007 gridCopy[key].title = elem.title;
2010 if (window.localStorage) {
2011 window.localStorage['monitorCharts'] = $.toJSON(gridCopy);
2012 window.localStorage['monitorSettings'] = $.toJSON(monitorSettings);
2013 window.localStorage['monitorVersion'] = monitorProtocolVersion;
2016 $('a[href="#clearMonitorConfig"]').show();
2020 // Run the monitor once loaded
2022 $('a[href="#pauseCharts"]').trigger('click');