From 91178f0029e1fb232787154ff47ae3ccf5f1d417 Mon Sep 17 00:00:00 2001 From: Piyush Vijay Date: Wed, 13 Jun 2018 01:14:48 +0530 Subject: [PATCH 1/3] Break PMA_Console JS code into classes and imports. Signed-off-by: Piyush Vijay --- js/src/classes/Console/PMA_ConsoleResizer.js | 86 ++++ .../classes/Console/PMA_consoleBookmarks.js | 97 ++++ js/src/classes/Console/PMA_consoleDebug.js | 414 +++++++++++++++++ js/src/classes/Console/PMA_consoleInput.js | 259 +++++++++++ js/src/classes/Console/PMA_consoleMessages.js | 299 +++++++++++++ js/src/console.js | 417 ++++++++++++++++++ 6 files changed, 1572 insertions(+) create mode 100644 js/src/classes/Console/PMA_ConsoleResizer.js create mode 100644 js/src/classes/Console/PMA_consoleBookmarks.js create mode 100644 js/src/classes/Console/PMA_consoleDebug.js create mode 100644 js/src/classes/Console/PMA_consoleInput.js create mode 100644 js/src/classes/Console/PMA_consoleMessages.js create mode 100644 js/src/console.js diff --git a/js/src/classes/Console/PMA_ConsoleResizer.js b/js/src/classes/Console/PMA_ConsoleResizer.js new file mode 100644 index 0000000000..215ae31b94 --- /dev/null +++ b/js/src/classes/Console/PMA_ConsoleResizer.js @@ -0,0 +1,86 @@ +/** + * Resizer object + * Careful: this object UI logics highly related with functions under PMA_console + * Resizing min-height is 32, if small than it, console will collapse + */ +export default class PMA_consoleResizer { + constructor (instance) { + this._posY = 0; + this._height = 0; + this._resultHeight = 0; + this.pmaConsole = null; + this.initialize = this.initialize.bind(this); + this._mousedown = this._mousedown.bind(this); + this._mousemove = this._mousemove.bind(this); + this._mouseup = this._mouseup.bind(this); + this.setPmaConsole(instance); + } + setPmaConsole (instance) { + this.pmaConsole = instance; + this.initialize(); + } + /** + * Mousedown event handler for bind to resizer + * + * @return void + */ + _mousedown (event) { + if (this.pmaConsole.config.Mode !== 'show') { + return; + } + this._posY = event.pageY; + this._height = this.pmaConsole.$consoleContent.height(); + $(document).mousemove(this._mousemove); + $(document).mouseup(this._mouseup); + // Disable text selection while resizing + $(document).on('selectstart', function () { + return false; + }); + } + /** + * Mousemove event handler for bind to resizer + * + * @return void + */ + _mousemove (event) { + if (event.pageY < 35) { + event.pageY = 35; + } + this._resultHeight = this._height + (this._posY - event.pageY); + // Content min-height is 32, if adjusting height small than it we'll move it out of the page + if (this._resultHeight <= 32) { + this.pmaConsole.$consoleAllContents.height(32); + this.pmaConsole.$consoleContent.css('margin-bottom', this._resultHeight - 32); + } else { + // Logic below makes viewable area always at bottom when adjusting height and content already at bottom + if (this.pmaConsole.$consoleContent.scrollTop() + this.pmaConsole.$consoleContent.innerHeight() + 16 + >= this.pmaConsole.$consoleContent.prop('scrollHeight')) { + this.pmaConsole.$consoleAllContents.height(this._resultHeight); + this.pmaConsole.scrollBottom(); + } else { + this.pmaConsole.$consoleAllContents.height(this._resultHeight); + } + } + } + /** + * Mouseup event handler for bind to resizer + * + * @return void + */ + _mouseup () { + this.pmaConsole.setConfig('Height', this._resultHeight); + this.pmaConsole.show(); + $(document).off('mousemove'); + $(document).off('mouseup'); + $(document).off('selectstart'); + } + /** + * Used for console resizer initialize + * + * @return void + */ + initialize () { + $('#pma_console').find('.toolbar').off('mousedown'); + $('#pma_console').find('.toolbar').mousedown(this._mousedown); + } +} diff --git a/js/src/classes/Console/PMA_consoleBookmarks.js b/js/src/classes/Console/PMA_consoleBookmarks.js new file mode 100644 index 0000000000..72f41dc41b --- /dev/null +++ b/js/src/classes/Console/PMA_consoleBookmarks.js @@ -0,0 +1,97 @@ +/** + * Console bookmarks card, and bookmarks items management object + */ +export default class PMA_consoleBookmarks { + constructor (instance) { + this._bookmarks = []; + this.pmaConsole = null; + this.setPmaConsole = this.setPmaConsole.bind(this); + this.addBookmark = this.addBookmark.bind(this); + this.refresh = this.refresh.bind(this); + this.initialize = this.initialize.bind(this); + this.setPmaConsole(instance); + } + setPmaConsole (instance) { + this.pmaConsole = instance; + this.initialize(); + } + addBookmark (queryString, targetDb, label, isShared, id) { + $('#pma_bookmarks').find('.add [name=shared]').prop('checked', false); + $('#pma_bookmarks').find('.add [name=label]').val(''); + $('#pma_bookmarks').find('.add [name=targetdb]').val(''); + $('#pma_bookmarks').find('.add [name=id_bookmark]').val(''); + this.pmaConsole.pmaConsoleInput.setText('', 'bookmark'); + + switch (arguments.length) { + case 4: + $('#pma_bookmarks').find('.add [name=shared]').prop('checked', isShared); + break; + case 3: + $('#pma_bookmarks').find('.add [name=label]').val(label); + break; + case 2: + $('#pma_bookmarks').find('.add [name=targetdb]').val(targetDb); + break; + case 1: + this.pmaConsole.pmaConsoleInput.setText(queryString, 'bookmark'); + break; + default: + break; + } + } + refresh () { + $.get('import.php', + { ajax_request: true, + server: PMA_commonParams.get('server'), + console_bookmark_refresh: 'refresh' }, + function (data) { + if (data.console_message_bookmark) { + $('#pma_bookmarks').find('.content.bookmark').html(data.console_message_bookmark); + this.pmaConsole.pmaConsoleMessages._msgEventBinds($('#pma_bookmarks').find('.message:not(.binded)')); + } + }.bind(this)); + } + /** + * Used for console bookmarks initialize + * message events are already binded by PMA_consoleMsg._msgEventBinds + * + * @return void + */ + initialize () { + var self = this; + if ($('#pma_bookmarks').length === 0) { + return; + } + $('#pma_console').find('.button.bookmarks').click(function () { + self.pmaConsole.showCard('#pma_bookmarks'); + }); + $('#pma_bookmarks').find('.button.add').click(function () { + self.pmaConsole.showCard('#pma_bookmarks .card.add'); + }); + $('#pma_bookmarks').find('.card.add [name=submit]').click(function () { + if ($('#pma_bookmarks').find('.card.add [name=label]').val().length === 0 + || self.pmaConsole.pmaConsoleInput.getText('bookmark').length === 0) { + alert(PMA_messages.strFormEmpty); + return; + } + $(this).prop('disabled', true); + $.post('import.php', + { + ajax_request: true, + console_bookmark_add: 'true', + label: $('#pma_bookmarks').find('.card.add [name=label]').val(), + server: PMA_commonParams.get('server'), + db: $('#pma_bookmarks').find('.card.add [name=targetdb]').val(), + bookmark_query: self.pmaConsole.pmaConsoleInput.getText('bookmark'), + shared: $('#pma_bookmarks').find('.card.add [name=shared]').prop('checked') }, + function () { + self.refresh(); + $('#pma_bookmarks').find('.card.add [name=submit]').prop('disabled', false); + self.pmaConsole.hideCard($('#pma_bookmarks').find('.card.add')); + }); + }); + $('#pma_console').find('.button.refresh').click(function () { + self.refresh(); + }); + } +} diff --git a/js/src/classes/Console/PMA_consoleDebug.js b/js/src/classes/Console/PMA_consoleDebug.js new file mode 100644 index 0000000000..ad063172c4 --- /dev/null +++ b/js/src/classes/Console/PMA_consoleDebug.js @@ -0,0 +1,414 @@ +export default class PMA_consoleDebug { + constructor (instance) { + this.pmaConsole = null; + this._config = { + groupQueries: false, + orderBy: 'exec', // Possible 'exec' => Execution order, 'time' => Time taken, 'count' + order: 'asc' // Possible 'asc', 'desc' + }; + this._lastDebugInfo = { + debugInfo: null, + url: null + }; + this.initialize = this.initialize.bind(this); + this.setPmaConsole = this.setPmaConsole.bind(this); + this._formatFunctionCall = this._formatFunctionCall.bind(this); + this._formatFunctionArgs = this._formatFunctionArgs.bind(this); + this._formatFileName = this._formatFileName.bind(this); + this._formatBackTrace = this._formatBackTrace.bind(this); + this._formatQueryOrGroup = this._formatQueryOrGroup.bind(this); + this._appendQueryExtraInfo = this._appendQueryExtraInfo.bind(this); + this.getQueryDetails = this.getQueryDetails.bind(this); + this.showLog = this.showLog.bind(this); + this.refresh = this.refresh.bind(this); + this.setPmaConsole(instance); + } + setPmaConsole (instance) { + this.pmaConsole = instance; + this.initialize(); + } + initialize () { + var self = this; + // Try to get debug info after every AJAX request + $(document).ajaxSuccess(function (event, xhr, settings, data) { + if (data._debug) { + self.showLog(data._debug, settings.url); + } + }); + + if (self.pmaConsole.config.GroupQueries) { + $('#debug_console').addClass('grouped'); + } else { + $('#debug_console').addClass('ungrouped'); + if (self.pmaConsole.config.OrderBy === 'count') { + $('#debug_console').find('.button.order_by.sort_exec').addClass('active'); + } + } + var orderBy = self.pmaConsole.config.OrderBy; + var order = self.pmaConsole.config.Order; + $('#debug_console').find('.button.order_by.sort_' + orderBy).addClass('active'); + $('#debug_console').find('.button.order.order_' + order).addClass('active'); + + // Initialize actions in toolbar + $('#debug_console').find('.button.group_queries').click(function () { + $('#debug_console').addClass('grouped'); + $('#debug_console').removeClass('ungrouped'); + self.pmaConsole.setConfig('GroupQueries', true); + self.refresh(); + if (self.pmaConsole.config.OrderBy === 'count') { + $('#debug_console').find('.button.order_by.sort_exec').removeClass('active'); + } + }); + $('#debug_console').find('.button.ungroup_queries').click(function () { + $('#debug_console').addClass('ungrouped'); + $('#debug_console').removeClass('grouped'); + self.pmaConsole.setConfig('GroupQueries', false); + self.refresh(); + if (self.pmaConsole.config.OrderBy === 'count') { + $('#debug_console').find('.button.order_by.sort_exec').addClass('active'); + } + }); + $('#debug_console').find('.button.order_by').click(function () { + var $this = $(this); + $('#debug_console').find('.button.order_by').removeClass('active'); + $this.addClass('active'); + if ($this.hasClass('sort_time')) { + self.pmaConsole.setConfig('OrderBy', 'time'); + } else if ($this.hasClass('sort_exec')) { + self.pmaConsole.setConfig('OrderBy', 'exec'); + } else if ($this.hasClass('sort_count')) { + self.pmaConsole.setConfig('OrderBy', 'count'); + } + self.refresh(); + }); + $('#debug_console').find('.button.order').click(function () { + var $this = $(this); + $('#debug_console').find('.button.order').removeClass('active'); + $this.addClass('active'); + if ($this.hasClass('order_asc')) { + self.pmaConsole.setConfig('Order', 'asc'); + } else if ($this.hasClass('order_desc')) { + self.pmaConsole.setConfig('Order', 'desc'); + } + self.refresh(); + }); + + // Show SQL debug info for first page load + if (typeof debugSQLInfo !== 'undefined' && debugSQLInfo !== 'null') { + $('#pma_console').find('.button.debug').removeClass('hide'); + } else { + return; + } + self.showLog(debugSQLInfo); + } + _formatFunctionCall (dbgStep) { + var functionName = ''; + if ('class' in dbgStep) { + functionName += dbgStep.class; + functionName += dbgStep.type; + } + functionName += dbgStep.function; + if (dbgStep.args && dbgStep.args.length) { + functionName += '(...)'; + } else { + functionName += '()'; + } + return functionName; + } + _formatFunctionArgs (dbgStep) { + var $args = $('
'); + if (dbgStep.args.length) { + $args.append('
') + .append( + $('
') + .text( + PMA_sprintf( + PMA_messages.strConsoleDebugArgsSummary, + dbgStep.args.length + ) + ) + ); + for (var i = 0; i < dbgStep.args.length; i++) { + $args.append( + $('
') + .html( + '
' +
+                        escapeHtml(JSON.stringify(dbgStep.args[i], null, '  ')) +
+                        '
' + ) + ); + } + } + return $args; + } + _formatFileName (dbgStep) { + var fileName = ''; + if ('file' in dbgStep) { + fileName += dbgStep.file; + fileName += '#' + dbgStep.line; + } + return fileName; + } + _formatBackTrace (dbgTrace) { + var $traceElem = $('
'); + $traceElem.append( + $('
') + ); + var step; + var $stepElem; + for (var stepId in dbgTrace) { + if (dbgTrace.hasOwnProperty(stepId)) { + step = dbgTrace[stepId]; + if (!Array.isArray(step) && typeof step !== 'object') { + $stepElem = + $('