3 $('div#statustabs_charting div.tabLinks').show();
4 $('div#statustabs_charting img#loadingMonitorIcon').remove();
5 // Codemirror is loaded on demand so we might need to initialize it
6 if (! codemirror_editor) {
7 var elm = $('#sqlquery');
8 if (elm.length > 0 && typeof CodeMirror != 'undefined') {
9 codemirror_editor = CodeMirror.fromTextArea(elm[0], { lineNumbers: true, matchBrackets: true, indentUnit: 4, mode: "text/x-mysql" });
12 // Timepicker is loaded on demand so we need to initialize datetime fields from the 'load log' dialog
13 $('div#logAnalyseDialog .datetimefield').each(function() {
14 PMA_addDatepicker($(this));
17 /**** Monitor charting implementation ****/
18 /* Saves the previous ajax response for differential values */
19 var oldChartData = null;
20 // Holds about to created chart
24 // Whenever the monitor object (runtime.charts) or the settings object (monitorSettings)
25 // changes in a way incompatible to the previous version, increase this number
26 // It will reset the users monitor and settings object in his localStorage to the default configuration
27 var monitorProtocolVersion = '1.0';
29 // Runtime parameter of the monitor, is being fully set in initGrid()
31 // Holds all visible charts in the grid
33 // Stores the timeout handler so it can be cleared
35 // Stores the GET request to refresh the charts
37 // Chart auto increment
39 // To play/pause the monitor
41 // Object that contains a list of nodes that need to be retrieved from the server for chart updates
43 // Current max points per chart (needed for auto calculation)
45 // displayed time frame
50 var monitorSettings = null;
52 var defaultMonitorSettings = {
54 chartSize: { width: 295, height: 250 },
55 // Max points in each chart. Settings it to 'auto' sets gridMaxPoints to (chartwidth - 40) / 12
56 gridMaxPoints: 'auto',
57 /* Refresh rate of all grid charts in ms */
61 // Allows drag and drop rearrange and print/edit icons on charts
64 /* List of preconfigured charts that the user may select */
66 // Query cache efficiency
68 title: PMA_messages['strQueryCacheEfficiency'],
70 name: PMA_messages['strQueryCacheEfficiency'],
71 dataPoints: [{type: 'statusvar', name: 'Qcache_hits'}, {type: 'statusvar', name: 'Com_select'}],
78 title: PMA_messages['strQueryCacheUsage'],
80 name: PMA_messages['strQueryCacheUsed'],
81 dataPoints: [{type: 'statusvar', name: 'Qcache_free_memory'}, {type: 'servervar', name: 'query_cache_size'}],
88 /* Add OS specific system info charts to the preset chart list */
91 $.extend(presetCharts, {
93 title: PMA_messages['strSystemCPUUsage'],
95 name: PMA_messages['strAverageLoad'],
96 dataPoints: [{ type: 'cpu', name: 'loadavg'}],
102 title: PMA_messages['strSystemMemory'],
104 name: PMA_messages['strTotalMemory'],
105 dataPoints: [{ type: 'memory', name: 'MemTotal' }],
107 unit: PMA_messages['strMiB']
110 name: PMA_messages['strUsedMemory'],
111 dataPoints: [{ type: 'memory', name: 'MemUsed' }],
113 unit: PMA_messages['strMiB']
118 title: PMA_messages['strSystemSwap'],
120 name: PMA_messages['strTotalSwap'],
121 dataPoints: [{ type: 'memory', name: 'SwapTotal' }],
123 unit: PMA_messages['strMiB']
125 name: PMA_messages['strUsedSwap'],
126 dataPoints: [{ type: 'memory', name: 'SwapUsed' }],
128 unit: PMA_messages['strMiB']
135 $.extend(presetCharts, {
137 title: PMA_messages['strSystemCPUUsage'],
139 name: PMA_messages['strAverageLoad'],
140 dataPoints: [{ type: 'cpu', name: 'irrelevant' }],
142 transformFn: 'cpu-linux'
146 title: PMA_messages['strSystemMemory'],
148 { name: PMA_messages['strUsedMemory'], dataPoints: [{ type: 'memory', name: 'MemUsed' }], valueDivisor: 1024, unit: PMA_messages['strMiB'] },
149 { name: PMA_messages['strCachedMemory'], dataPoints: [{ type: 'memory', name: 'Cached' }], valueDivisor: 1024, unit: PMA_messages['strMiB'] },
150 { name: PMA_messages['strBufferedMemory'], dataPoints: [{ type: 'memory', name: 'Buffers' }], valueDivisor: 1024, unit: PMA_messages['strMiB'] },
151 { name: PMA_messages['strFreeMemory'], dataPoints: [{ type: 'memory', name: 'MemFree' }], valueDivisor: 1024, unit: PMA_messages['strMiB'] }
166 title: PMA_messages['strSystemSwap'],
168 { name: PMA_messages['strUsedSwap'], dataPoints: [{ type: 'memory', name: 'SwapUsed' }], valueDivisor: 1024, unit: PMA_messages['strMiB'] },
169 { name: PMA_messages['strCachedSwap'], dataPoints: [{ type: 'memory', name: 'SwapCached' }], valueDivisor: 1024, unit: PMA_messages['strMiB'] },
170 { name: PMA_messages['strFreeSwap'], dataPoints: [{ type: 'memory', name: 'SwapFree' }], valueDivisor: 1024, unit: PMA_messages['strMiB'] }
188 // Default setting for the chart grid
190 'c0': { title: PMA_messages['strQuestions'],
191 nodes: [{name: PMA_messages['strQuestions'], dataPoints: [{ type: 'statusvar', name: 'Questions' }], display: 'differential' }]
194 title: PMA_messages['strChartConnectionsTitle'],
195 nodes: [ { name: PMA_messages['strConnections'], dataPoints: [{ type: 'statusvar', name: 'Connections' }], display: 'differential' },
196 { name: PMA_messages['strProcesses'], dataPoints: [{ type: 'proc', name: 'processes' }] } ]
199 title: PMA_messages['strTraffic'],
201 { name: PMA_messages['strBytesSent'], dataPoints: [{ type: 'statusvar', name: 'Bytes_sent' }], display: 'differential', valueDivisor: 1024, unit: PMA_messages['strKiB'] },
202 { name: PMA_messages['strBytesReceived'], dataPoints: [{ type: 'statusvar', name: 'Bytes_received' }], display: 'differential', valueDivisor: 1024, unit: PMA_messages['strKiB'] }
207 // Server is localhost => We can add cpu/memory/swap to the default chart
208 if (server_db_isLocal) {
209 defaultChartGrid['c3'] = presetCharts['cpu'];
210 defaultChartGrid['c4'] = presetCharts['memory'];
211 defaultChartGrid['c5'] = presetCharts['swap'];
214 /* Buttons that are on the top right corner of each chart */
218 symbol: 'url(' + pmaThemeImage + 's_cog.png)',
220 symbolFill: '#B5C9DF',
221 hoverSymbolFill: '#779ABF',
222 _titleKey: 'settings',
223 menuName: 'gridsettings',
225 textKey: 'editChart',
226 onclick: function() {
230 textKey: 'removeChart',
231 onclick: function() {
238 Highcharts.setOptions({
240 settings: PMA_messages['strSettings'],
241 removeChart: PMA_messages['strRemoveChart'],
242 editChart: PMA_messages['strEditChart']
246 $('a[href="#rearrangeCharts"], a[href="#endChartEditMode"]').click(function() {
247 editMode = !editMode;
248 if ($(this).attr('href') == '#endChartEditMode') {
252 // Icon graphics have zIndex 19, 20 and 21. Let's just hope nothing else has the same zIndex
253 $('table#chartGrid div svg').find('*[zIndex=20], *[zIndex=21], *[zIndex=19]').toggle(editMode)
255 $('a[href="#endChartEditMode"]').toggle(editMode);
258 // Close the settings popup
259 $('#statustabs_charting .popupContent').hide().removeClass('openedPopup');
261 $("#chartGrid").sortableTable({
264 left: chartSize().width - 63,
269 // Drop event. The drag child element is moved into the drop element
270 // and vice versa. So the parameters are switched.
271 drop: function(drag, drop, pos) {
272 var dragKey, dropKey, dropRender;
273 var dragRender = $(drag).children().first().attr('id');
275 if ($(drop).children().length > 0) {
276 dropRender = $(drop).children().first().attr('id');
279 // Find the charts in the array
280 $.each(runtime.charts, function(key, value) {
281 if (value.chart.options.chart.renderTo == dragRender) {
284 if (dropRender && value.chart.options.chart.renderTo == dropRender) {
289 // Case 1: drag and drop are charts -> Switch keys
292 dragChart = runtime.charts[dragKey];
293 runtime.charts[dragKey] = runtime.charts[dropKey];
294 runtime.charts[dropKey] = dragChart;
296 // Case 2: drop is a empty cell => just completely rebuild the ids
298 var dropKeyNum = parseInt(dropKey.substr(1));
299 var insertBefore = pos.col + pos.row * monitorSettings.columns;
301 var newChartList = {};
304 $.each(runtime.charts, function(key, value) {
305 if (key != dropKey) {
312 // Rebuilds all ids, with the dragged chart correctly inserted
313 for (var i = 0; i<keys.length; i++) {
314 if (keys[i] == insertBefore) {
315 newChartList['c' + (c++)] = runtime.charts[dropKey];
316 insertBefore = -1; // Insert ok
318 newChartList['c' + (c++)] = runtime.charts[keys[i]];
321 // Not inserted => put at the end
322 if (insertBefore != -1) {
323 newChartList['c' + (c++)] = runtime.charts[dropKey];
326 runtime.charts = newChartList;
336 $("#chartGrid").sortableTable('destroy');
337 saveMonitor(); // Save settings
344 $('div#statustabs_charting div.popupContent select[name="chartColumns"]').change(function() {
345 monitorSettings.columns = parseInt(this.value);
347 var newSize = chartSize();
349 // Empty cells should keep their size so you can drop onto them
350 $('table#chartGrid tr td').css('width', newSize.width + 'px');
352 /* Reorder all charts that it fills all column cells */
354 var $tr = $('table#chartGrid tr:first');
356 while($tr.length != 0) {
358 // To many cells in one row => put into next row
359 $tr.find('td').each(function() {
360 if (numColumns > monitorSettings.columns) {
361 if ($tr.next().length == 0) {
362 $tr.after('<tr></tr>');
364 $tr.next().prepend($(this));
369 // To little cells in one row => for each cell to little, move all cells backwards by 1
370 if ($tr.next().length > 0) {
371 var cnt = monitorSettings.columns - $tr.find('td').length;
372 for (var i = 0; i < cnt; i++) {
373 $tr.append($tr.next().find('td:first'));
374 $tr.nextAll().each(function() {
375 if ($(this).next().length != 0) {
376 $(this).append($(this).next().find('td:first'));
386 /* Apply new chart size to all charts */
387 $.each(runtime.charts, function(key, value) {
395 if (monitorSettings.gridMaxPoints == 'auto') {
396 runtime.gridMaxPoints = Math.round((newSize.width - 40) / 12);
399 runtime.xmin = new Date().getTime() - server_time_diff - runtime.gridMaxPoints * monitorSettings.gridRefresh;
400 runtime.xmax = new Date().getTime() - server_time_diff + monitorSettings.gridRefresh;
403 $("#chartGrid").sortableTable('refresh');
406 saveMonitor(); // Save settings
409 $('div#statustabs_charting div.popupContent select[name="gridChartRefresh"]').change(function() {
410 monitorSettings.gridRefresh = parseInt(this.value) * 1000;
411 clearTimeout(runtime.refreshTimeout);
413 if (runtime.refreshRequest) {
414 runtime.refreshRequest.abort();
417 runtime.xmin = new Date().getTime() - server_time_diff - runtime.gridMaxPoints * monitorSettings.gridRefresh;
418 runtime.xmax = new Date().getTime() - server_time_diff + monitorSettings.gridRefresh;
420 $.each(runtime.charts, function(key, value) {
421 value.chart.xAxis[0].setExtremes(runtime.xmin, runtime.xmax, false);
424 runtime.refreshTimeout = setTimeout(refreshChartGrid, monitorSettings.gridRefresh);
426 saveMonitor(); // Save settings
429 $('a[href="#addNewChart"]').click(function() {
430 var dlgButtons = { };
432 dlgButtons[PMA_messages['strAddChart']] = function() {
433 var type = $('input[name="chartType"]:checked').val();
435 if (type == 'preset') {
436 newChart = presetCharts[$('div#addChartDialog select[name="presetCharts"]').prop('value')];
438 // If user builds his own chart, it's being set/updated each time he adds a series
439 // So here we only warn if he didn't add a series yet
440 if (! newChart || ! newChart.nodes || newChart.nodes.length == 0) {
441 alert(PMA_messages['strAddOneSeriesWarning']);
446 newChart.title = $('input[name="chartTitle"]').attr('value');
447 // Add a cloned object to the chart grid
448 addChart($.extend(true, {}, newChart));
452 saveMonitor(); // Save settings
454 $(this).dialog("close");
457 dlgButtons[PMA_messages['strClose']] = function() {
459 $('span#clearSeriesLink').hide();
460 $('#seriesPreview').html('');
461 $(this).dialog("close");
464 var $presetList = $('div#addChartDialog select[name="presetCharts"]');
465 if ($presetList.html().length == 0) {
466 $.each(presetCharts, function(key, value) {
467 $presetList.append('<option value="' + key + '">' + value.title + '</option>');
469 $presetList.change(function() {
470 $('input#chartPreset').trigger('click');
471 $('input[name="chartTitle"]').attr('value', presetCharts[$(this).prop('value')].title);
475 $('div#addChartDialog').dialog({
481 $('div#addChartDialog #seriesPreview').html('<i>' + PMA_messages['strNone'] + '</i>');
486 $('a[href="#exportMonitorConfig"]').click(function() {
489 $.each(runtime.charts, function(key, elem) {
491 gridCopy[key].nodes = elem.nodes;
492 gridCopy[key].settings = elem.settings;
493 gridCopy[key].title = elem.title;
497 monitorCharts: gridCopy,
498 monitorSettings: monitorSettings
502 $('body').append($form = $('<form method="post" action="file_echo.php?' + url_query + '&filename=1" style="display:none;"></form>'));
504 $form.append('<input type="hidden" name="monitorconfig" value="' + encodeURI($.toJSON(exportData)) + '">');
509 $('a[href="#importMonitorConfig"]').click(function() {
510 $('div#emptyDialog').attr('title', 'Import monitor configuration');
511 $('div#emptyDialog').html('Please select the file you want to import:<br/><form action="file_echo.php?' + url_query + '&import=1" method="post" enctype="multipart/form-data">' +
512 '<input type="file" name="file"> <input type="hidden" name="import" value="1"> </form>');
516 dlgBtns[PMA_messages['strImport']] = function() {
518 $('body').append($iframe = $('<iframe id="monitorConfigUpload" style="display:none;"></iframe>'));
519 var d = $iframe[0].contentWindow.document;
523 $iframe.load(function() {
526 // Try loading config
528 var data = $('body', $('iframe#monitorConfigUpload')[0].contentWindow.document).html();
529 // Chrome wraps around '<pre style="word-wrap: break-word; white-space: pre-wrap;">' to any text content -.-
530 json = $.secureEvalJSON(data.substring(data.indexOf("{"), data.lastIndexOf("}") + 1));
532 alert(PMA_messages['strFailedParsingConfig']);
533 $('div#emptyDialog').dialog('close');
537 // Basic check, is this a monitor config json?
538 if (!json || ! json.monitorCharts || ! json.monitorCharts) {
539 alert(PMA_messages['strFailedParsingConfig']);
540 $('div#emptyDialog').dialog('close');
544 // If json ok, try applying config
546 window.localStorage['monitorCharts'] = $.toJSON(json.monitorCharts);
547 window.localStorage['monitorSettings'] = $.toJSON(json.monitorSettings);
550 alert(PMA_messages['strFailedBuildingGrid']);
551 // If an exception is thrown, load default again
552 window.localStorage.removeItem('monitorCharts');
553 window.localStorage.removeItem('monitorSettings');
557 $('div#emptyDialog').dialog('close');
560 $("body", d).append($form = $('div#emptyDialog').find('form'));
562 $('div#emptyDialog').append('<img class="ajaxIcon" src="' + pmaThemeImage + 'ajax_clock_small.gif" alt="">');
565 dlgBtns[PMA_messages['strCancel']] = function() {
566 $(this).dialog('close');
570 $('div#emptyDialog').dialog({
577 $('a[href="#clearMonitorConfig"]').click(function() {
578 window.localStorage.removeItem('monitorCharts');
579 window.localStorage.removeItem('monitorSettings');
580 window.localStorage.removeItem('monitorVersion');
585 $('a[href="#pauseCharts"]').click(function() {
586 runtime.redrawCharts = ! runtime.redrawCharts;
587 if (! runtime.redrawCharts) {
588 $(this).html(PMA_getImage('play.png') + ' ' + PMA_messages['strResumeMonitor']);
590 $(this).html(PMA_getImage('pause.png') + ' ' + PMA_messages['strPauseMonitor']);
591 if (! runtime.charts) {
593 $('a[href="#settingsPopup"]').show();
599 $('a[href="#monitorInstructionsDialog"]').click(function() {
600 var $dialog = $('div#monitorInstructionsDialog');
605 }).find('img.ajaxIcon').show();
607 var loadLogVars = function(getvars) {
608 vars = { ajax_request: true, logging_vars: true };
610 $.extend(vars, getvars);
613 $.get('server_status.php?' + url_query, vars,
615 var logVars = $.parseJSON(data),
616 icon = PMA_getImage('s_success.png'), msg='', str='';
618 if (logVars['general_log'] == 'ON') {
619 if (logVars['slow_query_log'] == 'ON') {
620 msg = PMA_messages['strBothLogOn'];
622 msg = PMA_messages['strGenLogOn'];
626 if (msg.length == 0 && logVars['slow_query_log'] == 'ON') {
627 msg = PMA_messages['strSlowLogOn'];
630 if (msg.length == 0) {
631 icon = PMA_getImage('s_error.png');
632 msg = PMA_messages['strBothLogOff'];
635 str = '<b>' + PMA_messages['strCurrentSettings'] + '</b><br><div class="smallIndent">';
636 str += icon + msg + '<br />';
638 if (logVars['log_output'] != 'TABLE') {
639 str += PMA_getImage('s_error.png') + ' ' + PMA_messages['strLogOutNotTable'] + '<br />';
641 str += PMA_getImage('s_success.png') + ' ' + PMA_messages['strLogOutIsTable'] + '<br />';
644 if (logVars['slow_query_log'] == 'ON') {
645 if (logVars['long_query_time'] > 2) {
646 str += PMA_getImage('s_attention.png') + ' '
647 + $.sprintf(PMA_messages['strSmallerLongQueryTimeAdvice'], logVars['long_query_time'])
651 if (logVars['long_query_time'] < 2) {
652 str += PMA_getImage('s_success.png') + ' '
653 + $.sprintf(PMA_messages['strLongQueryTimeSet'], logVars['long_query_time'])
661 str += '<p></p><b>Change settings</b>';
662 str += '<div class="smallIndent">';
663 str += PMA_messages['strSettingsAppliedGlobal'] + '<br/>';
665 var varValue = 'TABLE';
666 if (logVars['log_output'] == 'TABLE') {
670 str += '- <a class="set" href="#log_output-' + varValue + '">'
671 + $.sprintf(PMA_messages['strSetLogOutput'], varValue)
674 if (logVars['general_log'] != 'ON') {
675 str += '- <a class="set" href="#general_log-ON">'
676 + $.sprintf(PMA_messages['strEnableVar'], 'general_log')
679 str += '- <a class="set" href="#general_log-OFF">'
680 + $.sprintf(PMA_messages['strDisableVar'], 'general_log')
684 if (logVars['slow_query_log'] != 'ON') {
685 str += '- <a class="set" href="#slow_query_log-ON">'
686 + $.sprintf(PMA_messages['strEnableVar'], 'slow_query_log')
689 str += '- <a class="set" href="#slow_query_log-OFF">'
690 + $.sprintf(PMA_messages['strDisableVar'], 'slow_query_log')
695 if (logVars['long_query_time'] > 2) {
699 str += '- <a class="set" href="#long_query_time-' + varValue + '">'
700 + $.sprintf(PMA_messages['setSetLongQueryTime'], varValue)
704 str += PMA_messages['strNoSuperUser'] + '<br/>';
709 $dialog.find('div.monitorUse').toggle(
710 logVars['log_output'] == 'TABLE' && (logVars['slow_query_log'] == 'ON' || logVars['general_log'] == 'ON')
713 $dialog.find('div.ajaxContent').html(str);
714 $dialog.find('img.ajaxIcon').hide();
715 $dialog.find('a.set').click(function() {
716 var nameValue = $(this).attr('href').split('-');
717 loadLogVars({ varName: nameValue[0].substr(1), varValue: nameValue[1]});
718 $dialog.find('img.ajaxIcon').show();
730 $('input[name="chartType"]').change(function() {
731 $('#chartVariableSettings').toggle(this.checked && this.value == 'variable');
732 var title = $('input[name="chartTitle"]').attr('value');
733 if (title == PMA_messages['strChartTitle']
734 || title == $('label[for="' + $('input[name="chartTitle"]').data('lastRadio') + '"]').text()
736 $('input[name="chartTitle"]')
737 .data('lastRadio', $(this).attr('id'))
738 .attr('value', $('label[for="' + $(this).attr('id') + '"]').text());
743 $('input[name="useDivisor"]').change(function() {
744 $('span.divisorInput').toggle(this.checked);
746 $('input[name="useUnit"]').change(function() {
747 $('span.unitInput').toggle(this.checked);
750 $('select[name="varChartList"]').change(function () {
751 if (this.selectedIndex != 0) {
752 $('#variableInput').attr('value', this.value);
756 $('a[href="#kibDivisor"]').click(function() {
757 $('input[name="valueDivisor"]').attr('value', 1024);
758 $('input[name="valueUnit"]').attr('value', PMA_messages['strKiB']);
759 $('span.unitInput').toggle(true);
760 $('input[name="useUnit"]').prop('checked', true);
764 $('a[href="#mibDivisor"]').click(function() {
765 $('input[name="valueDivisor"]').attr('value', 1024*1024);
766 $('input[name="valueUnit"]').attr('value', PMA_messages['strMiB']);
767 $('span.unitInput').toggle(true);
768 $('input[name="useUnit"]').prop('checked', true);
772 $('a[href="#submitClearSeries"]').click(function() {
773 $('#seriesPreview').html('<i>' + PMA_messages['strNone'] + '</i>');
775 $('span#clearSeriesLink').hide();
778 $('a[href="#submitAddSeries"]').click(function() {
779 if ($('input#variableInput').attr('value').length == 0) {
783 if (newChart == null) {
784 $('#seriesPreview').html('');
787 title: $('input[name="chartTitle"]').attr('value'),
793 dataPoints: [{ type: 'statusvar', name: $('input#variableInput').attr('value') }],
794 name: $('input#variableInput').attr('value'),
795 display: $('input[name="differentialValue"]').attr('checked') ? 'differential' : ''
798 if (serie.dataPoint == 'Processes') {
799 serie.dataType='proc';
802 if ($('input[name="useDivisor"]').attr('checked')) {
803 serie.valueDivisor = parseInt($('input[name="valueDivisor"]').attr('value'));
806 if ($('input[name="useUnit"]').attr('checked')) {
807 serie.unit = $('input[name="valueUnit"]').attr('value');
810 var str = serie.display == 'differential' ? ', ' + PMA_messages['strDifferential'] : '';
811 str += serie.valueDivisor ? (', ' + $.sprintf(PMA_messages['strDividedBy'], serie.valueDivisor)) : '';
812 str += serie.unit ? (', ' + PMA_messages['strUnit'] + ': ' + serie.unit) : '';
814 $('#seriesPreview').append('- ' + serie.name + str + '<br>');
816 newChart.nodes.push(serie);
818 $('input#variableInput').attr('value', '');
819 $('input[name="differentialValue"]').attr('checked', true);
820 $('input[name="useDivisor"]').attr('checked', false);
821 $('input[name="useUnit"]').attr('checked', false);
822 $('input[name="useDivisor"]').trigger('change');
823 $('input[name="useUnit"]').trigger('change');
824 $('select[name="varChartList"]').get(0).selectedIndex = 0;
826 $('span#clearSeriesLink').show();
831 $("input#variableInput").autocomplete({
832 source: variableNames
835 /* Initializes the monitor, called only once */
836 function initGrid() {
840 /* Apply default values & config */
841 if (window.localStorage) {
842 if (window.localStorage['monitorCharts']) {
843 runtime.charts = $.parseJSON(window.localStorage['monitorCharts']);
845 if (window.localStorage['monitorSettings']) {
846 monitorSettings = $.parseJSON(window.localStorage['monitorSettings']);
849 $('a[href="#clearMonitorConfig"]').toggle(runtime.charts != null);
851 if (runtime.charts != null && monitorProtocolVersion != window.localStorage['monitorVersion']) {
852 $('div#emptyDialog').attr('title',PMA_messages['strIncompatibleMonitorConfig']);
853 $('div#emptyDialog').html(PMA_messages['strIncompatibleMonitorConfigDescription']);
856 dlgBtns[PMA_messages['strClose']] = function() { $(this).dialog('close'); };
858 $('div#emptyDialog').dialog({
865 if (runtime.charts == null) {
866 runtime.charts = defaultChartGrid;
868 if (monitorSettings == null) {
869 monitorSettings = defaultMonitorSettings;
872 $('select[name="gridChartRefresh"]').attr('value', monitorSettings.gridRefresh / 1000);
873 $('select[name="chartColumns"]').attr('value', monitorSettings.columns);
875 if (monitorSettings.gridMaxPoints == 'auto') {
876 runtime.gridMaxPoints = Math.round((monitorSettings.chartSize.width - 40) / 12);
878 runtime.gridMaxPoints = monitorSettings.gridMaxPoints;
881 runtime.xmin = new Date().getTime() - server_time_diff - runtime.gridMaxPoints * monitorSettings.gridRefresh;
882 runtime.xmax = new Date().getTime() - server_time_diff + monitorSettings.gridRefresh;
884 /* Calculate how much spacing there is between each chart */
885 $('table#chartGrid').html('<tr><td></td><td></td></tr><tr><td></td><td></td></tr>');
887 width: $('table#chartGrid td:nth-child(2)').offset().left
888 - $('table#chartGrid td:nth-child(1)').offset().left,
889 height: $('table#chartGrid tr:nth-child(2) td:nth-child(2)').offset().top
890 - $('table#chartGrid tr:nth-child(1) td:nth-child(1)').offset().top
892 $('table#chartGrid').html('');
894 /* Add all charts - in correct order */
896 $.each(runtime.charts, function(key, value) {
900 for (var i = 0; i<keys.length; i++)
901 addChart(runtime.charts[keys[i]], true);
903 /* Fill in missing cells */
904 var numCharts = $('table#chartGrid .monitorChart').length;
905 var numMissingCells = (monitorSettings.columns - numCharts % monitorSettings.columns) % monitorSettings.columns;
906 for (var i = 0; i < numMissingCells; i++) {
907 $('table#chartGrid tr:last').append('<td></td>');
910 // Empty cells should keep their size so you can drop onto them
911 $('table#chartGrid tr td').css('width', chartSize().width + 'px');
913 buildRequiredDataList();
917 /* Destroys all monitor related resources */
918 function destroyGrid() {
919 if (runtime.charts) {
920 $.each(runtime.charts, function(key, value) {
922 value.chart.destroy();
928 runtime.refreshRequest.abort();
931 clearTimeout(runtime.refreshTimeout);
934 $('table#chartGrid').html('');
936 runtime.charts = null;
938 monitorSettings = null;
941 /* Calls destroyGrid() and initGrid(), but before doing so it saves the chart
942 * data from each chart and restores it after the monitor is initialized again */
943 function rebuildGrid() {
945 if (runtime.charts) {
947 $.each(runtime.charts, function(key, chartObj) {
948 for (var i = 0; i < chartObj.nodes.length; i++) {
949 oldData[chartObj.nodes[i].dataPoint] = [];
950 for (var j = 0; j < chartObj.chart.series[i].data.length; j++)
951 oldData[chartObj.nodes[i].dataPoint].push([chartObj.chart.series[i].data[j].x, chartObj.chart.series[i].data[j].y]);
960 $.each(runtime.charts, function(key, chartObj) {
961 for (var j = 0; j < chartObj.nodes.length; j++) {
962 if (oldData[chartObj.nodes[j].dataPoint]) {
963 chartObj.chart.series[j].setData(oldData[chartObj.nodes[j].dataPoint]);
970 /* Calculactes the dynamic chart size that depends on the column width */
971 function chartSize() {
972 var wdt = $('div#logTable').innerWidth() / monitorSettings.columns - (monitorSettings.columns - 1) * chartSpacing.width;
979 /* Adds a chart to the chart grid */
980 function addChart(chartObj, initialize) {
982 for (var j = 0; j<chartObj.nodes.length; j++)
983 series.push(chartObj.nodes[j]);
987 renderTo: 'gridchart' + runtime.chartAI,
988 width: chartSize().width,
989 height: chartSize().height,
993 selection: function(event) {
994 if (editMode || $('#logAnalyseDialog').length == 0) {
998 var extremesObject = event.xAxis[0],
999 min = extremesObject.min,
1000 max = extremesObject.max;
1002 $('#logAnalyseDialog input[name="dateStart"]')
1003 .attr('value', Highcharts.dateFormat('%Y-%m-%d %H:%M:%S', new Date(min)));
1004 $('#logAnalyseDialog input[name="dateEnd"]')
1005 .attr('value', Highcharts.dateFormat('%Y-%m-%d %H:%M:%S', new Date(max)));
1009 dlgBtns[PMA_messages['strFromSlowLog']] = function() {
1011 $(this).dialog("close");
1014 dlgBtns[PMA_messages['strFromGeneralLog']] = function() {
1016 $(this).dialog("close");
1019 function loadLog(type) {
1020 var dateStart = Date.parse($('#logAnalyseDialog input[name="dateStart"]').prop('value')) || min;
1021 var dateEnd = Date.parse($('#logAnalyseDialog input[name="dateEnd"]').prop('value')) || max;
1027 removeVariables: $('input#removeVariables').prop('checked'),
1028 limitTypes: $('input#limitTypes').prop('checked')
1032 $('#logAnalyseDialog').dialog({
1053 formatter: function() {
1054 var s = '<b>' + Highcharts.dateFormat('%H:%M:%S', this.x) + '</b>';
1056 $.each(this.points, function(i, point) {
1057 s += '<br/><span style="color:' + point.series.color + '">' + point.series.name + ':</span> ' +
1058 ((parseInt(point.y) == point.y) ? point.y : Highcharts.numberFormat(this.y, 2)) + ' ' + (point.series.options.unit || '');
1069 buttons: gridbuttons,
1070 title: { text: chartObj.title }
1073 if (chartObj.settings) {
1074 $.extend(true, settings, chartObj.settings);
1077 if ($('#' + settings.chart.renderTo).length == 0) {
1078 var numCharts = $('table#chartGrid .monitorChart').length;
1080 if (numCharts == 0 || !( numCharts % monitorSettings.columns)) {
1081 $('table#chartGrid').append('<tr></tr>');
1084 $('table#chartGrid tr:last').append('<td><div class="ui-state-default monitorChart" id="' + settings.chart.renderTo + '"></div></td>');
1087 chartObj.chart = PMA_createChart(settings);
1088 chartObj.numPoints = 0;
1090 if (initialize != true) {
1091 runtime.charts['c' + runtime.chartAI] = chartObj;
1092 buildRequiredDataList();
1095 // Edit, Print icon only in edit mode
1096 $('table#chartGrid div svg').find('*[zIndex=20], *[zIndex=21], *[zIndex=19]').toggle(editMode)
1101 /* Opens a dialog that allows one to edit the title and series labels of the supplied chart */
1102 function editChart(chartObj) {
1103 var htmlnode = chartObj.options.chart.renderTo;
1109 var chartKey = null;
1110 $.each(runtime.charts, function(key, value) {
1111 if (value.chart.options.chart.renderTo == htmlnode) {
1118 if (chart == null) {
1122 var htmlStr = '<p><b>Chart title: </b> <br/> <input type="text" size="35" name="chartTitle" value="' + chart.title + '" />';
1123 htmlStr += '</p><p><b>Series:</b> </p><ol>';
1124 for (var i = 0; i<chart.nodes.length; i++) {
1125 htmlStr += '<li><i>' + chart.nodes[i].dataPoints[0].name + ': </i><br/><input type="text" name="chartSerie-' + i + '" value="' + chart.nodes[i].name + '" /></li>';
1129 dlgBtns['Save'] = function() {
1130 runtime.charts[chartKey].title = $('div#emptyDialog input[name="chartTitle"]').attr('value');
1131 runtime.charts[chartKey].chart.setTitle({ text: runtime.charts[chartKey].title });
1133 $('div#emptyDialog input[name*="chartSerie"]').each(function() {
1134 var idx = $(this).attr('name').split('-')[1];
1135 runtime.charts[chartKey].nodes[idx].name = $(this).attr('value');
1136 runtime.charts[chartKey].chart.series[idx].name = $(this).attr('value');
1139 $(this).dialog('close');
1142 dlgBtns['Cancel'] = function() {
1143 $(this).dialog('close');
1146 $('div#emptyDialog').attr('title', 'Edit chart');
1147 $('div#emptyDialog').html(htmlStr + '</ol>');
1148 $('div#emptyDialog').dialog({
1155 /* Removes a chart from the grid */
1156 function removeChart(chartObj) {
1157 var htmlnode = chartObj.options.chart.renderTo;
1162 $.each(runtime.charts, function(key, value) {
1163 if (value.chart.options.chart.renderTo == htmlnode) {
1164 delete runtime.charts[key];
1169 buildRequiredDataList();
1171 // Using settimeout() because clicking the remove link fires an onclick event
1172 // which throws an error when the chart is destroyed
1173 setTimeout(function() {
1175 $('div#' + htmlnode).remove();
1178 saveMonitor(); // Save settings
1181 /* Called in regular intervalls, this function updates the values of each chart in the grid */
1182 function refreshChartGrid() {
1183 /* Send to server */
1184 runtime.refreshRequest = $.post('server_status.php?' + url_query, {
1188 requiredData: $.toJSON(runtime.dataList)
1192 chartData = $.parseJSON(data);
1194 return serverResponseError();
1199 /* Update values in each graph */
1200 $.each(runtime.charts, function(orderKey, elem) {
1201 var key = elem.chartID;
1202 // If newly added chart, we have no data for it yet
1203 if (! chartData[key]) {
1207 for (var j = 0; j < elem.nodes.length; j++) {
1209 if (i == 0 && j == 0) {
1210 if (oldChartData == null) {
1211 diff = chartData.x - runtime.xmax;
1213 diff = parseInt(chartData.x - oldChartData.x);
1216 runtime.xmin += diff;
1217 runtime.xmax += diff;
1220 elem.chart.xAxis[0].setExtremes(runtime.xmin, runtime.xmax, false);
1222 /* Calculate y value */
1224 // If transform function given, use it
1225 if (elem.nodes[j].transformFn) {
1226 value = chartValueTransform(
1227 elem.nodes[j].transformFn,
1229 // Check if first iteration (oldChartData==null), or if newly added chart oldChartData[key]==null
1230 (oldChartData == null || oldChartData[key] == null ? null : oldChartData[key][j])
1233 // Otherwise use original value and apply differential and divisor if given,
1234 // in this case we have only one data point per series - located at chartData[key][j][0]
1236 value = parseFloat(chartData[key][j][0].value);
1238 if (elem.nodes[j].display == 'differential') {
1239 if (oldChartData == null || oldChartData[key] == null) {
1242 value -= oldChartData[key][j][0].value;
1245 if (elem.nodes[j].valueDivisor) {
1246 value = value / elem.nodes[j].valueDivisor;
1250 // Set y value, if defined
1251 if (value != undefined) {
1252 elem.chart.series[j].addPoint(
1253 { x: chartData.x, y: value },
1255 elem.numPoints >= runtime.gridMaxPoints
1262 runtime.charts[orderKey].numPoints++;
1263 if (runtime.redrawCharts) {
1264 elem.chart.redraw();
1268 oldChartData = chartData;
1270 runtime.refreshTimeout = setTimeout(refreshChartGrid, monitorSettings.gridRefresh);
1274 /* Function that supplies special value transform functions for chart values */
1275 function chartValueTransform(name, cur, prev) {
1281 // cur and prev are datapoint arrays, but containing only 1 element for cpu-linux
1282 cur = cur[0], prev = prev[0];
1284 var diff_total = cur.busy + cur.idle - (prev.busy + prev.idle);
1285 var diff_idle = cur.idle - prev.idle;
1286 return 100 * (diff_total - diff_idle) / diff_total;
1288 // Query cache efficiency (%)
1293 // cur[0].value is Qcache_hits, cur[1].value is Com_select
1294 var diffQHits = cur[0].value - prev[0].value;
1295 // No NaN please :-)
1296 if (cur[1].value - prev[1].value == 0) return 0;
1298 return diffQHits / (cur[1].value - prev[1].value + diffQHits) * 100;
1300 // Query cache usage (%)
1302 if (cur[1].value == 0) return 0;
1303 // cur[0].value is Qcache_free_memory, cur[1].value is query_cache_size
1304 return 100 - cur[0].value / cur[1].value * 100;
1310 /* Build list of nodes that need to be retrieved from server.
1311 * It creates something like a stripped down version of the runtime.charts object.
1313 function buildRequiredDataList() {
1314 runtime.dataList = {};
1315 // Store an own id, because the property name is subject of reordering,
1316 // thus destroying our mapping with runtime.charts <=> runtime.dataList
1318 $.each(runtime.charts, function(key, chart) {
1319 runtime.dataList[chartID] = [];
1320 for(var i=0; i < chart.nodes.length; i++) {
1321 runtime.dataList[chartID][i] = chart.nodes[i].dataPoints;
1323 runtime.charts[key].chartID = chartID;
1328 /* Loads the log table data, generates the table and handles the filters */
1329 function loadLogStatistics(opts) {
1331 var logRequest = null;
1333 if (! opts.removeVariables) {
1334 opts.removeVariables = false;
1336 if (! opts.limitTypes) {
1337 opts.limitTypes = false;
1340 $('#emptyDialog').html(PMA_messages['strAnalysingLogs'] +
1341 ' <img class="ajaxIcon" src="' + pmaThemeImage +
1342 'ajax_clock_small.gif" alt="">');
1345 dlgBtns[PMA_messages['strCancelRequest']] = function() {
1346 if (logRequest != null) {
1350 $(this).dialog("close");
1353 $('#emptyDialog').dialog({
1360 logRequest = $.get('server_status.php?' + url_query,
1361 { ajax_request: true,
1364 time_start: Math.round(opts.start / 1000),
1365 time_end: Math.round(opts.end / 1000),
1366 removeVariables: opts.removeVariables,
1367 limitTypes: opts.limitTypes
1372 logData = $.parseJSON(data);
1374 return serverResponseError();
1377 if (logData.rows.length != 0) {
1378 runtime.logDataCols = buildLogTable(logData);
1380 /* Show some stats in the dialog */
1381 $('#emptyDialog').attr('title', PMA_messages['strLoadingLogs']);
1382 $('#emptyDialog').html('<p>' + PMA_messages['strLogDataLoaded'] + '</p>');
1383 $.each(logData.sum, function(key, value) {
1384 key = key.charAt(0).toUpperCase() + key.slice(1).toLowerCase();
1385 if (key == 'Total') {
1386 key = '<b>' + key + '</b>';
1388 $('#emptyDialog').append(key + ': ' + value + '<br/>');
1391 /* Add filter options if more than a bunch of rows there to filter */
1392 if (logData.numRows > 12) {
1393 $('div#logTable').prepend(
1394 '<fieldset id="logDataFilter">' +
1395 ' <legend>' + PMA_messages['strFiltersForLogTable'] + '</legend>' +
1396 ' <div class="formelement">' +
1397 ' <label for="filterQueryText">' + PMA_messages['strFilterByWordRegexp'] + '</label>' +
1398 ' <input name="filterQueryText" type="text" id="filterQueryText" style="vertical-align: baseline;" />' +
1400 ((logData.numRows > 250) ? ' <div class="formelement"><button name="startFilterQueryText" id="startFilterQueryText">' + PMA_messages['strFilter'] + '</button></div>' : '') +
1401 ' <div class="formelement">' +
1402 ' <input type="checkbox" id="noWHEREData" name="noWHEREData" value="1" /> ' +
1403 ' <label for="noWHEREData"> ' + PMA_messages['strIgnoreWhereAndGroup'] + '</label>' +
1408 $('div#logTable input#noWHEREData').change(function() {
1409 filterQueries(true);
1412 if (logData.numRows > 250) {
1413 $('div#logTable button#startFilterQueryText').click(filterQueries);
1415 $('div#logTable input#filterQueryText').keyup(filterQueries);
1421 dlgBtns[PMA_messages['strJumpToTable']] = function() {
1422 $(this).dialog("close");
1423 $(document).scrollTop($('div#logTable').offset().top);
1426 $('#emptyDialog').dialog( "option", "buttons", dlgBtns);
1429 $('#emptyDialog').html('<p>' + PMA_messages['strNoDataFound'] + '</p>');
1432 dlgBtns[PMA_messages['strClose']] = function() {
1433 $(this).dialog("close");
1436 $('#emptyDialog').dialog( "option", "buttons", dlgBtns );
1441 /* Handles the actions performed when the user uses any of the log table filters
1442 * which are the filter by name and grouping with ignoring data in WHERE clauses
1444 * @param boolean Should be true when the users enabled or disabled to group queries ignoring data in WHERE clauses
1446 function filterQueries(varFilterChange) {
1447 var odd_row = false, cell, textFilter;
1448 var val = $('div#logTable input#filterQueryText').val();
1450 if (val.length == 0) {
1453 textFilter = new RegExp(val, 'i');
1456 var rowSum = 0, totalSum = 0, i = 0, q;
1457 var noVars = $('div#logTable input#noWHEREData').attr('checked');
1458 var equalsFilter = /([^=]+)=(\d+|((\'|"|).*?[^\\])\4((\s+)|$))/gi;
1459 var functionFilter = /([a-z0-9_]+)\(.+?\)/gi;
1460 var filteredQueries = {}, filteredQueriesLines = {};
1461 var hide = false, rowData;
1462 var queryColumnName = runtime.logDataCols[runtime.logDataCols.length - 2];
1463 var sumColumnName = runtime.logDataCols[runtime.logDataCols.length - 1];
1464 var isSlowLog = opts.src == 'slow';
1465 var columnSums = {};
1467 // For the slow log we have to count many columns (query_time, lock_time, rows_examined, rows_sent, etc.)
1468 var countRow = function(query, row) {
1469 var cells = row.match(/<td>(.*?)<\/td>/gi);
1470 if (!columnSums[query]) {
1471 columnSums[query] = [0, 0, 0, 0];
1474 // lock_time and query_time and displayed in timespan format
1475 columnSums[query][0] += timeToSec(cells[2].replace(/(<td>|<\/td>)/gi, ''));
1476 columnSums[query][1] += timeToSec(cells[3].replace(/(<td>|<\/td>)/gi, ''));
1477 // rows_examind and rows_sent are just numbers
1478 columnSums[query][2] += parseInt(cells[4].replace(/(<td>|<\/td>)/gi, ''));
1479 columnSums[query][3] += parseInt(cells[5].replace(/(<td>|<\/td>)/gi, ''));
1482 // We just assume the sql text is always in the second last column, and that the total count is right of it
1483 $('div#logTable table tbody tr td:nth-child(' + (runtime.logDataCols.length - 1) + ')').each(function() {
1484 // If query is a SELECT and user enabled or disabled to group queries ignoring data in where statements, we
1485 // need to re-calculate the sums of each row
1486 if (varFilterChange && $(this).html().match(/^SELECT/i)) {
1488 // Group on => Sum up identical columns, and hide all but 1
1490 q = $(this).text().replace(equalsFilter, '$1=...$6').trim();
1491 q = q.replace(functionFilter, ' $1(...)');
1493 // Js does not specify a limit on property name length, so we can abuse it as index :-)
1494 if (filteredQueries[q]) {
1495 filteredQueries[q] += parseInt($(this).next().text());
1496 totalSum += parseInt($(this).next().text());
1499 filteredQueries[q] = parseInt($(this).next().text());;
1500 filteredQueriesLines[q] = i;
1504 countRow(q, $(this).parent().html());
1508 // Group off: Restore original columns
1510 rowData = $(this).parent().data('query');
1512 $(this).text(rowData[queryColumnName]);
1513 // Restore total count
1514 $(this).next().text(rowData[sumColumnName]);
1515 // Restore slow log columns
1517 $(this).parent().children('td:nth-child(3)').text(rowData['query_time']);
1518 $(this).parent().children('td:nth-child(4)').text(rowData['lock_time']);
1519 $(this).parent().children('td:nth-child(5)').text(rowData['rows_sent']);
1520 $(this).parent().children('td:nth-child(6)').text(rowData['rows_examined']);
1525 // If not required to be hidden, do we need to hide because of a not matching text filter?
1526 if (! hide && (textFilter != null && ! textFilter.exec($(this).text()))) {
1530 // Now display or hide this column
1532 $(this).parent().css('display', 'none');
1534 totalSum += parseInt($(this).next().text());
1537 odd_row = ! odd_row;
1538 $(this).parent().css('display', '');
1540 $(this).parent().addClass('odd');
1541 $(this).parent().removeClass('even');
1543 $(this).parent().addClass('even');
1544 $(this).parent().removeClass('odd');
1552 // We finished summarizing counts => Update count values of all grouped entries
1553 if (varFilterChange) {
1555 var numCol, row, $table = $('div#logTable table tbody');
1556 $.each(filteredQueriesLines, function(key, value) {
1557 if (filteredQueries[key] <= 1) {
1561 row = $table.children('tr:nth-child(' + (value + 1) + ')');
1562 numCol = row.children(':nth-child(' + (runtime.logDataCols.length) + ')');
1563 numCol.text(filteredQueries[key]);
1566 row.children('td:nth-child(3)').text(secToTime(columnSums[key][0]));
1567 row.children('td:nth-child(4)').text(secToTime(columnSums[key][1]));
1568 row.children('td:nth-child(5)').text(columnSums[key][2]);
1569 row.children('td:nth-child(6)').text(columnSums[key][3]);
1574 $('div#logTable table').trigger("update");
1575 setTimeout(function() {
1576 $('div#logTable table').trigger('sorton', [[[runtime.logDataCols.length - 1, 1]]]);
1580 // Display some stats at the bottom of the table
1581 $('div#logTable table tfoot tr')
1582 .html('<th colspan="' + (runtime.logDataCols.length - 1) + '">' +
1583 PMA_messages['strSumRows'] + ' ' + rowSum + '<span style="float:right">' +
1584 PMA_messages['strTotal'] + '</span></th><th align="right">' + totalSum + '</th>');
1588 /* Turns a timespan (12:12:12) into a number */
1589 function timeToSec(timeStr) {
1590 var time = timeStr.split(':');
1591 return parseInt(time[0]*3600) + parseInt(time[1]*60) + parseInt(time[2]);
1594 /* Turns a number into a timespan (100 into 00:01:40) */
1595 function secToTime(timeInt) {
1596 hours = Math.floor(timeInt / 3600);
1597 timeInt -= hours*3600;
1598 minutes = Math.floor(timeInt / 60);
1599 timeInt -= minutes*60;
1602 hours = '0' + hours;
1605 minutes = '0' + minutes;
1608 timeInt = '0' + timeInt;
1611 return hours + ':' + minutes + ':' + timeInt;
1614 /* Constructs the log table out of the retrieved server data */
1615 function buildLogTable(data) {
1616 var rows = data.rows;
1617 var cols = new Array();
1618 var $table = $('<table border="0" class="sortable"></table>');
1619 var $tBody, $tRow, $tCell;
1621 $('#logTable').html($table);
1623 var formatValue = function(name, value) {
1626 return value.replace(/(\[.*?\])+/g, '');
1631 for (var i = 0; i < rows.length; i++) {
1633 $.each(rows[0], function(key, value) {
1636 $table.append( '<thead>' +
1637 '<tr><th class="nowrap">' + cols.join('</th><th class="nowrap">') + '</th></tr>' +
1640 $table.append($tBody = $('<tbody></tbody>'));
1643 $tBody.append($tRow = $('<tr class="noclick"></tr>'));
1645 for (var j = 0; j < cols.length; j++) {
1646 // Assuming the query column is the second last
1647 if (j == cols.length - 2 && rows[i][cols[j]].match(/^SELECT/i)) {
1648 $tRow.append($tCell = $('<td class="linkElem">' + formatValue(cols[j], rows[i][cols[j]]) + '</td>'));
1649 $tCell.click(openQueryAnalyzer);
1651 $tRow.append('<td>' + formatValue(cols[j], rows[i][cols[j]]) + '</td>');
1654 $tRow.data('query', rows[i]);
1658 $table.append('<tfoot>' +
1659 '<tr><th colspan="' + (cols.length - 1) + '">' + PMA_messages['strSumRows'] +
1660 ' ' + data.numRows + '<span style="float:right">' + PMA_messages['strTotal'] +
1661 '</span></th><th align="right">' + data.sum.TOTAL + '</th></tr></tfoot>');
1663 // Append a tooltip to the count column, if there exist one
1664 if ($('#logTable th:last').html() == '#') {
1665 $('#logTable th:last').append(' ' + PMA_getImage('b_docs.png', '', {'class': 'qroupedQueryInfoIcon'}));
1667 var qtipContent = PMA_messages['strCountColumnExplanation'];
1669 qtipContent += '<p>' + PMA_messages['strMoreCountColumnExplanation'] + '</p>';
1672 $('img.qroupedQueryInfoIcon').qtip({
1673 content: qtipContent,
1676 target: 'bottomMiddle',
1681 hide: { delay: 1000 }
1685 $('div#logTable table').tablesorter({
1686 sortList: [[cols.length - 1, 1]],
1687 widgets: ['fast-zebra']
1690 $('div#logTable table thead th')
1691 .append('<img class="icon sortableIcon" src="themes/dot.gif" alt="">');
1696 /* Opens the query analyzer dialog */
1697 function openQueryAnalyzer() {
1698 var rowData = $(this).parent().data('query');
1699 var query = rowData.argument || rowData.sql_text;
1701 query = PMA_SQLPrettyPrint(query);
1702 codemirror_editor.setValue(query);
1703 // Codemirror is bugged, it doesn't refresh properly sometimes. Following lines seem to fix that
1704 setTimeout(function() {
1705 codemirror_editor.refresh()
1708 var profilingChart = null;
1711 dlgBtns[PMA_messages['strAnalyzeQuery']] = function() {
1712 loadQueryAnalysis(rowData);
1714 dlgBtns[PMA_messages['strClose']] = function() {
1715 if (profilingChart != null) {
1716 profilingChart.destroy();
1718 $('div#queryAnalyzerDialog div.placeHolder').html('');
1719 codemirror_editor.setValue('');
1720 $(this).dialog("close");
1723 $('div#queryAnalyzerDialog').dialog({
1731 /* Loads and displays the analyzed query data */
1732 function loadQueryAnalysis(rowData) {
1733 var db = rowData.db || '';
1735 $('div#queryAnalyzerDialog div.placeHolder').html(
1736 PMA_messages['strAnalyzing'] + ' <img class="ajaxIcon" src="' +
1737 pmaThemeImage + 'ajax_clock_small.gif" alt="">');
1739 $.post('server_status.php?' + url_query, {
1741 query_analyzer: true,
1742 query: codemirror_editor.getValue(),
1745 data = $.parseJSON(data);
1749 $('div#queryAnalyzerDialog div.placeHolder').html('<div class="error">' + data.error + '</div>');
1753 // Float sux, I'll use table :(
1754 $('div#queryAnalyzerDialog div.placeHolder')
1755 .html('<table width="100%" border="0"><tr><td class="explain"></td><td class="chart"></td></tr></table>');
1757 var explain = '<b>' + PMA_messages['strExplainOutput'] + '</b> ' + explain_docu;
1758 if (data.explain.length > 1) {
1760 for (var i = 0; i < data.explain.length; i++) {
1764 explain += '<a href="#showExplain-' + i + '">' + i + '</a>';
1768 explain += '<p></p>';
1769 for (var i = 0; i < data.explain.length; i++) {
1770 explain += '<div class="explain-' + i + '"' + (i>0? 'style="display:none;"' : '' ) + '>';
1771 $.each(data.explain[i], function(key, value) {
1772 value = (value == null)?'null':value;
1774 if (key == 'type' && value.toLowerCase() == 'all') {
1775 value = '<span class="attention">' + value + '</span>';
1777 if (key == 'Extra') {
1778 value = value.replace(/(using (temporary|filesort))/gi, '<span class="attention">$1</span>');
1780 explain += key + ': ' + value + '<br />';
1782 explain += '</div>';
1785 explain += '<p><b>' + PMA_messages['strAffectedRows'] + '</b> ' + data.affectedRows;
1787 $('div#queryAnalyzerDialog div.placeHolder td.explain').append(explain);
1789 $('div#queryAnalyzerDialog div.placeHolder a[href*="#showExplain"]').click(function() {
1790 var id = $(this).attr('href').split('-')[1];
1791 $(this).parent().find('div[class*="explain"]').hide();
1792 $(this).parent().find('div[class*="explain-' + id + '"]').show();
1795 if (data.profiling) {
1797 var numberTable = '<table class="queryNums"><thead><tr><th>' + PMA_messages['strStatus'] + '</th><th>' + PMA_messages['strTime'] + '</th></tr></thead><tbody>';
1800 for (var i = 0; i < data.profiling.length; i++) {
1801 duration = parseFloat(data.profiling[i].duration);
1803 chartData.push([data.profiling[i].state, duration]);
1804 totalTime += duration;
1806 numberTable += '<tr><td>' + data.profiling[i].state + ' </td><td> ' + PMA_prettyProfilingNum(duration, 2) + '</td></tr>';
1808 numberTable += '<tr><td><b>' + PMA_messages['strTotalTime'] + '</b></td><td>' + PMA_prettyProfilingNum(totalTime, 2) + '</td></tr>';
1809 numberTable += '</tbody></table>';
1811 $('div#queryAnalyzerDialog div.placeHolder td.chart').append(
1812 '<b>' + PMA_messages['strProfilingResults'] + ' ' + profiling_docu + '</b> ' +
1813 '(<a href="#showNums">' + PMA_messages['strTable'] + '</a>, <a href="#showChart">' + PMA_messages['strChart'] + '</a>)<br/>' +
1814 numberTable + ' <div id="queryProfiling"></div>');
1816 $('div#queryAnalyzerDialog div.placeHolder a[href="#showNums"]').click(function() {
1817 $('div#queryAnalyzerDialog div#queryProfiling').hide();
1818 $('div#queryAnalyzerDialog table.queryNums').show();
1822 $('div#queryAnalyzerDialog div.placeHolder a[href="#showChart"]').click(function() {
1823 $('div#queryAnalyzerDialog div#queryProfiling').show();
1824 $('div#queryAnalyzerDialog table.queryNums').hide();
1828 profilingChart = PMA_createProfilingChart(chartData, {
1830 renderTo: 'queryProfiling'
1840 $('div#queryProfiling').resizable();
1845 /* Saves the monitor to localstorage */
1846 function saveMonitor() {
1849 $.each(runtime.charts, function(key, elem) {
1851 gridCopy[key].nodes = elem.nodes;
1852 gridCopy[key].settings = elem.settings;
1853 gridCopy[key].title = elem.title;
1856 if (window.localStorage) {
1857 window.localStorage['monitorCharts'] = $.toJSON(gridCopy);
1858 window.localStorage['monitorSettings'] = $.toJSON(monitorSettings);
1859 window.localStorage['monitorVersion'] = monitorProtocolVersion;
1862 $('a[href="#clearMonitorConfig"]').show();
1866 // Run the monitor once loaded
1868 $('a[href="#pauseCharts"]').trigger('click');