Webpack all the things! Fixes #2135

This significantly speeds up loading of the application; in an average of 3 tests, v1.6 loaded in 11.5s in the runtime on a Mac, whilst the webpacked version of the code loaded in 5.53s.
2025-02-25 18:55:31 -06:00 · 2017-07-18 15:13:16 +01:00
parent d04ac7656a
commit 4a91bcde30
406 changed files with 3556 additions and 164707 deletions
--- a/web/pgadmin/misc/init.py
+++ b/web/pgadmin/misc/init.py
@@ -66,7 +66,7 @@ class MiscModule(PgAdminModule):
        Returns:
            list: a list of url endpoints exposed to the client.
        """
-        return ['misc.ping']
+        return ['misc.ping', 'misc.index']


 # Initialise the module
@@ -76,7 +76,7 @@ blueprint = MiscModule(MODULE_NAME, __name__)
 ##########################################################################
 # A special URL used to "ping" the server
 ##########################################################################
-@blueprint.route("/")
+@blueprint.route("/", endpoint='index')
 def index():
    return ''

--- a/web/pgadmin/misc/bgprocess/static/js/bgprocess.js
+++ b/web/pgadmin/misc/bgprocess/static/js/bgprocess.js
@@ -1,4 +1,4 @@
-define([
+define('misc.bgprocess', [
  'pgadmin', 'sources/gettext', 'sources/url_for', 'underscore',
  'underscore.string', 'jquery', 'pgadmin.browser', 'alertify',
  'pgadmin.browser.messages'
@@ -135,12 +135,14 @@ define([
          !self.details && !_.isNull(self.exit_code)
        );

-        var io = ie = 0, res = [],
-            escapeEl = document.createElement('textarea'),
-            escapeHTML = function(html) {
-              escapeEl.textContent = html;
-              return escapeEl.innerHTML;
-            };
+        var io = 0,
+          ie = 0,
+          res = [],
+          escapeEl = document.createElement('textarea'),
+          escapeHTML = function(html) {
+            escapeEl.textContent = html;
+            return escapeEl.innerHTML;
+          };

        while (io < out.length && ie < err.length) {
          if (pgAdmin.natural_sort(out[io][0], err[ie][0]) <= 0){
@@ -452,7 +454,7 @@ define([
            if (!res || !_.isArray(res)) {
              return;
            }
-            for (idx in res) {
+            for (var idx in res) {
              var process = res[idx];
              if ('id' in process) {
                if (!(process.id in observer.bgprocesses)) {
--- a/web/pgadmin/misc/depends/static/js/depends.js
+++ b/web/pgadmin/misc/depends/static/js/depends.js
@@ -1,4 +1,4 @@
-define([
+define('misc.depends', [
  'sources/gettext', 'underscore', 'underscore.string', 'jquery', 'pgadmin.browser',
  'alertify', 'pgadmin.alertifyjs'
 ], function(gettext, _, S, $, pgBrowser, Alertify) {
@@ -6,6 +6,8 @@ define([
  if (pgBrowser.ShowNodeDepends)
    return pgBrowser.ShowNodeDepends;

+  var wcDocker = window.wcDocker;
+
  pgBrowser.ShowNodeDepends = pgBrowser.ShowNodeDepends || {};

  _.extend(pgBrowser.ShowNodeDepends, {
@@ -192,7 +194,7 @@ define([
      var msg = messages[0],
          $container = panel[0].layout().scene().find('.pg-panel-content'),
          $msgContainer = $container.find('.pg-panel-depends-message'),
-          $gridContainer = $container.find('.pg-panel-depends-container');
+          $gridContainer = $container.find('.pg-panel-depends-container'),
          treeHierarchy = node.getTreeNodeHierarchy(item),
          n_value = -1,
          n_type = type;
--- a/web/pgadmin/misc/file_manager/init.py
+++ b/web/pgadmin/misc/file_manager/init.py
@@ -144,6 +144,19 @@ class FileManagerModule(PgAdminModule):
            'file_items': []
        }

+    def get_exposed_url_endpoints(self):
+        """
+        Returns:
+            list: a list of url endpoints exposed to the client.
+        """
+        return [
+            'file_manager.filemanager',
+            'file_manager.index',
+            'file_manager.get_trans_id',
+            'file_manager.delete_trans_id',
+            'file_manager.save_last_dir'
+        ]
+
    def get_file_size_preference(self):
        return self.file_upload_size

@@ -165,7 +178,7 @@ class FileManagerModule(PgAdminModule):
 blueprint = FileManagerModule(MODULE_NAME, __name__)


-@blueprint.route("/")
+@blueprint.route("/", endpoint='index')
@login_required
 def index():
    """Render the preferences dialog."""
@@ -226,7 +239,9 @@ def file_manager_config(trans_id):
        mimetype="application/json")


-@blueprint.route("/get_trans_id", methods=["GET", "POST"])
+@blueprint.route(
+    "/get_trans_id", methods=["GET", "POST"], endpoint='get_trans_id'
+)
@login_required
 def get_trans_id():
    if len(req.data) != 0:
@@ -239,7 +254,10 @@ def get_trans_id():
    )


-@blueprint.route("/del_trans_id/<int:trans_id>", methods=["GET", "POST"])
+@blueprint.route(
+    "/del_trans_id/<int:trans_id>",
+    methods=["GET", "POST"], endpoint='delete_trans_id'
+)
@login_required
 def delete_trans_id(trans_id):
    Filemanager.release_transaction(trans_id)
@@ -248,7 +266,9 @@ def delete_trans_id(trans_id):
    )


-@blueprint.route("/save_last_dir/<int:trans_id>", methods=["POST"])
+@blueprint.route(
+    "/save_last_dir/<int:trans_id>", methods=["POST"], endpoint='save_last_dir'
+)
@login_required
 def save_last_directory_visited(trans_id):
    blueprint.last_directory_visited.set(req.json['path'])
@@ -1126,7 +1146,10 @@ class Filemanager(object):
        return res


-@blueprint.route("/filemanager/<int:trans_id>/", methods=["GET", "POST"])
+@blueprint.route(
+    "/filemanager/<int:trans_id>/",
+    methods=["GET", "POST"], endpoint='filemanager'
+)
@login_required
 def file_manager(trans_id):
    """
--- a/web/pgadmin/misc/file_manager/static/css/file_manager.css
+++ b/web/pgadmin/misc/file_manager/static/css/file_manager.css
@@ -221,7 +221,7 @@ div.clip {
  background: -webkit-linear-gradient(top, rgba(44, 118, 180, 0.71) 0%,rgba(44, 118, 180, 0.98) 100%); /* Chrome10+,Safari5.1+ */
  background: -o-linear-gradient(top, rgba(44, 118, 180, 0.71) 0%,rgba(44, 118, 180, 0.98) 100%); /* Opera 11.10+ */
  background: -ms-linear-gradient(top, rgba(44, 118, 180, 0.71) 0%,rgba(44, 118, 180, 0.98) 100%); /* IE10+ */
-  background: linear-gradient(to bottom, rgba(44, 118, 180, 0.71) 0%,rgba(44, 118, 180, 0.98) 100%)
+  background: linear-gradient(to bottom, rgba(44, 118, 180, 0.71) 0%,rgba(44, 118, 180, 0.98) 100%);
  border-bottom: 1px solid #ccc;
  display: inline-block;
  width: 100%;
@@ -470,14 +470,18 @@ button.list span {
 }

 .file_manager .upload_file #multiple-uploads {
-  background: black;
-  color: white;
-  padding: 0px !important;
  height: calc(100% - 20px);
+  background: #000;
+  color: #fff;
+  padding: 0px !important;
  overflow: auto;
  width: 100%;
 }

+.file_manager .upload_file #multiple-uploads .dz-message {
+  text-align: center;
+}
+
 .fileinfo .prompt-info {
  text-align: center;
  color: #fff;
@@ -591,8 +595,9 @@ button.list span {
 }

 .file_upload_main .dz-progress {
+  float: left;
+  width: 100%;
  height: 21px !important;
-  top: 83px !important;
  border: 1px solid #8a6d3b;
  border-radius: 0 !important;
  -moz-border-radius: 0 !important;
@@ -606,6 +611,8 @@ button.list span {

 .file_upload_main .dz-progress .dz-upload.success {
  background: green !important;
+  float: left;
+  width: 100%;
 }

 a.dz-remove {
--- a/web/pgadmin/misc/file_manager/templates/file_manager/index.html
+++ b/web/pgadmin/misc/file_manager/templates/file_manager/index.html
@@ -1,7 +1,6 @@
 <html>
 <head>
-    <script type="text/javascript" src="{{ url_for('static', filename='vendor/jquery.dropzone/dropzone.js') }}"></script>
-    <script type="text/javascript" src="{{ url_for('file_manager.index') }}utility.js"></script>
+    <link type="text/css" rel="stylesheet" href="{{ url_for('file_manager.static', filename='css/file_manager.css')}}"/>
 </head>
 <body>
 <div class="file_manager">
@@ -55,6 +54,11 @@
        </div>

    </div>
+    <script>
+	require(['sources/generated/file_utils'], function() {
+	    pgAdmin.FileUtils.init();
+    });
+    </script>
 </div>
 </body>
 </html>
--- a/web/pgadmin/misc/file_manager/templates/file_manager/js/file_manager.js
+++ b/web/pgadmin/misc/file_manager/templates/file_manager/js/file_manager.js
@@ -1,8 +1,7 @@
-// This defines File Manager dialog
-define([
-  'sources/gettext', 'jquery', 'underscore', 'alertify',
-  'sources/alerts/alertify_wrapper',
-], function(gettext, $, _, alertify, AlertifyWrapper) {
+define('misc.file_manager', [
+      'sources/gettext', 'sources/url_for', 'jquery', 'underscore', 'alertify',
+      'sources/alerts/alertify_wrapper'
+], function(gettext, url_for, $, _, alertify, AlertifyWrapper) {
    pgAdmin = pgAdmin || window.pgAdmin || {};

    /*
@@ -21,45 +20,43 @@ define([

        this.initialized = true;

-        var module_url = "{{ url_for('file_manager.index') }}",
-            fileConnector = module_url + "filemanager/";
+        // send a request to get transaction id
+        var getTransId = function(configs) {
+          return $.ajax({
+            data: configs,
+            type: "POST",
+            async: false,
+            url: url_for('file_manager.get_trans_id'),
+            dataType: "json",
+            contentType: "application/json; charset=utf-8",
+          });
+        };

-          // send a request to get transaction id
-          var getTransId = function(configs) {
-            return $.ajax({
-              data: configs,
-              type: "POST",
-              async: false,
-              url: module_url + "get_trans_id",
-              dataType: "json",
-              contentType: "application/json; charset=utf-8",
-            });
-          };
+        // Function to remove trans id from session
+        var removeTransId = function(trans_id) {
+          return $.ajax({
+            type: "GET",
+            async: false,
+            url: url_for('file_manager.delete_trans_id', {'trans_id': trans_id}),
+            dataType: "json",
+            contentType: "application/json; charset=utf-8",
+          });
+        };

-          // Function to remove trans id from session
-          var removeTransId = function(trans_id) {
-            return $.ajax({
-              type: "GET",
-              async: false,
-              url: module_url + "del_trans_id/" + trans_id,
-              dataType: "json",
-              contentType: "application/json; charset=utf-8",
-            });
-          };
-
-          var set_last_traversed_dir = function(path, trans_id) {
-            return $.ajax({
-              url: "{{ url_for('file_manager.index') }}save_last_dir/" + trans_id,
-              type: 'POST',
-              data: JSON.stringify(path),
-              contentType: 'application/json'
-            });
-          };
+        var set_last_traversed_dir = function(path, trans_id) {
+          return $.ajax({
+            url: url_for('file_manager.save_last_dir', {'trans_id': trans_id}),
+            type: 'POST',
+            data: JSON.stringify(path),
+            contentType: 'application/json'
+          });
+        };
        // Declare the Storage dialog
        alertify.dialog('storageManagerDlg', function() {
          var controls = [], // Keep tracking of all the backform controls
              // Dialog containter
-              $container = $("<div class='storage_dialog'></div>");
+              $container = $("<div class='storage_dialog'></div>"),
+              trans_id;

          /*
           * Function: renderStoragePanel
@@ -73,12 +70,11 @@ define([
             */
            var content = $container.find('.storage_content');
            content.empty();
-
-            $.get("{{ url_for('file_manager.index') }}", function(data) {
+            $.get(url_for('file_manager.index'), function(data) {
              content.append(data);
            });

-            transId = getTransId(params);
+            var transId = getTransId(params);
            var t_res;
            if (transId.readyState == 4) {
              t_res = JSON.parse(transId.responseText);
@@ -181,6 +177,7 @@ define([
          var controls = [], // Keep tracking of all the backform controls
              // Dialog containter
              $container = $("<div class='storage_dialog file_selection_dlg'></div>");
+          var trans_id;

          // send a request to get transaction id
          /*
@@ -196,11 +193,11 @@ define([
            var content = $container.find('.storage_content');
            content.empty();

-            $.get("{{ url_for('file_manager.index') }}", function(data) {
+            $.get(url_for('file_manager.index'), function(data) {
              content.append(data);
            });

-            transId = getTransId(configs);
+            var transId = getTransId(configs);
            var t_res;
            if (transId.readyState == 4) {
              t_res = JSON.parse(transId.responseText);
@@ -305,7 +302,8 @@ define([
        alertify.dialog('folderSelectionDlg', function() {
          var controls = [], // Keep tracking of all the backform controls
              // Dialog containter
-              $container = $("<div class='storage_dialog folder_selection_dlg'></div>");
+              $container = $("<div class='storage_dialog folder_selection_dlg'></div>"),
+              trans_id;

          // send a request to get transaction id
          /*
@@ -321,11 +319,11 @@ define([
            var content = $container.find('.storage_content');
            content.empty();

-            $.get("{{ url_for('file_manager.index') }}", function(data) {
+            $.get(url_for('file_manager.index'), function(data) {
              content.append(data);
            });

-            transId = getTransId(params);
+            var transId = getTransId(params);
            var t_res;
            if (transId.readyState == 4) {
              t_res = JSON.parse(transId.responseText);
@@ -428,7 +426,8 @@ define([
        alertify.dialog('createModeDlg', function() {
          var controls = [], // Keep tracking of all the backform controls
              // Dialog containter
-              $container = $("<div class='storage_dialog create_mode_dlg'></div>");
+              $container = $("<div class='storage_dialog create_mode_dlg'></div>"),
+              trans_id;

          /*
           * Function: renderStoragePanel
@@ -443,11 +442,11 @@ define([
            var content = $container.find('.storage_content');
            content.empty();

-            $.get("{{ url_for('file_manager.index') }}", function(data) {
+            $.get(url_for('file_manager.index'), function(data) {
              content.append(data);
            });

-            transId = getTransId(params);
+            var transId = getTransId(params);
            var t_res;
            if (transId.readyState == 4) {
              t_res = JSON.parse(transId.responseText);
@@ -561,12 +560,12 @@ define([
              $.ajax({
                type: 'POST',
                data: JSON.stringify(file_data),
-                url: fileConnector + trans_id+'/',
+                url: url_for('file_manager.filemanager', {'trans_id': trans_id}),
                dataType: 'json',
                contentType: "application/x-download; charset=utf-8",
                async: false,
                success: function(resp) {
-                  data = resp.data.result;
+                  var data = resp.data.result;
                  if(data['Code'] === 1) {
                    is_exist = true;
                  } else {
@@ -586,7 +585,7 @@ define([
              $.ajax({
                type: 'POST',
                data: JSON.stringify(post_data),
-                url: fileConnector + trans_id+'/',
+                url: url_for('file_manager.filemanager', {'trans_id': trans_id}),
                dataType: 'json',
                contentType: "application/json; charset=utf-8",
                async: false,
--- a/web/pgadmin/misc/file_manager/templates/file_manager/js/utility.js
+++ b/web/pgadmin/misc/file_manager/templates/file_manager/js/utility.js
--- a/web/pgadmin/misc/sql/static/js/sql.js
+++ b/web/pgadmin/misc/sql/static/js/sql.js
@@ -1,4 +1,4 @@
-define([
+define('misc.sql', [
  'sources/gettext', 'underscore', 'underscore.string', 'jquery', 'pgadmin.browser',
  'alertify', 'pgadmin.alertifyjs'
 ], function(gettext, _, S, $, pgBrowser, Alertify) {
@@ -8,6 +8,7 @@ define([
  if (pgBrowser.ShowNodeSQL.initialized) {
    return pgBrowser.ShowNodeSQL;
  }
+  var wcDocker = window.wcDocker;

  _.extend(pgBrowser.ShowNodeSQL, {
    init: function() {
@@ -17,6 +18,7 @@ define([
      this.initialized = true;
      _.bindAll(this, 'showSQL', 'sqlPanelVisibilityChanged');

+      var sqlPanels;
      this.sqlPanels = sqlPanels = pgBrowser.docker.findPanels('sql');

      // We will listend to the visibility change of the SQL panel
@@ -64,6 +66,7 @@ define([
       **/
      this.timeout && clearTimeout(this.timeout);

+      var that = this;
      this.timeout =  setTimeout(
        function() {
          var sql = '';
@@ -75,11 +78,11 @@ define([
                treeHierarchy = node.getTreeNodeHierarchy(item);

            // Avoid unnecessary reloads
-            if (_.isEqual($(this.sqlPanels[0]).data('node-prop'), treeHierarchy)) {
+            if (_.isEqual($(that.sqlPanels[0]).data('node-prop'), treeHierarchy)) {
              return;
            }
            // Cache the current IDs for next time
-            $(this.sqlPanels[0]).data('node-prop', treeHierarchy);
+            $(that.sqlPanels[0]).data('node-prop', treeHierarchy);

            if (node.hasSQL) {

--- a/web/pgadmin/misc/statistics/static/js/statistics.js
+++ b/web/pgadmin/misc/statistics/static/js/statistics.js
@@ -1,5 +1,6 @@
-define([
-  'sources/gettext', 'underscore', 'underscore.string', 'jquery', 'pgadmin.browser', 'backgrid',
+define('misc.statistics', [
+  'sources/gettext', 'underscore', 'underscore.string', 'jquery',
+  'pgadmin.browser', 'backgrid',
  'alertify', 'sources/size_prettify'
 ], function(gettext, _, S, $, pgBrowser, Backgrid, Alertify, sizePrettify) {

@@ -350,7 +351,7 @@ define([

    __createSingleLineStatistics: function(data, prettifyFields) {
      var row = data['rows'][0],
-          columns = data['columns']
+          columns = data['columns'],
          res = [];

      this.columns = this.statistic_columns;
--- a/web/pgadmin/misc/templates/explain/js/explain.js
+++ b/web/pgadmin/misc/templates/explain/js/explain.js
@@ -1,7 +1,7 @@
 define (
  'pgadmin.misc.explain',
-  ['jquery', 'underscore', 'underscore.string', 'pgadmin', 'backbone', 'snap.svg'],
-  function($, _, S, pgAdmin, Backbone, Snap) {
+  ['sources/url_for', 'jquery', 'underscore', 'underscore.string', 'pgadmin', 'backbone', 'snapsvg'],
+  function(url_for, $, _, S, pgAdmin, Backbone, Snap) {

 pgAdmin = pgAdmin || window.pgAdmin || {};
 var pgExplain = pgAdmin.Explain;
@@ -86,7 +86,7 @@ if (pgAdmin.Explain)

 var pgExplain = pgAdmin.Explain = {
   // Prefix path where images are stored
-   prefix: '{{ url_for('misc.static', filename='explain/img') }}/'
+   prefix: url_for('misc.index') + 'static/explain/img/'
 };

 /*
@@ -198,8 +198,10 @@ var imageMapper = {
 }

 // Some predefined constants used to calculate image location and its border
-var pWIDTH = pHEIGHT = 100.
-    IMAGE_WIDTH = IMAGE_HEIGHT = 50;
+var pWIDTH =100.;
+var pHEIGHT = 100.;
+var IMAGE_WIDTH =50;
+var IMAGE_HEIGHT = 50;
 var offsetX = 200,
    offsetY = 60;
 var ARROW_WIDTH = 10,
@@ -214,7 +216,7 @@ var xMargin = 25,
 var MIN_ZOOM_FACTOR = 0.01,
    MAX_ZOOM_FACTOR = 2,
    INIT_ZOOM_FACTOR = 1;
-    ZOOM_RATIO = 0.05;
+var ZOOM_RATIO = 0.05;


 // Backbone model for each plan property of input JSON object
@@ -589,7 +591,7 @@ _.extend(
                }).appendTo(zoomArea).append(
                  $('<i></i>',{
                    class: 'fa fa-arrows-alt'
-                  }))
+                  })),
              zoomOutBtn = $('<button></button>', {
                class: 'btn pg-explain-zoom-btn badge',
                title: 'Zoom out'