Merge pull request #14467 from Piyush3079/Mod_Js_Server_Status

Modularize Server Status JS files

js/src/ajax.js

@@ -586,7 +586,8 @@ export let AJAX = {
              * @todo This condition is to be removed once all the files are modularised
              */
             if (checkNewCode(file)) {
-                var fileImports = ['server_privileges', 'server_databases'];
+                var fileImports = ['server_privileges', 'server_databases', 'server_status_advisor',
+                    'server_status_processes', 'server_status_variables',];
                 if ($.inArray(file, fileImports) !== -1) {
                     // Dynamic import to load the files dynamically
                     // This is used for the purpose of code splitting

js/src/classes/ErrorReport.js

@@ -268,13 +268,11 @@ var ErrorReport = {
      * @return function
      */
     wrap_function: function (func) {
-        // console.log(func.wrapped);
         if (!func.wrapped) {
             var new_func = function () {
                 try {
                     return func.apply(this, arguments);
                 } catch (x) {
-                    // console.log(new Error(x));
                     TraceKit.report(x);
                 }
             };
@@ -284,7 +282,6 @@ var ErrorReport = {
             new_func.guid = func.guid = func.guid || new_func.guid || jQuery.guid++;
             return new_func;
         } else {
-            // console.log(func);
             return func;
         }
     },

js/src/classes/Server/ProcessList.js

@@ -0,0 +1,164 @@
+import { PMA_ajaxShowMessage } from '../../utils/show_ajax_messages';
+import { PMA_highlightSQL } from '../../utils/sql';
+import { PMA_Messages as PMA_messages } from '../../variables/export_variables';
+import { PMA_commonParams } from '../../variables/common_params';
+import { PMA_getImage } from '../../functions/get_image';
+import { escapeHtml } from '../../utils/Sanitise';
+import { jQuery as $ } from '../../utils/JqueryExtended';
+// object to store process list state information
+class ProcessList {
+    constructor () {
+        // denotes whether auto refresh is on or off
+        this.autoRefresh = false;
+        // stores the GET request which refresh process list
+        this.refreshRequest = null;
+        // stores the timeout id returned by setTimeout
+        this.refreshTimeout = null;
+        // the refresh interval in seconds
+        this.refreshInterval = null;
+        // the refresh URL (required to save last used option)
+        // i.e. full or sorting url
+        this.refreshUrl = null;
+        this.init = this.init.bind(this);
+        this.killProcessHandler = this.killProcessHandler.bind(this);
+        this.refresh = this.refresh.bind(this);
+        this.abortRefresh = this.abortRefresh.bind(this);
+        this.setRefreshLabel = this.setRefreshLabel.bind(this);
+        this.getUrlParams = this.getUrlParams.bind(this);
+    }
+    /**
+     * Handles killing of a process
+     *
+     * @return void
+     */
+    init () {
+        this.setRefreshLabel();
+        if (this.refreshUrl === null) {
+            this.refreshUrl = 'server_status_processes.php' +
+                PMA_commonParams.get('common_query');
+        }
+        if (this.refreshInterval === null) {
+            this.refreshInterval = $('#id_refreshRate').val();
+        } else {
+            $('#id_refreshRate').val(this.refreshInterval);
+        }
+    }
+
+    /**
+     * Handles killing of a process
+     *
+     * @param object the event object
+     *
+     * @return void
+     */
+    killProcessHandler (event, elementRef) {
+        event.preventDefault();
+        var url = $(elementRef).attr('href');
+        // Get row element of the process to be killed.
+        var $tr = $(elementRef).closest('tr');
+        $.getJSON(url, function (data) {
+            // Check if process was killed or not.
+            if (data.hasOwnProperty('success') && data.success) {
+                // remove the row of killed process.
+                $tr.remove();
+                // As we just removed a row, reapply odd-even classes
+                // to keep table stripes consistent
+                var $tableProcessListTr = $('#tableprocesslist').find('> tbody > tr');
+                $tableProcessListTr.filter(':even').removeClass('odd').addClass('even');
+                $tableProcessListTr.filter(':odd').removeClass('even').addClass('odd');
+                // Show process killed message
+                PMA_ajaxShowMessage(data.message, false);
+            } else {
+                // Show process error message
+                PMA_ajaxShowMessage(data.error, false);
+            }
+        });
+    }
+
+    /**
+     * Handles Auto Refreshing
+     *
+     * @param object the event object
+     *
+     * @return void
+     */
+    refresh () {
+        // abort any previous pending requests
+        // this is necessary, it may go into
+        // multiple loops causing unnecessary
+        // requests even after leaving the page.
+        this.abortRefresh();
+        // if auto refresh is enabled
+        if (this.autoRefresh) {
+            var interval = parseInt(this.refreshInterval, 10) * 1000;
+            var urlParams = this.getUrlParams();
+            this.refreshRequest = $.get(this.refreshUrl,
+                urlParams,
+                function (data) {
+                    if (data.hasOwnProperty('success') && data.success) {
+                        var $newTable = $(data.message);
+                        $('#tableprocesslist').html($newTable.html());
+                        PMA_highlightSQL($('#tableprocesslist'));
+                    }
+                    this.refreshTimeout = setTimeout(
+                        this.refresh,
+                        interval
+                    );
+                }.bind(this));
+        }
+    }
+
+    /**
+     * Stop current request and clears timeout
+     *
+     * @return void
+     */
+    abortRefresh () {
+        if (this.refreshRequest !== null) {
+            this.refreshRequest.abort();
+            this.refreshRequest = null;
+        }
+        clearTimeout(this.refreshTimeout);
+    }
+
+    /**
+     * Set label of refresh button
+     * change between play & pause
+     *
+     * @return void
+     */
+    setRefreshLabel () {
+        var img = 'play';
+        var label = PMA_messages.strStartRefresh;
+        if (this.autoRefresh) {
+            img = 'pause';
+            label = PMA_messages.strStopRefresh;
+            this.refresh();
+        }
+        $('a#toggleRefresh').html(PMA_getImage(img) + escapeHtml(label));
+    }
+
+    /**
+     * Return the Url Parameters
+     * for autorefresh request,
+     * includes showExecuting if the filter is checked
+     *
+     * @return urlParams - url parameters with autoRefresh request
+     */
+    getUrlParams () {
+        var urlParams = { 'ajax_request': true, 'refresh': true };
+        if ($('#showExecuting').is(':checked')) {
+            urlParams.showExecuting = true;
+            return urlParams;
+        }
+        return urlParams;
+    }
+}
+
+/**
+ * Instance is exported to ensure that every time the import
+ * will have the instance only and not the class itself
+ */
+let processList = new ProcessList();
+
+export default processList;

js/src/consts/files.js

@@ -8,7 +8,10 @@
  */
 const files = {
     server_privileges: ['server_privileges'],
-    server_databases: ['server_databases']
+    server_databases: ['server_databases'],
+    server_status_advisor: ['server_status_advisor'],
+    server_status_processes: ['server_status_processes'],
+    server_status_variables: ['server_status_variables'],
 };
 
 export default files;

js/src/server_privileges.js

@@ -15,6 +15,7 @@ import { PMA_Messages as PMA_messages } from './variables/export_variables';
 import { PMA_ajaxShowMessage, PMA_ajaxRemoveMessage } from './utils/show_ajax_messages';
 import { PMA_commonParams } from './variables/common_params';
 import { jQuery as $ } from './utils/JqueryExtended';
+import { PMA_getSQLEditor } from './utils/sql';
 
 /**
  * AJAX scripts for server_privileges page.

js/src/server_status_advisor.js

@@ -0,0 +1,102 @@
+/* vim: set expandtab sw=4 ts=4 sts=4: */
+/**
+ * Server Status Advisor
+ *
+ * @package PhpMyAdmin
+ */
+
+import { PMA_Messages as PMA_messages } from './variables/export_variables';
+
+/**
+ * Unbind all event handlers before tearing down a page
+ */
+export function teardown1 () {
+    $('a[href="#openAdvisorInstructions"]').off('click');
+    $('#statustabs_advisor').html('');
+    $('#advisorDialog').remove();
+    $('#instructionsDialog').remove();
+}
+
+export function onload1 () {
+    // if no advisor is loaded
+    if ($('#advisorData').length === 0) {
+        return;
+    }
+
+    /** ** Server config advisor ****/
+    var $dialog = $('<div />').attr('id', 'advisorDialog');
+    var $instructionsDialog = $('<div />')
+        .attr('id', 'instructionsDialog')
+        .html($('#advisorInstructionsDialog').html());
+
+    $('a[href="#openAdvisorInstructions"]').click(function () {
+        var dlgBtns = {};
+        dlgBtns[PMA_messages.strClose] = function () {
+            $(this).dialog('close');
+        };
+        $instructionsDialog.dialog({
+            title: PMA_messages.strAdvisorSystem,
+            width: 700,
+            buttons: dlgBtns
+        });
+    });
+
+    var $cnt = $('#statustabs_advisor');
+    var $tbody;
+    var $tr;
+    var even = true;
+
+    var data = JSON.parse($('#advisorData').text());
+    $cnt.html('');
+
+    if (data.parse.errors.length > 0) {
+        $cnt.append('<b>Rules file not well formed, following errors were found:</b><br />- ');
+        $cnt.append(data.parse.errors.join('<br/>- '));
+        $cnt.append('<p></p>');
+    }
+
+    if (data.run.errors.length > 0) {
+        $cnt.append('<b>Errors occurred while executing rule expressions:</b><br />- ');
+        $cnt.append(data.run.errors.join('<br/>- '));
+        $cnt.append('<p></p>');
+    }
+
+    if (data.run.fired.length > 0) {
+        $cnt.append('<p><b>' + PMA_messages.strPerformanceIssues + '</b></p>');
+        $cnt.append('<table class="data" id="rulesFired" border="0"><thead><tr>' +
+                    '<th>' + PMA_messages.strIssuse + '</th><th>' + PMA_messages.strRecommendation +
+                    '</th></tr></thead><tbody></tbody></table>');
+        $tbody = $cnt.find('table#rulesFired');
+
+        var rc_stripped;
+
+        $.each(data.run.fired, function (key, value) {
+            // recommendation may contain links, don't show those in overview table (clicking on them redirects the user)
+            rc_stripped = $.trim($('<div>').html(value.recommendation).text());
+            $tbody.append($tr = $('<tr class="linkElem noclick"><td>' +
+                                    value.issue + '</td><td>' + rc_stripped + ' </td></tr>'));
+            even = !even;
+            $tr.data('rule', value);
+
+            $tr.click(function () {
+                var rule = $(this).data('rule');
+                $dialog
+                    .dialog({ title: PMA_messages.strRuleDetails })
+                    .html(
+                        '<p><b>' + PMA_messages.strIssuse + ':</b><br />' + rule.issue + '</p>' +
+                    '<p><b>' + PMA_messages.strRecommendation + ':</b><br />' + rule.recommendation + '</p>' +
+                    '<p><b>' + PMA_messages.strJustification + ':</b><br />' + rule.justification + '</p>' +
+                    '<p><b>' + PMA_messages.strFormula + ':</b><br />' + rule.formula + '</p>' +
+                    '<p><b>' + PMA_messages.strTest + ':</b><br />' + rule.test + '</p>'
+                    );
+
+                var dlgBtns = {};
+                dlgBtns[PMA_messages.strClose] = function () {
+                    $(this).dialog('close');
+                };
+
+                $dialog.dialog({ width: 600, buttons: dlgBtns });
+            });
+        });
+    }
+}

js/src/server_status_processes.js

@@ -0,0 +1,41 @@
+/* vim: set expandtab sw=4 ts=4 sts=4: */
+/**
+ * Server Status Processes
+ *
+ * @package PhpMyAdmin
+ */
+import processList from './classes/Server/ProcessList';
+export function onload1 () {
+    processList.init();
+    // Bind event handler for kill_process
+    $('#tableprocesslist').on('click', 'a.kill_process', function (event) {
+        processList.killProcessHandler(event, this);
+    });
+    // Bind event handler for toggling refresh of process list
+    $('a#toggleRefresh').on('click', function (event) {
+        event.preventDefault();
+        processList.autoRefresh = !processList.autoRefresh;
+        processList.setRefreshLabel();
+    });
+    // Bind event handler for change in refresh rate
+    $('#id_refreshRate').on('change', function (event) {
+        processList.refreshInterval = $(this).val();
+        processList.refresh();
+    });
+    // Bind event handler for table header links
+    $('#tableprocesslist').on('click', 'thead a', function () {
+        processList.refreshUrl = $(this).attr('href');
+    });
+}
+
+/**
+ * Unbind all event handlers before tearing down a page
+ */
+export function teardown1 () {
+    $('#tableprocesslist').off('click', 'a.kill_process');
+    $('a#toggleRefresh').off('click');
+    $('#id_refreshRate').off('change');
+    $('#tableprocesslist').off('click', 'thead a');
+    // stop refreshing further
+    processList.abortRefresh();
+}